@assistant-ui/mcp-docs-server 0.1.4 → 0.1.6

package/.docs/organized/code-examples/with-react-hook-form.md

@@ -4,7 +4,7 @@
 
 ```typescript
 import { openai } from "@ai-sdk/openai";
-import { frontendTools } from "@assistant-ui/react-ai-sdk";
+import { frontendTools } from "@assistant-ui/react-ai-sdk-v4";
 import { streamText } from "ai";
 
 export const runtime = "edge";
@@ -189,7 +189,7 @@ export default function RootLayout({
 "use client";
 
 import { AssistantRuntimeProvider } from "@assistant-ui/react";
-import { useChatRuntime } from "@assistant-ui/react-ai-sdk";
+import { useChatRuntime } from "@assistant-ui/react-ai-sdk-v4";
 
 export function MyRuntimeProvider({
   children,
@@ -1654,7 +1654,7 @@ export default nextConfig;
     "@assistant-ui/react-ai-sdk": "workspace:*",
     "@assistant-ui/react-hook-form": "workspace:*",
     "@assistant-ui/react-markdown": "workspace:*",
-    "@hookform/resolvers": "^5.1.1",
+    "@hookform/resolvers": "^5.2.1",
     "@radix-ui/react-avatar": "^1.1.10",
     "@radix-ui/react-icons": "^1.3.2",
     "@radix-ui/react-label": "^2.1.7",
@@ -1666,18 +1666,17 @@ export default nextConfig;
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "json-schema-to-zod": "^2.6.1",
-    "lucide-react": "^0.523.0",
-    "next": "15.3.4",
-    "react": "19.1.0",
-    "react-dom": "19.1.0",
-    "react-hook-form": "^7.58.1",
-    "react-resizable-panels": "^3.0.3",
+    "lucide-react": "^0.535.0",
+    "next": "15.4.5",
+    "react": "19.1.1",
+    "react-dom": "19.1.1",
+    "react-hook-form": "^7.61.1",
+    "react-resizable-panels": "^3.0.4",
     "remark-gfm": "^4.0.1",
     "tailwind-merge": "^3.3.1",
-    "tw-animate-css": "^1.3.4",
-    "zod": "^3.25.67",
-    "zod-to-json-schema": "^3.24.6",
-    "zustand": "^5.0.6"
+    "tw-animate-css": "^1.3.6",
+    "zod": "^4.0.14",
+    "zustand": "^5.0.7"
   },
   "devDependencies": {
     "@assistant-ui/x-buildutils": "workspace:*",
@@ -1685,10 +1684,10 @@ export default nextConfig;
     "@types/react": "^19",
     "@types/react-dom": "^19",
     "eslint": "^9",
-    "eslint-config-next": "15.3.4",
+    "eslint-config-next": "15.4.5",
     "postcss": "^8",
     "tailwindcss": "^4.1.11",
-    "typescript": "^5.8.3"
+    "typescript": "^5.9.2"
   }
 }
 

package/.docs/raw/docs/about-assistantui.mdx

@@ -41,4 +41,13 @@ assistant-ui helps you create beautiful, enterprise-grade AI chat interfaces in
   [Get Started in 30 Seconds](/docs/getting-started).
 </Callout>
 
+## AI Accessible Documentation
+
+Our docs are easily accessible to AI assistants through several methods:
+
+- **[MCP Docs Server](/docs/mcp-docs-server)** - Direct MCP integration for IDEs and agents
+- **`/llms.txt`** - Structured index of all documentation pages
+- **`/llms-full.txt`** - Complete documentation in a single file
+- **`.mdx` suffix** - Add `.mdx` to any page's URL for raw markdown content
+
 

package/.docs/raw/docs/cloud/persistence/ai-sdk.mdx

@@ -2,53 +2,110 @@
 title: Chat History for AI SDK
 ---
 
+import { Steps, Step } from 'fumadocs-ui/components/steps';
+import { Callout } from 'fumadocs-ui/components/callout';
+
 ## Overview
 
-With the help of assistant-cloud, you can add thread management and thread history capabilities to assistant-ui. This guide will walk you through the process of integrating assistant-cloud with the AI SDK by Vercel.
+assistant-cloud provides thread management and persistent chat history for applications built with the [AI SDK by Vercel](https://sdk.vercel.ai/). This guide shows you how to integrate cloud persistence into your AI SDK application.
+
+## Prerequisites
+
+<Callout type="info">
+  You need an assistant-cloud account to follow this guide. [Sign up here](https://cloud.assistant-ui.com/) to get started.
+</Callout>
+
+## Setup Guide
+
+<Steps>
+
+<Step>
+
+### Create a Cloud Project
+
+Create a new project in the [assistant-cloud dashboard](https://cloud.assistant-ui.com/) and from the settings page, copy:
+
+- **Frontend API URL**: `https://proj-[ID].assistant-api.com`
+- **Assistant Cloud API Key**: `sk_aui_proj_*`
+
+</Step>
+
+<Step>
+
+### Configure Environment Variables
+
+Add the following environment variables to your project:
 
-### Prerequisites
+```bash title=".env.local"
+# Frontend API URL from your cloud project settings
+NEXT_PUBLIC_ASSISTANT_BASE_URL=https://proj-[YOUR-ID].assistant-api.com
 
-You need an assistant-cloud account to follow this guide. You can sign up here: [https://cloud.assistant-ui.com/](https://cloud.assistant-ui.com/)
+# API key for server-side operations
+ASSISTANT_API_KEY=your-api-key-here
+```
+
+</Step>
 
-### Setting up assistant-cloud project in your react project:
+<Step>
 
-1. Create a new project on the assistant-cloud dashboard and copy the Frontend API URL (`https://proj-[ID].assistant-api.com`) from the settings page.
-2. Add the url as an environment variable `NEXT_PUBLIC_ASSISTANT_BASE_URL`
+### Install Dependencies
+
+Install the required packages:
 
 ```bash
-NEXT_PUBLIC_ASSISTANT_BASE_URL=[YOUR_FRONTEND_API_URL]
+npm install @assistant-ui/react @assistant-ui/react-ai-sdk
 ```
-3. Create a client side AssistantCloud instance. Note: this will create an anonymous user id that is tied to the user's browser session. For connecting to an auth provider to persist threads for a user based on a workspace and/or user id, look at [Cloud Authorization Docs](/docs/cloud/authorization).
 
-```typescript
+</Step>
+
+<Step>
+
+### Set Up the Cloud Runtime
+
+Create a client-side AssistantCloud instance and integrate it with your AI SDK runtime:
+
+```tsx title="app/chat/page.tsx"
 "use client";
-import {
-  AssistantCloud,
-  AssistantRuntimeProvider,
-  ThreadList,
-  Thread
-} from "@assistant-ui/react";
+
+import { AssistantCloud, AssistantRuntimeProvider } from "@assistant-ui/react";
 import { useChatRuntime } from "@assistant-ui/react-ai-sdk";
+import { ThreadList } from "@/components/assistant-ui/thread-list";
+import { Thread } from "@/components/assistant-ui/thread";
+
+export default function ChatPage() {
+  const cloud = new AssistantCloud({
+    baseUrl: process.env.NEXT_PUBLIC_ASSISTANT_BASE_URL!,
+    anonymous: true, // Creates browser-session based user ID
+  });
+
+  const runtime = useChatRuntime({
+    api: "/api/chat", // Your AI SDK endpoint
+    cloud,
+  });
+
+  return (
+    <AssistantRuntimeProvider runtime={runtime}>
+      <div className="grid h-dvh grid-cols-[200px_1fr] gap-x-2 px-4 py-4">
+        <ThreadList />
+        <Thread />
+      </div>
+    </AssistantRuntimeProvider>
+  );
+}
+```
+
+</Step>
 
+</Steps>
 
-const cloud = new AssistantCloud({
-  baseUrl: process.env["NEXT_PUBLIC_ASSISTANT_BASE_URL"]!,
-  anonymous: true,
-});
+## Authentication
 
+The example above uses `anonymous: true` which creates a browser session-based user ID. This is suitable for public demos or prototypes.
 
-const runtime = useChatRuntime({
-  api: "/api/chat",
-  cloud,
-});
+For production apps with user accounts, see the [Cloud Authorization](/docs/cloud/authorization) guide to persist threads per user or workspace.
 
- return (
-  <AssistantRuntimeProvider runtime={runtime}>
-    <div className="grid h-dvh grid-cols-[200px_1fr] gap-x-2 px-4 py-4">
-      <ThreadList />
-      <Thread />
-    </div>
-  </AssistantRuntimeProvider>
-);
+## Next Steps
 
-```
+- Learn about [user authentication](/docs/cloud/authorization) for multi-user applications
+- Explore [runtime hooks](/docs/api-reference/integrations/vercel-ai-sdk) and integration options
+- Check out the [complete example](https://github.com/assistant-ui/assistant-ui/tree/main/examples/with-cloud) on GitHub

package/.docs/raw/docs/cloud/persistence/langgraph.mdx

@@ -2,37 +2,74 @@
 title: Chat History for LangGraph Cloud
 ---
 
+import { Steps, Step } from 'fumadocs-ui/components/steps';
+import { Callout } from 'fumadocs-ui/components/callout';
+import { Tab, Tabs } from 'fumadocs-ui/components/tabs';
+
 ## Overview
 
-With the help of assistant-cloud, you can add thread management and thread history capabilities to assistant-ui.  
-This guide will walk you through the process of integrating assistant-cloud with LangGraph Cloud.
+assistant-cloud provides thread management and persistent chat history for applications built with [LangGraph Cloud](https://langchain-ai.github.io/langgraph/cloud/). This guide shows you how to integrate cloud persistence into your LangGraph application.
+
+## Prerequisites
+
+<Callout type="info">
+  You need an assistant-cloud account to follow this guide. [Sign up here](https://cloud.assistant-ui.com/) to get started.
+</Callout>
+
+## Setup Guide
+
+<Steps>
+
+<Step>
+
+### Create a Cloud Project
+
+Create a new project in the [assistant-cloud dashboard](https://cloud.assistant-ui.com/) and from the settings page, copy:
+
+- **Frontend API URL**: `https://proj-[ID].assistant-api.com`
+- **API Key**: For server-side operations
+
+</Step>
+
+<Step>
+
+### Configure Environment Variables
 
-### Prerequisites
+Add the following environment variables to your project:
 
-You need an assistant-cloud account to follow this guide.  
-You can sign up here: https://cloud.assistant-ui.com/
+```bash title=".env.local"
+# Frontend API URL from your cloud project settings
+NEXT_PUBLIC_ASSISTANT_BASE_URL=https://proj-[YOUR-ID].assistant-api.com
 
-### Setting up an assistant-cloud project
+# API key for server-side operations
+ASSISTANT_API_KEY=your-api-key-here
+```
+
+</Step>
 
-To get started, follow the steps below:
+<Step>
 
-- Create a new project on the assistant-cloud dashboard.
-- Navigate to the "Settings" tab and copy the Frontend API URL.
-- Add this URL to your .env file
+### Install Dependencies
+
+Install the required packages:
 
 ```bash
-NEXT_PUBLIC_ASSISTANT_BASE_URL=https://<your-frontend-api-url>
+npm install @assistant-ui/react @assistant-ui/react-langgraph
 ```
 
-### Connecting the runtime provider
+</Step>
+
+<Step>
 
-Now that we have everything set up, let's write the code for the runtime provider.
+### Create the Runtime Provider
 
-The code below is a simple LangGraph runtime provider that uses the assistant-cloud API to create and manage threads.
+Create a runtime provider that integrates LangGraph with assistant-cloud. Choose between anonymous mode for demos/prototypes or authenticated mode for production:
 
-```tsx twoslash {1-2,5-6,19,27,29-36,38-45}
-// @errors: 2307
+<Tabs items={["Anonymous", "Authenticated (Clerk)"]}>
 
+<Tab value="Anonymous">
+
+```tsx title="app/chat/runtime-provider.tsx"
 "use client";
 
 import {
@@ -44,19 +81,22 @@ import {
 import { useLangGraphRuntime } from "@assistant-ui/react-langgraph";
 import { createThread, getThreadState, sendMessage } from "@/lib/chatApi";
 import { LangChainMessage } from "@assistant-ui/react-langgraph";
-import { useAuth } from "@clerk/nextjs";
 import { useMemo } from "react";
 
-// ---cut---
 const useMyLangGraphRuntime = () => {
   const threadListItemRuntime = useThreadListItemRuntime();
+  
   const runtime = useLangGraphRuntime({
     stream: async function* (messages) {
       const { externalId } = await threadListItemRuntime.initialize();
       if (!externalId) throw new Error("Thread not found");
 
-      return sendMessage({ threadId: externalId, messages });
+      return sendMessage({
+        threadId: externalId,
+        messages,
+      });
     },
+
     onSwitchToThread: async (externalId) => {
       const state = await getThreadState(externalId);
       return {
@@ -69,6 +109,82 @@ const useMyLangGraphRuntime = () => {
   return runtime;
 };
 
+export function MyRuntimeProvider({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  const cloud = useMemo(
+    () =>
+      new AssistantCloud({
+        baseUrl: process.env.NEXT_PUBLIC_ASSISTANT_BASE_URL!,
+        anonymous: true, // Creates browser session-based user ID
+      }),
+    [],
+  );
+
+  const runtime = useCloudThreadListRuntime({
+    cloud,
+    runtimeHook: useMyLangGraphRuntime,
+    create: async () => {
+      const { thread_id } = await createThread();
+      return { externalId: thread_id };
+    },
+  });
+
+  return (
+    <AssistantRuntimeProvider runtime={runtime}>
+      {children}
+    </AssistantRuntimeProvider>
+  );
+}
+```
+
+</Tab>
+
+<Tab value="Authenticated (Clerk)">
+
+```tsx title="app/chat/runtime-provider.tsx"
+"use client";
+
+import {
+  AssistantCloud,
+  AssistantRuntimeProvider,
+  useCloudThreadListRuntime,
+  useThreadListItemRuntime,
+} from "@assistant-ui/react";
+import { useLangGraphRuntime } from "@assistant-ui/react-langgraph";
+import { createThread, getThreadState, sendMessage } from "@/lib/chatApi";
+import { LangChainMessage } from "@assistant-ui/react-langgraph";
+import { useAuth } from "@clerk/nextjs";
+import { useMemo } from "react";
+
+const useMyLangGraphRuntime = () => {
+  const threadListItemRuntime = useThreadListItemRuntime();
+  
+  const runtime = useLangGraphRuntime({
+    stream: async function* (messages) {
+      const { externalId } = await threadListItemRuntime.initialize();
+      if (!externalId) throw new Error("Thread not found");
+
+      return sendMessage({
+        threadId: externalId,
+        messages,
+      });
+    },
+
+    onSwitchToThread: async (externalId) => {
+      const state = await getThreadState(externalId);
+      return {
+        messages:
+          (state.values as { messages?: LangChainMessage[] }).messages ?? []
+      };
+    },
+  });
+
+  return runtime;
+};
+
 export function MyRuntimeProvider({
   children,
 }: Readonly<{
@@ -79,7 +195,7 @@ export function MyRuntimeProvider({
   const cloud = useMemo(
     () =>
       new AssistantCloud({
-        baseUrl: process.env["NEXT_PUBLIC_ASSISTANT_BASE_URL"]!,
+        baseUrl: process.env.NEXT_PUBLIC_ASSISTANT_BASE_URL!,
         authToken: async () => getToken({ template: "assistant-ui" }),
       }),
     [getToken],
@@ -102,22 +218,61 @@ export function MyRuntimeProvider({
 }
 ```
 
-<Callout emoji="💡">
-  Observe that the `useMyLangGraphRuntime` hook is extracted into a separate
-  function. This hook will be mounted multiple times, once per active thread.
+<Callout type="info">
+  For Clerk authentication, configure the `"assistant-ui"` token template in your Clerk dashboard.
 </Callout>
 
-### Displaying a ThreadList component
+</Tab>
 
-Now, you can add a ThreadList component to your application. This component will display a list of threads and allow users to switch between them.
+</Tabs>
 
-```sh
-npx shadcn@latest add "https://r.assistant-ui.com/thread-list"
+<Callout type="info">
+  The `useMyLangGraphRuntime` hook is extracted into a separate function because it will be mounted multiple times, once per active thread.
+</Callout>
+
+</Step>
+
+<Step>
+
+### Add Thread UI Components
+
+Install the thread list component:
+
+```bash
+npx assistant-ui add thread-list
 ```
 
-```tsx
-<div className="grid grid-cols-[250px_1fr]">
-  <ThreadList />
-  <Thread />
-</div>
+Then add it to your application layout:
+
+```tsx title="app/chat/page.tsx"
+import { Thread } from "@/components/assistant-ui/thread";
+import { ThreadList } from "@/components/assistant-ui/thread-list";
+
+export default function ChatPage() {
+  return (
+    <div className="grid h-dvh grid-cols-[250px_1fr] gap-x-2">
+      <ThreadList />
+      <Thread />
+    </div>
+  );
+}
 ```
+
+</Step>
+
+</Steps>
+
+## Authentication
+
+The examples above show two authentication modes:
+
+- **Anonymous**: Suitable for demos and prototypes. Creates a browser session-based user ID.
+- **Authenticated**: For production use with user accounts. The authenticated example uses [Clerk](https://clerk.com/), but you can integrate any auth provider.
+
+For other authentication providers or custom implementations, see the [Cloud Authorization](/docs/cloud/authorization) guide.
+
+## Next Steps
+
+- Learn about [LangGraph runtime setup](/docs/runtimes/langgraph) for your application
+- Explore [ThreadListRuntime](/docs/api-reference/runtimes/ThreadListRuntime) for advanced thread management
+- Check out the [LangGraph example](https://github.com/assistant-ui/assistant-ui/tree/main/examples/with-langgraph) on GitHub

package/.docs/raw/docs/guides/Latex.mdx

@@ -0,0 +1,107 @@
+---
+title: LaTeX
+---
+
+import { Steps, Step } from "fumadocs-ui/components/steps";
+import { Callout } from "fumadocs-ui/components/callout";
+
+Render LaTeX mathematical expressions in chat messages using KaTeX.
+
+<Callout type="warn">LaTeX rendering is not enabled in markdown by default.</Callout>
+
+<Steps>
+  <Step>
+
+### Install dependencies
+
+```bash
+npm i katex rehype-katex remark-math
+```
+
+  </Step>
+  <Step>
+
+### Add KaTeX CSS to your layout
+
+```tsx title="/app/layout.tsx"
+import "katex/dist/katex.min.css"; // [!code ++]
+```
+
+  </Step>
+  <Step>
+
+### Update `markdown-text.tsx`
+
+```tsx title="/components/assistant-ui/markdown-text.tsx"
+import remarkMath from "remark-math";     // [!code ++]
+import rehypeKatex from "rehype-katex";   // [!code ++]
+
+const MarkdownTextImpl = () => {
+  return (
+    <MarkdownTextPrimitive
+      remarkPlugins={[remarkGfm, remarkMath]} // add remarkMath // [!code ++]
+      rehypePlugins={[rehypeKatex]}           // add rehypeKatex // [!code ++]
+      className="aui-md"
+      components={defaultComponents}
+    />
+  );
+};
+
+export const MarkdownText = memo(MarkdownTextImpl);
+```
+
+  </Step>
+</Steps>
+
+## Supported Formats
+
+By default, remark-math supports:
+- `$...$` for inline math
+- `$$...$$` for display math
+- Fenced code blocks with the `math` language identifier
+
+## Supporting Alternative LaTeX Delimiters
+
+Many language models generate LaTeX using different delimiter formats:
+- `\(...\)` for inline math
+- `\[...\]` for display math
+- Custom formats like `[/math]...[/math]`
+
+You can use the `preprocess` prop to normalize these formats:
+
+```tsx title="/components/assistant-ui/markdown-text.tsx"
+const MarkdownTextImpl = () => {
+  return (
+    <MarkdownTextPrimitive
+      remarkPlugins={[remarkGfm, remarkMath]}
+      rehypePlugins={[rehypeKatex]}
+      preprocess={normalizeCustomMathTags} // [!code ++]
+      className="aui-md"
+      components={defaultComponents}
+    />
+  );
+};
+
+// Your LaTeX preprocessing function
+function normalizeCustomMathTags(input: string): string {
+  return (
+    input
+      // Convert [/math]...[/math] to $$...$$
+      .replace(/\[\/math\]([\s\S]*?)\[\/math\]/g, (_, content) => `$$${content.trim()}$$`)
+
+      // Convert [/inline]...[/inline] to $...$
+      .replace(/\[\/inline\]([\s\S]*?)\[\/inline\]/g, (_, content) => `$${content.trim()}$`)
+
+      // Convert \( ... \) to $...$ (inline math) - handles both single and double backslashes
+      .replace(/\\{1,2}\(([\s\S]*?)\\{1,2}\)/g, (_, content) => `$${content.trim()}$`)
+
+      // Convert \[ ... \] to $$...$$ (block math) - handles both single and double backslashes
+      .replace(/\\{1,2}\[([\s\S]*?)\\{1,2}\]/g, (_, content) => `$$${content.trim()}$$`)
+  );
+}
+```
+
+<Callout type="tip">
+The preprocessing function runs before markdown parsing, allowing you to transform any delimiter format into the standard `$` and `$$` format.
+</Callout>
+

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

@@ -663,38 +663,6 @@ useAssistantToolUI({
   server.
 </Callout>
 
-### Collapsible Tool Groups
-
-Create collapsible sections for consecutive tool calls:
-
-```tsx
-
-```
-
-### Advanced Tool Group UI
-
-Add progress indicators and enhanced styling:
-
-```tsx
-const ToolGroup = ({ startIndex, endIndex, children }) => {
-  return (
-    <details className="tool-group my-4">
-      <summary className="cursor-pointer rounded bg-gray-50 p-3 hover:bg-gray-100">
-        <span className="font-medium">
-          {endIndex - startIndex + 1} tool calls executed
-        </span>
-        <span className="ml-2 text-sm text-gray-500">
-          (#{startIndex + 1}-{endIndex + 1})
-        </span>
-      </summary>
-      <div className="mt-2 space-y-2 pl-4">{children}</div>
-    </details>
-  );
-};
-
-<Thread components={{ ToolGroup }} />;
-```
-
 ## Related Guides
 
 - [Tools Guide](/docs/guides/Tools) - Learn how to create and use tools with AI models