vercel__ai-elements/apps/docs/content/components/(code)/agent.mdx

---
title: Agent
description: A composable component for displaying AI agent configuration with model, instructions, tools, and output schema.
path: elements/components/agent
---

The `Agent` component displays an interface for showing AI agent configuration details. It's designed to represent a configured agent from the AI SDK, showing the agent's model, system instructions, available tools (with expandable input schemas), and output schema.

<Preview path="agent" />

## Installation

<ElementsInstaller path="agent" />

## Usage with AI SDK

Display an agent's configuration alongside your chat interface. Tools are displayed in an accordion where clicking the description expands to show the input schema.

```tsx title="app/page.tsx"
'use client';

import { tool } from 'ai';
import { z } from 'zod';
import {
  Agent,
  AgentContent,
  AgentHeader,
  AgentInstructions,
  AgentOutput,
  AgentTool,
  AgentTools,
} from '@/components/ai-elements/agent';

const webSearch = tool({
  description: 'Search the web for information',
  inputSchema: z.object({
    query: z.string().describe('The search query'),
  }),
});

const readUrl = tool({
  description: 'Read and parse content from a URL',
  inputSchema: z.object({
    url: z.string().url().describe('The URL to read'),
  }),
});

const outputSchema = `z.object({
  sentiment: z.enum(['positive', 'negative', 'neutral']),
  score: z.number(),
  summary: z.string(),
})`;

export default function Page() {
  return (
    <Agent>
      <AgentHeader name="Sentiment Analyzer" model="anthropic/claude-sonnet-4-5" />
      <AgentContent>
        <AgentInstructions>
          Analyze the sentiment of the provided text and return a structured
          analysis with sentiment classification, confidence score, and summary.
        </AgentInstructions>
        <AgentTools>
          <AgentTool tool={webSearch} value="web_search" />
          <AgentTool tool={readUrl} value="read_url" />
        </AgentTools>
        <AgentOutput schema={outputSchema} />
      </AgentContent>
    </Agent>
  );
}
```

## Features

- Model badge in header
- Instructions rendered as markdown
- Tools displayed as accordion items with expandable input schemas
- Output schema display with syntax highlighting
- Composable structure for flexible layouts
- Works with AI SDK `Tool` type

## Props

### `<Agent />`

<TypeTable
  type={{
    '...props': {
      description: 'Any props are spread to the root div.',
      type: 'React.ComponentProps<"div">',
    },
  }}
/>

### `<AgentHeader />`

<TypeTable
  type={{
    name: {
      description: 'The name of the agent.',
      type: 'string',
      required: true,
    },
    model: {
      description: 'The model identifier (e.g. "anthropic/claude-sonnet-4-5").',
      type: 'string',
    },
    '...props': {
      description: 'Any other props are spread to the container div.',
      type: 'React.ComponentProps<"div">',
    },
  }}
/>

### `<AgentContent />`

<TypeTable
  type={{
    '...props': {
      description: 'Any other props are spread to the container div.',
      type: 'React.ComponentProps<"div">',
    },
  }}
/>

### `<AgentInstructions />`

<TypeTable
  type={{
    children: {
      description: 'The instruction text.',
      type: 'string',
      required: true,
    },
    '...props': {
      description: 'Any other props are spread to the container div.',
      type: 'React.ComponentProps<"div">',
    },
  }}
/>

### `<AgentTools />`

<TypeTable
  type={{
    '...props': {
      description: 'Any other props are spread to the Accordion component.',
      type: 'React.ComponentProps<typeof Accordion>',
    },
  }}
/>

### `<AgentTool />`

<TypeTable
  type={{
    tool: {
      description: 'The tool object from the AI SDK containing description and inputSchema.',
      type: 'Tool',
      required: true,
    },
    value: {
      description: 'Unique identifier for the accordion item.',
      type: 'string',
      required: true,
    },
    '...props': {
      description: 'Any other props are spread to the AccordionItem component.',
      type: 'React.ComponentProps<typeof AccordionItem>',
    },
  }}
/>

### `<AgentOutput />`

<TypeTable
  type={{
    schema: {
      description: 'The output schema as a string (displayed with syntax highlighting).',
      type: 'string',
      required: true,
    },
    '...props': {
      description: 'Any other props are spread to the container div.',
      type: 'React.ComponentProps<"div">',
    },
  }}
/>