| UI or UX | UI + UX - Primary editable input surface for composing and submitting an AI request | UI + UX - AI prompt starter surface | UI + UX - Modal command surface | UI + UX - Suggested-query surface | UI + UX - Multi-line freeform writing field |
| UI guidance | Render the prompt box as a labelled, editable composer with visible draft area, send control, context chips, attachment controls, model or mode indicator when relevant, character or token boundary feedback, and clear disabled or blocked-send reasons. | Render contextual prompt starter cards or chips with a task label, editable prompt text, capability boundary, selected state, disabled or stale state, and explicit send action. | Render a compact dialog-like command surface with a search input, current scope, typed command mode, active result, command metadata, and empty state. | Render a search field with query suggestions, active option, selected suggestion, and no-suggestion state. | Render a persistent label, enough visible rows for the expected answer, optional hint, readable multiline text, visible focus state, and nearby error or count text associated with the textarea. |
| UX guidance | Use a prompt box when users need to author a natural-language request for AI generation, transformation, analysis, or automation and must remain in control of the exact request being submitted. | Help users discover useful AI requests while preserving control over the exact prompt that is sent. | Accelerate expert navigation and repeated actions across a large product while preserving ordinary navigation for novice and low-frequency users. | Help users formulate better search queries without forcing a choice. | Use textarea when users need to write or paste sentences, paragraphs, explanations, notes, or comments that may wrap across lines. |
| Good UI | An assistant composer labels the selected source as Contract draft, shows Attach file, Use selected text, Format: table, and Send, and blocks sending when the referenced file is no longer available. | Each prompt starter shows an action label, full prompt preview, and boundary note such as uses selected thread only. | Centered command surface with input, shortcut hint, scope chip, grouped commands, command type labels, and a visible active row. | Suggestions appear directly below the search field with active row, readable labels, and optional matched text. | A more-detail field has a visible question, sensitive-data hint, five visible rows, wrapping text, remaining-character count, and an error directly above the textarea when needed. |
| Bad UI | A blank AI field shows only Ask me anything and sends vague requests with hidden page context. | Three tiny chips labeled summarize, improve, and more with no context or affordance. | Huge branded modal that buries the input below decorative content. | Suggestions overlay unrelated content without a dismiss path. | A paragraph question is squeezed into a single-line input that hides most of the answer. |
| Good UX | A user selects a policy paragraph, writes Summarize risks for a non-lawyer, sees Selected text and Output: bullets chips, submits, then edits and resends the exact prompt after the first answer is too broad. | Selecting a starter loads a draft, moves focus to the prompt editor, and lets the user adjust scope before sending. | Keyboard shortcut or visible trigger opens the palette, focus lands in the command input, arrows move the active row, and Enter activates the highlighted safe command. | Users can keep typing, choose a suggestion, dismiss suggestions, or submit their own query. | A user writes two paragraphs, sees remaining characters update, submits, and the exact line breaks and wording are preserved. |
| Bad UX | A user presses Enter expecting a new line and accidentally sends an unfinished prompt to an external model. | Clicking a suggestion immediately runs a consequential task without review. | Palette is the only way to reach important navigation. | Auto-submitting the top suggestion. | A user writes a long explanation, hits submit, and the product clears the entire draft after a length error. |
| Best fit | Users must write or revise an AI request before generation, analysis, transformation, or automation begins. | The AI surface supports open-ended requests and users need examples of useful, supported tasks. | Users need to traverse a broad product surface quickly. | The system can predict likely queries. | Users need to write sentences, paragraphs, comments, explanations, notes, or descriptions. |
| Avoid when | The task is better expressed as a fixed form, button, or command with known parameters. | The user must provide fixed required fields that are clearer as a form. | The app has only a few obvious actions. | Suggestions are low quality or biased toward irrelevant content. | The answer is a short one-line value. |
| Required state | Empty prompt state with label, helpful instruction, and no implied hidden submission. | Initial state with contextual prompt starters and capability or source boundary notes. | Closed state with discoverable trigger. | No input state. | Empty untouched state with visible label and optional hint. |
| Accessibility burden | Provide a programmatic label for the prompt editor and named controls for send, attach, remove context, clear, retry, and cancel. | Expose suggestions as named buttons, list items, or cards with clear keyboard focus and selected state. | Use dialog semantics with a clear name and modal behavior when the rest of the page is inert. | Expose the suggestions list and active option. | Associate the textarea with a visible label that states the writing prompt. |
| Common misuse | Showing Ask anything as the only instruction while hiding what sources and tools the model can use. | Showing generic chips such as summarize, improve, or make better with no object-specific context. | Hiding basic navigation behind a keyboard-only palette. | Auto-submitting the top suggestion without confirmation. | Using a single-line input for paragraph answers. |