CreativeAI
Back to Blog
Tutorial

How to Generate Images from Claude Using MCP and CreativeAI

March 8, 20269 min read

The Model Context Protocol (MCP) is the hottest pattern in AI development right now. It lets LLMs like Claude call external tools — search the web, query databases, generate images — through a standardized interface. And one of the most requested use cases is image generation: "Claude, make me a product photo" and actually get one back.

This tutorial shows you how to build an MCP server that connects Claude (or any MCP-compatible LLM) to CreativeAI's multi-model image API. By the end, you'll have a working tool that generates images from natural language prompts inside Claude Desktop, Claude Code, or any MCP client.

What Is MCP?

The Model Context Protocol is an open standard (created by Anthropic) that defines how LLMs interact with external tools and data sources. Think of it as a USB-C port for AI — a universal connector that works with any compatible model and any compatible tool.

An MCP server exposes "tools" that an LLM can call. Each tool has a name, a description, and a schema for its inputs. When Claude decides it needs to generate an image, it calls your MCP tool with the right parameters, and your server handles the API call to CreativeAI.

The result: Claude can generate images, edit them, and even create videos — all through natural conversation.

Why CreativeAI + MCP?

  • Multi-model access — One tool gives Claude access to GPT Image 1, Flux, Seedream, and more. Claude can pick the best model for the task.
  • OpenAI-compatible API — If you've ever used the OpenAI SDK, you already know the API format.
  • Image editing — Support for /v1/images/edits enables conversational refinement: "make the background warmer", "remove the text", "add a shadow."
  • Pay-per-use — No subscription. Claude generates images only when you ask, and you pay only for what's generated.
  • Automatic failover — If one model provider is down, CreativeAI routes to another. Your MCP tool stays reliable.

Architecture Overview

┌──────────────┐     MCP Protocol     ┌──────────────────┐     HTTPS     ┌─────────────────┐
│  Claude /     │ ◄──────────────────► │  Your MCP Server │ ────────────► │  CreativeAI API │
│  Claude Code  │   tool calls + resp  │  (Node.js/Python)│   REST calls  │  Multi-model    │
└──────────────┘                       └──────────────────┘               └─────────────────┘

Claude sends a tool call → your MCP server receives it → calls CreativeAI's API → returns the generated image URL to Claude.

Option 1: Node.js / TypeScript MCP Server

This is the recommended approach for most developers. We'll use the official @modelcontextprotocol/sdk package.

Step 1: Initialize the Project

mkdir creativeai-mcp && cd creativeai-mcp
npm init -y
npm install @modelcontextprotocol/sdk openai
npm install -D typescript @types/node
npx tsc --init

Step 2: Build the MCP Server

Create src/index.ts:

import { McpServer } from "@modelcontextprotocol/sdk/server/mcp.js";
import { StdioServerTransport } from "@modelcontextprotocol/sdk/server/stdio.js";
import { z } from "zod";  // or use inline schemas
import OpenAI from "openai";

const client = new OpenAI({
  baseURL: "https://api.creativeai.run/v1",
  apiKey: process.env.CREATIVEAI_API_KEY!,
});

const server = new McpServer({
  name: "creativeai-image",
  version: "1.0.0",
});

// Tool 1: Generate an image from a text prompt
server.tool(
  "generate_image",
  "Generate an AI image from a text prompt. Returns the image URL. " +
    "Supports models: gpt-image-1, flux-pro, seedream-3. " +
    "Use gpt-image-1 for best quality, flux-pro for photorealism.",
  {
    prompt: z.string().describe("Detailed image description"),
    model: z.enum(["gpt-image-1", "flux-pro", "seedream-3"])
      .default("gpt-image-1")
      .describe("Which model to use"),
    size: z.enum(["1024x1024", "1536x1024", "1024x1536"])
      .default("1024x1024")
      .describe("Image dimensions"),
    quality: z.enum(["standard", "hd"]).default("hd")
      .describe("Generation quality"),
  },
  async ({ prompt, model, size, quality }) => {
    const response = await client.images.generate({
      model,
      prompt,
      size: size as any,
      quality: quality as any,
      n: 1,
    });
    const url = response.data[0]?.url;
    return {
      content: [
        { type: "text", text: url
            ? `Image generated successfully!\n\nURL: ${url}\nModel: ${model}\nSize: ${size}`
            : "Image generation failed — no URL returned." },
      ],
    };
  }
);

// Tool 2: Edit an existing image with a prompt
server.tool(
  "edit_image",
  "Edit an existing image using AI. Provide the image URL and " +
    "describe the changes you want. Great for iterative refinement.",
  {
    image_url: z.string().url().describe("URL of the image to edit"),
    prompt: z.string().describe("What changes to make"),
    model: z.enum(["gpt-image-1"]).default("gpt-image-1"),
    size: z.enum(["1024x1024", "1536x1024", "1024x1536"])
      .default("1024x1024"),
  },
  async ({ image_url, prompt, model, size }) => {
    // Download the source image
    const imgResp = await fetch(image_url);
    const imgBuffer = Buffer.from(await imgResp.arrayBuffer());
    const imgFile = new File([imgBuffer], "input.png", {
      type: "image/png",
    });

    const response = await client.images.edit({
      model,
      image: imgFile,
      prompt,
      size: size as any,
    });
    const url = response.data[0]?.url;
    return {
      content: [
        { type: "text", text: url
            ? `Image edited successfully!\n\nURL: ${url}\nChanges: ${prompt}`
            : "Image editing failed — no URL returned." },
      ],
    };
  }
);

// Start the server
const transport = new StdioServerTransport();
await server.connect(transport);
console.error("CreativeAI MCP server running on stdio");

Step 3: Configure Claude Desktop

Add this to your Claude Desktop config (~/Library/Application Support/Claude/claude_desktop_config.json on macOS):

{
  "mcpServers": {
    "creativeai-image": {
      "command": "npx",
      "args": ["tsx", "/path/to/creativeai-mcp/src/index.ts"],
      "env": {
        "CREATIVEAI_API_KEY": "your-api-key-here"
      }
    }
  }
}

Restart Claude Desktop. You'll see a hammer icon (🔨) indicating MCP tools are available. Now just ask Claude: "Generate a product photo of wireless earbuds on a marble surface."

Option 2: Python MCP Server

If you prefer Python, here's the equivalent using the mcp package:

# pip install mcp openai
from mcp.server.fastmcp import FastMCP
from openai import OpenAI

client = OpenAI(
    base_url="https://api.creativeai.run/v1",
    api_key="your-api-key-here",
)

mcp = FastMCP("creativeai-image")

@mcp.tool()
def generate_image(
    prompt: str,
    model: str = "gpt-image-1",
    size: str = "1024x1024",
) -> str:
    """Generate an AI image from a text prompt.
    Returns the image URL.
    Models: gpt-image-1 (best quality), flux-pro (photorealistic), seedream-3.
    Sizes: 1024x1024, 1536x1024, 1024x1536.
    """
    response = client.images.generate(
        model=model,
        prompt=prompt,
        size=size,
        quality="hd",
        n=1,
    )
    url = response.data[0].url
    return f"Image generated: {url}" if url else "Generation failed"

@mcp.tool()
def edit_image(
    image_url: str,
    prompt: str,
    model: str = "gpt-image-1",
) -> str:
    """Edit an existing image. Provide the image URL and
    describe the changes you want."""
    import httpx
    img_bytes = httpx.get(image_url).content
    response = client.images.edit(
        model=model,
        image=("input.png", img_bytes, "image/png"),
        prompt=prompt,
    )
    url = response.data[0].url
    return f"Image edited: {url}" if url else "Edit failed"

if __name__ == "__main__":
    mcp.run(transport="stdio")

Using It with Claude Code

Claude Code (Anthropic's CLI coding agent) supports MCP tools natively. Add your server to .claude/settings.json:

{
  "mcpServers": {
    "creativeai-image": {
      "command": "npx",
      "args": ["tsx", "./creativeai-mcp/src/index.ts"],
      "env": {
        "CREATIVEAI_API_KEY": "your-key"
      }
    }
  }
}

Now Claude Code can generate images inline while building your app: "Create a hero image for this landing page" → generates it → saves it to your project → references it in the code. All in one flow.

Conversational Image Refinement

This is where MCP + CreativeAI really shines. Instead of generating once and re-prompting from scratch, you can have a conversation with Claude about your image:

You: Generate a product photo of a ceramic coffee mug, minimalist style, soft morning light.

Claude: [calls generate_image] Here's your image: [URL]. The mug has a matte finish with warm cream tones against a light wood surface.

You: Nice, but make the background darker — more moody.

Claude: [calls edit_image with the previous URL] Done — I darkened the background to a deep charcoal. The mug now pops more against the contrast. [URL]

You: Perfect. Now make a version with a plant in the background.

Claude: [calls edit_image again] Added a blurred monstera leaf in the background for depth. [URL]

Three iterations, three API calls, total cost: ~$0.06. This "conversational editing" workflow is what makes GPT Image 1 the top-rated model on LM Arena — and with MCP, you get it natively inside Claude.

Advanced: Adding Video Generation

You can extend the same MCP server with video generation tools:

server.tool(
  "generate_video",
  "Generate an AI video from a text prompt. Returns a task ID " +
    "that can be polled for the video URL.",
  {
    prompt: z.string(),
    model: z.enum(["kling-v3-pro", "seedance-2", "kling-o3-pro"])
      .default("kling-v3-pro"),
    duration: z.number().min(1).max(15).default(5),
    aspect_ratio: z.enum(["16:9", "9:16", "1:1"]).default("16:9"),
  },
  async ({ prompt, model, duration, aspect_ratio }) => {
    const resp = await fetch("https://api.creativeai.run/v1/video/generate", {
      method: "POST",
      headers: {
        Authorization: `Bearer ${process.env.CREATIVEAI_API_KEY}`,
        "Content-Type": "application/json",
      },
      body: JSON.stringify({ model, prompt, duration, aspect_ratio }),
    });
    const data = await resp.json();
    return {
      content: [{
        type: "text",
        text: `Video generation started!\nTask ID: ${data.task_id}\nModel: ${model}\nDuration: ${duration}s\n\nPoll status at: GET /v1/video/status/${data.task_id}`,
      }],
    };
  }
);

Now Claude can generate both images and videos through natural language. "Create a 5-second product video of those earbuds rotating" — and it just works.

Why This Pattern Is Taking Off

The MCP + multi-model API pattern is trending because it solves three problems at once:

  1. Natural interface — You describe what you want in plain English. No parameter tuning, no prompt engineering, no model selection anxiety. Claude handles the details.
  2. Iterative refinement — Edit images conversationally instead of starting from scratch each time. This is how the best AI image tools work (GPT Image 1 tops LM Arena scores because of this pattern).
  3. No vendor lock-in — Your MCP server abstracts the model layer. Switch from GPT Image 1 to Flux Pro by changing one string. Your Claude workflow doesn't change.

Developers on Substack and Hacker News are calling this "the right way to do AI image generation" — and with CreativeAI's OpenAI-compatible API, the integration takes under 30 minutes.

Get Started

  1. Get an API key at creativeai.run/signup — includes free credits
  2. Clone the MCP server from this tutorial (or build your own)
  3. Add it to Claude Desktop or Claude Code
  4. Start generating — "Create a logo for my startup" and go from there