Shadcn.io is not affiliated with official shadcn/ui
React AI Prompt with Mentions Block
React AI prompt with @mentions block for Next.js with inline context badges and autocomplete popover using shadcn/ui and Tailwind CSS
Bring context-aware prompting to your AI chat with @mention support. This React block lets users type "@" to trigger a popover with contextual sources like documents, codebase files, web searches, and knowledge bases. Selected mentions appear as colored inline badges above the textarea, giving users clear visibility into what context the AI will reference. Built with TypeScript, shadcn/ui Popover, Badge, and ScrollArea components, and Tailwind CSS, it integrates with AI SDK RAG pipelines in any Next.js project.
React AI Prompt with Mentions Block preview
Installation
Related Components
AI Message
Chat message component
AI Prompt Input
Message input area
AI Suggestion
Quick reply buttons
AI Actions
Action toolbar
FAQ
Was this page helpful?
Sign in to leave feedback.
React AI Prompt with History Block
React AI prompt with history block for Next.js with recent prompts dropdown, timestamps, and reuse functionality using shadcn/ui and Tailwind CSS
React AI Prompt with Persona Block
React AI prompt with persona block for Next.js with selectable AI persona cards featuring avatars, traits, and personality badges using shadcn/ui and Tailwind CSS