Composer

io.github.OliverGrabnerPublished by GitHub account OliverGrabnerv0.1.7Updated Oct 24, 2026

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

VerifiedSTDIODesktop onlyDeveloper Tools Media & Design

Server details

Identifier: io.github.OliverGrabner/composer
Transport: STDIO
Runtime: Desktop only
Trust: Verified
Published: Sep 16, 2026

Security note

MCP servers receive tool arguments from a conversation and may perform external actions. Review what a server can do before you enable it, and give it only the access it needs.

The registry verified the GitHub account OliverGrabner for this listing. That does not show the account is the product's maker.

SourceWeft's checks cover whether the listing is complete and the endpoint answered; they do not review the server's code or what its tools do.

Add a badge to your README

Show readers this MCP server is listed on SourceWeft. The badge links to this page.

[![Listed on SourceWeft](https://sourceweft.com/badge/mcp/io.github.OliverGrabner%2Fcomposer.svg)](https://sourceweft.com/mcp/io.github.OliverGrabner%2Fcomposer?utm_source=readme&utm_medium=badge)

Overview

AI-generated overview

Composer gives an AI coding agent a visual architecture canvas to create, edit and verify software architecture diagrams.

What you can do: List, create, select and rename architecture diagrams in a session, with a live canvas that updates in real time as changes are made through the agent. Read the full graph, inspect a single node with its connections, search nodes and edges by keyword, and fetch a PNG thumbnail of the last auto-save. Create or update nodes such as services, databases, caches, queues and storage, and create or update connections between them with protocols like REST, gRPC or async. Define API endpoints on backend nodes, delete nodes or edges, and link diagram nodes to files or folders in the codebase. Verify a diagram for missing endpoints or orphaned nodes, follow a guided workflow for importing an existing,
When to use it: Useful when you want an agent to turn a codebase or a design discussion into a maintained architecture diagram, or to keep an existing diagram in sync with services, endpoints and connections as the system evolves.
Requirements: Runs as a local npm package (npx @usecomposer/mcp) over stdio, or can be connected as a remote HTTP endpoint. Requires a Composer account with OAuth 2.1 browser consent on first use, and network access to the Composer API.

Before you install

Diagram data is stored on Composer's servers and tool calls are proxied to the Composer API, so architecture details leave your machine. Write tools create, update and delete nodes and edges, and changes appear immediately on the shared canvas. Linking nodes to codebase paths exposes file and folder names to the service.

Installation

In SourceWeft

Open Composer in the dashboard and add it to a workspace.
Enable the server for the chats that should use its tools.

Desktop only via STDIO. STDIO servers start a local process, so they need the SourceWeft desktop host.

Other MCP clients

Follow the launch instructions in the repository.

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.

Getting Started

Connect your IDE

Claude Code:

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

json

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

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

Your browser will open for authorization on first use.

Claude Code

Cursor

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

json

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

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

Codex

VS Code (Copilot Chat)

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

json

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

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

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

VS Code (Continue)

Add to .continue/config.yaml:

Windsurf

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

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

{  "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-mcpcd composer-mcpnpm installnpm run dev        # Watch mode (rebuilds on change)npm run build      # Production build

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

License

MIT

Source: README.md at commit ad37107

Tools

SourceWeft has not started this package in its sandbox yet, so its tools are not known.

Version history

v0.1.7LatestSep 16, 2026

Score

50% of the applicable checks met

How complete this listing is, computed from the registry entry, the endpoint and public sources. Not a rating of the server and not a statement that it is safe or working today: reachability is a dated check, and no installs or reviews go into the score.

Reached in the last 30 days25 pts
Keep the endpoint answering the MCP handshake; SourceWeft probes it every 30 days.
Auth declared10 pts
Declare the credential headers in the registry entry, or keep the endpoint answering the probe so its auth can be classified.
Tools listed15 pts
Answer tools/list without a credential, or ship a package that starts in a sandbox without one.
DescriptionRequired15 pts
Logo10 pts
Documentation15 pts
License10 pts

Composer

Overview

Installation

In SourceWeft

Other MCP clients

README

Getting Started

Connect your IDE

Tools

Diagram Management

Read

Write

Plan & Verify

Node Types

Edge Protocols

Example Prompts

How It Works

Development

Links

License

Tools

Version history

Score