Have you ever built a chatbot? Maybe you wanna see this component

Ilko Kacharov — Fri, 13 Mar 2026 08:35:29 +0000

Prompt Area designed for AI Chat UIs

Ilko Kacharov ・ Mar 13

#ai #react #shadcn #ui

Prompt Area designed for AI Chat UIs

Ilko Kacharov — Fri, 13 Mar 2026 08:01:57 +0000

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

DEV Community: Ilko Kacharov

Have you ever built a chatbot? Maybe you wanna see this component

Prompt Area designed for AI Chat UIs

Ilko Kacharov ・ Mar 13

Prompt Area designed for AI Chat UIs

Introduction

The Problem with Existing Solutions

Introducing Prompt Area

Key Features (with code examples)

Trigger-Based Chips

Inline Markdown

File Attachments

Architecture Deep-Dive

Installation

Links