{
  "markdown": "<p align=\"center\">\n  <img src=\"https://github.com/OliverGrabner/composer-mcp/raw/main/demo.gif\" alt=\"Composer demo\" />\n</p>\n\n<p align=\"center\">\n  <img src=\"https://usecomposer.com/logo_warm_trio_no_bg.svg\" width=\"14\" alt=\"Composer logo\" />\n  <strong>Composer MCP Server</strong>\n</p>\n\n<p align=\"center\">\n  Give your AI coding agent an architecture canvas.<br/>\n  Design, visualize, and evolve software architecture diagrams - right from your IDE.\n</p>\n\n<p align=\"center\">\n  <a href=\"https://www.npmjs.com/package/@usecomposer/mcp\"><img src=\"https://img.shields.io/npm/v/@usecomposer/mcp?color=D27754&label=npm\" alt=\"npm version\" /></a>\n  <a href=\"https://opensource.org/licenses/MIT\"><img src=\"https://img.shields.io/badge/license-MIT-blue.svg\" alt=\"MIT License\" /></a>\n  <a href=\"https://modelcontextprotocol.io\"><img src=\"https://img.shields.io/badge/MCP-compatible-green.svg\" alt=\"MCP Compatible\" /></a>\n</p>\n\n---\n\n**Composer** is a visual system design tool that lets AI coding agents create and modify interactive architecture diagrams through [MCP (Model Context Protocol)](https://modelcontextprotocol.io). Your agent gets tools to add services, databases, queues, and connections, and you get a live canvas at [usecomposer.com](https://usecomposer.com) that updates in real-time.\n\n```\nYour IDE  <-->  MCP Server (this package)  <-->  Composer API  <-->  Your Diagram\n```\n\n## Getting Started\n\n### Connect your IDE\n\n**Claude Code:**\n\n```bash\nclaude mcp add --transport http composer https://mcp.usecomposer.com\n```\n\n**Cursor** — create `.cursor/mcp.json` in your project root:\n\n```json\n{\n  \"mcpServers\": {\n    \"composer\": {\n      \"type\": \"http\",\n      \"url\": \"https://mcp.usecomposer.com\"\n    }\n  }\n}\n```\n\nYour browser will open for authorization on first use.\n\n<details>\n<summary><strong>Claude Code</strong></summary>\n\n```bash\nclaude mcp add --transport http composer https://mcp.usecomposer.com\n```\n\n</details>\n\n<details>\n<summary><strong>Cursor</strong></summary>\n\nCreate `.cursor/mcp.json` in your project root:\n\n```json\n{\n  \"mcpServers\": {\n    \"composer\": {\n      \"type\": \"http\",\n      \"url\": \"https://mcp.usecomposer.com\"\n    }\n  }\n}\n```\n\n</details>\n\n<details>\n<summary><strong>Codex</strong></summary>\n\n```bash\ncodex mcp add composer -- npx -y @usecomposer/mcp --stdio\n```\n\n</details>\n\n<details>\n<summary><strong>VS Code (Copilot Chat)</strong></summary>\n\nCreate `.vscode/mcp.json` in your project root:\n\n```json\n{\n  \"servers\": {\n    \"composer\": {\n      \"type\": \"http\",\n      \"url\": \"https://mcp.usecomposer.com\"\n    }\n  }\n}\n```\n\n</details>\n\n<details>\n<summary><strong>VS Code (Cline)</strong></summary>\n\nOpen Cline sidebar > Settings (gear icon) > MCP Servers > Add Remote Server:\n\n```json\n{\n  \"mcpServers\": {\n    \"composer\": {\n      \"type\": \"http\",\n      \"url\": \"https://mcp.usecomposer.com\"\n    }\n  }\n}\n```\n\n</details>\n\n<details>\n<summary><strong>VS Code (Continue)</strong></summary>\n\nAdd to `.continue/config.yaml`:\n\n```yaml\nmcpServers:\n  - name: composer\n    url: https://mcp.usecomposer.com\n```\n\n</details>\n\n<details>\n<summary><strong>Windsurf</strong></summary>\n\nAdd to `~/.codeium/windsurf/mcp_config.json`:\n\n```json\n{\n  \"mcpServers\": {\n    \"composer\": {\n      \"serverUrl\": \"https://mcp.usecomposer.com\"\n    }\n  }\n}\n```\n\n> **Note:** Windsurf uses `\"serverUrl\"` instead of `\"url\"`.\n\n</details>\n\n<details>\n<summary><strong>OpenCode</strong></summary>\n\nCreate `opencode.json` in your project root:\n\n```json\n{\n  \"mcp\": {\n    \"composer\": {\n      \"type\": \"remote\",\n      \"url\": \"https://mcp.usecomposer.com\"\n    }\n  }\n}\n```\n\n</details>\n\n## Tools\n\n### Diagram Management\n\n| Tool | Description |\n|------|-------------|\n| `list_diagrams` | List all your diagrams. Call this first to find which diagram to work on |\n| `create_diagram` | Create a new diagram and auto-select it for this session |\n| `select_diagram` | Select which diagram to work on for this session |\n| `rename_diagram` | Rename the currently selected diagram |\n\n> **Note:** Call `list_diagrams` then `select_diagram` (or `create_diagram`) before using other tools.\n\n### Read\n\n| Tool | Description |\n|------|-------------|\n| `get_graph` | Get the full architecture diagram - all nodes and edges |\n| `get_node` | Get details for a single node including connected edges |\n| `search_graph` | Search nodes and edges by keyword |\n| `get_screenshot` | Get a PNG thumbnail of the diagram from the last auto-save |\n\n### Write\n\n| Tool | Description |\n|------|-------------|\n| `upsert_node` | Create or update a node (service, database, queue, etc.) |\n| `upsert_edge` | Create or update a connection between two nodes |\n| `define_api` | Define API endpoints on a backend service node |\n| `delete_element` | Delete a node or edge from the diagram |\n| `link_path` | Link a node to a file or folder in your codebase |\n\n### Plan & Verify\n\n| Tool | Description |\n|------|-------------|\n| `verify_diagram` | Check for issues like missing endpoints or orphaned nodes |\n| `plan_import` | Step-by-step workflow for importing an existing codebase |\n| `get_guide` | Reference guide for node types, protocols, and best practices |\n\n### Node Types\n\n`client` · `frontend` · `backend` · `database` · `cache` · `queue` · `storage` · `external`\n\n### Edge Protocols\n\n`REST` · `gRPC` · `GraphQL` · `WebSocket` · `TCP` · `UDP` · `async` · `event` · `internal`\n\n## Example Prompts\n\nOnce connected, try asking your AI agent:\n\n| Prompt | What it does |\n|--------|-------------|\n| *\"Import this codebase into Composer\"* | Scans your repo and builds the architecture diagram |\n| *\"Create a new Composer diagram called Backend Architecture\"* | Creates and auto-selects a new diagram |\n| *\"Add a Redis cache between the API and the database in Composer\"* | Adds a new node and edges to the diagram |\n| *\"Add analytics monitoring to the Composer diagram\"* | Adds observability nodes and connections |\n| *\"Update the APIs I defined in Composer\"* | Refreshes endpoint definitions on backend nodes |\n| *\"Verify my Composer diagram\"* | Checks for missing endpoints, orphaned nodes, etc. |\n| *\"Link each Composer node to its source code\"* | Associates diagram nodes with file paths |\n\n## How It Works\n\nAuthentication is handled via OAuth 2.1 — your browser opens for a one-time consent flow, and you're connected. Tool calls are proxied to the Composer API at `mcp.usecomposer.com`. Your diagram data lives on Composer's servers. The MCP server itself is stateless.\n\nChanges made through MCP are immediately visible on the [Composer canvas](https://usecomposer.com) via real-time WebSocket sync.\n\n## Development\n\n```bash\ngit clone https://github.com/olivergrabner/composer-mcp\ncd composer-mcp\nnpm install\nnpm run dev        # Watch mode (rebuilds on change)\nnpm run build      # Production build\n```\n\n## Links\n\n- [Composer](https://usecomposer.com) - the visual architecture canvas\n- [MCP Protocol](https://modelcontextprotocol.io) - Model Context Protocol spec\n- [Issues](https://github.com/olivergrabner/composer-mcp/issues) - bug reports and feature requests\n\n## License\n\nMIT\n",
  "bytes": 7016,
  "sha": "7a7aef2f50b6b871a687a38096eea357f8bc661da33cf8dd83e91dbd47e6a381",
  "repo_slug": "olivergrabner/composer-mcp",
  "fonte": "repo",
  "truncated": false,
  "api": "https://agentalog.com/api/listings/mcp_io_github_olivergrabner_composer_a8028637/readme"
}