Forest Canopy
Sunlight filtering through the trees.
Archive.org0:08
Sunlight filtering through the trees.
<Video id="video-preview-poster" assetId="video-poster" src="https://archive.org/download/NatureStockVideo/IMG_9500_.mp4" poster="https://images.unsplash.com/photo-1441974231531-c6227db76b6e?w=900&auto=format&fit=crop" title="Forest Canopy" description="Sunlight filtering through the trees." ratio="16:9" fit="cover" durationMs={8000} createdAt="2025-01-15T08:00:00.000Z" source={{ "label": "Archive.org", "iconUrl": "https://api.dicebear.com/7.x/shapes/svg?seed=archive" }}/>Pasting a video URL into a chat gives the user a clickable link and nothing else. No preview, no playback, no context. Video renders an inline player with a poster image, native controls, and metadata so the user can watch without leaving 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/videoRender Video in your UI with tool-compatible props.
import { Video } from "@/components/tool-ui/video";export function Example() { return ( <Video id="video-example" assetId="sample-video" src="https://samplelib.com/lib/preview/mp4/sample-5s.mp4" poster="https://images.unsplash.com/photo-1518770660439-4636190af475" title="The GUI moment" description="From command lines to windows, icons, menus, and pointers." ratio="16:9" durationMs={128000} /> );}Registration tells assistant-ui which component to render when a tool returns video data. Without it, tool results appear as raw JSON.
import { type Toolkit } from "@assistant-ui/react";import { Video } from "@/components/tool-ui/video";import { createResultToolRenderer } from "@/components/tool-ui/shared";export const toolkit: Toolkit = { showVideo: { type: "backend", render: createResultToolRenderer({ render: (parsedResult) => <Video {...parsedResult} />, }), },};Starts muted for inline previews so it won't surprise the user
Shows a thumbnail before the first play
Uses the browser's built-in play, pause, seek, and fullscreen
Locks to auto, 1:1, 4:3, 16:9, or 9:16
Prop
Type
Use ToolUI.LocalActions to compose external actions next to Video.