Overture

ดูแผนก่อนเขียนโค้ด อนุมัติแผน แล้วจึงดูการทำงาน

ปัญหา • วิธีแก้ไข • การติดตั้ง • คุณสมบัติ • ตลาดกลาง • การตั้งค่า • การสนทนา

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

🔥 ปัญหา

เอเจนต์ AI สำหรับเขียนโค้ดทุกตัวในปัจจุบัน — Cursor, Claude Code, Cline, Copilot — ทำงานในลักษณะเดียวกัน:

✨ วิธีแก้ไข

Overture ดักจับขั้นตอนการวางแผนของเอเจนต์ AI ของคุณและแสดงผลเป็น แผนผังลำดับงานแบบภาพที่โต้ตอบได้ — ก่อนที่จะมีการเขียนโค้ดใดๆ

เอเจนต์จะไม่เขียนโค้ดแม้แต่บรรทัดเดียวจนกว่าคุณจะอนุมัติแผน

แผนภาพ แผนผังลำดับงานแบบโต้ตอบได้ พร้อมการเลื่อน ซูม และการนำทางแบบคลิกทะลุ

แนบบริบท ไฟล์, คีย์ API, คำแนะนำต่อขั้นตอน

เลือกแนวทาง เปรียบเทียบข้อดีข้อเสียของเส้นทางต่างๆ

การดำเนินการแบบเรียลไทม์ ดูโหนดสว่างขึ้นเมื่อมีความคืบหน้า

ตลาดกลาง MCP เรียกดูและแนบเครื่องมือต่อโหนด

🚀 การติดตั้ง

Overture เป็นเซิร์ฟเวอร์ MCP ที่ทำงานร่วมกับ เอเจนต์ AI สำหรับเขียนโค้ดที่เข้ากันได้กับ MCP ทุกตัว ติดตั้งด้วยคำสั่งเดียว

Claude Code

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

Cursor

เพิ่มไปยัง ~/.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
    }
  }
}

การติดตั้งแบบโกลบอล (ไม่บังคับ)

npm install -g overture-mcp

ตรวจสอบว่าทำงานได้

มอบหมายงานใดๆ ให้เอเจนต์ของคุณ Overture จะเปิดขึ้นโดยอัตโนมัติที่ http://localhost:3031 พร้อมแผนของคุณที่รอการอนุมัติ

🎯 วิธีการทำงาน

ขั้นตอน:

🛠 คุณสมบัติ

ผืนผ้าใบแผนแบบโต้ตอบได้

แผงรายละเอียดโหนด

คลิกโหนดใดๆ เพื่อดูรายละเอียดทั้งหมด:

ฟิลด์ไดนามิก (ข้อมูลจากผู้ใช้)

โหนดสามารถขอข้อมูลจากคุณก่อนดำเนินการ:

แต่ละฟิลด์ประกอบด้วย:

• ตัวบ่งชี้จำเป็น/ไม่จำเป็น
• ค่าเริ่มต้น
• ข้อความช่วยเหลือและคำอธิบาย
• คำแนะนำการตั้งค่า ("วิธีรับคีย์ API")

ไฟล์แนบ

แนบไฟล์บริบทไปยังโหนดเฉพาะ:

• การตรวจจับประเภทอัตโนมัติ — รูปภาพ, โค้ด, เอกสาร หรืออื่นๆ
• ไอคอนภาพ ตามประเภทไฟล์
• คำอธิบาย — เพิ่มบันทึกเกี่ยวกับสาเหตุที่ไฟล์นี้สำคัญ
• ลบ — ลบไฟล์แนบที่ไม่ต้องการ

คำแนะนำเมตา

เพิ่มคำแนะนำ LLM แบบกำหนดเองไปยังโหนดใดๆ:

"ให้ความสนใจเป็นพิเศษกับการจัดการข้อผิดพลาดที่นี่" "ใช้รูปแบบการยืนยันตัวตนที่มีอยู่จาก src/auth.ts" "อย่าลืมเพิ่มการทดสอบสำหรับกรณีพิเศษ"

คำแนะนำจะถูกส่งไปยังเอเจนต์ก่อนที่โหนดนั้นจะทำงาน

การตรวจจับและเลือกสาขา

เมื่อเอเจนต์เสนอแนวทางหลายแบบ:

รายการตรวจสอบข้อกำหนด

ก่อนที่คุณจะอนุมัติได้ Overture จะแสดงสิ่งที่จำเป็น:

• ฟิลด์ที่จำเป็นที่ว่างเปล่า — นับต่อโหนด
• การเลือกสาขา — การตัดสินใจใดที่ยังค้างอยู่
• ตัวบ่งชี้ความคืบหน้า — การติดตามความสมบูรณ์ด้วยภาพ
• รายการที่ขยายได้ — คลิกเพื่อดูรายละเอียด
• การเข้ารหัสสี — เขียว (เสร็จแล้ว) / ส้ม (รอดำเนินการ)

ปุ่มอนุมัติจะยังคงปิดใช้งานจนกว่าจะตรงตามข้อกำหนดทั้งหมด

การควบคุมการดำเนินการ

ปุ่มอนุมัติมีความชาญฉลาด:

• 🟢 "อนุมัติและดำเนินการ" — แผนพร้อม ตรงตามข้อกำหนด
• 🟠 "ทำข้อกำหนดให้สมบูรณ์" — เงื่อนไขไม่ครบ
• 🔵 "กำลังดำเนินการ..." — กำลังทำงานพร้อมสปินเนอร์
• 🟢 "เสร็จสมบูรณ์" — ทุกอย่างเสร็จสิ้น
• 🔴 "ล้มเหลว" — เกิดข้อผิดพลาด

ผลลัพธ์ที่มีโครงสร้าง

หลังจากแต่ละโหนดดำเนินการ ดูผลลัพธ์ที่มีโครงสร้างสมบูรณ์:

แต่ละหมวดหมู่สามารถ ขยายได้ — เจาะลึกโดยไม่ทำให้ข้อมูลล้นตา

โมดัลผลลัพธ์

คลิกโหนดที่เสร็จสมบูรณ์ใดๆ เพื่อดูผลลัพธ์ทั้งหมด:

• เลื่อนได้ สำหรับผลลัพธ์ที่ยาว
• ส่วนย่อยของโค้ดที่มีการเน้นไวยากรณ์
• ปิดด้วย Escape หรือคลิกด้านนอก

🏪 ตลาดกลาง MCP

เรียกดูและแนบเซิร์ฟเวอร์ MCP โดยตรงจาก UI ของ Overture

เมื่อคุณแนบเซิร์ฟเวอร์ MCP เข้ากับโหนด เอเจนต์จะเข้าถึงเครื่องมือเหล่านั้นได้ เฉพาะสำหรับขั้นตอนนั้น

📂 การสนับสนุนหลายโปรเจกต์

ทำงานกับหลายโปรเจกต์พร้อมกัน:

โปรเจกต์เดียว? แถบแท็บจะซ่อนโดยอัตโนมัติเพื่อ UI ที่สะอาดตา

📜 ประวัติแผนและการคงอยู่

ไม่ต้องกังวลว่างานของคุณจะสูญหาย:

ข้อมูลการดำเนินการต่อ

เมื่อดำเนินการต่อ คุณจะได้รับบริบทที่สมบูรณ์:

• โหนดปัจจุบัน — จุดที่การดำเนินการหยุดลง
• โหนดที่เสร็จสมบูรณ์ — พร้อมผลลัพธ์
• โหนดที่รอดำเนินการ — สิ่งที่เหลือให้ทำ
• โหนดที่ล้มเหลว — พร้อมข้อความแสดงข้อผิดพลาด
• การกำหนดค่าทั้งหมด — ค่าฟิลด์, สาขา, ไฟล์แนบ
• การประทับเวลา — เมื่อสร้าง, เมื่อหยุดชั่วคราว

✏️ การปรับเปลี่ยนแผนแบบไดนามิก

ปรับเปลี่ยนแผนแม้ในระหว่างการดำเนินการ:

มุมมองความแตกต่างของแผน

เมื่อแผนเปลี่ยนแปลง ดูสิ่งที่แตกต่างอย่างชัดเจน:

• โหนดที่เพิ่ม — เน้นสีเขียว
• โหนดที่ลบ — เน้นสีแดง
• โหนดที่แก้ไข — สีเหลืองพร้อมการเปรียบเทียบก่อน/หลัง
• การเปลี่ยนแปลงขอบ — การเชื่อมต่อที่เพิ่ม/ลบ

🔌 เครื่องมือ MCP (สำหรับนักพัฒนาเอเจนต์)

Overture เปิดเผยเครื่องมือ MCP 11 รายการสำหรับเอเจนต์ในการโต้ตอบ:

🔄 การสื่อสาร WebSocket แบบเรียลไทม์

ประเภทข้อความจากเซิร์ฟเวอร์ถึงไคลเอนต์ 19 ประเภท:

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 ประเภท:

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

โหมดรีเลย์

เมื่อพอร์ต WebSocket ถูกใช้งานอยู่แล้ว Overture จะทำงานเป็น ไคลเอนต์รีเลย์ โดยอัตโนมัติ ส่งต่อข้อความผ่านเซิร์ฟเวอร์ที่มีอยู่ หลายอินสแตนซ์ของเอเจนต์สามารถแชร์ UI เดียวกันได้

⚙️ การกำหนดค่า

การตั้งค่าตัวแปรสภาพแวดล้อม

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

⌨️ ปุ่มลัด

🤝 เอเจนต์ที่รองรับ

แต่ละเอเจนต์มี พรอมต์ที่ปรับแต่งเฉพาะ เพื่อการสร้างแผนที่เหมาะสมที่สุด

💪 ทำไมต้อง Overture?

🧑‍💻 การพัฒนา

# 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

กลุ่มเทคโนโลยี

🤝 การมีส่วนร่วม

Overture เป็นโอเพนซอร์สและเรายินดีต้อนรับการมีส่วนร่วม!

• 🐛 รายงานข้อบกพร่อง ที่ GitHub Issues
• 💡 แนะนำฟีเจอร์ ที่ GitHub Discussions
• 📖 ปรับปรุงเอกสาร — ยินดีต้อนรับ PR
• 🔧 มีส่วนร่วมด้วยโค้ด — ดู CONTRIBUTING.md

ทุกการมีส่วนร่วมมีคุณค่า ไม่ว่าจะเล็กน้อยแค่ไหน

📄 สัญญาอนุญาต

สัญญาอนุญาต MIT - ดู LICENSE สำหรับรายละเอียด

สร้างโดย Sixth

เพื่อประสบการณ์ที่ดีที่สุด ลอง Sixth สำหรับ VS Code
Overture มีในตัวโดยไม่ต้องกำหนดค่าใดๆ

_{หยุดการบินแบบมองไม่เห็น เห็นแผน อนุมัติมัน ดำเนินการด้วยความมั่นใจ}

ประวัติการให้ดาว