ToolGroup

Wrapper for consecutive tool calls with collapsible and styled options.

A wrapper component that groups consecutive tool calls together, allowing you to display them in a collapsible or styled container.

3 tool calls

Used tool: get_weather

Getting Started

The ToolGroup component is defined inline in your thread component. Here's how to add it:

Use it in your application

Pass the ToolGroup component to the MessagePrimitive.Parts component

/components/assistant-ui/thread.tsx

const : <
  <{ : number; : number }>
> = ({ , ,  }) => {
  const  =  -  + 1;

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

const :  = () => {
  return (
    <. ="...">
      < ="...">
        <. ={{  }} />
      </>
      < />

      < ="..." />
    </.>
  );
};

API Reference

ToolGroup

ToolGroupProps

startIndex:

number

The index of the first tool call in the group.

endIndex:

number

The index of the last tool call in the group.

children:

ReactNode

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>
  );
};

ToolFallback - Default UI for tools without custom renderers
PartGrouping - Advanced message part grouping (experimental)