Bring your Mastra agents
into any app
CopilotKit is an open-source framework that connects your app to Mastra agents. Give your agents chat, generative UI, human-in-the-loop, rich threads, automatic learning and more.
Mastra and CopilotKit running together, in the React frontend. Every demo below is the same integration with one capability turned on.
Build with Mastra
Mastra gives you agents, tools, workflows and working memory in TypeScript, and a server that runs them. What it does not give you is the surface. Somewhere for the conversation to happen, a way to show what the agent is doing while it works, and a moment for a person to step in. Each capability below builds on something Mastra already does.
Generative UI
Your agent keeps working memory across the session. CopilotKit renders that state as your own React components, so users watch the draft take shape instead of waiting for a final answer.
Read the docsHuman-in-the-loop
Mastra's own suspend() stays inside Mastra's execution model. A frontend tool registered with useHumanInTheLoop renders UI, waits for the user's answer, and hands it back to the agent as the tool result.
Read the docsShared state
Working memory lives on the server, scoped by resourceId. The useAgent hook mirrors it into your app and back, so a user edit and an agent write land in the same place.
Read the docsChat surfaces, headless UI, frontend tools and background tasks work with Mastra 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 Mastra service stays where it runs today. CopilotKit reaches it over HTTP through AG-UI and leaves it exactly where it is, so nothing inside Mastra changes.
import { CopilotRuntime, createCopilotRuntimeHandler, InMemoryAgentRunner } from "@copilotkit/runtime/v2";
import { MastraAgent } from "@ag-ui/mastra";
import { MastraClient } from "@mastra/client-js";
const mastraClient = new MastraClient({
baseUrl: process.env.MASTRA_BASE_URL ?? "http://127.0.0.1:4111",
});
const runtime = new CopilotRuntime({
agents: () =>
MastraAgent.getRemoteAgents({
mastraClient,
// Local demo only. Use your authenticated user ID in a multi-user app.
resourceId: "local-demo-user",
}),
runner: new InMemoryAgentRunner(),
});
const handler = createCopilotRuntimeHandler({
runtime,
basePath: "/api/copilotkit",
});
export const GET = handler;
export const POST = handler;
export const PATCH = handler;
export const DELETE = handler;