AI Prompt Input

Ultra-premium conversational AI prompt bar with model selection, attachments, and voice pulse.

PreviousInteractive Code Block

NextCommand

On This Page

Quick ActionsProject StudioNew Nexore Make (AI)Source on GitHub

AI Prompt Input

Ultra-premium conversational AI prompt bar with model selection, attachments, and voice pulse.

AI Prompt Input

New

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.

Interactive Playground

Live CanvasInteractive

Controls(6)

variant

select

Visual container preset with glow halo or frosted backdrop.

size

select

Dimension scale and text size.

placeholder

text

Text input placeholder.

isLoading

boolean

Toggle state:

Toggles generation state (morphs send to stop button).

webSearchEnabled

boolean

Toggle state:

Enables web search pill highlight.

reasoningEnabled

boolean

Toggle state:

Enables Deep Think pill highlight.

Generated JSX

Source

import { AiPromptInput } from "nexoreui"

<AiPromptInput />

API Reference

Complete list of properties and callbacks available for AiPromptInput.

API Reference (Props)

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

Real-World Examples

Production-ready implementation patterns for modern AI applications.

Multimodal Copilot Bar

Full-featured agent bar with file attachments, search toggle, and voice recorder.

design_system.pdf(2.4 MB)

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={() => {}}
    />
  );
}

Floating Aurora Prompt Bar

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={() => {}}
    />
  );
}

PreviousInteractive Code Block

NextCommand

On This Page

Quick ActionsProject StudioNew Nexore Make (AI)Source on GitHub

AI Prompt Input

New

Interactive Playground

Live CanvasInteractive

Controls(6)

variant

select

Visual container preset with glow halo or frosted backdrop.

size

select

Dimension scale and text size.

placeholder

text

Text input placeholder.

isLoading

boolean

Toggle state:

Toggles generation state (morphs send to stop button).

webSearchEnabled

boolean

Toggle state:

Enables web search pill highlight.

reasoningEnabled

boolean

Toggle state:

Enables Deep Think pill highlight.

Generated JSX

Source

import { AiPromptInput } from "nexoreui"

<AiPromptInput />

API Reference

Complete list of properties and callbacks available for AiPromptInput.

API Reference (Props)

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

Real-World Examples

Production-ready implementation patterns for modern AI applications.

Multimodal Copilot Bar

Full-featured agent bar with file attachments, search toggle, and voice recorder.

design_system.pdf(2.4 MB)

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={() => {}}
    />
  );
}

Floating Aurora Prompt Bar

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={() => {}}
    />
  );
}