CodePic MCP Server

Let AI create and edit hand-drawn diagrams for you. Connect your favorite AI tool via MCP — no copy-paste, no manual import.

Step 1

1. Get an API Key

Go to API Keys

Step 2

2. Configure your AI client

Add CodePic as an MCP server in your AI client settings.

Step 3

3. Start creating

Ask your AI to create diagrams — it will call CodePic automatically.

MCP Endpoint

https://codepic.cc/api/mcp/mcp

Cursor configuration

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

Replace cpk_your_api_key_here with your actual API key

Claude Desktop configuration

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

Replace cpk_your_api_key_here with your actual API key

Available tools

list_templates

List all available diagram templates

create_from_template

Create a diagram from a template

create_diagram

Create a custom diagram with nodes and edges

update_diagram

Update an existing diagram

Example prompts

"Draw a login flow: enter credentials → validate → success or error"

"Create an ER diagram for an e-commerce database"

"Use the system design template to create a microservices architecture"

"Add a payment service node to my last diagram"

Full usage guide