# ToolGroup
URL: /docs/ui/tool-group

Wrapper for consecutive tool calls with collapsible and styled options.

***

title: ToolGroup
description: Wrapper for consecutive tool calls with collapsible and styled options.
------------------------------------------------------------------------------------

import { ParametersTable } from "@/components/docs/tables/ParametersTable";
import { ToolGroupSample } from "@/components/docs/samples/tool-group-sample";

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

<ToolGroupSample />

## 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

```tsx twoslash title="/components/assistant-ui/thread.tsx"
import { FC, PropsWithChildren } from "react";
import { MessagePrimitive } from "@assistant-ui/react";

const AssistantActionBar: FC = () => null;
const BranchPicker: FC<{ className?: string }> = () => null;

// ---cut---
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>
  );
};
```

## API Reference

### ToolGroup

<ParametersTable
  type="ToolGroupProps"
  parameters={[
  {
    name: "startIndex",
    type: "number",
    required: true,
    description: "The index of the first tool call in the group.",
  },
  {
    name: "endIndex",
    type: "number",
    required: true,
    description: "The index of the last tool call in the group.",
  },
  {
    name: "children",
    type: "ReactNode",
    required: true,
    description: "The rendered tool call components.",
  },
]}
/>

## Examples

### Collapsible Tool Group

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

### Styled Tool Group with Header

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

## Related Components

* [ToolFallback](/docs/ui/tool-fallback) - Default UI for tools without custom renderers
* [PartGrouping](/docs/ui/part-grouping) - Advanced message part grouping (experimental)