Agent

A composable component for displaying AI agent configuration with model, instructions, tools, and output schema.

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.

Install using CLI

AI Elements Vue

shadcn-vue CLI

npx ai-elements-vue@latest add agent

Install Manually

Copy and paste the following files into the same folder.

Agent.vue

AgentHeader.vue

AgentContent.vue

AgentInstructions.vue

AgentTools.vue

AgentTool.vue

AgentOutput.vue

index.ts

<script setup lang="ts">
import type { HTMLAttributes } from 'vue'
import { cn } from '@repo/shadcn-vue/lib/utils'

const props = defineProps<{
  class?: HTMLAttributes['class']
}>()
</script>

<template>
  <div
    :class="cn('not-prose w-full rounded-md border', props.class)"
    v-bind="$attrs"
  >
    <slot />
  </div>
</template>

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.

<script setup lang="ts">
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(),
})`
</script>

<template>
  <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>
</template>