CopilotKit + Open Agent Spec

Bring your Open Agent Spec agents
into any app

CopilotKit is an open-source framework that connects your app to Open Agent Spec agents. Give your agents chat, generative UI, human-in-the-loop, rich threads, automatic learning and more.

Quickstart
Loading Rich Threads…

Build with Open Agent Spec

Open Agent Spec describes an agent in a form other tools can run. What it does not describe is the surface your users work in. Each capability below builds on what a running spec already emits.

Generative UI

Your agent's tool calls arrive as they happen. CopilotKit renders each one as a React component in your own app, instead of leaving the user with a spinner.

Read the docs

Human-in-the-loop

A frontend tool registered with useHumanInTheLoop renders your own UI, waits for the user's answer, and hands it back to the agent as the tool result.

Read the docs

Shared state

Your agent carries state between turns. CopilotKit mirrors it into your app and back, so a user edit and an agent write land in the same place.

Read the docs

Chat surfaces, headless UI, frontend tools and multi-agent flows work with Open Agent Spec too. And more

Start building

Connect an existing agent or build a new one. Get a tailored setup prompt.

Where are you starting?

Tell us what you already have. We’ll tailor your setup.

Connect your agent

Your agent keeps running where it runs today, behind an AG-UI endpoint. CopilotKit reaches it over HTTP, so nothing inside the agent changes.

import {
  CopilotRuntime,
  createCopilotRuntimeHandler,
} from "@copilotkit/runtime/v2";
import { HttpAgent } from "@ag-ui/client";

const runtime = new CopilotRuntime({
  agents: {
    my_agent: new HttpAgent({ url: process.env.AGENT_URL! }),
  },
});

const handler = createCopilotRuntimeHandler({
  runtime,
  basePath: "/api/copilotkit",
});

export const GET = handler;
export const POST = handler;
Read the setup guide