Give your agent a real image rendering tool.

Three ways to give your agent the tool

MCP setup – Claude Desktop

Edit ~/Library/Application Support/Claude/claude_desktop_config.json (macOS) or %APPDATA%\Claude\claude_desktop_config.json (Windows):

{
  "mcpServers": {
    "codetoimage": {
      "command": "npx",
      "args": ["-y", "@codetoimage/mcp-server"],
      "env": {
        "CODETOIMAGE_API_KEY": "cti_live_..."
      }
    }
  }
}

Restart Claude Desktop. Now try a prompt like:

“Render a 1200x630 card with a dark gradient background, our logo bottom-left, and the headline ‘Q4 revenue up 38%’ in Inter 72px. Return a hosted URL so I can post it to Slack.”

Claude writes the HTML, picks render_html_to_url, returns the link. No prompt engineering, no tool selection hints needed.

Non-MCP agent – LangChain Tool wrapper

For LangChain, OpenAI function-calling, or any agent framework that takes Tool definitions, wrap the REST API:

// tools/renderImage.ts
import { tool } from "@langchain/core/tools";
import { z } from "zod";

export const renderImage = tool(
  async ({ html, width, height, format }) => {
    const res = await fetch("https://api.codetoimage.app/v1/render", {
      method: "POST",
      headers: {
        "X-API-Key": process.env.CODETOIMAGE_API_KEY!,
        "Content-Type": "application/json",
      },
      body: JSON.stringify({
        html,
        width: width ?? 1200,
        height: height ?? 630,
        format: format ?? "png",
        output: "url",
      }),
    });
    if (!res.ok) throw new Error(`render failed: ${res.status}`);
    const { url } = await res.json();
    return url;
  },
  {
    name: "render_image",
    description:
      "Render HTML/CSS to a pixel-perfect image. Returns a 24h hosted URL. Use for cards, certificates, OG images, charts – anything where layout precision matters.",
    schema: z.object({
      html: z.string().describe("Full HTML with inline CSS or <style> block"),
      width: z.number().optional(),
      height: z.number().optional(),
      format: z.enum(["png", "jpeg", "webp"]).optional(),
    }),
  }
);

Same shape works for OpenAI function calling – replace the wrapper with a JSON schema and call from your agent loop.

vs LLM image generation

What you get

FAQ