Shadcn.io is not affiliated with official shadcn/ui
AI Prompt With Mentions
A React AI prompt with @mention autocomplete block for Next.js featuring inline context badges, keyboard-navigable popover, and source linking built with shadcn/ui and Tailwind CSS
Bring context-aware prompting to your AI chat with @mention support using this prompt block for React and Next.js. Features a textarea that triggers an autocomplete popover on typing @ with filterable context sources like documentation, codebase, web search, database, files, and knowledge base. Selected mentions appear as color-coded inline chips above the textarea with dismiss buttons. Built with TypeScript, shadcn/ui Button and Badge components, motion/react popover animations, and Tailwind CSS. Perfect for RAG-powered AI assistants, context-aware chat interfaces, and developer tools.
Related Components
AI RAG Search
Retrieval-augmented generation search
AI Knowledge Base
AI-powered knowledge management
AI Prompt With Files
Prompt with file attachments
AI Chat With Context
Context-aware chat interface
AI Document QA
Document question answering
AI Prompt With History
Prompt with history recall
FAQ
Was this page helpful?
Sign in to leave feedback.
Prompt With History
A React AI prompt with history block for Next.js featuring searchable recent prompts, reuse functionality, category badges, and timestamp display built with shadcn/ui and Tailwind CSS
Prompt With Persona
A React AI prompt with persona selection block for Next.js featuring a split panel with persona cards on the left and adaptive prompt input on the right built with shadcn/ui and Tailwind CSS