Agent status

Shows the current step of an agent and its state.

Checking the documentationSearching for the relevant sectionWorking

agent-status-demo.tsx

"use client";import { AgentStatus } from "@/components/vip-ui/agent-status";export function AgentStatusDemo() {  return (    <AgentStatus      className="w-full max-w-md"      label="Checking the documentation"      detail="Searching for the relevant section"      state="working"    />  );}

Installation

CLI

Manual

The CLI adds the files, packages, theme variables, and Tailwind plugin that this component uses. Before you run it, set up your project.

npm

yarn

pnpm

bun

pnpm dlx shadcn@latest add https://vip-ui.dev/r/vip-agent-status.json

States

Screen readers announce each change.

Planning the next stepChoosing where to lookThinkingReading the docsOpening the disclosure guideWorkingAnswer readyTwo sources attachedDoneSource unavailableTry again or choose another sourceFailed

agent-status-states-demo.tsx

import { AgentStatus } from "@/components/vip-ui/agent-status";export function AgentStatusStatesDemo() {  return (    <div className="grid w-full max-w-md gap-3">      <AgentStatus        state="thinking"        label="Planning the next step"        detail="Choosing where to look"      />      <AgentStatus        state="working"        label="Reading the docs"        detail="Opening the disclosure guide"      />      <AgentStatus        state="complete"        label="Answer ready"        detail="Two sources attached"      />      <AgentStatus        state="error"        label="Source unavailable"        detail="Try again or choose another source"      />    </div>  );}

API reference

state: "thinking" | "working" | "complete" | "error"Required: Sets the icon and the state text. Thinking and working animate unless reduced motion is on.
label: stringRequired: The current step. Screen readers announce changes.
detail: string: Text below the label.