# Show HN: ChatGPT, Claude and Codex-style chat inputs in one React component > Source: > Published: 2026-07-08 02:58:13+00:00 [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.