Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

AI blocks

Pro

Mentions Prompt AI Block for Radix UI

A prompt box where typing @ pulls in a source (docs, codebase, web, database, files, knowledge base) as a chip, with a side list of every source and the context's token total.

Framework
UI library

Preview

Preview width

Installation

Part of Pro
Pro unlocks the code and one-line install of every Pro button and text effect, plus the MCP for your AI editor.
Get ProSign in
Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

Overview

Let people say where an answer should come from, with this mentions prompt for React with Radix UI. Typing @ in the Textarea opens a Listbox of six sources, Docs, Codebase, Web, Database, Files and Knowledge base, filtered as you type; Arrow Down moves into it and Enter takes the top match. Files opens a second level of two files. A pick becomes a chip above the field and the @query text goes; Backspace at the start of the field removes the last chip. A side cell beside the field lists every source with an Add or Remove Button that is always visible, for the keyboard and for phones. The request preview lists the context with each source's typed token cost and the total, "Context 4.2K", next to the prompt. The Shine Button sends, the only colored control. It's built from Textarea, Listbox, Button, Shine Button and Guides, with a CSS entrance only. For code assistants, research tools and any prompt with sources.

FAQ

Does it search anything, and what stays local?

No. A source is a chip with a typed token cost, an example figure; nothing is read, searched or sent, and the Send button only builds the request line. To make it real, resolve each chip on your server when the form is submitted (send the source ids with the prompt) and replace SOURCES with the connectors your app has.

How do I add a source or a level?

Add an entry to SOURCES with a label, a hint and its tokens. A source that opens a second level sets opens (here files/) and its children live in FILES; the list, the filter and the side list read the arrays. An entry already chosen is left out of the @ list and shown as Remove in the side list.

Which keys does the field take?

After @ the list narrows with each letter. Arrow Down goes into the list, Enter takes the top match, and Escape closes it for as long as you keep typing that word. Backspace at the very start of the field removes the last chip; Enter without a list open sends, and Shift+Enter breaks the line. The side list needs no keys at all: every row is a button.

How is the context total worked out?

It is the sum of the typed costs of the chips, shown as a compact figure ("4.2K"), and the estimated tokens add the prompt at about four characters per token. Removing a chip updates both at once and the status line says what the context amounts to.

Does it work in a right-to-left language?

Yes. Source names, file names and the counts keep their own order inside right-to-left text, the prompt and its quote follow what you type, and the send arrow mirrors. The side cell sits at the end of the box in either direction.

How does it look on a phone?

The side list moves under the field and stays complete, so every source is one tap away without typing @. The @ list opens under the field and the chips wrap above it.

All 100 ai blocks