@assistant-ui/mcp-docs-server 0.2.0 → 0.2.1

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

@@ -188,7 +188,12 @@ export default function RootLayout({
 ```tsx
 "use client";
 
-import { AssistantRuntimeProvider, Tools, useAui } from "@assistant-ui/react";
+import {
+  AssistantRuntimeProvider,
+  AuiConfig,
+  Tools,
+  useAui,
+} from "@assistant-ui/react";
 import {
   SidebarInset,
   SidebarProvider,
@@ -211,6 +216,12 @@ import { ToolGroup } from "@/components/tools/tool-group";
 import toolkit from "@/components/tools/toolkit";
 import { useEffect } from "react";
 
+const SetFallbackDataUI = () => {
+  const aui = useAui();
+  useEffect(() => aui.dataRenderers.setFallbackDataUI(OpenCodeDataPart), [aui]);
+  return null;
+};
+
 const THREAD_COMPONENTS: ThreadComponents = {
   ToolFallback: FallbackTool,
   ToolGroup,
@@ -223,14 +234,13 @@ export default function Home() {
       process.env.NEXT_PUBLIC_OPENCODE_BASE_URL ?? "http://localhost:4096",
   });
 
-  const aui = useAui({
+  const config = AuiConfig({
     tools: Tools({ toolkit }),
   });
 
-  useEffect(() => aui.dataRenderers.setFallbackDataUI(OpenCodeDataPart), [aui]);
-
   return (
-    <AssistantRuntimeProvider aui={aui} runtime={runtime}>
+    <AssistantRuntimeProvider config={config} runtime={runtime}>
+      <SetFallbackDataUI />
       <SidebarProvider>
         <div className="flex h-dvh w-full overflow-hidden pr-0.5">
           <ThreadListSidebar />
@@ -1889,11 +1899,11 @@ export default withAui(nextConfig);
     "@assistant-ui/react-markdown": "workspace:*",
     "@assistant-ui/react-opencode": "workspace:*",
     "@assistant-ui/ui": "workspace:*",
-    "@pierre/diffs": "^1.2.12",
+    "@pierre/diffs": "^1.3.5",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
-    "lucide-react": "^1.26.0",
-    "next": "^16.2.11",
+    "lucide-react": "^1.29.0",
+    "next": "^16.3.0",
     "react": "^19.2.8",
     "react-dom": "^19.2.8",
     "tailwind-merge": "^3.6.0",
@@ -1903,14 +1913,13 @@ export default withAui(nextConfig);
     "@assistant-ui/next": "workspace:*",
     "@assistant-ui/x-buildutils": "workspace:*",
     "@tailwindcss/postcss": "^4.3.3",
-    "@types/node": "^26.1.1",
-    "@types/react": "^19.2.17",
-    "@types/react-dom": "^19.2.3",
-    "postcss": "^8.5.23",
+    "@types/node": "^26.1.2",
+    "@types/react": "^19.2.18",
+    "@types/react-dom": "^19.2.4",
+    "postcss": "^8.5.26",
     "tailwindcss": "^4.3.3",
     "tw-animate-css": "^1.4.0",
-    "typescript": "npm:@typescript/typescript6@^6.0.2",
-    "typescript-7": "npm:typescript@^7.0.2"
+    "typescript": "^7.0.2"
   }
 }
 

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

@@ -727,6 +727,7 @@ import { useModelSelectorEfforts } from "@/components/assistant-ui/model-selecto
 import {
   Tooltip,
   TooltipContent,
+  TooltipProvider,
   TooltipTrigger,
 } from "@/components/ui/radix/tooltip";
 import { cn } from "@/lib/utils";
@@ -764,54 +765,56 @@ export const ThinkingLevelSlider = ({
   return (
     <div className="flex items-center justify-between gap-3 border-t px-3 py-2">
       <span className="text-muted-foreground text-xs">{label}</span>
-      <div
-        role="radiogroup"
-        aria-label={label}
-        className="flex items-end"
-        onKeyDown={(event) => {
-          if (event.key === "ArrowRight" || event.key === "ArrowUp") {
-            selectIndex(event, activeIndex + 1);
-          } else if (event.key === "ArrowLeft" || event.key === "ArrowDown") {
-            selectIndex(event, activeIndex - 1);
-          } else if (event.key === "Home") {
-            selectIndex(event, 0);
-          } else if (event.key === "End") {
-            selectIndex(event, lastIndex);
-          }
-        }}
-      >
-        {efforts.map((option, index) => {
-          const isActive = index === activeIndex;
-          return (
-            <Tooltip key={option.id} disableHoverableContent>
-              <TooltipTrigger asChild>
-                <button
-                  type="button"
-                  role="radio"
-                  aria-checked={isActive}
-                  aria-label={option.name}
-                  tabIndex={index === Math.max(activeIndex, 0) ? 0 : -1}
-                  data-state={isActive ? "on" : "off"}
-                  onClick={() => setEffort(option.id)}
-                  className="group focus-visible:ring-ring/50 flex h-6 w-3.5 items-end justify-center rounded-sm outline-none focus-visible:ring-2"
-                >
-                  <span
-                    className={cn(
-                      "rounded-full transition-all duration-150 ease-out",
-                      isActive
-                        ? "bg-primary h-4.5 w-0.5"
-                        : "bg-muted-foreground/40 group-hover:bg-foreground/70 h-2.5 w-0.5 group-hover:h-4 group-hover:w-[3px] group-focus-visible:h-4 group-focus-visible:w-[3px]",
-                    )}
-                  />
-                </button>
-              </TooltipTrigger>
-              <TooltipContent side="top" sideOffset={2}>
-                {option.name}
-              </TooltipContent>
-            </Tooltip>
-          );
-        })}
-      </div>
+      <TooltipProvider>
+        <div
+          role="radiogroup"
+          aria-label={label}
+          className="flex items-end"
+          onKeyDown={(event) => {
+            if (event.key === "ArrowRight" || event.key === "ArrowUp") {
+              selectIndex(event, activeIndex + 1);
+            } else if (event.key === "ArrowLeft" || event.key === "ArrowDown") {
+              selectIndex(event, activeIndex - 1);
+            } else if (event.key === "Home") {
+              selectIndex(event, 0);
+            } else if (event.key === "End") {
+              selectIndex(event, lastIndex);
+            }
+          }}
+        >
+          {efforts.map((option, index) => {
+            const isActive = index === activeIndex;
+            return (
+              <Tooltip key={option.id} disableHoverableContent>
+                <TooltipTrigger asChild>
+                  <button
+                    type="button"
+                    role="radio"
+                    aria-checked={isActive}
+                    aria-label={option.name}
+                    tabIndex={index === Math.max(activeIndex, 0) ? 0 : -1}
+                    data-state={isActive ? "on" : "off"}
+                    onClick={() => setEffort(option.id)}
+                    className="group focus-visible:ring-ring/50 flex h-6 w-3.5 items-end justify-center rounded-sm outline-none focus-visible:ring-2"
+                  >
+                    <span
+                      className={cn(
+                        "rounded-full transition-all duration-150 ease-out",
+                        isActive
+                          ? "bg-primary h-4.5 w-0.5"
+                          : "bg-muted-foreground/40 group-hover:bg-foreground/70 h-2.5 w-0.5 group-hover:h-4 group-hover:w-[3px] group-focus-visible:h-4 group-focus-visible:w-[3px]",
+                      )}
+                    />
+                  </button>
+                </TooltipTrigger>
+                <TooltipContent side="top" sideOffset={2}>
+                  {option.name}
+                </TooltipContent>
+              </Tooltip>
+            );
+          })}
+        </div>
+      </TooltipProvider>
       <span className="text-foreground min-w-12 text-end text-xs">
         {efforts[activeIndex]?.name}
       </span>
@@ -1958,11 +1961,11 @@ export default withAui(nextConfig);
     "@assistant-ui/react-markdown": "workspace:*",
     "@assistant-ui/react-pi": "workspace:*",
     "@assistant-ui/ui": "workspace:*",
-    "@earendil-works/pi-coding-agent": "^0.82.0",
+    "@earendil-works/pi-coding-agent": "^0.84.1",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
-    "lucide-react": "^1.26.0",
-    "next": "^16.2.11",
+    "lucide-react": "^1.29.0",
+    "next": "^16.3.0",
     "radix-ui": "^1.6.7",
     "react": "^19.2.8",
     "react-dom": "^19.2.8",
@@ -1972,14 +1975,13 @@ export default withAui(nextConfig);
     "@assistant-ui/next": "workspace:*",
     "@assistant-ui/x-buildutils": "workspace:*",
     "@tailwindcss/postcss": "^4.3.3",
-    "@types/node": "^26.1.1",
-    "@types/react": "^19.2.17",
-    "@types/react-dom": "^19.2.3",
-    "postcss": "^8.5.23",
+    "@types/node": "^26.1.2",
+    "@types/react": "^19.2.18",
+    "@types/react-dom": "^19.2.4",
+    "postcss": "^8.5.26",
     "tailwindcss": "^4.3.3",
     "tw-animate-css": "^1.4.0",
-    "typescript": "npm:@typescript/typescript6@^6.0.2",
-    "typescript-7": "npm:typescript@^7.0.2"
+    "typescript": "^7.0.2"
   }
 }
 

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

@@ -248,6 +248,7 @@ import {
   useAssistantInstructions,
   useAui,
   AuiProvider,
+  AuiConfig,
   Suggestions,
 } from "@assistant-ui/react";
 
@@ -292,7 +293,8 @@ export default function Home() {
     },
   });
 
-  const aui = useAui({
+  const aui = useAui();
+  const config = AuiConfig({
     suggestions: Suggestions([
       {
         title: "Fill out the form",
@@ -309,7 +311,7 @@ export default function Home() {
   });
 
   return (
-    <AuiProvider value={aui}>
+    <AuiProvider extends={aui} config={config}>
       <ResizablePanelGroup orientation="horizontal">
         <ResizablePanel defaultSize={60} minSize={40} style={panelStyle}>
           <div className="bg-muted/30 h-full overflow-y-auto">
@@ -615,34 +617,33 @@ export default withAui(nextConfig);
     "start": "next start"
   },
   "dependencies": {
-    "@ai-sdk/openai": "^4.0.20",
+    "@ai-sdk/openai": "^4.0.34",
     "@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:*",
-    "ai": "^7.0.37",
+    "ai": "^7.0.56",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
-    "lucide-react": "^1.26.0",
-    "next": "^16.2.11",
+    "lucide-react": "^1.29.0",
+    "next": "^16.3.0",
     "react": "^19.2.8",
     "react-dom": "^19.2.8",
-    "react-hook-form": "^7.83.0",
+    "react-hook-form": "^7.84.0",
     "tailwind-merge": "^3.6.0"
   },
   "devDependencies": {
     "@assistant-ui/next": "workspace:*",
     "@assistant-ui/x-buildutils": "workspace:*",
     "@tailwindcss/postcss": "^4.3.3",
-    "@types/node": "^26.1.1",
-    "@types/react": "^19.2.17",
-    "@types/react-dom": "^19.2.3",
-    "postcss": "^8.5.23",
+    "@types/node": "^26.1.2",
+    "@types/react": "^19.2.18",
+    "@types/react-dom": "^19.2.4",
+    "postcss": "^8.5.26",
     "tailwindcss": "^4.3.3",
     "tw-animate-css": "^1.4.0",
-    "typescript": "npm:@typescript/typescript6@^6.0.2",
-    "typescript-7": "npm:typescript@^7.0.2"
+    "typescript": "^7.0.2"
   }
 }
 

package/.docs/organized/code-examples/with-react-ink-web.md

@@ -554,22 +554,21 @@ export default config;
     "@assistant-ui/react-ai-sdk": "workspace:*",
     "@assistant-ui/react-ink": "workspace:*",
     "@assistant-ui/react-ink-markdown": "workspace:*",
-    "@wterm/dom": "^0.3.0",
-    "@wterm/react": "^0.3.0",
-    "ai": "^7.0.37",
+    "@wterm/dom": "^0.3.2",
+    "@wterm/react": "^0.3.2",
+    "ai": "^7.0.56",
     "ink": "^7.1.1",
     "ink-web": "^0.2.0",
-    "next": "^16.2.11",
+    "next": "^16.3.0",
     "react": "^19.2.8",
     "react-dom": "^19.2.8",
     "react-reconciler": "^0.33.0",
     "scheduler": "^0.27.0"
   },
   "devDependencies": {
-    "@types/node": "^26.1.1",
-    "@types/react": "^19.2.17",
-    "typescript": "npm:@typescript/typescript6@^6.0.2",
-    "typescript-7": "npm:typescript@^7.0.2"
+    "@types/node": "^26.1.2",
+    "@types/react": "^19.2.18",
+    "typescript": "^7.0.2"
   }
 }
 

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

@@ -20,9 +20,9 @@
     "react": "^19.2.8"
   },
   "devDependencies": {
-    "@types/react": "^19.2.17",
+    "@types/react": "^19.2.18",
     "esbuild": "^0.28.1",
-    "tsx": "^4.23.1",
+    "tsx": "^4.23.10",
     "typescript": "^7.0.2"
   }
 }
@@ -36,10 +36,10 @@ import { useMemo } from "react";
 import { Box, Text } from "ink";
 import {
   AssistantRuntimeProvider,
+  AuiConfig,
   useLocalRuntime,
   StatusBarPrimitive,
   Tools,
-  useAui,
 } from "@assistant-ui/react-ink";
 import { Thread } from "./components/thread.js";
 import { createScriptedAdapter, MODEL_NAME } from "./scripted-adapter.js";
@@ -57,12 +57,12 @@ const StatusBar = () => (
 export const App = () => {
   const adapter = useMemo(() => createScriptedAdapter(), []);
   const runtime = useLocalRuntime(adapter);
-  const aui = useAui({
+  const config = AuiConfig({
     tools: Tools({ toolkit }),
   });
 
   return (
-    <AssistantRuntimeProvider aui={aui} runtime={runtime}>
+    <AssistantRuntimeProvider runtime={runtime} config={config}>
       <Box flexDirection="column" padding={1}>
         <Box>
           <Text bold color="cyan">

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

@@ -686,7 +686,12 @@ export async function action({ request }: Route.ActionArgs) {
 
 ```tsx
 import { Thread } from "@/components/assistant-ui/thread";
-import { useAui, AuiProvider, Suggestions } from "@assistant-ui/react";
+import {
+  useAui,
+  AuiProvider,
+  AuiConfig,
+  Suggestions,
+} from "@assistant-ui/react";
 
 export function meta() {
   return [
@@ -696,7 +701,8 @@ export function meta() {
 }
 
 function ThreadWithSuggestions() {
-  const aui = useAui({
+  const aui = useAui();
+  const config = AuiConfig({
     suggestions: Suggestions([
       {
         title: "Hello!",
@@ -711,7 +717,7 @@ function ThreadWithSuggestions() {
     ]),
   });
   return (
-    <AuiProvider value={aui}>
+    <AuiProvider extends={aui} config={config}>
       <Thread />
     </AuiProvider>
   );
@@ -779,8 +785,8 @@ export default function Home() {
     "clsx": "^2.1.1",
     "eventsource-parser": "^3.1.0",
     "isbot": "^5.2.1",
-    "lucide-react": "^1.26.0",
-    "openai": "^6.49.0",
+    "lucide-react": "^1.29.0",
+    "openai": "^7.4.0",
     "react": "^19.2.8",
     "react-dom": "^19.2.8",
     "react-router": "^8.3.0",
@@ -790,14 +796,14 @@ export default function Home() {
   "devDependencies": {
     "@react-router/dev": "^8.3.0",
     "@tailwindcss/vite": "^4.3.3",
-    "@types/node": "^26.1.1",
-    "@types/react": "^19.2.17",
-    "@types/react-dom": "^19.2.3",
+    "@types/node": "^26.1.2",
+    "@types/react": "^19.2.18",
+    "@types/react-dom": "^19.2.4",
     "tailwindcss": "^4.3.3",
     "tw-animate-css": "^1.4.0",
     "typescript": "npm:@typescript/typescript6@^6.0.2",
     "typescript-7": "npm:typescript@^7.0.2",
-    "vite": "^8.1.5",
+    "vite": "^8.2.1",
     "vite-tsconfig-paths": "^6.1.1"
   }
 }

package/.docs/organized/code-examples/with-resumable-stream.md

@@ -514,23 +514,23 @@ export default withAui(nextConfig);
     "start": "next start"
   },
   "dependencies": {
-    "@ai-sdk/openai": "^4.0.20",
-    "@ai-sdk/react": "^4.0.40",
+    "@ai-sdk/openai": "^4.0.34",
+    "@ai-sdk/react": "^4.0.59",
     "@assistant-ui/react": "workspace:*",
     "@assistant-ui/react-ai-sdk": "workspace:*",
     "@assistant-ui/react-markdown": "workspace:*",
     "@assistant-ui/store": "workspace:*",
     "@assistant-ui/tap": "workspace:*",
     "@assistant-ui/ui": "workspace:*",
-    "ai": "^7.0.37",
+    "ai": "^7.0.56",
     "assistant-stream": "workspace:*",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
-    "lucide-react": "^1.26.0",
-    "next": "^16.2.11",
+    "lucide-react": "^1.29.0",
+    "next": "^16.3.0",
     "react": "^19.2.8",
     "react-dom": "^19.2.8",
-    "redis": "^6.1.0",
+    "redis": "^6.2.0",
     "tailwind-merge": "^3.6.0",
     "zod": "^4.4.3"
   },
@@ -538,14 +538,13 @@ export default withAui(nextConfig);
     "@assistant-ui/next": "workspace:*",
     "@assistant-ui/x-buildutils": "workspace:*",
     "@tailwindcss/postcss": "^4.3.3",
-    "@types/node": "^26.1.1",
-    "@types/react": "^19.2.17",
-    "@types/react-dom": "^19.2.3",
-    "postcss": "^8.5.23",
+    "@types/node": "^26.1.2",
+    "@types/react": "^19.2.18",
+    "@types/react-dom": "^19.2.4",
+    "postcss": "^8.5.26",
     "tailwindcss": "^4.3.3",
     "tw-animate-css": "^1.4.0",
-    "typescript": "npm:@typescript/typescript6@^6.0.2",
-    "typescript-7": "npm:typescript@^7.0.2"
+    "typescript": "^7.0.2"
   }
 }
 

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

@@ -108,6 +108,7 @@ import { useState } from "react";
 import {
   useAui,
   AuiProvider,
+  AuiConfig,
   useAuiState,
   useAuiEvent,
 } from "@assistant-ui/store";
@@ -256,13 +257,13 @@ const EventLog = () => {
  * Note: The fooList scope is also registered in foo-scope.ts as a default,
  * but we're explicitly passing it here for clarity in the example.
  */
-export const ExampleApp = () => {
-  const aui = useAui({
-    fooList: FooListResource({ initialValues: true }),
-  });
+const config = AuiConfig({
+  fooList: FooListResource({ initialValues: true }),
+});
 
+export const ExampleApp = () => {
   return (
-    <AuiProvider value={aui}>
+    <AuiProvider config={config}>
       <div className="space-y-6">
         <div className="rounded-lg border border-gray-200 bg-white p-4 shadow-sm dark:border-gray-700 dark:bg-gray-800">
           <div className="flex items-center justify-between">
@@ -345,6 +346,7 @@ import {
   useAui,
   useAuiState,
   AuiProvider,
+  AuiConfig,
   useClientList,
   Derived,
   useAssistantEmit,
@@ -425,7 +427,8 @@ const FooProvider = ({
   index: number;
   children: ReactNode;
 }) => {
-  const aui = useAui({
+  const aui = useAui();
+  const config = AuiConfig({
     foo: Derived({
       source: "fooList",
       query: { index },
@@ -433,7 +436,11 @@ const FooProvider = ({
     }),
   });
 
-  return <AuiProvider value={aui}>{children}</AuiProvider>;
+  return (
+    <AuiProvider extends={aui} config={config}>
+      {children}
+    </AuiProvider>
+  );
 };
 
 export const FooList = ({
@@ -494,7 +501,7 @@ export default withAui(nextConfig);
   "dependencies": {
     "@assistant-ui/store": "workspace:*",
     "@assistant-ui/tap": "workspace:*",
-    "next": "^16.2.11",
+    "next": "^16.3.0",
     "react": "^19.2.8",
     "react-dom": "^19.2.8"
   },
@@ -502,14 +509,13 @@ export default withAui(nextConfig);
     "@assistant-ui/next": "workspace:*",
     "@assistant-ui/x-buildutils": "workspace:*",
     "@tailwindcss/postcss": "^4.3.3",
-    "@types/node": "^26.1.1",
-    "@types/react": "^19.2.17",
-    "@types/react-dom": "^19.2.3",
-    "postcss": "^8.5.23",
+    "@types/node": "^26.1.2",
+    "@types/react": "^19.2.18",
+    "@types/react-dom": "^19.2.4",
+    "postcss": "^8.5.26",
     "tailwindcss": "^4.3.3",
     "tw-animate-css": "^1.4.0",
-    "typescript": "npm:@typescript/typescript6@^6.0.2",
-    "typescript-7": "npm:typescript@^7.0.2"
+    "typescript": "^7.0.2"
   }
 }
 
@@ -615,14 +621,19 @@ const FooListResource = resource(
 
 ```typescript
 const FooProvider = ({ index, children }) => {
-  const aui = useAui({
+  const aui = useAui();
+  const config = AuiConfig({
     foo: Derived({
       source: "fooList",
       query: { index },
       get: (aui) => aui.fooList().foo({ index }),
     }),
   });
-  return <AuiProvider value={aui}>{children}</AuiProvider>;
+  return (
+    <AuiProvider extends={aui} config={config}>
+      {children}
+    </AuiProvider>
+  );
 };
 ```
 

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

@@ -65,13 +65,13 @@
     "@assistant-ui/react": "workspace:*",
     "@assistant-ui/react-markdown": "workspace:*",
     "@tailwindcss/vite": "^4.3.3",
-    "@tanstack/react-router": "^1.170.18",
-    "@tanstack/react-start": "^1.168.32",
+    "@tanstack/react-router": "^1.170.21",
+    "@tanstack/react-start": "^1.168.38",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
-    "lucide-react": "^1.26.0",
+    "lucide-react": "^1.29.0",
     "nitro": "^3.0.260311-beta",
-    "openai": "^6.49.0",
+    "openai": "^7.4.0",
     "react": "^19.2.8",
     "react-dom": "^19.2.8",
     "remark-gfm": "^4.0.1",
@@ -81,12 +81,12 @@
   },
   "devDependencies": {
     "@assistant-ui/x-buildutils": "workspace:*",
-    "@types/node": "^26.1.1",
-    "@types/react": "^19.2.17",
-    "@types/react-dom": "^19.2.3",
-    "@vitejs/plugin-react": "^6.0.4",
+    "@types/node": "^26.1.2",
+    "@types/react": "^19.2.18",
+    "@types/react-dom": "^19.2.4",
+    "@vitejs/plugin-react": "^6.0.5",
     "typescript": "^7.0.2",
-    "vite": "^8.1.5"
+    "vite": "^8.2.1"
   }
 }
 
@@ -321,13 +321,19 @@ 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 {
+  useAui,
+  AuiProvider,
+  AuiConfig,
+  Suggestions,
+} from "@assistant-ui/react";
 import { MyRuntimeProvider } from "@/components/MyRuntimeProvider";
 
 export const Route = createFileRoute("/")({ component: App });
 
 function ThreadWithSuggestions() {
-  const aui = useAui({
+  const aui = useAui();
+  const config = AuiConfig({
     suggestions: Suggestions([
       {
         title: "Hello!",
@@ -342,7 +348,7 @@ function ThreadWithSuggestions() {
     ]),
   });
   return (
-    <AuiProvider value={aui}>
+    <AuiProvider extends={aui} config={config}>
       <Thread />
     </AuiProvider>
   );