Files

David Ibia d248864ee2 Add drawing tools, Mermaid support, and MCP server bridge

- Convert flat project to Cargo workspace (crates/agcanvas, crates/agcanvas-mcp)
- Add drawing layer: rectangles, ellipses, lines, arrows, text with select/move/resize
- Add Mermaid diagram rendering via mermaid-rs-renderer
- Add agcanvas-mcp: MCP server bridge for Claude Code, OpenCode, and Codex
- Add toolbar UI with keyboard shortcuts (V/R/E/L/A/T) and shape interaction
- Add example MCP configs for Claude Code, OpenCode, and Codex
- Update README with full feature docs, MCP setup, and updated architecture

2026-02-08 22:49:24 +01:00

2.1 KiB

Raw Permalink Blame History

MCP Configuration Examples

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

Prerequisites

Build the MCP server:
```
cargo build --release -p agcanvas-mcp
```
Make sure agcanvas-mcp is in your PATH, or use the full path:
```
./target/release/agcanvas-mcp
```
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)

2.1 KiB Raw Permalink Blame History