@assistant-ui/mcp-docs-server 0.1.23 → 0.1.25

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

@@ -0,0 +1,265 @@
+# Example: with-react-ink
+
+## package.json
+
+```json
+{
+  "name": "with-react-ink",
+  "version": "0.0.0",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "node --import tsx/esm src/dev.ts",
+    "build": "tsc",
+    "start": "node dist/index.js"
+  },
+  "dependencies": {
+    "@assistant-ui/react-ink": "workspace:*",
+    "@assistant-ui/react-ink-markdown": "workspace:*",
+    "ink": "^6.8.0",
+    "react": "^19.1.0"
+  },
+  "devDependencies": {
+    "@types/react": "^19.2.14",
+    "esbuild": "^0.27.4",
+    "tsx": "^4.21.0",
+    "typescript": "~5.9.3"
+  }
+}
+
+```
+
+## src/app.tsx
+
+```tsx
+import { useMemo } from "react";
+import { Box, Text } from "ink";
+import {
+  AssistantRuntimeProvider,
+  useLocalRuntime,
+  type ChatModelAdapter,
+} from "@assistant-ui/react-ink";
+import { Thread } from "./components/thread.js";
+
+const createDemoAdapter = (): ChatModelAdapter => ({
+  async *run({ messages }) {
+    const lastUserMessage = messages.filter((m) => m.role === "user").at(-1);
+
+    const userText =
+      lastUserMessage?.content
+        .filter((p) => p.type === "text")
+        .map((p) => ("text" in p ? p.text : ""))
+        .join("") ?? "";
+
+    // Simulate streaming with a markdown-rich response
+    const response = `## Response to your question
+
+You asked: **"${userText}"**
+
+Here's a quick example in JavaScript:
+
+\`\`\`js
+const promise = new Promise((resolve, reject) => {
+  setTimeout(() => resolve("done!"), 1000);
+});
+
+promise.then(result => console.log(result));
+\`\`\`
+
+### Key points
+
+- A \`Promise\` represents an **async operation**
+- It can be *pending*, *fulfilled*, or *rejected*
+- Use \`.then()\` and \`.catch()\` to handle results
+
+> Promises are the foundation of modern async JavaScript.
+
+| Method | Purpose |
+|--------|---------|
+| \`.then()\` | Handle success |
+| \`.catch()\` | Handle errors |
+| \`.finally()\` | Run cleanup |
+
+Learn more at [MDN Web Docs](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise).`;
+    const words = response.split(" ");
+
+    let accumulated = "";
+    for (const word of words) {
+      accumulated += (accumulated ? " " : "") + word;
+      yield { content: [{ type: "text" as const, text: accumulated }] };
+      await new Promise((r) => setTimeout(r, 50));
+    }
+  },
+});
+
+export const App = () => {
+  const adapter = useMemo(() => createDemoAdapter(), []);
+  const runtime = useLocalRuntime(adapter);
+
+  return (
+    <AssistantRuntimeProvider runtime={runtime}>
+      <Box flexDirection="column" padding={1}>
+        <Text bold color="cyan">
+          assistant-ui Terminal Chat
+        </Text>
+        <Text dimColor>
+          Type a message and press Enter to send. Ctrl+C to exit.
+        </Text>
+        <Box marginTop={1}>
+          <Thread />
+        </Box>
+      </Box>
+    </AssistantRuntimeProvider>
+  );
+};
+
+```
+
+## src/components/thread.tsx
+
+```tsx
+import { Box, Text } from "ink";
+import {
+  ThreadPrimitive,
+  ComposerPrimitive,
+  useAuiState,
+} from "@assistant-ui/react-ink";
+import { MarkdownText } from "@assistant-ui/react-ink-markdown";
+
+const UserMessage = () => {
+  const text = useAuiState((s) =>
+    s.message.parts
+      .filter((p) => p.type === "text")
+      .map((p) => ("text" in p ? p.text : ""))
+      .join(""),
+  );
+
+  return (
+    <Box marginBottom={1}>
+      <Text bold color="green">
+        You:{" "}
+      </Text>
+      <Text wrap="wrap">{text}</Text>
+    </Box>
+  );
+};
+
+const AssistantMessage = () => {
+  const text = useAuiState((s) =>
+    s.message.parts
+      .filter((p) => p.type === "text")
+      .map((p) => ("text" in p ? p.text : ""))
+      .join(""),
+  );
+
+  return (
+    <Box flexDirection="column" marginBottom={1}>
+      <Text bold color="blue">
+        AI:
+      </Text>
+      <MarkdownText text={text} />
+    </Box>
+  );
+};
+
+const StatusIndicator = () => {
+  const isRunning = useAuiState((s) => s.thread.isRunning);
+  if (!isRunning) return null;
+  return (
+    <Box marginBottom={1}>
+      <Text color="yellow">Thinking...</Text>
+    </Box>
+  );
+};
+
+export const Thread = () => {
+  return (
+    <ThreadPrimitive.Root>
+      <ThreadPrimitive.Empty>
+        <Box marginBottom={1}>
+          <Text dimColor>No messages yet. Start typing below!</Text>
+        </Box>
+      </ThreadPrimitive.Empty>
+
+      <ThreadPrimitive.Messages>
+        {({ message }) =>
+          message.role === "user" ? <UserMessage /> : <AssistantMessage />
+        }
+      </ThreadPrimitive.Messages>
+
+      <StatusIndicator />
+
+      <Box borderStyle="round" borderColor="gray" paddingX={1}>
+        <Text color="gray">{"> "}</Text>
+        <ComposerPrimitive.Input
+          submitOnEnter
+          placeholder="Type a message..."
+          autoFocus
+        />
+      </Box>
+    </ThreadPrimitive.Root>
+  );
+};
+
+```
+
+## src/dev.ts
+
+```typescript
+import { build } from "esbuild";
+import { spawn } from "node:child_process";
+import { fileURLToPath } from "node:url";
+import { dirname, join } from "node:path";
+
+const __dirname = dirname(fileURLToPath(import.meta.url));
+const outfile = join(__dirname, "..", ".dev", "index.mjs");
+
+await build({
+  entryPoints: [join(__dirname, "index.tsx")],
+  bundle: true,
+  platform: "node",
+  format: "esm",
+  outfile,
+  external: ["react", "react/*", "ink", "ink/*"],
+  jsx: "automatic",
+  jsxImportSource: "react",
+  logLevel: "warning",
+  ignoreAnnotations: true,
+});
+
+const child = spawn("node", [outfile], { stdio: "inherit" });
+child.on("exit", (code) => process.exit(code ?? 0));
+
+```
+
+## src/index.tsx
+
+```tsx
+import { render } from "ink";
+import { App } from "./app.js";
+
+render(<App />);
+
+```
+
+## tsconfig.json
+
+```json
+{
+  "compilerOptions": {
+    "target": "ESNext",
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "jsx": "react-jsx",
+    "strict": true,
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "outDir": "dist",
+    "rootDir": "src"
+  },
+  "include": ["src"],
+  "exclude": ["src/dev.ts"]
+}
+
+```
+

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

@@ -772,31 +772,30 @@ export default function Home() {
   "dependencies": {
     "@assistant-ui/react": "workspace:*",
     "@assistant-ui/react-markdown": "workspace:*",
-    "@react-router/node": "7.13.1",
-    "@react-router/serve": "7.13.1",
+    "@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.35",
-    "lucide-react": "^0.575.0",
-    "openai": "^6.25.0",
+    "isbot": "^5.1.36",
+    "lucide-react": "^0.577.0",
+    "openai": "^6.29.0",
     "react": "^19.2.4",
     "react-dom": "^19.2.4",
-    "react-router": "7.13.1",
+    "react-router": "^7.13.1",
     "remark-gfm": "^4.0.1",
-    "tailwind-merge": "^3.5.0",
-    "zustand": "^5.0.11"
+    "tailwind-merge": "^3.5.0"
   },
   "devDependencies": {
-    "@react-router/dev": "7.13.1",
+    "@react-router/dev": "^7.13.1",
     "@tailwindcss/vite": "^4.2.1",
-    "@types/node": "^25.3.0",
+    "@types/node": "^25.5.0",
     "@types/react": "^19.2.14",
     "@types/react-dom": "^19.2.3",
     "tailwindcss": "^4.2.1",
     "tw-animate-css": "^1.4.0",
     "typescript": "^5.9.3",
-    "vite": "^7.3.1",
+    "vite": "^8.0.0",
     "vite-tsconfig-paths": "^6.1.1"
   }
 }

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

@@ -79,7 +79,7 @@ import { ExampleApp } from "@/lib/example-app";
 
 export default function Home() {
   return (
-    <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="min-h-screen bg-linear-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 font-bold text-4xl text-gray-900 dark:text-white">
@@ -273,7 +273,7 @@ export const ExampleApp = () => {
           </p>
         </div>
         <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
-          <FooList components={{ Foo }} />
+          <FooList>{() => <Foo />}</FooList>
         </div>
         <EventLog />
       </div>
@@ -336,15 +336,16 @@ declare module "@assistant-ui/store" {
 
 import "./foo-scope";
 
-import React from "react";
+import { type ReactNode, useMemo } from "react";
 import { resource, tapMemo, tapState } from "@assistant-ui/tap";
 import {
   useAui,
+  useAuiState,
   AuiProvider,
   tapClientList,
   Derived,
-  useAuiState,
   tapAssistantEmit,
+  RenderChildrenWithAccessor,
   type ClientOutput,
 } from "@assistant-ui/store";
 
@@ -410,17 +411,17 @@ export const FooListResource = resource(
   },
 );
 
-export const FooProvider = ({
+const FooProvider = ({
   index,
   children,
 }: {
   index: number;
-  children: React.ReactNode;
+  children: ReactNode;
 }) => {
   const aui = useAui({
     foo: Derived({
       source: "fooList",
-      query: { index: index },
+      query: { index },
       get: (aui) => aui.fooList().foo({ index }),
     }),
   });
@@ -429,20 +430,30 @@ export const FooProvider = ({
 };
 
 export const FooList = ({
-  components,
+  children,
 }: {
-  components: { Foo: React.ComponentType };
+  children: (item: { foo: FooData }) => ReactNode;
 }) => {
-  const fooListState = useAuiState((s) => s.fooList.foos.length);
+  const length = useAuiState((s) => s.fooList.foos.length);
 
-  return (
-    <>
-      {Array.from({ length: fooListState }, (_, index) => (
+  return useMemo(
+    () =>
+      Array.from({ length }, (_, index) => (
         <FooProvider key={index} index={index}>
-          <components.Foo />
+          <RenderChildrenWithAccessor
+            getItemState={(aui) => aui.fooList().foo({ index }).getState()}
+          >
+            {(getItem) =>
+              children({
+                get foo() {
+                  return getItem();
+                },
+              })
+            }
+          </RenderChildrenWithAccessor>
         </FooProvider>
-      ))}
-    </>
+      )),
+    [length, children],
   );
 };
 
@@ -484,10 +495,10 @@ export default nextConfig;
   "devDependencies": {
     "@assistant-ui/x-buildutils": "workspace:*",
     "@tailwindcss/postcss": "^4.2.1",
-    "@types/node": "^25.3.0",
+    "@types/node": "^25.5.0",
     "@types/react": "^19.2.14",
     "@types/react-dom": "^19.2.3",
-    "postcss": "^8.5.6",
+    "postcss": "^8.5.8",
     "tailwindcss": "^4.2.1",
     "tw-animate-css": "^1.4.0",
     "typescript": "^5.9.3"

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

@@ -65,13 +65,13 @@
     "@assistant-ui/react": "workspace:*",
     "@assistant-ui/react-markdown": "workspace:*",
     "@tailwindcss/vite": "^4.2.1",
-    "@tanstack/react-router": "^1.162.9",
-    "@tanstack/react-start": "^1.162.9",
+    "@tanstack/react-router": "^1.166.8",
+    "@tanstack/react-start": "^1.166.9",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
-    "lucide-react": "^0.575.0",
+    "lucide-react": "^0.577.0",
     "nitro": "^3.0.1-alpha.2",
-    "openai": "^6.25.0",
+    "openai": "^6.29.0",
     "react": "^19.2.4",
     "react-dom": "^19.2.4",
     "remark-gfm": "^4.0.1",
@@ -81,12 +81,12 @@
   },
   "devDependencies": {
     "@assistant-ui/x-buildutils": "workspace:*",
-    "@types/node": "^25.3.0",
+    "@types/node": "^25.5.0",
     "@types/react": "^19.2.14",
     "@types/react-dom": "^19.2.3",
-    "@vitejs/plugin-react": "^5.1.4",
+    "@vitejs/plugin-react": "^6.0.1",
     "typescript": "^5.9.3",
-    "vite": "^7.3.1"
+    "vite": "^8.0.0"
   }
 }
 

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

@@ -433,7 +433,9 @@ function ThreadListSidebar() {
       </div>
 
       <div className="flex-1 overflow-y-auto p-2">
-        <ThreadListPrimitive.Items components={{ ThreadListItem }} />
+        <ThreadListPrimitive.Items>
+          {() => <ThreadListItem />}
+        </ThreadListPrimitive.Items>
       </div>
 
       <div className="border-t p-2">
@@ -595,7 +597,7 @@ export default nextConfig;
     "@assistant-ui/ui": "workspace:*",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
-    "lucide-react": "^0.575.0",
+    "lucide-react": "^0.577.0",
     "next": "^16.1.6",
     "react": "^19.2.4",
     "react-dom": "^19.2.4",
@@ -604,10 +606,10 @@ export default nextConfig;
   "devDependencies": {
     "@assistant-ui/x-buildutils": "workspace:*",
     "@tailwindcss/postcss": "^4.2.1",
-    "@types/node": "^25.3.0",
+    "@types/node": "^25.5.0",
     "@types/react": "^19.2.14",
     "@types/react-dom": "^19.2.3",
-    "postcss": "^8.5.6",
+    "postcss": "^8.5.8",
     "tailwindcss": "^4.2.1",
     "tw-animate-css": "^1.4.0",
     "typescript": "^5.9.3"

package/.docs/raw/blog/2025-01-31-changelog/index.mdx

@@ -27,7 +27,7 @@ We began a migration towards distributing our components as unstyled primitives
 
 ## Styled components moved to @assistant-ui/react-ui
 
-All styled components (Thread, ThreadList, AssistantModal, makeMarkdownText, etc.) have been moved to a new package, `@assistant-ui/react-ui`.
+All styled components (Thread, ThreadList, AssistantModal, makeMarkdownText, etc.) have been moved to a new package, `@assistant-ui/ui`.
 
 To ease the migration, we added a migration codemod: