import { ProgressTracker } from "@/components/tool-ui/progress-tracker";export function Example() {  return (    <ProgressTracker      id="progress-tracker-example"      steps={[        {          id: "build",          label: "Building",          description: "Compiling TypeScript and bundling assets",          status: "completed",        },        {          id: "test",          label: "Running Tests",          description: "147 tests across 23 suites",          status: "in-progress",        },        {          id: "deploy",          label: "Deploy to Production",          description: "Upload to edge nodes",          status: "pending",        },      ]}      elapsedTime={43200}      responseActions={[{ id: "cancel", label: "Cancel", variant: "outline" }]}      onResponseAction={(actionId) => console.log(actionId)}    />  );}

Key Features

Step Statuses

Each step has one of four statuses:

• Pending — Not yet started (empty circle)
• In-progress — Currently executing (animated spinner)
• Completed — Successfully finished (filled checkmark)
• Failed — Encountered an error (filled X icon)

The component automatically highlights the current step (in-progress or first pending) with a subtle background and aria-current="step" for accessibility.

Receipt Pattern

Use the choice prop to render a terminal state after an operation completes, fails, or is cancelled. The receipt displays the full step history with an outcome indicator, which works well in conversation history.

Receipt features:

• Displays all steps with final statuses and connecting lines
• Shows elapsed time badge at the top (if provided)
• Outcome indicator in top-right: green check (success), red alert (failure), gray check (cancelled)
• Supports success, partial, failed, and cancelled outcomes
• Read-only with no action buttons
• Uses role="status" for screen reader announcements

Elapsed Time

Pass elapsedTime in milliseconds to display a timer badge. Automatically formatted as:

• Under 60 seconds: 3.4s
• Over 60 seconds: 2m 15s

<ProgressTracker  id="elapsed-time-example"  steps={[    { id: "parse", label: "Parse CSV", status: "completed" },    { id: "validate", label: "Validate Records", status: "in-progress" },    { id: "import", label: "Import to Database", status: "pending" },  ]}  elapsedTime={247800}/>

Source and Install

Copy components/tool-ui/progress-tracker and the shared directory into your project. The shared folder contains utilities used by all Tool UI components. The tool-ui directory should sit alongside your shadcn ui directory.

Prerequisites

This component requires the following shadcn/ui components:

pnpm dlx shadcn@latest add button

Directory Structure

Download

• Shared Dependencies (GitHub) (ZIP)
• Progress Tracker (GitHub) (ZIP)

Usage

"use client";import { makeAssistantTool } from "@assistant-ui/react";import {  ProgressTracker,  ProgressTrackerErrorBoundary,  parseSerializableProgressTracker,  SerializableProgressTrackerSchema,  type SerializableProgressTracker,} from "@/components/tool-ui/progress-tracker";export const ProgressTrackerTool = makeAssistantTool<SerializableProgressTracker>({  toolName: "trackProgress",  description: "Display real-time progress for multi-step operations",  parameters: SerializableProgressTrackerSchema,  render: ({ args, toolCallId }) => {    if (!(args as any)?.steps) return null;    const data = parseSerializableProgressTracker({      ...args,      id: (args as any)?.id ?? `progress-tracker-${toolCallId}`,    });    return (      <ProgressTrackerErrorBoundary>        <ProgressTracker          {...data}          onResponseAction={async (actionId) => {            if (actionId === "cancel") {              console.log("Cancelled operation");            }          }}        />      </ProgressTrackerErrorBoundary>    );  },});

Mount <ProgressTrackerTool /> under <AssistantRuntimeProvider> to register the tool and its UI.

Props

ProgressStep Schema

ToolUIReceipt Schema

Accessibility

• Semantic <article> with role="status" and aria-live="polite" for live updates
• aria-busy indicates when an operation is in progress
• aria-current="step" marks the currently active step
• Steps rendered as semantic list (<ul> / <li>)
• Keyboard navigation: Tab to focus action buttons, Enter or Space to activate
• All animations respect prefers-reduced-motion
• Text is unselectable to prevent accidental highlighting during status changes