@assistant-ui/mcp-docs-server 0.1.3 → 0.1.5

package/.docs/raw/docs/runtimes/ai-sdk/use-chat-v5.mdx

@@ -0,0 +1,129 @@
+---
+title: AI SDK v5 (@alpha)
+---
+
+import { Callout } from "fumadocs-ui/components/callout";
+
+<Callout type="warn">
+  This integration is currently in **alpha**. APIs may change before the stable release.
+</Callout>
+
+## Overview
+
+Integration with the Vercel AI SDK v5's `useChat` hook using the `@assistant-ui/react-ai-sdk` package with the `@alpha` tag.  
+This version supports the latest AI SDK v5 features including the new streamText API and improved TypeScript support.
+
+## Getting Started
+
+import { Steps, Step } from "fumadocs-ui/components/steps";
+
+<Steps>
+  <Step>
+  ### Create a Next.JS project
+
+```sh
+npx create-next-app@latest my-app
+cd my-app
+```
+
+  </Step>
+  <Step>
+
+### Install AI SDK v5 and `@assistant-ui/react` with alpha tag
+
+```sh npm2yarn
+npm install @assistant-ui/react @assistant-ui/react-ai-sdk@alpha ai @ai-sdk/openai
+```
+
+  </Step>
+  <Step>
+
+### Setup a backend route under `/api/chat`
+
+`@/app/api/chat/route.ts`
+
+```tsx
+import { openai } from "@ai-sdk/openai";
+import {
+  streamText,
+  UIMessage,
+  convertToModelMessages,
+  tool,
+} from "ai";
+import { z } from "zod";
+
+// Allow streaming responses up to 30 seconds
+export const maxDuration = 30;
+
+export async function POST(req: Request) {
+  const { messages }: { messages: UIMessage[] } = await req.json();
+
+  const result = streamText({
+    model: openai("gpt-4o"),
+    messages: convertToModelMessages(messages),
+    tools: {
+      get_current_weather: tool({
+        description: "Get the current weather",
+        inputSchema: z.object({
+          city: z.string(),
+        }),
+        execute: async ({ city }) => {
+          return `The weather in ${city} is sunny`;
+        },
+      }),
+    },
+  });
+
+  return result.toUIMessageStreamResponse();
+}
+```
+
+  </Step>
+  <Step>
+
+### Wrap your app with `AssistantRuntimeProvider` with AI SDK v5 runtime
+
+`@/app/page.tsx`
+
+```tsx
+"use client";
+
+import { Thread } from "@/components/assistant-ui/thread";
+import { useChat } from "@ai-sdk/react";
+import { AssistantRuntimeProvider } from "@assistant-ui/react";
+import { useAISDKRuntime } from "@assistant-ui/react-ai-sdk";
+
+export default function Home() {
+  const chat = useChat();
+  const runtime = useAISDKRuntime(chat);
+
+  return (
+    <AssistantRuntimeProvider runtime={runtime}>
+      <div className="h-full">
+        <Thread />
+      </div>
+    </AssistantRuntimeProvider>
+  );
+}
+```
+
+  </Step>
+</Steps>
+
+## API Reference
+
+### useAISDKRuntime
+
+Creates a runtime adapter for AI SDK v5's `useChat` hook.
+
+```tsx
+import { useChat } from "@ai-sdk/react";
+import { useAISDKRuntime } from "@assistant-ui/react-ai-sdk";
+
+const chat = useChat();
+const runtime = useAISDKRuntime(chat);
+```
+
+## Example
+
+For a complete example, check out the [AI SDK v5 example](https://github.com/assistant-ui/assistant-ui/tree/main/examples/with-ai-sdk-v5) in our repository.

package/.docs/raw/docs/runtimes/ai-sdk/use-chat.mdx

@@ -38,7 +38,7 @@ npm install @assistant-ui/react @assistant-ui/react-ai-sdk ai @ai-sdk/openai
 
 ```tsx
 import { openai } from "@ai-sdk/openai";
-import { streamText } from "ai";
+import { convertToCoreMessages, streamText } from "ai";
 
 export const maxDuration = 30;
 
@@ -129,8 +129,8 @@ const MyAssistantMessage = () => {
 
 const WeatherToolUI = makeAssistantToolUI({
   render: () => {
-    const aiSDKMessage = useContentPart((p) => getExternalStoreMessages(p)[0]);
+    const aiSDKMessage = useMessagePart((p) => getExternalStoreMessages(p)[0]);
     // ...
   },
 });
-```
+```

package/.docs/raw/docs/runtimes/custom/external-store.mdx

@@ -1144,13 +1144,13 @@ const MyComponent = () => {
   messages for display.
 </Callout>
 
-### Content Part Access
+### Message part Access
 
 ```tsx
 const ToolUI = makeAssistantToolUI({
   render: () => {
-    const originalMessages = useContentPart((p) => getExternalStoreMessages(p));
-    // Access original message data for this content part
+    const originalMessages = useMessagePart((p) => getExternalStoreMessages(p));
+    // Access original message data for this message part
   },
 });
 ```
@@ -1500,8 +1500,8 @@ A flexible message format that can be converted to assistant-ui's internal forma
     },
     {
       name: "content",
-      type: "string | readonly ContentPart[]",
-      description: "Message content as string or structured content parts",
+      type: "string | readonly MessagePart[]",
+      description: "Message content as string or structured message parts",
       required: true,
     },
     {

package/.docs/raw/docs/runtimes/langgraph/tutorial/part-2.mdx

@@ -273,12 +273,12 @@ npx shadcn@latest add button
 Then create a new file under `/components/tools/ToolFallback.tsx` to define the fallback UI.
 
 ```tsx title="@/components/tools/ToolFallback.tsx"
-import { ToolCallContentPartComponent } from "@assistant-ui/react";
+import { ToolCallMessagePartComponent } from "@assistant-ui/react";
 import { CheckIcon, ChevronDownIcon, ChevronUpIcon } from "lucide-react";
 import { useState } from "react";
 import { Button } from "../ui/button";
 
-export const ToolFallback: ToolCallContentPartComponent = ({
+export const ToolFallback: ToolCallMessagePartComponent = ({
   toolName,
   argsText,
   result,

package/.docs/raw/docs/ui/Attachment.mdx

@@ -13,7 +13,10 @@ The Attachment components let the user attach files and view the attachments.
 <AttachmentSample />
 
 <Callout type="info">
-**Note:** These components provide the UI for attachments, but you also need to configure attachment adapters in your runtime to handle file uploads and processing. See the [Attachments Guide](/docs/guides/Attachments) for complete setup instructions.
+  **Note:** These components provide the UI for attachments, but you also need
+  to configure attachment adapters in your runtime to handle file uploads and
+  processing. See the [Attachments Guide](/docs/guides/Attachments) for complete
+  setup instructions.
 </Callout>
 
 ## Getting Started
@@ -69,7 +72,7 @@ const UserMessage: FC = () => {
       <UserMessageAttachments />
 
       <div className="...">
-        <MessagePrimitive.Content />
+        <MessagePrimitive.Parts />
       </div>
 
       <BranchPicker className="..." />

package/.docs/raw/docs/ui/Markdown.mdx

@@ -30,7 +30,7 @@ This adds a `/components/assistant-ui/markdown-text.tsx` file to your project, w
 
 ### Use it in your application
 
-Pass the `MarkdownText` component to the `MessagePrimitive.Content` component
+Pass the `MarkdownText` component to the `MessagePrimitive.Parts` component
 
 ```tsx twoslash title="/components/assistant-ui/thread.tsx" {1,11}
 // @filename: /components/assistant-ui/markdown-text.tsx
@@ -52,7 +52,7 @@ const AssistantMessage: FC = () => {
   return (
     <MessagePrimitive.Root className="...">
       <div className="...">
-        <MessagePrimitive.Content components={{ Text: MarkdownText }} />
+        <MessagePrimitive.Parts components={{ Text: MarkdownText }} />
       </div>
       <AssistantActionBar />
 
@@ -69,4 +69,3 @@ const AssistantMessage: FC = () => {
 ## Syntax highlighting
 
 Syntax Highlighting is not included by default, see [Syntax Highlighting](/docs/ui/SyntaxHighlighting) to learn how to add it.
-