@assistant-ui/mcp-docs-server 0.1.14 → 0.1.16

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

@@ -6,6 +6,7 @@ import { Callout } from "fumadocs-ui/components/callout";
 import { Steps, Step } from "fumadocs-ui/components/steps";
 import { Card, Cards } from "fumadocs-ui/components/card";
 import { ParametersTable } from "@/components/docs";
+import { InstallCommand } from "@/components/docs/install-command";
 
 ## Overview
 
@@ -152,9 +153,7 @@ graph TD
   <Step>
     ### Install Dependencies
 
-    ```sh npm2yarn
-    npm install @assistant-ui/react
-    ```
+    <InstallCommand npm={["@assistant-ui/react"]} />
 
   </Step>
   

package/.docs/raw/docs/runtimes/custom/local.mdx

@@ -6,6 +6,7 @@ import { Callout } from "fumadocs-ui/components/callout";
 import { Steps, Step } from "fumadocs-ui/components/steps";
 import { Card, Cards } from "fumadocs-ui/components/card";
 import { ParametersTable } from "@/components/docs";
+import { InstallCommand } from "@/components/docs/install-command";
 
 ## Overview
 
@@ -68,8 +69,15 @@ Use `LocalRuntime` if you need:
 
     ### Install `@assistant-ui/react`
 
+    <InstallCommand npm={["@assistant-ui/react"]} />
+
+  </Step>
+  <Step>
+
+    ### Add `assistant-ui` Thread component
+
     ```sh npm2yarn
-    npm install @assistant-ui/react
+    npx assistant-ui@latest add thread
     ```
 
   </Step>
@@ -406,12 +414,11 @@ For custom thread storage, use `useRemoteThreadListRuntime` with your own adapte
 
 ```tsx
 import {
-  useLocalThreadRuntime,
   unstable_useRemoteThreadListRuntime as useRemoteThreadListRuntime,
   useThreadListItem,
   RuntimeAdapterProvider,
   AssistantRuntimeProvider,
-  type RemoteThreadListAdapter,
+  type unstable_RemoteThreadListAdapter as RemoteThreadListAdapter,
   type ThreadHistoryAdapter,
 } from "@assistant-ui/react";
 import { createAssistantStream } from "assistant-stream";
@@ -472,7 +479,7 @@ const myDatabaseAdapter: RemoteThreadListAdapter = {
 export function MyRuntimeProvider({ children }) {
   const runtime = useRemoteThreadListRuntime({
     runtimeHook: () => {
-      return useLocalThreadRuntime(MyModelAdapter);
+      return useLocalRuntime(MyModelAdapter);
     },
     adapter: {
       ...myDatabaseAdapter,
@@ -827,43 +834,6 @@ function MyComponent() {
 }
 ```
 
-### Custom Runtime Implementation
-
-`useLocalThreadRuntime` provides the core single-thread runtime for building custom implementations:
-
-```tsx
-import {
-  useLocalThreadRuntime,
-  unstable_useRemoteThreadListRuntime as useRemoteThreadListRuntime,
-  AssistantRuntimeProvider,
-} from "@assistant-ui/react";
-
-// Build your own multi-thread runtime
-function MyCustomRuntimeProvider({ children }) {
-  const runtime = useRemoteThreadListRuntime({
-    runtimeHook: () => useLocalThreadRuntime(MyModelAdapter, options),
-    adapter: myCustomThreadListAdapter,
-  });
-
-  return (
-    <AssistantRuntimeProvider runtime={runtime}>
-      {children}
-    </AssistantRuntimeProvider>
-  );
-}
-```
-
-<Callout type="info">
-  `useLocalRuntime` internally uses `useLocalThreadRuntime` +
-  `useRemoteThreadListRuntime` for multi-thread support.
-</Callout>
-
-<Callout type="warning">
-  **`useThreadRuntime` vs `useLocalThreadRuntime`:** - `useThreadRuntime` -
-  Access the current thread's runtime from within components -
-  `useLocalThreadRuntime` - Create a new single-thread runtime instance
-</Callout>
-
 ## Integration Examples
 
 ### OpenAI Integration

package/.docs/raw/docs/runtimes/data-stream.mdx

@@ -4,6 +4,7 @@ title: Data Stream Protocol
 
 import { Step, Steps } from "fumadocs-ui/components/steps";
 import { Callout } from "fumadocs-ui/components/callout";
+import { InstallCommand } from "@/components/docs/install-command";
 
 The `@assistant-ui/react-data-stream` package provides integration with data stream protocol endpoints, enabling streaming AI responses with tool support and state management.
 
@@ -19,9 +20,7 @@ The data stream protocol is a standardized format for streaming AI responses tha
 
 ## Installation
 
-```bash npm2yarn
-npm install @assistant-ui/react-data-stream
-```
+<InstallCommand npm={["@assistant-ui/react-data-stream"]} />
 
 ## Basic Usage
 
@@ -61,19 +60,24 @@ export default function ChatPage() {
 Your backend endpoint should accept POST requests and return data stream responses:
 
 ```typescript title="app/api/chat/route.ts"
-import { DataStreamResponse } from "assistant-stream";
+import { createAssistantStreamResponse } from "assistant-stream";
 
 export async function POST(request: Request) {
   const { messages, tools, system } = await request.json();
 
-  // Process the request with your AI provider
-  const stream = await processWithAI({
-    messages,
-    tools,
-    system,
+  return createAssistantStreamResponse(async (controller) => {
+    // Process the request with your AI provider
+    const stream = await processWithAI({
+      messages,
+      tools,
+      system,
+    });
+
+    // Stream the response
+    for await (const chunk of stream) {
+      controller.appendText(chunk.text);
+    }
   });
-
-  return new DataStreamResponse(stream);
 }
 ```
 

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

@@ -36,6 +36,8 @@ NEXT_PUBLIC_LANGGRAPH_ASSISTANT_ID=your_graph_id
   </Step>
 </Steps>
 
+import { InstallCommand } from "@/components/docs/install-command";
+
 ## Installation in existing React project
 
 <Steps>
@@ -43,9 +45,7 @@ NEXT_PUBLIC_LANGGRAPH_ASSISTANT_ID=your_graph_id
 
 ### Install dependencies
 
-```sh npm2yarn
-npm install @assistant-ui/react @assistant-ui/react-ui @assistant-ui/react-langgraph @langchain/langgraph-sdk
-```
+<InstallCommand npm={["@assistant-ui/react", "@assistant-ui/react-langgraph", "@langchain/langgraph-sdk"]} />
 
   </Step>
     <Step>
@@ -189,7 +189,7 @@ export const sendMessage = async (params: {
 // ---cut---
 "use client";
 
-import { Thread } from "@/components/assistant-ui";
+import { Thread } from "@/components/assistant-ui/thread";
 import { AssistantRuntimeProvider } from "@assistant-ui/react";
 import { useLangGraphRuntime } from "@assistant-ui/react-langgraph";
 

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

@@ -276,7 +276,7 @@ Then create a new file under `/components/tools/ToolFallback.tsx` to define the
 import { ToolCallMessagePartComponent } from "@assistant-ui/react";
 import { CheckIcon, ChevronDownIcon, ChevronUpIcon } from "lucide-react";
 import { useState } from "react";
-import { Button } from "../ui/button";
+import { Button } from "@/components/ui/button";
 
 export const ToolFallback: ToolCallMessagePartComponent = ({
   toolName,

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

@@ -5,6 +5,7 @@ title: "Part 3: Approval UI"
 ## Background: LangGraph implementation details
 
 import Image from "next/image";
+import { InstallCommand } from "@/components/docs/install-command";
 import approval from "./images/stockbroker-langgraph.png";
 
 <Image
@@ -127,9 +128,7 @@ Finally, we add a `TransactionConfirmationPending` component to ask for approval
 
 This requires shadcn/ui's `Card` and `Button` components. We will install them as a dependency.
 
-```sh
-npx shadcn@latest add card button
-```
+<InstallCommand shadcn={["card", "button"]} />
 
 Then create a new file under `/components/tools/purchase-stock/transaction-confirmation-pending.tsx` to define the approval UI.
 

package/.docs/raw/docs/runtimes/langserve.mdx

@@ -13,6 +13,7 @@ Integration with a LangServe server via Vercel AI SDK.
 ## Getting Started
 
 import { Steps, Step } from "fumadocs-ui/components/steps";
+import { InstallCommand } from "@/components/docs/install-command";
 
 <Steps>
   <Step>
@@ -28,9 +29,7 @@ cd my-app
 
 ### Install `@langchain/core`, AI SDK and `@assistant-ui/react`
 
-```sh npm2yarn
-npm install @assistant-ui/react @assistant-ui/react-ai-sdk ai @ai-sdk/react @langchain/core
-```
+<InstallCommand npm={["@assistant-ui/react", "@assistant-ui/react-ai-sdk", "ai", "@ai-sdk/react", "@langchain/core"]} />
 
   </Step>
   <Step>

package/.docs/raw/docs/runtimes/mastra/full-stack-integration.mdx

@@ -4,6 +4,7 @@ title: Full-Stack Integration
 
 import { Step, Steps } from "fumadocs-ui/components/steps";
 import { Callout } from "fumadocs-ui/components/callout";
+import { InstallCommand } from "@/components/docs/install-command";
 
 Integrate Mastra directly into your Next.js application's API routes. This approach keeps your backend and frontend code within the same project.
 
@@ -65,9 +66,7 @@ This default route uses the Vercel AI SDK directly with OpenAI. In the following
 
 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:
 
-```bash npm2yarn
-npm install @mastra/core@latest @mastra/ai-sdk@latest zod@latest
-```
+<InstallCommand npm={["@mastra/core@latest", "@mastra/ai-sdk@latest", "zod@latest"]} />
 
 </Step>
 <Step>

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

@@ -4,6 +4,7 @@ title: Separate Server Integration
 
 import { Step, Steps } from "fumadocs-ui/components/steps";
 import { Callout } from "fumadocs-ui/components/callout";
+import { InstallCommand } from "@/components/docs/install-command";
 
 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.
 
@@ -31,9 +32,7 @@ cd your-mastra-server-directory # Replace with the actual directory name
 
 In the next steps you'll need to use the `@mastra/ai-sdk` package. Add it to your Mastra project:
 
-```bash
-npm install @mastra/ai-sdk@latest
-```
+<InstallCommand npm={["@mastra/ai-sdk@latest"]} />
 
 You now have a basic Mastra server project ready.
 

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

@@ -3,8 +3,8 @@ 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";
+import { InstallCommand } from "@/components/docs/install-command";
+import { AssistantModalSample } from "@/components/samples/assistant-modal-sample";
 
 ## Overview
 
@@ -20,29 +20,7 @@ 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>
+<InstallCommand shadcn={["assistant-modal"]} />
 
 This adds `/components/assistant-ui/assistant-modal.tsx` to your project, which you can adjust as needed.
 

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

@@ -3,7 +3,7 @@ title: AssistantSidebar
 ---
 
 import { Steps, Step } from "fumadocs-ui/components/steps";
-import { Tab, Tabs } from "fumadocs-ui/components/tabs";
+import { InstallCommand } from "@/components/docs/install-command";
 
 ## Overview
 
@@ -16,29 +16,7 @@ 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>
+<InstallCommand shadcn={["assistant-sidebar"]} />
 
 This adds `/components/assistant-ui/assistant-sidebar.tsx` to your project, which you can adjust as needed.
 

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

@@ -3,9 +3,9 @@ title: Attachment
 ---
 
 import { Steps, Step } from "fumadocs-ui/components/steps";
-import { AttachmentSample } from "../../../components/samples/attachment-sample";
+import { AttachmentSample } from "@/components/samples/attachment-sample";
 import { Callout } from "fumadocs-ui/components/callout";
-import { Tab, Tabs } from "fumadocs-ui/components/tabs";
+import { InstallCommand } from "@/components/docs/install-command";
 
 ## Overview
 
@@ -27,29 +27,7 @@ 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>
+<InstallCommand shadcn={["attachment"]} />
 
 This adds a `/components/assistant-ui/attachment.tsx` file to your project, which you can adjust as needed.
 

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

@@ -6,7 +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";
+import { InstallCommand } from "@/components/docs/install-command";
 
 <Callout>
   Markdown support is already included by default in the `Thread` component.
@@ -19,29 +19,7 @@ import { Tab, Tabs } from "fumadocs-ui/components/tabs";
 <Step>
 ### Add `markdown-text`
 
-<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>
+<InstallCommand shadcn={["markdown-text"]} />
 
 This adds a `/components/assistant-ui/markdown-text.tsx` file to your project, which you can adjust as needed.
 

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

@@ -4,7 +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";
+import { InstallCommand } from "@/components/docs/install-command";
 
 Render Mermaid diagrams in chat messages with the `mermaid-diagram` component.
 
@@ -13,29 +13,7 @@ Render Mermaid diagrams in chat messages with the `mermaid-diagram` component.
 
 ### Add `mermaid-diagram` component
 
-<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>
+<InstallCommand shadcn={["mermaid-diagram"]} />
 
 This will install the required dependencies and add the component to your project.
 

package/.docs/raw/docs/ui/Reasoning.mdx

@@ -3,7 +3,7 @@ title: Reasoning
 ---
 
 import { Steps, Step } from "fumadocs-ui/components/steps";
-import { Tab, Tabs } from "fumadocs-ui/components/tabs";
+import { InstallCommand } from "@/components/docs/install-command";
 
 ## Overview
 
@@ -16,29 +16,7 @@ The Reasoning component displays AI reasoning or thinking messages in a collapsi
 
 ### Add `reasoning`
 
-<Tabs items={["assistant-ui", "shadcn (namespace)", "shadcn"]}>
-  <Tab>
-
-```sh
-npx assistant-ui@latest add reasoning
-```
-
-  </Tab>
-  <Tab>
-
-```sh
-npx shadcn@latest add @assistant-ui/reasoning
-```
-
-  </Tab>
-  <Tab>
-
-```sh
-npx shadcn@latest add "https://r.assistant-ui.com/reasoning"
-```
-
-  </Tab>
-</Tabs>
+<InstallCommand shadcn={["reasoning"]} />
 
 This adds a `/components/assistant-ui/reasoning.tsx` file to your project, which you can adjust as needed.
 

package/.docs/raw/docs/ui/Scrollbar.mdx

@@ -2,22 +2,20 @@
 title: Custom Scrollbar
 ---
 
+import { InstallCommand } from "@/components/docs/install-command";
+
 If you want to show a custom scrollbar UI of the Thread.Viewport in place of the system default, you can integrate `@radix-ui/react-scroll-area`.
 An example implementation of this is [shadcn/ui's Scroll Area](https://ui.shadcn.com/docs/components/scroll-area).
 
 ## Add shadcn Scroll Area
 
-```sh
-npx shadcn@latest add scroll-area
-```
+<InstallCommand shadcn={["scroll-area"]} />
 
 ### @radix-ui/react-scroll-area v1.2.0 release candidate required
 
 The v1.2.0-rc.x release candidate can be installed via
 
-```sh
-pnpm add @radix-ui/react-scroll-area@next
-```
+<InstallCommand npm={["@radix-ui/react-scroll-area@next"]} />
 
 ## Additional Styles
 

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

@@ -5,7 +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";
+import { InstallCommand } from "@/components/docs/install-command";
 
 Syntax highlighting for code blocks in markdown.
 
@@ -26,29 +26,7 @@ Syntax highlighting for code blocks in markdown.
 
 #### Add `shiki-highlighter`
 
-<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>
+<InstallCommand shadcn={["shiki-highlighter"]} />
 
 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
@@ -237,29 +215,7 @@ For more information, see [Shiki's documentation on dual and multi themes](https
 
 #### Add `syntax-highlighter`
 
-<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>
+<InstallCommand shadcn={["syntax-highlighter"]} />
 
     Adds a `/components/assistant-ui/syntax-highlighter.tsx` file to your project and installs the `react-syntax-highlighter` dependency.