Agent for React

One card says what an agent is: its name and model, the instructions it runs on, the tools it can call and what it returns.

Use it where people build, review or pick agents: a settings page, a team of agents side by side, the docs for an agent you ship. Each tool is a row that opens into its input schema, and the schemas show in a Code Block. Agent shows the setup before anything runs; Subagent shows a run that already happened, its tool calls and what it found. In React, Base UI runs the tool list, so its rows open from the keyboard.

Installation

The install adds Accordion for the tools, Badge for the model, and Code Block with its highlighter for the schemas.

Anatomy

Agent
├── AgentHeader (its name and model)
└── AgentContent
    ├── AgentInstructions
    ├── AgentTools
    │   └── AgentTool (one per tool, opens into its schema)
    └── AgentOutput

Usage

import {
  Agent, AgentContent, AgentHeader, AgentInstructions, AgentOutput,
  AgentTool, AgentTools,
} from "@/components/ui/agent";

<Agent>
  <AgentHeader model="gpt-4o" name="Research Assistant" />
  <AgentContent>
    <AgentInstructions>Search the web and cite every source.</AgentInstructions>
    <AgentTools>
      <AgentTool
        tool={{
          description: "Search the web",
          jsonSchema: { properties: { query: { type: "string" } }, type: "object" },
        }}
        value="search"
      />
    </AgentTools>
    <AgentOutput schema="interface Result { answer: string }" />
  </AgentContent>
</Agent>

Accessibility

• Each tool's row is a button with aria-expanded, and its description is the button's name.
• A schema scrolls inside its block, and the block can take focus, so a long schema scrolls from the keyboard. Its copy button shows on focus as well as on hover.
• Schemas always read left to right. The card itself follows the page direction.
• The bot icon is hidden from assistive tech: the name says which agent it is.

Demos

Controlled

Three tools of a support agent, one open, with an Expand all button in the header. AgentTools takes the props of Base UI's accordion, so the demo keeps which tools are open and sets them all at once. Whatever you pass as children to AgentHeader goes after the name, here the button. Open a tool from code when the reader came to see that one, from a link or a failed call.

Team

Three agents in a column, each with its model and the number of tools it has. A card without AgentTools or AgentOutput shows only what it has, here the instructions. Use it to compare agents that share a task, such as a researcher, a writer and a reviewer. Keep each one's instructions short enough to read in the card.

AI SDK Tools

Two tools written the way the AI SDK writes them, description and an inputSchema wrapped by jsonSchema(), and an output schema in JSON. AgentTool reads jsonSchema, then inputSchema, and unwraps the helper's wrapper, so a tools record renders as it is. language on AgentOutput sets its highlighting: TypeScript by default, json here.

AI SDK

A tool from the AI SDK's tool() is a description and an input schema, which is what AgentTool takes. Map the record you hand the model, keyed by name:

import { jsonSchema, tool } from "ai";

const tools = {
  getWeather: tool({
    description: "Get the current weather for a city",
    inputSchema: jsonSchema<{ city: string }>({
      properties: { city: { type: "string" } },
      required: ["city"],
      type: "object",
    }),
  }),
};

export function WeatherAgentTools() {
  return (
    <AgentTools>
      {Object.entries(tools).map(([name, definition]) => (
        <AgentTool key={name} tool={definition} value={name} />
      ))}
    </AgentTools>
  );
}

A Zod schema isn't JSON Schema yet: convert it first, with z.toJSONSchema(schema) in Zod 4, and pass the result as jsonSchema. Show the model id you pass to the provider in AgentHeader's model, and the system prompt in AgentInstructions.

Migrating from AI SDK Elements

If you added Agent from AI SDK Elements (opens in a new tab), your project has components/ai-elements/agent.tsx. Install Agent from this page, change the imports from @/components/ai-elements/agent to @/components/ui/agent, and delete the old file. The parts keep their names and props. What changes:

• tool takes any object with a description and a jsonSchema or inputSchema, so the AI SDK's Tool still fits, and the file no longer imports ai.
• Schemas show in Code Block, highlighted, with a copy button. AgentOutput takes language, TypeScript by default.
• AgentInstructions, AgentTools and AgentOutput take label for their headings, and AgentHeader renders its children after the model.

AgentTools is Base UI's Accordion: multiple is on by default, so drop type="multiple". A controlled list takes value and onValueChange, which gets the open values.

FAQ

API Reference