Subagent

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 UiTrace with a UiTraceCollapsible for the run and a nested UiTrace for its tool calls.

Installation

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

Usage

<template>
  <UiTrace>
    <UiTraceCollapsible :unmount-on-hide="false">
      <UiTraceCollapsibleTrigger>
        <UiTraceLine>
          <UiTraceIcon>
            <UiIcon name="lucide:circle-check" />
          </UiTraceIcon>
          <UiTraceTitle>Ran the research agent</UiTraceTitle>
        </UiTraceLine>
      </UiTraceCollapsibleTrigger>
      <UiTraceCollapsibleContent class="flex flex-col gap-3">
        <UiTrace>
          <UiTraceLine>
            <UiTraceIcon>
              <UiIcon name="lucide:circle-check" />
            </UiTraceIcon>
            <UiTraceTitle>Ran grep -rn cacheKey scripts</UiTraceTitle>
          </UiTraceLine>
        </UiTrace>
        <p>The cache is keyed on the commit SHA.</p>
      </UiTraceCollapsibleContent>
    </UiTraceCollapsible>
  </UiTrace>
</template>

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.

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 UiTraceDescription after the title.

AI SDK

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 UiTrace. 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".

API Reference

See Trace.