Composer

Composer MCP Server

AI コーディングエージェントにアーキテクチャキャンバスを提供します。
IDE から直接、ソフトウェアアーキテクチャ図を設計、可視化し、進化させましょう。

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

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

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

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

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

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

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

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

ツール

図の管理

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

読み取り

書き込み

計画と検証

ノードの種類

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

エッジのプロトコル

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

プロンプトの例

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

仕組み

認証には 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