Prompt Composer
AI input surface with a model chip, attach and slash command buttons, a token counter, and a keyboard hinted send button.
AI input surface with a model chip, attach and slash command buttons, a token counter, and a keyboard hinted send button.
Search blocks by description or jump to a page.
The source for every Application block is included with Basic and Pro. Pick a plan to copy the code.
Already purchased? Log in
Prompt Composer is the input surface that sits below the conversation thread. A toolbar row carries the Acme Balanced model chip, an Attach affordance, and a slash Command button separated by a hairline divider. The body shows a placeholder prompt in italic muted text. The footer row pairs a mini progress bar token counter, 1,240 / 8,000, with the Send button and its Enter Kbd hint. An honest note beneath states that drafts stay local until sent and nothing typed here is logged before submit.
Model label, token counts, and the used percentage are named constants above the component. The token bar gives users a sense of remaining context before they hit a hard limit mid-question.
Reach for this block at the bottom of any AI assistant view, wired to your chat endpoint with the model selector and token-counting API. Pair it with the assistant chat panel above and the model picker card for in-context model switching.
A natural flow around it on an Application Pro page:
Before
After
One strong use is the primary AI query composer. Other composer shapes:
Tip: show the token counter early enough that users can trim the context before hitting the limit mid-message.