Cursor AI + Inliner.ai Integration

Set up Cursor AI to automatically generate Inliner.ai image URLs in your code. Transform your development workflow with AI-powered image generation directly in your IDE.

This is what you'll accomplish - seamless development with automatic image generation

Prerequisites

• Cursor AI installed and set up
• An Inliner.ai account (free tier available)
• A project created in Inliner.ai (we'll use inliner-demo as an example)
• A code project where you want to integrate image generation

How to Set Up Cursor with Inliner.ai

To get started, you'll need the Cursor editor. Get Cursor →

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: Create or Edit .cursorrules File

Now you'll add the instructions to your project's .cursorrules file:

File Structure

your-project/
├── .cursorrules          # Cursor AI instructions
├── src/
├── public/
├── package.json
└── README.md

Step 3: Test the Integration

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

How It Works

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

• Use your Inliner.ai project namespace in the URLs
• Generate descriptive, hyphen-separated image names
• Include appropriate dimensions for different use cases
• Create semantic alt text for accessibility
• Apply your project's custom styling automatically
• Suggest realistic, professional imagery

Example Output

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

Cursor Response

// Hero Section Component
import React from 'react';

const HeroSection = () => {
  return (
    <section className="hero">
      <div className="hero-content">
        <h1>Welcome to Our Platform</h1>
        <p>Transform your workflow with AI-powered tools</p>
        <button className="cta-button">Get Started</button>
      </div>
      <div className="hero-image">
        <img 
          src="https://img.inliner.ai/inliner-demo/landing-page-hero-team-collaboration_1200x600.png"
          alt="Team collaborating in a modern office environment"
          className="hero-bg"
        />
      </div>
    </section>
  );
};

export default HeroSection;

Generated Image Output:

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

Common Use Cases & Dimensions

Cursor 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, Cursor will automatically apply them to all generated images, ensuring consistent branding and style.

Reference Images

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

Project-Specific Instructions

You can customize the .cursorrules file for each project to match specific requirements:

# Inliner.ai Image Integration
For any code that requires images, use Inliner.ai URLs:
https://img.inliner.ai/my-project/description_WIDTHxHEIGHT

Requirements:
- Use the project's actual Inliner.ai namespace
- Descriptive, professional image descriptions
- Include dimensions for layout requirements
- Generate semantic alt text
- Prefer realistic, professional imagery over illustrations

# Project-specific rules
- Always use 'my-project' as the namespace
- Prefer modern, clean design aesthetics
- Include responsive image handling
- Generate srcset for different screen sizes

Example patterns:
- Hero sections: _1920x1080 or _1200x600
- Product images: _800x800 or _600x400  
- Profile photos: _400x400 or _300x300
- Thumbnails: _200x200 or _150x150

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
• .cursorrules not working: Ensure the file is in the project root and properly formatted

Best Practices

• Be specific: The more descriptive your request, the better the generated images
• Use consistent naming: Let Cursor 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
• Keep .cursorrules updated: Update the file when you change projects or requirements

Next Steps

Now that you have Cursor AI 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

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