Composerは、AIコーディングエージェントがMCP (Model Context Protocol)を通じてインタラクティブなアーキテクチャ図を作成・変更できるようにするビジュアルシステム設計ツールです。エージェントにはサービス、データベース、キュー、接続を追加するためのツールが提供され、ユーザーはusecomposer.com上のライブキャンバスでリアルタイムの更新を確認できます。

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

はじめに

IDEを接続する

Claude Code:

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

Cursor — プロジェクトのルートに .cursor/mcp.json を作成します:

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

初回使用時に認証のためのブラウザが開きます。

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

プロジェクトのルートに .cursor/mcp.json を作成します:

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

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

プロジェクトのルートに .vscode/mcp.json を作成します:

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

Clineサイドバー > 設定（歯車アイコン） > MCP Servers > Add Remote Server を開きます:

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

.continue/config.yaml に追加します:

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

~/.codeium/windsurf/mcp_config.json に追加します:

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

注: Windsurfは "url" の代わりに "serverUrl" を使用します。

プロジェクトのルートに opencode.json を作成します:

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

ツール

図の管理

ツール	説明
`list_diagrams`	すべての図を一覧表示します。作業する図を見つけるために最初に呼び出してください
`create_diagram`	新しい図を作成し、このセッション用に自動選択します
`select_diagram`	このセッションで作業する図を選択します
`rename_diagram`	現在選択されている図の名前を変更します

注: 他のツールを使用する前に、list_diagrams を呼び出してから select_diagram（または create_diagram）を呼び出してください。

読み取り

ツール	説明
`get_graph`	完全なアーキテクチャ図（すべてのノードとエッジ）を取得します
`get_node`	接続されたエッジを含む単一ノードの詳細を取得します
`search_graph`	キーワードでノードとエッジを検索します
`get_screenshot`	最後の自動保存時の図のPNGサムネイルを取得します

書き込み

ツール	説明
`upsert_node`	ノード（サービス、データベース、キューなど）を作成または更新します
`upsert_edge`	2つのノード間の接続を作成または更新します
`define_api`	バックエンドサービスノードにAPIエンドポイントを定義します
`delete_element`	図からノードまたはエッジを削除します
`link_path`	ノードをコードベース内のファイルまたはフォルダにリンクします

計画と検証

ツール	説明
`verify_diagram`	不足しているエンドポイントや孤立したノードなどの問題をチェックします
`plan_import`	既存のコードベースをインポートするためのステップバイステップのワークフロー
`get_guide`	ノードタイプ、プロトコル、ベストプラクティスのリファレンスガイド

ノードタイプ

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

エッジプロトコル

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

プロンプト例

接続したら、AIエージェントに次のように尋ねてみてください:

プロンプト	動作
"Import this codebase into Composer"	リポジトリをスキャンしてアーキテクチャ図を構築します
"Create a new Composer diagram called Backend Architecture"	新しい図を作成し、自動選択します
"Add a Redis cache between the API and the database in Composer"	図に新しいノードとエッジを追加します
"Add analytics monitoring to the Composer diagram"	可観測性ノードと接続を追加します
"Update the APIs I defined in Composer"	バックエンドノードのエンドポイント定義を更新します
"Verify my Composer diagram"	不足しているエンドポイントや孤立したノードなどをチェックします
"Link each Composer node to its source code"	図のノードをファイルパスに関連付けます

仕組み

認証はOAuth 2.1を介して処理されます。ブラウザが開いて一度だけ同意フローを行うと接続されます。ツール呼び出しは mcp.usecomposer.com のComposer APIにプロキシされます。図のデータはComposerのサーバー上に保持されます。MCPサーバー自体はステートレスです。

MCPを通じて行われた変更は、リアルタイムのWebSocket同期により、Composerキャンバス上で即座に確認できます。

開発

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

リンク

Composer - ビジュアルアーキテクチャキャンバス
MCP Protocol - Model Context Protocol仕様
Issues - バグ報告と機能リクエスト

ライセンス

MIT

composer-mcp