@mastra/mcp-docs-server 0.13.37 → 0.13.38

package/.docs/raw/frameworks/agentic-uis/assistant-ui.mdx

@@ -1,41 +1,41 @@
 ---
-title: Using with Assistant UI
+title: "Using with Assistant UI | Frameworks | Mastra Docs"
 description: "Learn how to integrate Assistant UI with Mastra"
 ---
 
-import { Callout, FileTree, Steps } from 'nextra/components'
+import Steps from "@site/src/components/Steps";
+import StepItem from "@site/src/components/StepItem";
 
 # Using with Assistant UI
 
 [Assistant UI](https://assistant-ui.com) is the TypeScript/React library for AI Chat.
 Built on shadcn/ui and Tailwind CSS, it enables developers to create beautiful, enterprise-grade chat experiences in minutes.
 
-<Callout type="info">
+:::info
+
 For a full-stack integration approach where Mastra runs directly in your Next.js API routes, see the [Full-Stack Integration Guide](https://www.assistant-ui.com/docs/runtimes/mastra/full-stack-integration) on Assistant UI's documentation site.
-</Callout>
+
+:::
 
 ## Integration Guide
 
 Run Mastra as a standalone server and connect your Next.js frontend (with Assistant UI) to its API endpoints.
 
 <Steps>
-### Create Standalone Mastra Server
+
+<StepItem>
 
 Set up your directory structure. A possible directory structure could look like this:
 
-<FileTree>
-    <FileTree.Folder name="project-root" defaultOpen>
-        <FileTree.Folder name="mastra-server" defaultOpen>
-            <FileTree.Folder name="src">
-                <FileTree.Folder name="mastra" />
-            </FileTree.Folder>
-            <FileTree.File name="package.json" />
-        </FileTree.Folder>
-        <FileTree.Folder name="nextjs-frontend">
-            <FileTree.File name="package.json" />
-        </FileTree.Folder>
-    </FileTree.Folder>
-</FileTree>
+```shell
+project-root
+├── mastra-server
+│   ├── src
+│   │   └── mastra
+│   └── package.json
+└── nextjs-frontend
+    └── package.json
+```
 
 Bootstrap your Mastra server:
 
@@ -48,28 +48,27 @@ Follow the prompts to create your server project.
 
 You now have a basic Mastra server project ready. You should have the following files and folders:
 
-<FileTree>
-    <FileTree.Folder name="src" defaultOpen>
-      <FileTree.Folder name="mastra" defaultOpen>
-        <FileTree.File name="index.ts" />
-        <FileTree.Folder name="agents" defaultOpen>
-          <FileTree.File name="weather-agent.ts" />
-        </FileTree.Folder>
-        <FileTree.Folder name="tools" defaultOpen>
-          <FileTree.File name="weather-tool.ts" />
-        </FileTree.Folder>
-        <FileTree.Folder name="workflows" defaultOpen>
-          <FileTree.File name="weather-workflow.ts" />
-        </FileTree.Folder>
-      </FileTree.Folder>
-    </FileTree.Folder>
-</FileTree>
-
-<Callout>
+```shell
+src
+└── mastra
+    ├── agents
+    │   └── weather-agent.ts
+    ├── tools
+    │   └── weather-tool.ts
+    ├── workflows
+    │   └── weather-workflow.ts
+    └── index.ts
+```
+
+:::note
+
 Ensure that you have set the appropriate environment variables for your LLM provider in the `.env` file.
-</Callout>
 
-### Run the Mastra Server
+:::
+
+</StepItem>
+
+<StepItem>
 
 Run the Mastra server using the following command:
 
@@ -79,7 +78,9 @@ npm run dev
 
 By default, the Mastra server will run on `http://localhost:4111`. Your `weatherAgent` should now be accessible via a POST request endpoint, typically `http://localhost:4111/api/agents/weatherAgent/stream`. Keep this server running for the next steps where we'll set up the Assistant UI frontend to connect to it.
 
-### Initialize Assistant UI
+</StepItem>
+
+<StepItem>
 
 Create a new `assistant-ui` project with the following command.
 
@@ -87,15 +88,21 @@ Create a new `assistant-ui` project with the following command.
 npx assistant-ui@latest create
 ```
 
-<Callout>For detailed setup instructions, including adding API keys, basic configuration, and manual setup steps, please refer to [assistant-ui's official documentation](https://assistant-ui.com/docs).</Callout>
+:::note
+
+For detailed setup instructions, including adding API keys, basic configuration, and manual setup steps, please refer to [assistant-ui's official documentation](https://assistant-ui.com/docs).
+
+:::
 
-### Configure Frontend API Endpoint
+</StepItem>
+
+<StepItem>
 
 The default Assistant UI setup configures the chat runtime to use a local API route (`/api/chat`) within the Next.js project. Since our Mastra agent is running on a separate server, we need to update the frontend to point to that server's endpoint.
 
 Find the `useChatRuntime` hook in the `assistant-ui` project, typically at `app/assistant.tsx` and change the `api` property to the full URL of your Mastra agent's stream endpoint:
 
-```typescript showLineNumbers copy filename="app/assistant.tsx" {6}
+```typescript showLineNumbers copy title="app/assistant.tsx" {6}
 import {
   useChatRuntime,
   AssistantChatTransport,
@@ -110,7 +117,9 @@ const runtime = useChatRuntime({
 
 Now, the Assistant UI frontend will send chat requests directly to your running Mastra server.
 
-### Run the Application
+</StepItem>
+
+<StepItem>
 
 You're ready to connect the pieces! Make sure both the Mastra server and the Assistant UI frontend are running. Start the Next.js development server:
 
@@ -120,6 +129,8 @@ npm run dev
 
 You should now be able to chat with your agent in the browser.
 
+</StepItem>
+
 </Steps>
 
 Congratulations! You have successfully integrated Mastra with Assistant UI using a separate server approach. Your Assistant UI frontend now communicates with a standalone Mastra agent server.

package/.docs/raw/frameworks/agentic-uis/cedar-os.mdx

@@ -1,10 +1,12 @@
 ---
-title: 'Cedar-OS Integration'
-description: 'Build AI-native frontends for your Mastra agents with Cedar-OS'
+title: "Integrate Cedar-OS with Mastra | Frameworks | Mastra Docs"
+description: "Build AI-native frontends for your Mastra agents with Cedar-OS"
 ---
 
-
-import { Tabs, Steps } from "nextra/components";
+import Tabs from "@theme/Tabs";
+import TabItem from "@theme/TabItem";
+import Steps from "@site/src/components/Steps";
+import StepItem from "@site/src/components/StepItem";
 
 # Integrate Cedar-OS with Mastra
 
@@ -15,88 +17,101 @@ Cedar-OS is an open-source agentic UI framework designed specifically for buildi
 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 
+- **[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>
-### Set up your project
+
+<StepItem>
 
 Run Cedar's CLI command:
-``` bash
+
+```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. 
+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.
 
-### Wrap your app with CedarCopilot
+</StepItem>
+
+<StepItem>
 
 Wrap your application with the CedarCopilot provider to connect to your Mastra backend:
 
 ```tsx
-import { CedarCopilot } from 'cedar-os';
+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>
-	);
+  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>
+  );
 }
 ```
 
-### Configure Mastra endpoints
+</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';
+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 */
-	},
+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 */
-	},
+registerApiRoute("/chat/stream", {
+  method: "POST",
+  handler: async (c) => {
+    /* stream agent output in SSE format */
+  },
 });
 ```
 
-### Add Cedar components
+</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.
-</Steps>
 
+</StepItem>
+
+</Steps>
 
 ## More information