@assistant-ui/mcp-docs-server 0.1.9 → 0.1.11

package/.docs/raw/docs/runtimes/langgraph/index.mdx

@@ -61,7 +61,6 @@ npm install @assistant-ui/react @assistant-ui/react-ui @assistant-ui/react-langg
 ```tsx twoslash title="@/api/api/[...path]/route.ts"
 import { NextRequest, NextResponse } from "next/server";
 
-
 function getCorsHeaders() {
   return {
     "Access-Control-Allow-Origin": "*",
@@ -188,7 +187,6 @@ export const sendMessage = async (params: {
 // ---cut---
 "use client";
 
-import { useRef } from "react";
 import { Thread } from "@/components/assistant-ui";
 import { AssistantRuntimeProvider } from "@assistant-ui/react";
 import { useLangGraphRuntime } from "@assistant-ui/react-langgraph";
@@ -196,27 +194,21 @@ import { useLangGraphRuntime } from "@assistant-ui/react-langgraph";
 import { createThread, getThreadState, sendMessage } from "@/lib/chatApi";
 
 export function MyAssistant() {
-  const threadIdRef = useRef<string | undefined>();
   const runtime = useLangGraphRuntime({
-    threadId: threadIdRef.current,
-    stream: async (messages) => {
-      if (!threadIdRef.current) {
-        const { thread_id } = await createThread();
-        threadIdRef.current = thread_id;
-      }
-      const threadId = threadIdRef.current;
+    stream: async (messages, { initialize }) => {
+      const { externalId } = await initialize();
+      if (!externalId) throw new Error("Thread not found");
       return sendMessage({
-        threadId,
+        threadId: externalId,
         messages,
       });
     },
-    onSwitchToNewThread: async () => {
+    create: async () => {
       const { thread_id } = await createThread();
-      threadIdRef.current = thread_id;
+      return { externalId: thread_id };
     },
-    onSwitchToThread: async (threadId) => {
-      const state = await getThreadState(threadId);
-      threadIdRef.current = threadId;
+    load: async (externalId) => {
+      const state = await getThreadState(externalId);
       return {
         messages: state.values.messages,
         interrupts: state.tasks[0]?.interrupts,
@@ -306,14 +298,57 @@ import { convertLangChainMessages } from "@assistant-ui/react-langgraph";
 const threadMessage = convertLangChainMessages(langChainMessage);
 ```
 
-## Interrupt Persistence
+## Thread Management
+
+### Basic Thread Support
+
+The `useLangGraphRuntime` hook now includes built-in thread management capabilities:
+
+```typescript
+const runtime = useLangGraphRuntime({
+  stream: async (messages, { initialize }) => {
+    // initialize() creates or loads a thread and returns its IDs
+    const { remoteId, externalId } = await initialize();
+    // Use externalId (your backend's thread ID) for API calls
+    return sendMessage({ threadId: externalId, messages });
+  },
+  create: async () => {
+    // Called when creating a new thread
+    const { thread_id } = await createThread();
+    return { externalId: thread_id };
+  },
+  load: async (externalId) => {
+    // Called when loading an existing thread
+    const state = await getThreadState(externalId);
+    return {
+      messages: state.values.messages,
+      interrupts: state.tasks[0]?.interrupts,
+    };
+  },
+});
+```
 
-LangGraph supports interrupting the execution flow to request user input or handle specific interactions. These interrupts can be persisted and restored when switching between threads. This means that if a user switches away from a thread during an interaction (like waiting for user approval), the interaction state will be preserved when they return to that thread.
+### Cloud Persistence
+
+For persistent thread history across sessions, integrate with assistant-cloud:
+
+```typescript
+const runtime = useLangGraphRuntime({
+  cloud: new AssistantCloud({
+    baseUrl: process.env.NEXT_PUBLIC_ASSISTANT_BASE_URL,
+  }),
+  // ... stream, create, load functions
+});
+```
+
+See the [Cloud Persistence guide](/docs/cloud/persistence/langgraph) for detailed setup instructions.
+
+## Interrupt Persistence
 
-To handle interrupts in your application:
+LangGraph supports interrupting the execution flow to request user input or handle specific interactions. These interrupts can be persisted and restored when switching between threads:
 
 1. Make sure your thread state type includes the `interrupts` field
-2. Return the interrupts from `onSwitchToThread` along with the messages
+2. Return the interrupts from the `load` function along with the messages
 3. The runtime will automatically restore the interrupt state when switching threads
 
 This feature is particularly useful for applications that require user approval flows, multi-step forms, or any other interactive elements that might span multiple thread switches.

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>