Subagent

Displays a subagent run, with its tool calls and result.

Why does image optimization rerun on every deploy?

The cache is keyed on the commit SHA, so every deploy misses it and optimizes all 1,240 images again.

Image optimization reruns because its cache is keyed on the commit SHA, which changes on every deploy. Key the cache on a hash of public/images instead, and unchanged images will be skipped.

"use client"

import * as React from "react"

Subagent is a line for work the agent hands to a subagent. The run is the title, like "Ran the research agent". Open it for the tool calls the subagent made and what it found.

Subagent is built with Trace with a TraceCollapsible for the run and a nested Trace for its tool calls.

Installation

Subagent is built with the Trace, Code Block and Badge components.


pnpm dlx shadcn@latest add trace code-block badge

Usage

import {
  Trace,
  TraceCollapsible,
  TraceCollapsibleContent,
  TraceCollapsibleTrigger,
  TraceIcon,
  TraceLine,
  TraceTitle,
} from "@/components/ui/trace"

<Trace>
  <TraceCollapsible>
    <TraceCollapsibleTrigger>
      <TraceLine>
        <TraceIcon>
          <CircleCheckIcon />
        </TraceIcon>
        <TraceTitle>Ran the research agent</TraceTitle>
      </TraceLine>
    </TraceCollapsibleTrigger>
    <TraceCollapsibleContent keepMounted className="flex flex-col gap-3">
      <Trace>
        <TraceLine>
          <TraceIcon>
            <CircleCheckIcon />
          </TraceIcon>
          <TraceTitle>Ran grep -rn cacheKey scripts</TraceTitle>
        </TraceLine>
      </Trace>
      <p>The cache is keyed on the commit SHA.</p>
    </TraceCollapsibleContent>
  </TraceCollapsible>
</Trace>

Running

While the subagent runs, the line has status="running" and its content shows the tool calls so far. Add the result when the subagent finishes.

Ran grep -rn cacheKey scriptsRunning sed -n 13,15p scripts/optimize-images.ts

import { CircleCheckIcon, LoaderCircleIcon } from "lucide-react"

import {

Details

Put the task the subagent was given at the top of the content, with its model and tools as Badge items. Show how long it ran in a TraceDescription after the title.

anthropic/claude-sonnet-4.5runCommand

Find out why image optimization reruns on every deploy.

Ran grep -rn cacheKey scriptsRan sed -n 13,15p scripts/optimize-images.ts

The cache is keyed on the commit SHA.

import { CircleCheckIcon } from "lucide-react"

import { Badge } from "@/components/ui/badge"

With the AI SDK, a subagent is a tool whose execute yields the subagent's UIMessage as it streams. Render the tool part as the line and part.output.parts as the nested Trace. Map each nested tool part as in Tool.

Each yield is a preliminary output: the part is output-available with preliminary: true. The final output replaces it, so check preliminary before you show "Ran".

Tool part state	`TraceLine` status	Title
`input-streaming`, `input-available`	`"running"` while the chat streams	Running …
`output-available` with `preliminary: true`	`"running"` while the chat streams	Running …
`output-available`	none	Ran …
`output-error`, or a running state after the chat stops	`"error"`	Failed to run …

Migrating from AI SDK Elements

If you added Agent from AI SDK Elements, your project has a components/ai-elements/agent.tsx wrapper. Paste this prompt into your coding agent to rebuild it on Trace, Code Block and Badge. Every export keeps its name and props, so the code that uses it keeps working.

Prompt

Migrate components/ai-elements/agent.tsx from AI SDK Elements to the shadcn/ui Trace, Code Block and Badge components.
 
Keep every export, with the same name and props, so the code that imports it keeps working. Only change how each part renders.
 
1. Install the components: npx shadcn@latest add trace code-block badge
2. Read https://ui.shadcn.com/docs/ai-elements/base/subagent.md and build Subagent the same way.
3. Rebuild each part:
   - Import CodeBlock and CodeBlockContent from @/components/ui/code-block, not from ./code-block.
   - Agent renders a Trace with a TraceCollapsible.
   - AgentHeader renders a TraceCollapsibleTrigger with a TraceLine, a TraceIcon and a TraceTitle with the name, like "Ran the research agent". Show model in a Badge.
   - AgentContent renders a TraceCollapsibleContent with keepMounted.
   - AgentTools renders a Trace, and AgentTool a TraceLine for each tool call, instead of an Accordion.
   - Keep AgentInstructions and AgentOutput, with AgentOutput on CodeBlock.
4. Remove the imports the file no longer uses.
5. Run the type checker and fix any errors.