@assistant-ui/mcp-docs-server 0.1.9 → 0.1.11

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

@@ -444,7 +444,7 @@ const defaultComponents = memoizeMarkdownComponents({
   h2: ({ className, ...props }) => (
     <h2
       className={cn(
-        "mb-4 mt-8 scroll-m-20 text-3xl font-semibold tracking-tight first:mt-0 last:mb-0",
+        "mt-8 mb-4 scroll-m-20 text-3xl font-semibold tracking-tight first:mt-0 last:mb-0",
         className,
       )}
       {...props}
@@ -453,7 +453,7 @@ const defaultComponents = memoizeMarkdownComponents({
   h3: ({ className, ...props }) => (
     <h3
       className={cn(
-        "mb-4 mt-6 scroll-m-20 text-2xl font-semibold tracking-tight first:mt-0 last:mb-0",
+        "mt-6 mb-4 scroll-m-20 text-2xl font-semibold tracking-tight first:mt-0 last:mb-0",
         className,
       )}
       {...props}
@@ -462,7 +462,7 @@ const defaultComponents = memoizeMarkdownComponents({
   h4: ({ className, ...props }) => (
     <h4
       className={cn(
-        "mb-4 mt-6 scroll-m-20 text-xl font-semibold tracking-tight first:mt-0 last:mb-0",
+        "mt-6 mb-4 scroll-m-20 text-xl font-semibold tracking-tight first:mt-0 last:mb-0",
         className,
       )}
       {...props}
@@ -485,7 +485,7 @@ const defaultComponents = memoizeMarkdownComponents({
   ),
   p: ({ className, ...props }) => (
     <p
-      className={cn("mb-5 mt-5 leading-7 first:mt-0 last:mb-0", className)}
+      className={cn("mt-5 mb-5 leading-7 first:mt-0 last:mb-0", className)}
       {...props}
     />
   ),
@@ -682,7 +682,7 @@ const ThreadWelcomeSuggestions: FC = () => {
         method="replace"
         autoSend
       >
-        <span className="line-clamp-2 text-ellipsis text-sm font-semibold">
+        <span className="line-clamp-2 text-sm font-semibold text-ellipsis">
           What is the weather in Tokyo?
         </span>
       </ThreadPrimitive.Suggestion>
@@ -692,7 +692,7 @@ const ThreadWelcomeSuggestions: FC = () => {
         method="replace"
         autoSend
       >
-        <span className="line-clamp-2 text-ellipsis text-sm font-semibold">
+        <span className="line-clamp-2 text-sm font-semibold text-ellipsis">
           What is assistant-ui?
         </span>
       </ThreadPrimitive.Suggestion>
@@ -748,7 +748,7 @@ const UserMessage: FC = () => {
     <MessagePrimitive.Root className="grid w-full max-w-[var(--thread-max-width)] auto-rows-auto grid-cols-[minmax(72px,1fr)_auto] gap-y-2 py-4 [&:where(>*)]:col-start-2">
       <UserActionBar />
 
-      <div className="bg-muted text-foreground col-start-2 row-start-2 max-w-[calc(var(--thread-max-width)*0.8)] break-words rounded-3xl px-5 py-2.5">
+      <div className="bg-muted text-foreground col-start-2 row-start-2 max-w-[calc(var(--thread-max-width)*0.8)] rounded-3xl px-5 py-2.5 break-words">
         <MessagePrimitive.Parts />
       </div>
 
@@ -762,7 +762,7 @@ const UserActionBar: FC = () => {
     <ActionBarPrimitive.Root
       hideWhenRunning
       autohide="not-last"
-      className="col-start-1 row-start-2 mr-3 mt-2.5 flex flex-col items-end"
+      className="col-start-1 row-start-2 mt-2.5 mr-3 flex flex-col items-end"
     >
       <ActionBarPrimitive.Edit asChild>
         <TooltipIconButton tooltip="Edit">
@@ -793,13 +793,13 @@ const EditComposer: FC = () => {
 const AssistantMessage: FC = () => {
   return (
     <MessagePrimitive.Root className="relative grid w-full max-w-[var(--thread-max-width)] grid-cols-[auto_auto_1fr] grid-rows-[auto_1fr] py-4">
-      <div className="text-foreground col-span-2 col-start-2 row-start-1 my-1.5 max-w-[calc(var(--thread-max-width)*0.8)] break-words leading-7">
+      <div className="text-foreground col-span-2 col-start-2 row-start-1 my-1.5 max-w-[calc(var(--thread-max-width)*0.8)] leading-7 break-words">
         <MessagePrimitive.Parts components={{ Text: MarkdownText }} />
       </div>
 
       <AssistantActionBar />
 
-      <BranchPicker className="col-start-2 row-start-2 -ml-2 mr-2" />
+      <BranchPicker className="col-start-2 row-start-2 mr-2 -ml-2" />
     </MessagePrimitive.Root>
   );
 };
@@ -1326,7 +1326,7 @@ function Input({ className, type, ...props }: React.ComponentProps<"input">) {
       type={type}
       data-slot="input"
       className={cn(
-        "file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input shadow-xs flex h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base outline-none transition-[color,box-shadow] file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+        "file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input flex h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
         "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
         "aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
         className,
@@ -1358,7 +1358,7 @@ function Label({
     <LabelPrimitive.Root
       data-slot="label"
       className={cn(
-        "flex select-none items-center gap-2 text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-50 group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50",
+        "flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50",
         className,
       )}
       {...props}
@@ -1414,13 +1414,13 @@ function ResizableHandle({
     <ResizablePrimitive.PanelResizeHandle
       data-slot="resizable-handle"
       className={cn(
-        "bg-border focus-visible:ring-ring focus-visible:outline-hidden relative flex w-px items-center justify-center after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:ring-1 focus-visible:ring-offset-1 data-[panel-group-direction=vertical]:h-px data-[panel-group-direction=vertical]:w-full data-[panel-group-direction=vertical]:after:left-0 data-[panel-group-direction=vertical]:after:h-1 data-[panel-group-direction=vertical]:after:w-full data-[panel-group-direction=vertical]:after:-translate-y-1/2 data-[panel-group-direction=vertical]:after:translate-x-0 [&[data-panel-group-direction=vertical]>div]:rotate-90",
+        "bg-border focus-visible:ring-ring relative flex w-px items-center justify-center after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:ring-1 focus-visible:ring-offset-1 focus-visible:outline-hidden data-[panel-group-direction=vertical]:h-px data-[panel-group-direction=vertical]:w-full data-[panel-group-direction=vertical]:after:left-0 data-[panel-group-direction=vertical]:after:h-1 data-[panel-group-direction=vertical]:after:w-full data-[panel-group-direction=vertical]:after:translate-x-0 data-[panel-group-direction=vertical]:after:-translate-y-1/2 [&[data-panel-group-direction=vertical]>div]:rotate-90",
         className,
       )}
       {...props}
     >
       {withHandle && (
-        <div className="bg-border rounded-xs z-10 flex h-4 w-3 items-center justify-center border">
+        <div className="bg-border z-10 flex h-4 w-3 items-center justify-center rounded-xs border">
           <GripVerticalIcon className="size-2.5" />
         </div>
       )}
@@ -1479,7 +1479,7 @@ function TabsTrigger({
     <TabsPrimitive.Trigger
       data-slot="tabs-trigger"
       className={cn(
-        "data-[state=active]:bg-background dark:data-[state=active]:text-foreground focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring dark:data-[state=active]:border-input dark:data-[state=active]:bg-input/30 text-foreground dark:text-muted-foreground inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 whitespace-nowrap rounded-md border border-transparent px-2 py-1 text-sm font-medium transition-[color,box-shadow] focus-visible:outline-1 focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 data-[state=active]:shadow-sm [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+        "data-[state=active]:bg-background dark:data-[state=active]:text-foreground focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring dark:data-[state=active]:border-input dark:data-[state=active]:bg-input/30 text-foreground dark:text-muted-foreground inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-2 py-1 text-sm font-medium whitespace-nowrap transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:shadow-sm [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
         className,
       )}
       {...props}
@@ -1555,7 +1555,7 @@ function TooltipContent({
         data-slot="tooltip-content"
         sideOffset={sideOffset}
         className={cn(
-          "bg-primary text-primary-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-fit origin-[--radix-tooltip-content-transform-origin] text-balance rounded-md px-3 py-1.5 text-xs",
+          "bg-primary text-primary-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-fit origin-[--radix-tooltip-content-transform-origin] rounded-md px-3 py-1.5 text-xs text-balance",
           className,
         )}
         {...props}
@@ -1647,7 +1647,7 @@ export default nextConfig;
     "lint": "eslint ."
   },
   "dependencies": {
-    "@ai-sdk/openai": "^2.0.38",
+    "@ai-sdk/openai": "^2.0.52",
     "@assistant-ui/react": "workspace:*",
     "@assistant-ui/react-ai-sdk": "workspace:*",
     "@assistant-ui/react-hook-form": "workspace:*",
@@ -1660,20 +1660,20 @@ export default nextConfig;
     "@radix-ui/react-tabs": "^1.1.13",
     "@radix-ui/react-tooltip": "^1.2.8",
     "@react-hook/media-query": "^1.1.1",
-    "ai": "^5.0.56",
+    "ai": "^5.0.76",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "json-schema-to-zod": "^2.6.1",
-    "lucide-react": "^0.544.0",
-    "next": "15.5.4",
-    "react": "19.1.1",
-    "react-dom": "19.1.1",
-    "react-hook-form": "^7.63.0",
+    "lucide-react": "^0.546.0",
+    "next": "15.5.6",
+    "react": "19.2.0",
+    "react-dom": "19.2.0",
+    "react-hook-form": "^7.65.0",
     "react-resizable-panels": "^3.0.6",
     "remark-gfm": "^4.0.1",
     "tailwind-merge": "^3.3.1",
     "tw-animate-css": "^1.4.0",
-    "zod": "^4.1.11",
+    "zod": "^4.1.12",
     "zustand": "^5.0.8"
   },
   "devDependencies": {
@@ -1682,10 +1682,10 @@ export default nextConfig;
     "@types/react": "^19",
     "@types/react-dom": "^19",
     "eslint": "^9",
-    "eslint-config-next": "15.5.4",
+    "eslint-config-next": "15.5.6",
     "postcss": "^8",
-    "tailwindcss": "^4.1.13",
-    "typescript": "^5.9.2"
+    "tailwindcss": "^4.1.14",
+    "typescript": "^5.9.3"
   }
 }
 

package/.docs/raw/docs/api-reference/primitives/Thread.mdx

@@ -195,8 +195,7 @@ const Suggestion = () => {
   return (
     <ThreadPrimitive.Suggestion
       prompt="I need help with product search"
-      method="replace"
-      autoSend
+      send
     />
   );
 };
@@ -211,17 +210,29 @@ const Suggestion = () => {
       description: "The suggestion's prompt.",
     },
     {
-      name: "method",
-      type: "'replace'",
+      name: "send",
+      type: "boolean",
       description:
-        "How does the suggestion interact with the composer's existing value.",
+        "When true, automatically sends the message. When false, replaces or appends the composer text with the suggestion - depending on the value of `clearComposer`",
     },
     {
-      name: "autoSend",
+      name: "clearComposer",
       type: "boolean",
+      default: "true",
       description:
-        "Whether to automatically send the suggestion when the user clicks on it.",
-      default: "false",
+        "Whether to clear the composer after sending. When send is set to false, determines if composer text is replaced with suggestion (true, default), or if the suggestion's prompt is appended to the composer text (false).",
+    },
+    {
+      name: "autoSend",
+      type: "boolean",
+      deprecated: true,
+      description: "Deprecated. Use 'send' instead.",
+    },
+    {
+      name: "method",
+      type: "'replace'",
+      deprecated: true,
+      description: "Deprecated. This parameter is no longer used.",
     },
   ]}
 />
@@ -243,6 +254,21 @@ Renders children if a condition is met.
       type: "boolean | undefined",
       description: "Render children if the thread is running.",
     },
+    {
+      name: "disabled",
+      type: "boolean | undefined",
+      description: "Render children if the thread is disabled.",
+    },
+    {
+      name: "loading",
+      type: "boolean | undefined",
+      description: "Render children if the thread is loading.",
+    },
+    {
+      name: "new",
+      type: "boolean | undefined",
+      description: "Render children if the thread is new.",
+    },
   ]}
 />
 
@@ -253,4 +279,10 @@ Renders children if a condition is met.
 <Thread.If empty={false}>
   {/* rendered if thread is not empty */}
 </Thread.If>
+<Thread.If loading>
+  {/* rendered if thread is loading */}
+</Thread.If>
+<Thread.If new>
+  {/* rendered if thread is new */}
+</Thread.If>
 ```

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

@@ -2,9 +2,9 @@
 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';
+import { Steps, Step } from "fumadocs-ui/components/steps";
+import { Callout } from "fumadocs-ui/components/callout";
+import { Tab, Tabs } from "fumadocs-ui/components/tabs";
 
 ## Overview
 
@@ -13,7 +13,8 @@ assistant-cloud provides thread management and persistent chat history for appli
 ## 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.
+  You need an assistant-cloud account to follow this guide. [Sign up
+  here](https://cloud.assistant-ui.com/) to get started.
 </Callout>
 
 ## Setup Guide
@@ -75,40 +76,12 @@ Create a runtime provider that integrates LangGraph with assistant-cloud. Choose
 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 { 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<{
@@ -123,13 +96,28 @@ export function MyRuntimeProvider({
     [],
   );
 
-  const runtime = useCloudThreadListRuntime({
+  const runtime = useLangGraphRuntime({
     cloud,
-    runtimeHook: useMyLangGraphRuntime,
+    stream: async function* (messages, { initialize }) {
+      const { externalId } = await initialize();
+      if (!externalId) throw new Error("Thread not found");
+
+      return sendMessage({
+        threadId: externalId,
+        messages,
+      });
+    },
     create: async () => {
       const { thread_id } = await createThread();
       return { externalId: thread_id };
     },
+    load: async (externalId) => {
+      const state = await getThreadState(externalId);
+      return {
+        messages:
+          (state.values as { messages?: LangChainMessage[] }).messages ?? [],
+      };
+    },
   });
 
   return (
@@ -150,8 +138,6 @@ export function MyRuntimeProvider({
 import {
   AssistantCloud,
   AssistantRuntimeProvider,
-  useCloudThreadListRuntime,
-  useThreadListItemRuntime,
 } from "@assistant-ui/react";
 import { useLangGraphRuntime } from "@assistant-ui/react-langgraph";
 import { createThread, getThreadState, sendMessage } from "@/lib/chatApi";
@@ -159,32 +145,6 @@ 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<{
@@ -201,13 +161,28 @@ export function MyRuntimeProvider({
     [getToken],
   );
 
-  const runtime = useCloudThreadListRuntime({
+  const runtime = useLangGraphRuntime({
     cloud,
-    runtimeHook: useMyLangGraphRuntime,
+    stream: async function* (messages, { initialize }) {
+      const { externalId } = await initialize();
+      if (!externalId) throw new Error("Thread not found");
+
+      return sendMessage({
+        threadId: externalId,
+        messages,
+      });
+    },
     create: async () => {
       const { thread_id } = await createThread();
       return { externalId: thread_id };
     },
+    load: async (externalId) => {
+      const state = await getThreadState(externalId);
+      return {
+        messages:
+          (state.values as { messages?: LangChainMessage[] }).messages ?? [],
+      };
+    },
   });
 
   return (
@@ -219,7 +194,8 @@ export function MyRuntimeProvider({
 ```
 
 <Callout type="info">
-  For Clerk authentication, configure the `"assistant-ui"` token template in your Clerk dashboard.
+  For Clerk authentication, configure the `"assistant-ui"` token template in
+  your Clerk dashboard.
 </Callout>
 
 </Tab>
@@ -227,7 +203,7 @@ export function MyRuntimeProvider({
 </Tabs>
 
 <Callout type="info">
-  The `useMyLangGraphRuntime` hook is extracted into a separate function because it will be mounted multiple times, once per active thread.
+  The `useLangGraphRuntime` hook now directly accepts `cloud`, `create`, and `load` parameters for simplified thread management. The runtime handles thread lifecycle internally.
 </Callout>
 
 </Step>
@@ -238,10 +214,30 @@ export function MyRuntimeProvider({
 
 Install the thread list component:
 
-```bash
-npx assistant-ui add thread-list
+<Tabs items={["assistant-ui", "shadcn (namespace)", "shadcn"]}>
+  <Tab>
+
+```sh
+npx assistant-ui@latest add thread-list
 ```
 
+  </Tab>
+  <Tab>
+
+```sh
+npx shadcn@latest add @assistant-ui/thread-list
+```
+
+  </Tab>
+  <Tab>
+
+```sh
+npx shadcn@latest add "https://r.assistant-ui.com/thread-list"
+```
+
+  </Tab>
+</Tabs>
+
 Then add it to your application layout:
 
 ```tsx title="app/chat/page.tsx"