CleenUI · AI · AIInput

AIInput

Pro

AI-augmented single-line input that suggests, autocompletes, or rewrites as the user types.

storybook.cleenui.com · ai-aiinput--top
Open in new window

About AIInput

AIInput looks and behaves like a standard Input until the user pauses typing — then ghost-text suggestions appear inline, completable with Tab. The model behind the suggestions is configurable per-component, as is the prompt template and context binding.

Use it for short fields where AI assistance feels like a quality-of-life win rather than a distraction: title fields, search queries, command bars. The suggestion engine respects the user's typing speed and a debounce window to avoid hammering the model on every keystroke.

When to use it

  • Title and headline fields with autocomplete suggestions.
  • Search bars that suggest completed queries.
  • Command-bar inputs with action prediction.
  • Field-level smart corrections on names and addresses.

Common props

Prop
Type
Description
model
string
LLM identifier (e.g. "claude-sonnet-4").
prompt
string
Prompt template; supports {context} interpolation.
context
object
Variables interpolated into the prompt.
debounceMs
number
Delay before requesting a suggestion.
onAccept
(suggestion: string) => void
Fires when the user accepts a suggestion.
⚡ Already in an AI editor?

Set up CleenUI in your tool.

Skip the manual import — ask your AI agent to build with this component. The Builder skill knows its props, variants, and idioms.

Live demo

See CleenUI running before you talk to us.

Configure a demo environment in about twenty seconds — theme, spacing, the modules you care about, sample data for your industry — then launch the full dashboard in your browser. Nothing to install, no signup.

  • 20 sec setup
  • 15 themes
  • 20 modules
  • 80 industries
Pick a theme to start with