DEV Community: Ilko Kacharov

[Boost]

Ilko Kacharov — Wed, 08 Jul 2026 13:54:59 +0000

Jul 8

Prompt Area, six months in: 7 agent-input styles and an npm package

3 min read

Prompt Area, six months in: 7 agent-input styles and an npm package

Ilko Kacharov — Wed, 08 Jul 2026 13:54:36 +0000

The text input is still the most-used element in any chat UI. Since the first post about Prompt Area, one piece of feedback kept coming back in two flavors: "I want to see it looking like a real product, not a demo" and "I don't want the registry, just let me npm install it."

Both shipped. This post is the tour.

The Styles page: the composers you already know

The new /styles page recreates seven agent inputs you use every day, each as a real, copy-paste composition of Prompt Area and its companion components. Every example is live (type in it, open the menus) and has a Code tab next to the Preview.

ChatGPT: the single-line rounded pill, model selector opening upward, dictation, and the voice affordance that swaps to a send arrow once there's text.

Claude: the rounded card with a stacked input, a model menu with per-model descriptions, the coral send button, a dismissible notice above and suggested-prompt chips below.

Claude Code: environment and repository context above the input, inline return-to-send, and a control bar with permission mode, model and reasoning-effort selectors, and a usage meter.

Codex: the cloud-agent composer with a permissions menu, reasoning-effort selector, and the layered repository/environment/branch context tray peeking from under the card.

Gemini: the pill with the "+" menu that flips to a close button, nested fly-outs, a model pill with a Thinking-level menu, and the persistent mic.

Perplexity: turquoise focus glow, Search/Computer mode toggle, a gated model picker that switches with the mode, and a shuffling rail of starter cards.

Juma: the marketing-agent composer we run in production, with attached-context chips, integration fly-outs, a brand-profile button, and @ / triggers for context and saved prompts.

None of these are screenshots or mockups. Each one is the same PromptArea component composed with ActionBar, StatusBar, and friends, restyled. That was the point of the exercise: if the component cannot reproduce the composers people already consider best-in-class, it is not done.

npm install prompt-area

Prompt Area started as a shadcn registry component: one command drops the full source into your repo and you own every line. That model is still here and still the recommendation for teams that want no black boxes:

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

But plenty of you asked for a plain dependency. As of v0.5.0 it is on npm:

pnpm add prompt-area

Same code, two distribution models. Rent it as a package and pull updates, or own it as source and patch anything. There is also a third path for the agent era: point Claude Code or Cursor at the docs prompt and let the agent do the install.

Still zero editor-framework dependencies

Nothing changed underneath. No Tiptap, no Lexical, no Plate: a contentEditable component with a typed Segment[] value model (structured data out, not HTML soup), trigger-based chips for @mentions, /commands and #tags that survive copy/paste and undo, inline markdown, IME/CJK composition handling, and a pure engine (prompt-area-engine) you can test without a DOM.

React + Tailwind. MIT.

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

[Boost]

Prompt Area, six months in: 7 agent-input styles and an npm package

Prompt Area, six months in: 7 agent-input styles and an npm package

The Styles page: the composers you already know

npm install prompt-area

Still zero editor-framework dependencies

Links

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