Config is the same across clients — only the file and path differ.
{
"mcpServers": {
"composer": {
"url": "https://mcp.usecomposer.com",
"type": "http"
}
}
}Are you the author?
Add this badge to your README to show your security score and help users find safe servers.
Give your AI coding agent an architecture canvas. Design, visualize, and evolve software architecture diagrams - right from your IDE.
Run this in your terminal to verify the server starts. Then let us know if it worked — your result helps other developers.
npx -y '@usecomposer/mcp' 2>&1 | head -1 && echo "✓ Server started successfully"
After testing, let us know if it worked:
Five weighted categories — click any category to see the underlying evidence.
No known CVEs.
Checked @usecomposer/mcp against OSV.dev.
Be the first to review
Have you used this server?
Share your experience — it helps other developers decide.
Sign in to write a review.
Others in design / developer-tools
A Model Context Protocol (MCP) server and CLI that provides tools for agent use when working on iOS and macOS projects.
Workspace template + MCP server for Claude Code, Codex CLI, Cursor & Windsurf. Multi-agent knowledge engine (ag-refresh / ag-ask) that turns any codebase into a queryable AI assistant.
MCP server for accessing Figma plugin console logs and screenshots via Cloudflare Workers or local mode
MCP server for using the GitLab API
MCP Security Weekly
Get CVE alerts and security updates for io.github.OliverGrabner/composer and similar servers.
Start a conversation
Ask a question, share a tip, or report an issue.
Sign in to join the discussion.
Composer MCP Server
Give your AI coding agent an architecture canvas.
Design, visualize, and evolve software architecture diagrams - right from your IDE.
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
Claude Code:
claude mcp add --transport http composer https://mcp.usecomposer.com
Cursor — create .cursor/mcp.json in your project root:
{
"mcpServers": {
"composer": {
"type": "http",
"url": "https://mcp.usecomposer.com"
}
}
}
Your browser will open for authorization on first use.
claude mcp add --transport http composer https://mcp.usecomposer.com
Create .cursor/mcp.json in your project root:
{
"mcpServers": {
"composer": {
"type": "http",
"url": "https://mcp.usecomposer.com"
}
}
}
codex mcp add composer -- npx -y @usecomposer/mcp --stdio
Create .vscode/mcp.json in your project root:
{
"servers": {
"composer": {
"type": "http",
"url": "https://mcp.usecomposer.com"
}
}
}
Open Cline sidebar > Settings (gear icon) > MCP Servers > Add Remote Server:
{
"mcpServers": {
"composer": {
"type": "http",
"url": "https://mcp.usecomposer.com"
}
}
}
Add to .continue/config.yaml:
mcpServers:
- name: composer
url: https://mcp.usecomposer.com
Add to ~/.codeium/windsurf/mcp_config.json:
{
"mcpServers": {
"composer": {
"serverUrl": "https://mcp.usecomposer.com"
}
}
}
Note: Windsurf uses
"serverUrl"instead of"url".
Create opencode.json in your project root:
{
"mcp": {
"composer": {
"type": "remote",
"url": "https://mcp.usecomposer.com"
}
}
}
| Tool | Description |
|---|---|
list_diagrams | List all your diagrams. Call this first to find which diagram to work on |
create_diagram | Create a new diagram and auto-select it for this session |
select_diagram | Select which diagram to work on for this session |
rename_diagram | Rename the currently selected diagram |
Note: Call
list_diagramsthenselect_diagram(o