Composer 是一个可视化系统设计工具，允许 AI 编码代理通过 MCP (Model Context Protocol) 创建和修改交互式架构图。你的代理将获得添加服务、数据库、队列和连接的工具，而你可以在 usecomposer.com 获得一个实时更新的画布。

Your IDE  <-->  MCP Server (this package)  <-->  Composer API  <-->  Your Diagram

入门指南

连接你的 IDE

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"
    }
  }
}

首次使用时，浏览器将打开以进行授权。

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

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

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

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

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

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

打开 Cline 侧边栏 > 设置（齿轮图标） > MCP Servers > Add Remote Server：

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

添加到 .continue/config.yaml：

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

添加到 ~/.codeium/windsurf/mcp_config.json：

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

注意： Windsurf 使用 "serverUrl" 而不是 "url"。

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

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

工具

图表管理

工具	描述
`list_diagrams`	列出所有图表。先调用此工具以确定要处理的图表
`create_diagram`	创建新图表并自动将其选定为当前会话使用
`select_diagram`	选择当前会话要处理的图表
`rename_diagram`	重命名当前选定的图表

注意： 在使用其他工具之前，请先调用 list_diagrams 然后调用 select_diagram（或 create_diagram）。

读取

工具	描述
`get_graph`	获取完整架构图 - 所有节点和边
`get_node`	获取单个节点的详细信息，包括连接的边
`search_graph`	按关键字搜索节点和边
`get_screenshot`	获取上次自动保存的图表 PNG 缩略图

写入

工具	描述
`upsert_node`	创建或更新节点（服务、数据库、队列等）
`upsert_edge`	创建或更新两个节点之间的连接
`define_api`	在后端服务节点上定义 API 端点
`delete_element`	从图表中删除节点或边
`link_path`	将节点链接到代码库中的文件或文件夹

规划与验证

工具	描述
`verify_diagram`	检查缺失端点或孤立节点等问题
`plan_import`	导入现有代码库的分步工作流程
`get_guide`	节点类型、协议和最佳实践的参考指南

节点类型

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

边协议

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

示例提示词

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

提示词	功能
"Import this codebase into Composer"	扫描你的代码库并构建架构图
"Create a new Composer diagram called Backend Architecture"	创建并自动选定一个新图表
"Add a Redis cache between the API and the database in Composer"	在图表中添加新节点和边
"Add analytics monitoring to the Composer diagram"	添加可观测性节点和连接
"Update the APIs I defined in Composer"	刷新后端节点上的端点定义
"Verify my Composer diagram"	检查缺失端点、孤立节点等
"Link each Composer node to its source code"	将图表节点与文件路径关联

工作原理

身份验证通过 OAuth 2.1 处理 — 浏览器会打开进行一次性授权流程，之后即可连接。工具调用会被代理到 mcp.usecomposer.com 的 Composer API。你的图表数据存储在 Composer 的服务器上。MCP 服务器本身是无状态的。

通过 MCP 所做的更改会通过实时 WebSocket 同步，立即在 Composer 画布上可见。

开发

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

链接

Composer - 可视化架构画布
MCP Protocol - 模型上下文协议规范
Issues - 错误报告和功能请求

许可证

MIT

composer-mcp

入门指南

连接你的 IDE

工具

图表管理

读取

写入

规划与验证

节点类型

边协议

示例提示词

工作原理

开发

链接

许可证

Resources

Looking for Admin?

Latest Blog Posts

MCP directory API