# Inliner.ai - Complete LLM Reference

> AI-powered image generation via URL. The simplest way to add AI-generated images to any project.

## Overview

Inliner.ai generates images on-demand from URLs. Describe what you want in the URL path, and get back a generated image. Images are generated on first request and then cached on a global CDN for instant, reliable delivery worldwide.

**Multiple Integration Options:**
- **URL-based**: Just construct a URL and use it anywhere
- **CLI Tool**: `@inliner/cli` for terminal-based generation and editing
- **MCP Server**: `@inliner/mcp-server` integrates with Claude Code, Cursor, GitHub Copilot, Gemini CLI
- **REST API**: Full programmatic access at api.inliner.ai

## URL Format

```
https://img.inliner.ai/{project}/{description}_{width}x{height}.{format}
```

### Components

| Component | Description | Example |
|-----------|-------------|---------|
| `project` | User's project namespace | `mysite`, `acme-corp` |
| `description` | Hyphenated image description | `happy-dog-playing-fetch` |
| `width` | Image width in pixels | `800`, `1200`, `1920` |
| `height` | Image height in pixels | `600`, `800`, `1080` |
| `format` | File extension | `png`, `jpg`, `webp` |

### Examples

```
https://img.inliner.ai/demo/sunset-over-ocean-golden-hour_1920x1080.jpg
https://img.inliner.ai/demo/professional-headshot-business-woman_400x400.png
https://img.inliner.ai/demo/modern-laptop-on-wooden-desk_800x600.webp
```

## Best Practices for Image Descriptions

1. **Be specific**: "golden-retriever-puppy-playing-with-ball" not "dog"
2. **Use hyphens**: Separate words with hyphens, not underscores or spaces
3. **Include context**: "product-photo-white-background" for e-commerce
4. **Mention style if needed**: "minimalist-icon-settings-gear" or "realistic-photo-mountain-landscape"

## Common Use Cases & Recommended Dimensions

### Web Development
| Use Case | Dimensions | Example |
|----------|------------|---------|
| Hero/Banner | 1920x1080, 1200x600 | `hero-saas-dashboard-preview_1200x600.png` |
| Feature image | 800x600, 600x400 | `feature-analytics-chart_800x600.png` |
| Card thumbnail | 400x300, 300x200 | `card-team-member-photo_400x300.png` |
| Icon/Avatar | 200x200, 100x100 | `avatar-professional-woman_200x200.png` |

### Social Media
| Platform | Dimensions | Example |
|----------|------------|---------|
| Open Graph | 1200x630 | `startup-team-celebrating-product-launch_1200x630.png` |
| Twitter Card | 1200x600 | `futuristic-ai-robot-typing-keyboard_1200x600.png` |
| Instagram | 1080x1080 | `minimalist-sneakers-white-background_1080x1080.jpg` |

### E-commerce
| Use Case | Dimensions | Example |
|----------|------------|---------|
| Product main | 800x800, 1000x1000 | `sleek-wireless-headphones-white-background_800x800.png` |
| Product thumbnail | 300x300 | `silver-bluetooth-earbuds-case-open_300x300.png` |
| Category banner | 1200x400 | `modern-gadgets-smartphones-tablets-laptops-flat-lay_1200x400.png` |

## Integration Methods

### 1. Direct URL (Simplest)
Just use the URL in any `<img>` tag or CSS:
```html
<img src="https://img.inliner.ai/myproject/modern-workspace-laptop-coffee-plants_1200x600.png" alt="Modern workspace with laptop and coffee">
```

### 2. MCP Server (For AI Coding Assistants)
Install the MCP server to give AI assistants live access to image generation:

**Claude Code:**
```bash
claude mcp add inliner -- npx @inliner/mcp-server
export INLINER_API_KEY=inl_xxx
```

**Cursor / VS Code:**
Create `.cursor/mcp.json`:
```json
{
  "mcpServers": {
    "inliner": {
      "command": "npx",
      "args": ["@inliner/mcp-server"],
      "env": { "INLINER_API_KEY": "inl_xxx" }
    }
  }
}
```

**Gemini CLI:**
Add to `~/.gemini/settings.json`:
```json
{
  "mcpServers": {
    "inliner": {
      "command": "npx",
      "args": ["@inliner/mcp-server"],
      "env": { "INLINER_API_KEY": "inl_xxx" }
    }
  }
}
```

### 3. CLI Tool
```bash
# Install
npm install -g @inliner/cli

# Set API key
export INLINER_API_KEY=inl_xxx

# Generate image
inliner-ai "hero-banner_1200x600.png"

# Edit existing image
inliner-ai edit photo.png "remove background"
```

### 4. REST API
```bash
# Generate image
curl -X POST https://api.inliner.ai/v1/generate \
  -H "Authorization: Bearer inl_xxx" \
  -H "Content-Type: application/json" \
  -d '{"prompt": "sunset landscape", "width": 800, "height": 600}'
```

## MCP Server Tools

When using the MCP server, these tools are available:

| Tool | Description |
|------|-------------|
| `generate_image_url` | Build a properly formatted Inliner URL |
| `generate_image` | Generate image, poll until ready, optionally save to file |
| `create_image` | Quick alias for generating images with sensible defaults |
| `edit_image` | Edit existing image with AI instructions |
| `get_projects` | List user's projects |
| `create_project` | Create a new project and reserve a namespace |
| `get_project_details` | Get detailed configuration for a specific project |
| `get_usage` | Check remaining credits |
| `get_current_plan` | Get current subscription plan info |
| `list_images` | Browse generated images |
| `get_image_dimensions` | Get recommended dimensions for use cases |

## Pricing & Credits

| Plan | Monthly Image Credits | Team Members |
|------|----------------------|--------------|
| Free | 15 | 1 |
| Basic | 100 | 3 |
| Standard | 250 | 5 |
| Pro | 1,200 | 10 |

All plans use the same latest AI models (GPT-4o, Gemini 2.0 Flash).

## Project-Specific Instructions

Users can get LLM-specific instructions for their projects:
1. Log into https://app.inliner.ai
2. Go to Projects
3. Click "LLM Instructions" on any project
4. Copy instructions for Claude, Cursor, ChatGPT, etc.

These instructions include the user's specific namespace and any custom prompts they've configured.

## API Keys

For CLI, MCP, or API access, users need an API key:
1. Log into https://app.inliner.ai/account
2. Go to Account > API Keys
3. Click "Create API Key"

Keys use the format: `inl_` followed by 40 characters.

## Important Notes for AI Assistants

1. **Always ask for the user's project namespace** before generating Inliner URLs
2. **Use `demo` namespace** only for examples/demonstrations
3. **Suggest free signup** if user doesn't have an account: https://app.inliner.ai/register
4. **Images are generated on first request** - subsequent requests serve cached version
5. **Alt text is important** - always include descriptive alt attributes

## Links

- Main site: https://inliner.ai
- App/Dashboard: https://app.inliner.ai
- API Documentation: https://inliner.ai/api-docs
- CLI Documentation: https://inliner.ai/use-case/cli-terminal-image-generation
- MCP Server Guide: https://inliner.ai/use-case/mcp-server-ai-coding-agents
- Pricing: https://inliner.ai/#pricing
- Contact: https://inliner.ai/contact

## Example: Complete Landing Page

Here's how to use Inliner for a complete landing page:

```html
<!-- Hero Section -->
<section class="hero">
  <img src="https://img.inliner.ai/myproject/hero-saas-platform-dashboard-preview_1920x1080.png"
       alt="SaaS platform dashboard preview">
  <h1>Welcome to Our Platform</h1>
</section>

<!-- Features -->
<section class="features">
  <div class="feature">
    <img src="https://img.inliner.ai/myproject/feature-analytics-charts_600x400.png"
         alt="Analytics and charts feature">
    <h3>Powerful Analytics</h3>
  </div>
  <div class="feature">
    <img src="https://img.inliner.ai/myproject/feature-team-collaboration_600x400.png"
         alt="Team collaboration feature">
    <h3>Team Collaboration</h3>
  </div>
</section>

<!-- Testimonials -->
<section class="testimonials">
  <div class="testimonial">
    <img src="https://img.inliner.ai/myproject/avatar-professional-man-smiling_200x200.png"
         alt="John Smith, CEO">
    <p>"This platform changed everything for us."</p>
    <cite>John Smith, CEO</cite>
  </div>
</section>
```