Composer

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

Quick Install

Automated & IDE Setup

Copy the AI prompt to install this server into Claude Code, Cursor, or another agent — or use 1-click editor setup below.

Add to Cursor Add to VS Code

Not yet automatically verified

We haven't yet run this listing's install command through our automated sandbox check. This isn't a red flag — we're steadily working through the catalog.

Manual Client & Custom JSON ConfigExpand JSON ▾

Client Config & Setup

Choose your client or environment

Target File:~/Library/Application Support/Claude/claude_desktop_config.json

claude_desktop_config.json

{
  "mcpServers": {
    "composer": {
      "command": "npx",
      "args": [
        "-y",
        "@usecomposer/mcp"
      ]
    }
  }
}

💡 Paste the JSON block into your client's configuration file under mcpServers, then restart the application.

Capabilities & Tool Schemas (16)Self-reported

Inspect callable tools, capabilities, and parameters exposed to AI agents by Composer.

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

get_graph

Get the full architecture diagram - all nodes and edges

get_node

Get details for a single node including connected edges

Documentation Overview

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.

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.

Code

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

Getting Started

Connect your IDE

Claude Code:

Terminal

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

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

config.json

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

Your browser will open for authorization on first use.

Claude Code

Terminal

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

Cursor

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

config.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:

config.json

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

VS Code (Cline)

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

config.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:

config.json

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

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

OpenCode

Create opencode.json in your project root:

config.json

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

Tools

Diagram Management

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_diagrams then select_diagram (or create_diagram) before using other tools.

Read

Tool	Description
`get_graph`	Get the full architecture diagram - all nodes and edges
`get_node`	Get details for a single node including connected edges
`search_graph`	Search nodes and edges by keyword
`get_screenshot`	Get a PNG thumbnail of the diagram from the last auto-save

Write

Tool	Description
`upsert_node`	Create or update a node (service, database, queue, etc.)
`upsert_edge`	Create or update a connection between two nodes
`define_api`	Define API endpoints on a backend service node
`delete_element`	Delete a node or edge from the diagram
`link_path`	Link a node to a file or folder in your codebase

Plan & Verify

Tool	Description
`verify_diagram`	Check for issues like missing endpoints or orphaned nodes
`plan_import`	Step-by-step workflow for importing an existing codebase
`get_guide`	Reference 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:

Prompt	What 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-mcp
cd composer-mcp
npm install
npm run dev        # Watch mode (rebuilds on change)
npm run build      # Production build

License

MIT

Read the full README →View source on GitHub →

Related MCP Servers

View all in Data Visualization View all alternatives

Adoption & maintenance

Factual signals from GitHub, npm, and our automated checks — not a rating.

GitHub stars

Stargazers on the source repository.

Last commit

5mo ago

Most recent push to the default branch.

Tools exposed

Callable tools this server registers over MCP.

Directory activity

1 views

Config copies, upvotes, and views on AllMCPs.

Reviews

No reviews yet — be the first to share how this listing worked for you.

Frequently Asked Questions about Composer

Add the following block to your claude_desktop_config.json under mcpServers: "mcpServers": { "composer": { "command": "npx", "args": ["-y","@usecomposer/mcp"] } }

AllMCPs Directory Badge

Full Badge Customizer

Showcase your server listing on GitHub or your project documentation. Embed this dynamic SVG badge to highlight official listing status and live engagement.

Badge Style:

Live Dynamic SVG Preview

Markdown (GitHub README)

[![AllMCPs](https://allmcps.com/api/badge/composer?style=directory)](https://allmcps.com/mcp/composer)

HTML Embed

<a href="https://allmcps.com/mcp/composer"><img src="https://allmcps.com/api/badge/composer?style=directory" alt="Composer on AllMCPs" /></a>

Technical Specs & Signals

CategoryData Visualization

11/15 checks healthy over the last 45d

48Quality signal: Fair · 48/100How this signal is calculated ▾

Server availabilityNot measured

Not scored for repo-hosted servers — we can't reach the running server, only its GitHub page. Hosted MCP endpoints are health-checked live.

Verified ownership10/20

Documentation & tools24/30

Adoption & activity2/15

Community engagement0/10

A guidance signal from public completeness & health data — not a user rating. New listings start lower and rise as they add docs, get verified, and grow adoption. Signals we can't observe for a listing are skipped, not counted against it.

Supply-chain signal

No high-severity advisories surfaced by our automated scan.

Critical 0High 0Medium 0Low 0

Scanned 5d ago via OSV.dev · @usecomposer/mcp (npm)

★ Featured

Moxie Docs MCP

MCP & Agent Skills for Automated Documentation, and codebase conventions + context

Explore Server →

Own this project?

This directory is pre-filled from public sources. Claim via GitHub README, site badge, or DNS TXT to unlock edit access and the Official badge — proof is checked automatically, then reviewed by our team.

Free dofollow backlink: add your website and place the AllMCPs badge on it — no claim needed. We detect it automatically and keep it verified as long as the badge stays live.

Claim & get free dofollow

Share & Embed

Add our SVG badge (dark/light directory styles) or embeddable widget to your site.

Explore more

More in 📊 Data Visualization →Alternatives to Composer →Install in Claude Desktop Install in Cursor Install in VS Code Setup guides for all 13 MCP clients

Composer

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

Quick Install

Automated & IDE Setup

Copy the AI prompt to install this server into Claude Code, Cursor, or another agent — or use 1-click editor setup below.

Add to Cursor Add to VS Code

Not yet automatically verified

We haven't yet run this listing's install command through our automated sandbox check. This isn't a red flag — we're steadily working through the catalog.

Manual Client & Custom JSON ConfigExpand JSON ▾

Client Config & Setup

Choose your client or environment

Target File:~/Library/Application Support/Claude/claude_desktop_config.json

claude_desktop_config.json

{
  "mcpServers": {
    "composer": {
      "command": "npx",
      "args": [
        "-y",
        "@usecomposer/mcp"
      ]
    }
  }
}

💡 Paste the JSON block into your client's configuration file under mcpServers, then restart the application.

Capabilities & Tool Schemas (16)Self-reported

Inspect callable tools, capabilities, and parameters exposed to AI agents by Composer.

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

get_graph

Get the full architecture diagram - all nodes and edges

get_node

Get details for a single node including connected edges

Documentation Overview

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.

Code

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

Getting Started

Connect your IDE

Claude Code:

Terminal

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

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

config.json

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

Your browser will open for authorization on first use.

Claude Code

Terminal

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

Cursor

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

config.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:

config.json

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

VS Code (Cline)

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

config.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:

config.json

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

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

OpenCode

Create opencode.json in your project root:

config.json

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

Tools

Diagram Management

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_diagrams then select_diagram (or create_diagram) before using other tools.

Read

Tool	Description
`get_graph`	Get the full architecture diagram - all nodes and edges
`get_node`	Get details for a single node including connected edges
`search_graph`	Search nodes and edges by keyword
`get_screenshot`	Get a PNG thumbnail of the diagram from the last auto-save

Write

Tool	Description
`upsert_node`	Create or update a node (service, database, queue, etc.)
`upsert_edge`	Create or update a connection between two nodes
`define_api`	Define API endpoints on a backend service node
`delete_element`	Delete a node or edge from the diagram
`link_path`	Link a node to a file or folder in your codebase

Plan & Verify

Tool	Description
`verify_diagram`	Check for issues like missing endpoints or orphaned nodes
`plan_import`	Step-by-step workflow for importing an existing codebase
`get_guide`	Reference 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:

Prompt	What 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

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-mcp
cd composer-mcp
npm install
npm run dev        # Watch mode (rebuilds on change)
npm run build      # Production build

License

MIT

Read the full README →View source on GitHub →

Related MCP Servers

View all in Data Visualization View all alternatives

Adoption & maintenance

Factual signals from GitHub, npm, and our automated checks — not a rating.

GitHub stars

Stargazers on the source repository.

Last commit

5mo ago

Most recent push to the default branch.

Tools exposed

Callable tools this server registers over MCP.

Directory activity

1 views

Config copies, upvotes, and views on AllMCPs.

Reviews

No reviews yet — be the first to share how this listing worked for you.

Frequently Asked Questions about Composer

Add the following block to your claude_desktop_config.json under mcpServers: "mcpServers": { "composer": { "command": "npx", "args": ["-y","@usecomposer/mcp"] } }

AllMCPs Directory Badge

Full Badge Customizer

Showcase your server listing on GitHub or your project documentation. Embed this dynamic SVG badge to highlight official listing status and live engagement.

Badge Style:

Live Dynamic SVG Preview

Markdown (GitHub README)

[![AllMCPs](https://allmcps.com/api/badge/composer?style=directory)](https://allmcps.com/mcp/composer)

HTML Embed

<a href="https://allmcps.com/mcp/composer"><img src="https://allmcps.com/api/badge/composer?style=directory" alt="Composer on AllMCPs" /></a>

Technical Specs & Signals

CategoryData Visualization

11/15 checks healthy over the last 45d

48Quality signal: Fair · 48/100How this signal is calculated ▾

Server availabilityNot measured

Not scored for repo-hosted servers — we can't reach the running server, only its GitHub page. Hosted MCP endpoints are health-checked live.

Verified ownership10/20

Documentation & tools24/30

Adoption & activity2/15

Community engagement0/10

Supply-chain signal

No high-severity advisories surfaced by our automated scan.

Critical 0High 0Medium 0Low 0

Scanned 5d ago via OSV.dev · @usecomposer/mcp (npm)

★ Featured

Moxie Docs MCP

MCP & Agent Skills for Automated Documentation, and codebase conventions + context

Explore Server →

Own this project?

Free dofollow backlink: add your website and place the AllMCPs badge on it — no claim needed. We detect it automatically and keep it verified as long as the badge stays live.

Claim & get free dofollow

Share & Embed

Add our SVG badge (dark/light directory styles) or embeddable widget to your site.

Explore more

More in 📊 Data Visualization →Alternatives to Composer →Install in Claude Desktop Install in Cursor Install in VS Code Setup guides for all 13 MCP clients

Composer

Quick Install

Client Config & Setup

Documentation Overview

Getting Started

Connect your IDE

Tools

Diagram Management

Read

Write

Plan & Verify

Node Types

Edge Protocols

Example Prompts

How It Works

Development

Links

License

Related MCP Servers

Adoption & maintenance

Reviews

Frequently Asked Questions about Composer

AllMCPs Directory Badge

Technical Specs & Signals

Supply-chain signal

Moxie Docs MCP

Own this project?

Share & Embed

Explore more

Composer

Quick Install

Client Config & Setup

Documentation Overview

Getting Started

Connect your IDE

Tools

Diagram Management

Read

Write

Plan & Verify

Node Types

Edge Protocols

Example Prompts

How It Works

Development

Links

License

Related MCP Servers

Adoption & maintenance

Reviews

Frequently Asked Questions about Composer

AllMCPs Directory Badge

Technical Specs & Signals

Supply-chain signal

Moxie Docs MCP

Own this project?

Share & Embed

Explore more