Overture MCP — ユースケース, インストール & ライブデモ

なぜ使うのか

主な機能

対話的な React Flow キャンバス — パン、ズーム、ノードレベルの制御
動的入力 (テキスト、数値、ブール値、シークレット、ファイル添付)
選択前に代替案を比較 (メリット/デメリット表示)
Claude Code、Cursor、Cline、Copilot 全対応のワンラインインストール

ライブデモ

実際の動作

overture.replay ▶ 準備完了

0/0

インストール

クライアントを選択

~/Library/Application Support/Claude/claude_desktop_config.json · Windows: %APPDATA%\Claude\claude_desktop_config.json

{
  "mcpServers": {
    "overture": {
      "command": "npx",
      "args": [
        "-y",
        "Overture"
      ],
      "_inferred": true
    }
  }
}

Claude Desktop → Settings → Developer → Edit Config を開く。保存後、アプリを再起動。

~/.cursor/mcp.json · .cursor/mcp.json

{
  "mcpServers": {
    "overture": {
      "command": "npx",
      "args": [
        "-y",
        "Overture"
      ],
      "_inferred": true
    }
  }
}

Cursor は Claude Desktop と同じ mcpServers スキーマを使用。プロジェクト設定はグローバルより優先。

VS Code → Cline → MCP Servers → Edit

{
  "mcpServers": {
    "overture": {
      "command": "npx",
      "args": [
        "-y",
        "Overture"
      ],
      "_inferred": true
    }
  }
}

Cline サイドバーの MCP Servers アイコンをクリックし、"Edit Configuration" を選択。

~/.codeium/windsurf/mcp_config.json

{
  "mcpServers": {
    "overture": {
      "command": "npx",
      "args": [
        "-y",
        "Overture"
      ],
      "_inferred": true
    }
  }
}

Claude Desktop と同じ形式。Windsurf を再起動して反映。

~/.continue/config.json

{
  "mcpServers": [
    {
      "name": "overture",
      "command": "npx",
      "args": [
        "-y",
        "Overture"
      ]
    }
  ]
}

Continue はマップではなくサーバーオブジェクトの配列を使用。

~/.config/zed/settings.json

{
  "context_servers": {
    "overture": {
      "command": {
        "path": "npx",
        "args": [
          "-y",
          "Overture"
        ]
      }
    }
  }
}

context_servers に追加。保存時に Zed がホットリロード。

claude mcp add overture -- npx -y Overture

ワンライナー。claude mcp list で確認、claude mcp remove で削除。

ユースケース

実用的な使い方： Overture

エージェントがコードを書く前にフローチャートで計画を確認する

👤 実際のリポジトリでコーディングエージェントを実行する全員 ⏱ ~15 min beginner

使うタイミング： エージェントが自信満々に800行の間違ったコードを書いて困った経験がある — 承認ゲートが欲しい。

前提条件

Claude Code または同等のエージェント — claude.ai/code

フロー

インストール

Claude Code に統合するために claude mcp add overture-mcp -- npx overture-mcp を実行してください。✓ コピーしました

→ 表示された URL で Overture web UI にアクセスできる
機能をリクエスト; キャンバスで計画が開く

認証ミドルウェアを実装してください。コーディング前に overture を使って計画グラフを生成してください。✓ コピーしました

→ 各ステップのノードが Overture UI に表示される
ノードを承認またはリダイレクト

ノード 3 が間違っているように見えます — 'use existing middleware at ./lib/auth.ts instead' というコメントで却下してください✓ コピーしました

→ 計画が再生成され、承認を押した後だけエージェントがコードを書く

結果： エージェントが実際にリクエストしたコードを書きます — ステップ 3 で間違った前提を見つけ、コミット 3 では見つけられませんでした。

注意点

大規模機能ではキャンバスが見づらくなる — 機能をサブプランに分割してください。Overture は複数プロジェクトのタブをサポートしています。

組み合わせ： claude-code

2 つの実装アプローチを並べて比較する

👤 設計を選択するエンジニア ⏱ ~20 min intermediate

使うタイミング： 2 つのアプローチ (Redis キャッシュ vs インメモリ) で迷っていて、エージェントに両方の計画を立ててほしい。

フロー

2 つのブランチをリクエスト

このキャッシング機能を 2 つのブランチで計画してください: (A) Redis、(B) インメモリ LRU。各々のメリット/デメリットを表示してください。✓ コピーしました

→ Overture が 2 つのブランチを比較ビューでレンダリングする
選択して実行

ブランチ B を承認してください。そのパスだけを実行してください。✓ コピーしました

→ 選択したブランチだけが実行される

結果： 両方にコードをコミットすることなく、代替案間の判断を十分な情報のもとで行える。

計画ノードにシークレットをインジェクトする (コミットしない)

👤 デプロイ計画をスクリプト化する全員 ⏱ ~10 min intermediate

使うタイミング： ステップに API キーが必要だが、プロンプト履歴ではなく実行時に提供したい。

フロー

ノードにシークレットが必要とマーク

デプロイノードは DEPLOY_TOKEN をシークレット入力として必要とします。提供されるまで一時停止してください。✓ コピーしました

→ Overture が入力待機中のシークレットフィールドを表示
UI にペースト; ノードがロック解除

(Overture UI 内) トークンをペーストして「再開」をクリック✓ コピーしました

→ 計画が続行され、シークレットがチャット履歴に残らない

結果： エージェントが特権ステップを実行できますが、シークレットはトランスクリプトに漏れ出さない。

組み合わせ

他のMCPと組み合わせて10倍の力を

overture + claude-code

すべての Claude Code タスクの承認レイヤーとして Overture を使用

今後、推定 30 分以上のタスクについては、コーディング前に overture を使って計画を立ててください。✓ コピーしました

overture + vibe-check

計画 → サニティチェック → 実行

Overture が計画を生成した後、承認前に vibe_check を実行してください。✓ コピーしました

ツール

このMCPが提供する機能

ツール	入力	呼び出すタイミング	コスト
plan_create	goal: str, context?: str	マルチステップコーディングタスクの開始時	計画用 LLM トークン
plan_update	plan_id, node_changes	ユーザーの承認/却下に応答	0
plan_execute	plan_id, from_node?	ユーザー承認後	ツール呼び出し + トークン
plan_branch	plan_id, from_node, alt_goal	代替案を比較	LLM トークン

コストと制限

運用コスト

APIクォータ: なし — ローカルアプリ
呼び出しあたりのトークン: 計画は最初に ~1-3k トークンを追加します。間違ったコードを回避することでより多く節約できます。
金額: 無料、オープンソース
ヒント: 自明でない機能にのみ計画を使用してください。自明な編集はグラフを必要としません。

セキュリティ

権限、シークレット、影響範囲

認証情報の保管： UI に入力されたシークレットは計画ごとにローカルブラウザストレージに保存される

データ送信先： デフォルトではなし — localhost で実行

トラブルシューティング

よくあるエラーと対処法

キャンバス URL が ERR_CONNECTION_REFUSED を返す

Overture UI ポート (デ��ォルト 3939) がバインドされていません。MCP サーバーログを確認するか OVERTURE_PORT を設定してください。

確認： curl http://localhost:3939

計画生成がハング

エージェントが LLM を待機中です。エージェント自身のログでレート制限/トークン枯渇を確認してください。

ノード却下が反映されない

一部のエージェントは計画をキャッシュします — 明示的に「ノード X から私のフィードバックで計画を再生成してください」と言ってください。

代替案

Overture 他との比較

代替案	代わりに使う場面	トレードオフ
sequentialthinking-tools	テキスト計画が欲しい、キャンバスではなく	ブランチの視覚的な比較がない
shrimp-task-manager	対話的な承認ではなく、永続的なタスクが欲しい	異なるループ — より非同期的で、ゲートが少ない

その他

リソース

📖 GitHub の公式 README を読む

🐙 オープンな issue を見る

🔍 400以上のMCPサーバーとSkillsを見る