@assistant-ui/mcp-docs-server 0.1.15 → 0.1.16

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

@@ -82,10 +82,10 @@ export default function Home() {
     <div className="min-h-screen bg-gradient-to-br from-gray-50 to-gray-100 p-8 dark:from-gray-900 dark:to-gray-800">
       <div className="mx-auto max-w-4xl">
         <div className="mb-8">
-          <h1 className="mb-2 text-4xl font-bold text-gray-900 dark:text-white">
+          <h1 className="mb-2 font-bold text-4xl text-gray-900 dark:text-white">
             @assistant-ui/store Example
           </h1>
-          <p className="text-lg text-gray-600 dark:text-gray-400">
+          <p className="text-gray-600 text-lg dark:text-gray-400">
             Demonstrating tap-based state management with scopes, lists, and
             providers
           </p>
@@ -104,15 +104,15 @@ export default function Home() {
 ```tsx
 "use client";
 
+import { useState } from "react";
 import {
   useAssistantClient,
   AssistantProvider,
   useAssistantState,
+  useAssistantEvent,
 } from "@assistant-ui/store";
 import { FooList, FooListResource } from "./store/foo-store";
 
-import "./store/foo-scope"; // Register the fooList scope (demonstrates scope registry)
-
 /**
  * Single Foo component - displays and allows editing a single foo
  */
@@ -132,15 +132,15 @@ const Foo = () => {
     <div className="rounded-lg border border-gray-200 bg-white p-6 shadow-md transition-shadow hover:shadow-lg dark:border-gray-700 dark:bg-gray-800">
       <div className="space-y-3">
         <div className="flex items-center gap-2">
-          <span className="text-sm font-semibold text-gray-500 dark:text-gray-400">
+          <span className="font-semibold text-gray-500 text-sm dark:text-gray-400">
             ID:
           </span>
-          <span className="font-mono text-sm text-gray-900 dark:text-white">
+          <span className="font-mono text-gray-900 text-sm dark:text-white">
             {fooState.id}
           </span>
         </div>
         <div className="flex items-center gap-2">
-          <span className="text-sm font-semibold text-gray-500 dark:text-gray-400">
+          <span className="font-semibold text-gray-500 text-sm dark:text-gray-400">
             Value:
           </span>
           <span className="text-gray-900 dark:text-white">{fooState.bar}</span>
@@ -148,13 +148,13 @@ const Foo = () => {
         <div className="mt-2 flex gap-2">
           <button
             onClick={handleUpdate}
-            className="flex-1 rounded-md bg-blue-600 px-4 py-2 font-medium text-white transition-colors hover:bg-blue-700 focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:outline-none dark:focus:ring-offset-gray-800"
+            className="flex-1 rounded-md bg-blue-600 px-4 py-2 font-medium text-white transition-colors hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 dark:focus:ring-offset-gray-800"
           >
             Update
           </button>
           <button
             onClick={() => aui.foo().remove()}
-            className="rounded-md bg-red-600 px-4 py-2 font-medium text-white transition-colors hover:bg-red-700 focus:ring-2 focus:ring-red-500 focus:ring-offset-2 focus:outline-none dark:focus:ring-offset-gray-800"
+            className="rounded-md bg-red-600 px-4 py-2 font-medium text-white transition-colors hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-2 dark:focus:ring-offset-gray-800"
           >
             Delete
           </button>
@@ -178,13 +178,73 @@ const AddFooButton = () => {
   return (
     <button
       onClick={() => aui.fooList().addFoo()}
-      className="rounded-md bg-green-600 px-4 py-2 font-medium text-white transition-colors hover:bg-green-700 focus:ring-2 focus:ring-green-500 focus:ring-offset-2 focus:outline-none dark:focus:ring-offset-gray-800"
+      className="rounded-md bg-green-600 px-4 py-2 font-medium text-white transition-colors hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-offset-2 dark:focus:ring-offset-gray-800"
     >
       Add New
     </button>
   );
 };
 
+type EventLogEntry = {
+  id: number;
+  event: string;
+  payload: unknown;
+  timestamp: Date;
+};
+
+let idCounter = 0;
+/**
+ * EventLog component - demonstrates event subscription
+ */
+const EventLog = () => {
+  const [logs, setLogs] = useState<EventLogEntry[]>([]);
+
+  // Subscribe to all events using the wildcard selector
+  useAssistantEvent("*", (data) => {
+    setLogs((prev) => [
+      {
+        id: ++idCounter,
+        event: data.event,
+        payload: data.payload,
+        timestamp: new Date(),
+      },
+      ...prev.slice(0, 9), // Keep last 10 entries
+    ]);
+  });
+
+  return (
+    <div className="rounded-lg border border-gray-200 bg-white p-4 shadow-sm dark:border-gray-700 dark:bg-gray-800">
+      <h3 className="mb-3 font-semibold text-gray-900 dark:text-white">
+        Event Log
+      </h3>
+      <div className="max-h-48 space-y-2 overflow-y-auto">
+        {logs.length === 0 ? (
+          <p className="text-gray-500 text-sm dark:text-gray-400">
+            No events yet. Try updating or deleting a foo.
+          </p>
+        ) : (
+          logs.map((log) => (
+            <div
+              key={log.id}
+              className="rounded border border-gray-100 bg-gray-50 p-2 font-mono text-xs dark:border-gray-600 dark:bg-gray-700"
+            >
+              <span className="font-semibold text-blue-600 dark:text-blue-400">
+                {log.event}
+              </span>
+              <span className="ml-2 text-gray-600 dark:text-gray-300">
+                {JSON.stringify(log.payload)}
+              </span>
+              <span className="ml-2 text-gray-400 dark:text-gray-500">
+                {log.timestamp.toLocaleTimeString()}
+              </span>
+            </div>
+          ))
+        )}
+      </div>
+    </div>
+  );
+};
+
 /**
  * Example App - demonstrates the store with styled components
  *
@@ -201,18 +261,19 @@ export const ExampleApp = () => {
       <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">
-            <h2 className="text-xl font-semibold text-gray-900 dark:text-white">
+            <h2 className="font-semibold text-gray-900 text-xl dark:text-white">
               Foo List <FooListLength />
             </h2>
             <AddFooButton />
           </div>
-          <p className="mt-1 text-sm text-gray-600 dark:text-gray-400">
+          <p className="mt-1 text-gray-600 text-sm dark:text-gray-400">
             Each item is rendered in its own FooProvider with scoped access
           </p>
         </div>
         <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
           <FooList components={{ Foo }} />
         </div>
+        <EventLog />
       </div>
     </AssistantProvider>
   );
@@ -223,16 +284,8 @@ export const ExampleApp = () => {
 ## lib/store/foo-scope.ts
 
 ```typescript
-/**
- * Scope registration for the foo example
- * Import this file to register the default fooList scope
- */
 import { registerAssistantScope } from "@assistant-ui/store";
 
-/**
- * Define scopes via module augmentation
- * Implement the scope definition raw without importing ScopeDefinition
- */
 declare module "@assistant-ui/store" {
   interface AssistantScopeRegistry {
     foo: {
@@ -241,8 +294,11 @@ declare module "@assistant-ui/store" {
         updateBar: (newBar: string) => void;
         remove: () => void;
       };
-      source: "fooList";
-      query: { index: number } | { id: string };
+      meta: { source: "fooList"; query: { index: number } | { id: string } };
+      events: {
+        "foo.updated": { id: string; newValue: string };
+        "foo.removed": { id: string };
+      };
     };
     fooList: {
       value: {
@@ -252,18 +308,24 @@ declare module "@assistant-ui/store" {
         ) => AssistantScopeRegistry["foo"]["value"];
         addFoo: (id?: string) => void;
       };
-      source: "root";
-      query: Record<string, never>;
+      meta: { source: "root"; query: Record<string, never> };
+      events: {
+        "fooList.added": { id: string };
+      };
     };
   }
 }
 
-// Register the fooList scope with a default implementation
 registerAssistantScope({
   name: "fooList",
   defaultInitialize: { error: "FooList is not configured" },
 });
 
+registerAssistantScope({
+  name: "foo",
+  defaultInitialize: { error: "Foo is not configured" },
+});
+
 ```
 
 ## lib/store/foo-store.tsx
@@ -271,6 +333,9 @@ registerAssistantScope({
 ```tsx
 "use client";
 
+// Import scope types first to ensure module augmentation is available
+import "./foo-scope";
+
 import React from "react";
 import { resource, tapState } from "@assistant-ui/tap";
 import {
@@ -280,12 +345,9 @@ import {
   tapStoreList,
   DerivedScope,
   useAssistantState,
+  tapStoreContext,
 } from "@assistant-ui/store";
 
-/**
- * Single Foo item resource
- * Manages the state and actions for a single foo item
- */
 export const FooItemResource = resource(
   ({
     initialValue: { id, initialBar },
@@ -294,6 +356,8 @@ export const FooItemResource = resource(
     initialValue: { id: string; initialBar: string };
     remove: () => void;
   }) => {
+    const { events } = tapStoreContext();
+
     const [state, setState] = tapState<{ id: string; bar: string }>({
       id,
       bar: initialBar,
@@ -301,13 +365,19 @@ export const FooItemResource = resource(
 
     const updateBar = (newBar: string) => {
       setState({ ...state, bar: newBar });
+      events.emit("foo.updated", { id, newValue: newBar });
+    };
+
+    const handleRemove = () => {
+      events.emit("foo.removed", { id });
+      remove();
     };
 
     return tapApi(
       {
         getState: () => state,
         updateBar,
-        remove,
+        remove: handleRemove,
       },
       { key: id },
     );
@@ -320,6 +390,7 @@ export const FooItemResource = resource(
  */
 let counter = 3;
 export const FooListResource = resource(() => {
+  const { events } = tapStoreContext();
   const idGenerator = () => `foo-${++counter}`;
 
   const foos = tapStoreList({
@@ -332,10 +403,16 @@ export const FooListResource = resource(() => {
     idGenerator,
   });
 
+  const addFoo = (id?: string) => {
+    const newId = id ?? idGenerator();
+    foos.add(newId);
+    events.emit("fooList.added", { id: newId });
+  };
+
   return tapApi({
     getState: () => ({ foos: foos.state }),
     foo: foos.api,
-    addFoo: (id?: string) => foos.add(id),
+    addFoo,
   });
 });
 
@@ -408,15 +485,14 @@ export default nextConfig;
   "scripts": {
     "dev": "next dev",
     "build": "next build",
-    "start": "next start",
-    "lint": "eslint"
+    "start": "next start"
   },
   "dependencies": {
     "@assistant-ui/store": "workspace:*",
     "@assistant-ui/tap": "workspace:*",
-    "next": "16.0.4",
-    "react": "19.2.0",
-    "react-dom": "19.2.0"
+    "next": "16.0.7",
+    "react": "19.2.1",
+    "react-dom": "19.2.1"
   },
   "devDependencies": {
     "@assistant-ui/x-buildutils": "workspace:*",
@@ -424,8 +500,6 @@ export default nextConfig;
     "@types/node": "^24",
     "@types/react": "19.2.7",
     "@types/react-dom": "19.2.3",
-    "eslint": "^9",
-    "eslint-config-next": "16.0.4",
     "tailwindcss": "^4",
     "typescript": "^5"
   }