@assistant-ui/mcp-docs-server 0.1.31 → 0.1.32

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 (247) hide show
  1. package/.docs/organized/code-examples/waterfall.md +8 -8
  2. package/.docs/organized/code-examples/with-a2a.md +10 -10
  3. package/.docs/organized/code-examples/with-ag-ui.md +11 -11
  4. package/.docs/organized/code-examples/with-ai-sdk-v6.md +13 -13
  5. package/.docs/organized/code-examples/with-artifacts.md +13 -13
  6. package/.docs/organized/code-examples/with-assistant-transport.md +10 -10
  7. package/.docs/organized/code-examples/with-browser-extension.md +345 -0
  8. package/.docs/organized/code-examples/with-chain-of-thought.md +54 -17
  9. package/.docs/organized/code-examples/with-cloud-standalone.md +13 -13
  10. package/.docs/organized/code-examples/with-cloud.md +13 -13
  11. package/.docs/organized/code-examples/with-custom-thread-list.md +13 -13
  12. package/.docs/organized/code-examples/with-elevenlabs-conversational.md +17 -16
  13. package/.docs/organized/code-examples/with-elevenlabs-scribe.md +17 -16
  14. package/.docs/organized/code-examples/with-expo.md +24 -24
  15. package/.docs/organized/code-examples/with-external-store.md +10 -10
  16. package/.docs/organized/code-examples/with-ffmpeg.md +13 -13
  17. package/.docs/organized/code-examples/with-generative-ui.md +210 -13
  18. package/.docs/organized/code-examples/with-google-adk.md +10 -10
  19. package/.docs/organized/code-examples/with-heat-graph.md +8 -8
  20. package/.docs/organized/code-examples/with-image-generation.md +454 -0
  21. package/.docs/organized/code-examples/with-interactables.md +13 -13
  22. package/.docs/organized/code-examples/with-langchain.md +12 -12
  23. package/.docs/organized/code-examples/with-langgraph.md +15 -12
  24. package/.docs/organized/code-examples/with-livekit.md +18 -17
  25. package/.docs/organized/code-examples/with-mcp.md +748 -0
  26. package/.docs/organized/code-examples/with-opencode.md +11 -11
  27. package/.docs/organized/code-examples/with-parent-id-grouping.md +11 -11
  28. package/.docs/organized/code-examples/with-react-hook-form.md +14 -14
  29. package/.docs/organized/code-examples/with-react-ink.md +4 -4
  30. package/.docs/organized/code-examples/with-react-router.md +15 -15
  31. package/.docs/organized/code-examples/with-resumable-stream.md +660 -0
  32. package/.docs/organized/code-examples/with-store.md +8 -8
  33. package/.docs/organized/code-examples/with-tanstack.md +14 -14
  34. package/.docs/organized/code-examples/with-tap-runtime.md +11 -10
  35. package/.docs/raw/docs/(docs)/cli.mdx +1 -0
  36. package/.docs/raw/docs/(docs)/index.mdx +2 -2
  37. package/.docs/raw/docs/(docs)/installation.mdx +1 -1
  38. package/.docs/raw/docs/(reference)/api-reference/adapters/attachments.mdx +26 -24
  39. package/.docs/raw/docs/(reference)/api-reference/adapters/feedback.mdx +20 -0
  40. package/.docs/raw/docs/(reference)/api-reference/adapters/index.mdx +20 -12
  41. package/.docs/raw/docs/(reference)/api-reference/adapters/model.mdx +44 -0
  42. package/.docs/raw/docs/(reference)/api-reference/adapters/persistence.mdx +37 -16
  43. package/.docs/raw/docs/(reference)/api-reference/adapters/runtime.mdx +12 -23
  44. package/.docs/raw/docs/(reference)/api-reference/adapters/suggestions.mdx +20 -0
  45. package/.docs/raw/docs/(reference)/api-reference/context-providers/assistant-runtime-provider.mdx +37 -8
  46. package/.docs/raw/docs/(reference)/api-reference/context-providers/index.mdx +11 -9
  47. package/.docs/raw/docs/(reference)/api-reference/context-providers/scoped-providers.mdx +64 -0
  48. package/.docs/raw/docs/(reference)/api-reference/external-store/index.mdx +22 -0
  49. package/.docs/raw/docs/(reference)/api-reference/external-store/message-conversion.mdx +52 -0
  50. package/.docs/raw/docs/(reference)/api-reference/external-store/runtime.mdx +36 -0
  51. package/.docs/raw/docs/(reference)/api-reference/hooks/composer-triggers.mdx +98 -0
  52. package/.docs/raw/docs/(reference)/api-reference/hooks/index.mdx +18 -13
  53. package/.docs/raw/docs/(reference)/api-reference/hooks/model-context.mdx +18 -57
  54. package/.docs/raw/docs/(reference)/api-reference/hooks/primitives.mdx +640 -0
  55. package/.docs/raw/docs/(reference)/api-reference/hooks/runtimes.mdx +15 -28
  56. package/.docs/raw/docs/(reference)/api-reference/hooks/state.mdx +64 -18
  57. package/.docs/raw/docs/(reference)/api-reference/hooks/utilities.mdx +434 -0
  58. package/.docs/raw/docs/(reference)/api-reference/integrations/cloud-ai-sdk.mdx +24 -0
  59. package/.docs/raw/docs/(reference)/api-reference/integrations/index.mdx +11 -12
  60. package/.docs/raw/docs/(reference)/api-reference/integrations/react-ai-sdk.mdx +79 -0
  61. package/.docs/raw/docs/(reference)/api-reference/model-context/context.mdx +52 -0
  62. package/.docs/raw/docs/(reference)/api-reference/model-context/index.mdx +22 -0
  63. package/.docs/raw/docs/(reference)/api-reference/model-context/registry.mdx +20 -0
  64. package/.docs/raw/docs/(reference)/api-reference/overview.mdx +110 -131
  65. package/.docs/raw/docs/(reference)/api-reference/primitives/action-bar-more.mdx +78 -221
  66. package/.docs/raw/docs/(reference)/api-reference/primitives/action-bar.mdx +127 -242
  67. package/.docs/raw/docs/(reference)/api-reference/primitives/assistant-if.mdx +39 -20
  68. package/.docs/raw/docs/(reference)/api-reference/primitives/assistant-modal.mdx +66 -87
  69. package/.docs/raw/docs/(reference)/api-reference/primitives/attachment.mdx +50 -58
  70. package/.docs/raw/docs/(reference)/api-reference/primitives/branch-picker.mdx +80 -48
  71. package/.docs/raw/docs/(reference)/api-reference/primitives/chain-of-thought.mdx +67 -0
  72. package/.docs/raw/docs/(reference)/api-reference/primitives/composer.mdx +323 -461
  73. package/.docs/raw/docs/(reference)/api-reference/primitives/error.mdx +36 -43
  74. package/.docs/raw/docs/(reference)/api-reference/primitives/index.mdx +29 -24
  75. package/.docs/raw/docs/(reference)/api-reference/primitives/message-part.mdx +63 -245
  76. package/.docs/raw/docs/(reference)/api-reference/primitives/message.mdx +175 -591
  77. package/.docs/raw/docs/(reference)/api-reference/primitives/queue-item.mdx +65 -0
  78. package/.docs/raw/docs/(reference)/api-reference/primitives/selection-toolbar.mdx +35 -22
  79. package/.docs/raw/docs/(reference)/api-reference/primitives/suggestion.mdx +57 -140
  80. package/.docs/raw/docs/(reference)/api-reference/primitives/thread-list-item-more.mdx +70 -161
  81. package/.docs/raw/docs/(reference)/api-reference/primitives/thread-list-item.mdx +84 -108
  82. package/.docs/raw/docs/(reference)/api-reference/primitives/thread-list.mdx +77 -96
  83. package/.docs/raw/docs/(reference)/api-reference/primitives/thread.mdx +173 -349
  84. package/.docs/raw/docs/(reference)/api-reference/runtimes/assistant-runtime.mdx +9 -21
  85. package/.docs/raw/docs/(reference)/api-reference/runtimes/attachment-runtime.mdx +10 -21
  86. package/.docs/raw/docs/(reference)/api-reference/runtimes/composer-runtime.mdx +15 -70
  87. package/.docs/raw/docs/(reference)/api-reference/runtimes/index.mdx +18 -13
  88. package/.docs/raw/docs/(reference)/api-reference/runtimes/message-part-runtime.mdx +25 -28
  89. package/.docs/raw/docs/(reference)/api-reference/runtimes/message-runtime.mdx +11 -63
  90. package/.docs/raw/docs/(reference)/api-reference/runtimes/queue-state.mdx +20 -0
  91. package/.docs/raw/docs/(reference)/api-reference/runtimes/thread-list-item-runtime.mdx +11 -48
  92. package/.docs/raw/docs/(reference)/api-reference/runtimes/thread-list-runtime.mdx +10 -47
  93. package/.docs/raw/docs/(reference)/api-reference/runtimes/thread-runtime.mdx +18 -30
  94. package/.docs/raw/docs/(reference)/api-reference/tools/component-tools.mdx +68 -0
  95. package/.docs/raw/docs/(reference)/api-reference/tools/index.mdx +39 -0
  96. package/.docs/raw/docs/(reference)/api-reference/tools/rendering.mdx +79 -0
  97. package/.docs/raw/docs/(reference)/api-reference/tools/status.mdx +42 -0
  98. package/.docs/raw/docs/(reference)/api-reference/tools/toolkits.mdx +92 -0
  99. package/.docs/raw/docs/(reference)/api-reference/transport/assistant-transport.mdx +48 -0
  100. package/.docs/raw/docs/(reference)/api-reference/transport/frame.mdx +62 -0
  101. package/.docs/raw/docs/(reference)/api-reference/transport/index.mdx +22 -0
  102. package/.docs/raw/docs/(reference)/api-reference/utilities/index.mdx +19 -0
  103. package/.docs/raw/docs/(reference)/api-reference/utilities/miscellaneous.mdx +131 -0
  104. package/.docs/raw/docs/(reference)/api-reference/voice/index.mdx +22 -0
  105. package/.docs/raw/docs/(reference)/api-reference/voice/session.mdx +54 -0
  106. package/.docs/raw/docs/(reference)/api-reference/voice/speech-dictation.mdx +36 -0
  107. package/.docs/raw/docs/cloud/ai-sdk.mdx +1 -1
  108. package/.docs/raw/docs/cloud/index.mdx +2 -2
  109. package/.docs/raw/docs/guides/attachments.mdx +4 -4
  110. package/.docs/raw/docs/guides/branching.mdx +1 -1
  111. package/.docs/raw/docs/guides/chain-of-thought.mdx +5 -5
  112. package/.docs/raw/docs/guides/context-api.mdx +4 -4
  113. package/.docs/raw/docs/guides/dictation.mdx +2 -2
  114. package/.docs/raw/docs/guides/editing.mdx +1 -1
  115. package/.docs/raw/docs/guides/generative-ui.mdx +142 -0
  116. package/.docs/raw/docs/guides/image-generation.mdx +74 -0
  117. package/.docs/raw/docs/guides/index.mdx +2 -2
  118. package/.docs/raw/docs/guides/interactables.mdx +2 -2
  119. package/.docs/raw/docs/guides/latex.mdx +2 -2
  120. package/.docs/raw/docs/guides/mcp-apps.mdx +231 -0
  121. package/.docs/raw/docs/guides/mentions.mdx +2 -2
  122. package/.docs/raw/docs/guides/message-timing.mdx +38 -5
  123. package/.docs/raw/docs/guides/multi-agent.mdx +2 -2
  124. package/.docs/raw/docs/guides/quoting.mdx +1 -1
  125. package/.docs/raw/docs/guides/resumable-stream-deployment.mdx +212 -0
  126. package/.docs/raw/docs/guides/resumable-stream-stores.mdx +152 -0
  127. package/.docs/raw/docs/guides/resumable-streams.mdx +210 -0
  128. package/.docs/raw/docs/guides/slash-commands.mdx +1 -1
  129. package/.docs/raw/docs/guides/speech.mdx +2 -2
  130. package/.docs/raw/docs/guides/suggestions.mdx +88 -4
  131. package/.docs/raw/docs/guides/tool-ui.mdx +2 -2
  132. package/.docs/raw/docs/guides/tools.mdx +66 -5
  133. package/.docs/raw/docs/guides/voice.mdx +2 -2
  134. package/.docs/raw/docs/ink/adapters.mdx +37 -1
  135. package/.docs/raw/docs/ink/custom-backend.mdx +59 -8
  136. package/.docs/raw/docs/ink/index.mdx +10 -11
  137. package/.docs/raw/docs/ink/primitives.mdx +349 -8
  138. package/.docs/raw/docs/integrations/auth/better-auth.mdx +1 -1
  139. package/.docs/raw/docs/integrations/auth/clerk.mdx +1 -1
  140. package/.docs/raw/docs/integrations/auth/next-auth.mdx +1 -1
  141. package/.docs/raw/docs/integrations/frameworks/ai-sdk.mdx +2 -2
  142. package/.docs/raw/docs/integrations/frameworks/cloudflare-agents/overview.mdx +282 -0
  143. package/.docs/raw/docs/integrations/frameworks/mastra/overview.mdx +2 -2
  144. package/.docs/raw/docs/integrations/frameworks/mastra/separate-server.mdx +1 -1
  145. package/.docs/raw/docs/integrations/gateways/index.mdx +9 -4
  146. package/.docs/raw/docs/integrations/index.mdx +15 -3
  147. package/.docs/raw/docs/integrations/observability/langfuse.mdx +8 -1
  148. package/.docs/raw/docs/integrations/observability/langsmith.mdx +8 -4
  149. package/.docs/raw/docs/integrations/tools/react-mcp.mdx +337 -0
  150. package/.docs/raw/docs/primitives/composer.mdx +53 -0
  151. package/.docs/raw/docs/primitives/index.mdx +2 -2
  152. package/.docs/raw/docs/primitives/suggestion.mdx +9 -0
  153. package/.docs/raw/docs/react-native/hooks.mdx +2 -2
  154. package/.docs/raw/docs/react-native/index.mdx +4 -4
  155. package/.docs/raw/docs/runtimes/a2a/client-and-hooks.mdx +4 -4
  156. package/.docs/raw/docs/runtimes/a2a/overview.mdx +2 -2
  157. package/.docs/raw/docs/runtimes/ag-ui/overview.mdx +2 -2
  158. package/.docs/raw/docs/runtimes/ag-ui/runtime-options.mdx +32 -1
  159. package/.docs/raw/docs/runtimes/ai-sdk/overview.mdx +2 -2
  160. package/.docs/raw/docs/runtimes/ai-sdk/v4-legacy.mdx +7 -2
  161. package/.docs/raw/docs/runtimes/ai-sdk/v5-legacy.mdx +1 -1
  162. package/.docs/raw/docs/runtimes/ai-sdk/v6.mdx +7 -0
  163. package/.docs/raw/docs/runtimes/custom/data-stream.mdx +27 -2
  164. package/.docs/raw/docs/runtimes/custom/external-store.mdx +9 -1
  165. package/.docs/raw/docs/runtimes/custom/overview.mdx +2 -2
  166. package/.docs/raw/docs/runtimes/google-adk/overview.mdx +2 -2
  167. package/.docs/raw/docs/runtimes/langchain.mdx +2 -2
  168. package/.docs/raw/docs/runtimes/langgraph/overview.mdx +2 -2
  169. package/.docs/raw/docs/runtimes/opencode/overview.mdx +2 -2
  170. package/.docs/raw/docs/runtimes/opencode/quickstart.mdx +1 -1
  171. package/.docs/raw/docs/runtimes/pick-a-runtime.mdx +12 -5
  172. package/.docs/raw/docs/ui/composer-trigger-popover.mdx +11 -1
  173. package/.docs/raw/docs/ui/mcp-config.mdx +102 -0
  174. package/.docs/raw/docs/ui/model-selector.mdx +8 -8
  175. package/.docs/raw/docs/ui/sources.mdx +17 -0
  176. package/.docs/raw/docs/ui/streamdown.mdx +34 -2
  177. package/.docs/raw/docs/ui/thread-list.mdx +2 -2
  178. package/.docs/raw/docs/ui/thread.mdx +2 -2
  179. package/README.md +14 -72
  180. package/dist/constants.d.ts +12 -9
  181. package/dist/constants.d.ts.map +1 -1
  182. package/dist/constants.js +13 -9
  183. package/dist/constants.js.map +1 -1
  184. package/dist/index.d.ts +7 -3
  185. package/dist/index.d.ts.map +1 -1
  186. package/dist/index.js +25 -24
  187. package/dist/index.js.map +1 -1
  188. package/dist/prepare-docs/code-examples.d.ts +4 -1
  189. package/dist/prepare-docs/code-examples.d.ts.map +1 -1
  190. package/dist/prepare-docs/code-examples.js +109 -121
  191. package/dist/prepare-docs/code-examples.js.map +1 -1
  192. package/dist/prepare-docs/copy-raw.d.ts +4 -1
  193. package/dist/prepare-docs/copy-raw.d.ts.map +1 -1
  194. package/dist/prepare-docs/copy-raw.js +45 -42
  195. package/dist/prepare-docs/copy-raw.js.map +1 -1
  196. package/dist/prepare-docs/prepare.d.ts +1 -2
  197. package/dist/prepare-docs/prepare.js +17 -17
  198. package/dist/prepare-docs/prepare.js.map +1 -1
  199. package/dist/stdio.d.ts +1 -3
  200. package/dist/stdio.js +6 -3
  201. package/dist/stdio.js.map +1 -1
  202. package/dist/tools/docs.d.ts +20 -15
  203. package/dist/tools/docs.d.ts.map +1 -1
  204. package/dist/tools/docs.js +140 -161
  205. package/dist/tools/docs.js.map +1 -1
  206. package/dist/tools/examples.d.ts +20 -15
  207. package/dist/tools/examples.d.ts.map +1 -1
  208. package/dist/tools/examples.js +74 -86
  209. package/dist/tools/examples.js.map +1 -1
  210. package/dist/tools/tests/test-setup.d.ts +5 -2
  211. package/dist/tools/tests/test-setup.d.ts.map +1 -1
  212. package/dist/tools/tests/test-setup.js +21 -28
  213. package/dist/tools/tests/test-setup.js.map +1 -1
  214. package/dist/utils/logger.d.ts +8 -5
  215. package/dist/utils/logger.d.ts.map +1 -1
  216. package/dist/utils/logger.js +17 -17
  217. package/dist/utils/logger.js.map +1 -1
  218. package/dist/utils/mcp-format.d.ts +8 -5
  219. package/dist/utils/mcp-format.d.ts.map +1 -1
  220. package/dist/utils/mcp-format.js +9 -9
  221. package/dist/utils/mcp-format.js.map +1 -1
  222. package/dist/utils/mdx.d.ts +8 -6
  223. package/dist/utils/mdx.d.ts.map +1 -1
  224. package/dist/utils/mdx.js +22 -22
  225. package/dist/utils/mdx.js.map +1 -1
  226. package/dist/utils/paths.d.ts +9 -6
  227. package/dist/utils/paths.d.ts.map +1 -1
  228. package/dist/utils/paths.js +66 -76
  229. package/dist/utils/paths.js.map +1 -1
  230. package/dist/utils/security.d.ts +4 -1
  231. package/dist/utils/security.d.ts.map +1 -1
  232. package/dist/utils/security.js +19 -40
  233. package/dist/utils/security.js.map +1 -1
  234. package/package.json +5 -5
  235. package/.docs/raw/docs/(reference)/api-reference/adapters/feedback-speech.mdx +0 -41
  236. package/.docs/raw/docs/(reference)/api-reference/context-providers/text-message-part-provider.mdx +0 -40
  237. package/.docs/raw/docs/(reference)/api-reference/integrations/react-data-stream.mdx +0 -260
  238. package/.docs/raw/docs/(reference)/api-reference/integrations/react-hook-form.mdx +0 -103
  239. package/.docs/raw/docs/(reference)/api-reference/integrations/vercel-ai-sdk.mdx +0 -254
  240. package/dist/prepare-docs/prepare.d.ts.map +0 -1
  241. package/dist/stdio.d.ts.map +0 -1
  242. /package/.docs/raw/docs/{(reference)/migrations → migrations}/deprecation-policy.mdx +0 -0
  243. /package/.docs/raw/docs/{(reference) → migrations}/react-compatibility.mdx +0 -0
  244. /package/.docs/raw/docs/{(reference)/migrations → migrations}/react-langgraph-v0-7.mdx +0 -0
  245. /package/.docs/raw/docs/{(reference)/migrations → migrations}/v0-11.mdx +0 -0
  246. /package/.docs/raw/docs/{(reference)/migrations → migrations}/v0-12.mdx +0 -0
  247. /package/.docs/raw/docs/{(reference)/migrations → migrations}/v0-14.mdx +0 -0
@@ -0,0 +1,454 @@
1
+ # Example: with-image-generation
2
+
3
+ ## app/api/image/route.ts
4
+
5
+ ```typescript
6
+ import { openai } from "@ai-sdk/openai";
7
+ import { generateImage } from "ai";
8
+
9
+ export const maxDuration = 60;
10
+
11
+ // 1x1 transparent PNG, returned as a stand-in when no OPENAI_API_KEY is set so
12
+ // the example runs without credentials.
13
+ const MOCK_IMAGE =
14
+ "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYPhfDwAChwGA60e6kgAAAABJRU5ErkJggg==";
15
+
16
+ export async function POST(req: Request) {
17
+ const { prompt, size, seed } = (await req.json()) as {
18
+ prompt?: string;
19
+ size?: `${number}x${number}`;
20
+ seed?: number;
21
+ };
22
+ if (!prompt) {
23
+ return Response.json({ error: "Missing prompt" }, { status: 400 });
24
+ }
25
+
26
+ if (!process.env.OPENAI_API_KEY) {
27
+ await new Promise((r) => setTimeout(r, 400));
28
+ return Response.json({
29
+ image: MOCK_IMAGE,
30
+ mimeType: "image/png",
31
+ metadata: { revisedPrompt: `${prompt} (mock)` },
32
+ });
33
+ }
34
+
35
+ const result = await generateImage({
36
+ model: openai.image("gpt-image-1"),
37
+ prompt,
38
+ ...(size && { size }),
39
+ ...(seed !== undefined && { seed }),
40
+ });
41
+ const openaiMeta = (
42
+ result.providerMetadata as
43
+ | Record<string, Record<string, unknown>>
44
+ | undefined
45
+ )?.openai;
46
+ const revisedPrompt = openaiMeta?.revisedPrompt;
47
+ return Response.json({
48
+ image: `data:${result.image.mediaType};base64,${result.image.base64}`,
49
+ mimeType: result.image.mediaType,
50
+ metadata: {
51
+ ...(typeof revisedPrompt === "string" && { revisedPrompt }),
52
+ },
53
+ });
54
+ }
55
+
56
+ ```
57
+
58
+ ## app/globals.css
59
+
60
+ ```css
61
+ @import "tailwindcss";
62
+ @import "tw-animate-css";
63
+
64
+ @source "../../../packages/ui/src";
65
+
66
+ @custom-variant dark (&:is(.dark *));
67
+
68
+ @theme inline {
69
+ --radius-sm: calc(var(--radius) - 4px);
70
+ --radius-md: calc(var(--radius) - 2px);
71
+ --radius-lg: var(--radius);
72
+ --radius-xl: calc(var(--radius) + 4px);
73
+ --color-background: var(--background);
74
+ --color-foreground: var(--foreground);
75
+ --color-card: var(--card);
76
+ --color-card-foreground: var(--card-foreground);
77
+ --color-popover: var(--popover);
78
+ --color-popover-foreground: var(--popover-foreground);
79
+ --color-primary: var(--primary);
80
+ --color-primary-foreground: var(--primary-foreground);
81
+ --color-secondary: var(--secondary);
82
+ --color-secondary-foreground: var(--secondary-foreground);
83
+ --color-muted: var(--muted);
84
+ --color-muted-foreground: var(--muted-foreground);
85
+ --color-accent: var(--accent);
86
+ --color-accent-foreground: var(--accent-foreground);
87
+ --color-destructive: var(--destructive);
88
+ --color-border: var(--border);
89
+ --color-input: var(--input);
90
+ --color-ring: var(--ring);
91
+ --color-chart-1: var(--chart-1);
92
+ --color-chart-2: var(--chart-2);
93
+ --color-chart-3: var(--chart-3);
94
+ --color-chart-4: var(--chart-4);
95
+ --color-chart-5: var(--chart-5);
96
+ --color-sidebar: var(--sidebar);
97
+ --color-sidebar-foreground: var(--sidebar-foreground);
98
+ --color-sidebar-primary: var(--sidebar-primary);
99
+ --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
100
+ --color-sidebar-accent: var(--sidebar-accent);
101
+ --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
102
+ --color-sidebar-border: var(--sidebar-border);
103
+ --color-sidebar-ring: var(--sidebar-ring);
104
+ }
105
+
106
+ :root {
107
+ --radius: 0.625rem;
108
+ --background: oklch(1 0 0);
109
+ --foreground: oklch(0.141 0.005 285.823);
110
+ --card: oklch(1 0 0);
111
+ --card-foreground: oklch(0.141 0.005 285.823);
112
+ --popover: oklch(1 0 0);
113
+ --popover-foreground: oklch(0.141 0.005 285.823);
114
+ --primary: oklch(0.21 0.006 285.885);
115
+ --primary-foreground: oklch(0.985 0 0);
116
+ --secondary: oklch(0.967 0.001 286.375);
117
+ --secondary-foreground: oklch(0.21 0.006 285.885);
118
+ --muted: oklch(0.967 0.001 286.375);
119
+ --muted-foreground: oklch(0.552 0.016 285.938);
120
+ --accent: oklch(0.967 0.001 286.375);
121
+ --accent-foreground: oklch(0.21 0.006 285.885);
122
+ --destructive: oklch(0.577 0.245 27.325);
123
+ --border: oklch(0.92 0.004 286.32);
124
+ --input: oklch(0.92 0.004 286.32);
125
+ --ring: oklch(0.705 0.015 286.067);
126
+ --chart-1: oklch(0.646 0.222 41.116);
127
+ --chart-2: oklch(0.6 0.118 184.704);
128
+ --chart-3: oklch(0.398 0.07 227.392);
129
+ --chart-4: oklch(0.828 0.189 84.429);
130
+ --chart-5: oklch(0.769 0.188 70.08);
131
+ --sidebar: oklch(0.985 0 0);
132
+ --sidebar-foreground: oklch(0.141 0.005 285.823);
133
+ --sidebar-primary: oklch(0.21 0.006 285.885);
134
+ --sidebar-primary-foreground: oklch(0.985 0 0);
135
+ --sidebar-accent: oklch(0.967 0.001 286.375);
136
+ --sidebar-accent-foreground: oklch(0.21 0.006 285.885);
137
+ --sidebar-border: oklch(0.92 0.004 286.32);
138
+ --sidebar-ring: oklch(0.705 0.015 286.067);
139
+ }
140
+
141
+ .dark {
142
+ --background: oklch(0.141 0.005 285.823);
143
+ --foreground: oklch(0.985 0 0);
144
+ --card: oklch(0.21 0.006 285.885);
145
+ --card-foreground: oklch(0.985 0 0);
146
+ --popover: oklch(0.21 0.006 285.885);
147
+ --popover-foreground: oklch(0.985 0 0);
148
+ --primary: oklch(0.92 0.004 286.32);
149
+ --primary-foreground: oklch(0.21 0.006 285.885);
150
+ --secondary: oklch(0.274 0.006 286.033);
151
+ --secondary-foreground: oklch(0.985 0 0);
152
+ --muted: oklch(0.274 0.006 286.033);
153
+ --muted-foreground: oklch(0.705 0.015 286.067);
154
+ --accent: oklch(0.274 0.006 286.033);
155
+ --accent-foreground: oklch(0.985 0 0);
156
+ --destructive: oklch(0.704 0.191 22.216);
157
+ --border: oklch(1 0 0 / 10%);
158
+ --input: oklch(1 0 0 / 15%);
159
+ --ring: oklch(0.552 0.016 285.938);
160
+ --chart-1: oklch(0.488 0.243 264.376);
161
+ --chart-2: oklch(0.696 0.17 162.48);
162
+ --chart-3: oklch(0.769 0.188 70.08);
163
+ --chart-4: oklch(0.627 0.265 303.9);
164
+ --chart-5: oklch(0.645 0.246 16.439);
165
+ --sidebar: oklch(0.21 0.006 285.885);
166
+ --sidebar-foreground: oklch(0.985 0 0);
167
+ --sidebar-primary: oklch(0.488 0.243 264.376);
168
+ --sidebar-primary-foreground: oklch(0.985 0 0);
169
+ --sidebar-accent: oklch(0.274 0.006 286.033);
170
+ --sidebar-accent-foreground: oklch(0.985 0 0);
171
+ --sidebar-border: oklch(1 0 0 / 10%);
172
+ --sidebar-ring: oklch(0.552 0.016 285.938);
173
+ }
174
+
175
+ @layer base {
176
+ * {
177
+ @apply border-border outline-ring/50;
178
+ }
179
+ body {
180
+ @apply bg-background text-foreground;
181
+ }
182
+ }
183
+
184
+ ```
185
+
186
+ ## app/layout.tsx
187
+
188
+ ```tsx
189
+ import type { Metadata } from "next";
190
+ import "./globals.css";
191
+
192
+ export const metadata: Metadata = {
193
+ title: "Image Generation Example",
194
+ description: "Example using @assistant-ui/react image generation primitives",
195
+ };
196
+
197
+ export default function RootLayout({
198
+ children,
199
+ }: Readonly<{ children: React.ReactNode }>) {
200
+ return (
201
+ <html lang="en">
202
+ <body className="h-dvh bg-background text-foreground">{children}</body>
203
+ </html>
204
+ );
205
+ }
206
+
207
+ ```
208
+
209
+ ## app/page.tsx
210
+
211
+ ```tsx
212
+ "use client";
213
+
214
+ import { useCallback, useState } from "react";
215
+ import type { ImageMessagePart, MessagePartStatus } from "@assistant-ui/react";
216
+ import { Image } from "@/components/assistant-ui/image";
217
+
218
+ type ImageView = ImageMessagePart & { status: MessagePartStatus };
219
+
220
+ export default function Home() {
221
+ const [prompt, setPrompt] = useState("A golden retriever wearing a top hat");
222
+ const [activePrompt, setActivePrompt] = useState("");
223
+ const [view, setView] = useState<ImageView | null>(null);
224
+ const [revisedPrompt, setRevisedPrompt] = useState<string | null>(null);
225
+ const [isGenerating, setIsGenerating] = useState(false);
226
+ const [error, setError] = useState<string | null>(null);
227
+
228
+ const generate = useCallback(async (p: string) => {
229
+ setIsGenerating(true);
230
+ setActivePrompt(p);
231
+ setError(null);
232
+ setRevisedPrompt(null);
233
+ setView({ type: "image", image: "", status: { type: "running" } });
234
+ try {
235
+ const res = await fetch("/api/image", {
236
+ method: "POST",
237
+ headers: { "content-type": "application/json" },
238
+ body: JSON.stringify({ prompt: p }),
239
+ });
240
+ if (!res.ok) throw new Error(await res.text());
241
+ const result = (await res.json()) as {
242
+ image: string;
243
+ metadata?: { revisedPrompt?: string };
244
+ };
245
+ setView({
246
+ type: "image",
247
+ image: result.image,
248
+ status: { type: "complete" },
249
+ });
250
+ if (typeof result.metadata?.revisedPrompt === "string") {
251
+ setRevisedPrompt(result.metadata.revisedPrompt);
252
+ }
253
+ } catch (e) {
254
+ setError(e instanceof Error ? e.message : String(e));
255
+ setView({
256
+ type: "image",
257
+ image: "",
258
+ status: { type: "incomplete", reason: "error" },
259
+ });
260
+ } finally {
261
+ setIsGenerating(false);
262
+ }
263
+ }, []);
264
+
265
+ return (
266
+ <main className="mx-auto flex h-full max-w-xl flex-col gap-4 p-6">
267
+ <header>
268
+ <h1 className="font-semibold text-xl">Image Generation</h1>
269
+ <p className="text-muted-foreground text-sm">
270
+ Calls a server route that runs <code>ai.generateImage</code> and
271
+ renders the result with the <code>@assistant-ui/ui</code> Image
272
+ component.
273
+ </p>
274
+ </header>
275
+
276
+ <form
277
+ onSubmit={(e) => {
278
+ e.preventDefault();
279
+ void generate(prompt);
280
+ }}
281
+ className="flex gap-2"
282
+ >
283
+ <input
284
+ value={prompt}
285
+ onChange={(e) => setPrompt(e.target.value)}
286
+ placeholder="Describe an image…"
287
+ className="flex-1 rounded border px-3 py-2"
288
+ />
289
+ <button
290
+ type="submit"
291
+ disabled={isGenerating || !prompt.trim()}
292
+ className="rounded bg-primary px-3 py-2 text-primary-foreground disabled:opacity-50"
293
+ >
294
+ {isGenerating ? "Generating…" : "Generate"}
295
+ </button>
296
+ </form>
297
+
298
+ {error && (
299
+ <p className="text-destructive text-sm" role="alert">
300
+ {error}
301
+ </p>
302
+ )}
303
+
304
+ {view && (
305
+ <div className="space-y-2">
306
+ <Image {...view} />
307
+ {revisedPrompt && (
308
+ <p className="text-muted-foreground text-xs">
309
+ <strong>Revised prompt:</strong> {revisedPrompt}
310
+ </p>
311
+ )}
312
+ {view.status.type === "complete" && view.image && (
313
+ <Image.Actions
314
+ part={view}
315
+ onRegenerate={() => generate(activePrompt)}
316
+ />
317
+ )}
318
+ </div>
319
+ )}
320
+ </main>
321
+ );
322
+ }
323
+
324
+ ```
325
+
326
+ ## components.json
327
+
328
+ ```json
329
+ {
330
+ "$schema": "https://ui.shadcn.com/schema.json",
331
+ "style": "new-york",
332
+ "rsc": true,
333
+ "tsx": true,
334
+ "tailwind": {
335
+ "config": "",
336
+ "css": "app/globals.css",
337
+ "baseColor": "zinc",
338
+ "cssVariables": true,
339
+ "prefix": ""
340
+ },
341
+ "aliases": {
342
+ "components": "@/components",
343
+ "utils": "@/lib/utils",
344
+ "ui": "@/components/ui",
345
+ "lib": "@/lib",
346
+ "hooks": "@/hooks"
347
+ },
348
+ "iconLibrary": "lucide",
349
+ "registries": {
350
+ "@assistant-ui": "https://r.assistant-ui.com/{name}.json"
351
+ }
352
+ }
353
+
354
+ ```
355
+
356
+ ## next.config.js
357
+
358
+ ```javascript
359
+ /** @type {import('next').NextConfig} */
360
+ const nextConfig = {
361
+ transpilePackages: ["@assistant-ui/react", "@assistant-ui/react-ai-sdk"],
362
+ };
363
+
364
+ export default nextConfig;
365
+
366
+ ```
367
+
368
+ ## package.json
369
+
370
+ ```json
371
+ {
372
+ "name": "with-image-generation",
373
+ "version": "0.0.0",
374
+ "private": true,
375
+ "type": "module",
376
+ "scripts": {
377
+ "dev": "next dev",
378
+ "build": "next build",
379
+ "start": "next start"
380
+ },
381
+ "dependencies": {
382
+ "@ai-sdk/openai": "^3.0.41",
383
+ "@assistant-ui/react": "workspace:*",
384
+ "@assistant-ui/ui": "workspace:*",
385
+ "ai": "^6.0.116",
386
+ "class-variance-authority": "^0.7.1",
387
+ "clsx": "^2.1.1",
388
+ "lucide-react": "^0.577.0",
389
+ "next": "^16.1.6",
390
+ "react": "^19.2.4",
391
+ "react-dom": "^19.2.4",
392
+ "tailwind-merge": "^3.5.0"
393
+ },
394
+ "devDependencies": {
395
+ "@assistant-ui/x-buildutils": "workspace:*",
396
+ "@tailwindcss/postcss": "^4.2.1",
397
+ "@types/node": "^25.5.0",
398
+ "@types/react": "^19.2.14",
399
+ "@types/react-dom": "^19.2.3",
400
+ "postcss": "^8.5.8",
401
+ "tailwindcss": "^4.2.1",
402
+ "tw-animate-css": "^1.4.0",
403
+ "typescript": "^5.9.3"
404
+ }
405
+ }
406
+
407
+ ```
408
+
409
+ ## README.md
410
+
411
+ ```markdown
412
+ # with-image-generation
413
+
414
+ Minimal Next.js example that generates an image through a server route and renders it with the `@assistant-ui/ui` `Image` component (loading, content-filter, zoom, and download / copy / regenerate actions). It runs without credentials by falling back to a mock image when `OPENAI_API_KEY` is unset.
415
+
416
+ ## Run locally
417
+
418
+ ```bash
419
+ export OPENAI_API_KEY=sk-...
420
+ pnpm --filter with-image-generation dev
421
+ ```
422
+
423
+ Then open `http://localhost:3000`.
424
+
425
+ ## How it works
426
+
427
+ - `app/api/image/route.ts` exposes a server endpoint that calls AI SDK's `generateImage` with `openai.image("gpt-image-1")` and returns an `ImageMessagePart`-shaped payload. Without `OPENAI_API_KEY` it returns a mock image so the example still runs.
428
+ - `app/page.tsx` POSTs the prompt to that endpoint, stores the result as an `ImageMessagePart`, and renders it with the `@assistant-ui/ui` `Image` component.
429
+ - `Image.Actions` provides download and copy buttons plus a regenerate button wired through its `onRegenerate` callback.
430
+
431
+ ```
432
+
433
+ ## tsconfig.json
434
+
435
+ ```json
436
+ {
437
+ "extends": "@assistant-ui/x-buildutils/ts/next",
438
+ "compilerOptions": {
439
+ "paths": {
440
+ "@/*": ["./*"],
441
+ "@/components/assistant-ui/*": [
442
+ "../../packages/ui/src/components/assistant-ui/*"
443
+ ],
444
+ "@/components/ui/*": ["../../packages/ui/src/components/ui/*"],
445
+ "@/lib/utils": ["../../packages/ui/src/lib/utils"],
446
+ "@assistant-ui/ui/*": ["../../packages/ui/src/*"]
447
+ }
448
+ },
449
+ "include": ["**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
450
+ "exclude": ["node_modules"]
451
+ }
452
+
453
+ ```
454
+
@@ -43,7 +43,7 @@ export async function POST(req: Request) {
43
43
  : undefined;
44
44
 
45
45
  const result = streamText({
46
- model: openai("gpt-4o"),
46
+ model: openai("gpt-5.4-nano"),
47
47
  messages: await convertToModelMessages(messages),
48
48
  stopWhen: stepCountIs(10),
49
49
  ...(system ? { system } : {}),
@@ -720,28 +720,28 @@ export default nextConfig;
720
720
  "start": "next start"
721
721
  },
722
722
  "dependencies": {
723
- "@ai-sdk/openai": "^3.0.61",
723
+ "@ai-sdk/openai": "^3.0.64",
724
724
  "@assistant-ui/react": "workspace:*",
725
725
  "@assistant-ui/react-ai-sdk": "workspace:*",
726
726
  "@assistant-ui/ui": "workspace:*",
727
- "ai": "^6.0.175",
727
+ "ai": "^6.0.188",
728
728
  "class-variance-authority": "^0.7.1",
729
729
  "clsx": "^2.1.1",
730
- "lucide-react": "^1.14.0",
731
- "next": "^16.2.4",
732
- "react": "^19.2.5",
733
- "react-dom": "^19.2.5",
734
- "tailwind-merge": "^3.5.0",
730
+ "lucide-react": "^1.16.0",
731
+ "next": "^16.2.6",
732
+ "react": "^19.2.6",
733
+ "react-dom": "^19.2.6",
734
+ "tailwind-merge": "^3.6.0",
735
735
  "zod": "^4.4.3"
736
736
  },
737
737
  "devDependencies": {
738
738
  "@assistant-ui/x-buildutils": "workspace:*",
739
- "@tailwindcss/postcss": "^4.2.4",
740
- "@types/node": "^25.6.0",
741
- "@types/react": "^19.2.14",
739
+ "@tailwindcss/postcss": "^4.3.0",
740
+ "@types/node": "^25.9.1",
741
+ "@types/react": "^19.2.15",
742
742
  "@types/react-dom": "^19.2.3",
743
- "postcss": "^8.5.14",
744
- "tailwindcss": "^4.2.4",
743
+ "postcss": "^8.5.15",
744
+ "tailwindcss": "^4.3.0",
745
745
  "tw-animate-css": "^1.4.0",
746
746
  "typescript": "^6.0.3"
747
747
  }
@@ -335,24 +335,24 @@ export default nextConfig;
335
335
  "@assistant-ui/react-langchain": "workspace:*",
336
336
  "@assistant-ui/react-markdown": "workspace:*",
337
337
  "@assistant-ui/ui": "workspace:*",
338
- "@langchain/langgraph-sdk": "^1.9.1",
339
- "@langchain/react": "^0.3.3",
338
+ "@langchain/langgraph-sdk": "^1.9.4",
339
+ "@langchain/react": "^1.0.4",
340
340
  "class-variance-authority": "^0.7.1",
341
341
  "clsx": "^2.1.1",
342
- "lucide-react": "^1.14.0",
343
- "next": "^16.2.4",
344
- "react": "^19.2.5",
345
- "react-dom": "^19.2.5",
346
- "tailwind-merge": "^3.5.0"
342
+ "lucide-react": "^1.16.0",
343
+ "next": "^16.2.6",
344
+ "react": "^19.2.6",
345
+ "react-dom": "^19.2.6",
346
+ "tailwind-merge": "^3.6.0"
347
347
  },
348
348
  "devDependencies": {
349
349
  "@assistant-ui/x-buildutils": "workspace:*",
350
- "@tailwindcss/postcss": "^4.2.4",
351
- "@types/node": "^25.6.0",
352
- "@types/react": "^19.2.14",
350
+ "@tailwindcss/postcss": "^4.3.0",
351
+ "@types/node": "^25.9.1",
352
+ "@types/react": "^19.2.15",
353
353
  "@types/react-dom": "^19.2.3",
354
- "postcss": "^8.5.14",
355
- "tailwindcss": "^4.2.4",
354
+ "postcss": "^8.5.15",
355
+ "tailwindcss": "^4.3.0",
356
356
  "tw-animate-css": "^1.4.0",
357
357
  "typescript": "^6.0.3"
358
358
  }
@@ -871,23 +871,23 @@ export default nextConfig;
871
871
  "@assistant-ui/react-langgraph": "workspace:*",
872
872
  "@assistant-ui/react-markdown": "workspace:*",
873
873
  "@assistant-ui/ui": "workspace:*",
874
- "@langchain/langgraph-sdk": "^1.9.1",
874
+ "@langchain/langgraph-sdk": "^1.9.4",
875
875
  "class-variance-authority": "^0.7.1",
876
876
  "clsx": "^2.1.1",
877
- "lucide-react": "^1.14.0",
878
- "next": "^16.2.4",
879
- "react": "^19.2.5",
880
- "react-dom": "^19.2.5",
881
- "tailwind-merge": "^3.5.0"
877
+ "lucide-react": "^1.16.0",
878
+ "next": "^16.2.6",
879
+ "react": "^19.2.6",
880
+ "react-dom": "^19.2.6",
881
+ "tailwind-merge": "^3.6.0"
882
882
  },
883
883
  "devDependencies": {
884
884
  "@assistant-ui/x-buildutils": "workspace:*",
885
- "@tailwindcss/postcss": "^4.2.4",
886
- "@types/node": "^25.6.0",
887
- "@types/react": "^19.2.14",
885
+ "@tailwindcss/postcss": "^4.3.0",
886
+ "@types/node": "^25.9.1",
887
+ "@types/react": "^19.2.15",
888
888
  "@types/react-dom": "^19.2.3",
889
- "postcss": "^8.5.14",
890
- "tailwindcss": "^4.2.4",
889
+ "postcss": "^8.5.15",
890
+ "tailwindcss": "^4.3.0",
891
891
  "tw-animate-css": "^1.4.0",
892
892
  "typescript": "^6.0.3"
893
893
  }
@@ -918,10 +918,13 @@ cd my-app
918
918
  Create `.env.local`:
919
919
 
920
920
  ```
921
- NEXT_PUBLIC_API_URL=https://stockbrokeragent-bracesprouls-projects.vercel.app/api
921
+ LANGGRAPH_API_URL=http://localhost:2024
922
+ LANGCHAIN_API_KEY=
922
923
  NEXT_PUBLIC_LANGGRAPH_ASSISTANT_ID=stockbroker
923
924
  ```
924
925
 
926
+ `LANGGRAPH_API_URL` is the LangGraph deployment URL the bundled `/api/[..._path]` proxy fetches from. `LANGCHAIN_API_KEY` is forwarded as `x-api-key` and can be blank for an unauthenticated dev server. `NEXT_PUBLIC_LANGGRAPH_ASSISTANT_ID` is the graph id (a key under `graphs` in your `langgraph.json`).
927
+
925
928
  ### Run
926
929
 
927
930
  ```bash
@@ -17,7 +17,7 @@ export async function POST(req: Request) {
17
17
  const { messages }: { messages: UIMessage[] } = await req.json();
18
18
 
19
19
  const result = streamText({
20
- model: openai("gpt-4o"),
20
+ model: openai("gpt-5.4-nano"),
21
21
  messages: await convertToModelMessages(messages),
22
22
  stopWhen: stepCountIs(10),
23
23
  });
@@ -553,32 +553,32 @@ export default nextConfig;
553
553
  "version": "0.0.0",
554
554
  "type": "module",
555
555
  "dependencies": {
556
- "@ai-sdk/openai": "^3.0.61",
557
- "@ai-sdk/react": "^3.0.177",
556
+ "@ai-sdk/openai": "^3.0.64",
557
+ "@ai-sdk/react": "^3.0.190",
558
558
  "@assistant-ui/react": "workspace:^",
559
559
  "@assistant-ui/react-ai-sdk": "workspace:*",
560
560
  "@assistant-ui/react-markdown": "workspace:^",
561
561
  "@assistant-ui/ui": "workspace:*",
562
- "@tailwindcss/postcss": "^4.2.4",
563
- "ai": "^6.0.175",
562
+ "@tailwindcss/postcss": "^4.3.0",
563
+ "ai": "^6.0.188",
564
564
  "class-variance-authority": "^0.7.1",
565
565
  "clsx": "^2.1.1",
566
- "livekit-client": "^2.18.9",
567
- "livekit-server-sdk": "^2.15.2",
568
- "lucide-react": "^1.14.0",
569
- "motion": "^12.38.0",
570
- "next": "^16.2.4",
571
- "postcss": "^8.5.14",
572
- "react": "^19.2.5",
573
- "react-dom": "^19.2.5",
574
- "tailwind-merge": "^3.5.0",
575
- "tailwindcss": "^4.2.4",
566
+ "livekit-client": "^2.19.0",
567
+ "livekit-server-sdk": "^2.15.3",
568
+ "lucide-react": "^1.16.0",
569
+ "motion": "^12.39.0",
570
+ "next": "^16.2.6",
571
+ "postcss": "^8.5.15",
572
+ "react": "^19.2.6",
573
+ "react-dom": "^19.2.6",
574
+ "tailwind-merge": "^3.6.0",
575
+ "tailwindcss": "^4.3.0",
576
576
  "zod": "^4.4.3"
577
577
  },
578
578
  "devDependencies": {
579
579
  "@assistant-ui/x-buildutils": "workspace:*",
580
- "@types/node": "^25.6.0",
581
- "@types/react": "^19.2.14",
580
+ "@types/node": "^25.9.1",
581
+ "@types/react": "^19.2.15",
582
582
  "@types/react-dom": "^19.2.3",
583
583
  "tw-animate-css": "^1.4.0",
584
584
  "typescript": "^6.0.3"
@@ -618,6 +618,7 @@ export default nextConfig;
618
618
  "@/lib/utils": ["../../packages/ui/src/lib/utils"],
619
619
  "@assistant-ui/ui/*": ["../../packages/ui/src/*"],
620
620
  "@assistant-ui/*": ["../../packages/*/src"],
621
+ "@assistant-ui/core/*": ["../../packages/core/src/*"],
621
622
  "@assistant-ui/react/*": ["../../packages/react/src/*"],
622
623
  "@assistant-ui/tap/*": ["../../packages/tap/src/*"],
623
624
  "assistant-stream": ["../../packages/assistant-stream/src"],