15:I[981,["658","static/chunks/658-a698693f56d0116a.js","183","static/chunks/183-6beeeb801c274aaa.js","474","static/chunks/app/%5Btype%5D/layout-631c4730b83c8223.js"],"Posts"] 16:T69a,Hi HN,

I built Prompt Area — a contentEditable rich text input component for React, designed specifically for AI chat interfaces.

The problem: if you're building an AI chat UI, your input needs @mentions (to reference context), /commands (to trigger actions), #tags, inline markdown, file attachments, and undo/redo. Existing options are either too limited (react-mentions only does mentions) or massive overkill (Tiptap, Lexical, and Plate are full document editors built on ProseMirror/Slate — way too heavy for a prompt input).

Prompt Area sits in the middle. It uses a segment-based model (array of {type, text} objects) on top of contentEditable, with all logic extracted into a pure engine file that's testable without a DOM. Zero dependencies beyond React and your existing Tailwind/shadcn setup.

Features: trigger-based chips (@, /, # or any character), immutable chip pills, live inline markdown preview, auto-growing textarea, full undo/redo history, copy/paste with chip preservation, IME support for CJK input, ARIA accessibility, dark mode, and file/image attachments.

Install in one command:

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

Demo & docs: https://prompt-area.com GitHub: https://github.com/team-gpt/prompt-area

Would love feedback from anyone building AI/LLM interfaces.

Hurdles of Migrating from Discord to self hosted Matrix