# AI Input

> AiInput – Smart Input Component for AI Interaction The AiInput component is a sleek, responsive, and user-friendly input box built with Next.js, React, Framer Motion, and Tailwind CSS. It provides an enhanced interface for interacting with AI assistants like a chatbot, with support for text input, image upload, and a toggle for search/ask modes.  🔧 Features Auto-Resizing Textarea Dynamically adjusts height between MIN_HEIGHT (48px) and MAX_HEIGHT (164px) as the user types, ensuring a clean UI without scrollbars.  Image Upload & Preview Allows users to attach an image using a hidden file input and preview it instantly with the option to remove it.  Animated Placeholder Smooth transitions between placeholder texts:  “Search the web…” when in search mode  “Ask 21st.dev…” when in question mode  Mode Toggle (Search ↔ Ask) A toggle button powered by Framer Motion lets users switch between "Search" and "Ask AI" functionalities with an animated globe icon.  Send Button Submits the input on pressing Enter (without Shift) or by clicking the send icon. After submission, the textarea resets.  Responsive Design & Accessibility  Uses accessible components and semantic HTML  Optimized for dark and light themes  Mobile-friendly layout  🧩 Custom Hook: useAutoResizeTextarea A reusable hook that auto-resizes a <textarea> based on content and screen resize events. It exposes:  textareaRef: to bind with the Textarea  adjustHeight(): to programmatically resize on input change  🔍 Technologies Used React (Hooks): for state, refs, and effect handling  Next.js: for server-rendered React  Tailwind CSS: utility-first styling  Framer Motion: smooth animations for placeholder and toggle  Lucide Icons: modern icon set for UI interactions  Next/Image: optimized image loading for the preview  🚀 Ideal Use Cases AI chatbot interface  Smart input boxes with contextual behavior  Apps requiring mixed input (text + file) with dynamic UI

- Author: [Sonu](https://21st.dev/@uniquesonu)
- License: unknown
- npm dependencies: next, lucide-react, framer-motion
- Live preview: https://21st.dev/@uniquesonu/components/ai-input

## Install

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