Installation
Prompt Area installs two ways from the same source: as an npm package, or through the shadcn registry. Use npm for a versioned dependency; use shadcn to copy the source into your project and own it.
Install as an npm package
Import the component and the prebuilt stylesheet. The stylesheet is self-contained, so no Tailwind setup is required:
'use client'
import { PromptArea } from 'prompt-area'
import 'prompt-area/styles.css'Everything is exported from the package — components, the usePromptAreaState hook, trigger presets, segment helpers, and types. If you run Tailwind yourself, import prompt-area/tailwind.css instead for token-level theming.
The package bundles zero runtime dependencies: clsx and tailwind-merge are peer dependencies so they dedupe with the copies most projects already have. npm, pnpm and bun install them automatically; with yarn (or if your setup skips peers), add them yourself: yarn add prompt-area clsx tailwind-merge.
Prerequisites for the shadcn registry
The shadcn route expects a React project using Tailwind CSS and shadcn/ui. If you do not have shadcn set up yet, run npx shadcn@latest init first.
Install from the shadcn registry
This adds the PromptArea component along with its types, the usePromptAreaState hook, trigger presets, and segment helpers.
Companion components
Each companion is independently installable from the same registry:
# Action Bar — toolbar with attach, mic, send
npx shadcn@latest add https://prompt-area.com/r/action-bar.json
# Status Bar — contextual info bar (model, branch, ...)
npx shadcn@latest add https://prompt-area.com/r/status-bar.json
# Compact Prompt Area — pill-shaped expanding input
npx shadcn@latest add https://prompt-area.com/r/compact-prompt-area.json
# Chat Prompt Layout — full-height chat layout
npx shadcn@latest add https://prompt-area.com/r/chat-prompt-layout.jsonInstall with an AI agent
Prompt Area ships machine-readable docs at /llms-full.txt. Copy this prompt into your coding agent (Claude Code, Cursor, Codex, …) — it reads the docs, installs Prompt Area (npm by default, or the shadcn registry if you ask for it), and wires it into your app, replacing any existing chat input or scaffolding a new one:
Install Prompt Area — a production-grade React chat/prompt input (@mentions, /commands, #tags, inline markdown, file attachments) — into this project. Do the full integration yourself; don't just print instructions.
1. Read the docs first. Fetch https://prompt-area.com/llms-full.txt and read it in full. It is the source of truth for the API, props, triggers, helpers, and required CSS — use it, don't guess.
2. Detect the project's package manager from its lockfile (npm, yarn, pnpm, or bun) and use it for every install and CLI command below.
3. Choose how to install, and default to the npm package:
- npm package (default): add prompt-area with the detected package manager, then import { PromptArea } from 'prompt-area' and import 'prompt-area/styles.css' once at the app root. No Tailwind required.
- shadcn: only if this project already uses shadcn/ui (a components.json exists) AND I explicitly ask for it — run shadcn@latest add https://prompt-area.com/r/prompt-area.json with the detected package manager's runner (npx, pnpm dlx, yarn dlx, or bunx), then add the .prompt-area-* component classes from the docs to globals.css.
If it is ambiguous, ask me once which I want; otherwise use the npm package.
4. Wire it into the app. If a chat/prompt composer (or a <textarea> used as one) already exists, replace it with PromptArea, keeping the existing submit, placeholder, and send/attach controls, and connect @mentions, /commands, or #tags to real project data when it is obvious (otherwise leave a clearly marked stub). If there is no composer yet, scaffold a minimal working one from the Quick Start — controlled state via usePromptAreaState and an onSubmit that sends the plain text.
5. Verify your work. Make sure the project typechecks and builds, fix any import or CSS wiring, then show me the final component and how to run it.