Skip to content

Subagent

An agent the main agent handed work to: its model, its status, the steps it’s taking, its tools and what it returns.

Sourcecomponents/subagent.tsx
Researcherclaude-sonnet-5-5Running
Instructions
Find three accessible pricing tables and note how each one marks the recommended plan.
Steps
Searched “accessible pricing table”1.2sReading w3.org, RunningCompare the three tables, Not started
Tools

Output schema
type Result = {  tables: Array<{ url: string; recommended: string }>;};
Copy editorclaude-haiku-4-5Done

Usage

Subagent usage
import { Search } from "lucide-react";import { Subagent, SubagentContent, SubagentHeader, SubagentInstructions, SubagentOutput, SubagentSteps, SubagentTool, SubagentTools } from "@/components/subagent";import { Trace, TraceIcon, TraceLine, TraceTitle } from "@/components/trace";
export function SubagentUsage() {  return (    <Subagent>      <SubagentHeader name="Researcher" model="claude-sonnet-5-5" status="running" />      <SubagentContent>        <SubagentInstructions>Find three competitors’ pricing pages and list their plans.</SubagentInstructions>        <SubagentSteps>          <Trace>            <TraceLine status="running">              <TraceIcon>                <Search />              </TraceIcon>              <TraceTitle>Searching the web</TraceTitle>            </TraceLine>          </Trace>        </SubagentSteps>        <SubagentTools>          <SubagentTool            value="search"            name="web_search"            tool={{ description: "Search the web", inputSchema: { type: "object", properties: { query: { type: "string" } } } }}          />        </SubagentTools>        <SubagentOutput schema={"type Result = { plans: { name: string; price: string }[] }"} />      </SubagentContent>    </Subagent>  );}

When to use

Use when

An agent the main agent handed work to: its model, run status, instructions, tools, output schema, and its steps as a Trace inside

Don’t use when

One unit of work without its own model or tools (use Task)