# Integrate Cedar-OS with Mastra
[EN] Source: https://mastra.ai/docs/frameworks/agentic-uis/cedar-os

Cedar-OS is an open-source agentic UI framework designed specifically for building the most ambitious AI-native applications. Cedar was built with Mastra in mind.

## Should you use Cedar?

There are a few pillars Cedar cares about strongly that you can read more about [here](https://docs.cedarcopilot.com/introduction/philosophy):

#### 1. Developer experience

- **Every single component is downloaded shadcn-style** – You own all the code and can style it however you want
- **Works out of the box** – Just drop in the chat component, and it'll work
- **Fully extensible** - Built on a [Zustand store architecture](https://docs.cedarcopilot.com/introduction/architecture) that you can customize completely. Every single internal function can be overridden in one line.

#### 2. Enabling truly AI-native applications

For the first time in history, products can come to life. Cedar is aimed at helping you build something with life.

- **[Spells](https://docs.cedarcopilot.com/spells/spells#what-are-spells)** - Users can trigger AI from keyboard shortcuts, mouse events, text selection, and other components
- **[State Diff Management](https://docs.cedarcopilot.com/state-diff/using-state-diff)** - Give users control over accepting/rejecting agent outputs
- **[Voice Integration](https://docs.cedarcopilot.com/voice/voice-integration)** - Let users control your app with their voice

## Quick Start

<Steps>

<StepItem>

Run Cedar's CLI command:

```bash
npx cedar-os-cli plant-seed
```

If starting from scratch, select the **Mastra starter** template for a complete setup with both frontend and backend in a monorepo

If you already have a Mastra backend, use the **blank frontend cedar repo** option instead. This will give you the option to download components and download all dependencies for Cedar. It is recommended to download at least one of the chat components to get started.

</StepItem>

<StepItem>

Wrap your application with the CedarCopilot provider to connect to your Mastra backend:

```tsx
import { CedarCopilot } from "cedar-os";

function App() {
  return (
    <CedarCopilot
      llmProvider={{
        provider: "mastra",
        baseURL: "http://localhost:4111", // default dev port for Mastra
        apiKey: process.env.NEXT_PUBLIC_MASTRA_API_KEY, // optional — only for backend auth
      }}
    >
      <YourApp />
    </CedarCopilot>
  );
}
```

</StepItem>

<StepItem>

Configure your Mastra backend to work with Cedar by following the [Mastra Configuration Options](https://docs.cedarcopilot.com/agent-backend-connection/agent-backend-connection#mastra-configuration-options).

[Register API routes](https://mastra.ai/en/examples/deployment/custom-api-route) in your Mastra server (or NextJS serverless routes if in a monorepo):

```ts mastra/src/index.ts
import { registerApiRoute } from "@mastra/core/server";

// POST /chat
// The chat's non-streaming default endpoint
registerApiRoute("/chat", {
  method: "POST",
  // …validate input w/ zod
  handler: async (c) => {
    /* your agent.generate() logic */
  },
});

// POST /chat/stream (SSE)
// The chat's streaming default endpoint
registerApiRoute("/chat/stream", {
  method: "POST",
  handler: async (c) => {
    /* stream agent output in SSE format */
  },
});
```

</StepItem>

<StepItem>

Drop Cedar components into your frontend – see [Chat Overview](https://docs.cedarcopilot.com/chat/chat-overview).

Your backend and frontend are now linked! You're ready to start building AI-native experiences with your Mastra agents.

</StepItem>

</Steps>

## More information

- Check out the [detailed Mastra integration guide](https://docs.cedarcopilot.com/agent-backend-connection/mastra#extending-mastra) for more configuration options (or for manual installation instructions if something goes wrong)
- Explore Mastra-specific optimizations and features Cedar has built
  - **Seamless event streaming** - Automatic rendering of [Mastra streamed events](https://docs.cedarcopilot.com/chat/custom-message-rendering#mastra-event-renderer)
  - **Voice endpoint support** - Built-in [voice backend integration](https://docs.cedarcopilot.com/voice/agentic-backend#endpoint-configuration)
  - **End-to-End type safety** - [Types](https://docs.cedarcopilot.com/type-safety/typing-agent-requests) for communicating between your app and Mastra backend
- [Join the Discord!](https://discord.gg/4AWawRjNdZ) The Cedar team is excited to have you :)


---
title: "Integrate CopilotKit with Mastra | Frameworks"
description: "Learn how Mastra leverages the CopilotKit's AGUI library and how you can leverage it to build user experiences"
---

import Tabs from "@theme/Tabs";
import TabItem from "@theme/TabItem";
import Steps from "@site/src/components/Steps";
import StepItem from "@site/src/components/StepItem";