Morning Forest
Dawn chorus recorded in Olympic National Park
0:000:00
<Audio id="audio-preview-full" assetId="audio-full" src="https://cdn.pixabay.com/audio/2022/03/10/audio_4dedf5bf94.mp3" title="Morning Forest" description="Dawn chorus recorded in Olympic National Park" artwork="https://images.unsplash.com/photo-1448375240586-882707db888b?w=400&auto=format&fit=crop" durationMs={42000}/>An 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 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 { createResultToolRenderer } from "@/components/tool-ui/shared";export const toolkit: Toolkit = { showAudio: { type: "backend", render: createResultToolRenderer({ render: (parsedResult) => <Audio {...parsedResult} />, }), },};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.