CopilotKit: SDK Terbaik untuk Membangun AI Agent Penuh Tumpuan, UI Generatif dan Aplikasi Chat

Gambaran Latar Belakang

CopilotKit adalah rangka kerja sumber terbuka yang direka khusus untuk membina AI Copilot dan aplikasi asli agen, dengan lebih daripada 28.9k bintang di GitHub dan digunakan oleh lebih daripada 100,000 pembangun. Nilai teras rangka kerja ini terletak pada pengintegrasian mendalam antara agen AI dan antaramuka pengguna, membolehkan agen mengawal UI secara masa nyata, menyampaikan maklumat konteks, dan merender komponen antaramuka secara dinamik melalui UI generatif.

Penemuan Teras

1. Reka Bentuk Arsitektur dan Fungsi Teras

CopilotKit menggunakan reka bentuk arsitektur tiga lapisan, termasuk lapisan komponen frontend, lapisan runtime CopilotRuntime, dan lapisan sambungan agen.

Lapisan komponen frontend menyediakan spektrum lengkap dari UI tanpa kepala (Headless) hingga komponen yang boleh disesuaikan yang telah dibina, membolehkan pembangun memilih dengan fleksibel mengikut keperluan. CopilotRuntime berfungsi sebagai enjin penyelarasan backend, bertanggungjawab untuk memproses permintaan dari klien frontend, menguruskan panggilan LLM dan interaksi agen. Lapisan sambungan agen menghubungkan mana-mana rangka kerja agen melalui protokol AG-UI, termasuk LangGraph, CrewAI, LlamaIndex, dan lain-lain.

Ciri teras CopilotKit termasuk UI generatif (Generative UI), yang membolehkan agen merender komponen UI secara dinamik semasa runtime; keadaan bersama (Shared State), yang membolehkan penyelarasan dua hala antara frontend dan agen; serta Human-in-the-Loop (kolaborasi manusia-mesin), yang menyokong agen untuk meminta input atau kelulusan manusia semasa pelaksanaan. Ciri-ciri ini menjadikan pembinaan aplikasi AI yang benar-benar interaktif mungkin, bukan sekadar sistem soal jawab yang mudah.

Ilustrasi Aliran Kerja:

2. Protokol AG-UI: Asas Ekosistem

AG-UI (Protokol Interaksi Agen-Pengguna) adalah standard protokol terbuka, ringan, dan berasaskan acara yang dilancarkan oleh pasukan CopilotKit, bertujuan untuk menstandardkan cara komunikasi antara agen AI dan pengguna yang berorientasikan aplikasi. Protokol ini telah diterima secara meluas oleh pengeluar dan rangka kerja utama seperti Google, Microsoft, AWS, LangChain, Mastra, Pydantic AI, dan lain-lain, membentuk ekosistem yang semakin berkembang.

Protokol AG-UI menyelesaikan satu masalah penting: model komunikasi tradisional antara frontend dan backend (permintaan-respons) tidak dapat memenuhi keperluan kompleks aplikasi agen. Agen memerlukan pemindahan status secara masa nyata, pengendalian gangguan dan proses kelulusan, penyelarasan status UI dan agen, semua ini memerlukan mekanisme komunikasi yang lebih fleksibel. AG-UI mencapai fungsi ini melalui aliran acara (Event Streaming), menyokong aliran teks masa nyata, panggilan alat, penyelarasan status, dan acara tersuai.

Ketika ini, bidang protokol agen menunjukkan tiga tiang yang berdiri teguh: AG-UI memberi tumpuan kepada lapisan interaksi agen dan pengguna, MCP (Protokol Konteks Model) bertanggungjawab untuk sambungan antara agen dan alat serta data, manakala A2A (Agen-ke-Agen) mengendalikan komunikasi penyelarasan antara agen. Perlu diperhatikan bahawa AG-UI telah melaksanakan integrasi handshake dengan protokol A2A dan menyokong sepenuhnya spesifikasi A2UI Google untuk rendering UI generatif.

3. Integrasi dengan Rangka Kerja UtamaIntegrasi CopilotKit dengan LangGraph adalah salah satu kasus penggunaan yang paling matang. Melalui konfigurasi yang sederhana, pengembang dapat menghubungkan agen LangGraph ke frontend CopilotKit, mewujudkan berbagi status dan respons streaming waktu nyata. Proses integrasi biasanya melibatkan penggunaan hook useCoAgent untuk menghubungkan agen, menggunakan fungsi copilotkitemitstate untuk memancarkan pembaruan status dari sisi agen, serta menggunakan useCopilotAction untuk mendefinisikan titik interupsi kolaborasi manusia-mesin.

Bagi pengembang CrewAI, CopilotKit juga menyediakan solusi integrasi yang siap digunakan. Melalui protokol AG-UI, pengembang dapat mengekspos agen CrewAI mana pun sebagai aplikasi frontend yang mendukung interaksi waktu nyata. Selain LangGraph dan CrewAI, protokol AG-UI juga mendukung Microsoft Agent Framework, Google ADK, AWS Strands Agents, Mastra, Pydantic AI, Agno, LlamaIndex, dan banyak kerangka kerja lainnya, membentuk interoperabilitas multi-kerangka yang nyata.

4. Analisis Perbandingan dengan Kerangka Sejenis

Dibandingkan dengan Vercel AI SDK, posisi CopilotKit memiliki perbedaan yang signifikan. Vercel AI SDK terutama fokus pada penyederhanaan transmisi teks streaming antarmuka obrolan, menyediakan hook useChat dan komponen UI yang sangat baik; sementara CopilotKit lebih menekankan pada integrasi agen yang mendalam, UI generatif, dan kemampuan kolaborasi manusia-mesin.

Hubungannya dengan LangChain lebih mirip dengan saling melengkapi daripada bersaing. LangChain fokus pada membangun "otak" agen (logika dan alur kerja), sementara CopilotKit menyediakan "wajah, suara, dan tangan" otak tersebut—yaitu antarmuka yang berinteraksi dengan aplikasi. Pengembang biasanya menggunakan LangChain/LangGraph untuk mendefinisikan logika agen, kemudian membangun lapisan interaksi pengguna melalui CopilotKit.

5. Skenario Aplikasi Tipikal

Kasus penggunaan tipikal CopilotKit mencakup berbagai bidang. SaaS Copilot adalah skenario aplikasi yang paling umum, asisten cerdas dapat membimbing pengguna melalui alur kerja yang kompleks, memberikan bantuan yang peka konteks. Co-creation Copilot menekankan kolaborasi manusia-mesin, AI dan pengguna bersama-sama menciptakan konten, secara signifikan meningkatkan produktivitas. Pengisian Formulir Percakapan mengubah formulir yang rumit menjadi interaksi percakapan alami, pengguna dapat menyelesaikan input data yang kompleks melalui obrolan. Aplikasi Agen Penelitian seperti aplikasi kanvas penelitian yang ditunjukkan secara resmi, menunjukkan bagaimana mengintegrasikan agen LangGraph dengan frontend secara mendalam, mewujudkan proses lengkap pembuatan garis besar penelitian, penulisan bab, dan persetujuan manusia.

Panduan Cepat: Contoh Kode

Contoh Integrasi Dasar

Berikut adalah contoh minimal yang dapat dijalankan menggunakan CopilotKit dengan LangGraph:

Frontend (Next.js/React):

// app/page.tsx "use client"; import { CopilotKit } from "@copilotkit/react-core"; import { CopilotPopup } from "@copilotkit/react-ui"; import "@copilotkit/react-ui/styles.css";

export default function Home() { return (

Penolong Penelitian

); }API rute waktu berjalan:

// app/api/copilotkit/route.ts import { CopilotRuntime, OpenAIAdapter } from "@copilotkit/runtime"; import { NextRequest } from "next/server";const copilotKit = new CopilotRuntime({ remoteEndpoints: [ { url: process.env.LANGGRAPHURL || "http://localhost:8000" }, ], });

const serviceAdapter = new OpenAIAdapter();

export const POST = async (req: NextRequest) => { const { handleRequest } = copilotKit; return handleRequest(req, { serviceAdapter }); };

Contoh Status Berkongsi

// Menggunakan useCoAgent untuk menyelaraskan status antara frontend dan backend import { useCoAgent } from "@copilotkit/react-core";

function ResearchCanvas() { const { state, setState } = useCoAgent({ name: "researchagent", initialState: { topic: "", outline: [], currentSection: null, }, });

return (

setState({ ...state, topic: e.target.value })} placeholder="Masukkan topik penyelidikan" />

); }

Contoh Kerjasama Manusia dalam Proses (Human-in-the-Loop)

import { useCopilotAction } from "@copilotkit/react-core";

function DocumentEditor() { useCopilotAction({ name: "publishDocument", description: "Pengesahan pengguna diperlukan sebelum menerbitkan dokumen", parameters: [ { name: "title", type: "string", description: "Tajuk dokumen" }, { name: "content", type: "string", description: "Kandungan dokumen" }, ], handler: async ({ title, content }) => { const confirmed = await new Promise((resolve) => { showConfirmDialog({ title, content, onConfirm: resolve }); });

if (confirmed) { await api.publish({ title, content }); return "Dokumen telah berjaya diterbitkan"; } return "Penerbitan dibatalkan"; }, });

return ...; }`

Kes Penggunaan Tipikal

Kes 1: Pembantu Pintar SaaS

Situasi: Alat pengurusan projek peringkat perusahaan yang mengintegrasikan pembantu AI untuk membantu pengguna mencipta tugas dengan cepat, mengagihkan sumber, dan menjana laporan.

Poin Pelaksanaan:

• Menggunakan fungsi status berkongsi CopilotKit untuk membolehkan AI memahami pandangan projek semasa secara real-time
• Menghasilkan kad tugas, carta Gantt dan komponen lain secara dinamik melalui UI generatif
• Nod kerjasama manusia memastikan operasi penting (seperti memadam projek) memerlukan pengesahan penggunaPengguna dapat menyelesaikan operasi kompleks melalui bahasa semula jadi, seperti "Tolong bantu saya mengagihkan tugas yang tamat minggu depan kepada pasukan depan dan menghasilkan laporan kemajuan".
  
  ### Kes 2: Pembantu Penyelidikan AI
  
  Situasi: Alat bantuan penyelidikan akademik, membantu penyelidik mengumpul maklumat, menyusun struktur kertas kerja, dan menulis secara kolaboratif.
  
  Poin pelaksanaan:
  
  - Ejen LangGraph bertanggungjawab untuk pengambilan maklumat dan penalaran logik
  - CopilotKit memaparkan garis besar penyelidikan dan senarai literatur
  - Penyelarasan status memastikan kemajuan penyelidikan disimpan dan dipaparkan secara langsung
  - Nod kelulusan memberi amaran kepada pengguna untuk mengesahkan apabila merujuk kepada maklumat luar
  
  ### Kes 3: Pengisian Borang Pintar
  
  Situasi: Menukar borang permohonan insurans yang kompleks menjadi interaksi berbual.
  
  Poin pelaksanaan:
  
  - Ejen menentukan soalan seterusnya secara dinamik berdasarkan jawapan pengguna
  - Menggunakan rendering bersyarat untuk memaparkan komponen UI yang berbeza berdasarkan konteks
  - Menyimpan secara automatik borang yang separuh lengkap, menyokong pengisian semula pada titik putus
  - Mengumpul semua maklumat untuk pengesahan pengguna sebelum menghantar
  
  ## Ilham Teknikal
  
  Pelaksanaan teknikal CopilotKit berdasarkan tumpukan Web moden. Frontend menggunakan React (juga menyokong Angular) sebagai rangka kerja UI utama, menyediakan hook seperti useAgent dan useCoAgent untuk pengurusan status dan interaksi ejen. Backend menjalankan kelas CopilotRuntime sebagai pengaturcara pusat, mengendalikan pengesahan permintaan, panggilan LLM dan aliran respons. Protokol komunikasi menggunakan Server-Sent Events (SSE) untuk melaksanakan penghantaran aliran masa nyata dari pelayan ke klien, sambil memproses permintaan klien melalui HTTP POST.
  
  Versi v1.50 membawa peningkatan seni bina yang ketara, memperkenalkan seni bina titik akhir tunggal yang lebih jelas, kebolehan pengamatan yang lebih baik (telemetri terbina dalam) dan integrasi mendalam dengan CopilotKit Next, seterusnya menyederhanakan pengalaman pembangunan.
  
  ## Prospek Masa DepanStrategi penempatan CopilotKit adalah untuk menjadi lapisan infrastruktur bagi pembangunan aplikasi pengantara. Dengan protokol AG-UI yang diterima oleh lebih banyak vendor (Microsoft, Google, AWS, dan lain-lain telah menyokong), ekosistem aplikasi pengantara yang berasaskan standard terbuka sedang terbentuk. CopilotKit dengan menyediakan komponen pra-bina, pola UI generatif dan integrasi rangka kerja yang mendalam, secara signifikan mengurangkan halangan untuk membina AI Copilot tahap pengeluaran, membolehkan pembangun memberi tumpuan kepada logik perniagaan dan bukannya butiran komunikasi asas.