Building agentic copilots with CopilotKit and Mastra

Mastra is an agentic backend: it provides you the primitives like agents and workflows, to create specialized agents that can react.

But every backend needs a great agentic frontend.

One of the frontends we recommend is CopilotKit. CopilotKit provides interactive React components that hook into the Mastra streaming protocol and let you customize the user experience.

It gives users a way to collaborate with agents in real time, inside the product itself. They also are behind the emerging AG-UI standard (Agent–User Interaction protocol) for how agentic backends should interact with agentic frontends.

Let’s get started!

How to get started

The fastest way to try Mastra + CopilotKit together is with our starter template.

Just run:

 1npx create-ag-ui-app@latest --mastra
 2

This builds out a full app, with Mastra agents on the backend, CopilotKit + AG-UI on the frontend, in less than two minutes. From there it’s easy to customize your agents (and eventually deploy them!)

Check out the AG-UI Canvas with CopilotKit + Mastra: https://go.copilotkit.ai/ag-ui-canvas-mastra

Watch the full tutorial here.

And try the starter template today to build your first interactive agentic app.