Why Chai UI
Brew AI apps fast
Popular AI apps and model playgrounds use common and custom UI patterns. Chai UI unifies and standardizes these patterns for AI interactions, with intelligent components that have the functionality baked in.
The problem
Open any AI app and you'll find the same parts: a prompt box, an attach button, a model picker, an aspect ratio, an “enhance” button, a run button and a grid of results. Every team builds them by hand, so every version is a little different and a little broken. The hard parts, like picking a model, handling media, writing good prompts and recovering from a failed run, get rebuilt from scratch each time.
The Chai answer: one standard for the patterns people already know
Chai UI takes the patterns people already understand from the apps they use and makes each one a single, well-designed component with its intelligence included.
| Pattern | Where people know it from | In Chai UI |
|---|---|---|
| Prompt bar with attach, model picker and submit | Chat assistants, image and video generators | Composer |
| Automatic model selection | Chat assistants with an “auto” model | Composer · model routing |
| Rewrite my prompt | Image generators, model playgrounds | Composer · prompt optimization |
| Drop in media, get a prompt back | Image-to-prompt and describe tools | Media analyzer |
| Result with like, retry, download and details | Every generator and model playground | Result card |
| Paging through one prompt across models | Model comparison arenas | Result card · pagination |
| Mark an area of an image and say what to change | Precise image editors | Edit card |
Baked in, not bolted on
Model routing
Picks the right model for the request, or lets people choose. The UI only offers what the selected model can do.
Media detection
Recognizes images, video and audio on drop, and switches models and options to match.
Prompts, written for you
Each use case sends a prompt written for it, like region edits a model can place precisely. One tap also turns a thin prompt into a strong one, with undo.
Voice to prompt
Speak instead of typing: a live waveform while you talk, and the transcript lands in the prompt to check before sending. You pick the speech-to-text model.
World model support
Create world splits the prompt into an environment and a character, each with its own enhance, and offers the frame rates your world models run at.
Streaming results
Text arrives as the model writes it, and screen readers wait for the finished answer.
Evaluations
Your backend's quality checks show on each result as a clear pass or fail.
Retry and stop, in place
Failures turn submit into retry and in-flight runs into stop. No blocking error dialogs.
How it fits together
A composer collects the request, an engine runs it, and a result card shows what came back. useComposer connects the three, so there's no loading, error or streaming state for you to write.
- ComposerPrompt, media, model and options
- EngineFal.ai, OpenRouter, Vercel AI Gateway or your own backend
- Result cardStreams, evaluates, retries
Editing works the same way, with the Edit card in place of the result card.
Under the hood
Chai UI is a few packages with one job each, so you can take as much or as little as you need.
@chai-ui/tokens
One JSON source of color, space, type and motion, built into CSS variables, TypeScript and a Figma token set.
@chai-ui/core
The framework-free brain: the request, run and result model, and the engines that call Fal.ai, OpenRouter, Vercel AI Gateway or your own backend.
@chai-ui/react and @chai-ui/vue
The same controlled components for React and Vue, and useComposer, which wires them to an engine.
The core has no UI dependency and holds the components' behavior, so the React and Vue packages are thin layers over the same logic, and one shared test suite runs against both. Every engine is unit-tested against mocked providers, and a token lint keeps component styles on the design system.
Principles
- Brew time. A working AI interface should take about as long as a cup of tea: install, point at a provider, drop in two components.
- Components, not workflows. Chai owns one request and the results it produces. History, chaining and pipelines belong to your app.
- Smart inside, simple outside. Routing, prompt work, media handling and retries are built in. You decide how much of it the end user sees.
- Never offer what the model can't do. Controls come from the selected model's capabilities, so a person can't pick an option that will fail. Give each model its aspect ratios and the menu offers only those, and the engine sends the pick in that model's own format. You never write a ratio list or a per-provider mapping.
- Swap anything. The AI engine and the visual system are both replaceable. No component is tied to one provider or one look; today's look is Material Design 3, restyled through Chai's tokens.
- Legible to agents. Predictable props, one-line defaults and machine-readable docs, so a coding agent can build a correct Chai UI from the docs alone.
Built for humans and agents
Designers
One token source feeds CSS, code and Figma. The components come from real Figma designs and restyle through tokens, not overrides.
Developers
Controlled components for React or Vue, one hook or composable, and engines you can swap. API keys stay on your server.
AI agents
llms.txt and DESIGN.md describe what exists and how to use it, and a token lint catches invented styles.
Accessible by default
Every component is tested against WCAG 2.2 AA, in a real browser, as part of the test suite that runs on every change, in both the React and Vue packages. Accessibility isn't left to each app to add.
- Automated checks. axe runs the WCAG 2.0, 2.1 and 2.2 A and AA rules on each component's main states: menus open, cards flipped, results loading, streaming, failed or stopped, regions being edited, and images expanded.
- Keyboard and focus. Everything works without a mouse. Dialogs keep focus inside, close with Escape and hand focus back. Pagers and the video scrubber are sliders that move with the arrow keys, and edit regions move and resize with them. Focus rings are on by default.
- What axe can't see. Tests also check that the prompt field is named, that generated images get alt text (the prompt, unless you set your own), that screen readers wait for a streamed answer to finish, and that pass and fail never rely on color alone.
- Motion and touch. Slides and the Enhance reveal turn off for people who ask their system for less motion, and controls keep WCAG 2.2's target spacing.
Automated checks can't catch everything, and WCAG conformance belongs to a whole page, so your own content and layout still need checking. Chai gives you components that start out accessible.