MCP Server & API

MCP server

A hosted Model Context Protocol server over streamable HTTP. Nothing to install or run locally — point your client at the URL and the tools appear.

claude mcp add --transport http codetoimage https://codetoimage.com/mcp

{
  "mcpServers": {
    "codetoimage": {
      "url": "https://codetoimage.com/mcp"
    }
  }
}

codex mcp add codetoimage -- npx -y mcp-remote https://codetoimage.com/mcp

Tools

REST API

One request in, an image out. POST a JSON body or GET with query parameters — both return PNG or SVG bytes directly, so you can hotlink the URL in a README or an <img> tag.

curl -X POST https://codetoimage.com/api/image \
  -H 'Content-Type: application/json' \
  -d '{
    "code": "const answer = 42;",
    "language": "javascript",
    "theme": "dracula",
    "windowTitle": "answer.js"
  }' \
  --output code.png

https://codetoimage.com/api/image
  ?code=const%20answer%20%3D%2042%3B
  &language=javascript
  &theme=dracula
  &scale=2

Machine-readable schema at /api/openapi.json. Every accepted theme, language, font, and gradient is listed at /api/options.json.

Parameters

The same fields work in the API, the MCP tools, and share links. Only code is required.

Errors

Every 4xx and 5xx response is application/json with the same three fields — never an HTML error page. Branch on code, which is stable; the error wording may change.

{
  "error": "\"code\" is required (string, max 20000 chars)",
  "code": "missing_code",
  "hint": "Pass the snippet as the \"code\" field (POST body) or ?code= (GET)."
}

Typed as the Error schema in /api/openapi.json.

Share links

Editor state is just JSON, base64url-encoded into the URL fragment. Hand someone a /#s= link and the editor opens with exactly your snippet and styling. Swap /#s= for /api/image?s= and the same state renders as an image — one format for both.

const state = {
  code: 'const answer = 42;',
  language: 'javascript',
  theme: 'dracula',
};

// base64url-encode the state — this is the whole share format
const blob = btoa(JSON.stringify(state))
  .replace(/\+/g, '-')
  .replace(/\//g, '_')
  .replace(/=+$/, '');

const editUrl  = `https://codetoimage.com/#s=${blob}`;
const imageUrl = `https://codetoimage.com/api/image?s=${blob}`;

Agent skill

Prefer skills over tool definitions? Install the whole workflow — rendering, share links, and style options — in one command.

npx skills add https://codetoimage.com

Reads /.well-known/agent-skills/. You can also read SKILL.md or llms.txt directly.

Privacy

The web editor renders entirely in your browser — code you paste there never leaves your device. The API and MCP server do receive the snippet you send them; they render it statelessly and store nothing. As with any hosted service, don't send private or sensitive source code without authorization.