Composer MCP

Composer MCP Server

Give your AI coding agent an architecture canvas.

Design, visualize, and evolve software architecture diagrams - right from your IDE.

______________________________________________________________________

作曲家 是一个可视化系统设计工具，允许AI编码代理通过以下方式创建和修改交互式架构图 MCP（模型上下文协议）。您的代理将获得添加服务、数据库、队列和连接的工具，您将在以下位置获得实时画布 usecomposer.com 实时更新。

Your IDE    MCP Server (this package)    Composer API    Your Diagram

入门指南

连接IDE

克劳德代码：

claude mcp add --transport http composer https://mcp.usecomposer.com

光标 --创建 .cursor/mcp.json 在项目根目录中：

{
  "mcpServers": {
    "composer": {
      "type": "http",
      "url": "https://mcp.usecomposer.com"
    }
  }
}

您的浏览器将在首次使用时打开进行授权。

Claude Code

claude mcp add --transport http composer https://mcp.usecomposer.com

Cursor

创建 .cursor/mcp.json 在项目根目录中：

{
  "mcpServers": {
    "composer": {
      "type": "http",
      "url": "https://mcp.usecomposer.com"
    }
  }
}

Codex

codex mcp add composer -- npx -y @usecomposer/mcp --stdio

VS Code (Copilot Chat)

创建 .vscode/mcp.json 在项目根目录中：

{
  "servers": {
    "composer": {
      "type": "http",
      "url": "https://mcp.usecomposer.com"
    }
  }
}

VS Code (Cline)

打开临床侧栏>设置（齿轮图标）>MCP服务器>添加远程服务器：

{
  "mcpServers": {
    "composer": {
      "type": "http",
      "url": "https://mcp.usecomposer.com"
    }
  }
}

VS Code (Continue)

添加 .continue/config.yaml:

mcpServers:
  - name: composer
    url: https://mcp.usecomposer.com

Windsurf

添加 ~/.codeium/windsurf/mcp_config.json:

{
  "mcpServers": {
    "composer": {
      "serverUrl": "https://mcp.usecomposer.com"
    }
  }
}

注： 风帆用途 "serverUrl" 而不是 "url".

OpenCode

创建 opencode.json 在项目根目录中：

{
  "mcp": {
    "composer": {
      "type": "remote",
      "url": "https://mcp.usecomposer.com"
    }
  }
}

工具

图表管理

注： 呼叫 list_diagrams 然后 select_diagram （或 create_diagram)在使用其他工具之前。

阅读

写

计划和验证

节点类型

client · frontend · backend · database · cache · queue · storage · external

边缘协议

REST · gRPC · GraphQL · WebSocket · TCP · UDP · async · event · internal

示例提示

连接后，尝试询问您的AI代理：

运作原理

身份验证是通过OAuth 2.1处理的——您的浏览器会打开一个一次性同意流，您就可以连接了。工具调用被代理到位于的Composer API mcp.usecomposer.com。您的图表数据存储在Composer的服务器上。MCP服务器本身是无状态的。

通过MCP所做的更改在 作曲家画布 通过实时WebSocket同步。

发展

git clone https://github.com/olivergrabner/composer-mcp
cd composer-mcp
npm install
npm run dev        # Watch mode (rebuilds on change)
npm run build      # Production build

链接

• 作曲家 -视觉建筑画布
• MCP协议 -模型上下文协议规范
• 问题 -错误报告和功能请求

许可证

麻省理工学院