@assistant-ui/mcp-docs-server 0.1.15 → 0.1.17

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

@@ -2,10 +2,10 @@
 title: Attachments
 ---
 
-import { AttachmentSample } from "../../../components/samples/attachment-sample";
+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";
+import { InstallCommand } from "@/components/docs/install-command";
 
 Enable users to attach files to their messages, enhancing conversations with images, documents, and other content.
 
@@ -28,29 +28,7 @@ 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>
+<InstallCommand shadcn={["attachment"]} />
 
 This adds `/components/assistant-ui/attachment.tsx` to your project.
 

package/.docs/raw/docs/guides/Branching.mdx

@@ -2,7 +2,7 @@
 title: Message Branching
 ---
 
-import { BranchingSample } from "../../../components/samples/branching-sample";
+import { BranchingSample } from "@/components/samples/branching-sample";
 
 Switch between different conversation branches.
 

package/.docs/raw/docs/guides/Speech.mdx

@@ -2,7 +2,7 @@
 title: Speech
 ---
 
-import { SpeechSample } from "../../../components/samples/speech-sample";
+import { SpeechSample } from "@/components/samples/speech-sample";
 
 ## Text-to-Speech
 

package/.docs/raw/docs/guides/ToolUI.mdx

@@ -2,7 +2,7 @@
 title: Generative UI
 ---
 
-import { ToolUISample } from "../../../components/samples/tool-ui-sample";
+import { ToolUISample } from "@/components/samples/tool-ui-sample";
 import { Steps, Step } from "fumadocs-ui/components/steps";
 import { Callout } from "fumadocs-ui/components/callout";
 

package/.docs/raw/docs/legacy/styled/AssistantModal.mdx

@@ -4,6 +4,7 @@ title: AssistantModal
 
 import { Steps, Step } from "fumadocs-ui/components/steps";
 import { Tabs, Tab } from "fumadocs-ui/components/tabs";
+import { InstallCommand } from "@/components/docs/install-command";
 
 ## Overview
 
@@ -16,9 +17,7 @@ A chat bubble shown in the bottom right corner of the screen. Useful for support
 
 ### Install `@assistant-ui/react-ui`
 
-```sh npm2yarn
-npm install @assistant-ui/react-ui
-```
+<InstallCommand npm={["@assistant-ui/react-ui"]} />
 
   </Step>
   <Step>

package/.docs/raw/docs/legacy/styled/Decomposition.mdx

@@ -174,17 +174,18 @@ The text input field for the user to type a new message.
 The button to send or cancel the message.
 
 ```tsx
-import { Composer, ThreadPrimitive } from "@assistant-ui/react-ui";
+import { Composer } from "@assistant-ui/react-ui";
+import { AssistantIf } from "@assistant-ui/react";
 
 const MyComposerAction: FC = () => {
   return (
     <>
-      <ThreadPrimitive.If running={false}>
+      <AssistantIf condition={({ thread }) => !thread.isRunning}>
         <Composer.Send />
-      </ThreadPrimitive.If>
-      <ThreadPrimitive.If running>
+      </AssistantIf>
+      <AssistantIf condition={({ thread }) => thread.isRunning}>
         <Composer.Cancel />
-      </ThreadPrimitive.If>
+      </AssistantIf>
     </>
   );
 };

package/.docs/raw/docs/legacy/styled/Markdown.mdx

@@ -7,6 +7,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 { Tabs } from "fumadocs-ui/components/tabs";
+import { InstallCommand } from "@/components/docs/install-command";
 
 ## Enabling markdown support
 
@@ -15,9 +16,7 @@ import { Tabs } from "fumadocs-ui/components/tabs";
 <Step>
 ### Install `@assistant-ui/react-markdown`
 
-```sh npm2yarn
-npm install @assistant-ui/react-markdown
-```
+<InstallCommand npm={["@assistant-ui/react-markdown"]} />
 
 </Step>
 <Step>

package/.docs/raw/docs/legacy/styled/Thread.mdx

@@ -4,6 +4,7 @@ title: Thread
 
 import { Steps, Step } from "fumadocs-ui/components/steps";
 import { Tabs, Tab } from "fumadocs-ui/components/tabs";
+import { InstallCommand } from "@/components/docs/install-command";
 
 ## Overview
 
@@ -16,9 +17,7 @@ The raw message list and message composer UI. Useful for full screen chat use ca
 
 ### Install `@assistant-ui/react-ui`
 
-```sh npm2yarn
-npm install @assistant-ui/react-ui
-```
+<InstallCommand npm={["@assistant-ui/react-ui"]} />
 
   </Step>
   <Step>

package/.docs/raw/docs/react-compatibility.mdx

@@ -4,6 +4,7 @@ description: Guide for using assistant-ui with older React versions (18, 17, 16)
 ---
 
 import { Callout } from "fumadocs-ui/components/callout";
+import { InstallCommand } from "@/components/docs/install-command";
 
 <Callout type="warning" title="Older React Versions">
   Older React versions are not continuously tested. If you encounter any issues
@@ -78,11 +79,7 @@ Since the assistant-ui uses zustand internally, which depends on `useSyncExterna
 
 1. Install the required packages:
 
-```bash
-npm install use-sync-external-store patch-package
-# or
-yarn add use-sync-external-store patch-package
-```
+<InstallCommand npm={["use-sync-external-store", "patch-package"]} />
 
 2. Add a postinstall script to your package.json:
 

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

@@ -3,10 +3,11 @@ title: AI SDK v5
 ---
 
 import { Callout } from "fumadocs-ui/components/callout";
+import { InstallCommand } from "@/components/docs/install-command";
 
 ## Overview
 
-Integration with the Vercel AI SDK v5 using the new `useChatRuntime` hook from `@assistant-ui/react-ai-sdk`.  
+Integration with the Vercel AI SDK v5 using the new `useChatRuntime` hook from `@assistant-ui/react-ai-sdk`.
 This provides a streamlined way to integrate AI SDK v5 features including the new streamText API and improved TypeScript support.
 
 ## Getting Started
@@ -27,9 +28,7 @@ cd my-app
 
 ### Install AI SDK v5 and `@assistant-ui/react`
 
-```sh npm2yarn
-npm install @assistant-ui/react @assistant-ui/react-ai-sdk ai @ai-sdk/openai
-```
+<InstallCommand npm={["@assistant-ui/react", "@assistant-ui/react-ai-sdk", "ai", "@ai-sdk/openai"]} />
 
   </Step>
   <Step>

package/.docs/raw/docs/runtimes/ai-sdk/v4-legacy.mdx

@@ -3,6 +3,7 @@ title: AI SDK v4 (Legacy)
 ---
 
 import { Callout } from "fumadocs-ui/components/callout";
+import { InstallCommand } from "@/components/docs/install-command";
 
 ## Overview
 
@@ -27,9 +28,7 @@ import { Steps, Step } from "fumadocs-ui/components/steps";
 
 Install `@assistant-ui/react-data-stream` alongside assistant-ui and AI SDK v4:
 
-```sh npm2yarn
-npm install @assistant-ui/react @assistant-ui/react-data-stream ai@^4
-```
+<InstallCommand npm={["@assistant-ui/react", "@assistant-ui/react-data-stream", "ai@^4"]} />
 
   </Step>
   <Step>
@@ -92,9 +91,7 @@ export default function Home() {
 
 Alternatively, you can use the older version of the AI SDK integration package, though this version is no longer actively maintained:
 
-```sh npm2yarn
-npm install @assistant-ui/react @assistant-ui/react-ai-sdk@0.1.10 ai@^4
-```
+<InstallCommand npm={["@assistant-ui/react", "@assistant-ui/react-ai-sdk@0.1.10", "ai@^4"]} />
 
 <Callout type="warning">
   Version 0.1.10 of `@assistant-ui/react-ai-sdk` is no longer actively

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>

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.