Composer

io.github.OliverGrabner由 GitHub 账号 OliverGrabner 发布v0.1.7更新于 Oct 24, 2026

Give your AI coding agent an architecture canvas to design and evolve diagrams.

已验证STDIO仅桌面开发者工具媒体与设计

概览

AI 生成的概览

Composer 为 AI 编程助手提供可视化架构画布，用于创建、编辑和校验软件架构图。

可以做什么
列出、创建、选择并重命名会话中的架构图，画布会随助手操作实时更新。读取完整架构图、查看单个节点及其连接、按关键词搜索节点和边，并获取最近自动保存的 PNG 缩略图。创建或更新服务、数据库、缓存、队列、存储等节点，以及它们之间带 REST、gRPC、异步等协议的连接。在后端节点上定义 API 端点，删除节点或边，并把图中节点关联到代码库中的文件或文件夹。校验架构图是否缺少端点或存在孤立节点，并按引导流程导入现有代码库。
适用场景
适合让助手把代码库或设计讨论整理成可持续维护的架构图，或在系统演进时同步更新图中的服务、端点和连接关系。
运行要求
以本地 npm 包（npx @usecomposer/mcp）通过 stdio 运行，也可作为远程 HTTP 端点连接。需要 Composer 账号，首次使用需在浏览器完成 OAuth 2.1 授权，并需能访问 Composer API 的网络。
安装前请注意
架构图数据存放在 Composer 的服务器上，工具调用会转发到 Composer API，因此架构细节会离开本机。写入类工具会创建、更新和删除节点与边，改动会立即显示在共享画布上。将节点关联到代码库路径会把文件和文件夹名称暴露给该服务。

安装

在 SourceWeft 中

  1. 打开 控制台中的 Composer，将其添加到工作区。
  2. 为需要使用其工具的对话启用该服务。

Desktop only，通过 STDIO。 STDIO 服务会启动本地进程，因此需要 SourceWeft 桌面宿主。

其他 MCP 客户端

参照 仓库 中的启动说明。

README

[Composer demo]

[Composer logo] Composer MCP Server

Give your AI coding agent an architecture canvas.
Design, visualize, and evolve software architecture diagrams - right from your IDE.

[npm version] [MIT License] [MCP Compatible]

Composer is a visual system design tool that lets AI coding agents create and modify interactive architecture diagrams through MCP (Model Context Protocol). Your agent gets tools to add services, databases, queues, and connections, and you get a live canvas at usecomposer.com that updates in real-time.

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

Getting Started

Connect your IDE

Claude Code:

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

Cursor — create .cursor/mcp.json in your project root:

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

Your browser will open for authorization on first use.

Claude Code
bash
claude mcp add --transport http composer https://mcp.usecomposer.com
Cursor

Create .cursor/mcp.json in your project root:

json
{  "mcpServers": {    "composer": {      "type": "http",      "url": "https://mcp.usecomposer.com"    }  }}
Codex
bash
codex mcp add composer -- npx -y @usecomposer/mcp --stdio
VS Code (Copilot Chat)

Create .vscode/mcp.json in your project root:

json
{  "servers": {    "composer": {      "type": "http",      "url": "https://mcp.usecomposer.com"    }  }}
VS Code (Cline)

Open Cline sidebar > Settings (gear icon) > MCP Servers > Add Remote Server:

json
{  "mcpServers": {    "composer": {      "type": "http",      "url": "https://mcp.usecomposer.com"    }  }}
VS Code (Continue)

Add to .continue/config.yaml:

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

Add to ~/.codeium/windsurf/mcp_config.json:

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

Note: Windsurf uses "serverUrl" instead of "url".

OpenCode

Create opencode.json in your project root:

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

Tools

Diagram Management

ToolDescription
list_diagramsList all your diagrams. Call this first to find which diagram to work on
create_diagramCreate a new diagram and auto-select it for this session
select_diagramSelect which diagram to work on for this session
rename_diagramRename the currently selected diagram

Note: Call list_diagrams then select_diagram (or create_diagram) before using other tools.

Read

ToolDescription
get_graphGet the full architecture diagram - all nodes and edges
get_nodeGet details for a single node including connected edges
search_graphSearch nodes and edges by keyword
get_screenshotGet a PNG thumbnail of the diagram from the last auto-save

Write

ToolDescription
upsert_nodeCreate or update a node (service, database, queue, etc.)
upsert_edgeCreate or update a connection between two nodes
define_apiDefine API endpoints on a backend service node
delete_elementDelete a node or edge from the diagram
link_pathLink a node to a file or folder in your codebase

Plan & Verify

ToolDescription
verify_diagramCheck for issues like missing endpoints or orphaned nodes
plan_importStep-by-step workflow for importing an existing codebase
get_guideReference guide for node types, protocols, and best practices

Node Types

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

Edge Protocols

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

Example Prompts

Once connected, try asking your AI agent:

PromptWhat it does
"Import this codebase into Composer"Scans your repo and builds the architecture diagram
"Create a new Composer diagram called Backend Architecture"Creates and auto-selects a new diagram
"Add a Redis cache between the API and the database in Composer"Adds a new node and edges to the diagram
"Add analytics monitoring to the Composer diagram"Adds observability nodes and connections
"Update the APIs I defined in Composer"Refreshes endpoint definitions on backend nodes
"Verify my Composer diagram"Checks for missing endpoints, orphaned nodes, etc.
"Link each Composer node to its source code"Associates diagram nodes with file paths

How It Works

Authentication 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.

Changes made through MCP are immediately visible on the Composer canvas via real-time WebSocket sync.

Development

bash
git clone https://github.com/olivergrabner/composer-mcpcd composer-mcpnpm installnpm run dev        # Watch mode (rebuilds on change)npm run build      # Production build

Links

License

MIT

来源：README.md，提交 ad37107

工具

0
SourceWeft 尚未在沙箱中启动过该软件包，因此其工具未知。

版本历史

1
  1. v0.1.7最新Sep 16, 2026

评分

已满足适用检查项的 50%

该评分衡量此收录条目的完整程度，依据注册中心条目、端点与公开来源计算得出。它不是对服务器本身的评价，也不表示服务器安全或当前可用：可连通性是带日期的检查结果，评分也不包含安装量或用户评价。

  • 近 30 天内可连通25 分

    请保持端点能够响应 MCP 握手；SourceWeft 每 30 天探测一次。

  • 已声明认证方式10 分

    请在注册中心条目中声明凭据请求头，或保持端点能够响应探测，以便判定其认证方式。

  • 已列出工具15 分

    请让服务器在无凭据时响应 tools/list，或发布可在沙箱中无凭据启动的软件包。

  • 描述必需15 分
  • 图标10 分
  • 文档15 分
  • 许可证10 分