DocsAI Prompt Input
AI Prompt Input
Ultra-premium conversational AI prompt bar with model selection, attachments, and voice pulse.
On This Page
Ultra-premium conversational AI prompt bar with model selection, attachments, and voice pulse.
An ultra-premium prompt input bar for next-generation AI chat, copilot, and agent workflows. Features auto-expanding textarea, model selector dropdown, attachment chips, voice recording pulse, and morphing submit controls.
Complete list of properties and callbacks available for AiPromptInput.
| Prop | Type | Default | Description |
|---|---|---|---|
| variant | "default" | "glow" | "aurora" | "glass" | "minimal" | "default" | Visual container styling with glow halo, Aurora border, or frosted glassmorphism. |
| size | "sm" | "md" | "lg" | "md" | Overall scale, padding, and font size of the input bar. |
| placeholder | string | "Ask anything or describe what you want to build..." | Custom placeholder text shown inside the textarea. |
| isLoading | boolean | false | Toggles the active state (switches submit arrow to a square stop button). |
| isListening | boolean | false | Activates the microphone pulsing audio waveform state. |
| webSearchEnabled | boolean | false | Whether the live web search toggle button is highlighted. |
| reasoningEnabled | boolean | false | Whether the Deep Reasoning / Deep Think mode toggle is active. |
| value | string | — | Controlled prompt string value. |
| onSubmit | (prompt: string, options) => void | — | Callback fired when the user submits their prompt (via Enter key or submit button). |
Production-ready implementation patterns for modern AI applications.
Full-featured agent bar with file attachments, search toggle, and voice recorder.
import { AiPromptInput } from "nexoreui";
export default function AgentChat() {
const [text, setText] = useState("");
const [loading, setLoading] = useState(false);
return (
<AiPromptInput
variant="glow"
value={text}
onChange={setText}
onSubmit={(prompt) => console.log(prompt)}
isLoading={loading}
webSearchEnabled
onWebSearchToggle={() => {}}
onAttachClick={() => {}}
onVoiceToggle={() => {}}
/>
);
}Compact glowing prompt field tailored for centered landing hero sections and command hubs.
import { AiPromptInput } from "nexoreui";
export default function HeroPrompt() {
return (
<AiPromptInput
variant="aurora"
size="lg"
placeholder="What would you like to build with AI today?"
onSubmit={(prompt) => console.log(prompt)}
onAttachClick={() => {}}
onVoiceToggle={() => {}}
/>
);
}