Show HN: ChatGPT, Claude and Codex-style chat inputs in one React component

kachar1 pts0 comments

Styles — ChatGPT, Claude, Claude Code, Codex, Gemini, Perplexity & Juma Agent Inputs | Prompt Area

Back to Prompt AreaOpenAIChatGPT

A ChatGPT-style composer: a single-line rounded pill with the controls inline — a model selector that opens a menu above, a dictation button, and the blue voice affordance that swaps to a send arrow once there's text.

PreviewCode

Ask anything

Instant

Composed from Prompt Area alone — the controls live inline around the input.

ClaudeClaude

A Claude-style composer: a rounded card with the input stacked over an inline control row — a model selector whose menu lists each model over a one-line description with a blue check on the active one, a dictation button, and a voice affordance that swaps to a coral send button once there's text. A dismissible notice peeks out above the card, and suggested-prompt chips sit below.

PreviewCode

Introducing connectors — bring your tools into Claude.Learn more

Paste a doc, an email, or a question to get started

Opus 4.8High

Write<br>Learn<br>Code<br>Life stuff<br>From Drive

Composed from Prompt Area alone — the controls live inline around the input.

Claude Code

A Claude Code–style composer: environment and repository context above the input, an inline return-to-send arrow, and a control bar with a permission-mode menu, dictation, model and reasoning-effort selectors, and a plan-usage meter.

PreviewCode

Default<br>Select repo…

Describe a task or ask a question

Accept edits

Opus 4.8<br>High

Composed from Prompt Area, Action Bar, and Status Bar.

CodexCodex

An OpenAI Codex–style cloud-agent composer: a rounded card with a permissions menu and reasoning-effort model selector, layered over a peeking repository/environment/branch context tray.

PreviewCode

Do anything

Default permissions

5.5Extra High

acme-enterprise<br>Work locally<br>cursor/prod-data-memoization-layer

Composed from Prompt Area and Action Bar.

GeminiGemini

A Google Gemini–style composer: a single rounded pill with a left-hand “+” menu that flips to a close button and nests “More uploads” and “More tools” fly-outs, a model pill on the right whose menu lists each model and opens a Thinking-level fly-out, and a persistent mic with a blue send button that appears once there's text. Picking a tool collapses it into a removable accent chip under the input.

PreviewCode

Ask Gemini

Pro

Gemini is AI and can make mistakes, including about people. Your privacy & Gemini

Composed from Prompt Area alone — the controls live inline around the input.

PerplexityPerplexity

A Perplexity-style composer: a rounded card with a turquoise focus glow, the input stacked over a control row with a segmented Search/Computer mode toggle, a gated model picker whose list and label switch with the mode, and an add menu with a Connectors fly-out. A fade-masked rail of starter cards with a shuffle sits below.

PreviewCode

Ask anything…

SearchComputer

Model

Build an appRun deep researchSet a reminderCreate a slide deckSend a daily news digestBuild a Chief of Staff

Composed from Prompt Area alone — the controls live inline around the input.

JumaJuma

A Juma-style marketing-agent composer: a rounded card with attached-context chips above the input, an add menu whose “Use a project”, “Use a brand profile”, and “Add from integrations” rows fly out to the side, a connected-integrations cluster, and a dedicated brand-profile button. The model selector opens a “Models” menu with an Advanced disclosure, and a teal send button sits beside dictation. Typing @ attaches context inline and / drops in a saved prompt.

PreviewCode

Enter @ to add context or / for prompt

Google AnalyticsSearch Console+2

Juma Agent

Composed from Prompt Area alone — the menus, chips, and triggers live inline around the input.

Build your own<br>Every style is just Prompt Area plus companions. Start from the docs to compose your own agent input.<br>Read the docsComponents

Drop it into your app<br>Install with an AI agent, from npm, or copy the source via the shadcn registry. Zero extra dependencies.<br>AI agentnpmshadcn<br>Prompt for Claude Code, Cursor & Codex

$pnpm add prompt-area<br>$pnpm dlx shadcn@latest add https://prompt-area.com/r/prompt-area.json

Read the docsQuick start

© 2026 Prompt Area · MIT License · Built by Juma<br>Agency Skills

prompt area from input model style

Related Articles