npx tool-agent "integrate the audio component for audio playback with artwork and metadata"npx shadcn@latest add @tool-ui/audioAn audio URL by itself is invisible. No artwork, no title, no way to know what you are about to hear. Audio wraps the browser's native player with album art, title, duration, and source attribution so the track looks intentional rather than dumped into the conversation.
Role: Information. For displaying data without user input. See Design Guidelines for how component roles work.
Run this once from your project root.
npx tool-agent "integrate the audio component for audio playback with artwork and metadata"npx shadcn@latest add @tool-ui/audioRender Audio in your UI with tool-compatible props.
import { Audio } from "@/components/tool-ui/audio";export function Example() { return ( <Audio id="audio-example" assetId="sample-audio" src="https://samplelib.com/lib/preview/mp3/sample-6s.mp3" title="Bell Labs hallway recording" description="Ambient sounds where UNIX, C, and more took shape." artwork="https://images.unsplash.com/photo-1454165205744-3b78555e5572" durationMs={30000} /> );}Registration tells assistant-ui which component to render when a tool returns audio data. Without it, tool results appear as raw JSON.
import { type Toolkit } from "@assistant-ui/react";import { Audio } from "@/components/tool-ui/audio";import { safeParseSerializableAudio } from "@/components/tool-ui/audio/schema";export const toolkit: Toolkit = { showAudio: { type: "backend", render: ({ result }) => { const parsed = safeParseSerializableAudio(result); if (!parsed) { return null; } return <Audio {...parsed} />; }, },};Browser-native play, pause, seek, and volume
Album art or thumbnail displayed beside the player
Title, description, duration, and file size at a glance
Artist, album, or source with an optional link
Prop
Type
Use ToolUI.LocalActions to compose external actions next to Audio.