ToolGroup

Overview

The ToolGroup component wraps consecutive tool-call message parts, enabling you to create custom presentations for grouped tool calls such as collapsible sections and custom styling.

Use it in your application

Pass the ToolGroup component to the MessagePrimitive.Parts component

/components/assistant-ui/thread.tsx

const ToolGroup: FC<
  PropsWithChildren<{ startIndex: number; endIndex: number }>
> = ({ startIndex, endIndex, children }) => {
  const toolCount = endIndex - startIndex + 1;

  return (
    <details className="my-2">
      <summary className="cursor-pointer font-medium">
        {toolCount} tool {toolCount === 1 ? "call" : "calls"}
      </summary>
      <div className="space-y-2 pl-4">{children}</div>
    </details>
  );
};

const AssistantMessage: FC = () => {
  return (
    <MessagePrimitive.Root className="...">
      <div className="...">
        <MessagePrimitive.Parts components={{ ToolGroup }} />
      </div>
      <AssistantActionBar />

      <BranchPicker className="..." />
    </MessagePrimitive.Root>
  );
};

Props

The ToolGroup component receives the following props:

startIndex: The index of the first tool call in the group
endIndex: The index of the last tool call in the group
children: The rendered tool call components

Examples

Collapsible Tool Group

const ToolGroup: FC<
  PropsWithChildren<{ startIndex: number; endIndex: number }>
> = ({ startIndex, endIndex, children }) => {
  const toolCount = endIndex - startIndex + 1;

  return (
    <details className="my-2">
      <summary className="cursor-pointer font-medium">
        {toolCount} tool {toolCount === 1 ? "call" : "calls"}
      </summary>
      <div className="space-y-2 pl-4">{children}</div>
    </details>
  );
};

Styled Tool Group with Header

const ToolGroup: FC<
  PropsWithChildren<{ startIndex: number; endIndex: number }>
> = ({ startIndex, endIndex, children }) => {
  return (
    <div className="bg-muted/50 my-2 rounded-lg border p-4">
      <div className="text-muted-foreground mb-2 text-sm">
        Tool execution #{startIndex + 1}-{endIndex + 1}
      </div>
      <div className="space-y-2">{children}</div>
    </div>
  );
};