About this block

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.

When to use

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

• Assistant chat panel

After

• Citations panel

What you can display

One strong use is the primary AI query composer. Other composer shapes:

• Code generation input. Language chip instead of model chip, a syntax toggle in the toolbar.
• Document drafting surface. Tone and length chips, a word-count bar instead of a token bar.
• Search refinement box. Filter chips in the toolbar, results-count hint in the footer.

Tip: show the token counter early enough that users can trim the context before hitting the limit mid-message.