GitHub - SixHq/Overture: 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.

See the plan before the code. Approve it. Then watch it execute.

Problem • Solution • Install • Features • Marketplace • Config • Discussions

🔥 The Problem

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

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

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

🚀 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"]
    }
  }
}

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

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

{
  "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:

🛠 Features

Interactive Plan Canvas

Node Details Panel

Click any node to reveal its full details:

Dynamic Fields (User Inputs)

Nodes can request input from you before execution:

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

When the agent proposes multiple approaches:

Requirements Checklist

Before you can approve, Overture shows what's needed:

• Empty required fields — counted per node
• Branch selections — which decisions are pending
• Progress indicator — visual completion tracking
• Expandable items — click to see details
• Color coding — Green (done) / Orange (pending)

The Approve button stays disabled until all requirements are met.

Execution Controls

The approval button is smart:

• 🟢 "Approve & Execute" — plan ready, requirements met
• 🟠 "Complete Requirements" — conditions unmet
• 🔵 "Executing..." — running with spinner
• 🟢 "Completed" — all done
• 🔴 "Failed" — error occurred

Structured Output

After each node executes, see rich structured output:

Each category is expandable — drill in without visual overload.

Output Modal

Click any completed node to see full output:

• Scrollable for long outputs
• Syntax highlighted code snippets
• Close with Escape or click outside

🏪 MCP Marketplace

Browse and attach MCP servers directly from the Overture UI.

When you attach an MCP server to a node, the agent gains access to those tools only for that step.

📂 Multi-Project Support

Work on multiple projects simultaneously:

Single project? Tab bar hides automatically for a cleaner UI.

📜 Plan History & Persistence

Never lose your work:

Resume Information

When resuming, you get complete context:

• Current node — where execution stopped
• Completed nodes — with their outputs
• Pending nodes — what's left to do
• Failed nodes — with error messages
• All configurations — field values, branches, attachments
• Timestamps — when created, when paused

✏️ Dynamic Plan Modification

Modify plans even during execution:

Plan Diff View

When a plan changes, see exactly what's different:

• Added nodes — highlighted green
• Removed nodes — highlighted red
• Modified nodes — yellow with before/after comparison
• Edge changes — added/removed connections

🔌 MCP Tools (For Agent Developers)

Overture exposes 11 MCP tools for agents to interact with:

🔄 Real-time WebSocket Communication

19 server-to-client message types:

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 client-to-server message types:

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

Relay Mode

When the WebSocket port is already in use, Overture automatically operates as a relay client, forwarding messages through the existing server. Multiple agent instances can share a single UI.

⚙️ Configuration

Setting Environment Variables

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

⌨️ Keyboard Shortcuts

🤝 Supported Agents

Each agent has custom-tailored prompts for optimal plan generation.

💪 Why Overture?

🧑‍💻 Development

# 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

Tech Stack

🤝 Contributing

Overture is open source and we welcome contributions!

• 🐛 Report bugs at GitHub Issues
• 💡 Suggest features at GitHub Discussions
• 📖 Improve docs — PRs welcome
• 🔧 Contribute code — see CONTRIBUTING.md

All contributions are appreciated, no matter how small.

📄 License

MIT License - see LICENSE for details.

Star History