Overture

Sehen Sie sich den Plan vor dem Code an. Genehmigen Sie ihn. Dann beobachten Sie die Ausführung.

Problem • Lösung • Installation • Funktionen • Marktplatz • Konfiguration • Diskussionen

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

🔥 Das Problem

Jeder KI-Coding-Agent heute – Cursor, Claude Code, Cline, Copilot – funktioniert auf die gleiche Weise:

✨ Die Lösung

Overture fängt die Planungsphase Ihres KI-Agenten ab und stellt sie als interaktives visuelles Flussdiagramm dar – bevor irgendein Code geschrieben wird.

Der Agent schreibt keine einzige Codezeile, bevor Sie den Plan genehmigt haben.

Visuelle Pläne Interaktives Flussdiagramm mit Schwenken, Zoomen und Durchklick-Navigation

Kontext anhängen Dateien, API-Schlüssel, Anweisungen pro Schritt

Ansätze wählen Vor- und Nachteile verschiedener Wege vergleichen

Echtzeit-Ausführung Beobachten Sie, wie Knoten mit Fortschritt aufleuchten

MCP-Marktplatz Durchsuchen und Anhängen von Werkzeugen pro Knoten

🚀 Installation

Overture ist ein MCP-Server, der mit jedem MCP-kompatiblen KI-Coding-Agenten funktioniert. Ein Befehl zur Installation.

Claude Code

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

Cursor

Zu ~/.cursor/mcp.json hinzufügen:

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

Globale Installation (Optional)

npm install -g overture-mcp

Funktionsfähigkeit überprüfen

Geben Sie Ihrem Agenten eine beliebige Aufgabe. Overture öffnet sich automatisch unter http://localhost:3031 mit Ihrem zur Genehmigung bereiten Plan.

🎯 So funktioniert es

Der Ablauf:

🛠 Funktionen

Interaktive Plan-Leinwand

Knotendetail-Panel

Klicken Sie auf einen beliebigen Knoten, um seine vollständigen Details anzuzeigen:

Dynamische Felder (Benutzereingaben)

Knoten können vor der Ausführung Eingaben von Ihnen anfordern:

Jedes Feld enthält:

• Erforderlich/Optional-Indikator
• Standardwerte
• Hilfetexte & Beschreibungen
• Einrichtungsanweisungen ("So erhalten Sie einen API-Schlüssel")

Dateianhänge

Hängen Sie Kontextdateien an bestimmte Knoten an:

• Automatische Typerkennung – Bild, Code, Dokument oder Sonstiges
• Visuelle Symbole pro Dateityp
• Beschreibungen – Notizen hinzufügen, warum diese Datei wichtig ist
• Löschen – unerwünschte Anhänge entfernen

Meta-Anweisungen

Fügen Sie benutzerdefinierte LLM-Anweisungen zu jedem Knoten hinzu:

"Achten Sie hier besonders auf die Fehlerbehandlung" "Verwenden Sie das vorhandene Authentifizierungsmuster aus src/auth.ts" "Stellen Sie sicher, dass Tests für Grenzfälle hinzugefügt werden"

Anweisungen werden unmittelbar vor der Ausführung dieses Knotens an den Agenten gesendet.

Zweig-Erkennung & -Auswahl

Wenn der Agent mehrere Ansätze vorschlägt:

Anforderungs-Checkliste

Bevor Sie genehmigen können, zeigt Overture, was benötigt wird:

• Leere Pflichtfelder – pro Knoten gezählt
• Zweigauswahlen – welche Entscheidungen ausstehen
• Fortschrittsindikator – visuelle Verfolgung der Vervollständigung
• Erweiterbare Elemente – klicken für Details
• Farbcodierung – Grün (erledigt) / Orange (ausstehend)

Die Schaltfläche "Genehmigen" bleibt deaktiviert, bis alle Anforderungen erfüllt sind.

Ausführungssteuerung

Die Genehmigungsschaltfläche ist intelligent:

• 🟢 "Genehmigen & Ausführen" – Plan bereit, Anforderungen erfüllt
• 🟠 "Anforderungen vervollständigen" – Bedingungen nicht erfüllt
• 🔵 "Wird ausgeführt..." – läuft mit Spinner
• 🟢 "Abgeschlossen" – alles erledigt
• 🔴 "Fehlgeschlagen" – Fehler aufgetreten

Strukturierte Ausgabe

Nach der Ausführung jedes Knotens sehen Sie eine umfangreiche strukturierte Ausgabe:

Jede Kategorie ist erweiterbar – für Detailansicht ohne visuelle Überlastung.

Ausgabemodal

Klicken Sie auf einen abgeschlossenen Knoten, um die vollständige Ausgabe zu sehen:

• Scrollbar für lange Ausgaben
• Syntaxhervorgehobene Codeausschnitte
• Schließen mit Escape oder Klicken außerhalb

🏪 MCP-Marktplatz

Durchsuchen und hängen Sie MCP-Server direkt über die Overture-Benutzeroberfläche an.

Wenn Sie einen MCP-Server an einen Knoten anhängen, erhält der Agent Zugriff auf diese Werkzeuge nur für diesen Schritt.

📂 Multi-Projekt-Unterstützung

Arbeiten Sie gleichzeitig an mehreren Projekten:

Einzelnes Projekt? Die Tableiste wird automatisch ausgeblendet für eine übersichtlichere Benutzeroberfläche.

📜 Planverlauf & Persistenz

Verlieren Sie nie Ihre Arbeit:

Informationen zur Wiederaufnahme

Bei der Wiederaufnahme erhalten Sie den vollständigen Kontext:

• Aktueller Knoten — wo die Ausführung gestoppt wurde
• Abgeschlossene Knoten — mit ihren Ausgaben
• Ausstehende Knoten — was noch zu tun ist
• Fehlgeschlagene Knoten — mit Fehlermeldungen
• Alle Konfigurationen — Feldwerte, Zweige, Anhänge
• Zeitstempel — wann erstellt, wann pausiert

✏️ Dynamische Planänderung

Ändern Sie Pläne sogar während der Ausführung:

Plan-Diff-Ansicht

Wenn sich ein Plan ändert, sehen Sie genau, was anders ist:

• Hinzugefügte Knoten — grün hervorgehoben
• Entfernte Knoten — rot hervorgehoben
• Geänderte Knoten — gelb mit Vorher/Nachher-Vergleich
• Kantenänderungen — hinzugefügte/entfernte Verbindungen

🔌 MCP-Tools (Für Agent-Entwickler)

Overture stellt 11 MCP-Tools für die Interaktion von Agenten bereit:

🔄 Echtzeit-WebSocket-Kommunikation

19 Server-zu-Client-Nachrichtentypen:

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-zu-Server-Nachrichtentypen:

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

Wenn der WebSocket-Port bereits verwendet wird, arbeitet Overture automatisch als Relay-Client und leitet Nachrichten über den bestehenden Server weiter. Mehrere Agent-Instanzen können sich eine einzige Benutzeroberfläche teilen.

⚙️ Konfiguration

Umgebungsvariablen setzen

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

⌨️ Tastaturkürzel

🤝 Unterstützte Agenten

Jeder Agent hat maßgeschneiderte Eingabeaufforderungen für optimale Planerstellung.

💪 Warum Overture?

🧑‍💻 Entwicklung

# 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

Technologie-Stack

🤝 Mitwirken

Overture ist Open Source und wir freuen uns über Beiträge!

• 🐛 Fehler melden unter GitHub Issues
• 💡 Funktionen vorschlagen unter GitHub Discussions
• 📖 Dokumentation verbessern — PRs willkommen
• 🔧 Code beisteuern — siehe CONTRIBUTING.md

Alle Beiträge werden geschätzt, egal wie klein.

📄 Lizenz

MIT-Lizenz — siehe LICENSE für Details.

Erstellt von Sixth

Für das beste Erlebnis probieren Sie Sixth für VS Code
Overture ist integriert, ohne dass eine Konfiguration erforderlich ist.

_{Fliegen Sie nicht länger blind. Sehen Sie den Plan. Genehmigen Sie ihn. Führen Sie ihn mit Zuversicht aus.}

Stern-Verlauf