Overview
Open Input
Chat-style prompt interface for submitting queries to AI
inputpromptchat
Props
| Prop | Type | Default | Description |
|---|---|---|---|
placeholder | string | undefined | Placeholder text for the input field |
onSubmit | (prompt: string) => void | required | Callback fired when the user submits a prompt |
isLoading | boolean | false | Whether the input is in a loading/disabled state |
suggestions | string[] | undefined | Optional autocomplete suggestion strings |
multiModal | boolean | false | Enable file/image attachment support |
acceptedFileTypes | string[] | undefined | MIME types accepted for file uploads (requires multiModal) |
maxLength | number | undefined | Maximum character length for the prompt input |
Docs
Open Input is the foundational interaction point between users and AI systems. It provides a natural language interface — typically a text field — where users express their intent in their own words. While this feels immediately intuitive, it introduces a classic cold-start challenge: users often don't know what to type after their first message. Effective open input design bridges this gap by combining the free-form prompt area with supportive affordances like scope indicators, contextual hints, and graceful error handling.
Variants
- Chat box — A persistent input anchored at the bottom of a conversation thread. Well suited for iterative, back-and-forth dialogue and follow-up questions.
- Inline composer — A prompt that activates at the cursor position within an editor. Ideal for targeted edits such as rewriting a paragraph or generating content at a specific location.
- Command-style prompt — A single-line field paired with structured flags or controls. Favored by power users who want precision and repeatability.
- Side panel composer — A prompt housed in a dedicated panel that can reference files, tools, and settings. Best for complex, multi-source tasks that require extended context.
Use Cases
- Conversational AI assistants and chatbots
- Document and content generation tools
- Code completion and programming assistants
- Creative tools like image or music generators
- Search interfaces with natural language queries
Best Practices
- Define a clear default scope and make scope changes a single-step action so users always know what the AI is operating on.
- Respond to edge cases with constructive guidance rather than generic error messages or silent failures.
- Don't assume users are skilled prompt engineers — provide wayfinding aids like suggestions, templates, and inline hints.
- Keep advanced controls accessible without cluttering the default view; progressive disclosure works well here.
- Maintain user agency at every stage — always surface options for parameters, model selection, and output formatting.