🧩 Plugin & Tiện ích mở rộng•Mã nguồn mở•
Overture
MCP server render execution plan thành interactive flowchart, giúp visualize agent workflow steps trong browser.
#overture
Danh mục
🧩 Plugin & Tiện ích mở rộng
Giá
Mã nguồn mở
GitHub Stars
⭐ 641
Ngôn ngữ
TypeScript
License
MIT
Ngày thêm
2026-03-28
Tóm tắt từ README GitHub
See the plan before the code. Approve it. Then watch it execute.
Problem •
Solution •
Install •
Features •
Marketplace •
Config •
Discussions
https://github.com/user-attachments/assets/eeb9c4cb-c80d-42da-bf63-c0c4ecb1e5d6
---
🔥 The Problem
Every AI coding agent today — Cursor , Claude Code , Cline , Copilot — works the same way:
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
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?
---
✨ The Solution
Overture intercepts your AI agent's planning phase and renders it as an interactive visual flowchart — before any code is written.
The agent doesn't write a single line of code until you approve the plan.
Visual Plans
Inter
Xem thêm từ README.mdThu gọn README.md
Đánh giá chi tiết
Tổng quan
Overture là MCP server render execution plan thành interactive flowchart trên browser. Khi AI agent tạo plan (danh sách steps, dependencies), Overture biến nó thành diagram có thể zoom, click, và theo dõi progress. Dành cho developer muốn visualize workflow của coding agent. Repo có 601 stars, viết bằng TypeScript.
Tính năng chính
- Render execution plan thành interactive flowchart
- Real-time progress tracking: highlight step đang chạy
- Dependency visualization: mũi tên giữa các step phụ thuộc nhau
- Zoom/pan: navigate plan phức tạp
- MCP integration: Claude Code và MCP clients gửi plan trực tiếp
- Export: save diagram dạng SVG hoặc PNG
Stack kỹ thuật
- TypeScript, MCP SDK
- React + D3.js cho visualization
- WebSocket cho real-time updates
Điểm mạnh
- Trực quan hóa agent plan, dễ review trước khi chạy
- Real-time tracking giúp biết agent đang ở bước nào
- MCP native, tích hợp Claude Code dễ dàng
- Export diagram hữu ích cho documentation
Hạn chế
- 601 stars, rất niche
- Chỉ visualize, không edit plan từ UI
- Cần browser mở để xem, không có terminal-based option
- Phụ thuộc vào agent output plan đúng format
Phù hợp khi nào
Khi dùng Claude Code hoặc MCP-based agent và muốn visualize execution plan trước khi chạy, đặc biệt cho plan phức tạp nhiều step.