Bolt AI + Inliner.ai Integration

Set up Bolt AI to automatically generate Inliner.ai image URLs when building full-stack applications. Perfect for rapid prototyping and development.

Project management dashboard with Kanban boards and team analytics built with Bolt AI

Bolt AI + Inliner.ai = Full-stack apps with professional images

This tutorial will show you how to configure Bolt AI to automatically generate Inliner.ai image URLs when building full-stack applications. By adding custom instructions to your Bolt AI conversations, you'll enable seamless image generation for all your projects.

Prerequisites

Access to Bolt AI (bolt.new)
An Inliner.ai account (free tier available)
A project created in Inliner.ai (we'll use saas-demo as an example)

Important: Replace saas-demo with your actual project namespace from Inliner.ai. Each project has a unique namespace that appears in your image URLs.

How to Set Up Bolt AI with Inliner.ai

To get started, you'll need access to Bolt AI. Go to Bolt AI →

Step 1: Get Your Inliner.ai Project Instructions

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

Log into your Inliner.ai account
Go to the Projects section
Find your project and click the LLM Instructions button
In the modal that opens, copy the instructions for your AI assistant

Pro Tip: If you haven't created a project yet, create one first in Inliner.ai. The project name will be used in all your image URLs.

Step 2: Configure Bolt AI with Custom Instructions

In Bolt AI, you can provide custom instructions at the beginning of your conversation. Here's how to set it up:

Custom Instructions Template for Bolt AI

Bolt AI Custom Instructions

IMPORTANT: For any images in the applications you build, use Inliner.ai URLs:

**Project Instructions:**
[PASTE YOUR INLINER.AI PROJECT INSTRUCTIONS HERE]

**When building applications:**
- For hero images, use descriptive prompts like "modern web application hero image"
- For icons, use specific descriptions like "settings icon" or "user profile icon"
- For placeholders, use relevant descriptions like "blog post thumbnail" or "product image"
- For illustrations, use contextual descriptions like "team collaboration illustration"
- Always generate appropriate alt text for accessibility

**Example Inliner.ai URL format:**
https://img.inliner.ai/your-project-name/your-image-description_style-modern_1200x600.webp

Build applications with professional-looking images that match the project's theme and branding.

⚠️ Important: Replace your-project-name in the URL above with your actual project namespace from Inliner.ai. You can copy the complete project-specific URL from the LLM Instructions modal in your Inliner.ai project dashboard - it includes integration-specific clipboard content ready to paste.

Step 3: Start Building with Bolt AI

Now you can ask Bolt AI to build applications and it will automatically include Inliner.ai image URLs. Here are some example prompts:

Example Prompts for Bolt AI

Landing Page: "Build a modern SaaS landing page for a productivity app"
E-commerce: "Create an online store for handmade jewelry"
Portfolio: "Build a photographer's portfolio website"
Blog: "Create a tech blog with article cards"
Dashboard: "Build an analytics dashboard for a marketing agency"

🎯 Real Example: Building a SaaS Landing Page

Let's see how Bolt AI generates code with Inliner.ai images when building a SaaS landing page:

Bolt AI Generated Code Example

<!-- Hero Section -->
<section class="hero">
  <div class="hero-content">
    <h1>Boost Your Team's Productivity</h1>
    <p>Streamline workflows and collaborate better with our AI-powered platform.</p>
    <button class="cta-button">Start Free Trial</button>
  </div>
  <div class="hero-image">
    <img src="https://img.inliner.ai/saas-demo/productivity-team-collaboration-dashboard_modern-interface_1200x600.webp" 
         alt="Team collaboration dashboard showing productivity metrics and project management tools">
  </div>
</section>

<!-- Features Section -->
<section class="features">
  <div class="feature-card">
    <img src="https://img.inliner.ai/saas-demo/analytics-charts-icon_modern-style_64x64.webp" 
         alt="Analytics charts icon">
    <h3>Advanced Analytics</h3>
    <p>Get insights into your team's performance with detailed analytics.</p>
  </div>
  <div class="feature-card">
    <img src="https://img.inliner.ai/saas-demo/collaboration-icon_modern-style_64x64.webp" 
         alt="Team collaboration icon">
    <h3>Team Collaboration</h3>
    <p>Work together seamlessly with real-time collaboration tools.</p>
  </div>
</section>

Generated Images Preview:

Example of generated luxury real estate property listing image

Images are automatically generated and optimized for your application

🔧 Advanced Configuration

Project-Specific Styling

You can customize the generated images to match your project's branding by updating your Inliner.ai project settings:

Brand Colors: Set primary and secondary colors in your project
Style Guidelines: Define preferred visual styles (modern, minimalist, corporate, etc.)
Reference Images: Upload reference images to maintain consistency
Aspect Ratios: Specify preferred dimensions for different use cases

Common Use Cases in Bolt AI

Here are typical scenarios where Bolt AI will automatically generate Inliner.ai images:

Hero Sections: Main banner images for landing pages
Feature Icons: Icons representing different features or services
Product Images: Placeholder images for e-commerce applications
Profile Pictures: User avatars and profile images
Blog Thumbnails: Article preview images
Background Images: Section backgrounds and decorative elements

💡 Best Practices

Be Descriptive: Use clear, detailed descriptions for better image generation
Specify Dimensions: Include width and height for optimal results
Use Consistent Naming: Keep your project namespace consistent
Test Responsiveness: Ensure images work well on different screen sizes
Include Alt Text: Always provide meaningful alt text for accessibility

🐛 Troubleshooting

Common Issues and Solutions

Images not generating: Check if your project instructions are properly formatted
Wrong image style: Update your project settings or be more specific in descriptions
Slow loading: Use appropriate image dimensions and WebP format
Inconsistent branding: Set brand colors and style guidelines in your project

Pro Tip: Save your custom instructions as a template in Bolt AI so you can reuse them for multiple projects. This ensures consistency across all your applications.

🎉 Next Steps

Now that you've set up Bolt AI with Inliner.ai integration, you can:

Build full-stack applications with professional images
Experiment with different image styles and formats
Create multiple projects for different clients or use cases
Explore advanced features like reference images and custom styling

Ready to revolutionize your development workflow? Start building with Bolt AI and Inliner.ai today! 🚀