Tôi đã xây dựng giao diện Web UI trực quan cho Claude Code để thay thế dòng lệnh

Gần đây, tôi đã sử dụng Anthropic's Claude Code CLI cho hầu hết các công việc lập trình của mình. Tôi biết, terminal rất ngầu và tất cả, nhưng tôi cần một cách tốt hơn để quản lý trạng thái của các tác nhân (agent) và thực sự nhìn thấy những gì đang xảy ra khi quét các kho chứa (repos) khổng lồ.

Việc quản lý các tệp markdown phân tán trong thư mục .claude và chỉnh sửa cấu hình thủ công để bật/tắt các hành vi cụ thể đã trở thành một điểm khó khăn lớn. Bạn có thể xem mã nguồn của tôi tại đây, nó hoàn toàn mã nguồn mở: https://github.com/Ngxba/claude-code-agents-ui

Tôi đã xây dựng công cụ này (sử dụng Nuxt 3 và VueFlow) để đóng vai trò là một bảng điều khiển trực quan. Mục tiêu chính của tôi là chuyển từ việc thực thi terminal "mù mờ" sang một hệ thống mà tôi có thể thực sự nhìn thấy và quản lý các khả năng của tác nhân.

Dưới đây là các tính năng chính tôi tập trung phát triển:

Bảng điều khiển đầy đủ tính năng của ClaudeCode Bao gồm quyền truy cập dễ dàng vào lịch sử kiểm soát.

Quản lý Động Agents, Skills, Commands, v.v. Bạn có thể nhập các kỹ năng (skills) trực tiếp từ GitHub hoặc các kho chứa cục bộ. Quan trọng hơn, bạn có thể bật/tắt chúng vì công cụ sử dụng liên kết mềm (symlink) thay vì các tệp vật lý thực tế.

Quản lý Quét & Nhập Repo Tôi đã thêm một quy trình làm việc chuyên biệt để quét cơ sở mã và quản lý các mục nhập. Nó giúp định hình ngữ cảnh của tác nhân và ngăn chặn việc phá vỡ quá trình build (build breaking) do các đường dẫn không hợp lệ.

Trực quan hóa Mối quan hệ Sử dụng VueFlow để trực quan hóa cách các tác nhân, lệnh và kỹ năng kết nối với nhau. Việc gỡ lỗi cho một hệ thống đa tác nhân trở nên dễ dàng hơn nhiều khi bạn có thể nhìn thấy cây phụ thuộc một cách trực quan.

Theo dõi Token & Chi phí Trực tiếp Tôi vừa thêm tính năng này gần đây để theo dõi việc sử dụng trong các phiên tái cấu trúc (refactoring) kéo dài.

Dự án chắc chắn vẫn đang ở giai đoạn "tiếp cận sớm", nhưng nó đã thay đổi hoàn toàn cách tôi điều phối các quy trình làm việc phát triển AI của riêng mình. Tôi rất tò mò muốn biết người khác đang xử lý sự phình to của kỹ năng tác nhân (agent skill bloat) như thế nào!