Gemini + Inliner.ai Integration

Set up Google Gemini to automatically generate Inliner.ai image URLs in your code. Transform your development workflow with AI-powered image generation using custom instructions.

Google Gemini + Inliner.ai = Seamless AI-powered development

Prerequisites

• A Google Gemini account (free or paid)
• An Inliner.ai account (free tier available)
• A project created in Inliner.ai (we'll use inliner-demo as an example)

How to Set Up Gemini with Inliner.ai

To get started, you'll need a Gemini account. Visit Gemini →

Step 1: Get Your Inliner.ai Project Instructions

First, you need to get the specific instructions for your Inliner.ai project. Here's how:

Step 2: Configure Gemini Custom Instructions

Now you'll add the instructions to your Gemini custom instructions:

Step 3: Test the Integration

Now you can test the integration by asking Gemini to generate code with images:

How It Works

When you ask Gemini to generate code that includes images, it will now automatically:

• Ask for your Inliner.ai project name if not provided
• Use your project namespace in the URLs
• Generate descriptive, hyphen-separated image names
• Include appropriate dimensions for different use cases
• Create meaningful alt text for accessibility
• Prefer professional, realistic imagery
• Leverage Gemini's multimodal capabilities for better image descriptions

Example Output

Here's what Gemini will generate when you ask for a hero section:

Gemini's Response

<!-- Hero Section -->
<section class="hero">
  <div class="hero-content">
    <h1>Welcome to Our Platform</h1>
    <p>Transform your workflow with AI-powered tools</p>
    <button class="cta-button">Get Started</button>
  </div>
  <div class="hero-image">
    <img 
      src="https://img.inliner.ai/inliner-demo/team-working-modern-office-collaboration_800x600.png"
      alt="Team working together in a modern office environment"
      class="hero-bg"
    >
  </div>
</section>

Generated Image Output:

The image above was generated using the URL from the code example. Notice how Gemini automatically creates a professional, realistic image that perfectly fits the hero section context.

Common Use Cases & Dimensions

Gemini will automatically use appropriate dimensions based on the context:

Advanced Features

Custom Prompts

If you've set up custom prompts in your Inliner.ai project, Gemini will automatically apply them to all generated images, ensuring consistent branding and style.

Reference Images

If your project has reference images uploaded, Gemini can reference them in the generated URLs to maintain visual consistency with your brand assets.

Multimodal Capabilities

Gemini's multimodal capabilities allow it to better understand and describe images, leading to more accurate and detailed image prompts:

Project-Specific Instructions

You can customize the instructions for different projects by asking Gemini to use specific project names:

User: "Generate a landing page for my SaaS project. Use the project name 'inliner-demo' for all images."

Gemini: "I'll create a landing page using your 'inliner-demo' project for all images. Here's the code:

<section class=\"hero\">
  <img src=\"https://img.inliner.ai/inliner-demo/saas-hero-banner_1920x600.png\"
       alt=\"SaaS hero banner with modern UI\"
       class=\"hero-image\">
</section>

<section class=\"products\">
  <img src=\"https://img.inliner.ai/inliner-demo/product-showcase-grid_1200x800.png\"
       alt=\"Product showcase grid\"
       class=\"product-grid\">
</section>"

Troubleshooting

Common Issues

• Images not generating: Make sure you're logged into Inliner.ai and the project exists
• Wrong project namespace: Double-check the project name in your Inliner.ai dashboard
• Poor image quality: Try adding more descriptive prompts or adjusting dimensions
• Style inconsistencies: Check your project's custom prompt settings
• Custom instructions not working: Ensure you've saved the custom instructions and started a new conversation

Best Practices

• Be specific: The more descriptive your request, the better the generated images
• Use consistent naming: Let Gemini handle the URL generation for consistency
• Test different dimensions: Experiment with various sizes for different use cases
• Leverage custom prompts: Set up project-level styling for automatic brand consistency
• Start new conversations: Custom instructions work best in fresh conversations
• Use multimodal features: Share reference images to get better results

Next Steps

Now that you have Google Gemini integrated with Inliner.ai, you can:

• Generate complete landing pages with all images included
• Create marketing materials with consistent branding
• Build portfolio websites with professional imagery
• Develop product showcases with high-quality visuals
• Create social media graphics and banners
• Add images to existing components and pages
• Leverage Gemini's multimodal capabilities for better image descriptions

Ready to transform your development workflow? Start generating images with Google Gemini and Inliner.ai today!