# Agent Dock

> 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.

- Author: [dqnamo](https://21st.dev/@dqnamo)
- License: mit
- Tags: Chat, Dock, AI, Agent, Composer
- npm dependencies: motion, @phosphor-icons/react
- Live preview: https://21st.dev/@dqnamo/components/agent-dock

## Install

```bash
npx shadcn@latest add "https://21st.dev/r/dqnamo/agent-dock?api_key=$API_KEY_21ST"
```

Requires a 21st API key (generate one at https://21st.dev/mcp) passed as `API_KEY_21ST`. Free accounts get a limited number of installs per day; unlimited on a paid plan — see https://21st.dev/pricing.

Full component directory: https://21st.dev/llms.txt · More like this: https://21st.dev/community/components/s/chat.md