Drawgent: Biến Excalidraw thành bảng vẽ thông minh với sự hỗ trợ của Claude Code và Codex

Rust 82.4%

JavaScript 12.5%

CSS 2.3%

Makefile 1.2%

Nix 0.6%

Dockerfile 0.6%

HTML 0.4%

Sao chép kho lưu trữ này

Sử dụng liên kết cố định

HTTPS

https://tangled.org/yanndegat.tngl.sh/drawgent https://tangled.org/did:plc:3zklierfkckthy6sodbm4af3

SSH

[email protected]:yanndegat.tngl.sh/drawgent [email protected]:did:plc:3zklierfkckthy6sodbm4af3

Đối với các nút (knots) tự lưu trữ, URL sao chép có thể khác nhau tùy thuộc vào thiết lập của bạn.

Tải xuống tar.gz Tải xuống.zip

README.md

drawgent: tác nhân lập trình của bạn trên canvas Excalidraw trực tiếp#

drawgent kết nối Claude Code, Codex hoặc opencode của riêng bạn (cài đặt, đăng nhập, cấu hình và repo của bạn) với bảng trắng Excalidraw. Hãy yêu cầu một sơ đồ trong bảng trò chuyện hoặc viết AGENT: … bên cạnh phần bản vẽ bạn muốn thay đổi. Tác nhân sẽ xem xét canvas (ảnh chụp màn hình + cảnh), chỉnh sửa trực tiếp, kiểm tra kết quả và đánh dấu ghi chú là DONE.

Bắt đầu nhanh#

Điều kiện tiên quyết: đã cài đặt và đăng nhập một trong các công cụ claude, codex hoặc opencode. Các cầu nối (bridges) Claude và Codex cũng cần Node.js ≥ 18 (npm).

drawgent setup claude        # once per agent: claude | codex | opencode
cd ~/my-repo
drawgent up                  # new agent session in this repo + canvas in your browser
drawgent up --attach         # or: pick one of your running sessions and connect the canvas to it

drawgent setup <agent>#

Kiểm tra mọi thứ một lần, báo lỗi kèm cách khắc phục chính xác nếu thiếu thứ gì đó và ghi vào ~/.config/drawgent/config.toml:

1. CLI của tác nhân. claude / codex / opencode của bạn phải nằm trên PATH.
2. Đăng nhập. claude auth status, codex login status hoặc opencode auth list.
3. Cầu nối ACP.
4. – opencode tự hỗ trợ ACP (opencode acp).
5. – Claude Code và Codex sử dụng các bộ điều hợp (adapters) ACP chính thức. Chúng được cài đặt một lần vào ~/.cache/drawgent/adapters (~60 MB), không bao gồm các tệp nhị phân tác nhân đi kèm, và được trỏ đến CLI của bạn (CLAUDE_CODE_EXECUTABLE, CODEX_PATH).
6. – Thiết lập sau đó sẽ xác minh quá trình bắt tay (handshake) ACP.
7. Các công cụ canvas cho các phiên đã đính kèm. Chỉ Codex cần thay đổi: codex mcp add drawgent -- drawgent mcp. Claude và opencode nhận các công cụ tại thời điểm đính kèm.
8. Headless Chrome cho trình kết xuất. Thiết lập sẽ sử dụng Chrome/Chromium của bạn nếu có. Nếu không, nó sẽ đề xuất: Không tương tác: --chrome download | system | /path/to/chrome.
9. – tải xuống Chrome Headless Shell (Chrome for Testing, ~120 MB, không cần sudo) vào ~/.cache/drawgent/chrome và thông báo chính xác cho bạn biết những thư viện hệ thống nào còn thiếu (nếu có);
10. – cài đặt Chromium bằng trình quản lý gói của bạn (apt, snap, dnf, pacman, zypper, apk, brew hoặc nix không cần sudo).

drawgent up sẽ từ chối khởi động cho đến khi thiết lập thành công cho tác nhân đó, hoặc nếu có thứ gì đó mà thiết lập đã ghi lại bị mất.

drawgent up#

Chạy trong thư mục hiện tại (không gian làm việc):

• khởi động trình chỉnh sửa + API trên 127.0.0.1:7300 (cổng trống tiếp theo nếu cổng này đã bị chiếm);
• khởi động một phiên mới của tác nhân của bạn qua ACP, hoạt động trong không gian làm việc;
• mở trình duyệt của bạn. Trên máy không có giao diện (headless), nó sẽ in lệnh ssh -L thay thế.

Cảnh được lưu trong.drawgent/scene.json, tệp này được git-ignore tự động.

drawgent up --attach [id]#

Kết nối canvas với một phiên bạn đang chạy. Nếu không có id, nó sẽ liệt kê các phiên tìm thấy (thư mục hiện tại trước) và cho phép bạn chọn một phiên:

Sử dụng canvas#

• Bảng trò chuyện (bên phải): gửi yêu cầu, xem các phản hồi và lệnh gọi công cụ truyền tải, phê duyệt các lời nhắc quyền, nhấn Stop để hủy lượt.
• Trên canvas: viết văn bản bắt đầu bằng AGENT: bên cạnh hoặc bên trong một hình dạng, hoặc vẽ một mũi tên từ ghi chú đến một hình dạng. Nó sẽ kích hoạt khoảng 2,5 giây sau khi bạn ngừng nhập, với vị trí, đối tượng nó trỏ tới và những gì ở gần đó. Tác nhân giải quyết nó thành một ghi chú DONE: … màu xanh lá cây. Chỉnh sửa lại thành AGENT: để gửi lại.
• Các lời nhắc được xếp hàng và chạy từng cái một. Một ghi chú đã xếp hàng mà đã được xử lý sẽ bị bỏ qua.

drawgent up --room 'https://excalidraw.com/#room=<id>,<key>'

• drawgent tham gia phòng với tư cách là cộng tác viên (🤖 Agent, với con trỏ theo sau các chỉnh sửa của nó). Con người có thể ở lại excalidraw.com: các ghi chú AGENT: của họ đến được tác nhân của bạn và các chỉnh sửa của nó xuất hiện trực tiếp ở đó.
• Lưu lượng truy cập được mã hóa đầu cuối bằng khóa phòng. Các phòng trống được tải từ và lưu vào bộ lưu trữ Firestore của excalidraw.
• Trình chỉnh sửa cục bộ phản chiếu phòng và vẫn có bảng trò chuyện.

Các lệnh khác#

• drawgent mcp: máy chủ MCP stdio với các công cụ canvas. Các tác nhân (agents) sẽ khởi chạy nó; nó tự động tìm kiếm drawgent đang chạy.
• drawgent serve: máy chủ cấp thấp với các tác nhân cụ thể (--agent claude,codex,opencode như đã thiết lập, hoặc name=command cho bất kỳ tác nhân ACP nào); dành cho các tập lệnh và container.
• Các tùy chọn cho up / serve: --port, --room, --token (API bearer +?token= trong URL), --permissions canvas|ask|all (mặc định là canvas: các công cụ vẽ được tự động phê duyệt, mọi thứ khác sẽ được hỏi trong bảng trò chuyện), --data, --settle-ms.

Bài gốc còn tiếp — xem tiếp tại bài gốc ↗