CopilotKit Rilis Open Generative UI Sumber Terbuka: Implementasi Kerangka Lintas-Agen Claude Artifacts

7 Mei, CopilotKit 5—framework front-end open source untuk AI Agent—mengumumkan peluncuran Open Generative UI, sebuah implementasi open source dari fitur Anthropic Claude Artifacts. akshay_pachaar merangkum dan menjelaskan detail: versi CopilotKit membuat Agent dapat secara dinamis menghasilkan HTML/SVG saat dijalankan, menampilkannya secara streaming token-by-token di sandboxed iframe. Dengan begitu, pengguna bisa melihat proses perakitan antarmuka secara real-time, tanpa harus menunggu balasan yang lengkap. Sebelum Anthropic Claude Artifacts, kemampuan generative UI hanya ada di produk milik Anthropic sendiri; dengan CopilotKit, pola yang sama dibuka untuk umum sehingga bisa diintegrasikan ke aplikasi apa pun.

Mekanisme inti: Agent menghasilkan HTML/SVG secara instan, lalu melakukan streaming ke sandboxed iframe

Desain teknis Open Generative UI:

Agent tidak memilih dari komponen yang sudah jadi, melainkan setiap kali menghasilkan konten visual apa pun dari nol

Output dipantulkan sebagai HTML/SVG melalui streaming token-by-token ke iframe yang disandbox

iframe benar-benar terisolasi, tidak bisa mengakses app induk, DOM, atau data pengguna

Meski Agent menghasilkan tag yang rusak atau JavaScript yang tidak diharapkan, itu tidak akan bocor ke luar iframe

Pengembang dapat mengarahkan Agent agar menghasilkan format visual tertentu melalui “skill prompts” (misalnya dashboard Chart.js dengan label sumbu koordinat, atau model 3D dengan kontrol rotasi)

Desain sandbox merupakan praktik standar untuk menangani risiko “Agent yang menghasilkan kode secara bebas”—membolehkan Agent menghasilkan dengan leluasa namun membatasi ruang eksekusinya, sehingga tidak merusak batas keamanan aplikasi utama.

Cakupan kompatibilitas: LangGraph／CrewAI／Mastra／Google ADK／AWS Strands

Open Generative UI dibangun di atas protokol AG-UI, dan siap digunakan untuk kompatibel dengan banyak framework Agent:

LangGraph

CrewAI

Mastra

Google ADK

AWS Strands

Sekaligus menyediakan server MCP (Model Context Protocol) yang berdiri sendiri, yang bisa disisipkan untuk digunakan dengan Claude Code, Cursor, atau klien apa pun yang kompatibel dengan MCP. Paket lengkap ini dibangun di atas framework front-end open source CopilotKit; di GitHub, CopilotKit telah mengumpulkan lebih dari 30.000 bintang, serta menyediakan SDK untuk React, Next.js, Angular, dan Vue.

Makna bagi pengembang AI Agent: standar GenUI lintas framework, lintas model

Rilis kali ini penting untuk lapisan aplikasi AI Agent:

Dulu, pengembang harus mengimplementasikan sendiri “dynamic UI gaya Claude Artifacts” di app mereka

Open Generative UI menyediakan opsi open source yang lintas framework dan lintas model

Melalui server MCP, Claude Code, dan Cursor, pengguna bisa langsung melakukan integrasi

Peristiwa spesifik yang bisa dipantau selanjutnya: tingkat adopsi CopilotKit Open Generative UI di komunitas LangChain/CrewAI, respons resmi Anthropic terhadap “Claude Artifacts yang diimplementasikan secara open source”, serta apakah framework Agent lain turut menyediakan kemampuan GenUI serupa.

Artikel CopilotKit membuka Open Generative UI: implementasi Claude Artifacts lintas framework Agent pertama kali muncul di 链新闻 ABMedia.