AI Assistant
One chat surface and four generators that share it, plus the settings screen that configures them. The interface layer for a model you supply.
⚠️ Pro edition
These screens are in the Pro download. The free edition ships the design system and the demo, not the application screens.
The screens
6 screens, at these routes in your download. Open them beside this page.
| Route | Screen | What it is for |
|---|---|---|
| /ai | Assistant | The conversation: prompt, streamed reply, history and the composer. |
| /text-generator | Text generator | The same surface, framed for long-form writing. |
| /image-generator | Image generator | Prompt in, image grid out, with size and count controls. |
| /code-generator | Code generator | Syntax-highlighted output with a copy control on each block. |
| /video-generator | Video generator | The generation queue and its states. |
| /ai-settings | AI settings | Provider, model, key and the defaults each generator starts from. |
What you get
- One chat implementation behind all five surfaces, so a change to the composer changes every generator.
- Streaming, thinking, error and empty states drawn rather than described.
- A settings screen that treats the API key as a secret: masked, and never echoed back after saving.
What you connect
These are interfaces, not an application.They render, they hold their own state, and they talk to nothing. Everything below is your application's, and none of it is supplied.
- A model. No provider is bundled, no request is made and no key is stored. The settings screen is a form.
- Your key handling. The field masks input; where the value goes is your application's decision, and it should not be the browser.
- Streaming transport. The interface renders a stream; opening one is yours.
- Cost and rate limits. Nothing here meters, queues or bills.
Built from
Nothing here is a one-off. Each screen composes the same families documented in the reference, so changing a token moves them with the rest of the product.
code, card, form, select, skeleton.
Next
A customer screen, end to end builds one of these from an empty route, and Theming is how you make them look like yours.