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

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

@@ -3,8 +3,6 @@ title: ExternalStoreRuntime
 description: Bring your own Redux, Zustand, or state manager.
 ---
 
-import { ParametersTable } from "@/components/docs/tables/ParametersTable";
-import { InstallCommand } from "@/components/docs/fumadocs/install/install-command";
 
 ## Overview
 
@@ -154,7 +152,7 @@ graph TD
     <InstallCommand npm={["@assistant-ui/react"]} />
 
   </Step>
-  
+
   <Step>
     ### Create Runtime Provider
 
@@ -168,45 +166,45 @@ graph TD
       useExternalStoreRuntime,
     } from "@assistant-ui/react";
     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) => {
         if (message.content.length !== 1 || message.content[0]?.type !== "text")
           throw new Error("Only text content is supported");
-    
+
         const userMessage: ThreadMessageLike = {
           role: "user",
           content: [{ type: "text", text: message.content[0].text }],
         };
         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: [{ type: "text", text: "Hello, world!" }],
         };
         setMessages((currentMessages) => [...currentMessages, assistantMessage]);
       };
-    
+
       const runtime = useExternalStoreRuntime<ThreadMessageLike>({
         messages,
         setMessages,
         onNew,
         convertMessage,
       });
-    
+
       return (
         <AssistantRuntimeProvider runtime={runtime}>
           {children}

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

@@ -3,8 +3,6 @@ title: LocalRuntime
 description: Quickest path to a working chat. Handles state while you handle the API.
 ---
 
-import { ParametersTable } from "@/components/docs/tables/ParametersTable";
-import { InstallCommand } from "@/components/docs/fumadocs/install/install-command";
 
 ## Overview
 
@@ -302,37 +300,46 @@ const MyModelAdapter: ChatModelAdapter = {
 
 ### Basic Tool Definition
 
+Tools should be registered using the `Tools()` API with `useAui()`:
+
 ```tsx
-const tools = [
-  {
-    type: "function",
-    function: {
-      name: "get_weather",
-      description: "Get the current weather in a location",
-      parameters: {
-        type: "object",
-        properties: {
-          location: {
-            type: "string",
-            description: "The city and state, e.g. San Francisco, CA",
-          },
-          unit: {
-            type: "string",
-            enum: ["celsius", "fahrenheit"],
-          },
-        },
-        required: ["location"],
-      },
+import { useAui, Tools, type Toolkit } from "@assistant-ui/react";
+import { z } from "zod";
+
+// Define your toolkit
+const myToolkit: Toolkit = {
+  getWeather: {
+    description: "Get the current weather in a location",
+    parameters: z.object({
+      location: z.string().describe("The city and state, e.g. San Francisco, CA"),
+      unit: z.enum(["celsius", "fahrenheit"]).default("celsius"),
+    }),
+    execute: async ({ location, unit }) => {
+      const weather = await fetchWeatherAPI(location, unit);
+      return weather;
     },
   },
-];
+};
 
-const runtime = useLocalRuntime(MyModelAdapter, {
-  // Tools are passed via context
-  context: { tools },
-});
+// Register tools in your runtime provider
+function MyRuntimeProvider({ children }: { children: React.ReactNode }) {
+  const runtime = useLocalRuntime(MyModelAdapter);
+
+  // Register all tools
+  const aui = useAui({
+    tools: Tools({ toolkit: myToolkit }),
+  });
+
+  return (
+    <AssistantRuntimeProvider aui={aui} runtime={runtime}>
+      {children}
+    </AssistantRuntimeProvider>
+  );
+}
 ```
 
+The tools will be available to your adapter via the `context` parameter in the `run` function. See the [Tools guide](/docs/guides/tools) for more details on tool registration and advanced features.
+
 ### Human-in-the-Loop Approval
 
 Require user confirmation before executing certain tools:
@@ -413,7 +420,7 @@ For custom thread storage, use `useRemoteThreadListRuntime` with your own adapte
 ```tsx
 import {
   unstable_useRemoteThreadListRuntime as useRemoteThreadListRuntime,
-  useAssistantApi,
+  useAui,
   RuntimeAdapterProvider,
   AssistantRuntimeProvider,
   type unstable_RemoteThreadListAdapter as RemoteThreadListAdapter,
@@ -485,13 +492,13 @@ export function MyRuntimeProvider({ children }) {
       // The Provider component adds thread-specific adapters
       unstable_Provider: ({ children }) => {
         // This runs in the context of each thread
-        const api = useAssistantApi();
+        const aui = useAui();
 
         // Create thread-specific history adapter
         const history = useMemo<ThreadHistoryAdapter>(
           () => ({
             async load() {
-              const { remoteId } = api.threadListItem().getState();
+              const { remoteId } = aui.threadListItem().getState();
               if (!remoteId) return { messages: [] };
 
               const messages = await db.messages.findByThreadId(remoteId);
@@ -507,7 +514,7 @@ export function MyRuntimeProvider({ children }) {
 
             async append(message) {
               // Wait for initialization to get remoteId (safe to call multiple times)
-              const { remoteId } = await api.threadListItem().initialize();
+              const { remoteId } = await aui.threadListItem().initialize();
 
               await db.messages.create({
                 threadId: remoteId,
@@ -518,7 +525,7 @@ export function MyRuntimeProvider({ children }) {
               });
             },
           }),
-          [api],
+          [aui],
         );
 
         const adapters = useMemo(() => ({ history }), [history]);
@@ -570,21 +577,21 @@ Without the history adapter, threads would have no message persistence, making t
 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";
+import { useAui } from "@assistant-ui/react";
 
 // Inside your unstable_Provider component
-const api = useAssistantApi();
+const aui = useAui();
 
 const history = useMemo<ThreadHistoryAdapter>(
   () => ({
     async append(message) {
       // Wait for initialization - safe to call multiple times
-      const { remoteId } = await api.threadListItem().initialize();
+      const { remoteId } = await aui.threadListItem().initialize();
       await db.messages.create({ threadId: remoteId, ...message });
     },
     // ...
   }),
-  [api],
+  [aui],
 );
 ```
 

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

@@ -3,7 +3,6 @@ title: Data Stream Protocol
 description: Integration with data stream protocol endpoints for streaming AI responses.
 ---
 
-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.
 
@@ -229,17 +228,50 @@ The `useCloudRuntime` hook is currently under active development and not yet rea
 
 ## Message Conversion
 
-The package includes utilities for converting between message formats:
+### Framework-Agnostic Conversion (Recommended)
+
+For custom integrations, use the framework-agnostic utilities from `assistant-stream`:
+
+```tsx
+import { toGenericMessages, toToolsJSONSchema } from "assistant-stream";
+
+// Convert messages to a generic format
+const genericMessages = toGenericMessages(messages);
+
+// Convert tools to JSON Schema format
+const toolSchemas = toToolsJSONSchema(tools);
+```
+
+The `GenericMessage` format can be easily converted to any LLM provider format:
+
+```tsx
+import type { GenericMessage } from "assistant-stream";
+
+// GenericMessage is a union of:
+// - { role: "system"; content: string }
+// - { role: "user"; content: (GenericTextPart | GenericFilePart)[] }
+// - { role: "assistant"; content: (GenericTextPart | GenericToolCallPart)[] }
+// - { role: "tool"; content: GenericToolResultPart[] }
+```
+
+### AI SDK Specific Conversion
+
+For AI SDK integration, use `toLanguageModelMessages`:
 
 ```tsx
 import { toLanguageModelMessages } from "@assistant-ui/react-data-stream";
 
-// Convert assistant-ui messages to language model format
+// Convert to AI SDK LanguageModelV2Message format
 const languageModelMessages = toLanguageModelMessages(messages, {
   unstable_includeId: true, // Include message IDs
 });
 ```
 
+<Callout type="info">
+`toLanguageModelMessages` internally uses `toGenericMessages` and adds AI SDK-specific transformations.
+For new custom integrations, prefer using `toGenericMessages` directly.
+</Callout>
+
 ## Error Handling
 
 The runtime automatically handles common error scenarios:

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

@@ -36,7 +36,6 @@ NEXT_PUBLIC_LANGGRAPH_ASSISTANT_ID=your_graph_id
   </Step>
 </Steps>
 
-import { InstallCommand } from "@/components/docs/fumadocs/install/install-command";
 
 ## Installation in existing React project
 
@@ -232,7 +231,7 @@ export function MyAssistant() {
 
 ### Use the `MyAssistant` component
 
-```tsx twoslash title="@/app/page.tsx" {2,8}
+```tsx twoslash title="@/app/page.tsx" {1,6}
 // @include: MyAssistant
 // @filename: /app/page.tsx
 // ---cut---

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

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

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

@@ -13,7 +13,6 @@ Integration with a LangServe server via Vercel AI SDK.
 
 ## Getting Started
 
-import { InstallCommand } from "@/components/docs/fumadocs/install/install-command";
 
 <Steps>
   <Step>

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

@@ -3,7 +3,6 @@ title: Full-Stack Integration
 description: Integrate Mastra directly into Next.js API routes.
 ---
 
-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.
 

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

@@ -3,7 +3,6 @@ title: Separate Server Integration
 description: Run Mastra as a standalone server connected to your frontend.
 ---
 
-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.
 

package/.docs/raw/docs/ui/accordion.mdx

@@ -0,0 +1,259 @@
+---
+title: Accordion
+description: A vertically stacked set of interactive headings that reveal or hide content sections.
+links:
+  - label: Radix UI Accordion
+    url: https://www.radix-ui.com/primitives/docs/components/accordion
+---
+
+import { PreviewCode } from "@/components/docs/preview-code.server";
+import {
+  AccordionSample,
+  AccordionVariantsSample,
+  AccordionMultipleSample,
+  AccordionWithIconsSample,
+  AccordionControlledSample,
+  AccordionFAQSample,
+} from "@/components/docs/samples/accordion";
+
+<Callout>
+  This is a **standalone component** that does not depend on the assistant-ui runtime. Use it anywhere in your application.
+</Callout>
+
+<AccordionSample />
+
+## Installation
+
+<InstallCommand shadcn={["accordion"]} />
+
+## Usage
+
+```tsx
+import {
+  Accordion,
+  AccordionItem,
+  AccordionTrigger,
+  AccordionContent,
+} from "@/components/assistant-ui/accordion";
+
+export function Example() {
+  return (
+    <Accordion type="single" collapsible>
+      <AccordionItem value="item-1">
+        <AccordionTrigger>Section 1</AccordionTrigger>
+        <AccordionContent>Content for section 1.</AccordionContent>
+      </AccordionItem>
+      <AccordionItem value="item-2">
+        <AccordionTrigger>Section 2</AccordionTrigger>
+        <AccordionContent>Content for section 2.</AccordionContent>
+      </AccordionItem>
+    </Accordion>
+  );
+}
+```
+
+## Examples
+
+### Variants
+
+Use the `variant` prop on `Accordion` to change the visual style. Child components inherit the variant automatically.
+
+<AccordionVariantsSample />
+
+```tsx
+// Default - border-bottom separator
+<Accordion type="single" collapsible variant="default">
+  <AccordionItem value="item-1">
+    <AccordionTrigger>...</AccordionTrigger>
+    <AccordionContent>...</AccordionContent>
+  </AccordionItem>
+</Accordion>
+
+// Outline - bordered container
+<Accordion type="single" collapsible variant="outline">
+  <AccordionItem value="item-1">
+    <AccordionTrigger>...</AccordionTrigger>
+    <AccordionContent>...</AccordionContent>
+  </AccordionItem>
+</Accordion>
+
+// Ghost - separated cards
+<Accordion type="single" collapsible variant="ghost">
+  <AccordionItem value="item-1">
+    <AccordionTrigger>...</AccordionTrigger>
+    <AccordionContent>...</AccordionContent>
+  </AccordionItem>
+</Accordion>
+```
+
+### Multiple Items Open
+
+Use `type="multiple"` to allow multiple items to be open simultaneously.
+
+<AccordionMultipleSample />
+
+```tsx
+<Accordion type="multiple">
+  <AccordionItem value="item-1">
+    <AccordionTrigger>First Section</AccordionTrigger>
+    <AccordionContent>Content 1</AccordionContent>
+  </AccordionItem>
+  <AccordionItem value="item-2">
+    <AccordionTrigger>Second Section</AccordionTrigger>
+    <AccordionContent>Content 2</AccordionContent>
+  </AccordionItem>
+</Accordion>
+```
+
+### With Icons
+
+Add icons or custom elements inside the trigger.
+
+<PreviewCode file="components/docs/samples/accordion" name="AccordionWithIconsSample">
+  <AccordionWithIconsSample />
+</PreviewCode>
+
+### Controlled
+
+Use `value` and `onValueChange` for controlled accordion state.
+
+<PreviewCode file="components/docs/samples/accordion" name="AccordionControlledSample">
+  <AccordionControlledSample />
+</PreviewCode>
+
+### FAQ Section
+
+A practical example of using accordion for a FAQ section.
+
+<PreviewCode file="components/docs/samples/accordion" name="AccordionFAQSample">
+  <AccordionFAQSample />
+</PreviewCode>
+
+## API Reference
+
+### Composable API
+
+| Component | Description |
+|-----------|-------------|
+| `Accordion` | The root component that manages accordion state and variant. |
+| `AccordionItem` | A single collapsible section container. |
+| `AccordionTrigger` | The clickable header that toggles content visibility. |
+| `AccordionContent` | The collapsible content panel. |
+
+### Accordion
+
+The root component that manages accordion state. Set `variant` here to style all child components.
+
+<ParametersTable
+  type="AccordionProps"
+  parameters={[
+    {
+      name: "type",
+      type: '"single" | "multiple"',
+      required: true,
+      description: "Whether only one or multiple items can be open at once.",
+    },
+    {
+      name: "collapsible",
+      type: "boolean",
+      default: "false",
+      description: "When type is 'single', allows closing the open item by clicking it again.",
+    },
+    {
+      name: "defaultValue",
+      type: "string | string[]",
+      description: "The default open item(s) (uncontrolled).",
+    },
+    {
+      name: "value",
+      type: "string | string[]",
+      description: "The controlled open item(s).",
+    },
+    {
+      name: "onValueChange",
+      type: "(value: string | string[]) => void",
+      description: "Callback when the open item(s) change.",
+    },
+    {
+      name: "variant",
+      type: '"default" | "outline" | "ghost"',
+      default: '"default"',
+      description: "The visual style of the accordion. Child components inherit this automatically.",
+    },
+    {
+      name: "className",
+      type: "string",
+      description: "Additional CSS classes.",
+    },
+  ]}
+/>
+
+### AccordionItem
+
+A single collapsible section container.
+
+<ParametersTable
+  type="AccordionItemProps"
+  parameters={[
+    {
+      name: "value",
+      type: "string",
+      required: true,
+      description: "A unique identifier for this item.",
+    },
+    {
+      name: "disabled",
+      type: "boolean",
+      description: "Whether the item is disabled.",
+    },
+    {
+      name: "className",
+      type: "string",
+      description: "Additional CSS classes.",
+    },
+  ]}
+/>
+
+### AccordionTrigger
+
+The clickable header that toggles content visibility.
+
+<ParametersTable
+  type="AccordionTriggerProps"
+  parameters={[
+    {
+      name: "className",
+      type: "string",
+      description: "Additional CSS classes.",
+    },
+  ]}
+/>
+
+### AccordionContent
+
+The collapsible content panel.
+
+<ParametersTable
+  type="AccordionContentProps"
+  parameters={[
+    {
+      name: "className",
+      type: "string",
+      description: "Additional CSS classes.",
+    },
+  ]}
+/>
+
+### Style Variants (CVA)
+
+| Export | Description |
+|--------|-------------|
+| `accordionVariants` | Styles for the accordion container. |
+
+```tsx
+import { accordionVariants } from "@/components/assistant-ui/accordion";
+
+<div className={accordionVariants({ variant: "outline" })}>
+  Custom Accordion Container
+</div>
+```

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

@@ -3,8 +3,6 @@ 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.
@@ -44,7 +42,7 @@ export default function Home() {
 
 ## Anatomy
 
-The AssistantModal component is built with the following primitives:
+The `AssistantModal` component is built with the following primitives:
 
 ```tsx
 import { AssistantModalPrimitive } from "@assistant-ui/react";

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

@@ -3,8 +3,6 @@ title: AssistantSidebar
 description: Side panel chat for co-pilot experiences and inline assistance.
 ---
 
-import { ParametersTable } from "@/components/docs/tables/ParametersTable";
-import { InstallCommand } from "@/components/docs/fumadocs/install/install-command";
 import { AssistantSidebarSample } from "@/components/docs/samples/assistant-sidebar";
 
 A resizable side panel layout with your main content on the left and a Thread chat interface on the right. Ideal for co-pilot experiences and inline assistance.
@@ -13,7 +11,7 @@ A resizable side panel layout with your main content on the left and a Thread ch
 
 ## Getting Started
 
-<Steps> 
+<Steps>
   <Step>
 
 ### Add `assistant-sidebar`

package/.docs/raw/docs/ui/attachment.mdx

@@ -3,9 +3,7 @@ title: Attachment
 description: UI components for attaching and viewing files in messages.
 ---
 
-import { ParametersTable } from "@/components/docs/tables/ParametersTable";
 import { AttachmentSample } from "@/components/docs/samples/attachment";
-import { InstallCommand } from "@/components/docs/fumadocs/install/install-command";
 
 <AttachmentSample />