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

package/.docs/raw/docs/runtimes/assistant-transport.mdx

@@ -1,10 +1,8 @@
 ---
 title: Assistant Transport
+description: Stream agent state to the frontend and handle user commands for custom agents.
 ---
 
-import { Callout } from "fumadocs-ui/components/callout";
-import { Tab, Tabs } from "fumadocs-ui/components/tabs";
-
 If you've built an agent as a Python or TypeScript script and want to add a UI to it, you need to solve two problems: streaming updates to the frontend and integrating with the UI framework. Assistant Transport handles both.
 
 Assistant Transport streams your agent's complete state to the frontend in real-time. Unlike traditional approaches that only stream predefined message types (like text or tool calls), it streams your entire agent state—whatever structure your agent uses internally.
@@ -71,7 +69,8 @@ The backend endpoint receives POST requests with the following payload:
   state: T, // The previous state that the frontend has access to
   commands: AssistantTransportCommand[],
   system?: string,
-  tools?: ToolDefinition[]
+  tools?: ToolDefinition[],
+  threadId: string // The current thread/conversation identifier
 }
 ```
 
@@ -483,9 +482,11 @@ const runtime = useAssistantTransportRuntime({
     "Authorization": `Bearer ${await getAccessToken()}`,
     "X-Request-ID": crypto.randomUUID(),
   }),
-  body: {
+  body: async () => ({
     customField: "value",
-  },
+    requestId: crypto.randomUUID(),
+    timestamp: Date.now(),
+  }),
 });
 ```
 

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

@@ -1,10 +1,9 @@
 ---
 title: Custom Thread List
+description: Plug a custom thread database for multi-thread persistence.
 ---
 
-import { Callout } from "fumadocs-ui/components/callout";
-import { Steps, Step } from "fumadocs-ui/components/steps";
-import { ParametersTable } from "@/components/docs";
+import { ParametersTable } from "@/components/docs/tables/ParametersTable";
 
 ## Overview
 
@@ -217,6 +216,42 @@ When the hook mounts it calls `list()` on your adapter, hydrates existing thread
 - `generateTitle()` powers the automatic title button and expects an `AssistantStream`.
 - Provide a `runtimeHook` that always returns a fresh runtime instance per active thread.
 
+## Avoiding Race Conditions in History Adapters
+
+<Callout type="warn">
+When implementing a custom history adapter, you must await thread initialization before saving messages. Failing to do so can cause the first message to be lost due to a race condition.
+</Callout>
+
+If you're building a history adapter that persists messages to your own database, use `api.threadListItem().initialize()` to ensure the thread is fully initialized before saving:
+
+```tsx
+import { useAssistantApi } from "@assistant-ui/react";
+
+// Inside your unstable_Provider component
+const api = useAssistantApi();
+
+const history = useMemo<ThreadHistoryAdapter>(
+  () => ({
+    async append(message) {
+      // Wait for initialization to complete and get the remoteId
+      const { remoteId } = await api.threadListItem().initialize();
+
+      // Now safe to save the message using the remoteId
+      await saveMessageToDatabase(remoteId, message);
+    },
+    // ...
+  }),
+  [api],
+);
+```
+
+The `initialize()` method:
+- Can be called multiple times safely
+- Always waits for the initial `initialize()` call to complete
+- Returns the same `remoteId` on subsequent calls
+
+See `AssistantCloudThreadHistoryAdapter` in the source code for a production-ready reference implementation.
+
 ## 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:

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

@@ -1,12 +1,10 @@
 ---
 title: ExternalStoreRuntime
+description: Bring your own Redux, Zustand, or state manager.
 ---
 
-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";
+import { ParametersTable } from "@/components/docs/tables/ParametersTable";
+import { InstallCommand } from "@/components/docs/fumadocs/install/install-command";
 
 ## Overview
 
@@ -1618,9 +1616,9 @@ Enable multi-thread support with custom thread management.
 
 ### Related Runtime APIs
 
-- [AssistantRuntime API](/docs/api-reference/runtimes/AssistantRuntime) - Core runtime interface and methods
-- [ThreadRuntime API](/docs/api-reference/runtimes/ThreadRuntime) - Thread-specific operations and state management
-- [Runtime Providers](/docs/api-reference/context-providers/AssistantRuntimeProvider) - Context providers for runtime integration
+- [AssistantRuntime API](/docs/api-reference/runtimes/assistant-runtime) - Core runtime interface and methods
+- [ThreadRuntime API](/docs/api-reference/runtimes/thread-runtime) - Thread-specific operations and state management
+- [Runtime Providers](/docs/api-reference/context-providers/assistant-runtime-provider) - Context providers for runtime integration
 
 ## Related Resources
 

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

@@ -1,12 +1,10 @@
 ---
 title: LocalRuntime
+description: Quickest path to a working chat. Handles state while you handle the API.
 ---
 
-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";
+import { ParametersTable } from "@/components/docs/tables/ParametersTable";
+import { InstallCommand } from "@/components/docs/fumadocs/install/install-command";
 
 ## Overview
 
@@ -415,7 +413,7 @@ For custom thread storage, use `useRemoteThreadListRuntime` with your own adapte
 ```tsx
 import {
   unstable_useRemoteThreadListRuntime as useRemoteThreadListRuntime,
-  useThreadListItem,
+  useAssistantApi,
   RuntimeAdapterProvider,
   AssistantRuntimeProvider,
   type unstable_RemoteThreadListAdapter as RemoteThreadListAdapter,
@@ -487,13 +485,13 @@ export function MyRuntimeProvider({ children }) {
       // The Provider component adds thread-specific adapters
       unstable_Provider: ({ children }) => {
         // This runs in the context of each thread
-        const threadListItem = useThreadListItem();
-        const remoteId = threadListItem.remoteId;
+        const api = useAssistantApi();
 
         // Create thread-specific history adapter
         const history = useMemo<ThreadHistoryAdapter>(
           () => ({
             async load() {
+              const { remoteId } = api.threadListItem().getState();
               if (!remoteId) return { messages: [] };
 
               const messages = await db.messages.findByThreadId(remoteId);
@@ -508,10 +506,8 @@ export function MyRuntimeProvider({ children }) {
             },
 
             async append(message) {
-              if (!remoteId) {
-                console.warn("Cannot save message - thread not initialized");
-                return;
-              }
+              // Wait for initialization to get remoteId (safe to call multiple times)
+              const { remoteId } = await api.threadListItem().initialize();
 
               await db.messages.create({
                 threadId: remoteId,
@@ -522,7 +518,7 @@ export function MyRuntimeProvider({ children }) {
               });
             },
           }),
-          [remoteId],
+          [api],
         );
 
         const adapters = useMemo(() => ({ history }), [history]);
@@ -570,6 +566,31 @@ The complete multi-thread implementation requires:
 
 Without the history adapter, threads would have no message persistence, making them effectively useless. The Provider pattern allows you to add thread-specific functionality while keeping the runtime creation simple.
 
+<Callout type="warn" title="Avoiding Race Conditions">
+When implementing a history adapter, `append()` may be called before the thread is fully initialized, causing the first message to be lost. Instead of checking `if (!remoteId)`, await initialization to ensure the `remoteId` is available:
+
+```tsx
+import { useAssistantApi } from "@assistant-ui/react";
+
+// Inside your unstable_Provider component
+const api = useAssistantApi();
+
+const history = useMemo<ThreadHistoryAdapter>(
+  () => ({
+    async append(message) {
+      // Wait for initialization - safe to call multiple times
+      const { remoteId } = await api.threadListItem().initialize();
+      await db.messages.create({ threadId: remoteId, ...message });
+    },
+    // ...
+  }),
+  [api],
+);
+```
+
+See `AssistantCloudThreadHistoryAdapter` in the source for a production reference.
+</Callout>
+
 #### Database Schema Example
 
 ```typescript
@@ -877,7 +898,7 @@ const OpenAIAdapter: ChatModelAdapter = {
 
 ```tsx
 const CustomAPIAdapter: ChatModelAdapter = {
-  async run({ messages, abortSignal }) {
+  async run({ messages, abortSignal, unstable_threadId }) {
     const response = await fetch("/api/chat", {
       method: "POST",
       headers: { "Content-Type": "application/json" },
@@ -886,6 +907,7 @@ const CustomAPIAdapter: ChatModelAdapter = {
           role: m.role,
           content: m.content,
         })),
+        threadId: unstable_threadId, // Pass thread ID to your backend
       }),
       signal: abortSignal,
     });
@@ -1101,6 +1123,11 @@ Parameters passed to the `run` function.
       description: "Additional context including configuration and tools",
       required: true,
     },
+    {
+      name: "unstable_threadId",
+      type: "string | undefined",
+      description: "The current thread/conversation identifier. Useful for passing to your backend API.",
+    },
   ]}
 />
 
@@ -1230,8 +1257,8 @@ Interface for implementing custom thread list storage.
 
 ### Related Runtime APIs
 
-- [AssistantRuntime API](/docs/api-reference/runtimes/AssistantRuntime) - Core runtime interface and methods
-- [ThreadRuntime API](/docs/api-reference/runtimes/ThreadRuntime) - Thread-specific operations and state management
+- [AssistantRuntime API](/docs/api-reference/runtimes/assistant-runtime) - Core runtime interface and methods
+- [ThreadRuntime API](/docs/api-reference/runtimes/thread-runtime) - Thread-specific operations and state management
 
 ## Related Resources
 

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

@@ -1,10 +1,9 @@
 ---
 title: Data Stream Protocol
+description: Integration with data stream protocol endpoints for streaming AI responses.
 ---
 
-import { Step, Steps } from "fumadocs-ui/components/steps";
-import { Callout } from "fumadocs-ui/components/callout";
-import { InstallCommand } from "@/components/docs/install-command";
+import { InstallCommand } from "@/components/docs/fumadocs/install/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.
 
@@ -63,7 +62,7 @@ Your backend endpoint should accept POST requests and return data stream respons
 import { createAssistantStreamResponse } from "assistant-stream";
 
 export async function POST(request: Request) {
-  const { messages, tools, system } = await request.json();
+  const { messages, tools, system, threadId } = await request.json();
 
   return createAssistantStreamResponse(async (controller) => {
     // Process the request with your AI provider
@@ -81,6 +80,12 @@ export async function POST(request: Request) {
 }
 ```
 
+The request body includes:
+- `messages` - The conversation history
+- `tools` - Available tool definitions
+- `system` - System prompt (if configured)
+- `threadId` - The current thread/conversation identifier
+
 </Step>
 
 </Steps>
@@ -114,6 +119,22 @@ const runtime = useDataStreamRuntime({
 });
 ```
 
+### Dynamic Body
+
+```tsx
+const runtime = useDataStreamRuntime({
+  api: "/api/chat",
+  headers: async () => ({
+    "Authorization": `Bearer ${await getAuthToken()}`,
+  }),
+  body: async () => ({
+    requestId: crypto.randomUUID(),
+    timestamp: Date.now(),
+    signature: await computeSignature(),
+  }),
+});
+```
+
 ### Event Callbacks
 
 ```tsx
@@ -136,6 +157,13 @@ const runtime = useDataStreamRuntime({
 
 ## Tool Integration
 
+<Callout type="warn">
+  Human-in-the-loop tools (using `human()` for tool interrupts) are not supported
+  in the data stream runtime. If you need human approval workflows or interactive
+  tool UIs, consider using [LocalRuntime](/docs/runtimes/custom/local) or
+  [Assistant Cloud](/docs/cloud/overview) instead.
+</Callout>
+
 ### Frontend Tools
 
 Use the `frontendTools` helper to serialize client-side tools:

package/.docs/raw/docs/runtimes/helicone.mdx

@@ -1,5 +1,6 @@
 ---
 title: Helicone
+description: Configure Helicone proxy for OpenAI API logging and monitoring.
 ---
 
 Helicone acts as a proxy for your OpenAI API calls, enabling detailed logging and monitoring. To integrate, update your API base URL and add the Helicone-Auth header.

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

@@ -1,5 +1,6 @@
 ---
 title: Getting Started
+description: Connect to LangGraph Cloud API for agent workflows with streaming.
 ---
 
 ## Requirements
@@ -10,7 +11,6 @@ The state of the graph you are using must have a `messages` key with a list of L
 
 ## New project from template
 
-import { Steps, Step } from "fumadocs-ui/components/steps";
 
 <Steps>
   <Step>
@@ -36,7 +36,7 @@ NEXT_PUBLIC_LANGGRAPH_ASSISTANT_ID=your_graph_id
   </Step>
 </Steps>
 
-import { InstallCommand } from "@/components/docs/install-command";
+import { InstallCommand } from "@/components/docs/fumadocs/install/install-command";
 
 ## Installation in existing React project
 
@@ -266,7 +266,7 @@ NEXT_PUBLIC_LANGGRAPH_ASSISTANT_ID=your_graph_id
 
 ### Setup UI components
 
-Follow the [UI Components](/docs/ui/shadcn-ui/Thread) guide to setup the UI components.
+Follow the [UI Components](/docs/ui/thread) guide to setup the UI components.
 
   </Step>
 </Steps>

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

@@ -1,5 +1,6 @@
 ---
 title: "Introduction"
+description: Build a stockbroker assistant with LangGraph and assistant-ui.
 ---
 
 import { redirect } from "next/navigation";

package/.docs/raw/docs/runtimes/langgraph/tutorial/introduction.mdx

@@ -1,5 +1,6 @@
 ---
 title: "Introduction"
+description: Build a stockbroker assistant with LangGraph and assistant-ui.
 ---
 
 In this tutorial, we will build a stockbroker assistant using LangChain.js, LangGraph.js and assistant-ui.

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

@@ -1,5 +1,6 @@
 ---
 title: "Part 1: Setup frontend"
+description: Create a Next.js project with the LangGraph assistant-ui template.
 ---
 
 ## Create a new project

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

@@ -1,5 +1,6 @@
 ---
 title: "Part 2: Generative UI"
+description: Display stock ticker information with generative UI components.
 ---
 
 In the previous step, we set up the frontend to connect to a LangGraph Cloud endpoint.

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

@@ -1,11 +1,12 @@
 ---
 title: "Part 3: Approval UI"
+description: Add human-in-the-loop approval for tool calls.
 ---
 
 ## Background: LangGraph implementation details
 
 import Image from "next/image";
-import { InstallCommand } from "@/components/docs/install-command";
+import { InstallCommand } from "@/components/docs/fumadocs/install/install-command";
 import approval from "./images/stockbroker-langgraph.png";
 
 <Image

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

@@ -1,5 +1,6 @@
 ---
 title: LangChain LangServe
+description: Connect to LangServe endpoints via Vercel AI SDK integration.
 ---
 
 <Callout type="warning">
@@ -12,8 +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";
+import { InstallCommand } from "@/components/docs/fumadocs/install/install-command";
 
 <Steps>
   <Step>

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

@@ -1,10 +1,9 @@
 ---
 title: Full-Stack Integration
+description: Integrate Mastra directly into Next.js API routes.
 ---
 
-import { Step, Steps } from "fumadocs-ui/components/steps";
-import { Callout } from "fumadocs-ui/components/callout";
-import { InstallCommand } from "@/components/docs/install-command";
+import { InstallCommand } from "@/components/docs/fumadocs/install/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.
 
@@ -28,7 +27,7 @@ This command installs necessary dependencies and creates basic configuration fil
 <Callout title="Need Help?">
   For detailed setup instructions, including adding API keys, basic
   configuration, and manual setup steps, please refer to the main [Getting
-  Started guide](/docs/getting-started).
+  Started guide](/docs).
 </Callout>
 
 </Step>
@@ -138,7 +137,7 @@ This code creates a new Mastra `Agent` named `chef-agent`.
 - `instructions`: Defines the agent's persona and primary goal.
 - `model`: Specifies the language model the agent will use (in this case, OpenAI's GPT-4o Mini via Mastra's model router).
 
-Make sure you have set up your OpenAI API key as described in the [Getting Started guide](/docs/getting-started).
+Make sure you have set up your OpenAI API key as described in the [Getting Started guide](/docs).
 
 </Step>
 <Step>

package/.docs/raw/docs/runtimes/mastra/overview.mdx

@@ -1,5 +1,6 @@
 ---
 title: Overview
+description: TypeScript agent framework for AI applications with tools and workflows.
 ---
 
 Mastra is an open-source TypeScript agent framework designed to provide the essential primitives for building AI applications. It enables developers to create AI agents with memory and tool-calling capabilities, implement deterministic LLM workflows, and leverage RAG for knowledge integration. With features like model routing, workflow graphs, and automated evals, Mastra provides a complete toolkit for developing, testing, and deploying AI applications.

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

@@ -1,10 +1,9 @@
 ---
 title: Separate Server Integration
+description: Run Mastra as a standalone server connected to your frontend.
 ---
 
-import { Step, Steps } from "fumadocs-ui/components/steps";
-import { Callout } from "fumadocs-ui/components/callout";
-import { InstallCommand } from "@/components/docs/install-command";
+import { InstallCommand } from "@/components/docs/fumadocs/install/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.
 
@@ -153,7 +152,7 @@ This command installs the necessary assistant-ui dependencies and sets up basic
 <Callout title="Need Help?">
   For detailed setup instructions for assistant-ui, including manual setup
   steps, please refer to the main [Getting Started
-  guide](/docs/getting-started).
+  guide](/docs).
 </Callout>
 
 In the next step, we will configure this frontend to communicate with the separate Mastra server instead of using the default API route.

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

@@ -1,10 +1,8 @@
 ---
 title: Picking a Runtime
+description: Which runtime fits your backend? Decision guide for common setups.
 ---
 
-import { Card, Cards } from "fumadocs-ui/components/card";
-import { Callout } from "fumadocs-ui/components/callout";
-
 Choosing the right runtime is crucial for your assistant-ui implementation. This guide helps you navigate the options based on your specific needs.
 
 ## Quick Decision Tree
@@ -187,7 +185,7 @@ const runtime = useExternalStoreRuntime({
 
 Explore our implementation examples:
 
-- **[AI SDK Example](https://github.com/assistant-ui/assistant-ui/tree/main/examples/with-ai-sdk)** - Vercel AI SDK with `useChatRuntime`
+- **[AI SDK v6 Example](https://github.com/assistant-ui/assistant-ui/tree/main/examples/with-ai-sdk-v6)** - Vercel AI SDK with `useChatRuntime`
 - **[External Store Example](https://github.com/assistant-ui/assistant-ui/tree/main/examples/with-external-store)** - `ExternalStoreRuntime` with custom state
 - **[Assistant Cloud Example](https://github.com/assistant-ui/assistant-ui/tree/main/examples/with-cloud)** - Multi-thread with cloud persistence
 - **[LangGraph Example](https://github.com/assistant-ui/assistant-ui/tree/main/examples/with-langgraph)** - Agent workflows

package/.docs/raw/docs/ui/assistant-modal.mdx

@@ -0,0 +1,163 @@
+---
+title: AssistantModal
+description: Floating chat bubble for support widgets and help desks.
+---
+
+import { ParametersTable } from "@/components/docs/tables/ParametersTable";
+import { InstallCommand } from "@/components/docs/fumadocs/install/install-command";
+import { AssistantModalSample } from "@/components/docs/samples/assistant-modal";
+
+A floating chat modal built on Radix UI Popover. Ideal for support widgets, help desks, and embedded assistants.
+
+<AssistantModalSample />
+
+## Getting Started
+
+<Steps>
+  <Step>
+
+### Add `assistant-modal`
+
+<InstallCommand shadcn={["assistant-modal"]} />
+
+This adds `/components/assistant-ui/assistant-modal.tsx` to your project, which you can adjust as needed.
+
+  </Step>
+  <Step>
+
+### Use in your application
+
+```tsx title="/app/page.tsx" {1,6}
+import { AssistantModal } from "@/components/assistant-ui/assistant-modal";
+
+export default function Home() {
+  return (
+    <div className="h-full">
+      <AssistantModal />
+    </div>
+  );
+}
+```
+
+  </Step>
+</Steps>
+
+## Anatomy
+
+The AssistantModal component is built with the following primitives:
+
+```tsx
+import { AssistantModalPrimitive } from "@assistant-ui/react";
+
+<AssistantModalPrimitive.Root>
+  <AssistantModalPrimitive.Anchor />
+  <AssistantModalPrimitive.Trigger />
+  <AssistantModalPrimitive.Content>
+    {/* Thread component goes here */}
+  </AssistantModalPrimitive.Content>
+</AssistantModalPrimitive.Root>
+```
+
+## API Reference
+
+### Root
+
+Contains all parts of the modal. Based on Radix UI Popover.
+
+<ParametersTable
+  type="AssistantModalPrimitiveRootProps"
+  parameters={[
+    {
+      name: "defaultOpen",
+      type: "boolean",
+      description: "The initial open state when uncontrolled.",
+    },
+    {
+      name: "open",
+      type: "boolean",
+      description: "The controlled open state.",
+    },
+    {
+      name: "onOpenChange",
+      type: "(open: boolean) => void",
+      description: "Callback when the open state changes.",
+    },
+    {
+      name: "unstable_openOnRunStart",
+      type: "boolean",
+      description: "Automatically open the modal when the assistant starts running.",
+    },
+  ]}
+/>
+
+### Trigger
+
+A button that toggles the modal open/closed state.
+
+<ParametersTable
+  type="AssistantModalPrimitiveTriggerProps"
+  parameters={[
+    {
+      name: "asChild",
+      type: "boolean",
+      default: "false",
+      description: "Merge props with child element instead of rendering a wrapper button.",
+    },
+  ]}
+/>
+
+This primitive renders a `<button>` element unless `asChild` is set.
+
+### Content
+
+The popover content container that holds the chat interface.
+
+<ParametersTable
+  type="AssistantModalPrimitiveContentProps"
+  parameters={[
+    {
+      name: "side",
+      type: "'top' | 'right' | 'bottom' | 'left'",
+      default: "'top'",
+      description: "The preferred side of the anchor to render against.",
+    },
+    {
+      name: "align",
+      type: "'start' | 'center' | 'end'",
+      default: "'end'",
+      description: "The preferred alignment against the anchor.",
+    },
+    {
+      name: "dissmissOnInteractOutside",
+      type: "boolean",
+      description: "Whether to close the modal when clicking outside.",
+    },
+    {
+      name: "asChild",
+      type: "boolean",
+      default: "false",
+      description: "Merge props with child element instead of rendering a wrapper div.",
+    },
+  ]}
+/>
+
+### Anchor
+
+An optional anchor element to position the modal relative to.
+
+<ParametersTable
+  type="AssistantModalPrimitiveAnchorProps"
+  parameters={[
+    {
+      name: "asChild",
+      type: "boolean",
+      default: "false",
+      description: "Merge props with child element instead of rendering a wrapper div.",
+    },
+  ]}
+/>
+
+## Related Components
+
+- [Thread](/docs/ui/thread) - The main chat interface used inside the modal
+- [AssistantSidebar](/docs/ui/assistant-sidebar) - Alternative layout for side panel chat