Labsco
SixHq logo

Overture

โ˜… 623

from SixHq

Visual plan approval for AI coding agents. See your agent's plan as an interactive graph, attach context, choose approaches, then approve before any code is written.

๐Ÿ”ฅ๐Ÿ”ฅ๐Ÿ”ฅ๐Ÿ”ฅโœ“ VerifiedFreeAdvanced setup
<p align="center"> <picture> <source media="(prefers-color-scheme: light)" srcset="https://raw.githubusercontent.com/SixHq/Overture/main/assets/overture-logo-dark.png"> <img src="https://raw.githubusercontent.com/SixHq/Overture/main/assets/overture-logo-light.png" alt="Overture" width="400"> </picture> </p> <p align="center"> <strong>See the plan before the code. Approve it. Then watch it execute.</strong> </p> <p align="center"> <a href="https://www.npmjs.com/package/overture-mcp"><img src="https://img.shields.io/npm/v/overture-mcp?style=for-the-badge&color=blue" alt="npm version"></a> <a href="https://github.com/SixHq/Overture/actions"><img src="https://img.shields.io/github/actions/workflow/status/SixHq/Overture/ci.yml?branch=main&style=for-the-badge" alt="CI status"></a> <a href="https://www.npmjs.com/package/overture-mcp"><img src="https://img.shields.io/npm/dm/overture-mcp?style=for-the-badge&color=orange" alt="npm downloads"></a> <a href="https://github.com/SixHq/Overture/discussions"><img src="https://img.shields.io/github/discussions/SixHq/Overture?style=for-the-badge&color=purple" alt="Discussions"></a> <a href="LICENSE"><img src="https://img.shields.io/badge/License-MIT-green.svg?style=for-the-badge" alt="MIT License"></a> </p> <p align="center"> <a href="#-the-problem">Problem</a> โ€ข <a href="#-the-solution">Solution</a> โ€ข <a href="#-installation">Install</a> โ€ข <a href="#-features">Features</a> โ€ข <a href="#-mcp-marketplace">Marketplace</a> โ€ข <a href="#-configuration">Config</a> โ€ข <a href="https://github.com/SixHq/Overture/discussions">Discussions</a> </p> <br> <p align="center">

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

</p>

๐Ÿ”ฅ The Problem

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

<table> <tr> <td width="50%">

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
</td> <td width="50%">

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?
</td> </tr> </table> <p align="center"> <img src="https://raw.githubusercontent.com/SixHq/Overture/main/assets/problem-illustration.png" alt="The Problem" width="700"> </p>

โœจ The Solution

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

<p align="center"> <img src="https://raw.githubusercontent.com/SixHq/Overture/main/assets/solution-screenshot.png" alt="Overture Solution" width="900"> </p>

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

<br> <table> <tr> <td align="center" width="20%"> <img src="https://img.icons8.com/color/96/flow-chart.png" width="64"><br> <strong>Visual Plans</strong><br> <sub>Interactive flowchart with pan, zoom, and click-through navigation</sub> </td> <td align="center" width="20%"> <img src="https://img.icons8.com/color/96/attach.png" width="64"><br> <strong>Attach Context</strong><br> <sub>Files, API keys, instructions per step</sub> </td> <td align="center" width="20%"> <img src="https://img.icons8.com/color/96/split.png" width="64"><br> <strong>Choose Approaches</strong><br> <sub>Compare pros/cons of different paths</sub> </td> <td align="center" width="20%"> <img src="https://img.icons8.com/color/96/lightning-bolt.png" width="64"><br> <strong>Real-time Execution</strong><br> <sub>Watch nodes light up with progress</sub> </td> <td align="center" width="20%"> <img src="https://img.icons8.com/color/96/shop.png" width="64"><br> <strong>MCP Marketplace</strong><br> <sub>Browse & attach tools per node</sub> </td> </tr> </table>

๐ŸŽฏ How It Works

<p align="center"> <img src="https://raw.githubusercontent.com/SixHq/Overture/main/assets/how-it-works.png" alt="How Overture Works" width="800"> </p>

The Flow:

StepWhat Happens
1. PromptYou give your agent a task: "Build a REST API with auth"
2. PlanAgent generates a detailed plan with steps, branches, and requirements
3. VisualizeOverture renders the plan as an interactive graph
4. EnrichYou click nodes, attach files, select branches, fill in API keys
5. ApproveYou click "Approve & Execute" (or press Enter)
6. ExecuteWatch real-time as nodes pulse, complete, or fail
7. ControlPause (Spacebar), resume, re-run nodes, or modify the plan mid-flight

๐Ÿ›  Features

Interactive Plan Canvas

<p align="center"> <img src="https://raw.githubusercontent.com/SixHq/Overture/main/assets/feature-canvas.png" alt="Interactive Canvas" width="800"> </p>
FeatureDescription
React Flow CanvasFull pan, zoom, drag with smooth animations
Streaming ParserPlan nodes appear in real-time as the agent generates them
Dagre Auto-LayoutIntelligent automatic positioning of nodes
Visual StatusPending (gray) โ†’ Active (pulsing yellow) โ†’ Completed (green) / Failed (red)
Next Node IndicatorBlue pulse shows which node executes next
Complexity BadgesLow (green), Medium (yellow), High (red) at a glance
Glow EffectsShadow glows highlight active and upcoming nodes
Insertable EdgesHover over edges to insert new nodes mid-plan

Node Details Panel

<p align="center"> <img src="https://raw.githubusercontent.com/SixHq/Overture/main/assets/feature-node-panel.png" alt="Node Details Panel" width="700"> </p>

Click any node to reveal its full details:

InfoWhat You See
Title & DescriptionFull context for what this step does
Complexity LevelLow / Medium / High with visual indicator
Expected OutputWhat the step should produce
Risks & Edge CasesPotential issues to watch for
Pros & ConsFor branch options, compare trade-offs

Dynamic Fields (User Inputs)

<p align="center"> <img src="https://raw.githubusercontent.com/SixHq/Overture/main/assets/feature-dynamic-fields.png" alt="Dynamic Fields" width="600"> </p>

Nodes can request input from you before execution:

Field TypeUse Case
StringProject names, URLs, custom values
NumberPort numbers, limits, counts
BooleanYes/No toggles for options
SelectDropdown with predefined choices
SecretAPI keys, tokens (masked input)
FileFile 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

<p align="center"> <img src="https://raw.githubusercontent.com/SixHq/Overture/main/assets/feature-attachments.png" alt="File Attachments" width="600"> </p>

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

<p align="center"> <img src="https://raw.githubusercontent.com/SixHq/Overture/main/assets/feature-meta-instructions.png" alt="Meta Instructions" width="600"> </p>

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

<p align="center"> <img src="https://raw.githubusercontent.com/SixHq/Overture/main/assets/feature-branching.png" alt="Branch Selection" width="800"> </p>

When the agent proposes multiple approaches:

FeatureDescription
Auto-DetectionBranches detected from graph structure (no special markup)
Branch PointsNodes with multiple outgoing edges become decision points
Selection ModalSide-by-side comparison with pros/cons
Complexity ComparisonSee difficulty level for each option
Visual IndicatorSelected branch highlighted on canvas
Skip UnselectedOnly your chosen path executes

Requirements Checklist

<p align="center"> <img src="https://raw.githubusercontent.com/SixHq/Overture/main/assets/feature-checklist.png" alt="Requirements Checklist" width="400"> </p>

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

<p align="center"> <img src="https://raw.githubusercontent.com/SixHq/Overture/main/assets/feature-execution.png" alt="Execution Controls" width="700"> </p>
ControlHow
ApproveClick button or press Enter
PausePress Spacebar mid-execution
ResumePress Spacebar again
Re-run NodeClick failed node โ†’ "Re-run"
Re-run From HereRe-execute from any node to the end

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

<p align="center"> <img src="https://raw.githubusercontent.com/SixHq/Overture/main/assets/feature-output.png" alt="Structured Output" width="700"> </p>

After each node executes, see rich structured output:

CategoryWhat It Shows
OverviewSummary of what was accomplished
Files ChangedPaths, lines added/removed, diffs
Files CreatedNew files with line counts
Files DeletedRemoved files
Packages Installednpm packages with versions
MCP Servers SetupInstallation status (installed/configured/failed)
Web SearchesQueries performed, results used
Tool CallsWhich tools were used and how often
Preview URLsLinks to deployed sites or previews
NotesInfo, warnings, errors

Each category is expandable โ€” drill in without visual overload.


Output Modal

<p align="center"> <img src="https://raw.githubusercontent.com/SixHq/Overture/main/assets/feature-output-modal.png" alt="Output Modal" width="700"> </p>

Click any completed node to see full output:

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

๐Ÿช MCP Marketplace

<p align="center"> <img src="https://raw.githubusercontent.com/SixHq/Overture/main/assets/feature-marketplace.png" alt="MCP Marketplace" width="800"> </p>

Browse and attach MCP servers directly from the Overture UI.

FeatureDescription
Built-in MarketplaceSearch and discover MCP servers
Server DetailsDescriptions, authors, GitHub links, stars
Category BrowsingFilter by use case
Per-Node AttachmentAttach specific tools to specific steps
Setup InstructionsSee how to configure each server
Recommended ServersCurated list for common tasks

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:

FeatureDescription
Tab NavigationSwitch between projects instantly
Auto RegistrationProjects register on first agent contact
Isolated StateEach project has separate plans, nodes, configs
Unread BadgesKnow when other projects have updates
Project ContextSee project name, path, and agent type

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


๐Ÿ“œ Plan History & Persistence

Never lose your work:

FeatureDescription
Auto-SavePlans saved every 3 seconds
Local StorageStored in ~/.overture/history.json
History BrowserSlide-in panel with all past plans
Status IconsCompleted, failed, executing, paused
Progress BarsVisual completion percentage
One-Click ResumeLoad and continue any past plan
Full ContextAll field values, branch selections, attachments preserved

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:

OperationDescription
Insert NodesAdd new steps mid-execution
Remove NodesDelete steps (edges auto-reconnect)
Replace ContentUpdate node title/description in-place
Batch OperationsMultiple changes in one request

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:

ToolPurpose
submit_planSubmit complete plan as XML
get_approvalWait for user approval (blocks until approved)
update_node_statusUpdate node status + output during execution
plan_completedMark plan as successfully completed
plan_failedMark plan as failed with error message
check_rerunCheck if user requested a node re-run
check_pauseCheck if user paused execution
get_resume_infoGet full context for resuming a paused plan
request_plan_updateRequest incremental plan modifications
create_new_planSignal creation of a new plan
get_usage_instructionsGet agent-specific instructions

๐Ÿ”„ 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.


โŒจ๏ธ Keyboard Shortcuts

KeyAction
EnterApprove plan (when ready)
SpacePause / Resume execution
EscapeDeselect current node / Close modal

๐Ÿค Supported Agents

AgentStatusNotes
Claude Codeโœ… FullNative MCP support
Cursorโœ… FullVia mcp.json config
Clineโœ… FullVia VS Code settings
GitHub Copilotโœ… FullVS Code 1.99+ required
Sixth AIโœ… FullBuilt-in, zero config

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


๐Ÿ’ช Why Overture?

<table> <tr> <td width="50%">

For Users

  • Transparency โ€” See exactly what happens before code is written
  • Control โ€” Approve, reject, or modify any plan
  • Context โ€” Attach files and instructions to the right steps
  • Choice โ€” Compare approaches and pick your path
  • Visibility โ€” Real-time progress with rich output
  • Safety โ€” Pause, resume, or re-run at any time
  • History โ€” Resume any past plan instantly
  • Efficiency โ€” No wasted tokens on rejected approaches
</td> <td width="50%">

For AI Coding

  • Trust โ€” Makes agents predictable and controllable
  • Interpretability โ€” See AI reasoning before execution
  • Universal โ€” Works with any MCP-compatible agent
  • Extensible โ€” MCP Marketplace for tool discovery
  • Open Source โ€” MIT licensed, community-driven
  • Self-Contained โ€” No cloud dependencies
  • Works Offline โ€” Fully local execution
  • Multi-Project โ€” Manage multiple workspaces
</td> </tr> </table>

๐Ÿง‘โ€๐Ÿ’ป 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

LayerTechnologies
MCP ServerNode.js, TypeScript, Express, WebSocket (ws), SAX XML Parser
UIReact 18, React Flow, Zustand, Framer Motion, Tailwind CSS, Vite
LayoutDagre (automatic graph positioning)

๐Ÿค Contributing

Overture is open source and we welcome contributions!

All contributions are appreciated, no matter how small.


๐Ÿ“„ License

MIT License - see LICENSE for details.


<p align="center"> <br> <img src="https://raw.githubusercontent.com/SixHq/Overture/main/assets/sixth-logo.png" alt="Sixth" width="120"> <br><br> Built by <a href="https://trysixth.com"><strong>Sixth</strong></a> <br><br> For the best experience, try <a href="https://marketplace.visualstudio.com/items?itemName=Sixth.sixth-ai"><strong>Sixth for VS Code</strong></a><br> Overture is built-in with zero configuration required. <br><br> <sub>Stop flying blind. See the plan. Approve it. Execute with confidence.</sub> </p>

Star History

Star History Chart