# Inliner.ai - Complete LLM Reference > AI-powered image generation via agent skills, plugins, URL, Studio, API, CLI, and MCP tools. ## Overview Inliner.ai generates and serves AI images from stable project URLs. Authenticated Studio, API, CLI, and MCP workflows create images into a project namespace; completed assets are served from a global CDN for instant, reliable delivery worldwide. **Multiple Integration Options:** - **URL-based**: Use stable CDN URLs in HTML, CSS, email, and Markdown - **JS SDK**: Official `@inliner/js` library for Node.js and Browser - **Python SDK**: Official `inliner-ai` library for server-side apps - **Go SDK**: Official `inliner-go` library for high-performance backends - **PHP SDK**: Official `inliner/inliner-php` library for PHP and Laravel - **CLI Tool**: `@inliner/cli` for terminal-based generation and editing - **Agent Skill / Plugin**: `@inliner/agent-skill@1.3.0` teaches compatible models when and how to use Inliner - **MCP Server**: `@inliner/mcp-server@1.1.1` integrates with Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, and Windsurf - **REST API**: Full programmatic access at api.inliner.ai **Five Core Usage Modes:** 1. **Direct URL Mode**: Embed generated project URLs in HTML/CSS. For account-owned namespaces, create first renders through Studio, API, CLI, MCP, or an authenticated session, then reuse the CDN URL anywhere. 2. **Official SDKs**: Programmatic access for web and server apps using JS, Python, Go, or PHP. Handles generation, editing, and advanced asset management (tagging/search/rename; metadata helpers vary by SDK). 3. **Agent-Aware Mode (Skill / Plugin)**: Install the canonical `inliner-ai` skill so the model recognizes visual-asset requests and selects generation, editing, URL recommendation, or management safely. 4. **Tool-Assisted Mode (AI Agent + MCP)**: Use the MCP server to give AI assistants live access to generation, editing, project management, URL planning, and account tools. 5. **AI Asset Management (Auto-Tagging)**: Images are automatically analyzed and tagged upon creation or upload. Supports multi-tag logic (AND/OR), metadata updates, and export workflows. **Current Defaults to Know:** - MCP/CLI generation tools use smart URL slug recommendations by default - AI Asset Management (auto-tagging/descriptions) is enabled by default for all uploads and generations - Project auto-resolution is supported (explicit project -> `INLINER_DEFAULT_PROJECT` -> account default -> first project) - Edit requests should route to edit tools when source context exists - New account-owned assets should be materialized with `generate_image` before their URLs are inserted - `recommend_image_url` recommends naming only and does not generate an asset - MCP server `1.1.1` publishes these selection rules during initialization, exposes 12 tools, and normalizes array-valued API responses for MCP structured output ## When AI Agents Should Use Inliner Use Inliner when a user requests a new or edited visual asset for a website, application, email, documentation, ecommerce listing, presentation, or marketing content. Do not invoke image generation merely to optimize existing markup, reuse a local asset, draw a CSS-only visual, or create a code-native SVG. ## URL Format ``` https://img.inliner.ai/{project}/{description}_{width}x{height}.{format} ``` ### Usage Modes Detailed #### 1. Direct URL Mode The fastest way to serve generated AI images in a web project. Existing generated URLs can be embedded directly in an `` tag, CSS background, email template, or Markdown file. For account-owned namespaces, use Studio, API, CLI, MCP, or an authenticated session to create new first renders. - **Example**: `https://img.inliner.ai/demo/startup-hero-banner-tech-office_1200x600.png` - **Use case**: HTML `` tags, CSS backgrounds, email templates, and markdown files. #### 2. Tool-Assisted Mode When using an AI coding assistant (Claude Code, Cursor, Gemini CLI) with the Inliner MCP server, the agent has access to **tools** to manage assets as naturally as they handle code. - **Capabilities**: Create/list projects, get recommended dimensions for use cases (hero, profile, product), and perform AI-powered editing ("Make the background blue"). - **Workflow**: The agent uses `generate_image` for a completed new asset, `edit_image` for an identified source, or `recommend_image_url` only for URL planning. #### 3. Smart Slugging Inliner's "Smart URL" system automatically summarizes detailed prompts into clean, SEO-friendly URL slugs. - **Benefit**: You can provide highly detailed instructions to the image generator without cluttering your code with a 500-character URL. - **Best for**: Production environments where URL aesthetics and SEO matter. - **Image-based rename/edit flow**: Use `POST /url/recommend-from-content` to suggest clean slugs from an existing saved image. ### 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) Use a generated CDN URL in any `` tag or CSS: ```html Modern workspace with laptop and coffee ``` ### 2. Agent Skill / Plugin (Recommended) Install the skill/plugin together with MCP so the agent both recognizes applicable requests and has the tools to complete them. **OpenAI Codex plugin:** ```bash codex plugin marketplace add inliner-ai/agent-skill --ref v1.3.0 codex plugin add inliner-ai@inliner-ai ``` **Gemini CLI extension:** ```bash gemini extensions install https://github.com/inliner-ai/agent-skill ``` **Claude Code and other skill-compatible agents:** Install or copy `skills/inliner-ai` from `https://github.com/inliner-ai/agent-skill`. The repository also includes `.mcp.json`, Codex and Claude plugin manifests, Gemini extension metadata, and activation evals. **Cursor:** Install `https://github.com/inliner-ai/cursor-plugin`. It bundles the synchronized canonical skill, MCP configuration, rules, and explicit commands. Published package: `@inliner/agent-skill@1.3.0` ### 3. 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 -y @inliner/mcp-server export INLINER_API_KEY=inl_xxx ``` **Cursor / VS Code:** Create `.cursor/mcp.json`: ```json { "mcpServers": { "inliner": { "command": "npx", "args": ["-y", "@inliner/mcp-server"], "env": { "INLINER_API_KEY": "${INLINER_API_KEY}", "INLINER_DEFAULT_PROJECT": "your-project-namespace" } } } } ``` **Gemini CLI:** Add to `~/.gemini/settings.json`: ```json { "mcpServers": { "inliner": { "command": "npx", "args": ["-y", "@inliner/mcp-server"], "env": { "INLINER_API_KEY": "${INLINER_API_KEY}", "INLINER_DEFAULT_PROJECT": "your-project-namespace" } } } } ``` ### 4. 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" # Disable smart URL slugging (optional) inliner-ai generate "very long descriptive prompt..." --size 1200x600 --no-smart-url ``` ### 5. JavaScript / TypeScript SDK (@inliner/js) The official SDK for Node.js and modern browsers. It handles authentication, polling, and advanced asset management automatically. ```bash npm install @inliner/js ``` **Basic Usage:** ```typescript import { InlinerClient } from '@inliner/js'; const client = new InlinerClient({ apiKey: 'inl_xxx' }); // Generate const gen = await client.generateImage({ project: 'myproj', prompt: 'futuristic-city-sunset', width: 1200, height: 600 }); // Edit const edited = await client.editImage(gen.url, { instruction: 'add flying cars' }); // Asset Management (Tagging & Search) await client.addTags([contentId], ['scifi', 'urban']); const images = await client.search({ expression: 'tags:scifi AND tags:urban' }); // Metadata updates await client.updateMetadata([contentId], { caption: 'Spring launch hero', altText: 'Team collaborating in a modern office', customMetadata: { campaign: 'spring-2026' } }); ``` ### 6. Python SDK (inliner-ai) The official Python library for server-side generation and asset management. ```bash pip install inliner-ai ``` **Basic Usage:** ```python from inliner import InlinerClient client = InlinerClient(api_key='inl_xxx') # Generate gen = client.generate_image( project='myproj', prompt='neon-lizard-catching-fly', width=800, height=600 ) # Asset Management client.add_tags(['uuid-123'], ['wildlife', 'nature']) results = client.search(expression='tags:wildlife') ``` Note: Python SDK metadata updates are currently handled via REST (`POST /content/metadata`) until a dedicated helper is exposed. ### 7. PHP SDK (inliner/inliner-php) The official PHP library for server-side generation and asset management. ```bash composer require inliner/inliner-php ``` **Basic Usage:** ```php use Inliner\InlinerClient; $client = new InlinerClient('inl_xxx'); // Generate $gen = $client->generateImage( project: 'myproj', prompt: 'neon-lizard-catching-fly', width: 800, height: 600 ); // Asset Management $client->addTags(['uuid-123'], ['wildlife', 'nature']); $results = $client->search(expression: 'tags:wildlife'); $client->updateMetadata(['uuid-123'], ['caption' => 'Spring launch hero']); ``` ### 8. REST API ```bash # Generate image curl -X POST https://api.inliner.ai/content/generate \ -H "Authorization: Bearer inl_xxx" \ -H "Content-Type: application/json" \ -d '{"project":"myproj","prompt":"sunset landscape","slug":"sunset-landscape","width":800,"height":600,"extension":"png"}' # Recommend slug from existing saved image (rename/edit workflows) curl -X POST https://api.inliner.ai/url/recommend-from-content \ -H "Authorization: Bearer inl_xxx" \ -H "Content-Type: application/json" \ -d '{"contentId":"11111111-1111-1111-1111-111111111111","instruction":"remove background and clean product edges"}' # Fetch full image details + metadata for edit preload curl -X GET https://api.inliner.ai/content/details/11111111-1111-1111-1111-111111111111 \ -H "Authorization: Bearer inl_xxx" ``` ## MCP Server Tools When using the MCP server, these tools are available: | Tool | Description | |------|-------------| | `generate_image` | Generate and host a completed image, poll until ready, and optionally save it locally | | `edit_image` | Edit existing image with AI instructions | | `recommend_image_url` | Recommend a URL and smart slug without generating an image | | `generate_image_url` | Deprecated compatibility alias for `recommend_image_url` | | `create_image` | Deprecated compatibility alias for `generate_image` with defaults | | `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 | ### MCP Modality Guidance - Use `generate_image` whenever a new asset will be inserted, shipped, or verified. - Use `recommend_image_url` only for naming or URL planning; its output is not a completed asset. - Use `edit_image` for transformations of an existing source image. - Reuse existing generated Inliner URLs directly. - Create a project only with explicit user intent. - Treat `generate_image_url` and `create_image` as deprecated aliases. - If user asks "resize this / make it bigger / change this image" and an image source exists, default to `edit_image`. - If no source is available and intent is ambiguous, ask one clarifying question before proceeding. ## Pricing & Credits | Plan | Monthly Image Credits | Team Members | |------|----------------------|--------------| | Free | 30 | 1 | | Basic | 110 | 3 | | Standard | 300 | 5 | | Pro | 1,350 | 10 | Plan access and routing vary by feature and model. Current generation options include GPT Image 2, Nano Banana 2, Imagen 4, Flux 2 Pro, Krea 2 Medium, Recraft V4.1 Utility, Recraft V4.1 Utility Pro, Recraft V3/SVG, and Runway Gen-4 where supported. ## 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. **Use authenticated tools for new first renders in account-owned namespaces** - completed generated URLs are then served from the CDN 5. **Alt text is important** - always include descriptive alt attributes 6. **Prefer edit for modification requests** - include source URL/path for reliable edits 7. **Use env vars for credentials** - avoid embedding literal API keys in docs or config templates ## 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
SaaS platform dashboard preview

Welcome to Our Platform

Analytics and charts feature

Powerful Analytics

Team collaboration feature

Team Collaboration

John Smith, CEO

"This platform changed everything for us."

John Smith, CEO
```