CodePic MCP

Let your AI coding agent draw editable diagrams — not another Mermaid snippet you have to paste.

Generate editable hand-drawn diagrams from Cursor, Claude Desktop, and other MCP clients.

CodePic MCP lets an AI coding agent create diagrams directly in CodePic instead of returning static images, Mermaid snippets, or JSON that you have to paste manually. The result opens in the CodePic editor, where you can still move shapes, edit labels, adjust connectors, share a read-only link, and export PNG or JSON.

Quick Start

It's a remote Streamable HTTP server — no local install. First create a free API key (the cpk_... token) at https://codepic.cc/settings/api-keys (sign in → New API key → copy), then add the config for your client and replace cpk_your_api_key_here.

Cursor

Create .cursor/mcp.json in your project:

{
  "mcpServers": {
    "codepic": {
      "url": "https://codepic.cc/api/mcp/mcp",
      "headers": {
        "Authorization": "Bearer cpk_your_api_key_here"
      }
    }
  }
}

Claude Code

Add it with one command:

claude mcp add --transport http codepic https://codepic.cc/api/mcp/mcp \
  --header "Authorization: Bearer cpk_your_api_key_here"

Claude Desktop

Add CodePic to your claude_desktop_config.json:

{
  "mcpServers": {
    "codepic": {
      "type": "streamableHttp",
      "url": "https://codepic.cc/api/mcp/mcp",
      "headers": {
        "Authorization": "Bearer cpk_your_api_key_here"
      }
    }
  }
}

VS Code (GitHub Copilot)

Add CodePic to .vscode/mcp.json:

{
  "servers": {
    "codepic": {
      "type": "http",
      "url": "https://codepic.cc/api/mcp/mcp",
      "headers": {
        "Authorization": "Bearer cpk_your_api_key_here"
      }
    }
  }
}

Codex CLI

Add CodePic to ~/.codex/config.toml:

[mcp_servers.codepic]
url = "https://codepic.cc/api/mcp/mcp"

[mcp_servers.codepic.headers]
Authorization = "Bearer cpk_your_api_key_here"

Windsurf

Add CodePic to ~/.codeium/windsurf/mcp_config.json:

{
  "mcpServers": {
    "codepic": {
      "serverUrl": "https://codepic.cc/api/mcp/mcp",
      "headers": {
        "Authorization": "Bearer cpk_your_api_key_here"
      }
    }
  }
}

Cline

Open Cline's MCP settings (cline_mcp_settings.json) and add:

{
  "mcpServers": {
    "codepic": {
      "type": "streamableHttp",
      "url": "https://codepic.cc/api/mcp/mcp",
      "headers": {
        "Authorization": "Bearer cpk_your_api_key_here"
      }
    }
  }
}

Other clients

Any MCP client that supports remote Streamable HTTP works — point it at the endpoint https://codepic.cc/api/mcp/mcp with header Authorization: Bearer cpk_....

Available MCP Tools

• list_templates - list available diagram templates.
• create_from_template - create a new diagram from a template.
• create_diagram - create a custom diagram with nodes and edges.
• get_diagram - fetch the current diagram structure by documentId before making targeted follow-up edits.
• update_diagram - update an existing diagram by replacing, adding, or removing nodes and edges.

Iterate on an Existing Diagram

Use get_diagram when you already have a CodePic document and want the AI agent to inspect it before changing it. This keeps the workflow grounded in the current diagram instead of guessing from memory.

Example prompt:

Use get_diagram to inspect document <documentId>, then update the diagram by adding a Redis cache between the API server and Postgres database.

Examples

... View full README on GitHub