JSPM

  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 286
  • Score
    100M100P100Q88176F
  • License MIT

MCP Server for Claude Code, Cursor, Cline, Copilot, Windsurf - Visual AI Agent Plan Execution, Approval Workflow, Plan Visualization, Agent Orchestration. See what your AI is thinking before it writes code. Works with Claude, GPT, Gemini, DeepSeek, Qwen. Alternative to blind AI coding.

Package Exports

  • overture-mcp
  • overture-mcp/dist/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (overture-mcp) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Overture

Visual plan execution and approval workflow for AI coding agents.

Overture Demo


The Problem

Every AI coding agent today — Cursor, Claude Code, Cline, Copilot — works the same way: you type a prompt, the agent starts writing code, and you have no idea what it's actually planning to do.

By the time you realize the agent misunderstood your request, it has already written hundreds of lines of code that need to be discarded.

Some agents show plans as text in chat. But text plans don't show you:

  • How steps relate to each other
  • Where the plan branches into different approaches
  • What context each step needs to succeed

You end up wasting tokens, time, and patience.


The Solution

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

Overture Screenshot

With Overture, you can:

  • See the complete plan as an interactive graph before execution begins
  • Click any node to view full details about what that step will do
  • Attach context like files, documents, API keys, and instructions to specific steps
  • Choose between approaches when the agent proposes multiple ways to solve a problem
  • Watch execution in real-time as nodes light up with progress, completion, or errors

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.

Claude Code

Run this command to add Overture to Claude Code:

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

That's it. Claude Code will now use Overture for plan visualization.

Cursor

Open your Cursor MCP configuration file at ~/.cursor/mcp.json and add:

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

Restart Cursor for the changes to take effect.

Cline (VS Code Extension)

Open VS Code settings, search for "Cline MCP", and add this to your MCP servers configuration:

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

Global Installation (Optional)

If you prefer to install Overture globally instead of using npx:

npm install -g overture-mcp

Then replace npx overture-mcp with just overture-mcp in any of the configurations above.

Verifying Installation

Once installed, give your agent any task. Overture will automatically open in your browser at http://localhost:3031 and display the plan for your approval.


How It Works

  1. You prompt your agent with a task like "Build a REST API with authentication"

  2. The agent generates a detailed plan broken down into individual steps, with branching paths where multiple approaches are possible

  3. Overture displays the plan as an interactive graph in your browser

  4. You review and enrich the plan by clicking nodes to see details, attaching files or API keys to specific steps, and selecting which approach to take at decision points

  5. You approve the plan and the agent begins execution

  6. You watch progress in real-time as each node updates with its status — active, completed, or failed


Configuration

You can customize Overture's behavior with environment variables:

Variable Default Description
OVERTURE_HTTP_PORT 3031 Port for the web interface
OVERTURE_WS_PORT 3030 Port for WebSocket communication
OVERTURE_AUTO_OPEN true Whether to automatically open the browser

Contributing

Overture is open source and we welcome contributions from the community.

Whether you want to report a bug, suggest a feature, improve documentation, or contribute code — we'd love to have you involved.

All contributions are appreciated, no matter how small.


License

MIT License - see LICENSE for details.


Built by Sixth

For an even better experience, try Sixth for VS Code — Overture is built-in with zero configuration required.