先看方案再写代码。批准后，即可见证其执行。

问题 • 解决方案 • 安装 • 特性 • 市场 • 配置 • 讨论

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

🔥 问题

如今的每款 AI 编程助手——Cursor、Claude Code、Cline、Copilot——都采用相同的运作方式：

✨ 解决方案

Overture 会在您的 AI 助手进入规划阶段时进行拦截，并将其渲染为一张 交互式的可视化流程图——在任何代码被编写之前。

在您批准该计划之前，助手不会写出任何一行代码。

可视化计划 可平移、缩放并支持点击导航的交互式流程图

附加上下文 每个步骤可关联文件、API 密钥或指令

选择方案 比较不同路径的优缺点

实时执行 观察节点随着进度逐渐点亮

MCP市场 浏览并为每个节点添加工具

🚀 安装

Overture 是一个 MCP 服务器，可与 任何兼容 MCP 的 AI 编程助手 配合使用。只需一条命令即可完成安装。

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 会显示所需内容：

• 必填字段是否为空 — 按节点统计 |
• 分支选择是否完成 — 哪些决策尚未做出 |
• 进度指示器 — 可视化的完成度跟踪 |
• 可展开项 — 点击查看详情 |
• 颜色编码 — 绿色（已完成）/ 橙色（待处理）

只有当所有要求都满足时，“批准”按钮才会启用。

执行控制

批准按钮具有智能逻辑：

• 🟢 “批准并执行” — 计划已就绪，要求已满足 |
• 🟠 “完成要求” — 条件未达成 |
• 🔵 “正在执行…” — 显示加载动画 |
• 🟢 “已完成” — 全部完成 |
• 🔴 “失败” — 出现错误 |

结构化输出

每个节点执行完毕后，您可以看到丰富的结构化输出：

每个类别均可展开——深入查看而不造成视觉负担。

输出模态框

点击任意已完成的节点即可查看完整输出：

• 可滚动，方便查看长篇输出 |
• 语法高亮 的代码片段 |
• 通过 Esc 键或点击外部关闭 |

🏪 MCP 市场

直接从 Overture UI 浏览并附加 MCP 服务器。

当您将 MCP 服务器附加到某个节点时，代理仅在该步骤中才能访问这些工具。

📂 多项目支持

同时处理多个项目：

只有一个项目？标签栏会自动隐藏，以获得更简洁的界面。

📜 计划历史与持久化

再也不用担心丢失工作：

恢复信息

恢复时，您将获得完整的上下文：

• 当前节点 — 执行停止的位置
• 已完成节点 — 包含其输出
• 待处理节点 — 还需完成的部分
• 失败节点 — 包含错误信息
• 所有配置 — 字段值、分支、附件
• 时间戳 — 创建时间和暂停时间

✏️ 动态计划修改

即使在执行过程中也可以修改计划：

计划差异视图

当计划发生变化时，您可以清楚地看到具体的不同之处：

• 新增节点 — 以绿色高亮显示
• 删除节点 — 以红色高亮显示
• 修改节点 — 黄色显示，并对比前后变化
• 边的变化 — 添加或移除的连接线

🔌 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？

🧑‍💻 开发

# 克隆仓库
git clone https://github.com/SixHq/Overture.git
cd Overture

# 安装依赖
npm install

# 构建所有包
npm run build

# 启动 MCP 服务器（在一个终端中）
cd packages/mcp-server && npm start

# 启动 UI 开发服务器（在另一个终端中）
cd packages/ui && npm run dev

技术栈

🤝 贡献

Overture 是开源项目，我们欢迎各方贡献！

• 🐛 报告问题 请至 GitHub Issues
• 💡 提出功能建议 请至 GitHub Discussions
• 📖 改进文档 — 欢迎提交 PR
• 🔧 参与代码贡献 — 请参阅 CONTRIBUTING.md

无论贡献大小，我们都深表感谢。

📄 许可证

MIT 许可证 — 详情请参阅 LICENSE。

由 Sixth 打造

为获得最佳体验，请尝试 Sixth for VS Code
Overture 内置其中，无需任何配置。

_{不再盲目行动。看清计划，批准并自信执行。}

星标历史

Overture 快速上手指南

Overture 是一个 MCP 服务器工具，旨在解决 AI 编程助手（如 Cursor、Claude Code）“盲目写代码”的问题。它能在代码生成前，将 AI 的规划步骤渲染为交互式可视化流程图，允许用户在执行前审查、补充上下文并批准计划。

环境准备

在开始之前，请确保您的开发环境满足以下要求：

• 操作系统：macOS, Windows, 或 Linux
• Node.js：建议安装 LTS 版本（用于运行 npx 命令）
• AI 编程助手：需支持 MCP (Model Context Protocol)，例如：
  • Claude Code
  • Cursor
  • Cline (VS Code 插件)
  • GitHub Copilot (VS Code 1.99+)
  • Sixth AI
• 浏览器：现代浏览器（Chrome, Edge, Firefox 等），用于访问可视化界面

安装步骤

Overture 无需复杂的全局配置，通常通过 npx 直接在支持的 AI 助手配置中调用即可。根据您的主力工具选择以下一种方式：

1. Claude Code 用户

在终端运行以下命令添加 MCP 服务：

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

2. Cursor 用户

打开 Cursor 设置，找到 MCP 配置部分，编辑 ~/.cursor/mcp.json 文件，添加以下内容：

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

3. Cline (VS Code 插件) 用户

1. 打开 VS Code 设置，搜索 "Cline MCP"。
2. 在 MCP 配置 JSON 中添加：

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

4. GitHub Copilot 用户

在项目根目录创建 .vscode/mcp.json 文件（注意键名为 servers）：

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

可选：全局安装 如果您希望预安装工具以避免每次运行时下载，可执行：

npm install -g overture-mcp

基本使用

安装完成后，Overture 会自动拦截 AI 助手的规划阶段。以下是标准工作流程：

第一步：发起任务

在您的 AI 助手对话框中输入任何开发任务，例如：

"帮我构建一个带有身份验证功能的 REST API"

第二步：审查可视化计划

此时，AI 不会立即编写代码。Overture 会自动在浏览器中打开界面（默认地址：http://localhost:3031）。 您将看到一个交互式的流程图，包含：

• 任务节点：详细的执行步骤。
• 分支选项：不同的实现路径及其优缺点对比。
• 依赖关系：任务之间的先后顺序。

第三步：补充上下文与批准

在网页界面中，您可以：

1. 点击节点：查看详细信息、风险预估和预期输出。
2. 填写动态字段：输入必要的 API Key、端口号或上传参考文件。
3. 选择路径：如果有多个方案，选择您倾向的一个。
4. 添加指令：在特定节点附加给 AI 的额外提示（如“注意错误处理”）。

当所有必填项完成后，点击 "Approve & Execute" 按钮（或按 Enter 键）。

第四步：实时监控执行

批准后，AI 开始工作。您可以在 Overture 界面上实时看到：

• 当前执行节点的脉冲高亮。
• 完成状态（绿色）或失败状态（红色）。
• 控制执行：随时按 Spacebar 暂停/恢复，或对失败节点点击 "Re-run" 重试。

现在，您可以一边看着流程图逐步点亮，一边等待代码自动生成完毕。