showcase/shell-docs/src/content/snippets/copilot-runtime.mdx
The Copilot Runtime is the backend layer that connects your frontend application to your AI agents. It's set up during the quickstart and is the recommended way to use CopilotKit.
The runtime is a lightweight server endpoint that you add to your backend. Here's a minimal example using Next.js:
import {
CopilotRuntime,
ExperimentalEmptyAdapter,
copilotRuntimeNextJSAppRouterEndpoint,
} from "@copilotkit/runtime";
import { NextRequest } from "next/server";
const serviceAdapter = new ExperimentalEmptyAdapter();
const runtime = new CopilotRuntime({
agents: {
// your agents go here
},
});
export const POST = async (req: NextRequest) => {
const { handleRequest } = copilotRuntimeNextJSAppRouterEndpoint({
runtime,
serviceAdapter,
endpoint: "/api/copilotkit",
});
return handleRequest(req);
};
Then point your frontend at the endpoint:
<FrontendOnly frontend="react"> ```tsx <CopilotKit runtimeUrl="/api/copilotkit"> <YourApp /> </CopilotKit> ``` </FrontendOnly> <FrontendOnly frontend="angular"> ```ts title="src/app/app.config.ts" import { provideCopilotKit } from "@copilotkit/angular";provideCopilotKit({ runtimeUrl: "/api/copilotkit", })
</FrontendOnly>
For setup with other backend frameworks (Express, NestJS, Node.js HTTP), see the [quickstart](/quickstart).
## The Default Agent
If you register an agent with the name `"default"`, CopilotKit's prebuilt UI components will use it automatically without any additional configuration on the frontend. This is useful when you have one primary agent and don't want to specify an `agentId` everywhere.
```ts title="app/api/copilotkit/route.ts"
const runtime = new CopilotRuntime({
agents: {
// Frontend APIs use this agent when no other agent id is selected.
default: new HttpAgent({ url: "https://my-agent.example.com" }),
},
});
When you register multiple agents, the "default" agent powers the chat unless a specific agent is selected. Other agents remain addressable through the frontend agent API.
The runtime runs on your server, which means agent communication stays server-side. This gives you a trusted environment to enforce authentication, validate requests, and keep API keys secure. When you use the runtime, safe defaults are put in place so your agent endpoints are not exposed to unauthenticated access.
The AG-UI protocol supports a middleware layer (agent.use) for logging, guardrails, request transformation, and more. Because the runtime runs server-side, this middleware executes in a trusted environment where it cannot be tampered with by the client.
When you register multiple agents with the runtime, it handles discovery and routing automatically. Your frontend doesn't need to know the details of where each agent lives or how to reach it.
Features like threads and the inspector are provided through the runtime and the Enterprise Intelligence Platform. These give you conversation persistence and debugging capabilities out of the box.
The runtime supports two first-class middleware options you can enable directly on CopilotRuntime without calling .use() on each agent manually.
Pass a2ui: {} to automatically apply A2UIMiddleware to all registered agents:
const runtime = new CopilotRuntime({
agents: { default: myAgent },
a2ui: {}, // enables A2UI rendering for all agents
});
To scope it to specific agents only, pass an agents list:
a2ui: {
agents: ["my-agent"];
}
On the frontend, the A2UI renderer activates automatically. Configure a2ui
only when you want to override its defaults:
Pass mcpApps to configure MCP servers for all agents from a single place:
const runtime = new CopilotRuntime({
agents: { default: myAgent },
mcpApps: {
servers: [
{ type: "http", url: "http://localhost:3108/mcp", serverId: "my-server" },
],
},
});
Each server entry optionally accepts an agentId field to scope that server to a single agent. Without it, the server is available to all agents.
CopilotKit is built on the AG-UI protocol, which is an open standard. If you want to connect your frontend directly to an AG-UI-compatible agent without the runtime, pass the agent instance in your frontend configuration:
<FrontendOnly frontend="react"> ```tsx import { HttpAgent } from "@ag-ui/client";const myAgent = new HttpAgent({ url: "https://my-agent.example.com", });
<CopilotKit agents__unsafe_dev_only={{ "my-agent": myAgent }}> <YourApp /> </CopilotKit>;
</FrontendOnly>
<FrontendOnly frontend="angular">
```ts title="src/app/app.config.ts"
import { HttpAgent } from "@ag-ui/client";
import { provideCopilotKit } from "@copilotkit/angular";
provideCopilotKit({
selfManagedAgents: {
"my-agent": new HttpAgent({
url: "https://my-agent.example.com",
}),
},
})
There are important things to understand before going this route:
Authentication is your responsibility. When you use the Copilot Runtime, safe defaults are put in place so that your agent endpoints are not exposed to unauthenticated access. When you connect directly, it is entirely up to you to secure your agent endpoint and manage authentication.
Many ecosystem features won't work. The AG-UI protocol supports a middleware layer designed to run on the backend. Many features in the CopilotKit ecosystem depend on this server-side middleware. Without the runtime, these features — including threads and other capabilities — will not be available.
| With Runtime | Direct Connection | |
|---|---|---|
| Authentication | Safe defaults provided | You manage it |
| AG-UI Middleware | Runs server-side | Not available |
| Agent Routing | Automatic | Manual |
| Ecosystem Features | Full support | Limited |
| CopilotKit Support | Supported | Not supported |
| Setup | Requires a backend endpoint | Frontend-only |