Skip to content

Tool Chips

Compact chips for the tools an agent calls, with running, done and failed states.

orders.search14 results, done
catalog.list, running
stock.checktimed out, failed

import { ToolChips } from '@brand-studio/ui';

export default function ToolChipsDemo() {
  return (
    <ToolChips
      tools={[
        { id: '1', name: 'orders.search', detail: '14 results', status: 'done' },
        { id: '2', name: 'catalog.list', status: 'running' },
        { id: '3', name: 'stock.check', detail: 'timed out', status: 'error' },
      ]}
    />
  );
}

Installation

pnpm add @brand-studio/ui

npm install @brand-studio/ui

yarn add @brand-studio/ui

bun add @brand-studio/ui

Install the peer dependencies
```
npm install react react-dom
```
Import the stylesheet once
```
import '@brand-studio/ui/styles.css';
```

Wrap your app in a brand theme

import { BrandTheme, ToolChips } from '@brand-studio/ui';
import brand from './brand.json';

<BrandTheme palette={brand.tokens} mode="system">
  {/* your app */}
</BrandTheme>

Usage

import { ToolChips } from '@brand-studio/ui';

<ToolChips tools={[{ id: '1', name: 'orders.search', status: 'done' }]} />

Accessibility

The list is a polite live region, so status changes are announced.
Each chip spells out its status for screen readers.

API Reference

Prop	Type	Default
`tools`	`ToolCall[]`	–
`className?`	`string`	`''`