@assistant-ui/mcp-docs-server 0.1.22 → 0.1.24

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

@@ -214,7 +214,12 @@ import { SignupForm } from "@/components/SignupForm";
 import { AssistantSidebar } from "@/components/assistant-ui/assistant-sidebar";
 import { Form } from "@/components/ui/form";
 import { useAssistantForm } from "@assistant-ui/react-hook-form";
-import { useAssistantInstructions } from "@assistant-ui/react";
+import {
+  useAssistantInstructions,
+  useAui,
+  AuiProvider,
+  Suggestions,
+} from "@assistant-ui/react";
 import Link from "next/link";
 
 const SetFormFieldTool = () => {
@@ -256,35 +261,53 @@ export default function Home() {
     },
   });
 
+  const aui = useAui({
+    suggestions: Suggestions([
+      {
+        title: "Fill out the form",
+        label: "with sample data",
+        prompt: "Please fill out the signup form with sample data for me.",
+      },
+      {
+        title: "Help me register",
+        label: "for the hackathon",
+        prompt:
+          "I'd like to sign up for the hackathon. My name is Jane Doe and my email is jane@example.com.",
+      },
+    ]),
+  });
+
   return (
-    <AssistantSidebar>
-      <div className="h-full overflow-y-scroll">
-        <main className="container py-8">
-          <h1 className="mb-2 font-semibold text-2xl">
-            Simon&apos;s Hackathon
-          </h1>
-          <p>
-            I&apos;m hosting a Hackathon on AI UX. Be the first to get an
-            invite!
-          </p>
-
-          <div className="my-4 font-bold">
-            Built with{" "}
-            <Link
-              href="https://github.com/assistant-ui/assistant-ui"
-              className="text-blue-600 underline"
-            >
-              assistant-ui
-            </Link>
-            .
-          </div>
-
-          <Form {...form}>
-            <SignupForm />
-          </Form>
-        </main>
-      </div>
-    </AssistantSidebar>
+    <AuiProvider value={aui}>
+      <AssistantSidebar>
+        <div className="h-full overflow-y-scroll">
+          <main className="container py-8">
+            <h1 className="mb-2 font-semibold text-2xl">
+              Simon&apos;s Hackathon
+            </h1>
+            <p>
+              I&apos;m hosting a Hackathon on AI UX. Be the first to get an
+              invite!
+            </p>
+
+            <div className="my-4 font-bold">
+              Built with{" "}
+              <Link
+                href="https://github.com/assistant-ui/assistant-ui"
+                className="text-blue-600 underline"
+              >
+                assistant-ui
+              </Link>
+              .
+            </div>
+
+            <Form {...form}>
+              <SignupForm />
+            </Form>
+          </main>
+        </div>
+      </AssistantSidebar>
+    </AuiProvider>
   );
 }
 
@@ -487,18 +510,6 @@ export const submitSignup = async (data: object) => {
 
 ```
 
-## lib/utils.ts
-
-```typescript
-import { type ClassValue, clsx } from "clsx";
-import { twMerge } from "tailwind-merge";
-
-export function cn(...inputs: ClassValue[]) {
-  return twMerge(clsx(inputs));
-}
-
-```
-
 ## next.config.ts
 
 ```typescript
@@ -526,40 +537,30 @@ export default nextConfig;
     "start": "next start"
   },
   "dependencies": {
-    "@ai-sdk/openai": "^3.0.25",
+    "@ai-sdk/openai": "^3.0.39",
     "@assistant-ui/react": "workspace:*",
     "@assistant-ui/react-ai-sdk": "workspace:*",
     "@assistant-ui/react-hook-form": "workspace:*",
     "@assistant-ui/react-markdown": "workspace:*",
     "@assistant-ui/ui": "workspace:*",
-    "@hookform/resolvers": "^5.2.2",
-    "@radix-ui/react-avatar": "^1.1.11",
-    "@radix-ui/react-collapsible": "^1.1.12",
-    "@radix-ui/react-dialog": "^1.1.15",
-    "@radix-ui/react-label": "^2.1.8",
-    "@radix-ui/react-slot": "^1.2.4",
-    "@radix-ui/react-tabs": "^1.1.13",
-    "@radix-ui/react-tooltip": "^1.2.8",
-    "ai": "^6.0.73",
+    "ai": "^6.0.111",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
-    "lucide-react": "^0.563.0",
+    "lucide-react": "^0.576.0",
     "next": "^16.1.6",
     "react": "^19.2.4",
     "react-dom": "^19.2.4",
-    "react-hook-form": "^7.71.1",
-    "react-resizable-panels": "^4.6.0",
-    "tailwind-merge": "^3.4.0",
-    "zod": "^4.3.6"
+    "react-hook-form": "^7.71.2",
+    "tailwind-merge": "^3.5.0"
   },
   "devDependencies": {
     "@assistant-ui/x-buildutils": "workspace:*",
-    "@tailwindcss/postcss": "^4.1.18",
-    "@types/node": "^25.2.1",
-    "@types/react": "^19.2.13",
+    "@tailwindcss/postcss": "^4.2.1",
+    "@types/node": "^25.3.3",
+    "@types/react": "^19.2.14",
     "@types/react-dom": "^19.2.3",
-    "postcss": "^8.5.6",
-    "tailwindcss": "^4.1.18",
+    "postcss": "^8.5.8",
+    "tailwindcss": "^4.2.1",
     "tw-animate-css": "^1.4.0",
     "typescript": "^5.9.3"
   }
@@ -624,6 +625,7 @@ npm run dev
         "../../packages/ui/src/components/assistant-ui/*"
       ],
       "@/components/ui/*": ["../../packages/ui/src/components/ui/*"],
+      "@/lib/utils": ["../../packages/ui/src/lib/utils"],
       "@assistant-ui/ui/*": ["../../packages/ui/src/*"]
     }
   },

package/.docs/organized/code-examples/with-react-router.md

@@ -142,18 +142,6 @@ body {
 
 ```
 
-## app/lib/utils.ts
-
-```typescript
-import { clsx, type ClassValue } from "clsx";
-import { twMerge } from "tailwind-merge";
-
-export function cn(...inputs: ClassValue[]) {
-  return twMerge(clsx(inputs));
-}
-
-```
-
 ## app/MyRuntimeProvider.tsx
 
 ```tsx
@@ -697,6 +685,7 @@ export async function action({ request }: Route.ActionArgs) {
 
 ```tsx
 import { Thread } from "@/components/assistant-ui/thread";
+import { useAui, AuiProvider, Suggestions } from "@assistant-ui/react";
 
 export function meta() {
   return [
@@ -705,10 +694,32 @@ export function meta() {
   ];
 }
 
+function ThreadWithSuggestions() {
+  const aui = useAui({
+    suggestions: Suggestions([
+      {
+        title: "Hello!",
+        label: "start a conversation",
+        prompt: "Hello! What can you help me with?",
+      },
+      {
+        title: "Tell me a joke",
+        label: "about programming",
+        prompt: "Tell me a funny programming joke.",
+      },
+    ]),
+  });
+  return (
+    <AuiProvider value={aui}>
+      <Thread />
+    </AuiProvider>
+  );
+}
+
 export default function Home() {
   return (
     <main className="h-dvh">
-      <Thread />
+      <ThreadWithSuggestions />
     </main>
   );
 }
@@ -761,36 +772,31 @@ export default function Home() {
   "dependencies": {
     "@assistant-ui/react": "workspace:*",
     "@assistant-ui/react-markdown": "workspace:*",
-    "@radix-ui/react-avatar": "^1.1.11",
-    "@radix-ui/react-dialog": "^1.1.15",
-    "@radix-ui/react-slot": "^1.2.4",
-    "@radix-ui/react-tooltip": "^1.2.8",
-    "@react-router/node": "7.13.0",
-    "@react-router/serve": "7.13.0",
+    "@react-router/node": "^7.13.1",
+    "@react-router/serve": "^7.13.1",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "eventsource-parser": "^3.0.6",
-    "isbot": "^5.1.34",
-    "lucide-react": "^0.563.0",
-    "openai": "^6.18.0",
+    "isbot": "^5.1.35",
+    "lucide-react": "^0.576.0",
+    "openai": "^6.25.0",
     "react": "^19.2.4",
     "react-dom": "^19.2.4",
-    "react-router": "7.13.0",
+    "react-router": "^7.13.1",
     "remark-gfm": "^4.0.1",
-    "tailwind-merge": "^3.4.0",
-    "zustand": "^5.0.11"
+    "tailwind-merge": "^3.5.0"
   },
   "devDependencies": {
-    "@react-router/dev": "7.13.0",
-    "@tailwindcss/vite": "^4.1.18",
-    "@types/node": "^25.2.1",
-    "@types/react": "^19.2.13",
+    "@react-router/dev": "^7.13.1",
+    "@tailwindcss/vite": "^4.2.1",
+    "@types/node": "^25.3.3",
+    "@types/react": "^19.2.14",
     "@types/react-dom": "^19.2.3",
-    "tailwindcss": "^4.1.18",
+    "tailwindcss": "^4.2.1",
     "tw-animate-css": "^1.4.0",
     "typescript": "^5.9.3",
     "vite": "^7.3.1",
-    "vite-tsconfig-paths": "^6.0.5"
+    "vite-tsconfig-paths": "^6.1.1"
   }
 }
 
@@ -880,6 +886,7 @@ npm run dev
         "../../packages/ui/src/components/assistant-ui/*"
       ],
       "@/components/ui/*": ["../../packages/ui/src/components/ui/*"],
+      "@/lib/utils": ["../../packages/ui/src/lib/utils"],
       "@assistant-ui/ui/*": ["../../packages/ui/src/*"]
     },
     "esModuleInterop": true,

package/.docs/organized/code-examples/with-store.md

@@ -118,8 +118,8 @@ import { FooList, FooListResource } from "./store/foo-store";
  */
 const Foo = () => {
   const aui = useAui();
-  const fooId = useAuiState(({ foo }) => foo.id);
-  const fooBar = useAuiState(({ foo }) => foo.bar);
+  const fooId = useAuiState((s) => s.foo.id);
+  const fooBar = useAuiState((s) => s.foo.bar);
 
   // Each foo logs its own events - only receives events from THIS foo instance
   useAuiEvent("foo.updated", (payload) => {
@@ -167,7 +167,7 @@ const Foo = () => {
 };
 
 const FooListLength = () => {
-  const fooListLength = useAuiState(({ fooList }) => fooList.foos.length);
+  const fooListLength = useAuiState((s) => s.fooList.foos.length);
   return (
     <span className="text-gray-500 dark:text-gray-400">
       ({fooListLength} items)
@@ -314,15 +314,13 @@ type FooListEvents = {
 };
 
 declare module "@assistant-ui/store" {
-  interface ClientRegistry {
+  interface ScopeRegistry {
     foo: {
-      state: FooState;
       methods: FooMethods;
       meta: FooMeta;
       events: FooEvents;
     };
     fooList: {
-      state: FooListState;
       methods: FooListMethods;
       events: FooListEvents;
     };
@@ -372,12 +370,9 @@ export const FooItemResource = resource(
     };
 
     return {
-      state,
-      methods: {
-        getState: () => state,
-        updateBar,
-        remove: handleRemove,
-      },
+      getState: () => state,
+      updateBar,
+      remove: handleRemove,
     };
   },
 );
@@ -408,12 +403,9 @@ export const FooListResource = resource(
     const state = tapMemo(() => ({ foos: foos.state }), [foos.state]);
 
     return {
-      state,
-      methods: {
-        getState: () => state,
-        foo: foos.get,
-        addFoo,
-      },
+      getState: () => state,
+      foo: foos.get,
+      addFoo,
     };
   },
 );
@@ -441,7 +433,7 @@ export const FooList = ({
 }: {
   components: { Foo: React.ComponentType };
 }) => {
-  const fooListState = useAuiState(({ fooList }) => fooList.foos.length);
+  const fooListState = useAuiState((s) => s.fooList.foos.length);
 
   return (
     <>
@@ -491,12 +483,12 @@ export default nextConfig;
   },
   "devDependencies": {
     "@assistant-ui/x-buildutils": "workspace:*",
-    "@tailwindcss/postcss": "^4.1.18",
-    "@types/node": "^25.2.1",
-    "@types/react": "^19.2.13",
+    "@tailwindcss/postcss": "^4.2.1",
+    "@types/node": "^25.3.3",
+    "@types/react": "^19.2.14",
     "@types/react-dom": "^19.2.3",
-    "postcss": "^8.5.6",
-    "tailwindcss": "^4.1.18",
+    "postcss": "^8.5.8",
+    "tailwindcss": "^4.2.1",
     "tw-animate-css": "^1.4.0",
     "typescript": "^5.9.3"
   }
@@ -554,7 +546,7 @@ Open [http://localhost:3000](http://localhost:3000) to see the example.
 
 ```typescript
 declare module "@assistant-ui/store" {
-  interface ClientRegistry {
+  interface ScopeRegistry {
     foo: {
       state: { id: string; bar: string };
       methods: {

package/.docs/organized/code-examples/with-tanstack.md

@@ -64,29 +64,27 @@
   "dependencies": {
     "@assistant-ui/react": "workspace:*",
     "@assistant-ui/react-markdown": "workspace:*",
-    "@radix-ui/react-slot": "^1.2.4",
-    "@radix-ui/react-tooltip": "^1.2.8",
-    "@tailwindcss/vite": "^4.1.18",
-    "@tanstack/react-router": "^1.158.1",
-    "@tanstack/react-start": "^1.158.3",
+    "@tailwindcss/vite": "^4.2.1",
+    "@tanstack/react-router": "^1.163.3",
+    "@tanstack/react-start": "^1.166.1",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
-    "lucide-react": "^0.563.0",
+    "lucide-react": "^0.576.0",
     "nitro": "^3.0.1-alpha.2",
-    "openai": "^6.18.0",
+    "openai": "^6.25.0",
     "react": "^19.2.4",
     "react-dom": "^19.2.4",
     "remark-gfm": "^4.0.1",
-    "tailwind-merge": "^3.4.0",
-    "tailwindcss": "^4.1.18",
-    "vite-tsconfig-paths": "^6.0.5"
+    "tailwind-merge": "^3.5.0",
+    "tailwindcss": "^4.2.1",
+    "vite-tsconfig-paths": "^6.1.1"
   },
   "devDependencies": {
     "@assistant-ui/x-buildutils": "workspace:*",
-    "@types/node": "^25.2.1",
-    "@types/react": "^19.2.13",
+    "@types/node": "^25.3.3",
+    "@types/react": "^19.2.14",
     "@types/react-dom": "^19.2.3",
-    "@vitejs/plugin-react": "^5.1.3",
+    "@vitejs/plugin-react": "^5.1.4",
     "typescript": "^5.9.3",
     "vite": "^7.3.1"
   }
@@ -249,18 +247,6 @@ export function MyRuntimeProvider({
 
 ```
 
-## src/lib/utils.ts
-
-```typescript
-import { clsx, type ClassValue } from "clsx";
-import { twMerge } from "tailwind-merge";
-
-export function cn(...inputs: ClassValue[]) {
-  return twMerge(clsx(inputs));
-}
-
-```
-
 ## src/router.tsx
 
 ```tsx
@@ -336,15 +322,38 @@ function RootDocument({ children }: { children: React.ReactNode }) {
 ```tsx
 import { createFileRoute } from "@tanstack/react-router";
 import { Thread } from "@/components/assistant-ui/thread";
+import { useAui, AuiProvider, Suggestions } from "@assistant-ui/react";
 import { MyRuntimeProvider } from "@/components/MyRuntimeProvider";
 
 export const Route = createFileRoute("/")({ component: App });
 
+function ThreadWithSuggestions() {
+  const aui = useAui({
+    suggestions: Suggestions([
+      {
+        title: "Hello!",
+        label: "start a conversation",
+        prompt: "Hello! What can you help me with?",
+      },
+      {
+        title: "What can you do?",
+        label: "tell me your capabilities",
+        prompt: "What kinds of things can you help me with?",
+      },
+    ]),
+  });
+  return (
+    <AuiProvider value={aui}>
+      <Thread />
+    </AuiProvider>
+  );
+}
+
 function App() {
   return (
     <MyRuntimeProvider>
       <main className="h-dvh">
-        <Thread />
+        <ThreadWithSuggestions />
       </main>
     </MyRuntimeProvider>
   );
@@ -735,6 +744,7 @@ export const chatStream = createServerFn({ method: "POST" })
         "../../packages/ui/src/components/assistant-ui/*"
       ],
       "@/components/ui/*": ["../../packages/ui/src/components/ui/*"],
+      "@/lib/utils": ["../../packages/ui/src/lib/utils"],
       "@assistant-ui/ui/*": ["../../packages/ui/src/*"]
     }
   },

package/.docs/organized/code-examples/with-tap-runtime.md

@@ -461,7 +461,7 @@ function ThreadListItem() {
 }
 
 function ThreadListItemId() {
-  const id = useAuiState(({ threadListItem }) => threadListItem.id);
+  const id = useAuiState((s) => s.threadListItem.id);
   return <>{id}</>;
 }
 
@@ -476,7 +476,7 @@ import { Thread } from "@/components/assistant-ui/thread";
 import { useAuiState } from "@assistant-ui/react";
 
 export default function Home() {
-  const isEmpty = useAuiState((state) => state.threads.main.isEmpty);
+  const isEmpty = useAuiState((s) => s.threads.main.isEmpty);
 
   return (
     <div className="flex h-full flex-col">
@@ -563,18 +563,6 @@ export default function Home() {
 
 ```
 
-## lib/utils.ts
-
-```typescript
-import { type ClassValue, clsx } from "clsx";
-import { twMerge } from "tailwind-merge";
-
-export function cn(...inputs: ClassValue[]) {
-  return twMerge(clsx(inputs));
-}
-
-```
-
 ## next.config.ts
 
 ```typescript
@@ -605,25 +593,22 @@ export default nextConfig;
     "@assistant-ui/react": "workspace:*",
     "@assistant-ui/react-markdown": "workspace:*",
     "@assistant-ui/ui": "workspace:*",
-    "@radix-ui/react-avatar": "^1.1.11",
-    "@radix-ui/react-slot": "^1.2.4",
-    "@radix-ui/react-tooltip": "^1.2.8",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
-    "lucide-react": "^0.563.0",
+    "lucide-react": "^0.576.0",
     "next": "^16.1.6",
     "react": "^19.2.4",
     "react-dom": "^19.2.4",
-    "tailwind-merge": "^3.4.0"
+    "tailwind-merge": "^3.5.0"
   },
   "devDependencies": {
     "@assistant-ui/x-buildutils": "workspace:*",
-    "@tailwindcss/postcss": "^4.1.18",
-    "@types/node": "^25.2.1",
-    "@types/react": "^19.2.13",
+    "@tailwindcss/postcss": "^4.2.1",
+    "@types/node": "^25.3.3",
+    "@types/react": "^19.2.14",
     "@types/react-dom": "^19.2.3",
-    "postcss": "^8.5.6",
-    "tailwindcss": "^4.1.18",
+    "postcss": "^8.5.8",
+    "tailwindcss": "^4.2.1",
     "tw-animate-css": "^1.4.0",
     "typescript": "^5.9.3"
   }
@@ -754,7 +739,7 @@ Type-safe client definitions via module augmentation (defined in `@assistant-ui/
 
 ```typescript
 declare module "@assistant-ui/store" {
-  interface ClientRegistry {
+  interface ScopeRegistry {
     threads: ThreadsClientSchema;
     thread: ThreadClientSchema;
     message: MessageClientSchema;
@@ -795,6 +780,7 @@ You can extend this example to:
         "../../packages/ui/src/components/assistant-ui/*"
       ],
       "@/components/ui/*": ["../../packages/ui/src/components/ui/*"],
+      "@/lib/utils": ["../../packages/ui/src/lib/utils"],
       "@assistant-ui/ui/*": ["../../packages/ui/src/*"],
       "@assistant-ui/*": ["../../packages/*/src"],
       "@assistant-ui/react/*": ["../../packages/react/src/*"],

package/.docs/raw/docs/(docs)/cli.mdx

@@ -51,10 +51,12 @@ This command uses `create-next-app` with assistant-ui starter templates.
 
 | Template | Description | Command |
 |----------|-------------|---------|
-| `default` | Basic setup with Vercel AI SDK | `npx assistant-ui create` |
-| `cloud` | With Assistant Cloud for persistence | `npx assistant-ui create -t cloud` |
-| `langgraph` | LangGraph integration | `npx assistant-ui create -t langgraph` |
-| `mcp` | Model Context Protocol support | `npx assistant-ui create -t mcp` |
+| `default` | Default template with Vercel AI SDK | `npx assistant-ui create` |
+| `minimal` | Bare-bones starting point | `npx assistant-ui create -t minimal` |
+| `cloud` | Cloud-backed persistence starter | `npx assistant-ui create -t cloud` |
+| `cloud-clerk` | Cloud-backed starter with Clerk auth | `npx assistant-ui create -t cloud-clerk` |
+| `langgraph` | LangGraph starter template | `npx assistant-ui create -t langgraph` |
+| `mcp` | MCP starter template | `npx assistant-ui create -t mcp` |
 
 **Available Examples**
 
@@ -63,10 +65,12 @@ Use `--example` to create a project from one of the monorepo examples with full
 | Example | Description | Command |
 |---------|-------------|---------|
 | `with-ai-sdk-v6` | Vercel AI SDK v6 integration | `npx assistant-ui create my-app -e with-ai-sdk-v6` |
+| `with-artifacts` | HTML artifact rendering with live preview | `npx assistant-ui create my-app -e with-artifacts` |
 | `with-langgraph` | LangGraph agent with custom tools | `npx assistant-ui create my-app -e with-langgraph` |
 | `with-cloud` | Assistant Cloud persistence | `npx assistant-ui create my-app -e with-cloud` |
 | `with-ag-ui` | AG-UI protocol integration | `npx assistant-ui create my-app -e with-ag-ui` |
 | `with-assistant-transport` | Custom backend via Assistant Transport | `npx assistant-ui create my-app -e with-assistant-transport` |
+| `with-chain-of-thought` | Chain-of-thought with JS execution | `npx assistant-ui create my-app -e with-chain-of-thought` |
 | `with-external-store` | External message store | `npx assistant-ui create my-app -e with-external-store` |
 | `with-custom-thread-list` | Custom thread list UI | `npx assistant-ui create my-app -e with-custom-thread-list` |
 | `with-react-hook-form` | React Hook Form integration | `npx assistant-ui create my-app -e with-react-hook-form` |
@@ -85,6 +89,9 @@ npx assistant-ui@latest create my-app
 # Create with cloud template
 npx assistant-ui@latest create my-app -t cloud
 
+# Create with cloud + clerk template
+npx assistant-ui@latest create my-app -t cloud-clerk
+
 # Create from an example
 npx assistant-ui@latest create my-app --example with-langgraph
 
@@ -106,7 +113,7 @@ Arguments:
   project-directory         name of the project directory
 
 Options:
-  -t, --template <template>  template to use (default, cloud, langgraph, mcp)
+  -t, --template <template>  template to use (default, minimal, cloud, cloud-clerk, langgraph, mcp)
   -e, --example <example>    create from an example (e.g., with-langgraph)
   --use-npm                  explicitly use npm
   --use-pnpm                 explicitly use pnpm
@@ -441,4 +448,4 @@ The CLI respects your project's configuration:
 - **Package Manager**: Automatically detects npm, pnpm, yarn, or bun
 - **TypeScript**: Works with your `tsconfig.json` paths
 - **Tailwind**: Uses your `tailwind.config.js` settings
-- **Import Aliases**: Respects `components.json` or `assistant-ui.json` configuration
+- **Import Aliases**: Respects `components.json` or `assistant-ui.json` configuration