3527e732d4
Production-ready Next.js boilerplate with: - Runtime env validation (fail-fast on missing vars) - Feature-gated config (S3, Stripe, email, OAuth) - Docker + Coolify deployment pipeline - PostgreSQL + pgvector, MinIO S3, Better Auth - TypeScript strict mode (no ignoreBuildErrors) - i18n (en/es), AI modules, billing, monitoring Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
4.6 KiB
title, description, url
| title | description | url |
|---|---|---|
| UI | Learn more about UI components and design system in AI starter kit. | /ai/docs/ui |
UI
TurboStarter AI builds on the core TurboStarter UI foundation to create engaging interfaces for all AI features.
The UI architecture uses shared components and styles with platform-specific implementations:
@turbostarter/ui: includes shared assets, themes, and fundamental styles@turbostarter/ui-web: contains web components built with Tailwind CSS, Radix UI, and shadcn/ui@turbostarter/ui-mobile: delivers mobile components using Uniwind and react-native-reusables
This approach maximizes code reuse while optimizing for each platform's unique capabilities.
UI in AI applications
The AI starter kit leverages this foundation to create intuitive interfaces for various features and demo apps:
Components for displaying conversations, user input, and streaming responses (used in [Chatbot](/ai/docs/chat) and [Chat with PDF](/ai/docs/pdf) demos). Displaying AI-generated images as masonry grids with options for interaction (used in [Image Generation](/ai/docs/image) demo). Structured forms for configuring AI tasks (e.g., selecting models, adjusting parameters, modifying prompts). Visual feedback during AI processing, such as loading spinners or progress indicators (e.g. [Text to Speech](/ai/docs/tts) voice avatar animation). UI elements for users to rate or provide feedback on AI outputs. This can include thumbs up/down buttons or text input fields for comments. Components for displaying error messages or alerts when AI tasks fail or encounter issues. Ensuring that all UI components are usable for individuals with disabilities, including keyboard navigation and screen reader support. Components for displaying data or model outputs visually, such as charts, graphs, or progress bars.Generative UI
A standout aspect of AI applications is their ability to dynamically create or modify UI elements based on AI responses. TurboStarter AI enables this through:
- AI SDK components: libraries like the AI SDK provide specialized components and hooks (like
useActionsanduseUIState) designed to render UI based on AI actions or structured data. This creates interactive elements—buttons, forms, or visualizations—that appear dynamically within conversations or workflows. - Structured output: AI models can return data in specific formats (such as JSON) that your frontend parses to render appropriate components, display information, or trigger actions. For example, an AI might return product details that automatically render as interactive cards.
- Conditional rendering: the platform uses standard React patterns for showing, hiding, or transforming UI components based on AI interaction states. This creates smooth transitions between loading states, results displays, and follow-up options tailored to AI suggestions.
This approach delivers truly responsive user experiences where interfaces adapt intelligently to ongoing AI processes. The Chat demo app showcases these generative UI capabilities in action.
Customization and further details
Customizing appearance (themes, styling) or adding new UI components follows the same process as core TurboStarter applications. For complete guides on styling, theme management, and component development, see our core documentation:
By leveraging the core UI system, TurboStarter AI ensures consistent user experiences across platforms while letting you focus on creating unique AI functionalities.