Skip to main content
Glama
deenesjakoruzh
OliverGrabner

composer-mcp

by OliverGrabner
OverviewSchemaSourceRelated ServersDiscussionsAdmin
TypeScript

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

Related MCP server: scryer-mcp

ツール

図の管理

ツール

説明

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

This server cannot be deployed

One endpoint for every MCP toolRayrun runs every MCP server behind one URL and holds the credentials. Each call is decided per client, tool, and argument, then recorded.ray.runAd

Maintenance

ActivityInactive
ResponsivenessNo issues

Resources

Related MCP Connectors

Related MCP Servers

  • scryer-mcp

    aklos
    A
    license
    Not graded
    quality
    A
    maintenance
    Enables AI agents to read, modify, and build from architecture models, keeping the model as the source of truth for intent and synchronized with code.
    12 npm
    114
    BSD 3-Clause
  • coderadius by coderadius-ai

    coderadiusofficial

    coderadius-ai
    A
    license
    Not graded
    quality
    A
    maintenance
    Enables AI agents to query architecture context, data contracts, and blast radius to prevent cross-repo architectural breakage before merging.
    24
    Apache 2.0

  • archiet-xray

    Anioko
    A
    license
    A
    quality
    C
    maintenance
    Extracts deterministic architecture maps from codebases for AI agents, enabling queries about blast radius, routes, security findings, and production readiness without sending code anywhere.
    6
    MIT