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

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 (134) hide show
  1. package/.docs/organized/code-examples/waterfall.md +20 -22
  2. package/.docs/organized/code-examples/with-a2a.md +24 -24
  3. package/.docs/organized/code-examples/with-ag-ui.md +30 -25
  4. package/.docs/organized/code-examples/with-ai-sdk-v6.md +11 -9
  5. package/.docs/organized/code-examples/with-artifacts.md +49 -37
  6. package/.docs/organized/code-examples/with-assistant-transport.md +63 -51
  7. package/.docs/organized/code-examples/with-browser-extension.md +22 -10
  8. package/.docs/organized/code-examples/with-chain-of-thought.md +406 -87
  9. package/.docs/organized/code-examples/with-cloud-standalone.md +25 -24
  10. package/.docs/organized/code-examples/with-cloud.md +11 -9
  11. package/.docs/organized/code-examples/with-custom-thread-list.md +14 -12
  12. package/.docs/organized/code-examples/with-elevenlabs-conversational.md +23 -21
  13. package/.docs/organized/code-examples/with-elevenlabs-scribe.md +14 -13
  14. package/.docs/organized/code-examples/with-expo.md +44 -29
  15. package/.docs/organized/code-examples/with-external-store.md +9 -7
  16. package/.docs/organized/code-examples/with-ffmpeg.md +322 -285
  17. package/.docs/organized/code-examples/with-generative-ui.md +1066 -256
  18. package/.docs/organized/code-examples/with-google-adk.md +10 -8
  19. package/.docs/organized/code-examples/with-heat-graph.md +13 -11
  20. package/.docs/organized/code-examples/with-image-generation.md +19 -17
  21. package/.docs/organized/code-examples/with-interactables.md +317 -239
  22. package/.docs/organized/code-examples/with-langchain.md +14 -12
  23. package/.docs/organized/code-examples/with-langgraph.md +91 -83
  24. package/.docs/organized/code-examples/with-livekit.md +24 -22
  25. package/.docs/organized/code-examples/with-mcp.md +18 -12
  26. package/.docs/organized/code-examples/with-opencode.md +66 -66
  27. package/.docs/organized/code-examples/with-react-hook-form.md +19 -17
  28. package/.docs/organized/code-examples/with-react-ink.md +297 -102
  29. package/.docs/organized/code-examples/with-react-router.md +17 -15
  30. package/.docs/organized/code-examples/with-resumable-stream.md +15 -14
  31. package/.docs/organized/code-examples/with-store.md +78 -76
  32. package/.docs/organized/code-examples/with-tanstack.md +13 -14
  33. package/.docs/organized/code-examples/with-tap-runtime.md +26 -24
  34. package/.docs/raw/docs/(docs)/architecture.mdx +94 -42
  35. package/.docs/raw/docs/(docs)/cli.mdx +1 -2
  36. package/.docs/raw/docs/(docs)/installation.mdx +1 -1
  37. package/.docs/raw/docs/(reference)/api-reference/adapters/persistence.mdx +5 -1
  38. package/.docs/raw/docs/(reference)/api-reference/external-store/message-conversion.mdx +15 -15
  39. package/.docs/raw/docs/(reference)/api-reference/external-store/runtime.mdx +14 -1
  40. package/.docs/raw/docs/(reference)/api-reference/generative-ui/index.mdx +18 -0
  41. package/.docs/raw/docs/(reference)/api-reference/generative-ui/rendering.mdx +33 -0
  42. package/.docs/raw/docs/(reference)/api-reference/generative-ui/spec.mdx +45 -0
  43. package/.docs/raw/docs/(reference)/api-reference/hooks/composer-triggers.mdx +41 -41
  44. package/.docs/raw/docs/(reference)/api-reference/hooks/model-context.mdx +19 -1
  45. package/.docs/raw/docs/(reference)/api-reference/hooks/primitives.mdx +122 -122
  46. package/.docs/raw/docs/(reference)/api-reference/integrations/react-ai-sdk.mdx +43 -2
  47. package/.docs/raw/docs/(reference)/api-reference/model-context/context.mdx +6 -0
  48. package/.docs/raw/docs/(reference)/api-reference/overview.mdx +4 -6
  49. package/.docs/raw/docs/(reference)/api-reference/primitives/message.mdx +30 -0
  50. package/.docs/raw/docs/(reference)/api-reference/tools/component-tools.mdx +20 -3
  51. package/.docs/raw/docs/(reference)/api-reference/tools/index.mdx +8 -8
  52. package/.docs/raw/docs/(reference)/api-reference/tools/rendering.mdx +52 -4
  53. package/.docs/raw/docs/(reference)/api-reference/tools/toolkits.mdx +100 -10
  54. package/.docs/raw/docs/(reference)/api-reference/utilities/miscellaneous.mdx +7 -59
  55. package/.docs/raw/docs/cloud/ai-sdk.mdx +0 -2
  56. package/.docs/raw/docs/{(docs)/copilots → copilots}/model-context.mdx +34 -26
  57. package/.docs/raw/docs/{(docs)/copilots → copilots}/motivation.mdx +32 -26
  58. package/.docs/raw/docs/guides/chain-of-thought.mdx +7 -9
  59. package/.docs/raw/docs/guides/context-api.mdx +2 -1
  60. package/.docs/raw/docs/guides/index.mdx +3 -12
  61. package/.docs/raw/docs/guides/mentions.mdx +4 -4
  62. package/.docs/raw/docs/guides/slash-commands.mdx +1 -1
  63. package/.docs/raw/docs/guides/suggestions.mdx +1 -1
  64. package/.docs/raw/docs/ink/adapters.mdx +23 -1
  65. package/.docs/raw/docs/ink/hooks.mdx +101 -85
  66. package/.docs/raw/docs/ink/migration.mdx +1 -1
  67. package/.docs/raw/docs/ink/primitives.mdx +2 -2
  68. package/.docs/raw/docs/integrations/frameworks/ai-sdk.mdx +1 -1
  69. package/.docs/raw/docs/integrations/index.mdx +2 -2
  70. package/.docs/raw/docs/integrations/persistence/custom-adapter.mdx +17 -2
  71. package/.docs/raw/docs/migrations/toolkit-tools.mdx +232 -0
  72. package/.docs/raw/docs/primitives/chain-of-thought.mdx +10 -16
  73. package/.docs/raw/docs/primitives/message.mdx +9 -10
  74. package/.docs/raw/docs/react-native/hooks.mdx +62 -79
  75. package/.docs/raw/docs/react-native/migration.mdx +1 -1
  76. package/.docs/raw/docs/react-native/primitives.mdx +2 -2
  77. package/.docs/raw/docs/runtimes/a2a/client-and-hooks.mdx +3 -0
  78. package/.docs/raw/docs/runtimes/ag-ui/runtime-options.mdx +41 -0
  79. package/.docs/raw/docs/runtimes/ai-sdk/v6.mdx +122 -1
  80. package/.docs/raw/docs/runtimes/concepts/architecture.mdx +46 -4
  81. package/.docs/raw/docs/runtimes/concepts/threads.mdx +7 -1
  82. package/.docs/raw/docs/runtimes/custom/assistant-transport.mdx +54 -12
  83. package/.docs/raw/docs/runtimes/custom/external-store.mdx +62 -4
  84. package/.docs/raw/docs/runtimes/custom/local-runtime.mdx +30 -7
  85. package/.docs/raw/docs/runtimes/google-adk/hooks.mdx +108 -38
  86. package/.docs/raw/docs/runtimes/langgraph/generative-ui.mdx +2 -2
  87. package/.docs/raw/docs/runtimes/langgraph/streaming.mdx +14 -1
  88. package/.docs/raw/docs/runtimes/langgraph/tutorial/part-2.mdx +64 -50
  89. package/.docs/raw/docs/runtimes/langgraph/tutorial/part-3.mdx +98 -86
  90. package/.docs/raw/docs/tools/backend.mdx +144 -0
  91. package/.docs/raw/docs/tools/defining-tools.mdx +538 -0
  92. package/.docs/raw/docs/tools/dynamic-tools.mdx +110 -0
  93. package/.docs/raw/docs/tools/generative-ui.mdx +214 -0
  94. package/.docs/raw/docs/tools/index.mdx +71 -0
  95. package/.docs/raw/docs/{guides → tools}/interactables.mdx +1 -1
  96. package/.docs/raw/docs/{integrations/tools → tools}/mcp.mdx +145 -50
  97. package/.docs/raw/docs/{guides → tools}/multi-agent.mdx +15 -17
  98. package/.docs/raw/docs/tools/tool-ui.mdx +967 -0
  99. package/.docs/raw/docs/{integrations/tools/react-mcp.mdx → tools/user-managed-mcp.mdx} +7 -7
  100. package/.docs/raw/docs/ui/directive-text.mdx +3 -3
  101. package/.docs/raw/docs/ui/mcp-config.mdx +4 -4
  102. package/.docs/raw/docs/ui/mermaid.mdx +16 -9
  103. package/.docs/raw/docs/ui/part-grouping.mdx +84 -50
  104. package/.docs/raw/docs/ui/reasoning.mdx +4 -5
  105. package/.docs/raw/docs/ui/tool-fallback.mdx +16 -0
  106. package/.docs/raw/docs/ui/tool-group.mdx +5 -6
  107. package/.docs/raw/docs/utilities/heat-graph.mdx +1 -1
  108. package/.docs/raw/docs/utilities/react-o11y.mdx +2 -2
  109. package/dist/constants.js.map +1 -1
  110. package/dist/index.d.ts.map +1 -1
  111. package/dist/index.js.map +1 -1
  112. package/dist/prepare-docs/code-examples.d.ts.map +1 -1
  113. package/dist/prepare-docs/code-examples.js.map +1 -1
  114. package/dist/prepare-docs/copy-raw.d.ts.map +1 -1
  115. package/dist/prepare-docs/copy-raw.js.map +1 -1
  116. package/dist/prepare-docs/prepare.js.map +1 -1
  117. package/dist/stdio.js.map +1 -1
  118. package/dist/tools/docs.js.map +1 -1
  119. package/dist/tools/examples.js.map +1 -1
  120. package/dist/tools/tests/test-setup.js.map +1 -1
  121. package/dist/utils/mdx.js.map +1 -1
  122. package/dist/utils/paths.d.ts.map +1 -1
  123. package/dist/utils/paths.js.map +1 -1
  124. package/package.json +5 -5
  125. package/.docs/organized/code-examples/with-parent-id-grouping.md +0 -596
  126. package/.docs/raw/docs/(docs)/copilots/make-assistant-tool-ui.mdx +0 -151
  127. package/.docs/raw/docs/(docs)/copilots/make-assistant-tool.mdx +0 -230
  128. package/.docs/raw/docs/guides/generative-ui.mdx +0 -142
  129. package/.docs/raw/docs/guides/tool-ui.mdx +0 -858
  130. package/.docs/raw/docs/guides/tools.mdx +0 -736
  131. /package/.docs/raw/docs/{(docs)/copilots → copilots}/assistant-frame.mdx +0 -0
  132. /package/.docs/raw/docs/{(docs)/copilots → copilots}/make-assistant-visible.mdx +0 -0
  133. /package/.docs/raw/docs/{(docs)/copilots → copilots}/use-assistant-instructions.mdx +0 -0
  134. /package/.docs/raw/docs/{guides → tools}/mcp-apps.mdx +0 -0
package/.docs/organized/code-examples/with-opencode.md CHANGED
@@ -173,7 +173,7 @@ export default function RootLayout({
173
173
  return (
174
174
  <html lang="en" className="dark h-full">
175
175
  <body
176
- className={`${geistSans.variable} ${geistMono.variable} dark h-full overflow-hidden bg-background text-foreground antialiased`}
176
+ className={`${geistSans.variable} ${geistMono.variable} dark bg-background text-foreground h-full overflow-hidden antialiased`}
177
177
  >
178
178
  <TooltipProvider>{children}</TooltipProvider>
179
179
  </body>
@@ -218,7 +218,7 @@ export default function Home() {
218
218
  <SidebarTrigger />
219
219
  <Separator orientation="vertical" className="mr-2 h-4" />
220
220
  <div className="min-w-0">
221
- <div className="font-medium text-sm">OpenCode</div>
221
+ <div className="text-sm font-medium">OpenCode</div>
222
222
  <SelectedSessionTitle />
223
223
  </div>
224
224
  </header>
@@ -239,7 +239,7 @@ function SelectedSessionTitle() {
239
239
  if (!title) return null;
240
240
 
241
241
  return (
242
- <div className="truncate text-muted-foreground text-xs leading-tight">
242
+ <div className="text-muted-foreground truncate text-xs leading-tight">
243
243
  {title}
244
244
  </div>
245
245
  );
@@ -312,7 +312,7 @@ const ThreadListNew: FC = () => {
312
312
  <ThreadListPrimitive.New asChild>
313
313
  <Button
314
314
  variant="outline"
315
- className="aui-thread-list-new h-9 justify-start gap-2 rounded-lg px-3 text-sm hover:bg-muted data-active:bg-muted"
315
+ className="aui-thread-list-new hover:bg-muted data-active:bg-muted h-9 justify-start gap-2 rounded-lg px-3 text-sm"
316
316
  >
317
317
  <PlusIcon className="size-4" />
318
318
  New Session
@@ -340,7 +340,7 @@ const ThreadListSkeleton: FC = () => {
340
340
 
341
341
  const ThreadListItem: FC = () => {
342
342
  return (
343
- <ThreadListItemPrimitive.Root className="aui-thread-list-item group flex h-9 items-center gap-2 rounded-lg transition-colors hover:bg-muted focus-visible:bg-muted focus-visible:outline-none data-active:bg-muted">
343
+ <ThreadListItemPrimitive.Root className="aui-thread-list-item group hover:bg-muted focus-visible:bg-muted data-active:bg-muted flex h-9 items-center gap-2 rounded-lg transition-colors focus-visible:outline-none">
344
344
  <ThreadListItemPrimitive.Trigger className="aui-thread-list-item-trigger flex h-full min-w-0 flex-1 items-center truncate px-3 text-start text-sm">
345
345
  <ThreadListItemPrimitive.Title fallback="New Session" />
346
346
  </ThreadListItemPrimitive.Trigger>
@@ -356,7 +356,7 @@ const ThreadListItemMore: FC = () => {
356
356
  <Button
357
357
  variant="ghost"
358
358
  size="icon"
359
- className="aui-thread-list-item-more mr-2 size-7 p-0 opacity-0 transition-opacity group-hover:opacity-100 data-[state=open]:bg-accent data-[state=open]:opacity-100 group-data-active:opacity-100"
359
+ className="aui-thread-list-item-more data-[state=open]:bg-accent mr-2 size-7 p-0 opacity-0 transition-opacity group-hover:opacity-100 group-data-active:opacity-100 data-[state=open]:opacity-100"
360
360
  >
361
361
  <MoreHorizontalIcon className="size-4" />
362
362
  <span className="sr-only">More options</span>
@@ -365,10 +365,10 @@ const ThreadListItemMore: FC = () => {
365
365
  <ThreadListItemMorePrimitive.Content
366
366
  side="bottom"
367
367
  align="start"
368
- className="aui-thread-list-item-more-content z-50 min-w-32 overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md"
368
+ className="aui-thread-list-item-more-content bg-popover text-popover-foreground z-50 min-w-32 overflow-hidden rounded-md border p-1 shadow-md"
369
369
  >
370
370
  <ThreadListItemPrimitive.Delete asChild>
371
- <ThreadListItemMorePrimitive.Item className="aui-thread-list-item-more-item flex cursor-pointer select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground">
371
+ <ThreadListItemMorePrimitive.Item className="aui-thread-list-item-more-item hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground flex cursor-pointer items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none select-none">
372
372
  <TrashIcon className="size-4" />
373
373
  Delete
374
374
  </ThreadListItemMorePrimitive.Item>
@@ -419,6 +419,7 @@ import {
419
419
  BranchPickerPrimitive,
420
420
  ComposerPrimitive,
421
421
  ErrorPrimitive,
422
+ groupPartByType,
422
423
  MessagePrimitive,
423
424
  SuggestionPrimitive,
424
425
  ThreadPrimitive,
@@ -492,7 +493,7 @@ const renderOpenCodeTool = (
492
493
  export const Thread: FC = () => {
493
494
  return (
494
495
  <ThreadPrimitive.Root
495
- className="aui-root aui-thread-root @container flex h-full flex-col bg-background"
496
+ className="aui-root aui-thread-root bg-background @container flex h-full flex-col"
496
497
  style={{
497
498
  ["--thread-max-width" as string]: "44rem",
498
499
  ["--composer-radius" as string]: "24px",
@@ -511,7 +512,7 @@ export const Thread: FC = () => {
511
512
  {() => <ThreadMessage />}
512
513
  </ThreadPrimitive.Messages>
513
514
 
514
- <ThreadPrimitive.ViewportFooter className="aui-thread-viewport-footer sticky bottom-0 mx-auto mt-auto flex w-full max-w-(--thread-max-width) flex-col gap-4 overflow-visible rounded-t-(--composer-radius) bg-background pb-4 md:pb-6">
515
+ <ThreadPrimitive.ViewportFooter className="aui-thread-viewport-footer bg-background sticky bottom-0 mx-auto mt-auto flex w-full max-w-(--thread-max-width) flex-col gap-4 overflow-visible rounded-t-(--composer-radius) pb-4 md:pb-6">
515
516
  <ThreadScrollToBottom />
516
517
  <Composer />
517
518
  </ThreadPrimitive.ViewportFooter>
@@ -534,7 +535,7 @@ const ThreadScrollToBottom: FC = () => {
534
535
  <TooltipIconButton
535
536
  tooltip="Scroll to bottom"
536
537
  variant="outline"
537
- className="aui-thread-scroll-to-bottom absolute -top-12 z-10 self-center rounded-full p-4 disabled:invisible dark:border-border dark:bg-background dark:hover:bg-accent"
538
+ className="aui-thread-scroll-to-bottom dark:border-border dark:bg-background dark:hover:bg-accent absolute -top-12 z-10 self-center rounded-full p-4 disabled:invisible"
538
539
  >
539
540
  <ArrowDownIcon />
540
541
  </TooltipIconButton>
@@ -547,7 +548,7 @@ const ThreadWelcome: FC = () => {
547
548
  <div className="aui-thread-welcome-root mx-auto my-auto flex w-full max-w-(--thread-max-width) grow flex-col">
548
549
  <div className="aui-thread-welcome-center flex w-full grow flex-col items-center justify-center">
549
550
  <div className="aui-thread-welcome-message flex size-full flex-col justify-center px-4">
550
- <h1 className="aui-thread-welcome-message-inner fade-in slide-in-from-bottom-1 animate-in fill-mode-both font-semibold text-2xl duration-200">
551
+ <h1 className="aui-thread-welcome-message-inner fade-in slide-in-from-bottom-1 animate-in fill-mode-both text-2xl font-semibold duration-200">
551
552
  Welcome
552
553
  </h1>
553
554
  <p className="aui-thread-welcome-message-inner fade-in slide-in-from-bottom-1 animate-in fill-mode-both text-muted-foreground text-xl delay-75 duration-200">
@@ -562,7 +563,7 @@ const ThreadWelcome: FC = () => {
562
563
 
563
564
  const ThreadSuggestions: FC = () => {
564
565
  return (
565
- <div className="aui-thread-welcome-suggestions grid w-full @md:grid-cols-2 gap-2 pb-4">
566
+ <div className="aui-thread-welcome-suggestions grid w-full gap-2 pb-4 @md:grid-cols-2">
566
567
  <ThreadPrimitive.Suggestions>
567
568
  {() => <ThreadSuggestionItem />}
568
569
  </ThreadPrimitive.Suggestions>
@@ -572,11 +573,11 @@ const ThreadSuggestions: FC = () => {
572
573
 
573
574
  const ThreadSuggestionItem: FC = () => {
574
575
  return (
575
- <div className="aui-thread-welcome-suggestion-display fade-in slide-in-from-bottom-2 @md:nth-[n+3]:block nth-[n+3]:hidden animate-in fill-mode-both duration-200">
576
+ <div className="aui-thread-welcome-suggestion-display fade-in slide-in-from-bottom-2 animate-in fill-mode-both duration-200 nth-[n+3]:hidden @md:nth-[n+3]:block">
576
577
  <SuggestionPrimitive.Trigger send asChild>
577
578
  <Button
578
579
  variant="ghost"
579
- className="aui-thread-welcome-suggestion h-auto w-full @md:flex-col flex-wrap items-start justify-start gap-1 rounded-3xl border bg-background px-4 py-3 text-left text-sm transition-colors hover:bg-muted"
580
+ className="aui-thread-welcome-suggestion bg-background hover:bg-muted h-auto w-full flex-wrap items-start justify-start gap-1 rounded-3xl border px-4 py-3 text-left text-sm transition-colors @md:flex-col"
580
581
  >
581
582
  <SuggestionPrimitive.Title className="aui-thread-welcome-suggestion-text-1 font-medium" />
582
583
  <SuggestionPrimitive.Description className="aui-thread-welcome-suggestion-text-2 text-muted-foreground empty:hidden" />
@@ -592,12 +593,12 @@ const Composer: FC = () => {
592
593
  <ComposerPrimitive.AttachmentDropzone asChild>
593
594
  <div
594
595
  data-slot="composer-shell"
595
- className="flex w-full flex-col gap-2 rounded-(--composer-radius) border bg-background p-(--composer-padding) transition-shadow focus-within:border-ring/75 focus-within:ring-2 focus-within:ring-ring/20 data-[dragging=true]:border-ring data-[dragging=true]:border-dashed data-[dragging=true]:bg-accent/50"
596
+ className="bg-background focus-within:border-ring/75 focus-within:ring-ring/20 data-[dragging=true]:border-ring data-[dragging=true]:bg-accent/50 flex w-full flex-col gap-2 rounded-(--composer-radius) border p-(--composer-padding) transition-shadow focus-within:ring-2 data-[dragging=true]:border-dashed"
596
597
  >
597
598
  <ComposerAttachments />
598
599
  <ComposerPrimitive.Input
599
600
  placeholder="Send a message..."
600
- className="aui-composer-input max-h-32 min-h-10 w-full resize-none bg-transparent px-1.75 py-1 text-sm outline-none placeholder:text-muted-foreground/80"
601
+ className="aui-composer-input placeholder:text-muted-foreground/80 max-h-32 min-h-10 w-full resize-none bg-transparent px-1.75 py-1 text-sm outline-none"
601
602
  rows={1}
602
603
  autoFocus
603
604
  aria-label="Message input"
@@ -648,7 +649,7 @@ const ComposerAction: FC = () => {
648
649
  const MessageError: FC = () => {
649
650
  return (
650
651
  <MessagePrimitive.Error>
651
- <ErrorPrimitive.Root className="aui-message-error-root mt-2 rounded-full border border-destructive bg-destructive/10 px-3 py-2 text-destructive text-sm dark:bg-destructive/5 dark:text-red-200">
652
+ <ErrorPrimitive.Root className="aui-message-error-root border-destructive bg-destructive/10 text-destructive dark:bg-destructive/5 mt-2 rounded-full border px-3 py-2 text-sm dark:text-red-200">
652
653
  <ErrorPrimitive.Message className="aui-message-error-message line-clamp-2" />
653
654
  </ErrorPrimitive.Root>
654
655
  </MessagePrimitive.Error>
@@ -658,18 +659,15 @@ const MessageError: FC = () => {
658
659
  const AssistantMessage: FC = () => {
659
660
  return (
660
661
  <MessagePrimitive.Root
661
- className="aui-assistant-message-root fade-in slide-in-from-bottom-1 relative mx-auto w-full max-w-(--thread-max-width) animate-in py-3 duration-150"
662
+ className="aui-assistant-message-root fade-in slide-in-from-bottom-1 animate-in relative mx-auto w-full max-w-(--thread-max-width) py-3 duration-150"
662
663
  data-role="assistant"
663
664
  >
664
- <div className="aui-assistant-message-content wrap-break-word px-2 text-foreground leading-relaxed">
665
+ <div className="aui-assistant-message-content text-foreground px-2 leading-relaxed wrap-break-word">
665
666
  <MessagePrimitive.GroupedParts
666
- groupBy={(part) => {
667
- if (part.type === "reasoning")
668
- return ["group-chainOfThought", "group-reasoning"];
669
- if (part.type === "tool-call")
670
- return ["group-chainOfThought", "group-tool"];
671
- return null;
672
- }}
667
+ groupBy={groupPartByType({
668
+ reasoning: ["group-chainOfThought", "group-reasoning"],
669
+ "tool-call": ["group-chainOfThought", "group-tool"],
670
+ })}
673
671
  >
674
672
  {({ part, children }) => {
675
673
  switch (part.type) {
@@ -713,7 +711,7 @@ const AssistantActionBar: FC = () => {
713
711
  hideWhenRunning
714
712
  autohide="not-last"
715
713
  autohideFloat="single-branch"
716
- className="aui-assistant-action-bar-root col-start-3 row-start-2 -ml-1 flex gap-1 text-muted-foreground data-floating:absolute data-floating:rounded-md data-floating:border data-floating:bg-background data-floating:p-1 data-floating:shadow-sm"
714
+ className="aui-assistant-action-bar-root text-muted-foreground data-floating:bg-background col-start-3 row-start-2 -ml-1 flex gap-1 data-floating:absolute data-floating:rounded-md data-floating:border data-floating:p-1 data-floating:shadow-sm"
717
715
  >
718
716
  <ActionBarPrimitive.Copy asChild>
719
717
  <TooltipIconButton tooltip="Copy">
@@ -742,10 +740,10 @@ const AssistantActionBar: FC = () => {
742
740
  <ActionBarMorePrimitive.Content
743
741
  side="bottom"
744
742
  align="start"
745
- className="aui-action-bar-more-content z-50 min-w-32 overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md"
743
+ className="aui-action-bar-more-content bg-popover text-popover-foreground z-50 min-w-32 overflow-hidden rounded-md border p-1 shadow-md"
746
744
  >
747
745
  <ActionBarPrimitive.ExportMarkdown asChild>
748
- <ActionBarMorePrimitive.Item className="aui-action-bar-more-item flex cursor-pointer select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground">
746
+ <ActionBarMorePrimitive.Item className="aui-action-bar-more-item hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground flex cursor-pointer items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none select-none">
749
747
  <DownloadIcon className="size-4" />
750
748
  Export as Markdown
751
749
  </ActionBarMorePrimitive.Item>
@@ -759,13 +757,13 @@ const AssistantActionBar: FC = () => {
759
757
  const UserMessage: FC = () => {
760
758
  return (
761
759
  <MessagePrimitive.Root
762
- className="aui-user-message-root fade-in slide-in-from-bottom-1 mx-auto grid w-full max-w-(--thread-max-width) animate-in auto-rows-auto grid-cols-[minmax(72px,1fr)_auto] content-start gap-y-2 px-2 py-3 duration-150 [&:where(>*)]:col-start-2"
760
+ className="aui-user-message-root fade-in slide-in-from-bottom-1 animate-in mx-auto grid w-full max-w-(--thread-max-width) auto-rows-auto grid-cols-[minmax(72px,1fr)_auto] content-start gap-y-2 px-2 py-3 duration-150 [&:where(>*)]:col-start-2"
763
761
  data-role="user"
764
762
  >
765
763
  <UserMessageAttachments />
766
764
 
767
765
  <div className="aui-user-message-content-wrapper relative col-start-2 min-w-0">
768
- <div className="aui-user-message-content wrap-break-word rounded-2xl bg-muted px-4 py-2.5 text-foreground">
766
+ <div className="aui-user-message-content bg-muted text-foreground rounded-2xl px-4 py-2.5 wrap-break-word">
769
767
  <MessagePrimitive.Parts />
770
768
  </div>
771
769
  <div className="aui-user-action-bar-wrapper absolute top-1/2 left-0 -translate-x-full -translate-y-1/2 pr-2">
@@ -797,9 +795,9 @@ const UserActionBar: FC = () => {
797
795
  const EditComposer: FC = () => {
798
796
  return (
799
797
  <MessagePrimitive.Root className="aui-edit-composer-wrapper mx-auto flex w-full max-w-(--thread-max-width) flex-col px-2 py-3">
800
- <ComposerPrimitive.Root className="aui-edit-composer-root ml-auto flex w-full max-w-[85%] flex-col rounded-2xl bg-muted">
798
+ <ComposerPrimitive.Root className="aui-edit-composer-root bg-muted ml-auto flex w-full max-w-[85%] flex-col rounded-2xl">
801
799
  <ComposerPrimitive.Input
802
- className="aui-edit-composer-input min-h-14 w-full resize-none bg-transparent p-4 text-foreground text-sm outline-none"
800
+ className="aui-edit-composer-input text-foreground min-h-14 w-full resize-none bg-transparent p-4 text-sm outline-none"
803
801
  autoFocus
804
802
  />
805
803
  <div className="aui-edit-composer-footer mx-3 mb-3 flex items-center gap-2 self-end">
@@ -825,7 +823,7 @@ const BranchPicker: FC<BranchPickerPrimitive.Root.Props> = ({
825
823
  <BranchPickerPrimitive.Root
826
824
  hideWhenSingleBranch
827
825
  className={cn(
828
- "aui-branch-picker-root mr-2 -ml-2 inline-flex items-center text-muted-foreground text-xs",
826
+ "aui-branch-picker-root text-muted-foreground mr-2 -ml-2 inline-flex items-center text-xs",
829
827
  className,
830
828
  )}
831
829
  {...rest}
@@ -895,7 +893,7 @@ export const OpenCodeDataPart: FC<OpenCodeDataPartProps> = ({ name, data }) => {
895
893
  const summary = getSummary(name, data);
896
894
 
897
895
  return (
898
- <div className="my-3 flex w-min items-center gap-2 text-nowrap rounded-full border bg-muted/30 px-2 py-1 text-muted-foreground text-xs">
896
+ <div className="bg-muted/30 text-muted-foreground my-3 flex w-min items-center gap-2 rounded-full border px-2 py-1 text-xs text-nowrap">
899
897
  <WrenchIcon className="size-3" />
900
898
  {summary}
901
899
  </div>
@@ -1011,7 +1009,7 @@ export const OpenCodePermissionCard = ({
1011
1009
  </div>
1012
1010
  ) : null}
1013
1011
  {request.toolInput !== undefined ? (
1014
- <pre className="overflow-x-auto rounded-md bg-muted p-3 text-xs">
1012
+ <pre className="bg-muted overflow-x-auto rounded-md p-3 text-xs">
1015
1013
  {JSON.stringify(request.toolInput, null, 2)}
1016
1014
  </pre>
1017
1015
  ) : null}
@@ -1053,7 +1051,7 @@ export const OpenCodePermissionCard = ({
1053
1051
  Reject
1054
1052
  </Button>
1055
1053
  {error ? (
1056
- <p className="w-full text-destructive text-xs">{error}</p>
1054
+ <p className="text-destructive w-full text-xs">{error}</p>
1057
1055
  ) : null}
1058
1056
  </CardFooter>
1059
1057
  ) : null}
@@ -1257,7 +1255,7 @@ export const OpenCodeQuestionCard = ({
1257
1255
  return (
1258
1256
  <section key={`${request.id}-${index}`} className="space-y-3">
1259
1257
  <div className="space-y-1">
1260
- <p className="font-medium text-sm">{question.header}</p>
1258
+ <p className="text-sm font-medium">{question.header}</p>
1261
1259
  <p className="text-muted-foreground text-xs">
1262
1260
  {question.question}
1263
1261
  </p>
@@ -1297,7 +1295,7 @@ export const OpenCodeQuestionCard = ({
1297
1295
  <div className="space-y-1">
1298
1296
  <Label
1299
1297
  htmlFor={optionId}
1300
- className="font-medium text-sm"
1298
+ className="text-sm font-medium"
1301
1299
  >
1302
1300
  {option.label}
1303
1301
  </Label>
@@ -1405,7 +1403,7 @@ export const OpenCodeQuestionCard = ({
1405
1403
  Dismiss
1406
1404
  </Button>
1407
1405
  {error ? (
1408
- <div className="flex w-full items-center gap-2 text-destructive text-xs">
1406
+ <div className="text-destructive flex w-full items-center gap-2 text-xs">
1409
1407
  <AlertCircleIcon className="size-3.5" />
1410
1408
  <span>{error}</span>
1411
1409
  </div>
@@ -1572,13 +1570,13 @@ export const AskQuestionInline: ToolCallMessagePartComponent = memo(
1572
1570
  const statusType = status?.type ?? "complete";
1573
1571
 
1574
1572
  return (
1575
- <div className="flex items-center gap-2 py-0.5 text-muted-foreground text-sm">
1573
+ <div className="text-muted-foreground flex items-center gap-2 py-0.5 text-sm">
1576
1574
  {statusType === "requires-action" ? (
1577
1575
  <CircleHelpIcon className="size-3.5 shrink-0" />
1578
1576
  ) : statusType === "running" ? (
1579
1577
  <LoaderIcon className="size-3.5 shrink-0 animate-spin" />
1580
1578
  ) : statusType === "incomplete" ? (
1581
- <XCircleIcon className="size-3.5 shrink-0 text-destructive" />
1579
+ <XCircleIcon className="text-destructive size-3.5 shrink-0" />
1582
1580
  ) : (
1583
1581
  <CheckCircle2Icon className="size-3.5 shrink-0" />
1584
1582
  )}
@@ -1646,7 +1644,7 @@ const ReasoningGroupImpl: FC<
1646
1644
  <div
1647
1645
  data-slot="reasoning-group"
1648
1646
  className={cn(
1649
- "mt-4 mb-2 flex items-start gap-2 text-muted-foreground text-sm leading-relaxed first:mt-0",
1647
+ "text-muted-foreground mt-4 mb-2 flex items-start gap-2 text-sm leading-relaxed first:mt-0",
1650
1648
  isMultiLine && "mt-6 mb-4",
1651
1649
  textAfter && "mb-4",
1652
1650
  )}
@@ -1877,7 +1875,7 @@ export const ApplyPatchDiff: ToolCallMessagePartComponent = memo(
1877
1875
  <CollapsibleTrigger asChild>
1878
1876
  <button
1879
1877
  type="button"
1880
- className="group flex w-full items-center gap-2 py-0.5 text-muted-foreground text-sm transition-colors hover:text-foreground"
1878
+ className="group text-muted-foreground hover:text-foreground flex w-full items-center gap-2 py-0.5 text-sm transition-colors"
1881
1879
  >
1882
1880
  <ToolStatusIcon
1883
1881
  status={status}
@@ -1912,10 +1910,10 @@ export const ApplyPatchDiff: ToolCallMessagePartComponent = memo(
1912
1910
 
1913
1911
  {hasDiff && (
1914
1912
  <>
1915
- <span className="mt-0.5 min-w-4 flex-1 self-center border-muted-foreground/20 border-b-[0.5px] transition-colors group-hover:border-muted-foreground/50" />
1913
+ <span className="border-muted-foreground/20 group-hover:border-muted-foreground/50 mt-0.5 min-w-4 flex-1 self-center border-b-[0.5px] transition-colors" />
1916
1914
  <ChevronRightIcon
1917
1915
  className={cn(
1918
- "mt-0.5 size-3.75 shrink-0 stroke-muted-foreground/60 transition-[transform,stroke] group-hover:stroke-foreground/60",
1916
+ "stroke-muted-foreground/60 group-hover:stroke-foreground/60 mt-0.5 size-3.75 shrink-0 transition-[transform,stroke]",
1919
1917
  open && "rotate-90",
1920
1918
  )}
1921
1919
  />
@@ -1925,7 +1923,7 @@ export const ApplyPatchDiff: ToolCallMessagePartComponent = memo(
1925
1923
  </CollapsibleTrigger>
1926
1924
 
1927
1925
  {hasDiff && (
1928
- <CollapsibleContent className="overflow-hidden data-[state=closed]:animate-collapsible-up data-[state=open]:animate-collapsible-down data-[state=closed]:ease-out data-[state=open]:ease-in">
1926
+ <CollapsibleContent className="data-[state=closed]:animate-collapsible-up data-[state=open]:animate-collapsible-down overflow-hidden data-[state=closed]:ease-out data-[state=open]:ease-in">
1929
1927
  <div className="mt-1 ml-5 overflow-hidden rounded-md border">
1930
1928
  <PatchDiff
1931
1929
  patch={unifiedPatch}
@@ -2007,12 +2005,12 @@ export const BashTerminal: ToolCallMessagePartComponent = memo(
2007
2005
  <CollapsibleTrigger asChild>
2008
2006
  <button
2009
2007
  type="button"
2010
- className="group flex w-full items-center gap-2 py-0.5 text-muted-foreground text-sm transition-colors hover:text-foreground"
2008
+ className="group text-muted-foreground hover:text-foreground flex w-full items-center gap-2 py-0.5 text-sm transition-colors"
2011
2009
  >
2012
2010
  {isRunning ? (
2013
2011
  <ToolStatusIcon status={status} />
2014
2012
  ) : isError ? (
2015
- <XCircleIcon className="size-3 shrink-0 text-destructive" />
2013
+ <XCircleIcon className="text-destructive size-3 shrink-0" />
2016
2014
  ) : (
2017
2015
  <ToolStatusIcon
2018
2016
  status={status}
@@ -2032,10 +2030,10 @@ export const BashTerminal: ToolCallMessagePartComponent = memo(
2032
2030
 
2033
2031
  {hasOutput && (
2034
2032
  <>
2035
- <span className="mt-0.5 min-w-4 flex-1 self-center border-muted-foreground/20 border-b-[0.5px] transition-colors group-hover:border-muted-foreground/50" />
2033
+ <span className="border-muted-foreground/20 group-hover:border-muted-foreground/50 mt-0.5 min-w-4 flex-1 self-center border-b-[0.5px] transition-colors" />
2036
2034
  <ChevronRightIcon
2037
2035
  className={cn(
2038
- "mt-0.5 size-3.75 shrink-0 stroke-muted-foreground/60 transition-[transform,stroke] group-hover:stroke-foreground/60",
2036
+ "stroke-muted-foreground/60 group-hover:stroke-foreground/60 mt-0.5 size-3.75 shrink-0 transition-[transform,stroke]",
2039
2037
  open && "rotate-90",
2040
2038
  )}
2041
2039
  />
@@ -2045,20 +2043,20 @@ export const BashTerminal: ToolCallMessagePartComponent = memo(
2045
2043
  </CollapsibleTrigger>
2046
2044
 
2047
2045
  {hasOutput && (
2048
- <CollapsibleContent className="overflow-hidden data-[state=closed]:animate-collapsible-up data-[state=open]:animate-collapsible-down data-[state=closed]:ease-out data-[state=open]:ease-in">
2049
- <div className="mt-1 ml-5 max-h-96 overflow-y-auto rounded-md border bg-muted/50 p-3 font-mono text-xs">
2046
+ <CollapsibleContent className="data-[state=closed]:animate-collapsible-up data-[state=open]:animate-collapsible-down overflow-hidden data-[state=closed]:ease-out data-[state=open]:ease-in">
2047
+ <div className="bg-muted/50 mt-1 ml-5 max-h-96 overflow-y-auto rounded-md border p-3 font-mono text-xs">
2050
2048
  {command && (
2051
- <div className="mb-2 text-muted-foreground">$ {command}</div>
2049
+ <div className="text-muted-foreground mb-2">$ {command}</div>
2052
2050
  )}
2053
2051
  {stdout && (
2054
- <pre className="wrap-break-word whitespace-pre-wrap text-foreground">
2052
+ <pre className="text-foreground wrap-break-word whitespace-pre-wrap">
2055
2053
  {stdout}
2056
2054
  </pre>
2057
2055
  )}
2058
2056
  {stderr && (
2059
2057
  <pre
2060
2058
  className={cn(
2061
- "wrap-break-word whitespace-pre-wrap text-destructive",
2059
+ "text-destructive wrap-break-word whitespace-pre-wrap",
2062
2060
  stdout && "mt-2",
2063
2061
  )}
2064
2062
  >
@@ -2116,7 +2114,7 @@ const ToolCallShell = ({
2116
2114
  const isCancelled = isCancelledToolStatus(status);
2117
2115
 
2118
2116
  return (
2119
- <div className="flex items-center gap-2 py-0.5 text-muted-foreground text-sm">
2117
+ <div className="text-muted-foreground flex items-center gap-2 py-0.5 text-sm">
2120
2118
  <ToolStatusIcon status={status} />
2121
2119
  <span
2122
2120
  className={cn(
@@ -2341,13 +2339,14 @@ export const ToolStatusIcon = ({
2341
2339
  ## next.config.ts
2342
2340
 
2343
2341
  ```typescript
2342
+ import { withAui } from "@assistant-ui/next";
2344
2343
  import type { NextConfig } from "next";
2345
2344
 
2346
2345
  const nextConfig: NextConfig = {
2347
2346
  /* config options here */
2348
2347
  };
2349
2348
 
2350
- export default nextConfig;
2349
+ export default withAui(nextConfig);
2351
2350
 
2352
2351
  ```
2353
2352
 
@@ -2369,21 +2368,22 @@ export default nextConfig;
2369
2368
  "@assistant-ui/react-markdown": "workspace:*",
2370
2369
  "@assistant-ui/react-opencode": "workspace:*",
2371
2370
  "@assistant-ui/ui": "workspace:*",
2372
- "@pierre/diffs": "^1.2.1",
2371
+ "@pierre/diffs": "^1.2.7",
2373
2372
  "class-variance-authority": "^0.7.1",
2374
2373
  "clsx": "^2.1.1",
2375
- "lucide-react": "^1.16.0",
2376
- "next": "^16.2.6",
2377
- "react": "^19.2.6",
2378
- "react-dom": "^19.2.6",
2374
+ "lucide-react": "^1.17.0",
2375
+ "next": "^16.2.7",
2376
+ "react": "^19.2.7",
2377
+ "react-dom": "^19.2.7",
2379
2378
  "tailwind-merge": "^3.6.0",
2380
2379
  "zod": "^4.4.3"
2381
2380
  },
2382
2381
  "devDependencies": {
2382
+ "@assistant-ui/next": "workspace:*",
2383
2383
  "@assistant-ui/x-buildutils": "workspace:*",
2384
2384
  "@tailwindcss/postcss": "^4.3.0",
2385
- "@types/node": "^25.9.1",
2386
- "@types/react": "^19.2.15",
2385
+ "@types/node": "^25.9.2",
2386
+ "@types/react": "^19.2.17",
2387
2387
  "@types/react-dom": "^19.2.3",
2388
2388
  "postcss": "^8.5.15",
2389
2389
  "tailwindcss": "^4.3.0",
package/.docs/organized/code-examples/with-react-hook-form.md CHANGED
@@ -246,7 +246,7 @@ import {
246
246
 
247
247
  const SetFormFieldTool = () => {
248
248
  return (
249
- <p className="text-center font-bold font-mono text-blue-500 text-sm">
249
+ <p className="text-center font-mono text-sm font-bold text-blue-500">
250
250
  set_form_field(...)
251
251
  </p>
252
252
  );
@@ -254,7 +254,7 @@ const SetFormFieldTool = () => {
254
254
 
255
255
  const SubmitFormTool = () => {
256
256
  return (
257
- <p className="text-center font-bold font-mono text-blue-500 text-sm">
257
+ <p className="text-center font-mono text-sm font-bold text-blue-500">
258
258
  submit_form(...)
259
259
  </p>
260
260
  );
@@ -305,13 +305,13 @@ export default function Home() {
305
305
  <AuiProvider value={aui}>
306
306
  <ResizablePanelGroup orientation="horizontal">
307
307
  <ResizablePanel defaultSize={60} minSize={40} style={panelStyle}>
308
- <div className="h-full overflow-y-auto bg-muted/30">
308
+ <div className="bg-muted/30 h-full overflow-y-auto">
309
309
  <main className="mx-auto w-full max-w-2xl px-4 py-10 sm:px-6 sm:py-12">
310
310
  <header className="mb-8 space-y-2">
311
- <p className="font-medium text-muted-foreground text-sm uppercase tracking-wide">
311
+ <p className="text-muted-foreground text-sm font-medium tracking-wide uppercase">
312
312
  Simon&apos;s Hackathon
313
313
  </p>
314
- <h1 className="font-semibold text-3xl tracking-tight">
314
+ <h1 className="text-3xl font-semibold tracking-tight">
315
315
  Apply to join
316
316
  </h1>
317
317
  <p className="text-muted-foreground">
@@ -417,7 +417,7 @@ export const SignupForm: FC = () => {
417
417
  <Card>
418
418
  <CardContent className="flex flex-col items-center gap-3 py-10 text-center">
419
419
  <CheckCircle2 className="size-10 text-green-600" />
420
- <p className="font-semibold text-lg">You&apos;re signed up!</p>
420
+ <p className="text-lg font-semibold">You&apos;re signed up!</p>
421
421
  <p className="text-muted-foreground text-sm">
422
422
  Thanks for registering. You&apos;ll hear from us soon.
423
423
  </p>
@@ -551,7 +551,7 @@ export const SignupForm: FC = () => {
551
551
  />
552
552
  </CardContent>
553
553
 
554
- <CardFooter className="sticky bottom-0 justify-end gap-3 border-t bg-card/95 backdrop-blur supports-[backdrop-filter]:bg-card/75">
554
+ <CardFooter className="bg-card/95 supports-[backdrop-filter]:bg-card/75 sticky bottom-0 justify-end gap-3 border-t backdrop-blur">
555
555
  <Button type="submit" disabled={isSubmitting}>
556
556
  {isSubmitting && <Loader2 className="size-4 animate-spin" />}
557
557
  {isSubmitting ? "Submitting..." : "Submit"}
@@ -585,13 +585,14 @@ export const submitSignup = async (data: object) => {
585
585
  ## next.config.ts
586
586
 
587
587
  ```typescript
588
+ import { withAui } from "@assistant-ui/next";
588
589
  import type { NextConfig } from "next";
589
590
 
590
591
  const nextConfig: NextConfig = {
591
592
  /* config options here */
592
593
  };
593
594
 
594
- export default nextConfig;
595
+ export default withAui(nextConfig);
595
596
 
596
597
  ```
597
598
 
@@ -609,27 +610,28 @@ export default nextConfig;
609
610
  "start": "next start"
610
611
  },
611
612
  "dependencies": {
612
- "@ai-sdk/openai": "^3.0.64",
613
+ "@ai-sdk/openai": "^3.0.68",
613
614
  "@assistant-ui/react": "workspace:*",
614
615
  "@assistant-ui/react-ai-sdk": "workspace:*",
615
616
  "@assistant-ui/react-hook-form": "workspace:*",
616
617
  "@assistant-ui/react-markdown": "workspace:*",
617
618
  "@assistant-ui/ui": "workspace:*",
618
- "ai": "^6.0.188",
619
+ "ai": "^6.0.197",
619
620
  "class-variance-authority": "^0.7.1",
620
621
  "clsx": "^2.1.1",
621
- "lucide-react": "^1.16.0",
622
- "next": "^16.2.6",
623
- "react": "^19.2.6",
624
- "react-dom": "^19.2.6",
625
- "react-hook-form": "^7.76.0",
622
+ "lucide-react": "^1.17.0",
623
+ "next": "^16.2.7",
624
+ "react": "^19.2.7",
625
+ "react-dom": "^19.2.7",
626
+ "react-hook-form": "^7.77.0",
626
627
  "tailwind-merge": "^3.6.0"
627
628
  },
628
629
  "devDependencies": {
630
+ "@assistant-ui/next": "workspace:*",
629
631
  "@assistant-ui/x-buildutils": "workspace:*",
630
632
  "@tailwindcss/postcss": "^4.3.0",
631
- "@types/node": "^25.9.1",
632
- "@types/react": "^19.2.15",
633
+ "@types/node": "^25.9.2",
634
+ "@types/react": "^19.2.17",
633
635
  "@types/react-dom": "^19.2.3",
634
636
  "postcss": "^8.5.15",
635
637
  "tailwindcss": "^4.3.0",