Components
A compact control surface for switching between voice, chat, and lightweight agent states without pulling focus from the current screen. The dark dock shows an agent avatar, name, and an animated status line, with Voice and Chat actions (keyboard hints). Clicking Chat expands an inline composer that springs open; submitting a message flips the status to a working state. Built with motion/react, it animates height and status crossfades and respects reduced-motion preferences.
npx shadcn@latest add https://21st.dev/r/dqnamo/agent-dockLoading preview...
"use client";
import { AgentDock } from "@/components/ui/agent-dock";
const avatarSrc =
"https://api.dicebear.com/10.x/initial-face/svg?seed=Zaraaaa&size=80";
export default function Default() {
return (
<div className="flex min-h-screen w-full items-center justify-center bg-white p-8">
<AgentDock
agentName="Zara"
avatarSrc={avatarSrc}
className="w-full max-w-md"
idleStatus="Your hyperaide"
onMessageSubmit={async () => {
await new Promise((resolve) => setTimeout(resolve, 1200));
}}
workingStatus="doing stuff..."
/>
</div>
);
}