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

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

@@ -188,7 +188,7 @@ export default function RootLayout({
 ```tsx
 "use client";
 
-import { AssistantRuntimeProvider } from "@assistant-ui/react";
+import { AssistantRuntimeProvider, Tools, useAui } from "@assistant-ui/react";
 import {
   SidebarInset,
   SidebarProvider,
@@ -200,7 +200,22 @@ import {
   useOpenCodeRuntime,
   useOpenCodeSession,
 } from "@assistant-ui/react-opencode";
-import { Thread } from "../components/assistant-ui/thread";
+import {
+  Thread,
+  type ThreadComponents,
+} from "@/components/assistant-ui/thread";
+import { OpenCodeDataPart } from "@/components/opencode-data-part";
+import { FallbackTool } from "@/components/tools/opencode-tools";
+import { ReasoningGroup } from "@/components/tools/reasoning-ghost";
+import { ToolGroup } from "@/components/tools/tool-group";
+import toolkit from "@/components/tools/toolkit";
+import { useEffect } from "react";
+
+const THREAD_COMPONENTS: ThreadComponents = {
+  ToolFallback: FallbackTool,
+  ToolGroup,
+  ReasoningGroup,
+};
 
 export default function Home() {
   const runtime = useOpenCodeRuntime({
@@ -208,8 +223,17 @@ export default function Home() {
       process.env.NEXT_PUBLIC_OPENCODE_BASE_URL ?? "http://localhost:4096",
   });
 
+  const aui = useAui({
+    tools: Tools({ toolkit }),
+  });
+
+  useEffect(
+    () => aui.dataRenderers().setFallbackDataUI(OpenCodeDataPart),
+    [aui],
+  );
+
   return (
-    <AssistantRuntimeProvider runtime={runtime}>
+    <AssistantRuntimeProvider aui={aui} runtime={runtime}>
       <SidebarProvider>
         <div className="flex h-dvh w-full overflow-hidden pr-0.5">
           <ThreadListSidebar />
@@ -223,7 +247,7 @@ export default function Home() {
               </div>
             </header>
             <div className="min-h-0 flex-1 overflow-hidden">
-              <Thread />
+              <Thread components={THREAD_COMPONENTS} />
             </div>
           </SidebarInset>
         </div>
@@ -277,576 +301,6 @@ function SelectedSessionTitle() {
 
 ```
 
-## components/assistant-ui/thread-list.tsx
-
-```tsx
-import { Button } from "@/components/ui/button";
-import { Skeleton } from "@/components/ui/skeleton";
-import {
-  AuiIf,
-  ThreadListItemMorePrimitive,
-  ThreadListItemPrimitive,
-  ThreadListPrimitive,
-} from "@assistant-ui/react";
-import { MoreHorizontalIcon, PlusIcon, TrashIcon } from "lucide-react";
-import type { FC } from "react";
-
-export const ThreadList: FC = () => {
-  return (
-    <ThreadListPrimitive.Root className="aui-root aui-thread-list-root flex min-h-0 flex-1 flex-col gap-1 overflow-hidden">
-      <ThreadListNew />
-      <AuiIf condition={(s) => s.threads.isLoading}>
-        <ThreadListSkeleton />
-      </AuiIf>
-      <AuiIf condition={(s) => !s.threads.isLoading}>
-        <div className="min-h-0 flex-1 overflow-y-auto">
-          <ThreadListPrimitive.Items components={{ ThreadListItem }} />
-        </div>
-      </AuiIf>
-    </ThreadListPrimitive.Root>
-  );
-};
-
-const ThreadListNew: FC = () => {
-  return (
-    <ThreadListPrimitive.New asChild>
-      <Button
-        variant="outline"
-        className="aui-thread-list-new hover:bg-muted data-active:bg-muted h-9 justify-start gap-2 rounded-lg px-3 text-sm"
-      >
-        <PlusIcon className="size-4" />
-        New Session
-      </Button>
-    </ThreadListPrimitive.New>
-  );
-};
-
-const ThreadListSkeleton: FC = () => {
-  return (
-    <div className="flex flex-col gap-1">
-      {Array.from({ length: 5 }, (_, i) => (
-        <div
-          key={i}
-          role="status"
-          aria-label="Loading threads"
-          className="aui-thread-list-skeleton-wrapper flex h-9 items-center px-3"
-        >
-          <Skeleton className="aui-thread-list-skeleton h-4 w-full" />
-        </div>
-      ))}
-    </div>
-  );
-};
-
-const ThreadListItem: FC = () => {
-  return (
-    <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">
-      <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">
-        <ThreadListItemPrimitive.Title fallback="New Session" />
-      </ThreadListItemPrimitive.Trigger>
-      <ThreadListItemMore />
-    </ThreadListItemPrimitive.Root>
-  );
-};
-
-const ThreadListItemMore: FC = () => {
-  return (
-    <ThreadListItemMorePrimitive.Root>
-      <ThreadListItemMorePrimitive.Trigger asChild>
-        <Button
-          variant="ghost"
-          size="icon"
-          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"
-        >
-          <MoreHorizontalIcon className="size-4" />
-          <span className="sr-only">More options</span>
-        </Button>
-      </ThreadListItemMorePrimitive.Trigger>
-      <ThreadListItemMorePrimitive.Content
-        side="bottom"
-        align="start"
-        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"
-      >
-        <ThreadListItemPrimitive.Delete asChild>
-          <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">
-            <TrashIcon className="size-4" />
-            Delete
-          </ThreadListItemMorePrimitive.Item>
-        </ThreadListItemPrimitive.Delete>
-      </ThreadListItemMorePrimitive.Content>
-    </ThreadListItemMorePrimitive.Root>
-  );
-};
-
-```
-
-## components/assistant-ui/thread.tsx
-
-```tsx
-import {
-  ComposerAddAttachment,
-  ComposerAttachments,
-  UserMessageAttachments,
-} from "@/components/assistant-ui/attachment";
-import { MarkdownText } from "@/components/assistant-ui/markdown-text";
-import { Reasoning } from "@/components/assistant-ui/reasoning";
-import {
-  AskQuestionInline,
-  withOpenCodeToolInteractions,
-} from "@/components/tools/opencode-tool-interactions";
-import { ReasoningGroup as ReasoningGhostGroup } from "@/components/tools/reasoning-ghost";
-import { BashTerminal } from "@/components/tools/tool-ui-bash";
-import { ApplyPatchDiff } from "@/components/tools/tool-ui-apply-patch";
-import {
-  EditInline,
-  GlobInline,
-  GrepInline,
-  ReadInline,
-  ToolCallFallback,
-  WebFetchInline,
-  WebSearchInline,
-  WriteInline,
-} from "@/components/tools/tool-ui-inline";
-import { ToolGroup as ToolCallGroup } from "@/components/tools/tool-group";
-import { TooltipIconButton } from "@/components/assistant-ui/tooltip-icon-button";
-import { OpenCodeDataPart } from "@/components/opencode-data-part";
-import { Button } from "@/components/ui/button";
-import { cn } from "@/lib/utils";
-import {
-  ActionBarMorePrimitive,
-  ActionBarPrimitive,
-  AuiIf,
-  BranchPickerPrimitive,
-  ComposerPrimitive,
-  ErrorPrimitive,
-  groupPartByType,
-  MessagePrimitive,
-  SuggestionPrimitive,
-  ThreadPrimitive,
-  useAuiState,
-} from "@assistant-ui/react";
-import {
-  ArrowDownIcon,
-  ArrowUpIcon,
-  CheckIcon,
-  ChevronLeftIcon,
-  ChevronRightIcon,
-  CopyIcon,
-  DownloadIcon,
-  MoreHorizontalIcon,
-  PencilIcon,
-  RefreshCwIcon,
-  SquareIcon,
-} from "lucide-react";
-import type { ComponentProps, FC } from "react";
-
-const ReadTool = withOpenCodeToolInteractions(ReadInline);
-const EditTool = withOpenCodeToolInteractions(EditInline);
-const WriteTool = withOpenCodeToolInteractions(WriteInline);
-const BashTool = withOpenCodeToolInteractions(BashTerminal);
-const GrepTool = withOpenCodeToolInteractions(GrepInline);
-const GlobTool = withOpenCodeToolInteractions(GlobInline);
-const WebSearchTool = withOpenCodeToolInteractions(WebSearchInline);
-const WebFetchTool = withOpenCodeToolInteractions(WebFetchInline);
-const ApplyPatchTool = withOpenCodeToolInteractions(ApplyPatchDiff);
-const AskQuestionTool = withOpenCodeToolInteractions(AskQuestionInline);
-const FallbackTool = withOpenCodeToolInteractions(ToolCallFallback);
-
-const renderOpenCodeTool = (
-  part: Extract<
-    Parameters<
-      NonNullable<
-        ComponentProps<typeof MessagePrimitive.GroupedParts>["children"]
-      >
-    >[0]["part"],
-    { type: "tool-call" }
-  >,
-) => {
-  switch (part.toolName) {
-    case "read":
-      return <ReadTool {...part} />;
-    case "edit":
-      return <EditTool {...part} />;
-    case "write":
-      return <WriteTool {...part} />;
-    case "bash":
-      return <BashTool {...part} />;
-    case "grep":
-      return <GrepTool {...part} />;
-    case "glob":
-      return <GlobTool {...part} />;
-    case "webSearch":
-      return <WebSearchTool {...part} />;
-    case "webFetch":
-      return <WebFetchTool {...part} />;
-    case "apply_patch":
-      return <ApplyPatchTool {...part} />;
-    case "ask_question":
-    case "request_user_input":
-    case "requestUserInput":
-      return <AskQuestionTool {...part} />;
-    default:
-      return <FallbackTool {...part} />;
-  }
-};
-
-export const Thread: FC = () => {
-  return (
-    <ThreadPrimitive.Root
-      className="aui-root aui-thread-root bg-background @container flex h-full flex-col"
-      style={{
-        ["--thread-max-width" as string]: "44rem",
-        ["--composer-radius" as string]: "24px",
-        ["--composer-padding" as string]: "10px",
-      }}
-    >
-      <ThreadPrimitive.Viewport
-        turnAnchor="top"
-        className="aui-thread-viewport relative flex flex-1 flex-col overflow-x-auto overflow-y-scroll scroll-smooth px-4 pt-4"
-      >
-        <AuiIf condition={(s) => s.thread.isEmpty}>
-          <ThreadWelcome />
-        </AuiIf>
-
-        <ThreadPrimitive.Messages>
-          {() => <ThreadMessage />}
-        </ThreadPrimitive.Messages>
-
-        <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">
-          <ThreadScrollToBottom />
-          <Composer />
-        </ThreadPrimitive.ViewportFooter>
-      </ThreadPrimitive.Viewport>
-    </ThreadPrimitive.Root>
-  );
-};
-
-const ThreadMessage: FC = () => {
-  const role = useAuiState((s) => s.message.role);
-  const isEditing = useAuiState((s) => s.message.composer.isEditing);
-  if (isEditing) return <EditComposer />;
-  if (role === "user") return <UserMessage />;
-  return <AssistantMessage />;
-};
-
-const ThreadScrollToBottom: FC = () => {
-  return (
-    <ThreadPrimitive.ScrollToBottom asChild>
-      <TooltipIconButton
-        tooltip="Scroll to bottom"
-        variant="outline"
-        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"
-      >
-        <ArrowDownIcon />
-      </TooltipIconButton>
-    </ThreadPrimitive.ScrollToBottom>
-  );
-};
-
-const ThreadWelcome: FC = () => {
-  return (
-    <div className="aui-thread-welcome-root mx-auto my-auto flex w-full max-w-(--thread-max-width) grow flex-col">
-      <div className="aui-thread-welcome-center flex w-full grow flex-col items-center justify-center">
-        <div className="aui-thread-welcome-message flex size-full flex-col justify-center px-4">
-          <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">
-            Welcome
-          </h1>
-          <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">
-            How can I help you today?
-          </p>
-        </div>
-      </div>
-      <ThreadSuggestions />
-    </div>
-  );
-};
-
-const ThreadSuggestions: FC = () => {
-  return (
-    <div className="aui-thread-welcome-suggestions grid w-full gap-2 pb-4 @md:grid-cols-2">
-      <ThreadPrimitive.Suggestions>
-        {() => <ThreadSuggestionItem />}
-      </ThreadPrimitive.Suggestions>
-    </div>
-  );
-};
-
-const ThreadSuggestionItem: FC = () => {
-  return (
-    <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">
-      <SuggestionPrimitive.Trigger send asChild>
-        <Button
-          variant="ghost"
-          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"
-        >
-          <SuggestionPrimitive.Title className="aui-thread-welcome-suggestion-text-1 font-medium" />
-          <SuggestionPrimitive.Description className="aui-thread-welcome-suggestion-text-2 text-muted-foreground empty:hidden" />
-        </Button>
-      </SuggestionPrimitive.Trigger>
-    </div>
-  );
-};
-
-const Composer: FC = () => {
-  return (
-    <ComposerPrimitive.Root className="aui-composer-root relative flex w-full flex-col">
-      <ComposerPrimitive.AttachmentDropzone asChild>
-        <div
-          data-slot="composer-shell"
-          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"
-        >
-          <ComposerAttachments />
-          <ComposerPrimitive.Input
-            placeholder="Send a message..."
-            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"
-            rows={1}
-            autoFocus
-            aria-label="Message input"
-          />
-          <ComposerAction />
-        </div>
-      </ComposerPrimitive.AttachmentDropzone>
-    </ComposerPrimitive.Root>
-  );
-};
-
-const ComposerAction: FC = () => {
-  return (
-    <div className="aui-composer-action-wrapper relative flex items-center justify-between">
-      <ComposerAddAttachment />
-      <AuiIf condition={(s) => !s.thread.isRunning}>
-        <ComposerPrimitive.Send asChild>
-          <TooltipIconButton
-            tooltip="Send message"
-            side="bottom"
-            type="button"
-            variant="default"
-            size="icon"
-            className="aui-composer-send size-8 rounded-full"
-            aria-label="Send message"
-          >
-            <ArrowUpIcon className="aui-composer-send-icon size-4" />
-          </TooltipIconButton>
-        </ComposerPrimitive.Send>
-      </AuiIf>
-      <AuiIf condition={(s) => s.thread.isRunning}>
-        <ComposerPrimitive.Cancel asChild>
-          <Button
-            type="button"
-            variant="default"
-            size="icon"
-            className="aui-composer-cancel size-8 rounded-full"
-            aria-label="Stop generating"
-          >
-            <SquareIcon className="aui-composer-cancel-icon size-3 fill-current" />
-          </Button>
-        </ComposerPrimitive.Cancel>
-      </AuiIf>
-    </div>
-  );
-};
-
-const MessageError: FC = () => {
-  return (
-    <MessagePrimitive.Error>
-      <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">
-        <ErrorPrimitive.Message className="aui-message-error-message line-clamp-2" />
-      </ErrorPrimitive.Root>
-    </MessagePrimitive.Error>
-  );
-};
-
-const AssistantMessage: FC = () => {
-  return (
-    <MessagePrimitive.Root
-      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"
-      data-role="assistant"
-    >
-      <div className="aui-assistant-message-content text-foreground px-2 leading-relaxed wrap-break-word">
-        <MessagePrimitive.GroupedParts
-          groupBy={groupPartByType({
-            reasoning: ["group-chainOfThought", "group-reasoning"],
-            "tool-call": ["group-chainOfThought", "group-tool"],
-          })}
-        >
-          {({ part, children }) => {
-            switch (part.type) {
-              case "group-chainOfThought":
-                return <div data-slot="aui_chain-of-thought">{children}</div>;
-              case "group-reasoning":
-                return (
-                  <ReasoningGhostGroup group={part}>
-                    {children}
-                  </ReasoningGhostGroup>
-                );
-              case "group-tool":
-                return <ToolCallGroup group={part}>{children}</ToolCallGroup>;
-              case "text":
-                return <MarkdownText />;
-              case "reasoning":
-                return <Reasoning {...part} />;
-              case "tool-call":
-                return renderOpenCodeTool(part);
-              case "data":
-                return <OpenCodeDataPart {...part} />;
-              default:
-                return null;
-            }
-          }}
-        </MessagePrimitive.GroupedParts>
-        <MessageError />
-      </div>
-
-      <div className="aui-assistant-message-footer mt-1 ml-2 flex">
-        <BranchPicker />
-        <AssistantActionBar />
-      </div>
-    </MessagePrimitive.Root>
-  );
-};
-
-const AssistantActionBar: FC = () => {
-  return (
-    <ActionBarPrimitive.Root
-      hideWhenRunning
-      autohide="not-last"
-      autohideFloat="single-branch"
-      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"
-    >
-      <ActionBarPrimitive.Copy asChild>
-        <TooltipIconButton tooltip="Copy">
-          <AuiIf condition={(s) => s.message.isCopied}>
-            <CheckIcon />
-          </AuiIf>
-          <AuiIf condition={(s) => !s.message.isCopied}>
-            <CopyIcon />
-          </AuiIf>
-        </TooltipIconButton>
-      </ActionBarPrimitive.Copy>
-      <ActionBarPrimitive.Reload asChild>
-        <TooltipIconButton tooltip="Refresh">
-          <RefreshCwIcon />
-        </TooltipIconButton>
-      </ActionBarPrimitive.Reload>
-      <ActionBarMorePrimitive.Root>
-        <ActionBarMorePrimitive.Trigger asChild>
-          <TooltipIconButton
-            tooltip="More"
-            className="data-[state=open]:bg-accent"
-          >
-            <MoreHorizontalIcon />
-          </TooltipIconButton>
-        </ActionBarMorePrimitive.Trigger>
-        <ActionBarMorePrimitive.Content
-          side="bottom"
-          align="start"
-          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"
-        >
-          <ActionBarPrimitive.ExportMarkdown asChild>
-            <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">
-              <DownloadIcon className="size-4" />
-              Export as Markdown
-            </ActionBarMorePrimitive.Item>
-          </ActionBarPrimitive.ExportMarkdown>
-        </ActionBarMorePrimitive.Content>
-      </ActionBarMorePrimitive.Root>
-    </ActionBarPrimitive.Root>
-  );
-};
-
-const UserMessage: FC = () => {
-  return (
-    <MessagePrimitive.Root
-      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"
-      data-role="user"
-    >
-      <UserMessageAttachments />
-
-      <div className="aui-user-message-content-wrapper relative col-start-2 min-w-0">
-        <div className="aui-user-message-content bg-muted text-foreground rounded-2xl px-4 py-2.5 wrap-break-word">
-          <MessagePrimitive.Parts />
-        </div>
-        <div className="aui-user-action-bar-wrapper absolute top-1/2 left-0 -translate-x-full -translate-y-1/2 pr-2">
-          <UserActionBar />
-        </div>
-      </div>
-
-      <BranchPicker className="aui-user-branch-picker col-span-full col-start-1 row-start-3 -mr-1 justify-end" />
-    </MessagePrimitive.Root>
-  );
-};
-
-const UserActionBar: FC = () => {
-  return (
-    <ActionBarPrimitive.Root
-      hideWhenRunning
-      autohide="not-last"
-      className="aui-user-action-bar-root flex flex-col items-end"
-    >
-      <ActionBarPrimitive.Edit asChild>
-        <TooltipIconButton tooltip="Edit" className="aui-user-action-edit p-4">
-          <PencilIcon />
-        </TooltipIconButton>
-      </ActionBarPrimitive.Edit>
-    </ActionBarPrimitive.Root>
-  );
-};
-
-const EditComposer: FC = () => {
-  return (
-    <MessagePrimitive.Root className="aui-edit-composer-wrapper mx-auto flex w-full max-w-(--thread-max-width) flex-col px-2 py-3">
-      <ComposerPrimitive.Root className="aui-edit-composer-root bg-muted ml-auto flex w-full max-w-[85%] flex-col rounded-2xl">
-        <ComposerPrimitive.Input
-          className="aui-edit-composer-input text-foreground min-h-14 w-full resize-none bg-transparent p-4 text-sm outline-none"
-          autoFocus
-        />
-        <div className="aui-edit-composer-footer mx-3 mb-3 flex items-center gap-2 self-end">
-          <ComposerPrimitive.Cancel asChild>
-            <Button variant="ghost" size="sm">
-              Cancel
-            </Button>
-          </ComposerPrimitive.Cancel>
-          <ComposerPrimitive.Send asChild>
-            <Button size="sm">Update</Button>
-          </ComposerPrimitive.Send>
-        </div>
-      </ComposerPrimitive.Root>
-    </MessagePrimitive.Root>
-  );
-};
-
-const BranchPicker: FC<BranchPickerPrimitive.Root.Props> = ({
-  className,
-  ...rest
-}) => {
-  return (
-    <BranchPickerPrimitive.Root
-      hideWhenSingleBranch
-      className={cn(
-        "aui-branch-picker-root text-muted-foreground mr-2 -ml-2 inline-flex items-center text-xs",
-        className,
-      )}
-      {...rest}
-    >
-      <BranchPickerPrimitive.Previous asChild>
-        <TooltipIconButton tooltip="Previous">
-          <ChevronLeftIcon />
-        </TooltipIconButton>
-      </BranchPickerPrimitive.Previous>
-      <span className="aui-branch-picker-state font-medium">
-        <BranchPickerPrimitive.Number /> / <BranchPickerPrimitive.Count />
-      </span>
-      <BranchPickerPrimitive.Next asChild>
-        <TooltipIconButton tooltip="Next">
-          <ChevronRightIcon />
-        </TooltipIconButton>
-      </BranchPickerPrimitive.Next>
-    </BranchPickerPrimitive.Root>
-  );
-};
-
-```
-
 ## components/opencode-data-part.tsx
 
 ```tsx
@@ -1599,6 +1053,42 @@ AskQuestionInline.displayName = "AskQuestionInline";
 
 ```
 
+## components/tools/opencode-tools.tsx
+
+```tsx
+"use client";
+
+import {
+  AskQuestionInline,
+  withOpenCodeToolInteractions,
+} from "./opencode-tool-interactions";
+import { ApplyPatchDiff } from "./tool-ui-apply-patch";
+import { BashTerminal } from "./tool-ui-bash";
+import {
+  EditInline,
+  GlobInline,
+  GrepInline,
+  ReadInline,
+  ToolCallFallback,
+  WebFetchInline,
+  WebSearchInline,
+  WriteInline,
+} from "./tool-ui-inline";
+
+export const ReadTool = withOpenCodeToolInteractions(ReadInline);
+export const EditTool = withOpenCodeToolInteractions(EditInline);
+export const WriteTool = withOpenCodeToolInteractions(WriteInline);
+export const BashTool = withOpenCodeToolInteractions(BashTerminal);
+export const GrepTool = withOpenCodeToolInteractions(GrepInline);
+export const GlobTool = withOpenCodeToolInteractions(GlobInline);
+export const WebSearchTool = withOpenCodeToolInteractions(WebSearchInline);
+export const WebFetchTool = withOpenCodeToolInteractions(WebFetchInline);
+export const ApplyPatchTool = withOpenCodeToolInteractions(ApplyPatchDiff);
+export const AskQuestionTool = withOpenCodeToolInteractions(AskQuestionInline);
+export const FallbackTool = withOpenCodeToolInteractions(ToolCallFallback);
+
+```
+
 ## components/tools/reasoning-ghost.tsx
 
 ```tsx
@@ -2336,6 +1826,42 @@ export const ToolStatusIcon = ({
 
 ```
 
+## components/tools/toolkit.tsx
+
+```tsx
+"use generative";
+
+import { defineToolkit, externalTool } from "@assistant-ui/react";
+import {
+  ApplyPatchTool,
+  AskQuestionTool,
+  BashTool,
+  EditTool,
+  GlobTool,
+  GrepTool,
+  ReadTool,
+  WebFetchTool,
+  WebSearchTool,
+  WriteTool,
+} from "./opencode-tools";
+
+export default defineToolkit({
+  read: { execute: externalTool(), render: ReadTool },
+  edit: { execute: externalTool(), render: EditTool },
+  write: { execute: externalTool(), render: WriteTool },
+  bash: { execute: externalTool(), render: BashTool },
+  grep: { execute: externalTool(), render: GrepTool },
+  glob: { execute: externalTool(), render: GlobTool },
+  webSearch: { execute: externalTool(), render: WebSearchTool },
+  webFetch: { execute: externalTool(), render: WebFetchTool },
+  apply_patch: { execute: externalTool(), render: ApplyPatchTool },
+  ask_question: { execute: externalTool(), render: AskQuestionTool },
+  request_user_input: { execute: externalTool(), render: AskQuestionTool },
+  requestUserInput: { execute: externalTool(), render: AskQuestionTool },
+});
+
+```
+
 ## next.config.ts
 
 ```typescript
@@ -2368,11 +1894,11 @@ export default withAui(nextConfig);
     "@assistant-ui/react-markdown": "workspace:*",
     "@assistant-ui/react-opencode": "workspace:*",
     "@assistant-ui/ui": "workspace:*",
-    "@pierre/diffs": "^1.2.7",
+    "@pierre/diffs": "^1.2.10",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
-    "lucide-react": "^1.17.0",
-    "next": "^16.2.7",
+    "lucide-react": "^1.18.0",
+    "next": "^16.2.9",
     "react": "^19.2.7",
     "react-dom": "^19.2.7",
     "tailwind-merge": "^3.6.0",
@@ -2381,12 +1907,12 @@ export default withAui(nextConfig);
   "devDependencies": {
     "@assistant-ui/next": "workspace:*",
     "@assistant-ui/x-buildutils": "workspace:*",
-    "@tailwindcss/postcss": "^4.3.0",
-    "@types/node": "^25.9.2",
+    "@tailwindcss/postcss": "^4.3.1",
+    "@types/node": "^25.9.3",
     "@types/react": "^19.2.17",
     "@types/react-dom": "^19.2.3",
     "postcss": "^8.5.15",
-    "tailwindcss": "^4.3.0",
+    "tailwindcss": "^4.3.1",
     "tw-animate-css": "^1.4.0",
     "typescript": "^6.0.3"
   }