CopilotKit open-source hoá Claude Artifacts: AI tự tạo giao diện live trong chính app của bạn

TL;DR

CopilotKit vừa ship Open Generative UI - phiên bản open-source (MIT) của tính năng Claude Artifacts từng bị khoá trong sản phẩm nội bộ của Anthropic. Giờ đây bất kỳ developer nào cũng có thể nhúng khả năng này vào app của mình: agent tự sinh HTML/SVG tại runtime, stream token-by-token vào sandboxed iframe, và người dùng xem giao diện tự lắp ráp ngay trước mắt.

Open Generative UI - agent sinh HTML/SVG live vào sandboxed iframe

Tại sao đây là tin lớn

Claude Artifacts là một trong những tính năng viral nhất của Anthropic - khả năng agent tạo ra giao diện tương tác ngay trong chat. Vấn đề: nó chỉ tồn tại trong claude.ai. Nếu bạn muốn tích hợp điều tương tự vào app riêng, bạn không có cách nào làm được.

CopilotKit thay đổi điều đó. Open Generative UI là implementation open-source đầu tiên của concept này, hoạt động với bất kỳ app nào, không phụ thuộc Anthropic, và hoàn toàn miễn phí theo MIT license.

Cơ chế hoạt động

Kiến trúc cốt lõi:

Agent nhận prompt từ người dùng và sinh ra HTML/SVG thô - không phải chọn từ component có sẵn mà tạo mới hoàn toàn từ đầu.
CopilotKit stream output đó token-by-token qua hook useComponent vào frontend.
Frontend render trong sandboxed iframe hoàn toàn cô lập - không có quyền truy cập DOM cha, không rò rỉ data người dùng, kể cả khi agent sinh ra markup lỗi hay JavaScript bất ngờ.

Nhờ sandbox cô lập, hallucination của LLM trở nên an toàn hơn nhiều: code xấu ở trong iframe, không thoát ra ngoài được.

Ba kiểu Generative UI

Open Generative UI không phải one-size-fits-all. CopilotKit cung cấp 3 mô hình tuỳ mức độ kiểm soát bạn cần:

Kiểu	Cơ chế	Khi nào dùng
Static (AG-UI)	Developer định sẵn component, agent chọn và điền data	Cần brand consistency cao
Declarative (A2UI)	Agent trả về JSON mô tả UI, frontend render theo spec	Muốn kiểm soát cấu trúc
Open-Ended (MCP Apps)	Agent sinh toàn bộ HTML/SVG tự do vào iframe	Cần linh hoạt tối đa

OpenGenerativeUI repo tập trung vào mô hình Open-Ended với LangGraph agent - đây cũng là mô hình gần nhất với Claude Artifacts.

Static Generative UI - agent điền data vào component có sẵn

Skills layer - vũ khí bí mật

Mặc định output hoàn toàn unconstrained - agent tự quyết định tạo gì. Nhưng bạn có thể định hình bằng prompt-based skills: các đoạn hướng dẫn dạy agent theo format hoặc guideline cụ thể.

Ví dụ thực tế:

Skill prompt hướng agent tạo Chart.js dashboard với axis labels đúng chuẩn và responsive sizing.
Skill khác guide agent render mô hình 3D interactive với rotation controls dùng Three.js hoặc WebGL.
Skill cho algorithm visualization: binary search, bubble sort, BFS/DFS animation theo từng bước.

Chất lượng output trong các demo thực ra đến từ skills layer này - không phải khả năng tự nhiên của LLM không có hướng dẫn.

Hệ sinh thái và tương thích

Open Generative UI chạy trên AG-UI Protocol - open standard đã được Google, AWS, Microsoft, LangChain adopt. Điều này có nghĩa:

Agent frameworks: LangGraph, CrewAI, Mastra, Google ADK, AWS Strands - tất cả hoạt động out of the box.
MCP clients: Standalone MCP server cắm thẳng vào Claude Code, Cursor, hoặc bất kỳ MCP-compatible client nào qua npx generative-ui-mcp.
Frontend SDKs: React, Next.js, Angular, Vue - CopilotKit hỗ trợ đủ cả.

CopilotKit main repo: 30.800 GitHub stars, 4.000 forks, v1.57.0 (05/05/2026), millions of weekly installs. Enterprise clients: Deutsche Telekom, Docusign, Cisco, S&P Global.

Ai nên dùng ngay

Developer xây chatbot trong app: Thay vì trả về text thuần, agent sinh chart, bảng, map, animation ngay trong chat interface.
Enterprise cần AI workflow có human-in-the-loop: Form validation, confirmation step trước action quan trọng, progress indicator thay vì hiển thị "agent đang nghĩ".
Developer dùng Claude Code hoặc Cursor: MCP server cho phép generate UI ngay trong coding workflow.

Lưu ý: Open-Ended mode cần LLM mạnh để đạt chất lượng tốt - GPT-4.5, Claude Opus, hoặc Gemini 3.1 Pro là khuyến nghị của team.

Điều gì tiếp theo

Ngày 05/05/2026 CopilotKit công bố raise $27M Series A (Glilot Capital, NFX, SignalFire) - cùng ngày release v1.57.0 và Open Generative UI. Roadmap bao gồm: mở rộng team từ ~25 người, launch Enterprise Intelligence (self-hostable bundle), và tiếp tục phát triển AG-UI Protocol ecosystem.

Bạn có thể bắt đầu ngay: