d248864ee2
- 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
95 lines
2.1 KiB
Markdown
95 lines
2.1 KiB
Markdown
# 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:
|
|
```bash
|
|
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`:
|
|
|
|
```bash
|
|
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:
|
|
|
|
```json
|
|
{
|
|
"mcpServers": {
|
|
"agcanvas": {
|
|
"command": "/path/to/agcanvas-mcp",
|
|
"args": ["--port", "9876"]
|
|
}
|
|
}
|
|
}
|
|
```
|
|
|
|
## OpenCode
|
|
|
|
Add the server to your `opencode.json`:
|
|
|
|
```bash
|
|
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:
|
|
|
|
```json
|
|
{
|
|
"mcpServers": {
|
|
"agcanvas": {
|
|
"command": "agcanvas-mcp",
|
|
"args": ["--port", "9876"]
|
|
}
|
|
}
|
|
}
|
|
```
|
|
|
|
## Custom Port
|
|
|
|
If agcanvas is running on a different port, change the `--port` argument:
|
|
|
|
```json
|
|
{
|
|
"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) |
|