# 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) |