CopilotKit：全栈AI Agent、Generative UI နှင့် စကားပြောအက်ပလီကေးရှင်းများကို တည်ဆောက်ရန် အထူးသင့်လျော်သော SDK
CopilotKit：全栈AI Agent、Generative UI နှင့် စကားပြောအက်ပလီကေးရှင်းများကို တည်ဆောက်ရန် အထူးသင့်လျော်သော SDK
背景概述
CopilotKit သည် AI Copilot နှင့် Agent-native အက်ပလီကေးရှင်းများကို တည်ဆောက်ရန် အထူးဒီဇိုင်းလုပ်ထားသော အခမဲ့အရင်းအမြစ် framework ဖြစ်ပြီး GitHub တွင် အစီအစဉ် 28.9k ကျော် ရှိပြီး 10,000 ကျော်သော developer များမှ အသုံးပြုထားသည်။ 该框架的核心价值在于将 AI 代理与用户界面深度集成，使代理能够实时控制 UI、传递上下文信息，并通过生成式 UI 动态渲染界面组件。
核心发现
1. 架构设计与核心功能
CopilotKit သည် သုံးထပ်အဆောက်အဦးဒီဇိုင်းကို အသုံးပြုထားပြီး၊ အရှေ့ဘက်ကွန်ပိုးနင့်အဆောက်အအုံ၊ CopilotRuntime လည်ပတ်မှုအဆောက်အအုံနှင့် အေးဂျင့်ချိတ်ဆက်မှုအဆောက်အအုံတို့ပါဝင်သည်။
前端组件层提供从完全无头（Headless）UI 到预构建可定制组件的完整光谱，开发者可以根据需求灵活选择。CopilotRuntime 作为后端编排引擎，负责处理来自前端客户端的请求，管理 LLM 调用和代理交互。代理连接层则通过 AG-UI 协议连接任何代理框架，包括 LangGraph、CrewAI、LlamaIndex 等。
CopilotKit 的核心特性包括生成式 UI（Generative UI），允许代理在运行时动态渲染 UI 组件；共享状态（Shared State），实现前端与代理之间的双向状态同步；以及 Human-in-the-Loop（人机协作），支持代理在执行过程中请求人类输入或审批。这些特性使构建真正具有交互性的 AI 应用成为可能，而非仅仅是简单的问答系统。
工作流程示意：
2. AG-UI 协议：生态系统的基石
AG-UI（Agent-User Interaction Protocol）是 CopilotKit 团队推出的开放、轻量级、事件驱动的协议标准，旨在标准化 AI 代理与用户面向应用之间的通信方式。该协议已被 Google、Microsoft、AWS、LangChain、Mastra、Pydantic AI 等主流厂商和框架广泛采用，形成了日益壮大的生态系统。
AG-UI 协议解决了一个关键问题：传统的前后端通信模式（请求-响应）无法满足代理应用的复杂需求。代理需要实时流式传输状态更新、处理中断和审批流程、同步 UI 与代理状态，这些都需要更灵活的通信机制。AG-UI 通过事件流（Event Streaming）实现了这些功能，支持实时文本流、工具调用、状态同步和自定义事件。
当前代理协议领域呈现三大支柱并立的格局：AG-UI 专注于代理与用户交互层，MCP（Model Context Protocol）负责代理与工具和数据的连接，而 A2A（Agent-to-Agent）则处理代理之间的协调通信。值得注意的是，AG-UI 已实现与 A2A 协议的握手集成，并全面支持 Google 的 A2UI 规范用于生成式 UI 渲染。
3. 与主流框架的集成CopilotKit နှင့် LangGraph ၏ ပေါင်းစပ်မှုသည် အထူးသဖြင့် အသုံးပြုမှုများအတွက် အထင်ကရ ဖြစ်သည်။ ရိုးရှင်းသော ကွန်ဖီဂျူရေးရှင်းဖြင့် ဖွံ့ဖြိုးသူများသည် LangGraph ကို CopilotKit အရှေ့ပိုင်းနှင့် ချိတ်ဆက်နိုင်ပြီး အခြေအနေမျှဝေခြင်းနှင့် အချိန်မှန်စီးဆင်းမှုကို ရရှိနိုင်သည်။ ပေါင်းစပ်မှုလုပ်ငန်းစဉ်တွင် အများအားဖြင့် useCoAgent hook ကို အသုံးပြု၍ အထောက်အကူပြုသူကို ချိတ်ဆက်ခြင်း၊ copilotkitemitstate ဖန်ရှင်မှ အထောက်အကူပြုသူဘက်မှ အခြေအနေအပ်ဒိတ်များကို ထုတ်လွှင့်ခြင်းနှင့် useCopilotAction ကို အသုံးပြု၍ လူနှင့်စက်တို့၏ ပူးပေါင်းဆောင်ရွက်မှု အကြောင်းအရာများကို သတ်မှတ်ခြင်းတို့ ပါဝင်သည်။
CrewAI ဖွံ့ဖြိုးသူများအတွက် CopilotKit သည် အထူးသဖြင့် အသုံးပြုရန် အဆင်ပြေသော ပေါင်းစပ်မှု ဖြေရှင်းချက်များကို ပံ့ပိုးပေးသည်။ AG-UI သဘောတူညီချက်မှတဆင့် ဖွံ့ဖြိုးသူများသည် CrewAI အထောက်အကူပြုသူကို အချိန်မှန် ဆက်သွယ်မှုကို ထောက်ပံ့သော အရှေ့ပိုင်း အက်ပလီကေးရှင်းအဖြစ် ဖျော်ဖြေရန် အခွင့်အရေးရှိသည်။ LangGraph နှင့် CrewAI အပြင် AG-UI သဘောတူညီချက်သည် Microsoft Agent Framework၊ Google ADK၊ AWS Strands Agents၊ Mastra၊ Pydantic AI၊ Agno၊ LlamaIndex စသည်တို့ကိုလည်း ထောက်ပံ့ပြီး အမှန်တကယ် အမျိုးမျိုးသော ဖရိမ်းဝက်များအကြား အပြန်အလှန် လုပ်ဆောင်နိုင်မှုကို ဖန်တီးသည်။
4. အမျိုးမျိုးသော ဖရိမ်းဝက်များနှင့် နှိုင်းယှဉ်မှု
Vercel AI SDK နှင့် နှိုင်းယှဉ်ပါက CopilotKit ၏ အနေအထားသည် အထူးသဖြင့် ကွာခြားမှုများရှိသည်။ Vercel AI SDK သည် စကားပြော interface ၏ စီးဆင်းမှုကို ရိုးရှင်းစေရန် အဓိပ္ပါယ်ထားပြီး useChat hook နှင့် UI အစိတ်အပိုင်းများကို ထောက်ပံ့သည်။ CopilotKit သည် အထူးသဖြင့် နက်ရှိုင်းသော အထောက်အကူပြုသူ ပေါင်းစပ်မှု၊ ဖန်တီးမှု UI နှင့် လူနှင့်စက်တို့၏ ပူးပေါင်းဆောင်ရွက်မှု အစွမ်းကို အထူးသဖြင့် အရေးကြီးသည်။
LangChain နှင့် CopilotKit ၏ ဆက်နွယ်မှုသည် ယှဉ်ပြိုင်မှုမဟုတ်ဘဲ အပြန်အလှန် အထောက်အကူပြုမှုအဖြစ် သက်ဆိုင်သည်။ LangChain သည် အထောက်အကူပြုသူ၏ "ဦးနှောက်" (သဘောတရားနှင့် အလုပ်လုပ်ပုံ) ကို တည်ဆောက်ရန် အာရုံစိုက်သည်။ CopilotKit သည် ဦးနှောက်၏ "မျက်နှာ၊ အသံနှင့် လက်" ကို ပံ့ပိုးသည်။ ဖွံ့ဖြိုးသူများသည် အများအားဖြင့် LangChain/LangGraph ကို အသုံးပြု၍ အထောက်အကူပြုသူ၏ သဘောတရားကို သတ်မှတ်ပြီး CopilotKit ဖြင့် အသုံးပြုသူ၏ အပြန်အလှန်အဆင့်ကို တည်ဆောက်သည်။
5. သာမန် အသုံးပြုမှု အခြေအနေများ
CopilotKit ၏ သာမန် အသုံးပြုမှုများသည် အမျိုးမျိုးသော နယ်ပယ်များကို ဖုံးလွှမ်းသည်။ SaaS Copilot သည် ၎င်း၏ အထင်ကရ အသုံးပြုမှုဖြစ်ပြီး၊ ဂုဏ်ယူသော အကူအညီသည် အသုံးပြုသူကို ရှုပ်ထွေးသော အလုပ်လုပ်ပုံများကို ပြီးမြောက်စေရန် လမ်းညွှန်နိုင်သည်။ ပူးပေါင်းဖန်တီးမှု Copilot သည် လူနှင့်စက်တို့၏ ပူးပေါင်းဆောင်ရွက်မှုကို အထူးသဖြင့် အရေးကြီးသည်။ AI နှင့် အသုံးပြုသူသည် အကြောင်းအရာကို ပူးပေါင်းဖန်တီးပြီး ထုတ်လုပ်မှုကို အထူးသဖြင့် တိုးတက်စေသည်။ စကားပြောပုံစံ ဖြည့်စွက်ခြင်း သည် ရှုပ်ထွေးသော ပုံစံများကို သဘာဝစကားပြော အပြန်အလှန်အဖြစ် ပြောင်းလဲပြီး အသုံးပြုသူသည် စကားပြောမှတဆင့် ရှုပ်ထွေးသော ဒေတာထည့်သွင်းမှုကို ပြီးမြောက်နိုင်သည်။ သုတေသန အထောက်အကူပြုမှု သည် တရားဝင် ပြသမှုအဖြစ် သုတေသန ကန်ဗပ် အက်ပလီကေးရှင်းကို ပြသပြီး LangGraph အထောက်အကူပြုသူနှင့် အရှေ့ပိုင်းကို နက်ရှိုင်းစွာ ပေါင်းစပ်ခြင်းဖြင့် သုတေသန အကြောင်းအရာများကို ဖန်တီးခြင်း၊ အခန်းရေးသားခြင်းနှင့် လူသား အတည်ပြုမှုတို့ကို ပြီးမြောက်စေသည်။
အမြန်စတင်ခြင်း: ကုဒ် ဥပမာ
အခြေခံ ပေါင်းစပ်မှု ဥပမာ
အောက်တွင် CopilotKit နှင့် LangGraph ပေါင်းစပ်မှုကို အသုံးပြုသော အနည်းဆုံး လည်ပတ်နိုင်သော ဥပမာတစ်ခုရှိသည်။
အရှေ့ပိုင်း (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 (
သုတေသန အကူအညီ
); } လည်ပတ်ချိန် API လမ်းကြောင်း:
// 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 }); };
共同状态ဥပမာ
// useCoAgent ကို အသုံးပြု၍ အရှေ့နောက်အခြေအနေများကို အထောက်အကူပြုပါ 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="သုတေသနအကြောင်းအရာကို ရိုက်ထည့်ပါ" />
); }
လူ-စက်ပူးပေါင်းဆောင်ရွက်မှု (Human-in-the-Loop) ဥပမာ
import { useCopilotAction } from "@copilotkit/react-core";
function DocumentEditor() { useCopilotAction({ name: "publishDocument", description: "စာရွက်စာတမ်းကို ထုတ်ဝေမည်ဆိုရင် အသုံးပြုသူ၏ အတည်ပြုချက် လိုအပ်သည်", parameters: [ { name: "title", type: "string", description: "စာရွက်စာတမ်းခေါင်းစဉ်" }, { name: "content", type: "string", description: "စာရွက်စာတမ်းအကြောင်းအရာ" }, ], handler: async ({ title, content }) => { const confirmed = await new Promise((resolve) => { showConfirmDialog({ title, content, onConfirm: resolve }); });
if (confirmed) { await api.publish({ title, content }); return "စာရွက်စာတမ်းကို အောင်မြင်စွာ ထုတ်ဝေခဲ့သည်"; } return "ထုတ်ဝေမှုကို ရပ်ဆိုင်းခဲ့သည်"; }, });
return ...; }`
သရုပ်ပြအသုံးပြုမှုကိစ္စများ
ကိစ္စ 1: SaaS ဂုဏ်ယူသော အကူအညီ
အခြေအနေ: လုပ်ငန်းအဆင့် စီမံခန့်ခွဲမှုကိရိယာတစ်ခု၊ အသုံးပြုသူများကို အလုပ်များကို အမြန်ဖန်တီးရန်၊ အရင်းအမြစ်များကို ခွဲဝေရန်၊ အစီရင်ခံစာများကို ဖန်တီးရန် AI အကူအညီဖြင့် ပေါင်းစပ်ထားသည်။
အကောင်အထည်ဖော်ရန် အချက်များ:
- CopilotKit ၏ အတူတူအခြေအနေ လုပ်ဆောင်ချက်ကို အသုံးပြု၍ AI သည် လက်ရှိပရောဂျက်မြင်ကွင်းကို အချိန်နှင့်တပြေးညီ သိရှိနိုင်သည်
- ဖန်တီးမှု UI ဖြင့် အလုပ်ကတ်များ၊ Gantt ဇယားများ စသည်တို့ကို ဒိုင်နမစ်အရ ရှုထောင့်ထုတ်လုပ်ပါ
- လူ-စက်ပူးပေါင်းဆောင်ရွက်မှု အဆင့်များသည် အရေးကြီးသော လုပ်ဆောင်ချက်များ (ဥပမာ၊ ပရောဂျက်ကို ဖျက်ရန်) သုံးစွဲသူ၏ အတည်ပြုချက်ကို လိုအပ်သည်
ဥပမာ ၂: AI သုတေသန အကူအညီ
အခြေအနေ： သုတေသနလုပ်ငန်းများကို အကူအညီပေးရန် ကိရိယာ၊ သုတေသနလုပ်ငန်းများကို အချက်အလက်စုဆောင်းရန်၊ စာတမ်းဖွဲ့စည်းမှုကို စီမံရန်၊ ပူးပေါင်းရေးသားရန် ကူညီသည်။
အကောင်အထည်ဖော်ရန် အချက်များ：
- LangGraph အထောက်အကူပြုသည့် အရာများကို အချက်အလက် ရှာဖွေရန်နှင့် အတွေးအခေါ် အခြေခံရန်
- CopilotKit အရှေ့ဘက်တွင် သုတေသန အကြောင်းအရာ၊ စာအုပ်စာရင်းကို ပြသသည်
- အခြေအနေ စင်္ကြံသည် သုတေသန တိုးတက်မှုကို အချိန်နှင့်အမျှ သိမ်းဆည်းထားရန်နှင့် ပြသရန်
- အပြင်အဆင်များကို အထောက်အကူပြုသော အချက်အလက်များကို ကိုးကားသောအခါ အသုံးပြုသူကို အတည်ပြုရန် သတိပေးသည်
ဥပမာ ၃: ဂျီနီယစ် ဖောင်ဖြည့်ခြင်း
အခြေအနေ： ရှုပ်ထွေးသော အာမခံလျှောက်လွှာကို စကားပြောစနစ်အဖြစ် ပြောင်းလဲသည်။
အကောင်အထည်ဖော်ရန် အချက်များ：
- အထောက်အကူပြုသည့် အရာများသည် အသုံးပြုသူ၏ အဖြေများအပေါ် မူတည်၍ နောက်ထပ်မေးခွန်းကို သတ်မှတ်သည်
- အခြေအနေအရ အမျိုးမျိုးသော UI ကိရိယာများကို ပြသရန် အခြေအနေများကို အသုံးပြုသည်
- အချို့သော ပြည့်စုံသော ဖောင်များကို အလိုအလျောက် သိမ်းဆည်းထားပြီး အဆက်မပြတ် ဖြည့်စွက်နိုင်သည်
- တင်သွင်းမီ အသုံးပြုသူအတွက် အချက်အလက်အားလုံးကို စုစည်းသည်
နည်းပညာ အကြံပြုချက်
CopilotKit ၏ နည်းပညာ အကောင်အထည်ဖော်မှုသည် ခေတ်မီ Web စက်မှုလုပ်ငန်းအခြေခံသည်။ အရှေ့ဘက်တွင် React (Angular ကိုလည်း ထောက်ပံ့သည်) ကို အဓိက UI ဖရိမ်ဝက်အဖြစ် အသုံးပြုသည်၊ အခြေအနေစီမံခန့်ခွဲမှုနှင့် အထောက်အကူပြု ဆက်သွယ်မှုအတွက် useAgent နှင့် useCoAgent ကဲ့သို့သော hook များကို ပံ့ပိုးသည်။ နောက်ခံတွင် CopilotRuntime အမျိုးအစားကို အဓိက စီမံခန့်ခွဲသူအဖြစ် လည်ပတ်ပြီး၊ တောင်းဆိုမှု အတည်ပြုခြင်း၊ LLM ခေါ်ယူခြင်းနှင့် တုံ့ပြန်မှု အစီးစီးများကို ကိုင်တွယ်သည်။ ဆက်သွယ်မှု ပရိုတိုကောလ်သည် Server-Sent Events (SSE) ကို အသုံးပြု၍ ဝန်ဆောင်မှုမှ ဖောက်သည်သို့ အချိန်နှင့်အမျှ စီးဆင်းမှုကို လုပ်ဆောင်သည်၊ အပြင် HTTP POST ဖြင့် ဖောက်သည်တောင်းဆိုမှုများကို ကိုင်တွယ်သည်။
v1.50 ဗားရှင်းသည် အရေးကြီးသော ဖွဲ့စည်းမှု အဆင့်မြှင့်တင်မှုကို ယူဆောင်လာပြီး၊ ပိုမိုရှင်းလင်းသော တစ်ခုတည်းသော အဆုံးအဖြတ် ဖွဲ့စည်းမှု၊ ပိုမိုကောင်းမွန်သော ကြည့်ရှုနိုင်မှု (အဝင်အထွက်ကို အထောက်အကူပြု) နှင့် CopilotKit Next နှင့် နက်ရှိုင်းစွာ ပေါင်းစည်းမှုကို မိတ်ဆက်ပြီး၊ ဖွံ့ဖြိုးမှု အတွေ့အကြုံကို ပိုမိုလွယ်ကူစေသည်။
အနာဂတ် အမြင်
CopilotKit ၏ မဟာဗျူဟာ အဆောက်အအုံမှာ ကိုယ်စားလှယ် အက်ပလီကေးရှင်း ဖွံ့ဖြိုးတိုးတက်မှုအတွက် အခြေခံအဆောက်အအုံ အဆင့်ဖြစ်ရန် ဖြစ်သည်။ AG-UI သဘောတူညီချက်ကို ထုတ်လုပ်သူများစွာ (Microsoft၊ Google၊ AWS စသည်တို့သည် အထောက်အပံ့ပြုခဲ့သည်) လက်ခံလာသည်နှင့်အမျှ၊ ဖွင့်လှစ်သော စံနှုန်းအခြေခံ၍ ကိုယ်စားလှယ် အက်ပလီကေးရှင်း အင်တာနက်ကို ဖွဲ့စည်းနေသည်။ CopilotKit သည် ကြိုတင်တည်ဆောက်ထားသော အစိတ်အပိုင်းများ၊ ဖန်တီးမှု UI ပုံစံများနှင့် နက်ရှိုင်းသော ဖရိမ်ဝက်များကို ပံ့ပိုးပေးခြင်းအားဖြင့် ထုတ်လုပ်မှုအဆင့် AI Copilot တစ်ခုကို ဖွဲ့စည်းရန် လွယ်ကူမှုကို အထူးသဖြင့် လျှော့ချထားသည်၊ ထို့ကြောင့် ဖွံ့ဖြိုးသူများသည် အခြေခံ ဆက်သွယ်မှု အသေးစိတ်များအစား စီးပွားရေး အတွေးအခေါ်များပေါ်တွင် အာရုံစိုက်နိုင်သည်။
