Styles

Styles provides ready-made agent input UI styles modeled after well-known AI chat interfaces, such as ChatGPT, Claude, Claude Code, Codex, Gemini, Perplexity, and Juma. These styles are assembled using Prompt Area and its companion components, allowing developers to replicate the appearance and behavior of established agent input fields in their own applications. Each style is a real, copy-paste composition that can be previewed or viewed as code, making it straightforward to implement familiar chat UI patterns.

The tool includes detailed breakdowns of each supported style, highlighting their unique layouts and control arrangements. For example, the ChatGPT-style composer features a single-line rounded input with inline controls, including a model selector, dictation button, and a dynamic send arrow. The Claude-style composer offers a rounded card layout with stacked input and control rows, model selection with descriptive menus, dictation, a voice affordance, dismissible notices, and suggested prompt chips. Other styles, such as Claude Code and Codex, introduce elements like repository and environment context, permission menus, reasoning-effort selectors, and plan-usage meters. Gemini's style incorporates expandable menus, persistent microphone controls, and removable accent chips, while the Perplexity and Juma styles add features like mode toggles, starter cards, context chips, integration clusters, and brand-profile management.

All styles are composed from Prompt Area and, in some cases, additional components like Action Bar and Status Bar. The tool is designed for integration into AI agent applications, with installation options via npm or by copying source code from the shadcn registry. It is intended for developers building AI-powered chat or agent interfaces who want to emulate the user experience of popular platforms. Styles comes with zero extra dependencies and is distributed under the MIT License. The tool is built by Juma Agency.