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

Never lose a great prompt again with built-in history tracking. This React block features a textarea with an integrated dropdown showing the last 8 recent prompts, each with truncated text and relative timestamps. Built with TypeScript, shadcn/ui DropdownMenu, ScrollArea, Button, and Textarea components, and Tailwind CSS, clicking any history item instantly fills the input for reuse or modification. A clear history button keeps things tidy. Integrates with AI SDK useChat persistence in any Next.js project.

React AI Prompt with History Block preview

Scroll to load preview

Installation

Install

Pro block

npx shadcn@latest add https://www.shadcn.io/r/ai-prompt-with-history.json

npx shadcn@latest add https://www.shadcn.io/r/ai-prompt-with-history.json

pnpm dlx shadcn@latest add https://www.shadcn.io/r/ai-prompt-with-history.json

bunx shadcn@latest add https://www.shadcn.io/r/ai-prompt-with-history.json

AI Message

Chat message component

AI Prompt Input

Message input area

AI Suggestion

Quick reply buttons

AI Actions

Action toolbar

FAQ

Last updated on March 15, 2026

Was this page helpful?

React AI Prompt With Files Block

Full-featured AI prompt with drag-drop file uploads, attachment badges, settings toggles, and quick action buttons

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

React AI Prompt with History Block