Overture is an open-source MCP server with a local web interface that draws an AI coding agent's execution plan as an interactive flowchart before the agent writes code. It lets you review the plan visually first.
$ npm install -g overture-mcp
See the plan before the code. Approve it. Then watch it execute.
Problem • Solution • Install • Features • Marketplace • Config • Discussions
Every AI coding agent today — Cursor, Claude Code, Cline, Copilot — works the same way:
Some agents show plans as text in chat. But text fails to show:
Overture intercepts your AI agent's planning phase and renders it as an interactive visual flowchart — before any code is written.
Visual Plans Interactive flowchart with pan, zoom, and click-through navigation
Attach Context Files, API keys, instructions per step
Choose Approaches Compare pros/cons of different paths
Real-time Execution Watch nodes light up with progress
MCP Marketplace Browse & attach tools per node
Overture is an MCP server that works with any MCP-compatible AI coding agent. One command to install.
claude mcp add overture-mcp -- npx overture-mcp
Add to ~/.cursor/mcp.json:
{
"mcpServers": {
"overture": {
"command": "npx",
"args": ["overture-mcp"]
}
}
}
More Agents (Cline, Copilot, Sixth AI)
Open VS Code settings → search "Cline MCP" → add:
{
"mcpServers": {
"overture": {
"command": "npx",
"args": ["overture-mcp"]
}
}
}
Create .vscode/mcp.json in your project root:
{
"servers": {
"overture": {
"command": "npx",
"args": ["overture-mcp"]
}
}
}
Note: GitHub Copilot MCP requires VS Code 1.99+ and uses
serversinstead ofmcpServers.
Add to your Sixth AI MCP settings file:
| Platform | Path |
|---|---|
| macOS | ~/Library/Application Support/Code/User/globalStorage/sixth.sixth-ai/settings/sixth-mcp-settings.json |
| Windows | %APPDATA%\Code\User\globalStorage\sixth.sixth-ai\settings\sixth-mcp-settings.json |
| Linux | ~/.config/Code/User/globalStorage/sixth.sixth-ai/settings/sixth-mcp-settings.json |
{
"mcpServers": {
"overture": {
"command": "npx",
"args": ["overture-mcp"],
"disabled": false
}
}
}
npm install -g overture-mcp
Give your agent any task. Overture automatically opens at http://localhost:3031 with your plan ready for approval.
The Flow:
| Step | What Happens |
|---|---|
| 1. Prompt | You give your agent a task: "Build a REST API with auth" |
| 2. Plan | Agent generates a detailed plan with steps, branches, and requirements |
| 3. Visualize | Overture renders the plan as an interactive graph |
| 4. Enrich | You click nodes, attach files, select branches, fill in API keys |
| 5. Approve | You click "Approve & Execute" (or press Enter) |
| 6. Execute | Watch real-time as nodes pulse, complete, or fail |
| 7. Control | Pause (Spacebar), resume, re-run nodes, or modify the plan mid-flight |
| Feature | Description |
|---|---|
| React Flow Canvas | Full pan, zoom, drag with smooth animations |
| Streaming Parser | Plan nodes appear in real-time as the agent generates them |
| Dagre Auto-Layout | Intelligent automatic positioning of nodes |
| Visual Status | Pending (gray) → Active (pulsing yellow) → Completed (green) / Failed (red) |
| Next Node Indicator | Blue pulse shows which node executes next |
| Complexity Badges | Low (green), Medium (yellow), High (red) at a glance |
| Glow Effects | Shadow glows highlight active and upcoming nodes |
| Insertable Edges | Hover over edges to insert new nodes mid-plan |
Click any node to reveal its full details:
| Info | What You See |
|---|---|
| Title & Description | Full context for what this step does |
| Complexity Level | Low / Medium / High with visual indicator |
| Expected Output | What the step should produce |
| Risks & Edge Cases | Potential issues to watch for |
| Pros & Cons | For branch options, compare trade-offs |
Nodes can request input from you before execution:
| Field Type | Use Case |
|---|---|
| String | Project names, URLs, custom values |
| Number | Port numbers, limits, counts |
| Boolean | Yes/No toggles for options |
| Select | Dropdown with predefined choices |
| Secret | API keys, tokens (masked input) |
| File | File paths to attach context |
Each field includes:
Attach context files to specific nodes:
Add custom LLM instructions to any node:
"Pay special attention to error handling here" "Use the existing auth pattern from src/auth.ts" "Make sure to add tests for edge cases"
Instructions are sent to the agent right before that node executes.
When the agent proposes multiple approaches:
| Feature | Description |
|---|---|
| Auto-Detection | Branches detected from graph structure (no special markup) |
| Branch Points | Nodes with multiple outgoing edges become decision points |
| Selection Modal | Side-by-side comparison with pros/cons |
| Complexity Comparison | See difficulty level for each option |
| Visual Indicator | Selected branch highlighted on canvas |
| Skip Unselected | Only your chosen path executes |
Before you can approve, Overture shows what's needed:
The Approve button stays disabled until all requirements are met.
| Control | How |
|---|---|
| Approve | Click button or press Enter |
| Pause | Press Spacebar mid-execution |
| Resume | Press Spacebar again |
| Re-run Node | Click failed node → "Re-run" |
| Re-run From Here | Re-execute from any node to the end |
The approval button is smart:
Stars on GitHub
Helps you take a change from a rough idea or bug report through to a tested, reviewed result, with each step handled by a focused skill. Its skills cover pinning down domain terms, designing module interfaces, diagnosing hard bugs, and reviewing changes against your repo's coding standards.
@mattpocockA development methodology for coding agents that makes the agent brainstorm before building, follow plans, run parallel work and finish branches in a disciplined way. You get fewer skipped steps and more consistent results from your coding assistant.
@obraGives your coding agent a planning, testing and review routine to follow on every task. It plans before building, checks changes with tests, has a fresh reviewer look for regressions, and saves repeated wins as reusable skills.
@affaan-mDeveloper tools for working on the React codebase itself. Provides skills for extracting error messages, managing and debugging feature flags across release channels, running Flow type checks, and fixing lint and formatting issues before committing.
@facebookOverture is an open-source MCP server with a local web interface that draws an AI coding agent's execution plan as an interactive flowchart before the agent writes code. It lets you review the plan visually first. Install it with the command on its page. Free and open source.
Is this plugin yours?
Claim it with GitHubSubmit a pluginPromote it