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

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

@@ -106,10 +106,10 @@ export default function Home() {
 
 import { useState } from "react";
 import {
-  useAssistantClient,
-  AssistantProvider,
-  useAssistantState,
-  useAssistantEvent,
+  useAui,
+  AuiProvider,
+  useAuiState,
+  useAuiEvent,
 } from "@assistant-ui/store";
 import { FooList, FooListResource } from "./store/foo-store";
 
@@ -117,12 +117,12 @@ import { FooList, FooListResource } from "./store/foo-store";
  * Single Foo component - displays and allows editing a single foo
  */
 const Foo = () => {
-  const aui = useAssistantClient();
-  const fooId = useAssistantState(({ foo }) => foo.id);
-  const fooBar = useAssistantState(({ foo }) => foo.bar);
+  const aui = useAui();
+  const fooId = useAuiState(({ foo }) => foo.id);
+  const fooBar = useAuiState(({ foo }) => foo.bar);
 
   // Each foo logs its own events - only receives events from THIS foo instance
-  useAssistantEvent("foo.updated", (payload) => {
+  useAuiEvent("foo.updated", (payload) => {
     console.log(`[${fooId}] Updated to: ${payload.newValue}`);
   });
 
@@ -167,7 +167,7 @@ const Foo = () => {
 };
 
 const FooListLength = () => {
-  const fooListLength = useAssistantState(({ fooList }) => fooList.foos.length);
+  const fooListLength = useAuiState(({ fooList }) => fooList.foos.length);
   return (
     <span className="text-gray-500 dark:text-gray-400">
       ({fooListLength} items)
@@ -176,7 +176,7 @@ const FooListLength = () => {
 };
 
 const AddFooButton = () => {
-  const aui = useAssistantClient();
+  const aui = useAui();
   return (
     <button
       onClick={() => aui.fooList().addFoo()}
@@ -202,7 +202,7 @@ const EventLog = () => {
   const [logs, setLogs] = useState<EventLogEntry[]>([]);
 
   // Subscribe to all events using the wildcard selector
-  useAssistantEvent("*", (data) => {
+  useAuiEvent("*", (data) => {
     setLogs((prev) => [
       {
         id: ++idCounter,
@@ -254,12 +254,12 @@ const EventLog = () => {
  * but we're explicitly passing it here for clarity in the example.
  */
 export const ExampleApp = () => {
-  const aui = useAssistantClient({
+  const aui = useAui({
     fooList: FooListResource({ initialValues: true }),
   });
 
   return (
-    <AssistantProvider client={aui}>
+    <AuiProvider value={aui}>
       <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">
@@ -277,7 +277,7 @@ export const ExampleApp = () => {
         </div>
         <EventLog />
       </div>
-    </AssistantProvider>
+    </AuiProvider>
   );
 };
 
@@ -286,6 +286,8 @@ export const ExampleApp = () => {
 ## lib/store/foo-scope.ts
 
 ```typescript
+import "@assistant-ui/store";
+
 type FooState = { id: string; bar: string };
 type FooMethods = {
   getState: () => FooState;
@@ -327,8 +329,6 @@ declare module "@assistant-ui/store" {
   }
 }
 
-export default {};
-
 ```
 
 ## lib/store/foo-store.tsx
@@ -341,11 +341,11 @@ import "./foo-scope";
 import React from "react";
 import { resource, tapMemo, tapState } from "@assistant-ui/tap";
 import {
-  useAssistantClient,
-  AssistantProvider,
+  useAui,
+  AuiProvider,
   tapClientList,
   Derived,
-  useAssistantState,
+  useAuiState,
   tapAssistantEmit,
   type ClientOutput,
 } from "@assistant-ui/store";
@@ -425,7 +425,7 @@ export const FooProvider = ({
   index: number;
   children: React.ReactNode;
 }) => {
-  const aui = useAssistantClient({
+  const aui = useAui({
     foo: Derived({
       source: "fooList",
       query: { index: index },
@@ -433,7 +433,7 @@ export const FooProvider = ({
     }),
   });
 
-  return <AssistantProvider client={aui}>{children}</AssistantProvider>;
+  return <AuiProvider value={aui}>{children}</AuiProvider>;
 };
 
 export const FooList = ({
@@ -441,7 +441,7 @@ export const FooList = ({
 }: {
   components: { Foo: React.ComponentType };
 }) => {
-  const fooListState = useAssistantState(({ fooList }) => fooList.foos.length);
+  const fooListState = useAuiState(({ fooList }) => fooList.foos.length);
 
   return (
     <>
@@ -485,15 +485,15 @@ export default nextConfig;
   "dependencies": {
     "@assistant-ui/store": "workspace:*",
     "@assistant-ui/tap": "workspace:*",
-    "next": "^16.1.4",
-    "react": "^19.2.3",
-    "react-dom": "^19.2.3"
+    "next": "^16.1.6",
+    "react": "^19.2.4",
+    "react-dom": "^19.2.4"
   },
   "devDependencies": {
     "@assistant-ui/x-buildutils": "workspace:*",
     "@tailwindcss/postcss": "^4.1.18",
-    "@types/node": "^25.0.9",
-    "@types/react": "^19.2.9",
+    "@types/node": "^25.2.0",
+    "@types/react": "^19.2.10",
     "@types/react-dom": "^19.2.3",
     "postcss": "^8.5.6",
     "tailwindcss": "^4.1.18",
@@ -604,14 +604,14 @@ const FooListResource = resource(
 
 ```typescript
 const FooProvider = ({ index, children }) => {
-  const aui = useAssistantClient({
+  const aui = useAui({
     foo: Derived({
       source: "fooList",
       query: { index },
       get: (aui) => aui.fooList().foo({ index }),
     }),
   });
-  return <AssistantProvider client={aui}>{children}</AssistantProvider>;
+  return <AuiProvider value={aui}>{children}</AuiProvider>;
 };
 ```
 
@@ -619,12 +619,12 @@ const FooProvider = ({ index, children }) => {
 
 ```typescript
 // Subscribe to specific events within a scope
-useAssistantEvent("foo.updated", (payload) => {
+useAuiEvent("foo.updated", (payload) => {
   console.log(`Updated to: ${payload.newValue}`);
 });
 
 // Subscribe to all events using wildcard
-useAssistantEvent("*", (data) => {
+useAuiEvent("*", (data) => {
   console.log(data.event, data.payload);
 });
 ```