AI Prompt Suggestion Chips — Free HTML CSS JS Snippet

A blank text input is the single biggest source of hesitation in any AI chat interface. Users staring at an empty prompt box with a blinking cursor often don't know what the tool is actually good for, or how to phrase a request that will get a useful answer, and that hesitation is a meaningful drop-off point before a user ever experiences the product's value. Prompt suggestion chips solve this directly: a row of pre-written starter prompts sitting above or below the input gives the user a concrete, one-click way to see the product in action, learn the kind of phrasing that works well, and get moving immediately instead of facing an intimidating blank field.

Why this pattern matters for AI-native products in 2026

As AI chat interfaces become the default entry point for an increasing range of products — not just chatbots, but AI-assisted search, document tools, and analytics dashboards — the products that convert casual visitors into active users are the ones that make the *first* interaction trivially easy. Suggestion chips are a low-cost, high-leverage onboarding technique: they double as implicit documentation (showing users what kinds of requests are supported) while removing the cold-start problem entirely. Crucially, the user stays fully in control — clicking a chip fills the input with editable text rather than silently sending a request on the user's behalf, keeping the interaction transparent and undoable, which matters more as AI-native interfaces increasingly need to demonstrate that the user, not the system, initiates every consequential action.

The typewriter fill-in, not an instant jump

The core interaction detail in this snippet is *how* a chip's text lands in the input. Rather than setting input.value = text instantly, fillPrompt() clears the input, focuses it, and then appends one character at a time via setInterval at a 14ms interval, visually composing the prompt into the field the way a person typing quickly would. This small detail matters more than it might seem: an instant value jump can feel like the interface did something *to* the input behind the user's back, while a visible fill-in reads as the interface *drafting a suggestion for you to review and edit*, reinforcing that the text is a starting point, not a locked-in command. After the fill completes, the cursor is explicitly placed at the end of the text via setSelectionRange, so the user can immediately continue typing or editing without having to click back into the field.

Rotating the suggestion pool without disorienting the user

A single static row of three prompts gets stale fast, so this snippet ships three pools of three suggestions each, cycled by a "regenerate suggestions" icon button. Clicking it does two things simultaneously: it spins the refresh icon 180 degrees via a CSS @keyframes animation for immediate feedback that the click registered, and it fades the chip row out and back in (.swapping toggles opacity: 0 and a small translateY) around the moment the new pool's chips are actually swapped into the DOM, so the transition never shows a jarring instant content swap. The 180ms delay between fading out and rendering the next pool is tuned to be long enough to register as a deliberate transition but short enough that the control still feels responsive rather than sluggish.

Auto-growing input and accessibility

The <textarea> auto-grows as content is typed or filled in, using the standard height: auto then scrollHeight measurement technique capped at 120px, so a longer starter prompt does not get clipped or force a scrollbar inside a single-line-looking field. Each chip is a real <button> element, keyboard-focusable and operable, and the regenerate control has an explicit aria-label since it communicates only through an icon. This pattern generalizes well beyond chat: any freeform input paired with a small set of common, well-phrased starting points benefits from the same low-friction, editable-suggestion approach.