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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (135) hide show
  1. package/.docs/organized/code-examples/waterfall.md +4 -2
  2. package/.docs/organized/code-examples/with-a2a.md +676 -0
  3. package/.docs/organized/code-examples/with-ag-ui.md +5 -6
  4. package/.docs/organized/code-examples/with-ai-sdk-v6.md +27 -15
  5. package/.docs/organized/code-examples/with-artifacts.md +4 -4
  6. package/.docs/organized/code-examples/with-assistant-transport.md +2 -2
  7. package/.docs/organized/code-examples/with-chain-of-thought.md +33 -25
  8. package/.docs/organized/code-examples/with-cloud-standalone.md +9 -6
  9. package/.docs/organized/code-examples/with-cloud.md +4 -4
  10. package/.docs/organized/code-examples/with-custom-thread-list.md +6 -6
  11. package/.docs/organized/code-examples/with-elevenlabs-scribe.md +7 -7
  12. package/.docs/organized/code-examples/with-expo.md +565 -514
  13. package/.docs/organized/code-examples/with-external-store.md +2 -2
  14. package/.docs/organized/code-examples/with-ffmpeg.md +4 -4
  15. package/.docs/organized/code-examples/with-google-adk.md +353 -0
  16. package/.docs/organized/code-examples/with-heat-graph.md +304 -0
  17. package/.docs/organized/code-examples/with-langgraph.md +24 -22
  18. package/.docs/organized/code-examples/with-parent-id-grouping.md +3 -3
  19. package/.docs/organized/code-examples/with-react-hook-form.md +4 -4
  20. package/.docs/organized/code-examples/with-react-ink.md +265 -0
  21. package/.docs/organized/code-examples/with-react-router.md +5 -5
  22. package/.docs/organized/code-examples/with-store.md +28 -17
  23. package/.docs/organized/code-examples/with-tanstack.md +7 -7
  24. package/.docs/organized/code-examples/with-tap-runtime.md +5 -3
  25. package/.docs/raw/blog/2025-01-31-changelog/index.mdx +1 -1
  26. package/.docs/raw/blog/2026-03-launch-week/index.mdx +227 -0
  27. package/.docs/raw/docs/(docs)/architecture.mdx +1 -1
  28. package/.docs/raw/docs/(docs)/cli.mdx +14 -9
  29. package/.docs/raw/docs/(docs)/copilots/make-assistant-tool-ui.mdx +8 -3
  30. package/.docs/raw/docs/(docs)/copilots/make-assistant-tool.mdx +5 -1
  31. package/.docs/raw/docs/(docs)/copilots/{make-assistant-readable.mdx → make-assistant-visible.mdx} +14 -5
  32. package/.docs/raw/docs/(docs)/copilots/model-context.mdx +11 -11
  33. package/.docs/raw/docs/(docs)/copilots/motivation.mdx +2 -2
  34. package/.docs/raw/docs/(docs)/devtools.mdx +3 -2
  35. package/.docs/raw/docs/(docs)/guides/attachments.mdx +9 -11
  36. package/.docs/raw/docs/(docs)/guides/branching.mdx +11 -6
  37. package/.docs/raw/docs/(docs)/guides/chain-of-thought.mdx +18 -16
  38. package/.docs/raw/docs/(docs)/guides/context-api.mdx +81 -43
  39. package/.docs/raw/docs/(docs)/guides/dictation.mdx +5 -5
  40. package/.docs/raw/docs/(docs)/guides/editing.mdx +16 -7
  41. package/.docs/raw/docs/(docs)/guides/latex.mdx +3 -0
  42. package/.docs/raw/docs/(docs)/guides/message-timing.mdx +2 -1
  43. package/.docs/raw/docs/(docs)/guides/multi-agent.mdx +173 -0
  44. package/.docs/raw/docs/(docs)/guides/quoting.mdx +55 -206
  45. package/.docs/raw/docs/(docs)/guides/speech.mdx +1 -4
  46. package/.docs/raw/docs/(docs)/guides/suggestions.mdx +9 -15
  47. package/.docs/raw/docs/(docs)/guides/tool-ui.mdx +17 -7
  48. package/.docs/raw/docs/(docs)/guides/tools.mdx +24 -9
  49. package/.docs/raw/docs/(docs)/index.mdx +3 -3
  50. package/.docs/raw/docs/(docs)/installation.mdx +69 -46
  51. package/.docs/raw/docs/(reference)/api-reference/context-providers/text-message-part-provider.mdx +20 -6
  52. package/.docs/raw/docs/(reference)/api-reference/integrations/react-data-stream.mdx +24 -4
  53. package/.docs/raw/docs/(reference)/api-reference/integrations/react-hook-form.mdx +1 -1
  54. package/.docs/raw/docs/(reference)/api-reference/integrations/vercel-ai-sdk.mdx +20 -19
  55. package/.docs/raw/docs/(reference)/api-reference/overview.mdx +28 -53
  56. package/.docs/raw/docs/(reference)/api-reference/primitives/action-bar.mdx +4 -4
  57. package/.docs/raw/docs/(reference)/api-reference/primitives/assistant-modal.mdx +7 -1
  58. package/.docs/raw/docs/(reference)/api-reference/primitives/attachment.mdx +20 -14
  59. package/.docs/raw/docs/(reference)/api-reference/primitives/branch-picker.mdx +1 -1
  60. package/.docs/raw/docs/(reference)/api-reference/primitives/composer.mdx +99 -45
  61. package/.docs/raw/docs/(reference)/api-reference/primitives/message-part.mdx +52 -40
  62. package/.docs/raw/docs/(reference)/api-reference/primitives/message.mdx +343 -23
  63. package/.docs/raw/docs/(reference)/api-reference/primitives/suggestion.mdx +4 -6
  64. package/.docs/raw/docs/(reference)/api-reference/primitives/thread-list-item.mdx +4 -2
  65. package/.docs/raw/docs/(reference)/api-reference/primitives/thread-list.mdx +3 -5
  66. package/.docs/raw/docs/(reference)/api-reference/primitives/thread.mdx +169 -22
  67. package/.docs/raw/docs/(reference)/api-reference/runtimes/assistant-runtime.mdx +14 -4
  68. package/.docs/raw/docs/(reference)/api-reference/runtimes/attachment-runtime.mdx +15 -26
  69. package/.docs/raw/docs/(reference)/api-reference/runtimes/composer-runtime.mdx +39 -21
  70. package/.docs/raw/docs/(reference)/api-reference/runtimes/message-part-runtime.mdx +33 -9
  71. package/.docs/raw/docs/(reference)/api-reference/runtimes/message-runtime.mdx +48 -21
  72. package/.docs/raw/docs/(reference)/api-reference/runtimes/thread-list-item-runtime.mdx +36 -7
  73. package/.docs/raw/docs/(reference)/api-reference/runtimes/thread-list-runtime.mdx +30 -10
  74. package/.docs/raw/docs/(reference)/api-reference/runtimes/thread-runtime.mdx +12 -10
  75. package/.docs/raw/docs/(reference)/migrations/deprecation-policy.mdx +1 -1
  76. package/.docs/raw/docs/(reference)/migrations/react-langgraph-v0-7.mdx +9 -4
  77. package/.docs/raw/docs/(reference)/migrations/v0-11.mdx +7 -5
  78. package/.docs/raw/docs/(reference)/migrations/v0-12.mdx +9 -7
  79. package/.docs/raw/docs/(reference)/migrations/v0-14.mdx +159 -0
  80. package/.docs/raw/docs/(reference)/react-compatibility.mdx +5 -134
  81. package/.docs/raw/docs/cloud/ai-sdk-assistant-ui.mdx +84 -6
  82. package/.docs/raw/docs/cloud/ai-sdk.mdx +14 -4
  83. package/.docs/raw/docs/cloud/langgraph.mdx +13 -3
  84. package/.docs/raw/docs/ink/adapters.mdx +41 -0
  85. package/.docs/raw/docs/ink/custom-backend.mdx +203 -0
  86. package/.docs/raw/docs/ink/hooks.mdx +448 -0
  87. package/.docs/raw/docs/ink/index.mdx +239 -0
  88. package/.docs/raw/docs/ink/migration.mdx +140 -0
  89. package/.docs/raw/docs/ink/primitives.mdx +699 -0
  90. package/.docs/raw/docs/react-native/adapters.mdx +63 -87
  91. package/.docs/raw/docs/react-native/custom-backend.mdx +11 -14
  92. package/.docs/raw/docs/react-native/hooks.mdx +214 -232
  93. package/.docs/raw/docs/react-native/index.mdx +118 -159
  94. package/.docs/raw/docs/react-native/migration.mdx +144 -0
  95. package/.docs/raw/docs/react-native/primitives.mdx +431 -302
  96. package/.docs/raw/docs/runtimes/a2a/index.mdx +294 -0
  97. package/.docs/raw/docs/runtimes/ai-sdk/v4-legacy.mdx +9 -9
  98. package/.docs/raw/docs/runtimes/ai-sdk/v5-legacy.mdx +14 -3
  99. package/.docs/raw/docs/runtimes/assistant-transport.mdx +59 -25
  100. package/.docs/raw/docs/runtimes/custom/custom-thread-list.mdx +13 -6
  101. package/.docs/raw/docs/runtimes/custom/external-store.mdx +138 -38
  102. package/.docs/raw/docs/runtimes/custom/local.mdx +184 -42
  103. package/.docs/raw/docs/runtimes/data-stream.mdx +92 -19
  104. package/.docs/raw/docs/runtimes/google-adk/index.mdx +624 -0
  105. package/.docs/raw/docs/runtimes/helicone.mdx +6 -6
  106. package/.docs/raw/docs/runtimes/langgraph/index.mdx +38 -27
  107. package/.docs/raw/docs/runtimes/langgraph/tutorial/introduction.mdx +1 -1
  108. package/.docs/raw/docs/runtimes/langgraph/tutorial/part-1.mdx +15 -20
  109. package/.docs/raw/docs/runtimes/langgraph/tutorial/part-2.mdx +7 -11
  110. package/.docs/raw/docs/runtimes/langgraph/tutorial/part-3.mdx +8 -11
  111. package/.docs/raw/docs/runtimes/langserve.mdx +6 -7
  112. package/.docs/raw/docs/runtimes/pick-a-runtime.mdx +18 -3
  113. package/.docs/raw/docs/ui/file.mdx +5 -4
  114. package/.docs/raw/docs/ui/image.mdx +5 -4
  115. package/.docs/raw/docs/ui/markdown.mdx +3 -1
  116. package/.docs/raw/docs/ui/model-selector.mdx +8 -8
  117. package/.docs/raw/docs/ui/part-grouping.mdx +7 -10
  118. package/.docs/raw/docs/ui/quote.mdx +210 -0
  119. package/.docs/raw/docs/ui/reasoning.mdx +12 -11
  120. package/.docs/raw/docs/ui/sources.mdx +88 -17
  121. package/.docs/raw/docs/ui/streamdown.mdx +16 -7
  122. package/.docs/raw/docs/ui/thread-list.mdx +11 -13
  123. package/.docs/raw/docs/ui/thread.mdx +28 -33
  124. package/.docs/raw/docs/ui/tool-fallback.mdx +5 -6
  125. package/.docs/raw/docs/ui/tool-group.mdx +9 -8
  126. package/.docs/raw/docs/utilities/heat-graph.mdx +236 -0
  127. package/.docs/raw/docs/utilities/tw-shimmer.mdx +211 -0
  128. package/package.json +4 -4
  129. package/.docs/raw/docs/(reference)/legacy/styled/assistant-modal.mdx +0 -77
  130. package/.docs/raw/docs/(reference)/legacy/styled/decomposition.mdx +0 -635
  131. package/.docs/raw/docs/(reference)/legacy/styled/markdown.mdx +0 -77
  132. package/.docs/raw/docs/(reference)/legacy/styled/scrollbar.mdx +0 -72
  133. package/.docs/raw/docs/(reference)/legacy/styled/thread-width.mdx +0 -22
  134. package/.docs/raw/docs/(reference)/legacy/styled/thread.mdx +0 -77
  135. /package/.docs/raw/docs/cloud/{overview.mdx → index.mdx} +0 -0
@@ -40,19 +40,26 @@ async function handleRequest(req: NextRequest, method: string) {
40
40
  options,
41
41
  );
42
42
 
43
+ const headers = new Headers(res.headers);
44
+ headers.delete("content-encoding");
45
+ headers.delete("content-length");
46
+ headers.delete("transfer-encoding");
47
+ const corsHeaders = getCorsHeaders();
48
+ for (const [key, value] of Object.entries(corsHeaders)) {
49
+ headers.set(key, value);
50
+ }
51
+
43
52
  return new NextResponse(res.body, {
44
53
  status: res.status,
45
54
  statusText: res.statusText,
46
- headers: {
47
- ...res.headers,
48
- ...getCorsHeaders(),
49
- },
55
+ headers,
50
56
  });
51
57
  } catch (e: unknown) {
52
58
  if (e instanceof Error) {
59
+ const typedError = e as Error & { status?: number };
53
60
  return NextResponse.json(
54
- { error: e.message },
55
- { status: (e as { status?: number }).status ?? 500 },
61
+ { error: typedError.message },
62
+ { status: typedError.status ?? 500 },
56
63
  );
57
64
  }
58
65
  return NextResponse.json({ error: "Unknown error" }, { status: 500 });
@@ -64,16 +71,11 @@ export const POST = (req: NextRequest) => handleRequest(req, "POST");
64
71
  export const PUT = (req: NextRequest) => handleRequest(req, "PUT");
65
72
  export const PATCH = (req: NextRequest) => handleRequest(req, "PATCH");
66
73
  export const DELETE = (req: NextRequest) => handleRequest(req, "DELETE");
67
-
68
- // Add a new OPTIONS handler
69
- export const OPTIONS = () => {
70
- return new NextResponse(null, {
74
+ export const OPTIONS = () =>
75
+ new NextResponse(null, {
71
76
  status: 204,
72
- headers: {
73
- ...getCorsHeaders(),
74
- },
77
+ headers: getCorsHeaders(),
75
78
  });
76
- };
77
79
 
78
80
  ```
79
81
 
@@ -735,14 +737,14 @@ const createClient = () => {
735
737
  });
736
738
  };
737
739
 
738
- export const createAssistant = async (graphId: string) => {
740
+ export const createThread = async () => {
739
741
  const client = createClient();
740
- return client.assistants.create({ graphId });
742
+ return client.threads.create();
741
743
  };
742
744
 
743
- export const createThread = async () => {
745
+ export const createAssistant = async (graphId: string) => {
744
746
  const client = createClient();
745
- return client.threads.create();
747
+ return client.assistants.create({ graphId });
746
748
  };
747
749
 
748
750
  export const getThreadState = async (
@@ -822,7 +824,7 @@ export const sendMessage = (params: {
822
824
  model_name: "openai",
823
825
  },
824
826
  },
825
- streamMode: "messages-tuple",
827
+ streamMode: ["messages-tuple", "values"],
826
828
  ...(checkpointId && { checkpoint_id: checkpointId }),
827
829
  ...restConfig,
828
830
  },
@@ -869,10 +871,10 @@ export default nextConfig;
869
871
  "@assistant-ui/react-langgraph": "workspace:*",
870
872
  "@assistant-ui/react-markdown": "workspace:*",
871
873
  "@assistant-ui/ui": "workspace:*",
872
- "@langchain/langgraph-sdk": "^1.6.5",
874
+ "@langchain/langgraph-sdk": "^1.7.2",
873
875
  "class-variance-authority": "^0.7.1",
874
876
  "clsx": "^2.1.1",
875
- "lucide-react": "^0.576.0",
877
+ "lucide-react": "^0.577.0",
876
878
  "next": "^16.1.6",
877
879
  "react": "^19.2.4",
878
880
  "react-dom": "^19.2.4",
@@ -881,7 +883,7 @@ export default nextConfig;
881
883
  "devDependencies": {
882
884
  "@assistant-ui/x-buildutils": "workspace:*",
883
885
  "@tailwindcss/postcss": "^4.2.1",
884
- "@types/node": "^25.3.3",
886
+ "@types/node": "^25.5.0",
885
887
  "@types/react": "^19.2.14",
886
888
  "@types/react-dom": "^19.2.3",
887
889
  "postcss": "^8.5.8",
@@ -474,13 +474,13 @@ export default nextConfig;
474
474
  "start": "next start"
475
475
  },
476
476
  "dependencies": {
477
- "@ai-sdk/openai": "^3.0.39",
477
+ "@ai-sdk/openai": "^3.0.41",
478
478
  "@assistant-ui/react": "workspace:*",
479
479
  "@assistant-ui/react-markdown": "workspace:*",
480
480
  "@assistant-ui/ui": "workspace:*",
481
481
  "class-variance-authority": "^0.7.1",
482
482
  "clsx": "^2.1.1",
483
- "lucide-react": "^0.576.0",
483
+ "lucide-react": "^0.577.0",
484
484
  "next": "^16.1.6",
485
485
  "react": "^19.2.4",
486
486
  "react-dom": "^19.2.4",
@@ -489,7 +489,7 @@ export default nextConfig;
489
489
  "devDependencies": {
490
490
  "@assistant-ui/x-buildutils": "workspace:*",
491
491
  "@tailwindcss/postcss": "^4.2.1",
492
- "@types/node": "^25.3.3",
492
+ "@types/node": "^25.5.0",
493
493
  "@types/react": "^19.2.14",
494
494
  "@types/react-dom": "^19.2.3",
495
495
  "postcss": "^8.5.8",
@@ -537,16 +537,16 @@ export default nextConfig;
537
537
  "start": "next start"
538
538
  },
539
539
  "dependencies": {
540
- "@ai-sdk/openai": "^3.0.39",
540
+ "@ai-sdk/openai": "^3.0.41",
541
541
  "@assistant-ui/react": "workspace:*",
542
542
  "@assistant-ui/react-ai-sdk": "workspace:*",
543
543
  "@assistant-ui/react-hook-form": "workspace:*",
544
544
  "@assistant-ui/react-markdown": "workspace:*",
545
545
  "@assistant-ui/ui": "workspace:*",
546
- "ai": "^6.0.111",
546
+ "ai": "^6.0.116",
547
547
  "class-variance-authority": "^0.7.1",
548
548
  "clsx": "^2.1.1",
549
- "lucide-react": "^0.576.0",
549
+ "lucide-react": "^0.577.0",
550
550
  "next": "^16.1.6",
551
551
  "react": "^19.2.4",
552
552
  "react-dom": "^19.2.4",
@@ -556,7 +556,7 @@ export default nextConfig;
556
556
  "devDependencies": {
557
557
  "@assistant-ui/x-buildutils": "workspace:*",
558
558
  "@tailwindcss/postcss": "^4.2.1",
559
- "@types/node": "^25.3.3",
559
+ "@types/node": "^25.5.0",
560
560
  "@types/react": "^19.2.14",
561
561
  "@types/react-dom": "^19.2.3",
562
562
  "postcss": "^8.5.8",
@@ -0,0 +1,265 @@
1
+ # Example: with-react-ink
2
+
3
+ ## package.json
4
+
5
+ ```json
6
+ {
7
+ "name": "with-react-ink",
8
+ "version": "0.0.0",
9
+ "private": true,
10
+ "type": "module",
11
+ "scripts": {
12
+ "dev": "node --import tsx/esm src/dev.ts",
13
+ "build": "tsc",
14
+ "start": "node dist/index.js"
15
+ },
16
+ "dependencies": {
17
+ "@assistant-ui/react-ink": "workspace:*",
18
+ "@assistant-ui/react-ink-markdown": "workspace:*",
19
+ "ink": "^6.8.0",
20
+ "react": "^19.1.0"
21
+ },
22
+ "devDependencies": {
23
+ "@types/react": "^19.2.14",
24
+ "esbuild": "^0.27.4",
25
+ "tsx": "^4.21.0",
26
+ "typescript": "~5.9.3"
27
+ }
28
+ }
29
+
30
+ ```
31
+
32
+ ## src/app.tsx
33
+
34
+ ```tsx
35
+ import { useMemo } from "react";
36
+ import { Box, Text } from "ink";
37
+ import {
38
+ AssistantRuntimeProvider,
39
+ useLocalRuntime,
40
+ type ChatModelAdapter,
41
+ } from "@assistant-ui/react-ink";
42
+ import { Thread } from "./components/thread.js";
43
+
44
+ const createDemoAdapter = (): ChatModelAdapter => ({
45
+ async *run({ messages }) {
46
+ const lastUserMessage = messages.filter((m) => m.role === "user").at(-1);
47
+
48
+ const userText =
49
+ lastUserMessage?.content
50
+ .filter((p) => p.type === "text")
51
+ .map((p) => ("text" in p ? p.text : ""))
52
+ .join("") ?? "";
53
+
54
+ // Simulate streaming with a markdown-rich response
55
+ const response = `## Response to your question
56
+
57
+ You asked: **"${userText}"**
58
+
59
+ Here's a quick example in JavaScript:
60
+
61
+ \`\`\`js
62
+ const promise = new Promise((resolve, reject) => {
63
+ setTimeout(() => resolve("done!"), 1000);
64
+ });
65
+
66
+ promise.then(result => console.log(result));
67
+ \`\`\`
68
+
69
+ ### Key points
70
+
71
+ - A \`Promise\` represents an **async operation**
72
+ - It can be *pending*, *fulfilled*, or *rejected*
73
+ - Use \`.then()\` and \`.catch()\` to handle results
74
+
75
+ > Promises are the foundation of modern async JavaScript.
76
+
77
+ | Method | Purpose |
78
+ |--------|---------|
79
+ | \`.then()\` | Handle success |
80
+ | \`.catch()\` | Handle errors |
81
+ | \`.finally()\` | Run cleanup |
82
+
83
+ Learn more at [MDN Web Docs](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise).`;
84
+ const words = response.split(" ");
85
+
86
+ let accumulated = "";
87
+ for (const word of words) {
88
+ accumulated += (accumulated ? " " : "") + word;
89
+ yield { content: [{ type: "text" as const, text: accumulated }] };
90
+ await new Promise((r) => setTimeout(r, 50));
91
+ }
92
+ },
93
+ });
94
+
95
+ export const App = () => {
96
+ const adapter = useMemo(() => createDemoAdapter(), []);
97
+ const runtime = useLocalRuntime(adapter);
98
+
99
+ return (
100
+ <AssistantRuntimeProvider runtime={runtime}>
101
+ <Box flexDirection="column" padding={1}>
102
+ <Text bold color="cyan">
103
+ assistant-ui Terminal Chat
104
+ </Text>
105
+ <Text dimColor>
106
+ Type a message and press Enter to send. Ctrl+C to exit.
107
+ </Text>
108
+ <Box marginTop={1}>
109
+ <Thread />
110
+ </Box>
111
+ </Box>
112
+ </AssistantRuntimeProvider>
113
+ );
114
+ };
115
+
116
+ ```
117
+
118
+ ## src/components/thread.tsx
119
+
120
+ ```tsx
121
+ import { Box, Text } from "ink";
122
+ import {
123
+ ThreadPrimitive,
124
+ ComposerPrimitive,
125
+ useAuiState,
126
+ } from "@assistant-ui/react-ink";
127
+ import { MarkdownText } from "@assistant-ui/react-ink-markdown";
128
+
129
+ const UserMessage = () => {
130
+ const text = useAuiState((s) =>
131
+ s.message.parts
132
+ .filter((p) => p.type === "text")
133
+ .map((p) => ("text" in p ? p.text : ""))
134
+ .join(""),
135
+ );
136
+
137
+ return (
138
+ <Box marginBottom={1}>
139
+ <Text bold color="green">
140
+ You:{" "}
141
+ </Text>
142
+ <Text wrap="wrap">{text}</Text>
143
+ </Box>
144
+ );
145
+ };
146
+
147
+ const AssistantMessage = () => {
148
+ const text = useAuiState((s) =>
149
+ s.message.parts
150
+ .filter((p) => p.type === "text")
151
+ .map((p) => ("text" in p ? p.text : ""))
152
+ .join(""),
153
+ );
154
+
155
+ return (
156
+ <Box flexDirection="column" marginBottom={1}>
157
+ <Text bold color="blue">
158
+ AI:
159
+ </Text>
160
+ <MarkdownText text={text} />
161
+ </Box>
162
+ );
163
+ };
164
+
165
+ const StatusIndicator = () => {
166
+ const isRunning = useAuiState((s) => s.thread.isRunning);
167
+ if (!isRunning) return null;
168
+ return (
169
+ <Box marginBottom={1}>
170
+ <Text color="yellow">Thinking...</Text>
171
+ </Box>
172
+ );
173
+ };
174
+
175
+ export const Thread = () => {
176
+ return (
177
+ <ThreadPrimitive.Root>
178
+ <ThreadPrimitive.Empty>
179
+ <Box marginBottom={1}>
180
+ <Text dimColor>No messages yet. Start typing below!</Text>
181
+ </Box>
182
+ </ThreadPrimitive.Empty>
183
+
184
+ <ThreadPrimitive.Messages>
185
+ {({ message }) =>
186
+ message.role === "user" ? <UserMessage /> : <AssistantMessage />
187
+ }
188
+ </ThreadPrimitive.Messages>
189
+
190
+ <StatusIndicator />
191
+
192
+ <Box borderStyle="round" borderColor="gray" paddingX={1}>
193
+ <Text color="gray">{"> "}</Text>
194
+ <ComposerPrimitive.Input
195
+ submitOnEnter
196
+ placeholder="Type a message..."
197
+ autoFocus
198
+ />
199
+ </Box>
200
+ </ThreadPrimitive.Root>
201
+ );
202
+ };
203
+
204
+ ```
205
+
206
+ ## src/dev.ts
207
+
208
+ ```typescript
209
+ import { build } from "esbuild";
210
+ import { spawn } from "node:child_process";
211
+ import { fileURLToPath } from "node:url";
212
+ import { dirname, join } from "node:path";
213
+
214
+ const __dirname = dirname(fileURLToPath(import.meta.url));
215
+ const outfile = join(__dirname, "..", ".dev", "index.mjs");
216
+
217
+ await build({
218
+ entryPoints: [join(__dirname, "index.tsx")],
219
+ bundle: true,
220
+ platform: "node",
221
+ format: "esm",
222
+ outfile,
223
+ external: ["react", "react/*", "ink", "ink/*"],
224
+ jsx: "automatic",
225
+ jsxImportSource: "react",
226
+ logLevel: "warning",
227
+ ignoreAnnotations: true,
228
+ });
229
+
230
+ const child = spawn("node", [outfile], { stdio: "inherit" });
231
+ child.on("exit", (code) => process.exit(code ?? 0));
232
+
233
+ ```
234
+
235
+ ## src/index.tsx
236
+
237
+ ```tsx
238
+ import { render } from "ink";
239
+ import { App } from "./app.js";
240
+
241
+ render(<App />);
242
+
243
+ ```
244
+
245
+ ## tsconfig.json
246
+
247
+ ```json
248
+ {
249
+ "compilerOptions": {
250
+ "target": "ESNext",
251
+ "module": "ESNext",
252
+ "moduleResolution": "bundler",
253
+ "jsx": "react-jsx",
254
+ "strict": true,
255
+ "esModuleInterop": true,
256
+ "skipLibCheck": true,
257
+ "outDir": "dist",
258
+ "rootDir": "src"
259
+ },
260
+ "include": ["src"],
261
+ "exclude": ["src/dev.ts"]
262
+ }
263
+
264
+ ```
265
+
@@ -777,9 +777,9 @@ export default function Home() {
777
777
  "class-variance-authority": "^0.7.1",
778
778
  "clsx": "^2.1.1",
779
779
  "eventsource-parser": "^3.0.6",
780
- "isbot": "^5.1.35",
781
- "lucide-react": "^0.576.0",
782
- "openai": "^6.25.0",
780
+ "isbot": "^5.1.36",
781
+ "lucide-react": "^0.577.0",
782
+ "openai": "^6.29.0",
783
783
  "react": "^19.2.4",
784
784
  "react-dom": "^19.2.4",
785
785
  "react-router": "^7.13.1",
@@ -789,13 +789,13 @@ export default function Home() {
789
789
  "devDependencies": {
790
790
  "@react-router/dev": "^7.13.1",
791
791
  "@tailwindcss/vite": "^4.2.1",
792
- "@types/node": "^25.3.3",
792
+ "@types/node": "^25.5.0",
793
793
  "@types/react": "^19.2.14",
794
794
  "@types/react-dom": "^19.2.3",
795
795
  "tailwindcss": "^4.2.1",
796
796
  "tw-animate-css": "^1.4.0",
797
797
  "typescript": "^5.9.3",
798
- "vite": "^7.3.1",
798
+ "vite": "^8.0.0",
799
799
  "vite-tsconfig-paths": "^6.1.1"
800
800
  }
801
801
  }
@@ -79,7 +79,7 @@ import { ExampleApp } from "@/lib/example-app";
79
79
 
80
80
  export default function Home() {
81
81
  return (
82
- <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">
82
+ <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">
83
83
  <div className="mx-auto max-w-4xl">
84
84
  <div className="mb-8">
85
85
  <h1 className="mb-2 font-bold text-4xl text-gray-900 dark:text-white">
@@ -273,7 +273,7 @@ export const ExampleApp = () => {
273
273
  </p>
274
274
  </div>
275
275
  <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
276
- <FooList components={{ Foo }} />
276
+ <FooList>{() => <Foo />}</FooList>
277
277
  </div>
278
278
  <EventLog />
279
279
  </div>
@@ -336,15 +336,16 @@ declare module "@assistant-ui/store" {
336
336
 
337
337
  import "./foo-scope";
338
338
 
339
- import React from "react";
339
+ import { type ReactNode, useMemo } from "react";
340
340
  import { resource, tapMemo, tapState } from "@assistant-ui/tap";
341
341
  import {
342
342
  useAui,
343
+ useAuiState,
343
344
  AuiProvider,
344
345
  tapClientList,
345
346
  Derived,
346
- useAuiState,
347
347
  tapAssistantEmit,
348
+ RenderChildrenWithAccessor,
348
349
  type ClientOutput,
349
350
  } from "@assistant-ui/store";
350
351
 
@@ -410,17 +411,17 @@ export const FooListResource = resource(
410
411
  },
411
412
  );
412
413
 
413
- export const FooProvider = ({
414
+ const FooProvider = ({
414
415
  index,
415
416
  children,
416
417
  }: {
417
418
  index: number;
418
- children: React.ReactNode;
419
+ children: ReactNode;
419
420
  }) => {
420
421
  const aui = useAui({
421
422
  foo: Derived({
422
423
  source: "fooList",
423
- query: { index: index },
424
+ query: { index },
424
425
  get: (aui) => aui.fooList().foo({ index }),
425
426
  }),
426
427
  });
@@ -429,20 +430,30 @@ export const FooProvider = ({
429
430
  };
430
431
 
431
432
  export const FooList = ({
432
- components,
433
+ children,
433
434
  }: {
434
- components: { Foo: React.ComponentType };
435
+ children: (item: { foo: FooData }) => ReactNode;
435
436
  }) => {
436
- const fooListState = useAuiState((s) => s.fooList.foos.length);
437
+ const length = useAuiState((s) => s.fooList.foos.length);
437
438
 
438
- return (
439
- <>
440
- {Array.from({ length: fooListState }, (_, index) => (
439
+ return useMemo(
440
+ () =>
441
+ Array.from({ length }, (_, index) => (
441
442
  <FooProvider key={index} index={index}>
442
- <components.Foo />
443
+ <RenderChildrenWithAccessor
444
+ getItemState={(aui) => aui.fooList().foo({ index }).getState()}
445
+ >
446
+ {(getItem) =>
447
+ children({
448
+ get foo() {
449
+ return getItem();
450
+ },
451
+ })
452
+ }
453
+ </RenderChildrenWithAccessor>
443
454
  </FooProvider>
444
- ))}
445
- </>
455
+ )),
456
+ [length, children],
446
457
  );
447
458
  };
448
459
 
@@ -484,7 +495,7 @@ export default nextConfig;
484
495
  "devDependencies": {
485
496
  "@assistant-ui/x-buildutils": "workspace:*",
486
497
  "@tailwindcss/postcss": "^4.2.1",
487
- "@types/node": "^25.3.3",
498
+ "@types/node": "^25.5.0",
488
499
  "@types/react": "^19.2.14",
489
500
  "@types/react-dom": "^19.2.3",
490
501
  "postcss": "^8.5.8",
@@ -65,13 +65,13 @@
65
65
  "@assistant-ui/react": "workspace:*",
66
66
  "@assistant-ui/react-markdown": "workspace:*",
67
67
  "@tailwindcss/vite": "^4.2.1",
68
- "@tanstack/react-router": "^1.163.3",
69
- "@tanstack/react-start": "^1.166.1",
68
+ "@tanstack/react-router": "^1.166.8",
69
+ "@tanstack/react-start": "^1.166.9",
70
70
  "class-variance-authority": "^0.7.1",
71
71
  "clsx": "^2.1.1",
72
- "lucide-react": "^0.576.0",
72
+ "lucide-react": "^0.577.0",
73
73
  "nitro": "^3.0.1-alpha.2",
74
- "openai": "^6.25.0",
74
+ "openai": "^6.29.0",
75
75
  "react": "^19.2.4",
76
76
  "react-dom": "^19.2.4",
77
77
  "remark-gfm": "^4.0.1",
@@ -81,12 +81,12 @@
81
81
  },
82
82
  "devDependencies": {
83
83
  "@assistant-ui/x-buildutils": "workspace:*",
84
- "@types/node": "^25.3.3",
84
+ "@types/node": "^25.5.0",
85
85
  "@types/react": "^19.2.14",
86
86
  "@types/react-dom": "^19.2.3",
87
- "@vitejs/plugin-react": "^5.1.4",
87
+ "@vitejs/plugin-react": "^6.0.1",
88
88
  "typescript": "^5.9.3",
89
- "vite": "^7.3.1"
89
+ "vite": "^8.0.0"
90
90
  }
91
91
  }
92
92
 
@@ -433,7 +433,9 @@ function ThreadListSidebar() {
433
433
  </div>
434
434
 
435
435
  <div className="flex-1 overflow-y-auto p-2">
436
- <ThreadListPrimitive.Items components={{ ThreadListItem }} />
436
+ <ThreadListPrimitive.Items>
437
+ {() => <ThreadListItem />}
438
+ </ThreadListPrimitive.Items>
437
439
  </div>
438
440
 
439
441
  <div className="border-t p-2">
@@ -595,7 +597,7 @@ export default nextConfig;
595
597
  "@assistant-ui/ui": "workspace:*",
596
598
  "class-variance-authority": "^0.7.1",
597
599
  "clsx": "^2.1.1",
598
- "lucide-react": "^0.576.0",
600
+ "lucide-react": "^0.577.0",
599
601
  "next": "^16.1.6",
600
602
  "react": "^19.2.4",
601
603
  "react-dom": "^19.2.4",
@@ -604,7 +606,7 @@ export default nextConfig;
604
606
  "devDependencies": {
605
607
  "@assistant-ui/x-buildutils": "workspace:*",
606
608
  "@tailwindcss/postcss": "^4.2.1",
607
- "@types/node": "^25.3.3",
609
+ "@types/node": "^25.5.0",
608
610
  "@types/react": "^19.2.14",
609
611
  "@types/react-dom": "^19.2.3",
610
612
  "postcss": "^8.5.8",
@@ -27,7 +27,7 @@ We began a migration towards distributing our components as unstyled primitives
27
27
 
28
28
  ## Styled components moved to @assistant-ui/react-ui
29
29
 
30
- All styled components (Thread, ThreadList, AssistantModal, makeMarkdownText, etc.) have been moved to a new package, `@assistant-ui/react-ui`.
30
+ All styled components (Thread, ThreadList, AssistantModal, makeMarkdownText, etc.) have been moved to a new package, `@assistant-ui/ui`.
31
31
 
32
32
  To ease the migration, we added a migration codemod:
33
33