diff --git a/docs/docs.json b/docs/docs.json index f75440694..22a2c963f 100644 --- a/docs/docs.json +++ b/docs/docs.json @@ -13788,6 +13788,14 @@ "edge/pt-BR/guides/flows/inputs-id-deprecation" ] }, + { + "group": "Frontend", + "icon": "browser", + "pages": [ + "edge/pt-BR/guides/frontend/overview", + "edge/pt-BR/guides/frontend/channels" + ] + }, { "group": "Ferramentas", "icon": "wrench", @@ -26495,6 +26503,14 @@ "edge/ko/guides/flows/inputs-id-deprecation" ] }, + { + "group": "Frontend", + "icon": "browser", + "pages": [ + "edge/ko/guides/frontend/overview", + "edge/ko/guides/frontend/channels" + ] + }, { "group": "도구", "icon": "wrench", @@ -39634,6 +39650,14 @@ "edge/ar/guides/flows/inputs-id-deprecation" ] }, + { + "group": "Frontend", + "icon": "browser", + "pages": [ + "edge/ar/guides/frontend/overview", + "edge/ar/guides/frontend/channels" + ] + }, { "group": "الأدوات", "icon": "wrench", diff --git a/docs/edge/ar/guides/frontend/channels.mdx b/docs/edge/ar/guides/frontend/channels.mdx new file mode 100644 index 000000000..ce92bc8cf --- /dev/null +++ b/docs/edge/ar/guides/frontend/channels.mdx @@ -0,0 +1,156 @@ +--- +title: القنوات +description: شغّل نفس وكيل CrewAI كروبوت على Slack أو Teams باستخدام CopilotKit Channels SDK ومنصة Intelligence المُدارة. +icon: messages +mode: "wide" +--- + +## قابل مستخدميك حيث هم بالفعل + +وكيل CrewAI الذي بنيته في [النظرة العامة](/edge/ar/guides/frontend/overview) لا يجب أن يعيش خلف تطبيق ويب فقط. يمكن لنفس الـ Crew أو الـ Flow أن يعمل كروبوت داخل منصة مراسلة. لا حاجة لإعادة البناء ولا لنسخة ثانية من منطق وكيلك: يبقى الوكيل مكشوفًا عبر [بروتوكول AG-UI](https://docs.ag-ui.com)، وتقوم **قناة** بتشغيله من Slack أو Microsoft Teams. + +يوفّر [Channels SDK](https://docs.copilotkit.ai/slack) من CopilotKit تلك القناة. تُعرّف `createChannel` في وقت تشغيل صغير، وتوجّهه إلى وكيل CrewAI الخاص بك، وتتولى منصة **Intelligence** المُدارة من CopilotKit التوسّط في الاتصال مع مزوّد المراسلة. + + +على خلاف بقية هذا القسم، فإن Channels **ليست ذاتية الاستضافة**. تعمل من خلال **CopilotKit Intelligence** — وهي سطح مطلوب لـ Channels، بحكم التصميم (تتوفر طبقة مجانية). تحتفظ Intelligence باتصال المنصة وبيانات الاعتماد، وتستقبل كل حدث من المنصة، وتسلّم الدور إلى عملية قناتك؛ تشغّل عمليتك الوكيل وتبثّ الرد مرة أخرى. تقوم بإعداد Slack مرة واحدة في لوحة تحكم Intelligence، ولا تدخل بيانات اعتماد المنصة عمليتك أبدًا. يبقى وكيلك وأدواتك وحالتك ملكًا لك. + + +## كيف تتكامل الأجزاء معًا + +لا يتغير أي شيء بخصوص خادم وكيل CrewAI الخاص بك. يستمر في تقديم الـ Crew أو الـ Flow عبر AG-UI تمامًا كما في النظرة العامة. ما تضيفه هو عملية Node منفصلة طويلة الأمد مبنية باستخدام `@copilotkit/channels`: تسجّل قناة على `CopilotRuntime`، وتتصل بـ Intelligence، وتشغّل وكيلك كلما وصلت رسالة. + +``` +Slack / Teams ──► CopilotKit Intelligence ──► channel process (Node) ──► CrewAI server (AG-UI) ──► Crew / Flow +``` + +تحتفظ عملية القناة باتصال دائم مع بوابة Intelligence، لذا فهي تحتاج إلى مضيف طويل الأمد — لا يمكن لمعالج طلبات بلا خادم (serverless) أن يملك ذلك الاتصال. يمكن لخادم CrewAI الخاص بك أن يستمر في تقديم واجهة الويب الأمامية من النظرة العامة في الوقت نفسه: تطبيق الويب والقناة ما هما إلا عميلان لنقطة نهاية AG-UI واحدة. + +## دليل التكامل + + + + + +يأتي Channels SDK مكتمل العناصر — كل منصة تُشحن في الحزمة الواحدة، بلا محوّل خاص بكل منصة لتثبيته. أضفه إلى جانب وقت التشغيل الذي يستضيف القناة وعميل CrewAI AG-UI: + +```bash +npm install @copilotkit/channels @copilotkit/runtime @ag-ui/crewai +``` + + + + + +في [لوحة تحكم CopilotKit](https://docs.copilotkit.ai/slack)، أنشئ قناة واربط Slack — ترشدك Intelligence خلال إنشاء تطبيق Slack وتحتفظ ببيانات اعتماده. يترك ذلك متغيّري بيئة لعمليتك، كلاهما من لوحة التحكم: + +```bash +export INTELLIGENCE_API_KEY=... # authenticates the runtime with Intelligence (free tier available) +export INTELLIGENCE_CHANNEL_ID=... # the Channel ID, matched by createChannel({ name }) +``` + + + + + +تُعرّف `createChannel` القناة وتربط وكيلك بها. ابنِ الوكيل كمصنع لكل خيط (thread) بحيث تحصل كل محادثة على جلستها الخاصة، مستخدمًا نفس `CrewAIAgent` الذي تستخدمه النظرة العامة في وقت تشغيل الويب، موجّهًا إلى نقطة نهاية AG-UI الخاصة بك. تتيح `identifyUser: "platform"` لـ Intelligence ربط كل مستخدم من المنصة بهوية ثابتة. + +```ts +// channel.ts +import { createChannel } from "@copilotkit/channels"; +import { CrewAIAgent } from "@ag-ui/crewai"; + +const channel = createChannel({ + name: process.env.INTELLIGENCE_CHANNEL_ID!, // must match the Channel ID in Intelligence + identifyUser: "platform", + // A fresh agent per conversation, pointed at your CrewAI AG-UI endpoint. + agent: (threadId) => { + const agent = new CrewAIAgent({ url: "http://localhost:8000/recipe" }); + agent.threadId = threadId; + return agent; + }, +}); + +// A mention subscribes the thread and runs the agent; afterwards every message +// in a subscribed thread runs it without needing another mention. +channel.onMention(async ({ thread }) => { + await thread.subscribe(); + await thread.runAgent(); +}); + +channel.onMessage(async ({ thread }) => { + if (await thread.isSubscribed()) await thread.runAgent(); +}); + +export { channel }; +``` + + + + + +أنشئ `CopilotRuntime` مع بوابة Intelligence وقناتك، ثم قدّمه باستخدام `createCopilotNodeListener`. تبقى خريطة `agents` فارغة — القناة توفّر وكيلها الخاص. انتظر حتى تكون القناة جاهزة كي يفشل بدء التشغيل بصوت عالٍ عند وجود إعداد معطوب. + +```ts +// server.ts +import { createServer } from "node:http"; +import { CopilotRuntime, CopilotKitIntelligence } from "@copilotkit/runtime/v2"; +import { createCopilotNodeListener } from "@copilotkit/runtime/v2/node"; +import { channel } from "./channel"; + +const runtime = new CopilotRuntime({ + agents: {}, // the channel supplies its own agent; no web-facing agents needed + intelligence: new CopilotKitIntelligence({ + apiKey: process.env.INTELLIGENCE_API_KEY!, // free tier available + }), + channels: [channel], +}); + +const listener = createCopilotNodeListener({ runtime }); +await listener.channels?.ready({ timeoutMs: 15_000 }); + +createServer(listener).listen(3123, () => { + console.log("Channels runtime listening on port 3123"); +}); +``` + + + + + +ابدأه إلى جانب خادم وكيل CrewAI الخاص بك: + +```bash +uvicorn server:app --port 8000 # terminal 1 — CrewAI agent server +npx tsx server.ts # terminal 2 — Channels runtime +``` + +اذكر الروبوت في Slack أو Teams فيشغّل الـ Crew أو الـ Flow الخاص بك، ويبثّ الرد مرة أخرى داخل الخيط. يبقى الخيط مشتركًا، لذا تعمل رسائل المتابعة دون الحاجة إلى ذكر آخر. + + + + + +## نموذج الأحداث + +تتفاعل القناة مع أحداث المنصة عبر معالِجات، ويستقبل كل معالِج خيطًا (`thread`) تديره بعدد قليل من الدوال: + +- **`channel.onMention`** يُطلَق عندما يذكر مستخدم الروبوت بـ @. استدعِ `thread.subscribe()` للانضمام إلى الخيط، ثم `thread.runAgent()` لتشغيل وكيل CrewAI الخاص بك عند الذكر. +- **`channel.onMessage`** يُطلَق عند كل رسالة في خيط يمكن للروبوت رؤيته. قيّده بـ `thread.isSubscribed()` كي لا يستجيب الوكيل إلا حيث انضمّ، ثم `thread.runAgent()`. +- **`thread.runAgent()`** يشغّل وكيل CrewAI المرفق للدور الحالي ويبثّ مخرجاته مرة أخرى داخل القناة. مرّر `{ prompt }` لتجاوز النص الذي يعمل عليه الوكيل. + +يستقبل وكيلك `RunAgentInput` عاديًا من AG-UI ويصدر أحداث AG-UI عادية؛ تبقى آليات المنصة خلف القناة، لذا يعمل نفس الـ Crew أو الـ Flow دون تغيير عبر كل منصة. تكشف القناة أيضًا معالِجات للترحيبات والمقاطعات والأوامر والتفاعلات والنوافذ (modals) — راجع [مرجع `Channel`](https://docs.copilotkit.ai/reference/channels/classes/Channel) للاطلاع على السطح الكامل. + +## دعم المنصات + +يغطي مسار Intelligence المُدار **Slack** و**Microsoft Teams** اليوم — يعمل نفس كود القناة على أيٍّ منهما، وتفيد `message.platform` / `thread.platform` بالأصل الأصلي. تُبلَغ المنصات الأخرى (Discord وTelegram وWhatsApp) عبر **محوّلات مباشرة** يشغّلها المطوّر بدلًا من المسار المُدار — تملك عمليتك الخاصة بيانات اعتماد المنصة والنقل. راجع [توثيق CopilotKit Channels](https://docs.copilotkit.ai/slack) للاطلاع على قائمة المنصات الحالية والإعداد الخاص بكل منصة. + +## ذات صلة + + + + قدّم الـ Crew أو الـ Flow الخاص بك عبر AG-UI — الأساس الذي تُبنى عليه كل قناة. + + + أوقف الوكيل مؤقتًا لجمع موافقة المستخدم أو مدخلاته في منتصف التشغيل. + + diff --git a/docs/edge/ar/guides/frontend/overview.mdx b/docs/edge/ar/guides/frontend/overview.mdx new file mode 100644 index 000000000..8c4363792 --- /dev/null +++ b/docs/edge/ar/guides/frontend/overview.mdx @@ -0,0 +1,238 @@ +--- +title: النظرة العامة على الواجهة الأمامية +description: ابنِ واجهات مستخدم تفاعلية لوكلاء CrewAI الخاصين بك باستخدام CopilotKit وبروتوكول AG-UI. +icon: browser +mode: "wide" +--- + +## امنح وكلاءك واجهة مستخدم + +يشغّل CrewAI وكلاءك. ويمنحهم [CopilotKit](https://copilotkit.ai) واجهة أمامية. معًا يتيحان لك بناء تطبيقات يحادث فيها المستخدمون Crew أو Flow، ويشاهدونه يعمل في الوقت الفعلي، ويوافقون على قراراته، ويرون مخرجاته معروضة كواجهة حيّة بدلًا من جدران من النص. + +يتصل الاثنان عبر [بروتوكول AG-UI](https://docs.ag-ui.com). تكشف حزمة `ag-ui-crewai` أي Crew أو Flow كنقطة نهاية AG-UI. وتستهلك خطافات (hooks) ومكوّنات React من CopilotKit تلك النقطة. يفتح ذلك تجارب تتجاوز بكثير صندوق المحادثة: + + + + اعرض استدعاءات أدوات الوكيل وحالته كمكوّنات React خاصة بك. + + + أوقف الوكيل مؤقتًا لجمع موافقة المستخدم أو مدخلاته في منتصف التشغيل. + + + أبقِ حالة الوكيل وواجهة تطبيقك متزامنتين في الاتجاهين. + + + شغّل نفس الوكيل كروبوت على Slack أو Discord أو Teams. + + + +يجعل هذا الدليل Crew أو Flow يتحدث مع واجهة أمامية بـ Next.js من البداية إلى النهاية. تبني بقية القسم على التطبيق الذي تعدّه هنا. + +## البنية + +هناك ثلاثة أجزاء: + +1. **خادم وكيل CrewAI** — عملية Python تقدّم الـ Crew أو الـ Flow الخاص بك عبر AG-UI (FastAPI + `ag-ui-crewai`). +2. **وقت تشغيل CopilotKit** — مسار Next.js يسجّل وكيلك ويوكّل الطلبات إليه. +3. **الواجهة الأمامية بـ React** — مزوّد `` إلى جانب مكوّنات المحادثة والواجهة التوليدية. + +``` +React app ──► CopilotKit runtime (/api/copilotkit) ──► CrewAI server (AG-UI) ──► Crew / Flow +``` + + +يغطي هذا الدليل المسار **الذاتي الاستضافة**: تشغّل خادم وكيل CrewAI بنفسك باستخدام `ag-ui-crewai`، ويعمل محليًا دون أي خدمة مُدارة. يقدّم CopilotKit أيضًا مسارًا **مُدارًا** (CopilotKit Cloud / Enterprise Intelligence) بخيوط مستضافة وأداة فحص — راجع [دليل البدء السريع لـ CopilotKit مع CrewAI](https://docs.copilotkit.ai/crewai-crews/quickstart) إن أردت ذلك بدلًا منه. كود الواجهة الأمامية في هذا القسم هو نفسه في الحالتين؛ الاختلاف فقط في كيفية استضافة الوكيل وتسجيله. + + + +يعمل CrewAI خلف AG-UI بثلاثة أشكال: الـ **Flows** العادية (المستخدمة في هذه الأدلة)، و**[الـ Flows المحادثية (Conversational Flows)](/edge/en/guides/frontend/conversational-flows)** (أصلية، مدركة للجلسة، قائمة على الأدوار، بتكافؤ كامل في الميزات)، والـ **Crews** (محادثة أساسية). الواجهة الأمامية في هذا القسم متطابقة عبرها جميعًا — الاختلاف فقط في تأليف الخلفية وتسجيلها. + + +## دليل التكامل + + + + + +ثبّت حزمة التكامل في مشروع CrewAI الخاص بك: + +```bash +pip install ag-ui-crewai +``` + +اكشف وكيلك من تطبيق FastAPI. تستخدم الـ Flows دالة `add_crewai_flow_fastapi_endpoint`؛ وتستخدم الـ Crews دالة `add_crewai_crew_fastapi_endpoint`. يمكنك تسجيل ما تشاء منها، كلٌّ على مساره الخاص. + + + +```python Flow +# server.py +from fastapi import FastAPI +from ag_ui_crewai.endpoint import add_crewai_flow_fastapi_endpoint +from my_agents.recipe_flow import RecipeFlow + +app = FastAPI(title="CrewAI Agent Server") + +add_crewai_flow_fastapi_endpoint( + app=app, + flow=RecipeFlow(), + path="/recipe", +) +``` + +```python Crew +# server.py +from fastapi import FastAPI +from ag_ui_crewai.endpoint import add_crewai_crew_fastapi_endpoint +from my_agents.research_crew import ResearchCrew + +app = FastAPI(title="CrewAI Agent Server") + +add_crewai_crew_fastapi_endpoint( + app=app, + crew=ResearchCrew().crew(), + path="/research", +) +``` + + + +شغّله: + +```bash +uvicorn server:app --port 8000 +``` + + +اضبط متغيّرات البيئة الخاصة بمزوّد الـ LLM الخاص بك (على سبيل المثال `OPENAI_API_KEY`) قبل بدء الخادم. + + + + + + +إن لم تكن لديك واجهة أمامية بعد، أنشئ هيكلًا: + +```bash +npx create-next-app@latest my-app +cd my-app +``` + +ثبّت CopilotKit وعميل CrewAI AG-UI: + +```bash +npm install @copilotkit/react-core @copilotkit/react-ui @copilotkit/runtime @ag-ui/crewai +``` + + + + + +أنشئ مسارًا يسجّل وكيل (أو وكلاء) CrewAI مع وقت تشغيل CopilotKit. يشير كل وكيل إلى مسار على خادم Python الخاص بك عبر `CrewAIAgent`. + +```ts +// app/api/copilotkit/route.ts +import { + CopilotRuntime, + InMemoryAgentRunner, + createCopilotEndpoint, +} from "@copilotkit/runtime/v2"; +import { CrewAIAgent } from "@ag-ui/crewai"; +import { handle } from "hono/vercel"; + +const runtime = new CopilotRuntime({ + agents: { + recipe: new CrewAIAgent({ url: "http://localhost:8000/recipe" }), + }, + runner: new InMemoryAgentRunner(), +}); + +const app = createCopilotEndpoint({ + runtime, + basePath: "/api/copilotkit", +}); + +const handler = handle(app); +export const GET = handler; +export const POST = handler; +``` + + + + + +وجّه `` إلى مسار وقت التشغيل واذكر اسم الوكيل الذي سجّلته. + +```tsx +// app/page.tsx +"use client"; +import { CopilotKit } from "@copilotkit/react-core"; +import { CopilotSidebar } from "@copilotkit/react-core/v2"; +import "@copilotkit/react-core/v2/styles.css"; + +export default function Page() { + return ( + + + + + ); +} +``` + + + + + +ابدأ العمليتين وافتح التطبيق. تشغّل المحادثة في الشريط الجانبي الآن الـ Crew أو الـ Flow الخاص بك. + +```bash +uvicorn server:app --port 8000 # terminal 1 +npm run dev # terminal 2 +``` + + + + + +## خيارات واجهة المحادثة + +يشحن CopilotKit ثلاثة أسطح محادثة قابلة للتبديل. بدّل المكوّن؛ يبقى التوصيل متطابقًا. + + + +```tsx Sidebar +import { CopilotSidebar } from "@copilotkit/react-core/v2"; + + +``` + +```tsx Popup +import { CopilotPopup } from "@copilotkit/react-core/v2"; + + +``` + +```tsx Inline +import { CopilotChat } from "@copilotkit/react-core/v2"; + + +``` + + + +## إلى أين تذهب بعد ذلك + + + + اعرض استدعاءات الأدوات وحالة الوكيل كمكوّنات مخصّصة. + + + دع الوكيل يستدعي دوالًا تعمل في المتصفح. + + + قيّد إجراءات الوكيل خلف موافقة المستخدم. + + + ابثّ الحالة قيد التنفيذ إلى الواجهة أثناء عمل الوكيل. + + diff --git a/docs/edge/en/guides/frontend/channels.mdx b/docs/edge/en/guides/frontend/channels.mdx index e62e6db96..99c162fdc 100644 --- a/docs/edge/en/guides/frontend/channels.mdx +++ b/docs/edge/en/guides/frontend/channels.mdx @@ -1,117 +1,148 @@ --- title: Channels -description: Run the same CrewAI agent as a chat bot on Slack and Discord with the CopilotKit Channels SDK. -icon: slack +description: Run the same CrewAI agent as a Slack or Teams bot with the CopilotKit Channels SDK and managed Intelligence platform. +icon: messages mode: "wide" --- ## Meet your users where they already are -The CrewAI agent you built in the [Overview](/edge/en/guides/frontend/overview) does not have to live behind a web app. The same Crew or Flow can run as a bot inside a messaging platform. No rebuild, no second copy of your agent logic: the agent stays exposed over the [AG-UI protocol](https://docs.ag-ui.com), and a bot process drives it. +The CrewAI agent you built in the [Overview](/edge/en/guides/frontend/overview) does not have to live behind a web app. The same Crew or Flow can run as a bot inside a messaging platform. No rebuild, no second copy of your agent logic: the agent stays exposed over the [AG-UI protocol](https://docs.ag-ui.com), and a **channel** drives it from Slack or Microsoft Teams. -CopilotKit's [Channels SDK](https://docs.copilotkit.ai/reference/channels) provides that bot process. It ships a platform-agnostic engine plus per-platform adapters. +CopilotKit's [Channels SDK](https://docs.copilotkit.ai/slack) provides that channel. You declare a `createChannel` in a small runtime, point it at your CrewAI agent, and CopilotKit's managed **Intelligence** platform brokers the connection to the messaging provider. + + +Unlike the rest of this section, Channels is **not self-hosted**. It runs through **CopilotKit Intelligence** — a required surface for Channels, by design (a free tier is available). Intelligence holds the platform connection and credentials, receives each platform event, and delivers the turn to your channel process; your process runs the agent and streams the reply back. You configure Slack once in the Intelligence dashboard, and platform credentials never enter your process. Your agent, tools, and state stay yours. + ## How it fits together -Nothing about your agent server changes. It keeps serving your Crew or Flow over AG-UI exactly as in the Overview. What you add is a separate **bot process**: it connects to a platform adapter, listens for messages, and runs your agent when it is messaged. The reply streams back into the channel. +Nothing about your CrewAI agent server changes. It keeps serving your Crew or Flow over AG-UI exactly as in the Overview. What you add is a separate long-running Node process built with `@copilotkit/channels`: it registers a channel on the `CopilotRuntime`, connects to Intelligence, and runs your agent whenever a message arrives. ``` -Slack / Discord ──► Channels bot process ──► CrewAI server (AG-UI) ──► Crew / Flow +Slack / Teams ──► CopilotKit Intelligence ──► channel process (Node) ──► CrewAI server (AG-UI) ──► Crew / Flow ``` -Your agent server can keep serving the web frontend from the Overview at the same time. The web app and the bot are just two clients of one AG-UI endpoint. +The channel process holds a persistent connection to the Intelligence gateway, so it needs a long-running host — a serverless request handler cannot own that connection. Your CrewAI server can keep serving the web frontend from the Overview at the same time: the web app and the channel are just two clients of one AG-UI endpoint. -## Slack +## Integration guide +The Channels SDK is batteries-included — every platform ships in the one package, with no per-platform adapter to install. Add it alongside the runtime that hosts the channel and the CrewAI AG-UI client: + ```bash -npm install @copilotkit/channels @copilotkit/channels-slack @ag-ui/crewai +npm install @copilotkit/channels @copilotkit/runtime @ag-ui/crewai ``` - + -Create an app in the Slack API dashboard for your workspace, enable Socket Mode, and grant it the message and event scopes it needs to read and post in channels. Then expose its tokens to the bot process: +In the [CopilotKit dashboard](https://docs.copilotkit.ai/slack), create a Channel and connect Slack — Intelligence walks you through creating the Slack app and holds its credentials. That leaves two environment variables for your process, both from the dashboard: ```bash -export SLACK_BOT_TOKEN=xoxb-... # bot user token -export SLACK_APP_TOKEN=xapp-... # app-level token (Socket Mode) +export INTELLIGENCE_API_KEY=... # authenticates the runtime with Intelligence (free tier available) +export INTELLIGENCE_CHANNEL_ID=... # the Channel ID, matched by createChannel({ name }) ``` - + -`createBot` wires a Slack adapter to your agent. The `agent` factory returns a `CrewAIAgent` pointed at the AG-UI path your server exposes (the same URL you registered in the runtime in the Overview). +`createChannel` declares the channel and attaches your agent. Build the agent as a per-thread factory so each conversation gets its own session, using the same `CrewAIAgent` the Overview uses in the web runtime, pointed at your AG-UI endpoint. `identifyUser: "platform"` lets Intelligence map each platform user to a stable identity. ```ts -// bot.ts -import { createBot } from "@copilotkit/channels"; -import { slack, defaultSlackTools, defaultSlackContext } from "@copilotkit/channels-slack"; +// channel.ts +import { createChannel } from "@copilotkit/channels"; import { CrewAIAgent } from "@ag-ui/crewai"; -const bot = createBot({ - adapters: [ - slack({ - botToken: process.env.SLACK_BOT_TOKEN!, // xoxb-… - appToken: process.env.SLACK_APP_TOKEN!, // xapp-… (Socket Mode) - }), - ], - agent: (threadId) => new CrewAIAgent({ url: "http://localhost:8000/recipe" }), - tools: [...defaultSlackTools], - context: [...defaultSlackContext], +const channel = createChannel({ + name: process.env.INTELLIGENCE_CHANNEL_ID!, // must match the Channel ID in Intelligence + identifyUser: "platform", + // A fresh agent per conversation, pointed at your CrewAI AG-UI endpoint. + agent: (threadId) => { + const agent = new CrewAIAgent({ url: "http://localhost:8000/recipe" }); + agent.threadId = threadId; + return agent; + }, }); -bot.start(); +// A mention subscribes the thread and runs the agent; afterwards every message +// in a subscribed thread runs it without needing another mention. +channel.onMention(async ({ thread }) => { + await thread.subscribe(); + await thread.runAgent(); +}); + +channel.onMessage(async ({ thread }) => { + if (await thread.isSubscribed()) await thread.runAgent(); +}); + +export { channel }; ``` - + -Start the bot process alongside your agent server: +Create a `CopilotRuntime` with the Intelligence gateway and your channel, then serve it with `createCopilotNodeListener`. The `agents` map stays empty — the channel supplies its own agent. Wait for the channel to be ready so a broken config fails startup loudly. + +```ts +// server.ts +import { createServer } from "node:http"; +import { CopilotRuntime, CopilotKitIntelligence } from "@copilotkit/runtime/v2"; +import { createCopilotNodeListener } from "@copilotkit/runtime/v2/node"; +import { channel } from "./channel"; + +const runtime = new CopilotRuntime({ + agents: {}, // the channel supplies its own agent; no web-facing agents needed + intelligence: new CopilotKitIntelligence({ + apiKey: process.env.INTELLIGENCE_API_KEY!, // free tier available + }), + channels: [channel], +}); + +const listener = createCopilotNodeListener({ runtime }); +await listener.channels?.ready({ timeoutMs: 15_000 }); + +createServer(listener).listen(3123, () => { + console.log("Channels runtime listening on port 3123"); +}); +``` + + + + + +Start it alongside your CrewAI agent server: ```bash uvicorn server:app --port 8000 # terminal 1 — CrewAI agent server -node bot.ts # terminal 2 — Slack bot +npx tsx server.ts # terminal 2 — Channels runtime ``` -Message the bot in Slack and it runs your Crew or Flow, streaming the reply back into the thread. +Mention the bot in Slack or Teams and it runs your Crew or Flow, streaming the reply back into the thread. The thread stays subscribed, so follow-up messages run without another mention. - -Slack app scopes, Socket Mode setup, and the full adapter options are maintained by CopilotKit. Follow the [Slack channel reference](https://docs.copilotkit.ai/reference/channels/slack) together with Slack's own app setup guide for the authoritative steps. - +## The event model -## Discord +A channel reacts to platform events with handlers, and each handler receives a `thread` you drive with a few methods: -Discord uses the same `createBot` engine with the Discord adapter from `@copilotkit/channels-discord`: +- **`channel.onMention`** fires when a user @-mentions the bot. Call `thread.subscribe()` to join the thread, then `thread.runAgent()` to run your CrewAI agent on the mention. +- **`channel.onMessage`** fires on every message in a thread the bot can see. Gate it with `thread.isSubscribed()` so the agent only responds where it has joined, then `thread.runAgent()`. +- **`thread.runAgent()`** runs the attached CrewAI agent for the current turn and streams its output back into the channel. Pass `{ prompt }` to override the text the agent runs on. -```ts -import { createBot } from "@copilotkit/channels"; -import { discord } from "@copilotkit/channels-discord"; -import { CrewAIAgent } from "@ag-ui/crewai"; - -const bot = createBot({ - adapters: [discord({ token: process.env.DISCORD_BOT_TOKEN! })], - agent: (threadId) => new CrewAIAgent({ url: "http://localhost:8000/recipe" }), -}); - -bot.start(); -``` - -See the [Discord channel reference](https://docs.copilotkit.ai/reference/channels/discord) for the exact adapter options and bot setup. +Your agent receives an ordinary AG-UI `RunAgentInput` and emits ordinary AG-UI events; the platform mechanics stay behind the channel, so the same Crew or Flow runs unchanged across every platform. The channel also exposes handlers for welcomes, interrupts, commands, reactions, and modals — see the [`Channel` reference](https://docs.copilotkit.ai/reference/channels/classes/Channel) for the full surface. ## Platform support -Slack and Discord have official Channels adapters (`@copilotkit/channels-slack`, `@copilotkit/channels-discord`). Microsoft Teams is available through CopilotKit's managed offering (currently waitlisted). Check the [Channels reference](https://docs.copilotkit.ai/reference/channels) for the current list before promising a platform. +The managed Intelligence path covers **Slack** and **Microsoft Teams** today — the same channel code runs on either, and `message.platform` / `thread.platform` report the native origin. Other platforms (Discord, Telegram, WhatsApp) are reached through developer-operated **direct adapters** rather than the managed path — your own process holds the platform credentials and transport. Check the [CopilotKit Channels documentation](https://docs.copilotkit.ai/slack) for the current platform list and per-platform setup. ## Related diff --git a/docs/edge/en/guides/frontend/overview.mdx b/docs/edge/en/guides/frontend/overview.mdx index 123f03213..7b858c161 100644 --- a/docs/edge/en/guides/frontend/overview.mdx +++ b/docs/edge/en/guides/frontend/overview.mdx @@ -21,7 +21,7 @@ The two connect through the [AG-UI protocol](https://docs.ag-ui.com). The `ag-ui Keep agent state and your app UI in two-way sync. - + Run the same agent as a Slack, Discord, or Teams bot. diff --git a/docs/edge/ko/guides/frontend/channels.mdx b/docs/edge/ko/guides/frontend/channels.mdx new file mode 100644 index 000000000..cd85a6b37 --- /dev/null +++ b/docs/edge/ko/guides/frontend/channels.mdx @@ -0,0 +1,156 @@ +--- +title: Channels +description: CopilotKit Channels SDK와 관리형 Intelligence 플랫폼으로 동일한 CrewAI 에이전트를 Slack 또는 Teams 봇으로 실행하세요. +icon: messages +mode: "wide" +--- + +## 사용자가 이미 있는 곳에서 만나세요 + +[Overview](/edge/ko/guides/frontend/overview)에서 만든 CrewAI 에이전트는 반드시 웹 앱 뒤에서만 동작할 필요가 없습니다. 동일한 Crew 또는 Flow를 메시징 플랫폼 안에서 봇으로 실행할 수 있습니다. 다시 빌드할 필요도, 에이전트 로직을 두 번 복사할 필요도 없습니다. 에이전트는 [AG-UI 프로토콜](https://docs.ag-ui.com)을 통해 그대로 노출되고, **channel**이 Slack 또는 Microsoft Teams에서 이를 구동합니다. + +CopilotKit의 [Channels SDK](https://docs.copilotkit.ai/slack)가 그 channel을 제공합니다. 작은 런타임에 `createChannel`을 선언하고 이를 CrewAI 에이전트에 연결하면, CopilotKit의 관리형 **Intelligence** 플랫폼이 메시징 제공자와의 연결을 중개합니다. + + +이 섹션의 나머지 내용과 달리 Channels는 **셀프 호스팅되지 않습니다**. Channels는 **CopilotKit Intelligence**를 통해 실행되며, 이는 설계상 Channels에 필수적인 서비스입니다(무료 티어 제공). Intelligence는 플랫폼 연결과 자격 증명을 보관하고, 각 플랫폼 이벤트를 수신하며, 해당 턴을 여러분의 channel 프로세스로 전달합니다. 여러분의 프로세스는 에이전트를 실행하고 응답을 다시 스트리밍합니다. Slack은 Intelligence 대시보드에서 한 번만 구성하면 되며, 플랫폼 자격 증명은 결코 여러분의 프로세스로 들어오지 않습니다. 에이전트, 도구, 상태는 온전히 여러분의 것으로 유지됩니다. + + +## 어떻게 맞물리는가 + +CrewAI 에이전트 서버에 관한 것은 아무것도 바뀌지 않습니다. Overview에서와 똑같이 AG-UI를 통해 Crew 또는 Flow를 계속 제공합니다. 여러분이 추가하는 것은 `@copilotkit/channels`로 빌드된 별도의 장시간 실행 Node 프로세스입니다. 이 프로세스는 `CopilotRuntime`에 channel을 등록하고, Intelligence에 연결하며, 메시지가 도착할 때마다 에이전트를 실행합니다. + +``` +Slack / Teams ──► CopilotKit Intelligence ──► channel process (Node) ──► CrewAI server (AG-UI) ──► Crew / Flow +``` + +channel 프로세스는 Intelligence 게이트웨이에 대한 지속적인 연결을 유지하므로, 장시간 실행되는 호스트가 필요합니다. 서버리스 요청 핸들러는 그 연결을 소유할 수 없습니다. CrewAI 서버는 동시에 Overview의 웹 프론트엔드를 계속 제공할 수 있습니다. 웹 앱과 channel은 하나의 AG-UI 엔드포인트에 연결된 두 개의 클라이언트일 뿐입니다. + +## 통합 가이드 + + + + + +Channels SDK는 모든 것이 포함되어 있습니다. 모든 플랫폼이 하나의 패키지로 제공되며, 플랫폼별로 설치할 어댑터가 없습니다. channel을 호스팅하는 런타임 및 CrewAI AG-UI 클라이언트와 함께 다음을 추가하세요: + +```bash +npm install @copilotkit/channels @copilotkit/runtime @ag-ui/crewai +``` + + + + + +[CopilotKit 대시보드](https://docs.copilotkit.ai/slack)에서 Channel을 생성하고 Slack을 연결하세요. Intelligence가 Slack 앱 생성 과정을 안내하고 그 자격 증명을 보관합니다. 그러면 여러분의 프로세스를 위한 두 개의 환경 변수가 남으며, 둘 다 대시보드에서 얻습니다: + +```bash +export INTELLIGENCE_API_KEY=... # authenticates the runtime with Intelligence (free tier available) +export INTELLIGENCE_CHANNEL_ID=... # the Channel ID, matched by createChannel({ name }) +``` + + + + + +`createChannel`은 channel을 선언하고 에이전트를 연결합니다. 각 대화가 자신만의 세션을 갖도록 에이전트를 스레드별 팩토리로 빌드하되, Overview가 웹 런타임에서 사용하는 것과 동일한 `CrewAIAgent`를 여러분의 AG-UI 엔드포인트를 가리키도록 설정하세요. `identifyUser: "platform"`은 Intelligence가 각 플랫폼 사용자를 안정적인 신원에 매핑하도록 합니다. + +```ts +// channel.ts +import { createChannel } from "@copilotkit/channels"; +import { CrewAIAgent } from "@ag-ui/crewai"; + +const channel = createChannel({ + name: process.env.INTELLIGENCE_CHANNEL_ID!, // must match the Channel ID in Intelligence + identifyUser: "platform", + // A fresh agent per conversation, pointed at your CrewAI AG-UI endpoint. + agent: (threadId) => { + const agent = new CrewAIAgent({ url: "http://localhost:8000/recipe" }); + agent.threadId = threadId; + return agent; + }, +}); + +// A mention subscribes the thread and runs the agent; afterwards every message +// in a subscribed thread runs it without needing another mention. +channel.onMention(async ({ thread }) => { + await thread.subscribe(); + await thread.runAgent(); +}); + +channel.onMessage(async ({ thread }) => { + if (await thread.isSubscribed()) await thread.runAgent(); +}); + +export { channel }; +``` + + + + + +Intelligence 게이트웨이와 여러분의 channel로 `CopilotRuntime`을 생성한 다음, `createCopilotNodeListener`로 이를 제공하세요. `agents` 맵은 비어 있는 상태로 둡니다. channel이 자신의 에이전트를 제공하기 때문입니다. 잘못된 구성이 시작 시 명확하게 실패하도록 channel이 준비될 때까지 기다리세요. + +```ts +// server.ts +import { createServer } from "node:http"; +import { CopilotRuntime, CopilotKitIntelligence } from "@copilotkit/runtime/v2"; +import { createCopilotNodeListener } from "@copilotkit/runtime/v2/node"; +import { channel } from "./channel"; + +const runtime = new CopilotRuntime({ + agents: {}, // the channel supplies its own agent; no web-facing agents needed + intelligence: new CopilotKitIntelligence({ + apiKey: process.env.INTELLIGENCE_API_KEY!, // free tier available + }), + channels: [channel], +}); + +const listener = createCopilotNodeListener({ runtime }); +await listener.channels?.ready({ timeoutMs: 15_000 }); + +createServer(listener).listen(3123, () => { + console.log("Channels runtime listening on port 3123"); +}); +``` + + + + + +CrewAI 에이전트 서버와 함께 시작하세요: + +```bash +uvicorn server:app --port 8000 # terminal 1 — CrewAI agent server +npx tsx server.ts # terminal 2 — Channels runtime +``` + +Slack 또는 Teams에서 봇을 멘션하면 Crew 또는 Flow를 실행하고 응답을 스레드로 다시 스트리밍합니다. 스레드는 구독된 상태로 유지되므로 후속 메시지는 또다시 멘션할 필요 없이 실행됩니다. + + + + + +## 이벤트 모델 + +channel은 핸들러로 플랫폼 이벤트에 반응하며, 각 핸들러는 몇 가지 메서드로 구동하는 `thread`를 받습니다: + +- **`channel.onMention`**은 사용자가 봇을 @-멘션할 때 발생합니다. `thread.subscribe()`를 호출해 스레드에 참여한 다음, `thread.runAgent()`로 멘션에 대해 CrewAI 에이전트를 실행하세요. +- **`channel.onMessage`**는 봇이 볼 수 있는 스레드의 모든 메시지에서 발생합니다. `thread.isSubscribed()`로 게이트를 걸어 에이전트가 참여한 곳에서만 응답하도록 한 다음, `thread.runAgent()`를 호출하세요. +- **`thread.runAgent()`**는 현재 턴에 대해 연결된 CrewAI 에이전트를 실행하고 그 출력을 channel로 다시 스트리밍합니다. 에이전트가 실행할 텍스트를 재정의하려면 `{ prompt }`를 전달하세요. + +여러분의 에이전트는 일반적인 AG-UI `RunAgentInput`을 받고 일반적인 AG-UI 이벤트를 방출합니다. 플랫폼 메커니즘은 channel 뒤에 머무르므로, 동일한 Crew 또는 Flow가 모든 플랫폼에서 변경 없이 실행됩니다. channel은 환영 인사, 인터럽트, 명령, 반응, 모달을 위한 핸들러도 노출합니다. 전체 표면은 [`Channel` 레퍼런스](https://docs.copilotkit.ai/reference/channels/classes/Channel)를 참조하세요. + +## 플랫폼 지원 + +관리형 Intelligence 경로는 현재 **Slack**과 **Microsoft Teams**를 지원합니다. 동일한 channel 코드가 양쪽에서 실행되며, `message.platform` / `thread.platform`이 원래의 출처를 보고합니다. 다른 플랫폼(Discord, Telegram, WhatsApp)은 관리형 경로가 아니라 개발자가 운영하는 **direct adapters**를 통해 연결됩니다. 여러분 자신의 프로세스가 플랫폼 자격 증명과 전송을 보유합니다. 현재 지원 플랫폼 목록과 플랫폼별 설정은 [CopilotKit Channels 문서](https://docs.copilotkit.ai/slack)를 확인하세요. + +## 관련 항목 + + + + Crew 또는 Flow를 AG-UI를 통해 제공하세요. 모든 channel이 그 위에 세워지는 토대입니다. + + + 실행 도중 사용자 승인이나 입력을 수집하기 위해 에이전트를 일시 중지하세요. + + diff --git a/docs/edge/ko/guides/frontend/overview.mdx b/docs/edge/ko/guides/frontend/overview.mdx new file mode 100644 index 000000000..7a5aa0dce --- /dev/null +++ b/docs/edge/ko/guides/frontend/overview.mdx @@ -0,0 +1,238 @@ +--- +title: Frontend Overview +description: CopilotKit과 AG-UI 프로토콜로 CrewAI 에이전트를 위한 인터랙티브 사용자 인터페이스를 구축하세요. +icon: browser +mode: "wide" +--- + +## 에이전트에 사용자 인터페이스를 부여하세요 + +CrewAI는 여러분의 에이전트를 실행합니다. [CopilotKit](https://copilotkit.ai)은 그 에이전트에 프론트엔드를 제공합니다. 이 둘을 함께 사용하면 사용자가 Crew 또는 Flow와 대화하고, 실시간으로 작동하는 모습을 지켜보고, 그 결정을 승인하며, 출력을 장황한 텍스트 대신 살아 있는 UI로 렌더링하여 볼 수 있는 애플리케이션을 구축할 수 있습니다. + +이 둘은 [AG-UI 프로토콜](https://docs.ag-ui.com)을 통해 연결됩니다. `ag-ui-crewai` 패키지는 어떤 Crew나 Flow든 AG-UI 엔드포인트로 노출합니다. CopilotKit의 React 훅과 컴포넌트가 그 엔드포인트를 소비합니다. 이를 통해 채팅 상자를 훨씬 뛰어넘는 경험이 열립니다: + + + + 에이전트 도구 호출과 상태를 여러분만의 React 컴포넌트로 렌더링하세요. + + + 실행 도중 사용자 승인이나 입력을 수집하기 위해 에이전트를 일시 중지하세요. + + + 에이전트 상태와 앱 UI를 양방향으로 동기화하세요. + + + 동일한 에이전트를 Slack, Discord 또는 Teams 봇으로 실행하세요. + + + +이 가이드는 Crew 또는 Flow를 Next.js 프론트엔드와 처음부터 끝까지 연동시킵니다. 이 섹션의 나머지 내용은 여기서 설정한 앱을 기반으로 합니다. + +## 아키텍처 + +세 가지 구성 요소가 있습니다: + +1. **CrewAI 에이전트 서버** — AG-UI를 통해 Crew 또는 Flow를 제공하는 Python 프로세스(FastAPI + `ag-ui-crewai`). +2. **CopilotKit 런타임** — 에이전트를 등록하고 요청을 프록시하는 Next.js 라우트. +3. **React 프론트엔드** — `` 프로바이더와 채팅 및 generative-UI 컴포넌트. + +``` +React app ──► CopilotKit runtime (/api/copilotkit) ──► CrewAI server (AG-UI) ──► Crew / Flow +``` + + +이 가이드는 **셀프 호스팅** 경로를 다룹니다. `ag-ui-crewai`로 CrewAI 에이전트 서버를 직접 실행하며, 관리형 서비스 없이 로컬에서 동작합니다. CopilotKit은 호스팅된 스레드와 인스펙터를 갖춘 **관리형** 경로(CopilotKit Cloud / Enterprise Intelligence)도 제공합니다. 그 방식을 원한다면 [CopilotKit CrewAI 퀵스타트](https://docs.copilotkit.ai/crewai-crews/quickstart)를 참조하세요. 이 섹션의 프론트엔드 코드는 어느 쪽이든 동일합니다. 에이전트를 호스팅하고 등록하는 방식만 다릅니다. + + + +CrewAI는 AG-UI 뒤에서 세 가지 형태로 실행됩니다: 일반 **Flows**(이 가이드 전반에서 사용), **[Conversational Flows](/edge/en/guides/frontend/conversational-flows)**(네이티브, 세션 인식, 턴 기반, 완전한 기능 동등성), 그리고 **Crews**(기본 채팅). 이 섹션의 프론트엔드는 이들 전반에서 동일합니다. 백엔드 작성과 등록만 다릅니다. + + +## 통합 가이드 + + + + + +통합 패키지를 CrewAI 프로젝트에 설치하세요: + +```bash +pip install ag-ui-crewai +``` + +FastAPI 앱에서 에이전트를 노출하세요. Flows는 `add_crewai_flow_fastapi_endpoint`를, Crews는 `add_crewai_crew_fastapi_endpoint`를 사용합니다. 원하는 만큼 등록할 수 있으며, 각각 자신의 경로에 배치됩니다. + + + +```python Flow +# server.py +from fastapi import FastAPI +from ag_ui_crewai.endpoint import add_crewai_flow_fastapi_endpoint +from my_agents.recipe_flow import RecipeFlow + +app = FastAPI(title="CrewAI Agent Server") + +add_crewai_flow_fastapi_endpoint( + app=app, + flow=RecipeFlow(), + path="/recipe", +) +``` + +```python Crew +# server.py +from fastapi import FastAPI +from ag_ui_crewai.endpoint import add_crewai_crew_fastapi_endpoint +from my_agents.research_crew import ResearchCrew + +app = FastAPI(title="CrewAI Agent Server") + +add_crewai_crew_fastapi_endpoint( + app=app, + crew=ResearchCrew().crew(), + path="/research", +) +``` + + + +실행하세요: + +```bash +uvicorn server:app --port 8000 +``` + + +서버를 시작하기 전에 LLM 제공자를 위한 환경 변수(예: `OPENAI_API_KEY`)를 설정하세요. + + + + + + +아직 프론트엔드가 없다면 하나를 스캐폴딩하세요: + +```bash +npx create-next-app@latest my-app +cd my-app +``` + +CopilotKit과 CrewAI AG-UI 클라이언트를 설치하세요: + +```bash +npm install @copilotkit/react-core @copilotkit/react-ui @copilotkit/runtime @ag-ui/crewai +``` + + + + + +CrewAI 에이전트를 CopilotKit 런타임에 등록하는 라우트를 생성하세요. 각 에이전트는 `CrewAIAgent`를 통해 Python 서버의 경로를 가리킵니다. + +```ts +// app/api/copilotkit/route.ts +import { + CopilotRuntime, + InMemoryAgentRunner, + createCopilotEndpoint, +} from "@copilotkit/runtime/v2"; +import { CrewAIAgent } from "@ag-ui/crewai"; +import { handle } from "hono/vercel"; + +const runtime = new CopilotRuntime({ + agents: { + recipe: new CrewAIAgent({ url: "http://localhost:8000/recipe" }), + }, + runner: new InMemoryAgentRunner(), +}); + +const app = createCopilotEndpoint({ + runtime, + basePath: "/api/copilotkit", +}); + +const handler = handle(app); +export const GET = handler; +export const POST = handler; +``` + + + + + +``을 런타임 라우트로 가리키고 등록한 에이전트의 이름을 지정하세요. + +```tsx +// app/page.tsx +"use client"; +import { CopilotKit } from "@copilotkit/react-core"; +import { CopilotSidebar } from "@copilotkit/react-core/v2"; +import "@copilotkit/react-core/v2/styles.css"; + +export default function Page() { + return ( + + + + + ); +} +``` + + + + + +두 프로세스를 모두 시작하고 앱을 여세요. 이제 사이드바에서 채팅하면 Crew 또는 Flow가 실행됩니다. + +```bash +uvicorn server:app --port 8000 # terminal 1 +npm run dev # terminal 2 +``` + + + + + +## 채팅 UI 옵션 + +CopilotKit은 서로 교체 가능한 세 가지 채팅 표면을 제공합니다. 컴포넌트만 바꾸면 되며, 연결 방식은 동일합니다. + + + +```tsx Sidebar +import { CopilotSidebar } from "@copilotkit/react-core/v2"; + + +``` + +```tsx Popup +import { CopilotPopup } from "@copilotkit/react-core/v2"; + + +``` + +```tsx Inline +import { CopilotChat } from "@copilotkit/react-core/v2"; + + +``` + + + +## 다음으로 갈 곳 + + + + 도구 호출과 에이전트 상태를 커스텀 컴포넌트로 렌더링하세요. + + + 에이전트가 브라우저에서 실행되는 함수를 호출하도록 하세요. + + + 에이전트 동작을 사용자 승인 뒤에 두세요. + + + 에이전트가 작동하는 동안 진행 중인 상태를 UI로 스트리밍하세요. + + diff --git a/docs/edge/pt-BR/guides/frontend/channels.mdx b/docs/edge/pt-BR/guides/frontend/channels.mdx new file mode 100644 index 000000000..0d802d229 --- /dev/null +++ b/docs/edge/pt-BR/guides/frontend/channels.mdx @@ -0,0 +1,156 @@ +--- +title: Channels +description: Execute o mesmo agente CrewAI como um bot do Slack ou Teams com o Channels SDK do CopilotKit e a plataforma gerenciada Intelligence. +icon: messages +mode: "wide" +--- + +## Encontre seus usuários onde eles já estão + +O agente CrewAI que você construiu na [Visão geral](/edge/pt-BR/guides/frontend/overview) não precisa viver por trás de um web app. O mesmo Crew ou Flow pode rodar como um bot dentro de uma plataforma de mensagens. Sem reconstruir, sem uma segunda cópia da lógica do seu agente: o agente permanece exposto pelo [protocolo AG-UI](https://docs.ag-ui.com), e um **channel** o aciona a partir do Slack ou do Microsoft Teams. + +O [Channels SDK](https://docs.copilotkit.ai/slack) do CopilotKit fornece esse channel. Você declara um `createChannel` em um pequeno runtime, aponta-o para o seu agente CrewAI, e a plataforma gerenciada **Intelligence** do CopilotKit intermedia a conexão com o provedor de mensagens. + + +Diferentemente do restante desta seção, Channels **não é self-hosted**. Ele roda através do **CopilotKit Intelligence** — uma superfície obrigatória para Channels, por design (há um plano gratuito disponível). O Intelligence detém a conexão com a plataforma e as credenciais, recebe cada evento da plataforma e entrega o turno ao processo do seu channel; seu processo executa o agente e transmite a resposta de volta. Você configura o Slack uma vez no painel do Intelligence, e as credenciais da plataforma nunca entram no seu processo. Seu agente, suas tools e seu estado continuam sendo seus. + + +## Como tudo se encaixa + +Nada muda no servidor do seu agente CrewAI. Ele continua servindo o seu Crew ou Flow por AG-UI exatamente como na Visão geral. O que você adiciona é um processo Node separado, de longa duração, construído com `@copilotkit/channels`: ele registra um channel no `CopilotRuntime`, conecta-se ao Intelligence e executa o seu agente sempre que chega uma mensagem. + +``` +Slack / Teams ──► CopilotKit Intelligence ──► channel process (Node) ──► CrewAI server (AG-UI) ──► Crew / Flow +``` + +O processo do channel mantém uma conexão persistente com o gateway do Intelligence, então ele precisa de um host de longa duração — um handler de requisições serverless não consegue ser dono dessa conexão. Seu servidor CrewAI pode continuar servindo o frontend web da Visão geral ao mesmo tempo: o web app e o channel são apenas dois clientes de um único endpoint AG-UI. + +## Guia de integração + + + + + +O Channels SDK vem com tudo incluído — cada plataforma é entregue no mesmo pacote, sem nenhum adaptador por plataforma para instalar. Adicione-o junto ao runtime que hospeda o channel e ao cliente AG-UI do CrewAI: + +```bash +npm install @copilotkit/channels @copilotkit/runtime @ag-ui/crewai +``` + + + + + +No [painel do CopilotKit](https://docs.copilotkit.ai/slack), crie um Channel e conecte o Slack — o Intelligence guia você na criação do app do Slack e detém suas credenciais. Isso deixa duas variáveis de ambiente para o seu processo, ambas vindas do painel: + +```bash +export INTELLIGENCE_API_KEY=... # authenticates the runtime with Intelligence (free tier available) +export INTELLIGENCE_CHANNEL_ID=... # the Channel ID, matched by createChannel({ name }) +``` + + + + + +`createChannel` declara o channel e anexa o seu agente. Construa o agente como uma factory por thread, para que cada conversa ganhe sua própria sessão, usando o mesmo `CrewAIAgent` que a Visão geral usa no runtime web, apontado para o seu endpoint AG-UI. `identifyUser: "platform"` permite que o Intelligence mapeie cada usuário da plataforma para uma identidade estável. + +```ts +// channel.ts +import { createChannel } from "@copilotkit/channels"; +import { CrewAIAgent } from "@ag-ui/crewai"; + +const channel = createChannel({ + name: process.env.INTELLIGENCE_CHANNEL_ID!, // must match the Channel ID in Intelligence + identifyUser: "platform", + // A fresh agent per conversation, pointed at your CrewAI AG-UI endpoint. + agent: (threadId) => { + const agent = new CrewAIAgent({ url: "http://localhost:8000/recipe" }); + agent.threadId = threadId; + return agent; + }, +}); + +// A mention subscribes the thread and runs the agent; afterwards every message +// in a subscribed thread runs it without needing another mention. +channel.onMention(async ({ thread }) => { + await thread.subscribe(); + await thread.runAgent(); +}); + +channel.onMessage(async ({ thread }) => { + if (await thread.isSubscribed()) await thread.runAgent(); +}); + +export { channel }; +``` + + + + + +Crie um `CopilotRuntime` com o gateway do Intelligence e o seu channel, e então sirva-o com `createCopilotNodeListener`. O mapa `agents` permanece vazio — o channel fornece seu próprio agente. Aguarde o channel ficar pronto, para que uma configuração quebrada faça a inicialização falhar de forma visível. + +```ts +// server.ts +import { createServer } from "node:http"; +import { CopilotRuntime, CopilotKitIntelligence } from "@copilotkit/runtime/v2"; +import { createCopilotNodeListener } from "@copilotkit/runtime/v2/node"; +import { channel } from "./channel"; + +const runtime = new CopilotRuntime({ + agents: {}, // the channel supplies its own agent; no web-facing agents needed + intelligence: new CopilotKitIntelligence({ + apiKey: process.env.INTELLIGENCE_API_KEY!, // free tier available + }), + channels: [channel], +}); + +const listener = createCopilotNodeListener({ runtime }); +await listener.channels?.ready({ timeoutMs: 15_000 }); + +createServer(listener).listen(3123, () => { + console.log("Channels runtime listening on port 3123"); +}); +``` + + + + + +Inicie-o junto ao servidor do seu agente CrewAI: + +```bash +uvicorn server:app --port 8000 # terminal 1 — CrewAI agent server +npx tsx server.ts # terminal 2 — Channels runtime +``` + +Mencione o bot no Slack ou no Teams e ele executa o seu Crew ou Flow, transmitindo a resposta de volta para a thread. A thread permanece inscrita, então mensagens de acompanhamento rodam sem outra menção. + + + + + +## O modelo de eventos + +Um channel reage a eventos da plataforma com handlers, e cada handler recebe uma `thread` que você aciona com alguns métodos: + +- **`channel.onMention`** dispara quando um usuário @-menciona o bot. Chame `thread.subscribe()` para entrar na thread, e então `thread.runAgent()` para executar o seu agente CrewAI na menção. +- **`channel.onMessage`** dispara em cada mensagem de uma thread que o bot consegue ver. Restrinja com `thread.isSubscribed()` para que o agente só responda onde tiver entrado, e então `thread.runAgent()`. +- **`thread.runAgent()`** executa o agente CrewAI anexado para o turno atual e transmite a saída dele de volta para o channel. Passe `{ prompt }` para sobrescrever o texto sobre o qual o agente roda. + +Seu agente recebe um `RunAgentInput` comum do AG-UI e emite eventos comuns do AG-UI; as mecânicas da plataforma ficam por trás do channel, então o mesmo Crew ou Flow roda sem alterações em todas as plataformas. O channel também expõe handlers para boas-vindas, interrupções, comandos, reações e modais — consulte a [referência de `Channel`](https://docs.copilotkit.ai/reference/channels/classes/Channel) para conhecer toda a superfície. + +## Suporte a plataformas + +O caminho gerenciado do Intelligence cobre **Slack** e **Microsoft Teams** hoje — o mesmo código de channel roda em qualquer um dos dois, e `message.platform` / `thread.platform` reportam a origem nativa. Outras plataformas (Discord, Telegram, WhatsApp) são alcançadas através de **adaptadores diretos** operados pelo desenvolvedor, em vez do caminho gerenciado — o seu próprio processo detém as credenciais da plataforma e o transporte. Consulte a [documentação de Channels do CopilotKit](https://docs.copilotkit.ai/slack) para a lista atual de plataformas e a configuração por plataforma. + +## Relacionados + + + + Sirva o seu Crew ou Flow por AG-UI — a base sobre a qual todo channel é construído. + + + Pause o agente para coletar aprovação ou input do usuário no meio da execução. + + diff --git a/docs/edge/pt-BR/guides/frontend/overview.mdx b/docs/edge/pt-BR/guides/frontend/overview.mdx new file mode 100644 index 000000000..a3ebf85fb --- /dev/null +++ b/docs/edge/pt-BR/guides/frontend/overview.mdx @@ -0,0 +1,238 @@ +--- +title: Frontend Overview +description: Construa interfaces de usuário interativas para seus agentes CrewAI com o CopilotKit e o protocolo AG-UI. +icon: browser +mode: "wide" +--- + +## Dê uma interface de usuário aos seus agentes + +O CrewAI executa seus agentes. O [CopilotKit](https://copilotkit.ai) dá a eles um frontend. Juntos, eles permitem que você construa aplicações em que os usuários conversam com um Crew ou Flow, o observam trabalhar em tempo real, aprovam suas decisões e veem sua saída renderizada como UI ao vivo, em vez de paredes de texto. + +Os dois se conectam através do [protocolo AG-UI](https://docs.ag-ui.com). O pacote `ag-ui-crewai` expõe qualquer Crew ou Flow como um endpoint AG-UI. Os hooks e componentes React do CopilotKit consomem esse endpoint. Isso desbloqueia experiências que vão muito além de uma caixa de chat: + + + + Renderize as chamadas de tool e o estado do agente como seus próprios componentes React. + + + Pause o agente para coletar aprovação ou input do usuário no meio da execução. + + + Mantenha o estado do agente e a UI do seu app em sincronia bidirecional. + + + Execute o mesmo agente como um bot do Slack, Discord ou Teams. + + + +Este guia coloca um Crew ou Flow conversando com um frontend Next.js de ponta a ponta. O restante da seção se apoia no app que você configura aqui. + +## Arquitetura + +Há três peças: + +1. **CrewAI agent server** — um processo Python que serve o seu Crew ou Flow por AG-UI (FastAPI + `ag-ui-crewai`). +2. **CopilotKit runtime** — uma rota Next.js que registra o seu agente e faz o proxy das requisições para ele. +3. **React frontend** — o provider `` mais os componentes de chat e de generative UI. + +``` +React app ──► CopilotKit runtime (/api/copilotkit) ──► CrewAI server (AG-UI) ──► Crew / Flow +``` + + +Este guia cobre o caminho **self-hosted**: você mesmo executa o servidor do agente CrewAI com `ag-ui-crewai`, e ele funciona localmente sem nenhum serviço gerenciado. O CopilotKit também oferece um caminho **gerenciado** (CopilotKit Cloud / Enterprise Intelligence) com threads hospedadas e um inspetor — consulte o [quickstart de CrewAI do CopilotKit](https://docs.copilotkit.ai/crewai-crews/quickstart) se preferir isso. O código do frontend nesta seção é o mesmo de qualquer forma; apenas como o agente é hospedado e registrado é que muda. + + + +O CrewAI roda por trás do AG-UI em três formatos: **Flows** comuns (usados ao longo destes guias), **[Conversational Flows](/edge/en/guides/frontend/conversational-flows)** (nativos, cientes de sessão, baseados em turnos, com paridade total de recursos) e **Crews** (chat básico). O frontend nesta seção é idêntico entre eles — apenas a autoria e o registro no backend é que diferem. + + +## Guia de integração + + + + + +Instale o pacote de integração no seu projeto CrewAI: + +```bash +pip install ag-ui-crewai +``` + +Exponha o seu agente a partir de um app FastAPI. Flows usam `add_crewai_flow_fastapi_endpoint`; Crews usam `add_crewai_crew_fastapi_endpoint`. Você pode registrar quantos quiser, cada um em seu próprio path. + + + +```python Flow +# server.py +from fastapi import FastAPI +from ag_ui_crewai.endpoint import add_crewai_flow_fastapi_endpoint +from my_agents.recipe_flow import RecipeFlow + +app = FastAPI(title="CrewAI Agent Server") + +add_crewai_flow_fastapi_endpoint( + app=app, + flow=RecipeFlow(), + path="/recipe", +) +``` + +```python Crew +# server.py +from fastapi import FastAPI +from ag_ui_crewai.endpoint import add_crewai_crew_fastapi_endpoint +from my_agents.research_crew import ResearchCrew + +app = FastAPI(title="CrewAI Agent Server") + +add_crewai_crew_fastapi_endpoint( + app=app, + crew=ResearchCrew().crew(), + path="/research", +) +``` + + + +Execute: + +```bash +uvicorn server:app --port 8000 +``` + + +Defina as variáveis de ambiente do seu provedor de LLM (por exemplo `OPENAI_API_KEY`) antes de iniciar o servidor. + + + + + + +Se você ainda não tem um frontend, gere um: + +```bash +npx create-next-app@latest my-app +cd my-app +``` + +Instale o CopilotKit e o cliente AG-UI do CrewAI: + +```bash +npm install @copilotkit/react-core @copilotkit/react-ui @copilotkit/runtime @ag-ui/crewai +``` + + + + + +Crie uma rota que registre o(s) seu(s) agente(s) CrewAI no runtime do CopilotKit. Cada agente aponta para um path no seu servidor Python via `CrewAIAgent`. + +```ts +// app/api/copilotkit/route.ts +import { + CopilotRuntime, + InMemoryAgentRunner, + createCopilotEndpoint, +} from "@copilotkit/runtime/v2"; +import { CrewAIAgent } from "@ag-ui/crewai"; +import { handle } from "hono/vercel"; + +const runtime = new CopilotRuntime({ + agents: { + recipe: new CrewAIAgent({ url: "http://localhost:8000/recipe" }), + }, + runner: new InMemoryAgentRunner(), +}); + +const app = createCopilotEndpoint({ + runtime, + basePath: "/api/copilotkit", +}); + +const handler = handle(app); +export const GET = handler; +export const POST = handler; +``` + + + + + +Aponte `` para a rota do runtime e nomeie o agente que você registrou. + +```tsx +// app/page.tsx +"use client"; +import { CopilotKit } from "@copilotkit/react-core"; +import { CopilotSidebar } from "@copilotkit/react-core/v2"; +import "@copilotkit/react-core/v2/styles.css"; + +export default function Page() { + return ( + + + + + ); +} +``` + + + + + +Inicie os dois processos e abra o app. Conversar na sidebar agora executa o seu Crew ou Flow. + +```bash +uvicorn server:app --port 8000 # terminal 1 +npm run dev # terminal 2 +``` + + + + + +## Opções de UI de chat + +O CopilotKit entrega três superfícies de chat intercambiáveis. Troque o componente; a fiação é idêntica. + + + +```tsx Sidebar +import { CopilotSidebar } from "@copilotkit/react-core/v2"; + + +``` + +```tsx Popup +import { CopilotPopup } from "@copilotkit/react-core/v2"; + + +``` + +```tsx Inline +import { CopilotChat } from "@copilotkit/react-core/v2"; + + +``` + + + +## Para onde ir em seguida + + + + Renderize chamadas de tool e o estado do agente como componentes personalizados. + + + Permita que o agente chame funções que rodam no navegador. + + + Restrinja ações do agente por trás da aprovação do usuário. + + + Transmita o estado em andamento para a UI enquanto o agente trabalha. + + diff --git a/docs/v1.15.16/en/guides/frontend/channels.mdx b/docs/v1.15.16/en/guides/frontend/channels.mdx index e62e6db96..6ff9b1516 100644 --- a/docs/v1.15.16/en/guides/frontend/channels.mdx +++ b/docs/v1.15.16/en/guides/frontend/channels.mdx @@ -1,117 +1,148 @@ --- title: Channels -description: Run the same CrewAI agent as a chat bot on Slack and Discord with the CopilotKit Channels SDK. -icon: slack +description: Run the same CrewAI agent as a Slack or Teams bot with the CopilotKit Channels SDK and managed Intelligence platform. +icon: messages mode: "wide" --- ## Meet your users where they already are -The CrewAI agent you built in the [Overview](/edge/en/guides/frontend/overview) does not have to live behind a web app. The same Crew or Flow can run as a bot inside a messaging platform. No rebuild, no second copy of your agent logic: the agent stays exposed over the [AG-UI protocol](https://docs.ag-ui.com), and a bot process drives it. +The CrewAI agent you built in the [Overview](/edge/en/guides/frontend/overview) does not have to live behind a web app. The same Crew or Flow can run as a bot inside a messaging platform. No rebuild, no second copy of your agent logic: the agent stays exposed over the [AG-UI protocol](https://docs.ag-ui.com), and a **channel** drives it from Slack or Microsoft Teams. -CopilotKit's [Channels SDK](https://docs.copilotkit.ai/reference/channels) provides that bot process. It ships a platform-agnostic engine plus per-platform adapters. +CopilotKit's [Channels SDK](https://docs.copilotkit.ai/slack) provides that channel. You declare a `createChannel` in a small runtime, point it at your CrewAI agent, and CopilotKit's managed **Intelligence** platform brokers the connection to the messaging provider. + + +Unlike the rest of this section, Channels is **not self-hosted**. It runs through **CopilotKit Intelligence** — a required surface for Channels, by design (a free tier is available). Intelligence holds the platform connection and credentials, receives each platform event, and delivers the turn to your channel process; your process runs the agent and streams the reply back. You configure Slack once in the Intelligence dashboard, and platform credentials never enter your process. Your agent, tools, and state stay yours. + ## How it fits together -Nothing about your agent server changes. It keeps serving your Crew or Flow over AG-UI exactly as in the Overview. What you add is a separate **bot process**: it connects to a platform adapter, listens for messages, and runs your agent when it is messaged. The reply streams back into the channel. +Nothing about your CrewAI agent server changes. It keeps serving your Crew or Flow over AG-UI exactly as in the Overview. What you add is a separate long-running Node process built with `@copilotkit/channels`: it registers a channel on the `CopilotRuntime`, connects to Intelligence, and runs your agent whenever a message arrives. ``` -Slack / Discord ──► Channels bot process ──► CrewAI server (AG-UI) ──► Crew / Flow +Slack / Teams ──► CopilotKit Intelligence ──► channel process (Node) ──► CrewAI server (AG-UI) ──► Crew / Flow ``` -Your agent server can keep serving the web frontend from the Overview at the same time. The web app and the bot are just two clients of one AG-UI endpoint. +The channel process holds a persistent connection to the Intelligence gateway, so it needs a long-running host — a serverless request handler cannot own that connection. Your CrewAI server can keep serving the web frontend from the Overview at the same time: the web app and the channel are just two clients of one AG-UI endpoint. -## Slack +## Integration guide +The Channels SDK is batteries-included — every platform ships in the one package, with no per-platform adapter to install. Add it alongside the runtime that hosts the channel and the CrewAI AG-UI client: + ```bash -npm install @copilotkit/channels @copilotkit/channels-slack @ag-ui/crewai +npm install @copilotkit/channels @copilotkit/runtime @ag-ui/crewai ``` - + -Create an app in the Slack API dashboard for your workspace, enable Socket Mode, and grant it the message and event scopes it needs to read and post in channels. Then expose its tokens to the bot process: +In the [CopilotKit dashboard](https://docs.copilotkit.ai/slack), create a Channel and connect Slack — Intelligence walks you through creating the Slack app and holds its credentials. That leaves two environment variables for your process, both from the dashboard: ```bash -export SLACK_BOT_TOKEN=xoxb-... # bot user token -export SLACK_APP_TOKEN=xapp-... # app-level token (Socket Mode) +export INTELLIGENCE_API_KEY=... # authenticates the runtime with Intelligence (free tier available) +export INTELLIGENCE_CHANNEL_ID=... # the Channel ID, matched by createChannel({ name }) ``` - + -`createBot` wires a Slack adapter to your agent. The `agent` factory returns a `CrewAIAgent` pointed at the AG-UI path your server exposes (the same URL you registered in the runtime in the Overview). +`createChannel` declares the channel and attaches your agent. Build the agent as a per-thread factory so each conversation gets its own session, using the same `CrewAIAgent` the Overview uses in the web runtime, pointed at your AG-UI endpoint. `identifyUser: "platform"` lets Intelligence map each platform user to a stable identity. ```ts -// bot.ts -import { createBot } from "@copilotkit/channels"; -import { slack, defaultSlackTools, defaultSlackContext } from "@copilotkit/channels-slack"; +// channel.ts +import { createChannel } from "@copilotkit/channels"; import { CrewAIAgent } from "@ag-ui/crewai"; -const bot = createBot({ - adapters: [ - slack({ - botToken: process.env.SLACK_BOT_TOKEN!, // xoxb-… - appToken: process.env.SLACK_APP_TOKEN!, // xapp-… (Socket Mode) - }), - ], - agent: (threadId) => new CrewAIAgent({ url: "http://localhost:8000/recipe" }), - tools: [...defaultSlackTools], - context: [...defaultSlackContext], +const channel = createChannel({ + name: process.env.INTELLIGENCE_CHANNEL_ID!, // must match the Channel ID in Intelligence + identifyUser: "platform", + // A fresh agent per conversation, pointed at your CrewAI AG-UI endpoint. + agent: (threadId) => { + const agent = new CrewAIAgent({ url: "http://localhost:8000/recipe" }); + agent.threadId = threadId; + return agent; + }, }); -bot.start(); +// A mention subscribes the thread and runs the agent; afterwards every message +// in a subscribed thread runs it without needing another mention. +channel.onMention(async ({ thread }) => { + await thread.subscribe(); + await thread.runAgent(); +}); + +channel.onMessage(async ({ thread }) => { + if (await thread.isSubscribed()) await thread.runAgent(); +}); + +export { channel }; ``` - + -Start the bot process alongside your agent server: +Create a `CopilotRuntime` with the Intelligence gateway and your channel, then serve it with `createCopilotNodeListener`. The `agents` map stays empty — the channel supplies its own agent. Wait for the channel to be ready so a broken config fails startup loudly. + +```ts +// server.ts +import { createServer } from "node:http"; +import { CopilotRuntime, CopilotKitIntelligence } from "@copilotkit/runtime/v2"; +import { createCopilotNodeListener } from "@copilotkit/runtime/v2/node"; +import { channel } from "./channel"; + +const runtime = new CopilotRuntime({ + agents: {}, // the channel supplies its own agent; no web-facing agents needed + intelligence: new CopilotKitIntelligence({ + apiKey: process.env.INTELLIGENCE_API_KEY!, // free tier available + }), + channels: [channel], +}); + +const listener = createCopilotNodeListener({ runtime }); +await listener.channels?.ready({ timeoutMs: 15_000 }); + +createServer(listener).listen(3123, () => { + console.log("Channels runtime listening on port 3123"); +}); +``` + + + + + +Start it alongside your CrewAI agent server: ```bash uvicorn server:app --port 8000 # terminal 1 — CrewAI agent server -node bot.ts # terminal 2 — Slack bot +npx tsx server.ts # terminal 2 — Channels runtime ``` -Message the bot in Slack and it runs your Crew or Flow, streaming the reply back into the thread. +Mention the bot in Slack or Teams and it runs your Crew or Flow, streaming the reply back into the thread. The thread stays subscribed, so follow-up messages run without another mention. - -Slack app scopes, Socket Mode setup, and the full adapter options are maintained by CopilotKit. Follow the [Slack channel reference](https://docs.copilotkit.ai/reference/channels/slack) together with Slack's own app setup guide for the authoritative steps. - +## The event model -## Discord +A channel reacts to platform events with handlers, and each handler receives a `thread` you drive with a few methods: -Discord uses the same `createBot` engine with the Discord adapter from `@copilotkit/channels-discord`: +- **`channel.onMention`** fires when a user @-mentions the bot. Call `thread.subscribe()` to join the thread, then `thread.runAgent()` to run your CrewAI agent on the mention. +- **`channel.onMessage`** fires on every message in a thread the bot can see. Gate it with `thread.isSubscribed()` so the agent only responds where it has joined, then `thread.runAgent()`. +- **`thread.runAgent()`** runs the attached CrewAI agent for the current turn and streams its output back into the channel. Pass `{ prompt }` to override the text the agent runs on. -```ts -import { createBot } from "@copilotkit/channels"; -import { discord } from "@copilotkit/channels-discord"; -import { CrewAIAgent } from "@ag-ui/crewai"; - -const bot = createBot({ - adapters: [discord({ token: process.env.DISCORD_BOT_TOKEN! })], - agent: (threadId) => new CrewAIAgent({ url: "http://localhost:8000/recipe" }), -}); - -bot.start(); -``` - -See the [Discord channel reference](https://docs.copilotkit.ai/reference/channels/discord) for the exact adapter options and bot setup. +Your agent receives an ordinary AG-UI `RunAgentInput` and emits ordinary AG-UI events; the platform mechanics stay behind the channel, so the same Crew or Flow runs unchanged across every platform. The channel also exposes handlers for welcomes, interrupts, commands, reactions, and modals — see the [`Channel` reference](https://docs.copilotkit.ai/reference/channels/classes/Channel) for the full surface. ## Platform support -Slack and Discord have official Channels adapters (`@copilotkit/channels-slack`, `@copilotkit/channels-discord`). Microsoft Teams is available through CopilotKit's managed offering (currently waitlisted). Check the [Channels reference](https://docs.copilotkit.ai/reference/channels) for the current list before promising a platform. +The managed Intelligence path covers **Slack** and **Microsoft Teams** today — the same channel code runs on either, and `message.platform` / `thread.platform` report the native origin. Other messaging platforms connect the same managed way, with your channel code unchanged. Check the [CopilotKit Channels documentation](https://docs.copilotkit.ai/slack) for the current platform list and per-platform setup. ## Related diff --git a/docs/v1.15.16/en/guides/frontend/overview.mdx b/docs/v1.15.16/en/guides/frontend/overview.mdx index 123f03213..7b858c161 100644 --- a/docs/v1.15.16/en/guides/frontend/overview.mdx +++ b/docs/v1.15.16/en/guides/frontend/overview.mdx @@ -21,7 +21,7 @@ The two connect through the [AG-UI protocol](https://docs.ag-ui.com). The `ag-ui Keep agent state and your app UI in two-way sync. - + Run the same agent as a Slack, Discord, or Teams bot.