Sub-agentsNew

$pnpm dlx shadcn@latest add @nextui/sub-agents

1{
2  "registries": {
3    "@nextui": {
4      "url": "https://nextui.dev/r/{name}.json",
5      "headers": { "Authorization": "Bearer ${NEXTUI_TOKEN}" }
6    }
7  }
8}

1"use client";
2
3import { SubAgents, type SubAgent } from "@/components/nextui/sub-agents";
4
5// Render the parts your orchestrator streams. One way with AI SDK 7: a "delegate"
6// tool per sub-agent run, whose output is a stream of preliminary results
7// ({ status, step, toolCalls }) and a final one with the answer.
8export function Delegation({ parts }: { parts: { toolCallId: string; state: string; input: { name: string; task: string }; output?: { step?: string; toolCalls?: number; result?: string; durationMs?: number } }[] }) {
9  const agents: SubAgent[] = parts.map((p) => ({
10    id: p.toolCallId,
11    name: p.input.name,
12    task: p.input.task,
13    status: p.state === "output-error" ? "error" : p.state === "output-available" && p.output?.result ? "done" : p.output ? "running" : "queued",
14    step: p.output?.step,
15    toolCalls: p.output?.toolCalls,
16    duration: p.output?.durationMs,
17    result: p.output?.result,
18  }));
19
20  return <SubAgents title="Research Q3 competitors" agents={agents} />;
21}