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

A developer released a React component that replicates the chat input styles of ChatGPT, Claude, Codex, Gemini, Perplexity, and other AI agents, allowing developers to drop ready-made agent-input UIs into their apps with zero extra dependencies.

Back to Prompt Area / Styles Ready-made agent-input styles, assembled from Prompt Area and its companions. Each is a real, copy-paste composition modeled on the agent UIs you already know — toggle Preview and Code on any example. ChatGPT 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. Composed from Prompt Area /docs/components/prompt-area alone — the controls live inline around the input. Claude 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. Composed from Prompt Area /docs/components/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. Composed from Prompt Area /docs/components/prompt-area , Action Bar /docs/components/action-bar , and Status Bar /docs/components/status-bar . Codex 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. Composed from Prompt Area /docs/components/prompt-area and Action Bar /docs/components/action-bar . Gemini 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. Gemini is AI and can make mistakes, including about people. Composed from Prompt Area /docs/components/prompt-area alone — the controls live inline around the input. Perplexity 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. Composed from Prompt Area /docs/components/prompt-area alone — the controls live inline around the input. Juma 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. Composed from Prompt Area /docs/components/prompt-area alone — the menus, chips, and triggers live inline around the input. Build your own Every style is just Prompt Area plus companions. Start from the docs to compose your own agent input. Drop it into your app Install with an AI agent, from npm, or copy the source via the shadcn registry. Zero extra dependencies.