@assistant-ui/mcp-docs-server 0.1.10 → 0.1.12

package/.docs/raw/docs/guides/Attachments.mdx

@@ -5,6 +5,7 @@ title: Attachments
 import { AttachmentSample } from "../../../components/samples/attachment-sample";
 import { Steps, Step } from "fumadocs-ui/components/steps";
 import { Callout } from "fumadocs-ui/components/callout";
+import { Tab, Tabs } from "fumadocs-ui/components/tabs";
 
 Enable users to attach files to their messages, enhancing conversations with images, documents, and other content.
 
@@ -27,10 +28,30 @@ The attachment system in assistant-ui provides a flexible framework for handling
 
 First, add the attachment UI components to your project:
 
+<Tabs items={["assistant-ui", "shadcn (namespace)", "shadcn"]}>
+  <Tab>
+
+```sh
+npx assistant-ui@latest add attachment
+```
+
+  </Tab>
+  <Tab>
+
+```sh
+npx shadcn@latest add @assistant-ui/attachment
+```
+
+  </Tab>
+  <Tab>
+
 ```sh
 npx shadcn@latest add "https://r.assistant-ui.com/attachment"
 ```
 
+  </Tab>
+</Tabs>
+
 This adds `/components/assistant-ui/attachment.tsx` to your project.
 
 <Callout type="tip">

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

@@ -41,7 +41,7 @@ npm install @assistant-ui/react @assistant-ui/react-ai-sdk ai @ai-sdk/openai
 ```tsx
 import { openai } from "@ai-sdk/openai";
 import { streamText, UIMessage, convertToModelMessages, tool } from "ai";
-import { frontendTools } from "@assistant-ui/assistant-stream/ai-sdk";
+import { frontendTools } from "@assistant-ui/react-ai-sdk";
 import { z } from "zod";
 
 // Allow streaming responses up to 30 seconds
@@ -173,7 +173,7 @@ const runtime = useChatRuntime({
 When using `AssistantChatTransport`, frontend tools are forwarded to your backend. Use the `frontendTools` helper to properly integrate them:
 
 ```tsx
-import { frontendTools } from "@assistant-ui/assistant-stream/ai-sdk";
+import { frontendTools } from "@assistant-ui/react-ai-sdk";
 
 export async function POST(req: Request) {
   const { messages, system, tools } = await req.json();

package/.docs/raw/docs/runtimes/custom/custom-thread-list.mdx

@@ -0,0 +1,218 @@
+---
+title: Custom Thread List
+---
+
+import { Callout } from "fumadocs-ui/components/callout";
+import { Steps, Step } from "fumadocs-ui/components/steps";
+import { ParametersTable } from "@/components/docs";
+
+## Overview
+
+`useRemoteThreadListRuntime` lets you plug a custom thread database into assistant-ui. It keeps the UI and local runtime logic in sync while you provide persistence, archiving, and metadata for every conversation. The hook is exported as `unstable_useRemoteThreadListRuntime`; we refer to it here as **Custom Thread List**.
+
+## When to Use
+
+Use a Custom Thread List when you need to:
+
+- Persist conversations in your own database or multitenant backend
+- Share threads across devices, teams, or long-lived sessions
+- Control thread metadata (titles, archived state, external identifiers)
+- Layer additional adapters (history, attachments) around each thread runtime
+
+## How It Works
+
+Custom Thread List merges two pieces of state:
+
+1. **Per-thread runtime** – powered by any runtime hook (for example `useLocalRuntime` or `useAssistantTransportRuntime`).
+2. **Thread list adapter** – your adapter that reads and writes thread metadata in a remote store.
+
+When the hook mounts it calls `list()` on your adapter, hydrates existing threads, and uses your runtime hook to spawn a runtime whenever a thread is opened. Creating a new conversation calls `initialize(threadId)` so you can create a record server-side and return the canonical `remoteId`.
+
+<Callout type="info">
+  The built-in Assistant Cloud runtime is implemented with the same API. Inspect
+  `useCloudThreadListAdapter` for a production-ready reference adapter.
+</Callout>
+
+## Build a Custom Thread List
+
+<Steps>
+  <Step>
+    ### Provide a runtime per thread
+
+    Use any runtime hook that returns an `AssistantRuntime`. In most custom setups this is `useLocalRuntime(modelAdapter)` or `useAssistantTransportRuntime(...)`.
+
+  </Step>
+  <Step>
+    ### Implement the adapter contract
+
+    Your adapter decides how threads are stored. Implement the methods in the table below to connect to your database or API.
+
+  </Step>
+  <Step>
+    ### Compose the provider
+
+    Wrap `AssistantRuntimeProvider` with the runtime returned from the Custom Thread List hook.
+
+    ```tsx twoslash title="app/CustomThreadListProvider.tsx"
+    // @filename: app/model-adapter.ts
+    export const myModelAdapter = {} as any;
+
+    // @filename: app/CustomThreadListProvider.tsx
+    // ---cut---
+    "use client";
+
+    import type { ReactNode } from "react";
+    import {
+      AssistantRuntimeProvider,
+      useLocalRuntime,
+      unstable_useRemoteThreadListRuntime as useRemoteThreadListRuntime,
+      type unstable_RemoteThreadListAdapter as RemoteThreadListAdapter,
+    } from "@assistant-ui/react";
+    import { createAssistantStream } from "assistant-stream";
+    import { myModelAdapter } from "./model-adapter"; // your chat model adapter
+
+    const threadListAdapter: RemoteThreadListAdapter = {
+      async list() {
+        const response = await fetch("/api/threads");
+        const threads = await response.json();
+        return {
+          threads: threads.map((thread: any) => ({
+            remoteId: thread.id,
+            externalId: thread.external_id ?? undefined,
+            status: thread.is_archived ? "archived" : "regular",
+            title: thread.title ?? undefined,
+          })),
+        };
+      },
+      async initialize(localId) {
+        const response = await fetch("/api/threads", {
+          method: "POST",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify({ localId }),
+        });
+        const result = await response.json();
+        return { remoteId: result.id, externalId: result.external_id };
+      },
+      async rename(remoteId, title) {
+        await fetch(`/api/threads/${remoteId}`, {
+          method: "PATCH",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify({ title }),
+        });
+      },
+      async archive(remoteId) {
+        await fetch(`/api/threads/${remoteId}/archive`, { method: "POST" });
+      },
+      async unarchive(remoteId) {
+        await fetch(`/api/threads/${remoteId}/unarchive`, { method: "POST" });
+      },
+      async delete(remoteId) {
+        await fetch(`/api/threads/${remoteId}`, { method: "DELETE" });
+      },
+      async generateTitle(remoteId, messages) {
+        return createAssistantStream(async (controller) => {
+          const response = await fetch(`/api/threads/${remoteId}/title`, {
+            method: "POST",
+            headers: { "Content-Type": "application/json" },
+            body: JSON.stringify({ messages }),
+          });
+          const { title } = await response.json();
+          controller.appendText(title);
+        });
+      },
+    };
+
+    export function CustomThreadListProvider({
+      children,
+    }: Readonly<{ children: ReactNode }>) {
+      const runtime = useRemoteThreadListRuntime({
+        runtimeHook: () => useLocalRuntime(myModelAdapter),
+        adapter: threadListAdapter,
+      });
+
+      return (
+        <AssistantRuntimeProvider runtime={runtime}>
+          {children}
+        </AssistantRuntimeProvider>
+      );
+    }
+    ```
+
+  </Step>
+</Steps>
+
+## Adapter Responsibilities
+
+<ParametersTable
+  type="RemoteThreadListAdapter"
+  parameters={[
+    {
+      name: "list",
+      type: "() => Promise<{ threads: RemoteThreadMetadata[] }>",
+      description:
+        "Return the current threads. Each thread must include status, remoteId, and any metadata you want to show immediately.",
+      required: true,
+    },
+    {
+      name: "initialize",
+      type: "(localId: string) => Promise<{ remoteId: string; externalId?: string }>",
+      description:
+        "Create a new remote record when the user starts a conversation. Return the canonical ids so later operations target the right thread.",
+      required: true,
+    },
+    {
+      name: "rename",
+      type: "(remoteId: string, title: string) => Promise<void>",
+      description: "Persist title changes triggered from the UI.",
+      required: true,
+    },
+    {
+      name: "archive",
+      type: "(remoteId: string) => Promise<void>",
+      description: "Mark the thread as archived in your system.",
+      required: true,
+    },
+    {
+      name: "unarchive",
+      type: "(remoteId: string) => Promise<void>",
+      description: "Restore an archived thread to the active list.",
+      required: true,
+    },
+    {
+      name: "delete",
+      type: "(remoteId: string) => Promise<void>",
+      description: "Permanently remove the thread and stop rendering it.",
+      required: true,
+    },
+    {
+      name: "generateTitle",
+      type: "(remoteId: string, unstable_messages: readonly ThreadMessage[]) => Promise<AssistantStream>",
+      description:
+        "Return a streaming title generator. You can reuse your model endpoint or queue a background job.",
+      required: true,
+    },
+    {
+      name: "unstable_Provider",
+      type: "ComponentType<PropsWithChildren>",
+      description:
+        "Optional wrapper rendered around all thread runtimes. Use it to inject adapters such as history or attachments (see the Cloud adapter).",
+    },
+  ]}
+/>
+
+## Thread Lifecycle Cheatsheet
+
+- `list()` hydrates threads on mount and during refreshes.
+- Creating a new conversation calls `initialize()` once the user sends the first message.
+- `archive`, `unarchive`, and `delete` are called optimistically; throw to revert the UI.
+- `generateTitle()` powers the automatic title button and expects an `AssistantStream`.
+- Provide a `runtimeHook` that always returns a fresh runtime instance per active thread.
+
+## Optional Adapters
+
+If you need history or attachment support, expose them via `unstable_Provider`. The cloud implementation wraps each thread runtime with `RuntimeAdapterProvider` to inject:
+
+- `history` – e.g. `useAssistantCloudThreadHistoryAdapter`
+- `attachments` – e.g. `CloudFileAttachmentAdapter`
+
+Reuse that pattern to register any capability your runtime requires.

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

@@ -164,45 +164,52 @@ graph TD
     ```tsx title="app/MyRuntimeProvider.tsx"
     "use client";
 
-    import { useState } from "react";
+    import { ThreadMessageLike } from "@assistant-ui/react";
+    import { AppendMessage } from "@assistant-ui/react";
     import {
-      useExternalStoreRuntime,
-      ThreadMessageLike,
-      AppendMessage,
       AssistantRuntimeProvider,
+      useExternalStoreRuntime,
     } from "@assistant-ui/react";
-
-    export function MyRuntimeProvider({ children }) {
-      const [messages, setMessages] = useState<ThreadMessageLike[]>([]);
-      const [isRunning, setIsRunning] = useState(false);
-
+    import { useState } from "react";
+    
+    const convertMessage = (message: ThreadMessageLike) => {
+      return message;
+    };
+    
+    export function MyRuntimeProvider({
+      children,
+    }: Readonly<{
+      children: React.ReactNode;
+    }>) {
+      const [messages, setMessages] = useState<readonly ThreadMessageLike[]>([]);
+    
       const onNew = async (message: AppendMessage) => {
-        // Add user message
+        if (message.content.length !== 1 || message.content[0]?.type !== "text")
+          throw new Error("Only text content is supported");
+    
         const userMessage: ThreadMessageLike = {
           role: "user",
-          content: message.content,
+          content: [{ type: "text", text: message.content[0].text }],
         };
-        setMessages(prev => [...prev, userMessage]);
-
-        // Generate response
-        setIsRunning(true);
-        const response = await callYourAPI(message);
-
+        setMessages((currentMessages) => [...currentMessages, userMessage]);
+    
+        // normally you would perform an API call here to get the assistant response
+        await new Promise((resolve) => setTimeout(resolve, 1000));
+    
         const assistantMessage: ThreadMessageLike = {
           role: "assistant",
-          content: response.content,
+          content: [{ type: "text", text: "Hello, world!" }],
         };
-        setMessages(prev => [...prev, assistantMessage]);
-        setIsRunning(false);
+        setMessages((currentMessages) => [...currentMessages, assistantMessage]);
       };
-
-      const runtime = useExternalStoreRuntime({
+    
+      const runtime = useExternalStoreRuntime<ThreadMessageLike>({
         messages,
         setMessages,
-        isRunning,
         onNew,
+        convertMessage,
       });
-
+    
       return (
         <AssistantRuntimeProvider runtime={runtime}>
           {children}

package/.docs/raw/docs/runtimes/mastra/separate-server-integration.mdx

@@ -140,14 +140,19 @@ Open the main page file in your assistant-ui frontend project (usually `app/page
 ```tsx {10} title="app/page.tsx"
 "use client";
 import { Thread } from "@/components/assistant-ui/thread";
-import { useDataStreamRuntime } from "@assistant-ui/react-data-stream";
+import {
+  useChatRuntime,
+  AssistantChatTransport,
+} from "@assistant-ui/react-ai-sdk";
 import { AssistantRuntimeProvider } from "@assistant-ui/react";
 import { ThreadList } from "@/components/assistant-ui/thread-list";
 
 export default function Home() {
   // Point the runtime to the Mastra server endpoint
-  const runtime = useDataStreamRuntime({
-    api: "http://localhost:4111/api/agents/chefAgent/stream",
+  const runtime = useChatRuntime({
+    transport: new AssistantChatTransport({
+      api: "MASTRA_ENDPOINT",
+    }),
   });
 
   return (

package/.docs/raw/docs/runtimes/pick-a-runtime.mdx

@@ -223,5 +223,5 @@ Explore our implementation examples:
 5. **Consider Assistant Cloud** for production persistence
 
 <Callout type="info">
-Need help? Join our [Discord community](https://discord.gg/assistant-ui) or check the [GitHub](https://github.com/assistant-ui/assistant-ui).
+Need help? Join our [Discord community](https://discord.gg/S9dwgCNEFs) or check the [GitHub](https://github.com/assistant-ui/assistant-ui).
 </Callout>

package/.docs/raw/docs/ui/AssistantModal.mdx

@@ -3,6 +3,7 @@ title: AssistantModal
 ---
 
 import { Steps, Step } from "fumadocs-ui/components/steps";
+import { Tab, Tabs } from "fumadocs-ui/components/tabs";
 import { AssistantModalSample } from "../../../components/samples/assistant-modal-sample";
 
 ## Overview
@@ -19,10 +20,30 @@ A chat bubble shown in the bottom right corner of the screen. Useful for support
 
 ### Add `assistant-modal`
 
+<Tabs items={["assistant-ui", "shadcn (namespace)", "shadcn"]}>
+  <Tab>
+
+```sh
+npx assistant-ui@latest add assistant-modal
+```
+
+  </Tab>
+  <Tab>
+
+```sh
+npx shadcn@latest add @assistant-ui/assistant-modal
+```
+
+  </Tab>
+  <Tab>
+
 ```sh
 npx shadcn@latest add "https://r.assistant-ui.com/assistant-modal"
 ```
 
+  </Tab>
+</Tabs>
+
 This adds `/components/assistant-ui/assistant-modal.tsx` to your project, which you can adjust as needed.
 
   </Step>

package/.docs/raw/docs/ui/AssistantSidebar.mdx

@@ -3,6 +3,7 @@ title: AssistantSidebar
 ---
 
 import { Steps, Step } from "fumadocs-ui/components/steps";
+import { Tab, Tabs } from "fumadocs-ui/components/tabs";
 
 ## Overview
 
@@ -15,10 +16,30 @@ A chat sidebar show on the right side of the screen. Useful for co-pilot use cas
 
 ### Add `assistant-sidebar`
 
+<Tabs items={["assistant-ui", "shadcn (namespace)", "shadcn"]}>
+  <Tab>
+
+```sh
+npx assistant-ui@latest add assistant-sidebar
+```
+
+  </Tab>
+  <Tab>
+
+```sh
+npx shadcn@latest add @assistant-ui/assistant-sidebar
+```
+
+  </Tab>
+  <Tab>
+
 ```sh
 npx shadcn@latest add "https://r.assistant-ui.com/assistant-sidebar"
 ```
 
+  </Tab>
+</Tabs>
+
 This adds `/components/assistant-ui/assistant-sidebar.tsx` to your project, which you can adjust as needed.
 
   </Step>

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

@@ -5,6 +5,7 @@ title: Attachment
 import { Steps, Step } from "fumadocs-ui/components/steps";
 import { AttachmentSample } from "../../../components/samples/attachment-sample";
 import { Callout } from "fumadocs-ui/components/callout";
+import { Tab, Tabs } from "fumadocs-ui/components/tabs";
 
 ## Overview
 
@@ -26,10 +27,30 @@ The Attachment components let the user attach files and view the attachments.
 
 ### Add `attachment`
 
+<Tabs items={["assistant-ui", "shadcn (namespace)", "shadcn"]}>
+  <Tab>
+
+```sh
+npx assistant-ui@latest add attachment
+```
+
+  </Tab>
+  <Tab>
+
+```sh
+npx shadcn@latest add @assistant-ui/attachment
+```
+
+  </Tab>
+  <Tab>
+
 ```sh
 npx shadcn@latest add "https://r.assistant-ui.com/attachment"
 ```
 
+  </Tab>
+</Tabs>
+
 This adds a `/components/assistant-ui/attachment.tsx` file to your project, which you can adjust as needed.
 
   </Step>

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

@@ -6,6 +6,7 @@ Allow the assistant to display rich text using markdown.
 
 import { Step, Steps } from "fumadocs-ui/components/steps";
 import { Callout } from "fumadocs-ui/components/callout";
+import { Tab, Tabs } from "fumadocs-ui/components/tabs";
 
 <Callout>
   Markdown support is already included by default in the `Thread` component.
@@ -18,10 +19,30 @@ import { Callout } from "fumadocs-ui/components/callout";
 <Step>
 ### Add `markdown-text`
 
-```tsx
+<Tabs items={["assistant-ui", "shadcn (namespace)", "shadcn"]}>
+  <Tab>
+
+```sh
+npx assistant-ui@latest add markdown-text
+```
+
+  </Tab>
+  <Tab>
+
+```sh
+npx shadcn@latest add @assistant-ui/markdown-text
+```
+
+  </Tab>
+  <Tab>
+
+```sh
 npx shadcn@latest add "https://r.assistant-ui.com/markdown-text"
 ```
 
+  </Tab>
+</Tabs>
+
 This adds a `/components/assistant-ui/markdown-text.tsx` file to your project, which you can adjust as needed.
 
 </Step>

package/.docs/raw/docs/ui/Mermaid.mdx

@@ -4,6 +4,7 @@ title: "Mermaid Diagrams"
 
 import { Callout } from "fumadocs-ui/components/callout";
 import { Step, Steps } from "fumadocs-ui/components/steps";
+import { Tab, Tabs } from "fumadocs-ui/components/tabs";
 
 Render Mermaid diagrams in chat messages with the `mermaid-diagram` component.
 
@@ -12,10 +13,30 @@ Render Mermaid diagrams in chat messages with the `mermaid-diagram` component.
 
 ### Add `mermaid-diagram` component
 
-```bash
+<Tabs items={["assistant-ui", "shadcn (namespace)", "shadcn"]}>
+  <Tab>
+
+```sh
+npx assistant-ui@latest add mermaid-diagram
+```
+
+  </Tab>
+  <Tab>
+
+```sh
+npx shadcn@latest add @assistant-ui/mermaid-diagram
+```
+
+  </Tab>
+  <Tab>
+
+```sh
 npx shadcn@latest add "https://r.assistant-ui.com/mermaid-diagram"
 ```
 
+  </Tab>
+</Tabs>
+
 This will install the required dependencies and add the component to your project.
 
   </Step>

package/.docs/raw/docs/ui/SyntaxHighlighting.mdx

@@ -5,6 +5,7 @@ title: Syntax Highlighting
 import { Steps, Step } from "fumadocs-ui/components/steps";
 import { Callout } from "fumadocs-ui/components/callout";
 import { TypeTable } from "fumadocs-ui/components/type-table";
+import { Tab, Tabs } from "fumadocs-ui/components/tabs";
 
 Syntax highlighting for code blocks in markdown.
 
@@ -25,10 +26,30 @@ Syntax highlighting for code blocks in markdown.
 
 #### Add `shiki-highlighter`
 
-```bash
+<Tabs items={["assistant-ui", "shadcn (namespace)", "shadcn"]}>
+  <Tab>
+
+```sh
+npx assistant-ui@latest add shiki-highlighter
+```
+
+  </Tab>
+  <Tab>
+
+```sh
+npx shadcn@latest add @assistant-ui/shiki-highlighter
+```
+
+  </Tab>
+  <Tab>
+
+```sh
 npx shadcn@latest add "https://r.assistant-ui.com/shiki-highlighter"
 ```
 
+  </Tab>
+</Tabs>
+
 This adds a `/components/assistant-ui/shiki-highlighter.tsx` file to your project and
 installs the `react-shiki` dependency. The highlighter can be customized by editing
 the config in the `shiki-highlighter.tsx` file.
@@ -216,10 +237,30 @@ For more information, see [Shiki's documentation on dual and multi themes](https
 
 #### Add `syntax-highlighter`
 
-```bash
+<Tabs items={["assistant-ui", "shadcn (namespace)", "shadcn"]}>
+  <Tab>
+
+```sh
+npx assistant-ui@latest add syntax-highlighter
+```
+
+  </Tab>
+  <Tab>
+
+```sh
+npx shadcn@latest add @assistant-ui/syntax-highlighter
+```
+
+  </Tab>
+  <Tab>
+
+```sh
 npx shadcn@latest add "https://r.assistant-ui.com/syntax-highlighter"
 ```
 
+  </Tab>
+</Tabs>
+
     Adds a `/components/assistant-ui/syntax-highlighter.tsx` file to your project and installs the `react-syntax-highlighter` dependency.
 
   </Step>

package/.docs/raw/docs/ui/Thread.mdx

@@ -45,7 +45,7 @@ import { ThreadPrimitive } from "@assistant-ui/react";
 
 ### Add the component
 
-<Tabs items={["assistant-ui", "shadcn"]}>
+<Tabs items={["assistant-ui", "shadcn (namespace)", "shadcn"]}>
   <Tab>
 
 ```sh
@@ -55,6 +55,13 @@ npx assistant-ui@latest add thread
   </Tab>
   <Tab>
 
+```sh
+npx shadcn@latest add @assistant-ui/thread
+```
+
+  </Tab>
+  <Tab>
+
 ```sh
 npx shadcn@latest add "https://r.assistant-ui.com/thread"
 ```
@@ -406,5 +413,4 @@ Multiple conditions can be combined on `ThreadPrimitive.If` - all specified cond
 
 ## Related Components
 
-- [ThreadList](/docs/ui/ThreadList) - List of threads
-- [ThreadListSidebar](/docs/ui/ThreadListSidebar) - Sidebar with thread list
+- [ThreadList](/docs/ui/ThreadList) - List of threads, with or without sidebar