AI Prompt Composer — Chat Input HTML CSS JS Snippet

Every AI product needs a great prompt composer — the input box where users type, attach context, pick a model, and send. It looks simple but has real interaction depth: the textarea must grow with the content (then cap and scroll), Enter should send while Shift+Enter inserts a newline, a counter should track length and approximate tokens, attachments need to be added and removed, and Send must be disabled when there is nothing to send. This snippet implements all of it in plain HTML, CSS, and vanilla JavaScript.

Auto-growing textarea

onInput resets the textarea height to auto and sets it to scrollHeight, capped at a max (180px) after which it scrolls. Resetting to auto first is the key trick — without it the textarea can only ever grow, never shrink when you delete lines. This gives the now-standard composer feel: one line to start, expanding smoothly as you type a paragraph, then scrolling for very long prompts.

Enter to send, Shift+Enter for newline

onKey intercepts Enter: pressing it alone calls send (and preventDefault stops the newline), while Shift+Enter falls through to insert a line break. This is the convention users expect from chat and AI interfaces, and getting it right is what makes the composer feel native.

Live character and token counter

onInput updates a counter showing characters against a MAX and an approximate token count (Math.ceil(length / 4) — the rough chars-per-token heuristic). It turns red past the limit and the Send button disables, mirroring how real AI apps cap context length.

Model picker and attachments

A model pill cycles through options (Opus 4.8, Sonnet 4.6, Haiku 4.5) on click — the model-selector affordance every multi-model app has. The attach button adds removable file chips that animate in with a pop; updateSend enables Send when there is either text or an attachment, so you can send a file with no message. Each chip has a × that removes it and re-evaluates the Send state.

Send and reset

send clears the text, collapses the textarea, removes attachments, resets the counter, disables Send, and shows a confirmation toast naming the chosen model — standing in for dispatching the message. The whole box lights up with a focus ring via :focus-within so the composite reads as one control.

Replace send with your real API call (stream the response into a message list) and you have a production composer. Pair this with an AI chat interface for the conversation view, a chat UI for messaging, or an auto-resize textarea for simpler inputs.