agcanvas/examples/mcp-configs

MCP Configuration Examples

These are example configuration files for connecting AI coding tools to agcanvas via the MCP bridge.

Prerequisites

1. Build the MCP server:

   cargo build --release -p agcanvas-mcp
   

2. Make sure agcanvas-mcp is in your PATH, or use the full path:

   ./target/release/agcanvas-mcp
   

3. agcanvas must be running (it hosts the WebSocket server on port 9876).

Claude Code

Copy claude-code.mcp.json to your project root as .mcp.json:

cp examples/mcp-configs/claude-code.mcp.json /path/to/your/project/.mcp.json

Or add to your global Claude Code config at ~/.claude/mcp.json.

If agcanvas-mcp is not in your PATH, use the full path:

{
  "mcpServers": {
    "agcanvas": {
      "command": "/path/to/agcanvas-mcp",
      "args": ["--port", "9876"]
    }
  }
}

OpenCode

Add the server to your opencode.json:

cp examples/mcp-configs/opencode.json /path/to/your/project/opencode.json

Or merge the mcpServers block into your existing config.

Codex (OpenAI)

Codex uses the same MCP config format. Add to your project's MCP config:

{
  "mcpServers": {
    "agcanvas": {
      "command": "agcanvas-mcp",
      "args": ["--port", "9876"]
    }
  }
}

Custom Port

If agcanvas is running on a different port, change the --port argument:

{
  "mcpServers": {
    "agcanvas": {
      "command": "agcanvas-mcp",
      "args": ["--port", "8080"]
    }
  }
}

Available Tools

Once connected, the following MCP tools are available:

Tool	Description
list_sessions	List all open tabs/sessions in agcanvas
get_element_tree	Get the full parsed SVG element tree (structured JSON)
describe_canvas	Get a human-readable description of the canvas
get_element_by_id	Look up a specific element by ID
get_elements_at_point	Find elements at an (x, y) coordinate
get_drawing_elements	Get all user-drawn shapes (rects, ellipses, lines, arrows, text)
generate_code	Generate code stubs (html, react, tailwind, svelte, vue)