Overture

コードの前に計画を確認。承認し、実行を見守る。

問題 • 解決策 • インストール • 機能 • マーケットプレイス • 設定 • ディスカッション

https://github.com/user-attachments/assets/eeb9c4cb-c80d-42da-bf63-c0c4ecb1e5d6

🔥 問題点

今日のAIコーディングエージェント — Cursor、Claude Code、Cline、Copilot — はすべて同じように動作します。

✨ 解決策

Overture は、AIエージェントの計画フェーズを傍受し、コードが書かれる前にインタラクティブなビジュアルフローチャートとして描画します。

あなたが計画を承認するまで、エージェントは一行のコードも書きません。

ビジュアル計画 パン、ズーム、クリックスルーナビゲーション付きのインタラクティブなフローチャート

コンテキスト添付 ステップごとのファイル、APIキー、指示

アプローチ選択 異なるパスの長所/短所を比較

リアルタイム実行 ノードが進行状況とともに点灯するのを監視

MCPマーケットプレイス ノードごとにツールを参照・添付

🚀 インストール

Overtureは、あらゆるMCP互換AIコーディングエージェントで動作するMCPサーバーです。1つのコマンドでインストール。

Claude Code

claude mcp add overture-mcp -- npx overture-mcp

Cursor

~/.cursor/mcp.jsonに追加:

{
  "mcpServers": {
    "overture": {
      "command": "npx",
      "args": ["overture-mcp"]
    }
  }
}

{
  "mcpServers": {
    "overture": {
      "command": "npx",
      "args": ["overture-mcp"]
    }
  }
}

{
  "servers": {
    "overture": {
      "command": "npx",
      "args": ["overture-mcp"]
    }
  }
}

{
  "mcpServers": {
    "overture": {
      "command": "npx",
      "args": ["overture-mcp"],
      "disabled": false
    }
  }
}

グローバルインストール (オプション)

npm install -g overture-mcp

動作確認

エージェントに任意のタスクを与えます。Overtureが自動的にhttp://localhost:3031で開き、計画が承認待ちになります。

🎯 仕組み

フロー:

🛠 機能

インタラクティブ計画キャンバス

ノード詳細パネル

任意のノードをクリックして詳細を表示:

動的フィールド (ユーザー入力)

ノードは実行前にユーザー入力を要求できます:

各フィールドに含まれるもの:

• 必須/オプションのインジケーター
• デフォルト値
• ヘルプテキストと説明
• セットアップ手順 (「APIキーの取得方法」)

ファイル添付

特定のノードにコンテキストファイルを添付:

• 自動タイプ検出 — 画像、コード、ドキュメント、その他
• ファイルタイプ別ビジュアルアイコン
• 説明 — このファイルが重要な理由をメモ
• 削除 — 不要な添付ファイルを削除

メタ指示

任意のノードにカスタムLLM指示を追加:

「ここではエラーハンドリングに特に注意する」 「src/auth.tsの既存の認証パターンを使用する」 「エッジケースのテストを必ず追加する」

指示は、そのノードが実行される直前にエージェントに送信されます。

分岐の検出と選択

エージェントが複数のアプローチを提案した場合:

要件チェックリスト

承認前に、Overtureが必要なものを表示:

• 空の必須フィールド — ノードごとにカウント
• 分岐選択 — 保留中の決定事項
• 進捗インジケーター — ビジュアルな完了追跡
• 展開可能なアイテム — クリックして詳細を表示
• 色分け — 緑 (完了) / オレンジ (保留中)

すべての要件が満たされるまで、承認ボタンは無効のままです。

実行コントロール

承認ボタンはスマートです:

• 🟢 「承認して実行」 — 計画準備完了、要件満たす
• 🟠 「要件を完了」 — 条件未達成
• 🔵 「実行中...」 — スピナー付きで実行中
• 🟢 「完了」 — すべて完了
• 🔴 「失敗」 — エラー発生

構造化出力

各ノード実行後、リッチな構造化出力を確認:

各カテゴリは展開可能 — 視覚的過負荷なしに詳細を掘り下げられます。

出力モーダル

完了したノードをクリックして完全な出力を表示:

• 長い出力用にスクロール可能
• シンタックスハイライトされたコードスニペット
• Escapeキーまたは外部クリックで閉じる

🏪 MCPマーケットプレイス

Overture UIから直接MCPサーバーを参照して添付。

MCPサーバーをノードに添付すると、エージェントはそのステップでのみそれらのツールにアクセスできるようになります。

📂 マルチプロジェクトサポート

複数のプロジェクトで同時に作業:

単一プロジェクトの場合、タブバーは自動的に非表示になり、UIがすっきりします。

📜 計画履歴と永続性

作業を失わない:

再開時の情報

再開時には、完全なコンテキストが提供されます:

• 現在のノード — 実行が停止した場所
• 完了したノード — その出力を含む
• 保留中のノード — 残りの作業
• 失敗したノード — エラーメッセージを含む
• すべての設定 — フィールド値、ブランチ、添付ファイル
• タイムスタンプ — 作成日時、一時停止日時

✏️ 動的プラン変更

実行中でもプランを変更可能:

プラン差分ビュー

プランが変更された場合、差分を正確に確認可能:

• 追加されたノード — 緑色でハイライト
• 削除されたノード — 赤色でハイライト
• 変更されたノード — 黄色で変更前/変更後を比較表示
• エッジの変更 — 追加/削除された接続

🔌 MCPツール (エージェント開発者向け)

Overtureはエージェントが対話するための11個のMCPツールを公開:

🔄 リアルタイムWebSocket通信

19種類のサーバー→クライアントメッセージ:

connected • plan_started • node_added • edge_added • plan_ready • plan_approved • node_status_updated • plan_completed • plan_failed • plan_paused • plan_resumed • nodes_inserted • node_removed • project_registered • projects_list • history_entries • plan_loaded • resume_plan_info • plan_updated

16種類のクライアント→サーバーメッセージ:

approve_plan • cancel_plan • rerun_request • pause_execution • resume_execution • insert_nodes • remove_node • register_project • subscribe_project • unsubscribe_project • get_history • load_plan • get_resume_info • save_plan • request_plan_update • create_new_plan

リレーモード

WebSocketポートが既に使用されている場合、Overtureは自動的にリレークライアントとして動作し、既存のサーバーを介してメッセージを転送します。複数のエージェントインスタンスで単一のUIを共有できます。

⚙️ 設定

環境変数の設定

claude mcp add overture-mcp -e OVERTURE_HTTP_PORT=4000 -e OVERTURE_AUTO_OPEN=false -- npx overture-mcp

{
  "mcpServers": {
    "overture": {
      "command": "npx",
      "args": ["overture-mcp"],
      "env": {
        "OVERTURE_HTTP_PORT": "4000",
        "OVERTURE_WS_PORT": "4001",
        "OVERTURE_AUTO_OPEN": "false"
      }
    }
  }
}

{
  "servers": {
    "overture": {
      "command": "npx",
      "args": ["overture-mcp"],
      "env": {
        "OVERTURE_HTTP_PORT": "4000",
        "OVERTURE_WS_PORT": "4001",
        "OVERTURE_AUTO_OPEN": "false"
      }
    }
  }
}

⌨️ キーボードショートカット

🤝 サポート対象エージェント

各エージェントには、最適なプラン生成のためのカスタマイズされたプロンプトが用意されています。

💪 なぜOvertureか？

🧑‍💻 開発

# Clone the repo
git clone https://github.com/SixHq/Overture.git
cd Overture

# Install dependencies
npm install

# Build all packages
npm run build

# Start MCP server (in one terminal)
cd packages/mcp-server && npm start

# Start UI dev server (in another terminal)
cd packages/ui && npm run dev

技術スタック

🤝 コントリビューション

Overtureはオープンソースであり、コントリビューションを歓迎します！

• 🐛 バグ報告 → GitHub Issues
• 💡 機能提案 → GitHub Discussions
• 📖 ドキュメント改善 — PR歓迎
• 🔧 コード貢献 — CONTRIBUTING.md を参照

大小問わず、すべてのコントリビューションに感謝します。

📄 ライセンス

MITライセンス - 詳細は LICENSE を参照。

Built by Sixth

最高の体験のために、Sixth for VS Code
をお試しください。 Overtureはゼロ設定でビルトインされています。

_{Stop flying blind. See the plan. Approve it. Execute with confidence.}

スター履歴