Overture

Lihat rencana sebelum kode. Setujui. Lalu saksikan eksekusinya.

Masalah • Solusi • Instalasi • Fitur • Marketplace • Konfigurasi • Diskusi

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

🔥 Masalahnya

Setiap agen pengkodean AI saat ini — Cursor, Claude Code, Cline, Copilot — bekerja dengan cara yang sama:

✨ Solusinya

Overture mencegat fase perencanaan agen AI Anda dan merendernya sebagai diagram alur visual interaktif — sebelum kode apa pun ditulis.

Agen tidak menulis satu baris kode pun sampai Anda menyetujui rencana tersebut.

Rencana Visual Diagram alur interaktif dengan navigasi pan, zoom, dan klik-tayang

Lampirkan Konteks File, kunci API, instruksi per langkah

Pilih Pendekatan Bandingkan pro/kontra dari jalur yang berbeda

Eksekusi Real-time Saksikan node menyala seiring kemajuan

Marketplace MCP Telusuri & lampirkan alat per node

🚀 Instalasi

Overture adalah server MCP yang bekerja dengan agen pengkodean AI apa pun yang kompatibel dengan MCP. Satu perintah untuk menginstal.

Claude Code

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

Cursor

Tambahkan ke ~/.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
    }
  }
}

Instalasi Global (Opsional)

npm install -g overture-mcp

Verifikasi Berfungsi

Berikan tugas apa pun kepada agen Anda. Overture secara otomatis terbuka di http://localhost:3031 dengan rencana Anda siap untuk disetujui.

🎯 Cara Kerjanya

Alurnya:

🛠 Fitur

Kanvas Rencana Interaktif

Panel Detail Node

Klik node mana pun untuk mengungkap detail lengkapnya:

Bidang Dinamis (Input Pengguna)

Node dapat meminta input dari Anda sebelum eksekusi:

Setiap bidang mencakup:

• Indikator wajib/opsional
• Nilai default
• Teks bantuan & deskripsi
• Instruksi penyiapan ("Cara mendapatkan kunci API")

Lampiran File

Lampirkan file konteks ke node tertentu:

• Deteksi tipe otomatis — Gambar, kode, dokumen, atau lainnya
• Ikon visual per jenis file
• Deskripsi — tambahkan catatan tentang mengapa file ini penting
• Hapus — hapus lampiran yang tidak diinginkan

Instruksi Meta

Tambahkan instruksi LLM kustom ke node mana pun:

"Berikan perhatian khusus pada penanganan kesalahan di sini" "Gunakan pola auth yang ada dari src/auth.ts" "Pastikan untuk menambahkan pengujian untuk kasus tepi"

Instruksi dikirim ke agen tepat sebelum node itu dieksekusi.

Deteksi & Pemilihan Cabang

Saat agen mengusulkan beberapa pendekatan:

Daftar Periksa Persyaratan

Sebelum Anda dapat menyetujui, Overture menunjukkan apa yang diperlukan:

• Bidang wajib yang kosong — dihitung per node
• Pemilihan cabang — keputusan mana yang tertunda
• Indikator kemajuan — pelacakan penyelesaian visual
• Item yang dapat diperluas — klik untuk melihat detail
• Kode warna — Hijau (selesai) / Oranye (tertunda)

Tombol Setujui tetap dinonaktifkan sampai semua persyaratan terpenuhi.

Kontrol Eksekusi

Tombol persetujuan itu cerdas:

• 🟢 "Setujui & Jalankan" — rencana siap, persyaratan terpenuhi
• 🟠 "Lengkapi Persyaratan" — kondisi belum terpenuhi
• 🔵 "Menjalankan..." — berjalan dengan spinner
• 🟢 "Selesai" — semua selesai
• 🔴 "Gagal" — terjadi kesalahan

Keluaran Terstruktur

Setelah setiap node dieksekusi, lihat keluaran terstruktur yang kaya:

Setiap kategori dapat diperluas — telusuri tanpa kelebihan visual.

Modal Keluaran

Klik node yang sudah selesai untuk melihat keluaran lengkap:

• Dapat digulir untuk keluaran panjang
• Cuplikan kode dengan penyorotan sintaks
• Tutup dengan Escape atau klik di luar

🏪 Marketplace MCP

Telusuri dan lampirkan server MCP langsung dari UI Overture.

Saat Anda melampirkan server MCP ke sebuah node, agen mendapatkan akses ke alat tersebut hanya untuk langkah itu.

📂 Dukungan Multi-Proyek

Bekerja pada beberapa proyek secara bersamaan:

Proyek tunggal? Bilah tab otomatis disembunyikan untuk UI yang lebih bersih.

📜 Riwayat & Persistensi Rencana

Jangan pernah kehilangan pekerjaan Anda:

Informasi Melanjutkan

Saat melanjutkan, Anda mendapatkan konteks lengkap:

• Node saat ini — tempat eksekusi berhenti
• Node selesai — dengan keluarannya
• Node tertunda — yang tersisa untuk dikerjakan
• Node gagal — dengan pesan kesalahan
• Semua konfigurasi — nilai bidang, cabang, lampiran
• Stempel waktu — kapan dibuat, kapan dijeda

✏️ Modifikasi Rencana Dinamis

Ubah rencana bahkan selama eksekusi:

Tampilan Diff Rencana

Saat rencana berubah, lihat persis apa yang berbeda:

• Node ditambahkan — disorot hijau
• Node dihapus — disorot merah
• Node dimodifikasi — kuning dengan perbandingan sebelum/sesudah
• Perubahan sisi — koneksi ditambahkan/dihapus

🔌 Alat MCP (Untuk Pengembang Agen)

Overture menyediakan 11 alat MCP untuk berinteraksi dengan agen:

🔄 Komunikasi WebSocket Waktu Nyata

19 tipe pesan server-ke-klien:

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 tipe pesan klien-ke-server:

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

Mode Relai

Saat port WebSocket sudah digunakan, Overture otomatis beroperasi sebagai klien relai, meneruskan pesan melalui server yang ada. Beberapa instans agen dapat berbagi satu UI.

⚙️ Konfigurasi

Mengatur Variabel Lingkungan

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

⌨️ Pintasan Keyboard

🤝 Agen yang Didukung

Setiap agen memiliki prompt yang disesuaikan untuk pembuatan rencana yang optimal.

💪 Mengapa Overture?

🧑‍💻 Pengembangan

# 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

Tumpukan Teknologi

🤝 Berkontribusi

Overture adalah sumber terbuka dan kami menyambut kontribusi!

• 🐛 Laporkan bug di GitHub Issues
• 💡 Sarankan fitur di GitHub Discussions
• 📖 Perbaiki dokumen — PR diterima
• 🔧 Kontribusi kode — lihat CONTRIBUTING.md

Semua kontribusi dihargai, sekecil apa pun.

📄 Lisensi

Lisensi MIT - lihat LICENSE untuk detailnya.

Dibangun oleh Sixth

Untuk pengalaman terbaik, coba Sixth untuk VS Code
Overture sudah bawaan tanpa perlu konfigurasi.

_{Berhenti terbang buta. Lihat rencananya. Setujui. Eksekusi dengan percaya diri.}

Riwayat Bintang