docs/edge/en/guides/frontend/overview.mdx
CrewAI runs your agents. CopilotKit gives them a frontend. Together they let you build applications where users chat with a Crew or Flow, watch it work in real time, approve its decisions, and see its output rendered as live UI instead of walls of text.
The two connect through the AG-UI protocol. The ag-ui-crewai package exposes any Crew or Flow as an AG-UI endpoint. CopilotKit's React hooks and components consume that endpoint. This unlocks experiences that go well beyond a chat box:
This guide gets a Crew or Flow talking to a Next.js frontend end to end. The rest of the section builds on the app you set up here.
There are three pieces:
ag-ui-crewai).<CopilotKit> provider plus chat and generative-UI components.React app ──► CopilotKit runtime (/api/copilotkit) ──► CrewAI server (AG-UI) ──► Crew / Flow
Install the integration package into your CrewAI project:
pip install ag-ui-crewai
Expose your agent from a FastAPI app. Flows use add_crewai_flow_fastapi_endpoint; Crews use add_crewai_crew_fastapi_endpoint. You can register as many as you want, each on its own path.
# 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",
)
# 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",
)
Run it:
uvicorn server:app --port 8000
If you do not have a frontend yet, scaffold one:
npx create-next-app@latest my-app
cd my-app
Install CopilotKit and the CrewAI AG-UI client:
npm install @copilotkit/react-core @copilotkit/react-ui @copilotkit/runtime @ag-ui/crewai
Create a route that registers your CrewAI agent(s) with the CopilotKit runtime. Each agent points at a path on your Python server via CrewAIAgent.
// 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;
Point <CopilotKit> at the runtime route and name the agent you registered.
// 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 (
<CopilotKit runtimeUrl="/api/copilotkit" agent="recipe">
<YourApp />
<CopilotSidebar agentId="recipe" labels={{ modalHeaderTitle: "Assistant" }} />
</CopilotKit>
);
}
Start both processes and open the app. Chatting in the sidebar now runs your Crew or Flow.
uvicorn server:app --port 8000 # terminal 1
npm run dev # terminal 2
CopilotKit ships three interchangeable chat surfaces. Swap the component; the wiring is identical.
<CodeGroup>import { CopilotSidebar } from "@copilotkit/react-core/v2";
<CopilotSidebar agentId="recipe" />
import { CopilotPopup } from "@copilotkit/react-core/v2";
<CopilotPopup agentId="recipe" />
import { CopilotChat } from "@copilotkit/react-core/v2";
<CopilotChat agentId="recipe" />