by SixHq
Overture is an open-source, locally running web interface delivered as an MCP (Model Context Protocol) server that visually maps out the execution plan of any AI coding agent as an interactive flowchart/graph before the agent begins writing code.
# Add to your Claude Code skills
git clone https://github.com/SixHq/Overturehttps://github.com/user-attachments/assets/eeb9c4cb-c80d-42da-bf63-c0c4ecb1e5d6
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.
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
No comments yet. Be the first to share your thoughts!
Add to ~/.cursor/mcp.json:
{
"mcpServers": {
"overture": {
"command": "npx",
"args": ["overture-mcp"]
}
}
}
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.