npx tool-agent "integrate the video component for video playback with controls and poster"npx shadcn@latest add @tool-ui/videoPasting 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 tool-agent "integrate the video component for video playback with controls and poster"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 { safeParseSerializableVideo } from "@/components/tool-ui/video/schema";export const toolkit: Toolkit = { showVideo: { type: "backend", render: ({ result }) => { const parsed = safeParseSerializableVideo(result); if (!parsed) { return null; } return <Video {...parsed} />; }, },};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.