- Tái hiện nguyên vẹn tính năng tạo tư liệu trực quan tương tác do Claude ra mắt
- Là Generative UI tự động tạo biểu đồ, sơ đồ, hình trực quan hóa, v.v. thay vì chỉ trả về văn bản đơn thuần
- Trực quan hóa thuật toán: tìm kiếm nhị phân, BFS/DFS, sắp xếp, v.v.
- Hoạt ảnh 3D: cảnh tương tác dựa trên WebGL/CSS3D
- Biểu đồ và sơ đồ: biểu đồ tròn, biểu đồ cột, sơ đồ mạng, v.v.
- Widget và mô phỏng: biểu mẫu, đồ thị toán học, công cụ tương tác, v.v.
- Mọi thành phần trực quan đều được render bên trong sandbox iframe để đảm bảo tính bảo mật và độc lập
- Hỗ trợ theme sáng/tối tự động, animation tăng dần, điều chỉnh kích thước đáp ứng
- Tạo nội dung trực quan hội thoại theo thời gian thực dựa trên CopilotKit và LangGraph
- Được tổ chức theo kiến trúc monorepo dựa trên Turborepo
apps/app: frontend dựa trên Next.js 16, React 19, Tailwind 4apps/agent: agent Python sử dụng LangGraph và middleware CopilotKit
- Cách hoạt động
- Người dùng nhập prompt qua CopilotKit chat UI
- Agent quyết định dạng phản hồi phù hợp giữa văn bản, gọi công cụ hoặc component trực quan
- Hook
widgetRenderer ở frontend nhận HTML và render vào iframe
- Sau Skeleton loading, nội dung được fade-in mượt mà và tự động điều chỉnh chiều cao
- Cung cấp ma trận quyết định trực quan hóa
- Tự động chọn công nghệ phù hợp như SVG, HTML, Chart.js, Three.js, D3.js tùy theo loại yêu cầu
- Ví dụ: giải thích quy trình dùng Flowchart, so sánh dữ liệu dùng Bar chart, biểu diễn 3D dùng Three.js
- Giấy phép MIT
3 bình luận
Vậy là nó dùng cách render HTML được tạo ra bên trong
iframe.Claude mới ra mắt tính năng này chưa được bao lâu mà đã có bản triển khai mã nguồn mở ngay rồi.
Việc có cả Claude trong danh sách contributor cũng khá thú vị haha Claude giúp triển khai y hệt tính năng mà Claude đã phát hành..
Nghe nói nếu commit bằng Claude Code thì theo thiết lập mặc định sẽ tự động được gắn vào danh sách contributor.