# Ai Chat Input

> This AI Chat Input component with Popover Commands is an enhanced input interface inspired by ChatGPT-style chat boxes, designed using shadcn UI. It provides a smooth and modern typing experience while supporting advanced features like trigger-based commands. When users type the / key, a popover appears, showing a list of available commands (e.g., Insert Emoji, Attach File, Summarize, Generate Code). Instead of inserting options directly, users can preview and select from the menu, ensuring better control and flexibility. The component also includes a smiley icon for quick emoji access, making conversations more expressive. With its responsive design and support for both light and dark themes, this component is highly reusable, customizable, and easy to integrate into AI chat systems, messaging dashboards, or productivity apps. It balances simplicity and functionality, offering a familiar yet feature-rich user experience.

- Author: [Ruixen UI](https://21st.dev/@ruixen.ui)
- Library: [Ruixen UI](https://21st.dev/@ruixen.ui/library/ruixen-ui)
- License: unknown
- npm dependencies: lucide-react
- Live preview: https://21st.dev/@ruixen.ui/components/ai-chat-input

## Install

```bash
npx shadcn@latest add "https://21st.dev/r/ruixen.ui/ai-chat-input?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