Back to Prompt Area 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 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 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, Action Bar, and 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 and 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 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 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 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.