Claude AI + Inliner.ai Integration

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

Claude AI assistant generating code with images

Claude AI + Inliner.ai = Seamless image generation

This tutorial will show you how to configure Claude AI to automatically generate Inliner.ai image URLs when you request code that includes images. By adding specific instructions to your Claude project settings, you'll enable seamless image generation without leaving your development workflow.

Prerequisites

A Claude AI 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)

Important: Replace inliner-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 Claude with Inliner.ai

To get started, you'll need a Claude account. Go to the official Claude site →

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, click the Copy button next to "Claude AI"

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 Claude AI Project Instructions

Now you'll add the instructions to your Claude AI project settings:

Open your Claude AI project
Go to Project Settings (gear icon)
Scroll down to the Instructions section
Paste the instructions you copied from Inliner.ai
Click Save

Step 3: Test the Integration

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

Example Prompts to Test

"Create a React component for a hero section with a background image"
"Generate HTML for a product showcase with multiple product images"
"Build a landing page with hero, features, and testimonial sections"
"Create a portfolio website with project thumbnails"

How It Works

When you ask Claude 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

Example Output

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

Claude's Response

<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-collaboration-modern-office_1200x600.png"
         alt="Team collaborating in a modern office environment"
         class="hero-bg">
  </div>
</section>

Generated Image Output:

Team collaborating in a modern office environment

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

Common Use Cases & Dimensions

Claude will automatically use appropriate dimensions based on the context:

Use Case	Dimensions	Example
Hero images	1200x600, 1920x1080	`hero-banner-startup-team_1200x600`
Profile photos	400x400, 300x300	`professional-headshot-business-person_400x400`
Product images	800x800, 600x600	`product-showcase-lifestyle-photo_800x800`
Feature cards	600x400, 800x600	`dashboard-analytics-charts-graphs_600x400`

Advanced Features

Custom Prompts

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

Reference Images

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

Pro Tip: You can ask Claude to generate multiple variations of the same image by requesting different styles or compositions. Each will create a unique URL that you can use for A/B testing.

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

Best Practices

Be specific: The more descriptive your request, the better the generated images
Use consistent naming: Let Claude 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

Workflow Tip: Once set up, you can ask Claude to generate entire image sets for landing pages, portfolios, or marketing materials in a single conversation. The AI will create all the necessary URLs with appropriate dimensions and descriptions.

Next Steps

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

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