Get early access
We’re excited to announce the integration with AG2 and CopilotKit, bringing together AG2’s multi-agent orchestration capabilities with CopilotKit’s React UI components. This integration creates a more seamless development experience for building AI-powered applications.
Building applications with intuitive interfaces that connect to AI backends presents several practical challenges:
By communicating over a common protocol and leveraging CopilotKit’s out-of-the-box components, developers can integrate AI capabilities into existing applications or create new ones in hours rather than weeks or months.
Let’s see how this integration works by building a travel planning assistant that helps users create personalized itineraries.
The AG2-CopilotKit integration leverages the AG UI protocol to standardize communication between frontend applications and AI agents.
The architecture consists of three main components:
The AG UI protocol creates a standardized way for these components to exchange messages, states, and actions, making integration more consistent across different frameworks and platforms.
The easiest way to get started is with the AG2-CopilotKit starter repository:
git clone https://github.com/ag2ai/ag2-copilotkit-starter.git
cd ag2-copilotkit-starterThis repository contains a complete example of an AG2-powered multi-agent system integrated with CopilotKit.
Before you begin, you’ll need:
The backend is built with FastAgency, a framework that simplifies creating and deploying AG2 agents. Let’s examine the key components and start with our simple_workflow.py file:
# Initialize the workflow
from fastagency import UI
from fastagency.adapters.awp import AWPAdapter
from fastagency.runtimes.ag2 import Workflow
wf = Workflow()This code initializes an AG2 workflow that will contain your agent logic. Next, we register the workflow:
# Register the workflow
@wf.register(name="simple_learning", description="A simple travel itinerary generator workflow")
def simple_workflow(ui: UI, params: dict[str, Any]) -> str:
# Present the initial message to the user
initial_message = ui.text_input(
sender="Workflow",
recipient="User",
prompt=INITIAL_MESSAGE,
)
# Configure and run the agents
# ...
return ui.process(response)This function:
Finally, we expose the workflow through FastAgency and FastAPI:
# Set up FastAPI with the AWP adapter
adapter = AWPAdapter(provider=wf)
app = FastAPI()
app.include_router(adapter.router)This creates an endpoint that speaks the AG UI protocol, making our agent accessible to frontend applications. For more details, check the FastAgency documentation.
To start the backend, run the following commands from the root directory:
💡 We recommend using a virtual environment for your project to keep your packages contained. See venv.
💡 Before running the below commands, make sure to set your OPENAI_API_KEY as an environment variable. This example uses gpt-4o-mini, but you can replace it with any other model supported by AG2.
# macOS / Linux
export OPENAI_API_KEY="YOUR_API_KEY"
# Windows
setx OPENAI_API_KEY "YOUR_API_KEY"
cd agent
pip install -r requirements.txt
uvicorn simple_workflow:app --port 8008 --reloadFrontend Setup: CopilotKit Integration
The frontend integration consists of three main parts:
API Route Configuration (ui/app/api/copilotkit/route.ts):
import { CopilotRuntime, CustomHttpAgent } from "@copilotkit/runtime";
import { copilotRuntimeHandler } from "@copilotkit/runtime/nextjs";
// Connect to the AG2 backend server
const BASE_URL = "http://127.0.0.1:8008";
const agenticChatAgent = new CustomHttpAgent({
url: `${BASE_URL}/fastagency/awp`,
});
const runtime = new CopilotRuntime({
agents: {
agenticChatAgent,
},
});
export const { GET, POST } = copilotRuntimeHandler(runtime);This code:- Creates a connection to our AG2 backend using the AG UI protocol- Sets up a CopilotKit runtime with our agent- Exports handlers for Next.js API routes
CopilotKit Provider (ui/app/layout.tsx):
import { CopilotKit } from "@copilotkit/react-core";
import "@copilotkit/react-ui/styles.css";
export default function RootLayout({ children }: { children: any }) {
return (
<html lang="en">
<body>
<CopilotKit
agent="agenticChatAgent"
runtimeUrl="/api/copilotkit"
showDevConsole={false}
>
{children}
</CopilotKit>
</body>
</html>
);
}This wraps our application with the CopilotKit provider, connecting it to our agent through the runtime.
Chat Interface (ui/app/page.tsx):
"use client";
import { CopilotSidebar } from "@copilotkit/react-ui";
export default function Home() {
return (
<main>
<YourMainContent />
<CopilotSidebar
defaultOpen={true}
labels={{
title: "Popup Assistant",
initial: "Hello! I'm here and ready to help.",
}}
/>
</main>
);
}This CopilotSidebar component is the key UI element that adds a chat interface powered by AG2 to your application. With just these few lines of code, you get a functional chat interface that communicates with your backend agents.
To start the frontend, run the following commands in a new terminal session:
cd ui
pnpm i
pnpm run devVoilà! 🚀. Your travel planning application is now live at http://localhost:3000
Open this URL in your browser and you'll see a sleek sidebar with your travel planning assistant ready to help.
Try asking it to plan a trip to Paris for 5 days or request a budget-friendly itinerary to Tokyo. The agent will guide you through collecting necessary information and then generate a personalized travel plan just for you.
This is the power of AG2 and CopilotKit working together—a sophisticated multi-agent system with a polished UI, all with minimal code!
The AG2-CopilotKit integration provides a solid foundation for building AI-powered applications. By combining AG2’s agent capabilities with CopilotKit’s UI components, you can focus more on creating unique experiences for your users.
Ready to explore more? Check out the CopilotKit documentation for more information.
Subscribe to our blog and get updates on CopilotKit in your inbox.
