Overture

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

🔥 The Problem

Every AI coding agent today — Cursor, Claude Code, Cline, Copilot — works the same way:

What Happens Now

1. You type a prompt
2. Agent immediately starts writing code
3. You have zero visibility into what it's doing
4. You realize it misunderstood your request
5. Hundreds of lines of code need to be discarded
6. You've wasted tokens, time, and patience

Text Plans Don't Help

Some agents show plans as text in chat. But text fails to show:

• Dependencies — which tasks depend on what?
• Branch points — what alternative approaches exist?
• Context requirements — which files, APIs, or secrets are needed?
• Complexity — which steps are risky?
• Progress — what's done, what's next?

✨ The Solution

Overture intercepts your AI agent's planning phase and renders it as an interactive visual flowchart — before any code is written.

The agent doesn't write a single line of code until you approve the plan.

🚀 Installation

Overture is an MCP server that works with any MCP-compatible AI coding agent. One command to install.

Claude Code

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

Cursor

Add to ~/.cursor/mcp.json:

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

Cline (VS Code Extension)

Open VS Code settings → search "Cline MCP" → add:

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

GitHub Copilot

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 servers instead of mcpServers.

Sixth AI (VS Code Extension)

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
    }
  }
}

Global Installation (Optional)

npm install -g overture-mcp

Verify It Works

Give your agent any task. Overture automatically opens at http://localhost:3031 with your plan ready for approval.

🎯 How It Works

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 |

🛠 Features

Interactive Plan Canvas

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

Node Details Panel

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 |

Dynamic Fields (User Inputs)

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:

• Required/optional indicator
• Default values
• Help text & descriptions
• Setup instructions ("How to get an API key")

File Attachments

Attach context files to specific nodes:

• Automatic type detection — Image, code, document, or other
• Visual icons per file type
• Descriptions — add notes about why this file matters
• Delete — remove unwanted attachments

Meta Instructions

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.

Branch Detection & Selection