CopilotKit：全-સ્ટેક AI એજન્ટ, જનરેટિવ UI અને ચેટ એપ્લિકેશનો માટેનું ટોપ એસડિકે
CopilotKit：全-સ્ટેક AI એજન્ટ, જનરેટિવ UI અને ચેટ એપ્લિકેશનો માટેનું ટોપ એસડિકે
પૃષ્ઠભૂમિનો સારાંશ
CopilotKit એ AI Copilot અને એજન્ટ-નેટિવ એપ્લિકેશનો બનાવવા માટે ખાસ ડિઝાઇન કરેલ એક ઓપન સોર્સ ફ્રેમવર્ક છે, જે GitHub પર 28.9k થી વધુ સ્ટાર ધરાવે છે અને 100,000 થી વધુ ડેવલપર્સ દ્વારા અપનાવવામાં આવ્યું છે. આ ફ્રેમવર્કનું મુખ્ય મૂલ્ય એ છે કે તે AI એજન્ટને યુઝર ઇન્ટરફેસ સાથે ઊંડા રીતે એકીકૃત કરે છે, જેથી એજન્ટ实时控制 UI,上下文信息传递, અને生成式 UI动态渲染界面组件。
મુખ્ય શોધો
1. આર્કિટેક્ચર ડિઝાઇન અને મુખ્ય કાર્યક્ષમતાઓ
CopilotKit ત્રણ સ્તરીય આર્કિટેક્ચર ડિઝાઇન અપનાવે છે, જેમાં ફ્રન્ટએન્ડ કોમ્પોનન્ટ સ્તર, CopilotRuntime રનટાઇમ સ્તર અને એજન્ટ કનેક્શન સ્તરનો સમાવેશ થાય છે.
ફ્રન્ટએન્ડ કોમ્પોનન્ટ સ્તર સંપૂર્ણ હેડલેસ 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 主要专注于简化聊天界面的流式文本传输，提供了优秀的 useChat hook 和 UI 组件；而 CopilotKit 更强调深度代理集成、生成式 UI 和人机协作能力。
与 LangChain 的关系则更像是互补而非竞争。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 દ્વારા કાર્ય કાર્ડ, ગેન્ટ ચાર્ટ વગેરે ઘટકોને ડાયનામિક રીતે રેન્ડર કરવું
- માનવ-યંત્ર સહયોગ નોડ્સ ખાતરી કરે છે કે મુખ્ય ક્રિયાઓ (જેમ કે પ્રોજેક્ટને કાઢી નાખવું) માટે વપરાશકર્તાની પુષ્ટિ જરૂરી છેવપરાશકર્તા કુદરતી ભાષા દ્વારા જટિલ કામગીરીઓ પૂર્ણ કરી શકે છે, જેમ કે "મને આગામી સપ્તાહમાં સમાપ્ત થનારા કાર્યને ફ્રન્ટએન્ડ ટીમને ફાળવવા અને પ્રગતિની અહેવાલ બનાવવામાં મદદ કરો"।
કેસ 2: AI સંશોધન સહાયક
દૃશ્ય: શૈક્ષણિક સંશોધન સહાય સાધન, સંશોધકોએ સામગ્રી એકત્રિત કરવા, કાગળની રચના ગોઠવવા, સહયોગી લેખન માટે મદદ કરે છે।
કાર્યાન્વયનના મુખ્ય મુદ્દા:
- LangGraph એજન્ટ માહિતી શોધ અને તર્કશક્તિ માટે જવાબદાર છે
- CopilotKit ફ્રન્ટએન્ડ સંશોધન રૂપરેખા, સાહિત્યની યાદી દર્શાવે છે
- રાજ્ય સમન્વય સંશોધનની પ્રગતિને વાસ્તવિક સમયમાં સાચવવા અને દર્શાવવા ખાતરી આપે છે
- બહારની સામગ્રીનો ઉલ્લેખ કરતી વખતે મંજૂરીના નોડ્સ વપરાશકર્તાને પુષ્ટિ કરવા માટે સૂચવે છે
કેસ 3: સ્માર્ટ ફોર્મ ભરવું
દૃશ્ય: જટિલ વીમા અરજી ફોર્મને સંવાદાત્મક ક્રિયાપ્રતિક્રિયામાં રૂપાંતરિત કરવું।
કાર્યાન્વયનના મુખ્ય મુદ્દા:
- એજન્ટ વપરાશકર્તાના જવાબો અનુસાર ગતિશીલ રીતે આગામી પ્રશ્ન નક્કી કરે છે
- સંદર્ભ અનુસાર અલગ અલગ UI ઘટકો દર્શાવવા માટે શરતી રેન્ડરિંગનો ઉપયોગ
- ભાગે પૂર્ણ થયેલા ફોર્મને આપોઆપ સાચવવું, બ્રેક પોઈન્ટને ફરીથી ભરવા માટે સપોર્ટ
- સબમિટ કરતા પહેલા વપરાશકર્તાને પુષ્ટિ માટે તમામ માહિતીનું સંક્ષેપ
તકનીકી પ્રેરણા
CopilotKit ની તકનીકી અમલ આધુનિક વેબ સ્ટેક પર આધારિત છે। ફ્રન્ટએન્ડ મુખ્ય UI ફ્રેમવર્ક તરીકે React (Angular ને પણ સપોર્ટ કરે છે) નો ઉપયોગ કરે છે, જે રાજ્ય વ્યવસ્થાપન અને એજન્ટ ક્રિયાપ્રતિક્રિયા માટે useAgent અને useCoAgent જેવા હૂક પ્રદાન કરે છે। બેકએન્ડ રનટાઇમ CopilotRuntime વર્ગ તરીકે કેન્દ્રિય સંકલક તરીકે કાર્ય કરે છે, વિનંતી માન્યતા, LLM કોલ અને પ્રતિસાદ પ્રવાહિત કરવા માટે સંભાળે છે। સંચાર પ્રોટોકોલ સર્વર-સેંટ ઇવેન્ટ્સ (SSE) નો ઉપયોગ કરીને સર્વરથી ક્લાયન્ટ સુધીની વાસ્તવિક સમયની પ્રવાહિતી પૂરી પાડે છે, સાથે જ HTTP POST દ્વારા ક્લાયન્ટની વિનંતીઓને સંભાળે છે।
v1.50 સંસ્કરણે મહત્વપૂર્ણ આર્કિટેક્ચર સુધારાઓ લાવ્યા છે, વધુ સ્પષ્ટ એકમાત્ર અંતિમ બિંદુ આર્કિટેક્ચર, વધુ સારી દેખરેખ (ટેલિમેટ્રી બિલ્ટ-ઇન) અને CopilotKit Next સાથેની ઊંડાણપૂર્વકની સંકલનને રજૂ કરે છે, જે વિકાસના અનુભવને વધુ સરળ બનાવે છે।
