CopilotKit: بناء أفضل SDK لوكلاء الذكاء الاصطناعي الكاملين، واجهات المستخدم التوليدية وتطبيقات الدردشة

خلفية عامة

CopilotKit هو إطار عمل مفتوح المصدر مصمم خصيصًا لبناء تطبيقات AI Copilot و Agent-native، وقد حصل على أكثر من 28.9 ألف نجمة على GitHub، وتم اعتماده من قبل أكثر من 100 ألف مطور. القيمة الأساسية لهذا الإطار تكمن في دمج وكيل الذكاء الاصطناعي مع واجهة المستخدم بشكل عميق، مما يسمح للوكيل بالتحكم في واجهة المستخدم في الوقت الحقيقي، ونقل معلومات السياق، ورسم مكونات الواجهة ديناميكيًا من خلال واجهة المستخدم التوليدية.

الاكتشافات الأساسية

1. تصميم الهيكل والوظائف الأساسية

يعتمد CopilotKit على تصميم هيكلي ثلاثي الطبقات، يتضمن طبقة مكونات الواجهة الأمامية، وطبقة تشغيل CopilotRuntime، وطبقة اتصال الوكيل.

توفر طبقة مكونات الواجهة الأمامية طيفًا كاملاً من واجهات المستخدم الخالية من الرأس (Headless) إلى المكونات القابلة للتخصيص المبنية مسبقًا، مما يسمح للمطورين بالاختيار بمرونة وفقًا للاحتياجات. تعمل CopilotRuntime كمحرك تنسيق خلفي، مسؤول عن معالجة الطلبات من عميل الواجهة الأمامية، وإدارة استدعاءات LLM وتفاعلات الوكيل. بينما تقوم طبقة اتصال الوكيل بربط أي إطار عمل وكيل من خلال بروتوكول AG-UI، بما في ذلك LangGraph و CrewAI و LlamaIndex وغيرها.

تشمل الميزات الأساسية لـ CopilotKit واجهة المستخدم التوليدية (Generative UI)، التي تسمح للوكيل برسم مكونات الواجهة ديناميكيًا في وقت التشغيل؛ الحالة المشتركة (Shared State)، التي تحقق مزامنة ثنائية الاتجاه بين الواجهة الأمامية والوكيل؛ و Human-in-the-Loop (التعاون بين الإنسان والآلة)، الذي يدعم الوكيل في طلب إدخال أو موافقة بشرية أثناء التنفيذ. تجعل هذه الميزات من الممكن بناء تطبيقات ذكاء اصطناعي حقيقية تفاعلية، بدلاً من مجرد أنظمة سؤال وجواب بسيطة.

رسم توضيحي لعملية العمل:

2. بروتوكول AG-UI: حجر الزاوية للنظام البيئي

AG-UI (بروتوكول تفاعل الوكيل-المستخدم) هو معيار بروتوكول مفتوح وخفيف الوزن ومبني على الأحداث، أطلقته فريق CopilotKit، ويهدف إلى توحيد طريقة التواصل بين وكلاء الذكاء الاصطناعي والتطبيقات الموجهة للمستخدم. تم اعتماد هذا البروتوكول على نطاق واسع من قبل شركات وإطارات عمل رائدة مثل Google و Microsoft و AWS و LangChain و Mastra و Pydantic AI، مما أدى إلى تشكيل نظام بيئي متزايد القوة.

يحل بروتوكول AG-UI مشكلة رئيسية: نمط الاتصال التقليدي بين الواجهة الأمامية والخلفية (طلب-استجابة) لا يمكنه تلبية الاحتياجات المعقدة لتطبيقات الوكلاء. يحتاج الوكلاء إلى نقل تحديثات الحالة في الوقت الحقيقي، ومعالجة الانقطاعات وعمليات الموافقة، ومزامنة واجهة المستخدم مع حالة الوكيل، وكل ذلك يتطلب آلية اتصال أكثر مرونة. يحقق AG-UI هذه الوظائف من خلال تدفق الأحداث (Event Streaming)، مما يدعم تدفقات النصوص في الوقت الحقيقي، واستدعاءات الأدوات، ومزامنة الحالة، والأحداث المخصصة.

تشهد حاليًا مجال بروتوكولات الوكلاء وجود ثلاثة أعمدة رئيسية: يركز AG-UI على طبقة تفاعل الوكيل مع المستخدم، بينما يتولى MCP (بروتوكول سياق النموذج) مسؤولية ربط الوكلاء بالأدوات والبيانات، بينما يتعامل A2A (من وكيل إلى وكيل) مع الاتصالات التنسيقية بين الوكلاء. من الجدير بالذكر أن AG-UI قد حقق تكاملًا مع بروتوكول A2A، ويدعم بالكامل مواصفات A2UI من Google المستخدمة في رسم واجهات المستخدم التوليدية.

3. التكامل مع الإطارات الرئيسيةتكامل CopilotKit مع LangGraph هو واحد من أكثر حالات الاستخدام نضجًا. من خلال إعداد بسيط، يمكن للمطورين ربط وكيل LangGraph بواجهة CopilotKit، مما يتيح مشاركة الحالة والاستجابة في الوقت الحقيقي. عادةً ما تشمل عملية التكامل استخدام hook useCoAgent لربط الوكيل، من خلال دالة 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 بشكل أساسي على تبسيط نقل النصوص المتدفقة في واجهات الدردشة، حيث يوفر hook useChat الممتاز ومكونات واجهة المستخدم؛ بينما يركز CopilotKit أكثر على تكامل الوكلاء العميق، وواجهة المستخدم التوليدية، وقدرات التعاون بين الإنسان والآلة.

أما العلاقة مع LangChain فهي أكثر تكاملًا بدلاً من كونها تنافسية. يركز LangChain على بناء "عقل" الوكيل (المنطق وسير العمل)، بينما يوفر CopilotKit "وجه وصوت وأيدي" هذا العقل - أي واجهة التفاعل مع التطبيق. عادةً ما يستخدم المطورون LangChain/LangGraph لتعريف منطق الوكيل، ثم يبنون طبقة التفاعل مع المستخدم من خلال CopilotKit.

5. سيناريوهات الاستخدام النموذجية

تغطي حالات الاستخدام النموذجية لـ CopilotKit عدة مجالات. SaaS Copilot هو أكثر سيناريوهات الاستخدام شيوعًا، حيث يمكن للمساعد الذكي توجيه المستخدمين خلال سير العمل المعقد، وتقديم المساعدة المستندة إلى السياق. Co-Creation Copilot يركز على التعاون بين الإنسان والآلة، حيث يقوم الذكاء الاصطناعي والمستخدم بإنشاء المحتوى معًا، مما يعزز الإنتاجية بشكل ملحوظ. ملء النماذج الحوارية يحول النماذج المعقدة إلى تفاعل حواري طبيعي، حيث يمكن للمستخدمين إكمال إدخال البيانات المعقدة من خلال الدردشة. تطبيقات الوكلاء البحثية مثل تطبيق لوحة البحث المعروض رسميًا، توضح كيفية دمج وكيل 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 بفهم عرض المشروع الحالي في الوقت الحقيقي
• من خلال واجهة المستخدم التوليدية، يتم عرض بطاقات المهام، ومخططات جانت، وغيرها من المكونات ديناميكيًا
• نقاط التعاون بين الإنسان والآلة تضمن أن العمليات الأساسية (مثل حذف المشروع) تحتاج إلى تأكيد المستخدميمكن للمستخدمين إتمام عمليات معقدة من خلال اللغة الطبيعية، مثل "ساعدني في توزيع المهام التي ستنتهي الأسبوع المقبل على فريق الواجهة الأمامية وإنشاء تقرير تقدم".
  
  ### الحالة 2: مساعد البحث الذكي
  
  المشهد: أداة مساعدة للبحث الأكاديمي، تساعد الباحثين في جمع المعلومات، تنظيم هيكل الورقة، والتعاون في الكتابة.
  
  نقاط التنفيذ:
  [[HTMLPLACEHOLDER0]]
  ### الحالة 3: ملء النماذج الذكية
  
  المشهد: تحويل نموذج طلب التأمين المعقد إلى تفاعل حواري.
  
  نقاط التنفيذ:
  [[HTMLPLACEHOLDER1]]
  ## الرؤى التقنية
  
  تنفيذ تقنية CopilotKit يعتمد على مجموعة تقنيات الويب الحديثة. يستخدم الواجهة الأمامية React (يدعم أيضًا Angular) كإطار واجهة المستخدم الرئيسي، ويقدم useAgent و useCoAgent كخطافات لإدارة الحالة والتفاعل مع الوكلاء. يعمل وقت التشغيل الخلفي كفئة CopilotRuntime كمنسق مركزي، يعالج التحقق من الطلبات، استدعاءات LLM، وتدفق الاستجابة. يعتمد بروتوكول الاتصال على أحداث الخادم المرسلة (SSE) لتنفيذ دفع التدفق في الوقت الحقيقي من الخادم إلى العميل، بينما يتم معالجة طلبات العميل عبر HTTP POST.
  
  أحدث الإصدار 1.50 ترقية معمارية كبيرة، حيث قدم هيكل نقطة نهاية واحدة أكثر وضوحًا، قابلية مراقبة أفضل (استشعار مدمج) وتكامل عميق مع CopilotKit Next، مما يبسط تجربة التطوير بشكل أكبر.
  
  ## آفاق المستقبلاستراتيجية CopilotKit هي أن تصبح طبقة البنية التحتية لتطوير التطبيقات الوكيلة. مع اعتماد بروتوكول AG-UI من قبل المزيد من الشركات (مثل Microsoft وGoogle وAWS)، يتم تشكيل نظام بيئي للتطبيقات الوكيلة قائم على المعايير المفتوحة. من خلال توفير مكونات مسبقة البناء، وأنماط واجهة المستخدم التوليدية، والتكامل العميق مع الأطر، خفضت CopilotKit بشكل كبير من عتبة بناء AI Copilot على مستوى الإنتاج، مما يمكّن المطورين من التركيز على منطق الأعمال بدلاً من تفاصيل الاتصال الأساسية.