Agent Skill + MCP Server for AI Coding Tools

Install the inliner-ai skill/plugin so models recognize visual-asset workflows, then use @inliner/mcp-server for live generation, editing, project, usage, and plan tools.

Stack of Apple Mac Minis with glowing LED lights in cozy desk setup with warm lighting

What is MCP?

The Model Context Protocol (MCP) is an open standard that allows AI assistants to interact with external tools and services. With the Inliner MCP server, your AI coding agent can:

Build hosted image URLs and HTML image tags for web projects
Generate images and save them to your project or local files
Edit existing Inliner URLs or local files with AI instructions
Check your credit usage and plan details
Create, list, and inspect your Inliner projects and generated images
Get recommended dimensions for common use cases

Make the Agent Inliner-Aware

MCP exposes tools, while the canonical skill teaches models when to use them. Installing both prevents URL recommendations from being mistaken for generated assets and keeps generation, editing, and project creation routed safely.

Current releases: @inliner/agent-skill v1.3.0 and @inliner/mcp-server v1.1.1. MCP 1.1.1 publishes its tool-selection rules during initialization and returns MCP-safe structured output for array-valued API responses.

OpenAI Codex plugin

codex plugin marketplace add inliner-ai/agent-skill --ref v1.3.0
codex plugin add inliner-ai@inliner-ai

Gemini CLI extension

gemini extensions install https://github.com/inliner-ai/agent-skill

For Claude Code and other skill-compatible agents, install skills/inliner-ai from the agent-skill repository. Cursor users can install the dedicated Cursor plugin.

MCP-Only Setup by Platform

Claude Code

claude mcp add inliner -- npx -y @inliner/mcp-server

OpenAI Codex CLI

MCP-only installation

codex mcp add inliner --env INLINER_API_KEY=inl_your-api-key-here -- npx -y @inliner/mcp-server

Manual ~/.codex/config.toml

[mcp_servers.inliner]
command = "npx"
args = ["-y", "@inliner/mcp-server"]

[mcp_servers.inliner.env]
INLINER_API_KEY = "inl_your-api-key-here"

Gemini CLI

Add to ~/.gemini/settings.json

{
  "mcpServers": {
    "inliner": {
      "type": "stdio",
      "command": "npx",
      "args": ["-y", "@inliner/mcp-server"],
      "env": {
        "INLINER_API_KEY": "inl_your-api-key-here"
      }
    }
  }
}

Cursor / VS Code

Create .cursor/mcp.json in project root

{
  "mcpServers": {
    "inliner": {
      "type": "stdio",
      "command": "npx",
      "args": ["-y", "@inliner/mcp-server"],
      "env": {
        "INLINER_API_KEY": "inl_your-api-key-here",
        "INLINER_DEFAULT_PROJECT": "your-project-namespace"
      }
    }
  }
}

Windsurf

Add to Windsurf MCP settings

{
  "mcpServers": {
    "inliner": {
      "type": "stdio",
      "command": "npx",
      "args": ["-y", "@inliner/mcp-server"],
      "env": { "INLINER_API_KEY": "your-key" }
    }
  }
}

GitHub Copilot

Add to VS Code MCP settings

{
  "mcpServers": {
    "inliner": {
      "type": "stdio",
      "command": "npx",
      "args": ["-y", "@inliner/mcp-server"],
      "env": {
        "INLINER_API_KEY": "inl_your-api-key-here"
      }
    }
  }
}

API Key: Generate an API key from Account > API Keys in the Inliner dashboard. Use the env field in MCP configuration for better compatibility with all clients. For Cursor project config, use .cursor/mcp.json; for global config, use ~/.cursor/mcp.json or Cursor's MCP settings UI.

Materialize before insertion: Use generate_image for a new asset that will be shipped. Use recommend_image_url only for naming or URL planning; it does not generate an image.

Available Tools

recommend_image_url

Recommend a concise smart slug, URL, and HTML snippet without generating an asset

generate_image

Generate and host a completed image, poll until ready, and optionally save it locally

Compatibility aliases

generate_image_url and create_image remain available for older clients but are deprecated

edit_image

Edit an existing image by URL or upload a local image, apply edits, and save

get_projects

List all your Inliner projects with namespaces and settings

create_project

Create a new project and reserve a namespace for image generation

get_project_details

Get detailed project config: namespace, custom prompt, reference images

get_usage

Check remaining credits (image, edit, infill, enhance)

get_current_plan

View current subscription plan and feature allocations

list_images

List generated images with optional project filter

get_image_dimensions

Get recommended dimensions for common use cases (hero, product, profile, etc.)

Example Interactions

Once installed, you can talk to your AI agent naturally:

"Add a hero image to the landing page for my acme-corp project"

I'll generate a hero image for your landing page. Let me get your project details and create the image...

<img src="https://img.inliner.ai/acme-corp/hero-landing-page-modern-saas_1920x1080.png" alt="Modern SaaS landing page hero" />

Edit vs Generate Intent

When a user asks to modify an existing image ("make it bigger", "resize this", "change this image"), route to edit_image with a source URL/path. Only generate a new image when requested explicitly or when no source exists.

"Resize this image to 600x600 without changing the subject"

I'll call edit_image using your previous image as sourcePath/sourceUrl, apply a resize instruction, and return the edited output.

"Generate a happy duck image and save it to ./images/duck.png"

I'll generate that image and save it to your project. Polling until ready...

Done! Image saved to ./images/duck.png

"Edit this local photo to remove the background and resize to 400x400"

I'll upload the file, apply the background removal edit, resize to 400x400, and save the result...

Done! The edited image has been saved.

"How many image credits do I have left?"

You have 847 image credits remaining this month (out of 1200 on your Pro plan), plus 92 edit credits and 180 infill credits.

"Create a new project called my-portfolio for my personal website"

I'll create that project for you...

Done! Project 'my-portfolio' has been created. You can now use it for generating images with --project my-portfolio or in URLs like https://img.inliner.ai/my-portfolio/...

Resources

Use the canonical packages and the MCP resource for implementation details:

inliner://guide - Quick reference for URL format, dimensions, and style hints
Inliner agent skill and plugin on GitHub
@inliner/agent-skill on npm
@inliner/mcp-server on npm
Inliner Cursor plugin

Pro Tip: The MCP server works alongside the CLI tool. Use the CLI for batch processing and scripts, and the MCP server for interactive AI-assisted development.