# Agent Example

> Example implementation of agent.

A shadcn/ui block from the [@ai-elements](https://ai-sdk.dev/elements) registry, listed on [shadcn.exchange](https://shadcn.exchange/r/ai-elements/example-agent).

- Page, with a live preview: https://shadcn.exchange/r/ai-elements/example-agent
- Screenshot: https://abzjhwgwpdpz7ua5.public.blob.vercel-storage.com/shots/ai-elements/example-agent-light-e32d752fea52ca1b.png
- Registry item: https://ai-sdk.dev/elements/api/registry/example-agent.json
- Listed: 2026-10-13, source last changed 2026-10-13

## Install

```bash
npx shadcn@latest add https://ai-sdk.dev/elements/api/registry/example-agent.json
```

Run it in a project that has shadcn/ui set up. It adds the files below and installs what they depend on.

## Dependencies

- npm packages: `zod`
- Registry items: `https://elements.ai-sdk.dev/agent.json`

## Files

### `registry/default/examples/agent.tsx`

```tsx
"use client";

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

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

const readUrlTool = {
  description: "Read and parse a URL",
  inputSchema: z.object({
    url: z.string().url().describe("The URL to read"),
  }),
};

const summarizeTool = {
  description: "Summarize text into key points",
  inputSchema: z.object({
    maxPoints: z.number().optional().describe("Maximum number of key points"),
    text: z.string().describe("The text to summarize"),
  }),
};

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

const Example = () => (
  <Agent>
    <AgentHeader model="openai/gpt-5.2-pro" name="Research Assistant" />
    <AgentContent>
      <AgentInstructions>
        You are a helpful research assistant. Your job is to search the web for
        information and summarize findings for the user. Always cite your
        sources and provide accurate, up-to-date information.
      </AgentInstructions>
      <AgentTools type="multiple">
        <AgentTool tool={webSearchTool} value="web_search" />
        <AgentTool tool={readUrlTool} value="read_url" />
        <AgentTool tool={summarizeTool} value="summarize" />
      </AgentTools>
      <AgentOutput schema={outputSchema} />
    </AgentContent>
  </Agent>
);

export default Example;
```