Prompt Area designed for AI Chat UIs

Introduction

• The text input is the most-used element in any chat UI
• Yet it's always an afterthought — a plain or a bloated editor
• There's a gap between "too simple" and "too complex"

The Problem with Existing Solutions

• react-mentions: only handles mentions, no commands/tags/markdown
• Tiptap: full ProseMirror editor, massive bundle, document-editing paradigm
• Lexical: Meta's framework, powerful but complex plugin system
• Plate: built on Slate, heavy, designed for Notion-style editors
• None of these were designed for prompt inputs

Introducing Prompt Area

• A React component built specifically for AI chat UIs
• Ships as a shadcn registry component (one-command install)
• Zero extra dependencies

Key Features (with code examples)

Trigger-Based Chips

'use client'

import { useState } from 'react'
import { PromptArea } from '@/components/prompt-area'
import type { Segment, TriggerConfig } from '@/components/types'

const triggers: TriggerConfig[] = [
  {
    char: '@',
    position: 'any',
    mode: 'dropdown',
    onSearch: (query) =>
      [
        { value: 'alice', label: 'Alice' },
        { value: 'bob', label: 'Bob' },
      ].filter((u) => u.label.toLowerCase().includes(query.toLowerCase())),
  },
  commandTrigger({ onSearch: searchCommands }),
  hashtagTrigger({ onResolve: resolveTag }),
]

export function Chat() {
  const [segments, setSegments] = useState<Segment[]>([])

  return (
    <PromptArea
      value={segments}
      onChange={setSegments}
      triggers={triggers}
      placeholder="Type @ to mention someone..."
      onSubmit={(segs) => {
        console.log('Submitted:', segs)
        setSegments([])
      }}
    />
  )
}

Inline Markdown

• Live preview of bold, italic, URLs
• No toolbar, no mode switching

File Attachments

• Drag-and-drop, paste support
• Thumbnail previews

Architecture Deep-Dive

• Segment-based document model
• Pure engine (prompt-area-engine.ts) — testable without DOM
• contentEditable with decoration layer
• Debounced undo/redo snapshots

Installation

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

Links

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