@assistant-ui/mcp-docs-server 0.1.30 → 0.1.31

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (208) hide show
  1. package/.docs/organized/code-examples/waterfall.md +1 -1
  2. package/.docs/organized/code-examples/with-a2a.md +2 -2
  3. package/.docs/organized/code-examples/with-ag-ui.md +3 -3
  4. package/.docs/organized/code-examples/with-ai-sdk-v6.md +5 -5
  5. package/.docs/organized/code-examples/with-artifacts.md +5 -5
  6. package/.docs/organized/code-examples/with-assistant-transport.md +3 -3
  7. package/.docs/organized/code-examples/with-chain-of-thought.md +79 -50
  8. package/.docs/organized/code-examples/with-cloud-standalone.md +4 -4
  9. package/.docs/organized/code-examples/with-cloud.md +4 -4
  10. package/.docs/organized/code-examples/with-custom-thread-list.md +56 -11
  11. package/.docs/organized/code-examples/with-elevenlabs-conversational.md +7 -7
  12. package/.docs/organized/code-examples/with-elevenlabs-scribe.md +7 -7
  13. package/.docs/organized/code-examples/with-expo.md +16 -16
  14. package/.docs/organized/code-examples/with-external-store.md +2 -2
  15. package/.docs/organized/code-examples/with-ffmpeg.md +5 -5
  16. package/.docs/organized/code-examples/with-generative-ui.md +5 -5
  17. package/.docs/organized/code-examples/with-google-adk.md +4 -4
  18. package/.docs/organized/code-examples/with-heat-graph.md +1 -1
  19. package/.docs/organized/code-examples/with-interactables.md +5 -5
  20. package/.docs/organized/code-examples/with-langchain.md +3 -3
  21. package/.docs/organized/code-examples/with-langgraph.md +3 -3
  22. package/.docs/organized/code-examples/with-livekit.md +8 -8
  23. package/.docs/organized/code-examples/with-opencode.md +99 -54
  24. package/.docs/organized/code-examples/with-parent-id-grouping.md +4 -4
  25. package/.docs/organized/code-examples/with-react-hook-form.md +5 -5
  26. package/.docs/organized/code-examples/with-react-ink.md +1 -1
  27. package/.docs/organized/code-examples/with-react-router.md +8 -8
  28. package/.docs/organized/code-examples/with-store.md +1 -1
  29. package/.docs/organized/code-examples/with-tanstack.md +5 -5
  30. package/.docs/organized/code-examples/with-tap-runtime.md +2 -2
  31. package/.docs/raw/docs/(docs)/cli.mdx +2 -1
  32. package/.docs/raw/docs/(docs)/copilots/assistant-frame.mdx +1 -0
  33. package/.docs/raw/docs/(docs)/copilots/make-assistant-tool-ui.mdx +10 -3
  34. package/.docs/raw/docs/(docs)/copilots/make-assistant-tool.mdx +8 -3
  35. package/.docs/raw/docs/(docs)/copilots/make-assistant-visible.mdx +1 -0
  36. package/.docs/raw/docs/(docs)/copilots/model-context.mdx +1 -0
  37. package/.docs/raw/docs/(docs)/copilots/motivation.mdx +1 -0
  38. package/.docs/raw/docs/(docs)/copilots/use-assistant-instructions.mdx +1 -0
  39. package/.docs/raw/docs/(docs)/devtools.mdx +1 -0
  40. package/.docs/raw/docs/(docs)/index.mdx +1 -0
  41. package/.docs/raw/docs/(docs)/installation.mdx +1 -0
  42. package/.docs/raw/docs/(docs)/rtl.mdx +1 -0
  43. package/.docs/raw/docs/(reference)/api-reference/adapters/attachments.mdx +34 -0
  44. package/.docs/raw/docs/(reference)/api-reference/adapters/feedback-speech.mdx +41 -0
  45. package/.docs/raw/docs/(reference)/api-reference/adapters/index.mdx +26 -0
  46. package/.docs/raw/docs/(reference)/api-reference/adapters/persistence.mdx +34 -0
  47. package/.docs/raw/docs/(reference)/api-reference/adapters/runtime.mdx +31 -0
  48. package/.docs/raw/docs/(reference)/api-reference/context-providers/index.mdx +20 -0
  49. package/.docs/raw/docs/(reference)/api-reference/hooks/index.mdx +26 -0
  50. package/.docs/raw/docs/(reference)/api-reference/hooks/model-context.mdx +72 -0
  51. package/.docs/raw/docs/(reference)/api-reference/hooks/runtimes.mdx +41 -0
  52. package/.docs/raw/docs/(reference)/api-reference/hooks/state.mdx +48 -0
  53. package/.docs/raw/docs/(reference)/api-reference/hooks/utilities.mdx +30 -0
  54. package/.docs/raw/docs/(reference)/api-reference/integrations/index.mdx +23 -0
  55. package/.docs/raw/docs/(reference)/api-reference/overview.mdx +21 -0
  56. package/.docs/raw/docs/(reference)/api-reference/primitives/assistant-if.mdx +7 -0
  57. package/.docs/raw/docs/(reference)/api-reference/primitives/index.mdx +65 -0
  58. package/.docs/raw/docs/(reference)/api-reference/primitives/message.mdx +50 -6
  59. package/.docs/raw/docs/(reference)/api-reference/primitives/thread-list.mdx +15 -0
  60. package/.docs/raw/docs/(reference)/api-reference/primitives/thread.mdx +36 -1
  61. package/.docs/raw/docs/(reference)/api-reference/runtimes/index.mdx +38 -0
  62. package/.docs/raw/docs/(reference)/api-reference/runtimes/thread-list-runtime.mdx +5 -0
  63. package/.docs/raw/docs/(reference)/migrations/v0-14.mdx +144 -6
  64. package/.docs/raw/docs/cloud/ai-sdk-assistant-ui.mdx +230 -2
  65. package/.docs/raw/docs/cloud/ai-sdk.mdx +221 -3
  66. package/.docs/raw/docs/cloud/langgraph.mdx +274 -2
  67. package/.docs/raw/docs/{(docs)/guides → guides}/attachments.mdx +41 -36
  68. package/.docs/raw/docs/guides/branching.mdx +76 -0
  69. package/.docs/raw/docs/guides/chain-of-thought.mdx +166 -0
  70. package/.docs/raw/docs/{(docs)/guides → guides}/context-api.mdx +50 -22
  71. package/.docs/raw/docs/{(docs)/guides → guides}/dictation.mdx +2 -0
  72. package/.docs/raw/docs/guides/editing.mdx +102 -0
  73. package/.docs/raw/docs/guides/index.mdx +103 -0
  74. package/.docs/raw/docs/{(docs)/guides → guides}/interactables.mdx +49 -0
  75. package/.docs/raw/docs/{(docs)/guides → guides}/latex.mdx +51 -8
  76. package/.docs/raw/docs/{(docs)/guides → guides}/mentions.mdx +61 -86
  77. package/.docs/raw/docs/{(docs)/guides → guides}/message-timing.mdx +8 -2
  78. package/.docs/raw/docs/{(docs)/guides → guides}/multi-agent.mdx +64 -4
  79. package/.docs/raw/docs/{(docs)/guides → guides}/quoting.mdx +10 -17
  80. package/.docs/raw/docs/{(docs)/guides → guides}/slash-commands.mdx +103 -37
  81. package/.docs/raw/docs/guides/speech.mdx +156 -0
  82. package/.docs/raw/docs/{(docs)/guides → guides}/suggestions.mdx +21 -83
  83. package/.docs/raw/docs/{(docs)/guides → guides}/tool-ui.mdx +108 -36
  84. package/.docs/raw/docs/{(docs)/guides → guides}/tools.mdx +131 -35
  85. package/.docs/raw/docs/{(docs)/guides → guides}/voice.mdx +39 -0
  86. package/.docs/raw/docs/ink/index.mdx +1 -3
  87. package/.docs/raw/docs/ink/migration.mdx +1 -3
  88. package/.docs/raw/docs/ink/primitives.mdx +37 -1
  89. package/.docs/raw/docs/integrations/attachments/custom-adapter.mdx +520 -0
  90. package/.docs/raw/docs/integrations/auth/better-auth.mdx +191 -0
  91. package/.docs/raw/docs/integrations/auth/clerk.mdx +172 -0
  92. package/.docs/raw/docs/integrations/auth/next-auth.mdx +196 -0
  93. package/.docs/raw/docs/integrations/frameworks/ai-sdk.mdx +79 -0
  94. package/.docs/raw/docs/integrations/frameworks/mastra/full-stack.mdx +188 -0
  95. package/.docs/raw/docs/integrations/frameworks/mastra/overview.mdx +57 -0
  96. package/.docs/raw/docs/integrations/frameworks/mastra/separate-server.mdx +201 -0
  97. package/.docs/raw/docs/integrations/gateways/index.mdx +157 -0
  98. package/.docs/raw/docs/integrations/index.mdx +173 -0
  99. package/.docs/raw/docs/integrations/observability/helicone.mdx +130 -0
  100. package/.docs/raw/docs/integrations/observability/langfuse.mdx +156 -0
  101. package/.docs/raw/docs/integrations/observability/langsmith.mdx +146 -0
  102. package/.docs/raw/docs/integrations/persistence/custom-adapter.mdx +712 -0
  103. package/.docs/raw/docs/integrations/tools/mcp.mdx +267 -0
  104. package/.docs/raw/docs/primitives/action-bar.mdx +1 -0
  105. package/.docs/raw/docs/primitives/assistant-modal.mdx +1 -0
  106. package/.docs/raw/docs/primitives/attachment.mdx +1 -0
  107. package/.docs/raw/docs/primitives/branch-picker.mdx +1 -0
  108. package/.docs/raw/docs/primitives/chain-of-thought.mdx +90 -85
  109. package/.docs/raw/docs/primitives/composer.mdx +2 -1
  110. package/.docs/raw/docs/primitives/error.mdx +1 -0
  111. package/.docs/raw/docs/primitives/index.mdx +2 -1
  112. package/.docs/raw/docs/primitives/message.mdx +68 -5
  113. package/.docs/raw/docs/primitives/selection-toolbar.mdx +1 -0
  114. package/.docs/raw/docs/primitives/suggestion.mdx +1 -0
  115. package/.docs/raw/docs/primitives/thread-list.mdx +39 -0
  116. package/.docs/raw/docs/primitives/thread.mdx +16 -13
  117. package/.docs/raw/docs/react-native/index.mdx +1 -3
  118. package/.docs/raw/docs/react-native/migration.mdx +1 -3
  119. package/.docs/raw/docs/runtimes/a2a/client-and-hooks.mdx +396 -0
  120. package/.docs/raw/docs/runtimes/a2a/overview.mdx +60 -0
  121. package/.docs/raw/docs/runtimes/a2a/quickstart.mdx +216 -0
  122. package/.docs/raw/docs/runtimes/ag-ui/overview.mdx +70 -0
  123. package/.docs/raw/docs/runtimes/ag-ui/quickstart.mdx +243 -0
  124. package/.docs/raw/docs/runtimes/ag-ui/runtime-options.mdx +123 -0
  125. package/.docs/raw/docs/runtimes/ai-sdk/overview.mdx +52 -0
  126. package/.docs/raw/docs/runtimes/ai-sdk/v4-legacy.mdx +71 -131
  127. package/.docs/raw/docs/runtimes/ai-sdk/v5-legacy.mdx +69 -63
  128. package/.docs/raw/docs/runtimes/ai-sdk/v6.mdx +330 -123
  129. package/.docs/raw/docs/runtimes/concepts/adapters.mdx +265 -0
  130. package/.docs/raw/docs/runtimes/concepts/architecture.mdx +125 -0
  131. package/.docs/raw/docs/runtimes/concepts/stability.mdx +67 -0
  132. package/.docs/raw/docs/runtimes/concepts/threads.mdx +428 -0
  133. package/.docs/raw/docs/runtimes/custom/assistant-transport.mdx +703 -0
  134. package/.docs/raw/docs/runtimes/custom/data-stream.mdx +323 -0
  135. package/.docs/raw/docs/runtimes/custom/external-store.mdx +253 -1236
  136. package/.docs/raw/docs/runtimes/custom/local-runtime.mdx +746 -0
  137. package/.docs/raw/docs/runtimes/custom/overview.mdx +71 -0
  138. package/.docs/raw/docs/runtimes/google-adk/api.mdx +256 -0
  139. package/.docs/raw/docs/runtimes/google-adk/hooks.mdx +717 -0
  140. package/.docs/raw/docs/runtimes/google-adk/overview.mdx +69 -0
  141. package/.docs/raw/docs/runtimes/google-adk/quickstart.mdx +229 -0
  142. package/.docs/raw/docs/runtimes/langchain.mdx +533 -0
  143. package/.docs/raw/docs/runtimes/langgraph/generative-ui.mdx +305 -0
  144. package/.docs/raw/docs/runtimes/langgraph/interrupts.mdx +104 -0
  145. package/.docs/raw/docs/runtimes/langgraph/overview.mdx +84 -0
  146. package/.docs/raw/docs/runtimes/langgraph/quickstart.mdx +496 -0
  147. package/.docs/raw/docs/runtimes/langgraph/streaming.mdx +127 -0
  148. package/.docs/raw/docs/runtimes/langgraph/threads.mdx +113 -0
  149. package/.docs/raw/docs/runtimes/langgraph/tutorial/introduction.mdx +3 -3
  150. package/.docs/raw/docs/runtimes/langgraph/tutorial/part-1.mdx +0 -23
  151. package/.docs/raw/docs/runtimes/langgraph/tutorial/part-2.mdx +1 -1
  152. package/.docs/raw/docs/runtimes/opencode/hooks.mdx +191 -0
  153. package/.docs/raw/docs/runtimes/opencode/overview.mdx +48 -0
  154. package/.docs/raw/docs/runtimes/opencode/quickstart.mdx +119 -0
  155. package/.docs/raw/docs/runtimes/pick-a-runtime.mdx +71 -203
  156. package/.docs/raw/docs/ui/accordion.mdx +1 -0
  157. package/.docs/raw/docs/ui/assistant-modal.mdx +1 -0
  158. package/.docs/raw/docs/ui/assistant-sidebar.mdx +1 -0
  159. package/.docs/raw/docs/ui/attachment.mdx +1 -0
  160. package/.docs/raw/docs/ui/badge.mdx +1 -0
  161. package/.docs/raw/docs/ui/composer-trigger-popover.mdx +1 -0
  162. package/.docs/raw/docs/ui/context-display.mdx +1 -0
  163. package/.docs/raw/docs/ui/diff-viewer.mdx +1 -0
  164. package/.docs/raw/docs/ui/directive-text.mdx +1 -0
  165. package/.docs/raw/docs/ui/file.mdx +1 -0
  166. package/.docs/raw/docs/ui/image.mdx +1 -0
  167. package/.docs/raw/docs/ui/markdown.mdx +2 -14
  168. package/.docs/raw/docs/ui/mermaid.mdx +1 -0
  169. package/.docs/raw/docs/ui/message-timing.mdx +3 -2
  170. package/.docs/raw/docs/ui/model-selector.mdx +1 -0
  171. package/.docs/raw/docs/ui/part-grouping.mdx +325 -313
  172. package/.docs/raw/docs/ui/quote.mdx +1 -0
  173. package/.docs/raw/docs/ui/reasoning.mdx +66 -33
  174. package/.docs/raw/docs/ui/scrollbar.mdx +1 -0
  175. package/.docs/raw/docs/ui/select.mdx +1 -0
  176. package/.docs/raw/docs/ui/sources.mdx +1 -0
  177. package/.docs/raw/docs/ui/streamdown.mdx +1 -0
  178. package/.docs/raw/docs/ui/syntax-highlighting.mdx +1 -0
  179. package/.docs/raw/docs/ui/tabs.mdx +1 -0
  180. package/.docs/raw/docs/ui/thread-list.mdx +17 -0
  181. package/.docs/raw/docs/ui/thread.mdx +56 -1
  182. package/.docs/raw/docs/ui/tool-fallback.mdx +1 -0
  183. package/.docs/raw/docs/ui/tool-group.mdx +39 -11
  184. package/.docs/raw/docs/ui/voice.mdx +1 -0
  185. package/.docs/raw/docs/utilities/heat-graph.mdx +1 -0
  186. package/.docs/raw/docs/utilities/react-o11y.mdx +278 -0
  187. package/.docs/raw/docs/utilities/tw-shimmer.mdx +1 -0
  188. package/package.json +3 -3
  189. package/src/tools/tests/path-traversal.test.ts +1 -1
  190. package/.docs/raw/docs/(docs)/guides/branching.mdx +0 -65
  191. package/.docs/raw/docs/(docs)/guides/chain-of-thought.mdx +0 -164
  192. package/.docs/raw/docs/(docs)/guides/editing.mdx +0 -66
  193. package/.docs/raw/docs/(docs)/guides/speech.mdx +0 -38
  194. package/.docs/raw/docs/runtimes/a2a/index.mdx +0 -298
  195. package/.docs/raw/docs/runtimes/assistant-transport.mdx +0 -1033
  196. package/.docs/raw/docs/runtimes/custom/custom-thread-list.mdx +0 -314
  197. package/.docs/raw/docs/runtimes/custom/local.mdx +0 -1464
  198. package/.docs/raw/docs/runtimes/data-stream.mdx +0 -422
  199. package/.docs/raw/docs/runtimes/google-adk/index.mdx +0 -686
  200. package/.docs/raw/docs/runtimes/helicone.mdx +0 -61
  201. package/.docs/raw/docs/runtimes/langchain/comparison.mdx +0 -60
  202. package/.docs/raw/docs/runtimes/langchain/index.mdx +0 -210
  203. package/.docs/raw/docs/runtimes/langgraph/index.mdx +0 -699
  204. package/.docs/raw/docs/runtimes/langgraph/tutorial/index.mdx +0 -12
  205. package/.docs/raw/docs/runtimes/langserve.mdx +0 -116
  206. package/.docs/raw/docs/runtimes/mastra/full-stack-integration.mdx +0 -218
  207. package/.docs/raw/docs/runtimes/mastra/overview.mdx +0 -18
  208. package/.docs/raw/docs/runtimes/mastra/separate-server-integration.mdx +0 -217
@@ -1,116 +0,0 @@
1
- ---
2
- title: LangChain LangServe
3
- description: Connect to LangServe endpoints via Vercel AI SDK integration.
4
- ---
5
-
6
- <Callout type="warning">
7
- This integration has not been tested with AI SDK v6.
8
- </Callout>
9
-
10
- ## Overview
11
-
12
- Integration with a LangServe server via Vercel AI SDK.
13
-
14
- ## Getting Started
15
-
16
-
17
- <Steps>
18
- <Step>
19
- ### Create a Next.JS project
20
-
21
- ```sh
22
- npx create-next-app@latest my-app
23
- cd my-app
24
- ```
25
-
26
- </Step>
27
- <Step>
28
-
29
- ### Install `@langchain/core`, AI SDK and `@assistant-ui/react`
30
-
31
- <InstallCommand npm={["@assistant-ui/react", "@assistant-ui/react-ai-sdk", "ai", "@ai-sdk/react", "@langchain/core"]} />
32
-
33
- </Step>
34
- <Step>
35
-
36
- ### Setup a backend route under `/api/chat`
37
-
38
- ```tsx title="@/app/api/chat/route.ts"
39
- import { RemoteRunnable } from "@langchain/core/runnables/remote";
40
- import { toDataStreamResponse } from "@ai-sdk/langchain";
41
-
42
- export const maxDuration = 30;
43
-
44
- export async function POST(req: Request) {
45
- const { messages } = await req.json();
46
-
47
- // TODO replace with your own langserve URL
48
- const remoteChain = new RemoteRunnable({
49
- url: "<YOUR_LANGSERVE_URL>",
50
- });
51
-
52
- const stream = await remoteChain.stream({
53
- messages,
54
- });
55
-
56
- return toDataStreamResponse(stream);
57
- }
58
- ```
59
-
60
- </Step>
61
- <Step>
62
-
63
- ### Define a `MyRuntimeProvider` component
64
-
65
- ```tsx twoslash include MyRuntimeProvider title="@/app/MyRuntimeProvider.tsx"
66
- // @filename: /app/MyRuntimeProvider.tsx
67
- // ---cut---
68
- "use client";
69
-
70
- import { AssistantRuntimeProvider } from "@assistant-ui/react";
71
- import { useChatRuntime } from "@assistant-ui/react-ai-sdk";
72
-
73
- export function MyRuntimeProvider({
74
- children,
75
- }: Readonly<{
76
- children: React.ReactNode;
77
- }>) {
78
- const runtime = useChatRuntime();
79
-
80
- return (
81
- <AssistantRuntimeProvider runtime={runtime}>
82
- {children}
83
- </AssistantRuntimeProvider>
84
- );
85
- }
86
- ```
87
-
88
- </Step>
89
- <Step>
90
-
91
- ### Wrap your app in `MyRuntimeProvider`
92
-
93
- ```tsx twoslash title="@/app/layout.tsx"
94
- // @include: MyRuntimeProvider
95
- // @filename: /app/layout.tsx
96
- // ---cut---
97
- import type { ReactNode } from "react";
98
- import { MyRuntimeProvider } from "@/app/MyRuntimeProvider";
99
-
100
- export default function RootLayout({
101
- children,
102
- }: Readonly<{
103
- children: ReactNode;
104
- }>) {
105
- return (
106
- <html lang="en">
107
- <body>
108
- <MyRuntimeProvider>{children}</MyRuntimeProvider>
109
- </body>
110
- </html>
111
- );
112
- }
113
- ```
114
-
115
- </Step>
116
- </Steps>
@@ -1,218 +0,0 @@
1
- ---
2
- title: Full-Stack Integration
3
- description: Integrate Mastra directly into Next.js API routes.
4
- ---
5
-
6
-
7
- Integrate Mastra directly into your Next.js application's API routes. This approach keeps your backend and frontend code within the same project.
8
-
9
- <Steps>
10
- <Step>
11
-
12
- ### Initialize assistant-ui
13
-
14
- Start by setting up assistant-ui in your project. Run one of the following commands:
15
-
16
- ```sh title="New Project"
17
- npx assistant-ui@latest create
18
- ```
19
-
20
- ```sh title="Existing Project"
21
- npx assistant-ui@latest init
22
- ```
23
-
24
- This command installs necessary dependencies and creates basic configuration files, including a default chat API route.
25
-
26
- <Callout title="Need Help?">
27
- For detailed setup instructions, including adding API keys, basic
28
- configuration, and manual setup steps, please refer to the main [Getting
29
- Started guide](/docs).
30
- </Callout>
31
-
32
- </Step>
33
- <Step>
34
-
35
- ### Review Initial API Route
36
-
37
- The initialization command creates a basic API route at `app/api/chat/route.ts` (or `src/app/api/chat/route.ts`). It typically looks like this:
38
-
39
- ```typescript title="app/api/chat/route.ts"
40
- import { openai } from "@ai-sdk/openai";
41
- import { streamText } from "ai";
42
-
43
- // Allow streaming responses up to 30 seconds
44
- export const maxDuration = 30;
45
-
46
- export async function POST(req: Request) {
47
- const { messages } = await req.json();
48
-
49
- const result = streamText({
50
- model: openai("gpt-4o-mini"),
51
- messages,
52
- });
53
-
54
- return result.toUIMessageStreamResponse();
55
- }
56
- ```
57
-
58
- This default route uses the Vercel AI SDK directly with OpenAI. In the following steps, we will modify this route to integrate Mastra.
59
-
60
- </Step>
61
- <Step>
62
-
63
- ### Install Mastra Packages
64
-
65
- Add the `@mastra/core` package and its peer dependency `zod` (which you can use later inside tools for example). Also add `@mastra/ai-sdk` to convert Mastra's stream to an AI SDK-compatible format:
66
-
67
- <InstallCommand npm={["@mastra/core@latest", "@mastra/ai-sdk@latest", "zod@latest"]} />
68
-
69
- </Step>
70
- <Step>
71
-
72
- ### Configure Next.js
73
-
74
- To ensure Next.js correctly bundles your application when using Mastra directly in API routes, you need to configure `serverExternalPackages`.
75
-
76
- Update your `next.config.mjs` (or `next.config.js`) file to include `@mastra/*`:
77
-
78
- ```js title="next.config.mjs"
79
- /** @type {import('next').NextConfig} */
80
- const nextConfig = {
81
- serverExternalPackages: ["@mastra/*"],
82
- // ... other configurations
83
- };
84
-
85
- export default nextConfig;
86
- ```
87
-
88
- This tells Next.js to treat Mastra packages as external dependencies on the server-side.
89
-
90
- </Step>
91
- <Step>
92
-
93
- ### Create Mastra Files
94
-
95
- Set up the basic folder structure for your Mastra configuration. Create a `mastra` folder (e.g., in your `src` or root directory) with the following structure:
96
-
97
- ```txt title="Project Structure"
98
- /
99
- ├── mastra/
100
- │ ├── agents/
101
- │ │ └── chefAgent.ts
102
- │ └── index.ts
103
- └── ... (rest of your project)
104
- ```
105
-
106
- You can create these files and folders manually or use the following commands in your terminal:
107
-
108
- ```bash
109
- mkdir -p mastra/agents
110
- touch mastra/index.ts mastra/agents/chefAgent.ts
111
- ```
112
-
113
- These files will be used in the next steps to define your Mastra agent and configuration.
114
-
115
- </Step>
116
- <Step>
117
-
118
- ### Define the Agent
119
-
120
- Now, let's define the behavior of our AI agent. Open the `mastra/agents/chefAgent.ts` file and add the following code:
121
-
122
- ```typescript title="mastra/agents/chefAgent.ts"
123
- import { Agent } from "@mastra/core/agent";
124
-
125
- export const chefAgent = new Agent({
126
- name: "chef-agent",
127
- instructions:
128
- "You are Michel, a practical and experienced home chef. " +
129
- "You help people cook with whatever ingredients they have available.",
130
- model: "openai/gpt-4o-mini",
131
- });
132
- ```
133
-
134
- This code creates a new Mastra `Agent` named `chef-agent`.
135
-
136
- - `instructions`: Defines the agent's persona and primary goal.
137
- - `model`: Specifies the language model the agent will use (in this case, OpenAI's GPT-4o Mini via Mastra's model router).
138
-
139
- Make sure you have set up your OpenAI API key as described in the [Getting Started guide](/docs).
140
-
141
- </Step>
142
- <Step>
143
-
144
- ### Register the Agent
145
-
146
- Next, register the agent with your Mastra instance. Open the `mastra/index.ts` file and add the following code:
147
-
148
- ```typescript title="mastra/index.ts"
149
- import { Mastra } from "@mastra/core";
150
- import { chefAgent } from "./agents/chefAgent";
151
-
152
- export const mastra = new Mastra({
153
- agents: { chefAgent },
154
- });
155
- ```
156
-
157
- This code initializes Mastra and makes the `chefAgent` available for use in your application's API routes.
158
-
159
- </Step>
160
- <Step>
161
-
162
- ### Modify the API Route
163
-
164
- Now, update your API route (`app/api/chat/route.ts`) to use the Mastra agent you just configured. Replace the existing content with the following:
165
-
166
- ```typescript title="app/api/chat/route.ts"
167
- import { createUIMessageStreamResponse } from "ai";
168
- import { toAISdkFormat } from "@mastra/ai-sdk";
169
- import { mastra } from "@/mastra"; // Adjust the import path if necessary
170
-
171
- // Allow streaming responses up to 30 seconds
172
- export const maxDuration = 30;
173
-
174
- export async function POST(req: Request) {
175
- // Extract the messages from the request body
176
- const { messages } = await req.json();
177
-
178
- // Get the chefAgent instance from Mastra
179
- const agent = mastra.getAgent("chefAgent");
180
-
181
- // Stream the response using the agent
182
- const stream = await agent.stream(messages);
183
-
184
- // Create a Response that streams the UI message stream to the client
185
- return createUIMessageStreamResponse({
186
- stream: toAISdkFormat(stream, { from: "agent" }),
187
- });
188
- }
189
- ```
190
-
191
- Key changes:
192
-
193
- - We import the `mastra` instance created in `mastra/index.ts`. Make sure the import path (`@/mastra`) is correct for your project setup (you might need `~/mastra`, `../../../mastra`, etc., depending on your path aliases and project structure).
194
- - We retrieve the `chefAgent` using `mastra.getAgent("chefAgent")`.
195
- - Instead of calling the AI SDK's `streamText` directly, we call `agent.stream(messages)` to process the chat messages using the agent's configuration and model.
196
- - The result is still returned in a format compatible with assistant-ui using `createUIMessageStreamResponse()` and `toAISdkFormat()`.
197
-
198
- Your API route is now powered by Mastra!
199
-
200
- </Step>
201
- <Step>
202
-
203
- ### Run the Application
204
-
205
- You're all set! Start your Next.js development server:
206
-
207
- ```bash npm2yarn
208
- npm run dev
209
- ```
210
-
211
- Open your browser to `http://localhost:3000` (or the port specified in your terminal). You should now be able to interact with your `chefAgent` through the assistant-ui chat interface. Ask it for cooking advice based on ingredients you have!
212
-
213
- </Step>
214
- </Steps>
215
-
216
- Congratulations! You have successfully integrated Mastra into your Next.js application using the full-stack approach. Your assistant-ui frontend now communicates with a Mastra agent running in your Next.js backend API route.
217
-
218
- To explore more advanced Mastra features like memory, tools, workflows, and more, please refer to the [official Mastra documentation](https://mastra.ai/docs).
@@ -1,18 +0,0 @@
1
- ---
2
- title: Overview
3
- description: TypeScript agent framework for AI applications with tools and workflows.
4
- ---
5
-
6
- Mastra is an open-source TypeScript agent framework designed to provide the essential primitives for building AI applications. It enables developers to create AI agents with memory and tool-calling capabilities, implement deterministic LLM workflows, and leverage RAG for knowledge integration. With features like model routing, workflow graphs, and automated evals, Mastra provides a complete toolkit for developing, testing, and deploying AI applications.
7
-
8
- ## Integrating with Next.js and assistant-ui
9
-
10
- There are two primary ways to integrate Mastra into your Next.js project when using assistant-ui:
11
-
12
- 1. **Full-Stack Integration**: Integrate Mastra directly into your Next.js application's API routes. This approach keeps your backend and frontend code within the same project.
13
- [Learn how to set up Full-Stack Integration](./full-stack-integration)
14
-
15
- 2. **Separate Server Integration**: Run Mastra as a standalone server and connect your Next.js frontend to its API endpoints. This approach separates concerns and allows for independent scaling.
16
- [Learn how to set up Separate Server Integration](./separate-server-integration)
17
-
18
- Choose the guide that best fits your project architecture. Both methods allow seamless integration with the assistant-ui components.
@@ -1,217 +0,0 @@
1
- ---
2
- title: Separate Server Integration
3
- description: Run Mastra as a standalone server connected to your frontend.
4
- ---
5
-
6
-
7
- Run Mastra as a standalone server and connect your Next.js frontend (using assistant-ui) to its API endpoints. This approach separates your AI backend from your frontend application, allowing for independent development and scaling.
8
-
9
- <Steps>
10
-
11
- <Step>
12
-
13
- ### Create Mastra Server Project
14
-
15
- First, create a dedicated project for your Mastra server. Choose a directory separate from your Next.js/assistant-ui frontend project.
16
-
17
- Navigate to your chosen parent directory in the terminal and run the Mastra create command:
18
-
19
- ```bash
20
- npx create-mastra@latest
21
- ```
22
-
23
- This command will launch an interactive wizard to help you scaffold a new Mastra project, including prompting you for a project name and setting up basic configurations. Follow the prompts to create your server project. For more detailed setup instructions, refer to the [official Mastra installation guide](https://mastra.ai/docs/getting-started/installation).
24
-
25
- Once the setup is complete, navigate into your new Mastra project directory (the name you provided during the setup):
26
-
27
- ```bash
28
- cd your-mastra-server-directory # Replace with the actual directory name
29
- ```
30
-
31
- In the next steps you'll need to use the `@mastra/ai-sdk` package. Add it to your Mastra project:
32
-
33
- <InstallCommand npm={["@mastra/ai-sdk@latest"]} />
34
-
35
- You now have a basic Mastra server project ready.
36
-
37
- <Callout title="API Keys">
38
- Ensure you have configured your environment variables (e.g., `OPENAI_API_KEY`)
39
- within this Mastra server project, typically in a `.env.development` file, as
40
- required by the models you use. The `create-mastra` wizard might prompt you
41
- for some keys, but ensure all necessary keys for your chosen models are
42
- present.
43
- </Callout>
44
-
45
- </Step>
46
-
47
- <Step>
48
-
49
- ### Define the Agent
50
-
51
- Next, let's define an agent within your Mastra server project. We'll create a `chefAgent` similar to the one used in the full-stack guide.
52
-
53
- Open or create the agent file (e.g., `src/mastra/agents/chefAgent.ts` within your Mastra project) and add the following code:
54
-
55
- ```typescript title="src/mastra/agents/chefAgent.ts"
56
- import { Agent } from "@mastra/core/agent";
57
-
58
- export const chefAgent = new Agent({
59
- name: "chef-agent",
60
- instructions:
61
- "You are Michel, a practical and experienced home chef. " +
62
- "You help people cook with whatever ingredients they have available.",
63
- model: "openai/gpt-4o-mini",
64
- });
65
- ```
66
-
67
- This defines the agent's behavior, but it's not yet active in the Mastra server.
68
-
69
- </Step>
70
-
71
- <Step>
72
-
73
- ### Register the Agent
74
-
75
- Now, you need to register the `chefAgent` with your Mastra instance so the server knows about it. Open your main Mastra configuration file (this is often `src/mastra/index.ts` in projects created with `create-mastra`).
76
-
77
- Import the `chefAgent` and add it to the `agents` object when initializing Mastra:
78
-
79
- ```typescript title="src/mastra/index.ts"
80
- import { Mastra } from "@mastra/core";
81
- import { chefAgent } from "./agents/chefAgent"; // Adjust path if necessary
82
-
83
- export const mastra = new Mastra({
84
- agents: { chefAgent },
85
- });
86
- ```
87
-
88
- Make sure you adapt this code to fit the existing structure of your `src/mastra/index.ts` file generated by `create-mastra`. The key is to import your agent and include it in the `agents` configuration object.
89
-
90
- </Step>
91
-
92
- <Step>
93
-
94
- ### Register the Chat Route
95
-
96
- Still inside `src/mastra/index.ts`, register a chat route for the `chefAgent` now. You can do this by using `chatRoute()` from `@mastra/ai-sdk`. You need to place this inside `server.apiRoutes` of your Mastra configuration:
97
-
98
- ```typescript title="src/mastra/index.ts" {3,7-13}
99
- import { Mastra } from "@mastra/core";
100
- import { chefAgent } from "./agents/chefAgent";
101
- import { chatRoute } from "@mastra/ai-sdk";
102
-
103
- export const mastra = new Mastra({
104
- agents: { chefAgent },
105
- server: {
106
- apiRoutes: [
107
- chatRoute({
108
- path: "/chat/:agentId",
109
- }),
110
- ],
111
- },
112
- });
113
- ```
114
-
115
- Make sure you adapt this code to fit the existing structure of your `src/mastra/index.ts` file generated by `create-mastra`. This will make all agents available in AI SDK-compatible formats, including the `chefAgent` at the endpoint `/chat/chefAgent`.
116
-
117
- </Step>
118
-
119
- <Step>
120
-
121
- ### Run the Mastra Server
122
-
123
- With the agent defined and registered, start the Mastra development server:
124
-
125
- ```bash npm2yarn
126
- npm run dev
127
- ```
128
-
129
- By default, the Mastra server will run on `http://localhost:4111`. Keep this server running for the next steps where we'll set up the assistant-ui frontend to connect to it.
130
-
131
- </Step>
132
-
133
- <Step>
134
-
135
- ### Initialize assistant-ui Frontend
136
-
137
- Now, set up your frontend application using assistant-ui. Navigate to a **different directory** from your Mastra server project. You can either create a new Next.js project or use an existing one.
138
-
139
- Inside your frontend project directory, run one of the following commands:
140
-
141
- ```sh title="New Project"
142
- npx assistant-ui@latest create
143
- ```
144
-
145
- ```sh title="Existing Project"
146
- npx assistant-ui@latest init
147
- ```
148
-
149
- This command installs the necessary assistant-ui dependencies and sets up basic configuration files, including a default chat page and an API route (`app/api/chat/route.ts`).
150
-
151
- <Callout title="Need Help?">
152
- For detailed setup instructions for assistant-ui, including manual setup
153
- steps, please refer to the main [Getting Started
154
- guide](/docs).
155
- </Callout>
156
-
157
- In the next step, we will configure this frontend to communicate with the separate Mastra server instead of using the default API route.
158
-
159
- </Step>
160
-
161
- <Step>
162
-
163
- ### Configure Frontend API Endpoint
164
-
165
- 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.
166
-
167
- Open the file in your assistant-ui frontend project that contains the `useChatRuntime` hook (usually `app/assistant.tsx` or `src/app/assistant.tsx`). Find the `useChatRuntime` hook and change the `api` property to the full URL of your Mastra agent's stream endpoint:
168
-
169
- ```tsx {8} title="app/assistant.tsx"
170
- "use client";
171
-
172
- // Rest of the imports...
173
-
174
- export const Assistant = () => {
175
- const runtime = useChatRuntime({
176
- transport: new AssistantChatTransport({
177
- api: "http://localhost:4111/chat/chefAgent",
178
- }),
179
- });
180
-
181
- // Rest of the component...
182
- };
183
- ```
184
-
185
- Replace `"http://localhost:4111/chat/chefAgent"` with the actual URL if your Mastra server runs on a different port or host, or if your agent has a different name.
186
-
187
- Now, the assistant-ui frontend will send chat requests directly to your running Mastra server.
188
-
189
- <Callout title="Delete Default API Route">
190
- Since the frontend no longer uses the local `/api/chat` route created by the
191
- `init` command, you can safely delete the `app/api/chat/route.ts` (or
192
- `src/app/api/chat/route.ts`) file from your frontend project.
193
- </Callout>
194
-
195
- </Step>
196
-
197
- <Step>
198
-
199
- ### Run the Frontend Application
200
-
201
- You're ready to connect the pieces! Make sure your separate Mastra server is still running (from Step 4).
202
-
203
- In your assistant-ui frontend project directory, start the Next.js development server:
204
-
205
- ```bash npm2yarn
206
- npm run dev
207
- ```
208
-
209
- Open your browser to `http://localhost:3000` (or the port specified in your terminal for the frontend app). You should now be able to interact with your `chefAgent` through the assistant-ui chat interface. The frontend will make requests to your Mastra server running on `http://localhost:4111`.
210
-
211
- </Step>
212
-
213
- </Steps>
214
-
215
- 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.
216
-
217
- This setup provides a clear separation between your frontend and AI backend. To explore more advanced Mastra features like memory, tools, workflows, and deployment options, please refer to the [official Mastra documentation](https://mastra.ai/docs).