shadcn.io is not affiliated with official shadcn/ui
Chat With Context AI Block for React
A chat with a context band above the conversation: four items shown as attachment chips with a rank and their tokens, removable, so removing one re-counts the context and changes the next answer.
Installation
Overview
Show an assistant's working material, with this chat with context for React with Base UI. A hairline frame with a plus mark on each corner holds a window of fixed height for Groundwell, a document assistant. A Collapsible band above the conversation lists four items it is working from: a spreadsheet, a PDF, a web page and a code file, each an Attachment with a kind word, a rank (1st to 4th, from how many answers lean on it), its tokens and a remove button. Removing one re-counts "about 3.3K tokens" against the model's window in a Progress bar and changes the next answer: asked for the price with pricing.csv gone, the reply says it does not have the file, and the removed chip stays in place with Add back. Answers end with the items they used as small buttons that ring the matching chip in the band. Messages are Message and Bubble rows with a Typing Indicator Text, the composer is a Textarea with the Shine Button, the only colored control, and Send turns into Stop while a reply arrives. Guides draw the frame. For document assistants, retrieval tools and any chat where the context should be visible.
FAQ
What stays in the page, and how do I make it real?
Everything. The four items, their token sizes and the model's window are typed example figures, and a reply is picked by words in your question ("price", "refund", "check"). Nothing is read, uploaded or sent, and no model runs. To wire it for real, send the question and the ids of the items still in the context to your model where the code says so, and return which items it used; the chips, the rings and the counts all follow from the list of ids.
How does removing an item change the answer?
Each scripted answer names the items it needs. If one of them is no longer in the context, the reply says which file it does not have and asks you to add it back; if all are there, it answers and lists the items it used. Try the price question, remove pricing.csv, ask again, then press Add back and ask a third time.
What is the rank, and where do the tokens come from?
The rank counts how many answers in the thread used each item, most first, and breaks ties by the order of the list; it changes as the thread grows and is never a percentage. The token count adds up the items still in the context and divides by the window, and the sizes are typed. Edit DOCS to change the items.
How does it work from the keyboard?
Every chip has a remove button named for its file, and a removed one is replaced by an Add back button that takes focus. The used-item buttons under an answer open the band if it is folded and ring their chip. Enter sends and Shift+Enter breaks the line.