Prompt Area

A production-grade rich text input for AI chat interfaces

A contentEditable textarea with @mentions, /commands, #tags, inline markdown, file attachments, undo/redo, and dark mode. Built as a shadcn registry component — install with one command, zero extra dependencies.

Quick StartGitHub

What is Prompt Area?

Most textarea components handle plain text. When you need structured input — mentions, slash commands, tags — you end up stitching together multiple libraries or building from scratch on top of a heavy editor framework like ProseMirror or Slate.

Prompt Area is a single contentEditable-based React component that gives you trigger-based chips, inline markdown formatting, file attachments, and structured data extraction — all in one package with no external editor dependencies.

Built specifically for AI and LLM chat interfaces, where inputs need to be richer than a plain textarea but lighter than a full document editor. Install it with one command from the shadcn registry and start using it immediately.

Q4-2025-financial-report.pdf
PDF · 3.3 MB

Try editing, type @ to mention, / for commands, or just hit Enter

Why Prompt Area?

One component, not five

Instead of combining a mention library, command palette, tag input, markdown editor, and file upload widget, Prompt Area handles all of these in a single component with a unified API.

Zero extra dependencies

Ships as a shadcn registry component. Your bundle only grows by the component code itself — no ProseMirror, no TipTap, no Slate. Just React and the DOM.

Structured data out of the box

Every chip, mention, and tag is a typed segment. Call getChipsByTrigger("@") to extract structured data without parsing HTML. The submit callback gives you clean, typed output ready for your API.

Built for AI chat

Designed from the ground up for LLM prompt interfaces. Action Bar, Status Bar, Compact Prompt Area, and Chat Prompt Layout are all first-class companion components that install independently.

How It Works

1

Install via shadcn CLI

One command adds the component to your project. No config files, no provider wrappers, no extra dependencies.

npx shadcn@latest add https://prompt-area.com/r/prompt-area.json
2

Define your triggers

Pass an array of trigger configs — @ for mentions, / for commands, # for tags. Each trigger specifies its search behavior, item list, and resolve logic.

3

Get structured output

On submit, Prompt Area returns typed segments — plain text, chips with metadata, markdown spans. Use helper functions like getChipsByTrigger("@") to extract exactly what you need.

Installation

Install individual components via the shadcn CLI, or use the AI agent prompt to set everything up in one go.

Core rich text input with triggers, markdown, and attachments

npx shadcn@latest add https://prompt-area.com/r/prompt-area.json
AI Agent PromptClaude Code, Codex, Cursor, Windsurf, etc.

Copy this prompt and give it to your AI coding agent to install and set up the component in a single step.

Fetch https://prompt-area.com/llms-full.txt and read the full documentation. Install the prompt-area component by running: npx shadcn@latest add https://prompt-area.com/r/prompt-area.json — then add the required CSS classes from the documentation to globals.css and help me build a prompt input. If there are any existing chat or prompt textarea inputs in the project, replace them with PromptArea using the context from the documentation.

Features

Everything you need for a production-ready rich text input. See how we stack up against alternatives in the comparison table.

Trigger-Based Chips
Type @, /, or # to invoke mentions, commands, and tags that resolve into structured chips.
Inline Markdown
Bold, italic, lists, and auto-linked URLs render live as you type. Keyboard shortcuts included.
Undo & Redo
Full history stack with Ctrl+Z / Ctrl+Shift+Z. Every action is tracked and reversible.
File & Image Attachments
Paste screenshots or attach files with thumbnails, loading states, and remove buttons built in.
Action Bar
A toolbar component with left and right slots that pairs with PromptArea for a complete chat input.
Dark Mode Ready
Full light and dark theme support via CSS variables. Adapts automatically to your app’s theme.
Accessible by Default
ARIA labels, keyboard navigation, screen reader announcements, and focus management built in.
shadcn Registry
Install with one command. No extra dependencies. Copy-paste friendly and fully customizable.

Examples

DX Helpers

Use usePromptAreaState() for zero-boilerplate state, mentionTrigger() / commandTrigger() / hashtagTrigger() for one-liner trigger setup, and getChipsByTrigger() to inspect segments.

empty: truechips: 0mentions: 0

Basic (no triggers)

Simple text input with Enter to submit.

Rotating Placeholders

Pass an array of strings to placeholder to cycle through them with a smooth animation. Great for hinting at what the input can do.

@Mentions

Type @ followed by a name to search users.

/Commands (start of line)

Type / at the beginning of a line for commands.

#Tags (auto-resolve on space)

Type #tag and press space to auto-create a chip. Backspace reverts it.

Callback mode (!)

Type ! to fire a callback that programmatically inserts a chip.

Async Search

Type @ to trigger an async search with 300ms debounce, AbortSignal cancellation, and an empty-state message. Results load after a simulated 500ms delay.

Markdown Formatting

Wrap text in **bold**, *italic*, or ***both*** to see inline styling. Use Cmd+B / Cmd+I shortcuts. Start a line with - or * for auto-formatted lists (Tab to indent).

Copy & Paste

Select content with chips in the source editor and Cmd+C to copy, then Cmd+V in the target to paste — chips are preserved. Pasting plain text like @Copywriter #campaign from outside auto-resolves matching triggers.

Source (select & copy)
Target (paste here)

Image Attachments

Paste an image (screenshot or file) to attach it. Images show a loading spinner during upload simulation. Click × to remove. Use imagePosition to control placement.

Images Above (default)
Landscape
Chart
Images Below

File Attachments

Attach files with icon, name, and metadata. Cards show a file-type icon, truncated filename, and extension/size. With 4+ files, only the first 3 are shown with a “+N more” button to expand. Click × to remove.

Normal (1–3 files)
quarterly-report.pdf
PDF · 2.3 MB
user-data-export-2024-final-version.csv
CSV · 827.3 KB
config.json
JSON · 1.2 KB
Many files (4+ files, collapsible with expand)
presentation.pdf
budget-2024.csv
notes.txt

Action Bar

A horizontal toolbar with left and right slots. Pairs with PromptArea for a complete chat input experience. Independently installable.

npx shadcn@latest add https://prompt-area.com/r/action-bar.json

Full-Featured

Left slot with attach menu (+), @ mention, / command, and # tag buttons. Right slot with markdown toggle, microphone, and send button. The send button submits the message just like pressing Enter.

Minimal

Just a send button on the right. The simplest composition.

Disabled

Both PromptArea and ActionBar in disabled state.

Status Bar

A horizontal bar with left and right slots for displaying contextual information. Sits above or below the PromptArea to show things like branch name, model selector, or project context. Independently installable.

npx shadcn@latest add https://prompt-area.com/r/status-bar.json

Above Input

Status bar above the prompt area showing project context and settings.

prompt-areamain

Below Input

Status bar below the prompt area with action shortcuts and model selector.

+</> Auto accept edits

Combined with Action Bar

Status bar on top with an action bar below the input for a full-featured layout.

prompt-areamain

Claude Code–Style

A complete composition combining PromptArea, ActionBar, and StatusBar to replicate a Claude Code–style chat input. Independently installable components composed together.

Demo

File chip above the input, a “Plan mode” toggle and model selector in the action bar, and project/branch context in the status bar.

image.png
prompt-area
main

Compact Prompt Area

A pill-shaped prompt input that expands downward on focus. Circular plus and submit buttons with a customizable slot for extras like a microphone. Independently installable.

npx shadcn@latest add https://prompt-area.com/r/compact-prompt-area.json

Demo

Compact single-row input with circular plus and submit buttons. Expands downward on focus with a microphone slot before the submit button.

Chat Prompt Layout

A full-height chat layout with scrollable messages and a bottom-anchored prompt slot. Includes contextual scroll navigation buttons. Independently installable.

npx shadcn@latest add https://prompt-area.com/r/chat-prompt-layout.json

Chat Layout

Messages scroll independently while the prompt area stays anchored at the bottom. Scroll navigation buttons appear contextually.

Hey, can you help me understand how React Server Components work?
Sure! React Server Components (RSC) let you render components on the server. They can directly access backend resources like databases and file systems without an API layer. The key difference from traditional SSR is that RSC never ship their JavaScript to the client — they render once on the server and send HTML.
How do they differ from Client Components?
Client Components are the traditional React components you're used to. They run in the browser, can use hooks like useState and useEffect, and handle interactivity. You mark them with "use client" at the top. Server Components are the default in Next.js App Router — they can't use browser APIs or hooks, but they reduce the JavaScript bundle sent to the client.
Can I mix them together?
Absolutely! That's the whole idea. You can import Client Components into Server Components. The Server Component handles data fetching and layout, while Client Components handle interactive parts. Think of it as a tree where Server Components are the branches and Client Components are the interactive leaves.
What about data fetching patterns?
In Server Components, you can use async/await directly — just make the component async and fetch data at the top level. No need for useEffect or state management for server data. For Client Components, you can pass data as props from a parent Server Component, or use traditional patterns like SWR or React Query for client-side fetching.
That makes a lot of sense. What about caching?
Next.js extends fetch with automatic caching and revalidation. You can set cache behavior per-request with options like { cache: "force-cache" } or { next: { revalidate: 60 } }. There's also the unstable_cache API for caching non-fetch operations like database queries. The App Router also has built-in route segment caching.

Inspector

Inspect every event, segment, and API method in real time. Toggle disabled, markdown, and autoGrow. All 4 trigger types (/, @, #, !) and every callback log to the event panel. Imperative handle methods are wired to buttons below.

Segments (3)
[
  {
    "type": "text",
    "text": "Hello "
  },
  {
    "type": "chip",
    "trigger": "@",
    "value": "strategist",
    "displayText": "Strategist"
  },
  {
    "type": "text",
    "text": " — click a chip, paste text, or try every feature!"
  }
]
Event Log
Interact to see events…

Dark Theme

Toggle between light, dark, and system themes using the switch in the sidebar. All components adapt automatically via CSS variables.

Preview

A side-by-side comparison of the prompt area in light and dark themes.

Light

Dark

Comparison

Prompt Area combines mentions, slash commands, auto-resize, and rich text into a single component. Here's how it compares to popular alternatives that each cover only a subset of these features.

FeaturePrompt Areareact-mentions
Mention library
Tiptap
ProseMirror framework
Lexical
Meta editor framework
Plate.js
Slate framework
BlockNote
ProseMirror block editor
BlockSuite
AFFiNE editor toolkit
react-textarea-autosize
Auto-resize textarea
@Mentions / Tagging
Slash Commands
Auto-grow on Focus
Inline Markdown
Undo / Redo
File & Image Attachments
Dark Mode
Accessibility (ARIA)
IME Support (CJK)
Copy/Paste Chip Preservation
Action Bar / Toolbar
Zero-config State Hook
Bundle Approach
shadcn registry
npm package
npm package
npm package
npm package
npm package
npm package
npm package
Extra Dependencies
0
0
3+
2+
5+
5+
5+
0

When to Use What

Use Prompt Area when you need a rich prompt input for AI or chat interfaces with mentions, commands, and tags in a single zero-dependency component.

Use Tiptap when you need a full document editor with collaborative editing, block-level formatting, and a ProseMirror plugin ecosystem.

Use Lexical when you need Meta's extensible editor framework with a plugin architecture for building custom editing experiences.

Use Plate.js when you need a full-featured Slate-based editor with a rich component library and advanced formatting.

Use react-mentions when you only need @mentions and nothing else — no commands, tags, or markdown.

Use react-textarea-autosize when you only need a plain textarea that auto-resizes, with no rich text features.

Head-to-Head Comparisons

Prompt Area vs Tiptap

Tiptap is a ProseMirror framework for building full rich-text editors with 3+ dependencies. Prompt Area is purpose-built for prompt and chat inputs with zero dependencies. Choose Tiptap if you need document editing with collaborative features and block-level formatting. Choose Prompt Area if you need a lightweight input with mentions, commands, tags, and file attachments without ProseMirror overhead.

Prompt Area vs Lexical

Lexical is Meta's extensible editor framework that requires assembling plugins for mentions and commands. Prompt Area provides these built-in with no plugin assembly required. Choose Lexical for extensible document editing with a plugin architecture. Choose Prompt Area for a ready-to-use chat input that works out of the box.

Prompt Area vs react-mentions

react-mentions handles @mentions only. Prompt Area adds /commands, #tags, inline markdown, file attachments, undo/redo, and four companion components (Action Bar, Status Bar, Compact Prompt Area, Chat Prompt Layout). Choose react-mentions if you only need basic mentions. Choose Prompt Area for a complete prompt input.

Prompt Area vs Plate.js

Plate.js is a Slate-based editor framework with 5+ dependencies. Prompt Area has zero dependencies and is focused on prompt inputs rather than document editing. Choose Plate.js for full-featured rich-text editors. Choose Prompt Area for AI chat and prompt UIs.

Prompt Area vs BlockNote

BlockNote is a ProseMirror-based block editor with 5+ dependencies, designed for Notion-style document editing. Prompt Area is a single-component textarea for chat inputs. Choose BlockNote for block-based document editing. Choose Prompt Area for prompt and chat interfaces.

Prompt Area vs react-textarea-autosize

react-textarea-autosize provides a plain textarea that auto-resizes. Prompt Area adds @mentions, /commands, #tags, inline markdown, file attachments, undo/redo, and structured data output. Choose react-textarea-autosize if you only need auto-resize with no rich features. Choose Prompt Area for a full-featured chat input.