Agent for Vue

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 Vue, Ark 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

<script setup lang="ts">
import {
  Agent, AgentContent, AgentHeader, AgentInstructions, AgentOutput,
  AgentTool, AgentTools,
} from "@/components/ui/agent";
</script>

<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 Ark 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:

A tool definition is data, so it needs no AI SDK package in Vue: pass each tool's description and its JSON Schema to AgentTool's tool, as the AI SDK Tools demo does.

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

AI SDK Elements is for React. In Vue, Agent has the same parts and props, so its demos are the place to start.

FAQ

API Reference