Composer

Name: Composer
Author: olivergrabner

作者：olivergrabnerバージョン 0.1.7i★ 4iパソコンで動く

レジストリ名io.github.OliverGrabner/composer

インストール方法

What it does

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

Connects パソコンで動く
Account or key No key needed
Category 開発者ツール

インストール

使っているAIアプリを選んで、設定をコピーしてください。

チェック 2/3 合格 · あなたのパソコンで動きます · ✓ コマンド確認済み 2026年11月13日

まず：どの AI を使っていますか？

ClaudeWeb · アプリ · スマホChatGPTWebClaude CodeターミナルCursorコードエディタVS Codeコードエディタその他その他のアプリ

使っているアプリを選ぶと、下に手順が表示されます。

Claude につなげますが、先に準備が必要です

先にパソコンへ Node.js を入れてください（1 回だけ） · パソコン版 Claude アプリ（Windows または Mac）のみ。Web やスマホでは使えません

AI にインストールしてもらう

このメッセージを Claude のチャットに貼り付けます。AI がパソコンを確認し、変更するファイルを伝え、毎回あなたの了承を待ちます。

このパソコンの Claude に MCP server Composer を入れてください。順番に：1) node -v で Node.js があるか確認。なければ https://nodejs.org/en/download から入れるよう私に伝え、自分では入れない。2) この設定だけを使う（PopNx MCP の確認済み）：{ "mcpServers": { "composer": { "command": "npx", "args": [ "-y", "@usecomposer/mcp" ] } } } 3) 変更するファイルのフルパスか実行するコマンドを伝えて、私の了承を待つ。4) キーは不要。5) 了承した内容を実行し、Composer のツールが本当に表示されるか確認する。

このメッセージにあなたのキーは含まれません。キーが必要な場合は、AI がファイルやアプリの入力欄にご自身で貼るよう案内します。

1
Node.js を入れる（まだなければ）
もう入っていますか？先に確認 · ターミナルを開き、このコマンドを入力して Enter
node -v
- バージョン番号（例 v26.13.1）が出る = 入っています。この手順は飛ばせます
- "command not found"（Windows では "is not recognized"）が出る = まだ入っていないか、入れた直後でターミナルを開き直す必要があります
ターミナルの開き方
Mac：⌘ + Space を押し、Terminal と入力して Enter
Windows：スタートメニューを開き、Windows PowerShell と入力して「開く」
まだ入っていない場合: 公式ダウンロードページで LTS 版と、クリックで進むインストーラーを選びます：Mac は .pkg、Windows は .msi。ダブルクリックして最後まで進めるだけで、curl コマンドは不要です
Node.js のダウンロードページを開く ↗
入れ終わったらターミナルを閉じて開き直し、同じコマンドをもう一度実行します。バージョン番号が出れば完了です: node -v
一度入れれば、Node.js を使うすべてのツールで使えます
完了
パソコン版 Claude アプリの設定ファイルを開く
SettingsDeveloperEdit Config
完了

この設定を貼り付けて保存

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

完了

Claude を終了してもう一度開く
完了
試してみる
Composer を使って、私に何ができるか教えて、1 つやってみせて
✓ Claude が Composer を使っていると言うか、回答に Composer のツール名が出れば接続成功です

メニュー名は 2026年11月11日に Anthropic のヘルプページで確認 · アプリのバージョンにより画面が少し違うことがあります

ChatGPT はまだ Composer につなげません

Composer はパソコンに入れて使うものですが、ChatGPT は Web 上で動くサーバーにしかつなげません

代わりにできること

A · Composer につなげるアプリを使う

Claude の手順 →先にパソコンへ Node.js を入れてください（1 回だけ） · パソコン版 Claude アプリ（Windows または Mac）のみ。Web やスマホでは使えません
Claude Code の手順 →先にパソコンへ Node.js を入れてください（1 回だけ）
Cursor の手順 →先にパソコンへ Node.js を入れてください（1 回だけ）
VS Code の手順 →先にパソコンへ Node.js を入れてください（1 回だけ）

B · 開発者ツールの中で ChatGPT につなげる別のサーバー

同じカテゴリでよく使われているものから、キーなしでアドレスだけでつなげるものを選びました

Sentry✓ ChatGPT
Compiler Explorer✓ ChatGPT
GitDiagram✓ ChatGPT

Claude Code につなげますが、先に準備が必要です

先にパソコンへ Node.js を入れてください（1 回だけ）

AI にインストールしてもらう

このメッセージを Claude Code のチャットに貼り付けます。AI がパソコンを確認し、変更するファイルを伝え、毎回あなたの了承を待ちます。

このパソコンの Claude Code に MCP server Composer を入れてください。順番に：1) node -v で Node.js があるか確認。なければ https://nodejs.org/en/download から入れるよう私に伝え、自分では入れない。2) この設定だけを使う（PopNx MCP の確認済み）：claude mcp add --scope user composer -- npx -y @usecomposer/mcp 3) 変更するファイルのフルパスか実行するコマンドを伝えて、私の了承を待つ。4) キーは不要。5) 了承した内容を実行し、Composer のツールが本当に表示されるか確認する。

このメッセージにあなたのキーは含まれません。キーが必要な場合は、AI がファイルやアプリの入力欄にご自身で貼るよう案内します。

1
Node.js を入れる（まだなければ）
もう入っていますか？先に確認 · ターミナルを開き、このコマンドを入力して Enter
node -v
- バージョン番号（例 v26.13.1）が出る = 入っています。この手順は飛ばせます
- "command not found"（Windows では "is not recognized"）が出る = まだ入っていないか、入れた直後でターミナルを開き直す必要があります
ターミナルの開き方
Mac：⌘ + Space を押し、Terminal と入力して Enter
Windows：スタートメニューを開き、Windows PowerShell と入力して「開く」
まだ入っていない場合: 公式ダウンロードページで LTS 版と、クリックで進むインストーラーを選びます：Mac は .pkg、Windows は .msi。ダブルクリックして最後まで進めるだけで、curl コマンドは不要です
Node.js のダウンロードページを開く ↗
入れ終わったらターミナルを閉じて開き直し、同じコマンドをもう一度実行します。バージョン番号が出れば完了です: node -v
一度入れれば、Node.js を使うすべてのツールで使えます
完了
ターミナルを開く
Mac：Command+スペースで Terminal と入力 · Windows：PowerShell を開く
完了

このコマンドを貼り付けて Enter

claude mcp add --scope user composer -- npx -y @usecomposer/mcp

完了

Claude Code で /mcp と入力
Composer が一覧にあり、接続済みと表示されれば OK です
完了
試してみる
Composer を使って、私に何ができるか教えて、1 つやってみせて
✓ Claude Code が Composer を使っていると言うか、回答に Composer のツール名が出れば接続成功です

メニュー名は 2026年11月11日に Anthropic のヘルプページで確認 · アプリのバージョンにより画面が少し違うことがあります

Cursor につなげますが、先に準備が必要です

先にパソコンへ Node.js を入れてください（1 回だけ）

AI にインストールしてもらう

このメッセージを Cursor のチャットに貼り付けます。AI がパソコンを確認し、変更するファイルを伝え、毎回あなたの了承を待ちます。

このパソコンの Cursor に MCP server Composer を入れてください。順番に：1) node -v で Node.js があるか確認。なければ https://nodejs.org/en/download から入れるよう私に伝え、自分では入れない。2) この設定だけを使う（PopNx MCP の確認済み）：{ "mcpServers": { "composer": { "command": "npx", "args": [ "-y", "@usecomposer/mcp" ] } } } 3) 変更するファイルのフルパスか実行するコマンドを伝えて、私の了承を待つ。4) キーは不要。5) 了承した内容を実行し、Composer のツールが本当に表示されるか確認する。

このメッセージにあなたのキーは含まれません。キーが必要な場合は、AI がファイルやアプリの入力欄にご自身で貼るよう案内します。

1
Node.js を入れる（まだなければ）
もう入っていますか？先に確認 · ターミナルを開き、このコマンドを入力して Enter
node -v
- バージョン番号（例 v26.13.1）が出る = 入っています。この手順は飛ばせます
- "command not found"（Windows では "is not recognized"）が出る = まだ入っていないか、入れた直後でターミナルを開き直す必要があります
ターミナルの開き方
Mac：⌘ + Space を押し、Terminal と入力して Enter
Windows：スタートメニューを開き、Windows PowerShell と入力して「開く」
まだ入っていない場合: 公式ダウンロードページで LTS 版と、クリックで進むインストーラーを選びます：Mac は .pkg、Windows は .msi。ダブルクリックして最後まで進めるだけで、curl コマンドは不要です
Node.js のダウンロードページを開く ↗
入れ終わったらターミナルを閉じて開き直し、同じコマンドをもう一度実行します。バージョン番号が出れば完了です: node -v
一度入れれば、Node.js を使うすべてのツールで使えます
完了
このボタンで Cursor を開く
Cursor で開く
Cursor がインストールの確認をするので Install を押します
完了
Cursor の AI チャットを Agent モードで開く
完了
試してみる
Composer を使って、私に何ができるか教えて、1 つやってみせて
✓ Cursor が Composer を使っていると言うか、回答に Composer のツール名が出れば接続成功です

メニュー名は 2026年11月11日に Cursor のヘルプページで確認 · アプリのバージョンにより画面が少し違うことがあります

VS Code につなげますが、先に準備が必要です

先にパソコンへ Node.js を入れてください（1 回だけ）

AI にインストールしてもらう

このメッセージを VS Code のチャットに貼り付けます。AI がパソコンを確認し、変更するファイルを伝え、毎回あなたの了承を待ちます。

このパソコンの VS Code に MCP server Composer を入れてください。順番に：1) node -v で Node.js があるか確認。なければ https://nodejs.org/en/download から入れるよう私に伝え、自分では入れない。2) この設定だけを使う（PopNx MCP の確認済み）：{ "servers": { "composer": { "type": "stdio", "command": "npx", "args": [ "-y", "@usecomposer/mcp" ] } } } 3) 変更するファイルのフルパスか実行するコマンドを伝えて、私の了承を待つ。4) キーは不要。5) 了承した内容を実行し、Composer のツールが本当に表示されるか確認する。

このメッセージにあなたのキーは含まれません。キーが必要な場合は、AI がファイルやアプリの入力欄にご自身で貼るよう案内します。

1
Node.js を入れる（まだなければ）
もう入っていますか？先に確認 · ターミナルを開き、このコマンドを入力して Enter
node -v
- バージョン番号（例 v26.13.1）が出る = 入っています。この手順は飛ばせます
- "command not found"（Windows では "is not recognized"）が出る = まだ入っていないか、入れた直後でターミナルを開き直す必要があります
ターミナルの開き方
Mac：⌘ + Space を押し、Terminal と入力して Enter
Windows：スタートメニューを開き、Windows PowerShell と入力して「開く」
まだ入っていない場合: 公式ダウンロードページで LTS 版と、クリックで進むインストーラーを選びます：Mac は .pkg、Windows は .msi。ダブルクリックして最後まで進めるだけで、curl コマンドは不要です
Node.js のダウンロードページを開く ↗
入れ終わったらターミナルを閉じて開き直し、同じコマンドをもう一度実行します。バージョン番号が出れば完了です: node -v
一度入れれば、Node.js を使うすべてのツールで使えます
完了
このボタンで VS Code を開く
VS Code で開く
VS Code がインストールの確認をするので Install を押します
完了
VS Code の AI チャットを Agent モードで開く
完了
試してみる
Composer を使って、私に何ができるか教えて、1 つやってみせて
✓ VS Code が Composer を使っていると言うか、回答に Composer のツール名が出れば接続成功です

メニュー名は 2026年11月11日に VS Code のヘルプページで確認 · アプリのバージョンにより画面が少し違うことがあります

Windsurf、Zed、Gemini CLI など MCP を使える他のアプリは追加方法がそれぞれ違います。アプリ一覧で確認してください

MCP を使えるアプリをすべて見る →

JSON 設定は下の「開発者向け」にあります

つまずいたら？Composer を使っている人に聞いてみましょう💬 ディスカッション →

開発者向け：ターミナルのコマンドと JSON 設定

パソコンにインストール

Claude Code

claude mcp add --scope user composer -- npx -y @usecomposer/mcp

Claude Desktop (claude_desktop_config.json)

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

Cursor (~/.cursor/mcp.json)

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

VS Code (mcp.json)

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

この設定は、作者のレジストリ登録情報から作成しています。READMEと違う場合は、READMEに従ってください。

ひと目でわかる

GitHubスター i: 4
週あたりのダウンロードi: 63/週
ライセンス i: MIT
接続方法: パソコンで動く
トランスポート: stdio
最新バージョンi: 0.1.7
カテゴリi: 開発者ツール
レジストリ公開日i: 2026年4月9日
コードの最終更新i: 2026年4月9日
作者: olivergrabner
パッケージ: npm: @usecomposer/mcp
リポジトリ: OliverGrabner/composer-mcp
レジストリでの状態: 有効

使えるアプリ

このサーバーのつなぎ方と、各アプリの公式ドキュメントに基づきます。2026年11月10日に確認。

パソコン上で動かせるアプリ

Claude Goose LM Studio Msty Studio Cherry Studio Cursor VS Code + GitHub Copilot Visual Studio Windsurf (Devin Desktop)Zed Kiro Cline Continue JetBrains AI Assistant Claude Code Codex CLI Gemini CLI OpenCode nodecode Warp LibreChat Raycast

すべてのアプリと長所・短所 →

できること

パソコンで動くサーバーです。インストールすると、ツール一覧がAIアプリに表示されます。

基本チェックi

誰でも見られる情報をチェックしており、コードは読んでいません。当てはまらない項目は数に入れていません。 · 2026年11月15日にチェック

✓ 合格
作者とリポジトリが一致
レジストリ名は、リポジトリを所有するGitHubアカウント OliverGrabner で確認済みです
! 注意
今もメンテナンスされている
コードの最終更新：7 か月前（6か月以上前）
✓ 合格
ライセンスがある
MITを使用
– 対象外
エンドポイントが応答する
これはパソコンで動くため、インターネット上のエンドポイントはありません
– 対象外
OAuthでサインイン
パソコンで動き、代わりにローカルの設定を使います
… 未チェック
ツールの説明に隠れた指示がない
パソコンで動くサーバーです。ツール一覧を読み取れるのは、インターネット上のエンドポイントがある場合だけです

公開済みの脆弱性（OSV.dev）

まだ確認していません

確認していること → · JSON

作者の方へ：再確認の依頼・情報の誤りの報告

ログイン

話し合い

質問、コツの共有、使えないことの報告ができます。「役に立った」の多い順です。

まだ投稿はありません。最初の質問や共有をどうぞ。

ここの投稿は利用者によるもので、PopNx チームのものではありません。

ログインして投稿

ユーザーレビュー

まだレビューはありません

ログインしてレビューを書く

開発者ツールのほかのサーバーとの比較i

このカテゴリのほかの5916件のうち83%よりスターが多い
このカテゴリのほかの5916件のうち8%より最近レジストリに公開
基本チェックの結果が、このカテゴリのほかの5916件のうち44%と同じかそれ以上

レジストリでこのカテゴリにある有効なすべてのサーバーと比較しています。スターは、公開者がリポジトリの所有者である場合だけ数えます。

よくある質問

Composerは安全ですか？

当てはまる基本チェック3項目のうち2項目に合格しました。コードは読んでいません。キーやトークンを追加する前に、サーバーがどんなアクセスを求めているかを確認し、必要な権限だけを持つキーを使ってください。

どんなキーやコードが必要ですか？

レジストリには必須のキーは載っていません。ただし、最初に使うときにサインインを求めるサーバーもあります。

パソコンで動きますか、それともクラウドですか？

あなたのパソコンで動きます。必要なときにAIアプリが起動し、データは作者のサーバーを通りません（サーバー自体がオンラインサービスを呼び出す場合を除きます）。

今もメンテナンスされていますか？

GitHubリポジトリの最終更新は7 か月前、最新バージョン（0.1.7）がレジストリに届いたのは7 か月前です。

どのアプリで使えますか？

Claude Desktop、Claude Code、Cursor、VS CodeなどのMCP対応アプリで使えます。パソコンにNode.jsも必要です。

代わりに使えるものは？

同じカテゴリには：GitDiagram, Appllama, Cloudflare MCP, Omnara, Repowise

似た働きのほかの候補

同じカテゴリでほかの作者のもの。コマンドは確認済み。公式を先に、次にスター順。

カードの見方：↓ 週あたりのダウンロードi★ GitHubスターi3つの柱：レビュー · チェック · 利用状況i更新＝最新バージョンをレジストリに公開した日i

GitDiagram

Architecture diagrams, explanations and Mermaid source for public GitHub repositories.

作者：ahmedkhaleel2004広く使われている★ 1.9万2 か月前更新

クラウドで動く✓ 提供元 · gitdiagram.comPopNx チームが実際に試用

接続方法

Appllama

Study screens, flows and paywalls from top-earning iOS apps, then build from what wins.

作者：Appllama広く使われている★ 51743 か月前更新

クラウドで動く✓ 提供元 · appllama.io

接続方法

Cloudflare MCP

Cloudflare MCP servers

作者：cloudflare広く使われている★ 446614 か月前更新

クラウドで動く✓ 提供元 · mcp.cloudflare.comPopNx チームが実際に試用

接続方法

Omnara

Deploy durable AI agents with Omnara, an open-source managed-agent platform.

作者：omnara-ai広く使われている★ 33952 か月前更新

クラウドで動く✓ 提供元 · omnara.com

接続方法

Repowise

Codebase intelligence for AI coding agents: graph, git history, docs, decisions, code health.

作者：repowise-dev広く使われている↓ 6506/週★ 8138 リポジトリ全体のスター一昨日更新

パソコンでもクラウドでも✓ 提供元 · repowise.dev

インストール

GitDiagram — クラウドで動き、インストール不要 · キー不要
Appllama — クラウドで動き、インストール不要 · キー不要
Cloudflare MCP — クラウドで動き、インストール不要 · キー不要 · Claude のディレクトリに掲載
Omnara — クラウドで動き、インストール不要 · キー不要
Repowise — クラウドでもパソコンにインストールでも使える · キー不要

作者のREADME

READMEを開く

作者のリポジトリから書かれたとおりにコピーしたものです。PopNx MCPは内容を確認・推奨していません。HTML、画像、スクリプトは取り除いています。リンクはこのサイトの外へ移動します。

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

Getting Started

Connect your IDE

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

Codex

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

VS Code (Copilot Chat)

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

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

VS Code (Cline)

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

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

VS Code (Continue)

Add to .continue/config.yaml:

mcpServers:

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

Windsurf

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

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

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

OpenCode

Create opencode.json in your project root:

"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

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

Composer

What it does

インストール

Node.js を入れる（まだなければ）

パソコン版 Claude アプリの設定ファイルを開く

この設定を貼り付けて保存

Claude を終了してもう一度開く

試してみる

代わりにできること

Node.js を入れる（まだなければ）

ターミナルを開く

このコマンドを貼り付けて Enter

Claude Code で /mcp と入力

試してみる

Node.js を入れる（まだなければ）

このボタンで Cursor を開く

Cursor の AI チャットを Agent モードで開く

試してみる

Node.js を入れる（まだなければ）

このボタンで VS Code を開く

VS Code の AI チャットを Agent モードで開く

試してみる

パソコンにインストール

ひと目でわかる

使えるアプリ

できること

基本チェックi

作者とリポジトリが一致

今もメンテナンスされている

ライセンスがある

エンドポイントが応答する

OAuthでサインイン

ツールの説明に隠れた指示がない

公開済みの脆弱性（OSV.dev）

話し合い

ユーザーレビュー

開発者ツールのほかのサーバーとの比較i

よくある質問

似た働きのほかの候補

GitDiagram

Appllama

Cloudflare MCP

Omnara

Repowise

作者の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