AIUIaiui/docs

Providers & Models

AIUI supports multiple AI providers for generating UI. Configure your preferred provider and models to customize your experience.

Accessing Provider Settings

  1. Click the Settings icon (gear) in the top toolbar
  2. Navigate to the Providers or AI tab
  3. Configure your provider and API key

Choosing a Provider

AIUI currently supports two providers:

Gemini

Google's Gemini models offer excellent performance for UI generation.

Pros:

  • Free tier available
  • Fast response times
  • Strong understanding of modern UI patterns
  • Native multimodal capabilities

Check your usage on the Google AI Studio dashboard.

OpenRouter

OpenRouter is a unified API that provides access to many AI models from different providers.

Pros:

  • Access to multiple model families (Anthropic, OpenAI, Meta, etc.)
  • Pay-per-use pricing
  • Model comparison and fallbacks
  • Single API key for all models

Monitor your usage on the OpenRouter dashboard.

API Key Configuration

Your API key is stored locally in your browser and never sent to AIUI servers. All AI requests go directly from your browser to the provider.

Getting a Gemini API Key

  1. Visit aistudio.google.com/apikey
  2. Sign in with your Google account
  3. Click Create API Key
  4. Copy the generated key
  5. Paste it in AIUI's provider settings

Gemini offers a free tier. Check pricing and limits on the Google AI Studio dashboard.

Getting an OpenRouter API Key

  1. Visit openrouter.ai/keys
  2. Create an account or sign in
  3. Click Create Key
  4. Give your key a name (e.g., "AIUI")
  5. Copy the generated key
  6. Paste it in AIUI's provider settings

OpenRouter uses pay-per-use pricing. Monitor your usage on the OpenRouter dashboard.

Model Configuration

AIUI uses two separate models for different purposes to optimize for both quality and speed.

Generation Model (Primary)

The Generation Model is your primary engine for creating UI. This model handles:

  • Generating new screens from scratch.
  • Creating complex branches and iterations.
  • Processing reference images and design context.

Recommendation: Use high-capability models like gemini-2.0-pro or claude-3.5-sonnet (via OpenRouter) for best results.

Helper Model (Secondary)

The Helper Model handles background supporting tasks:

  • Prompt Enhancement: Expanding brief inputs into detailed design prompts.
  • AI Memory: Extracting and categorizing design patterns as you work.
  • Node Naming: Automatically generating descriptive titles for new nodes.

Recommendation: Use faster, lightweight models like gemini-2.0-flash-lite or gpt-4o-mini to keep the experience responsive while saving costs.

Model Lists and Discovery

The available models are fetched live from your selected provider. After entering your API key, the model dropdowns populate with all available options.

Model Information

Each model in the list shows:

  • Model name and ID
  • Context window size
  • Pricing (for OpenRouter)

Updating Models

Click Refresh Models to fetch the latest available models from your provider. New models become available as providers release them.

Configuration Examples

Gemini Setup

  1. Provider: Gemini
  2. Get API key from aistudio.google.com/apikey
  3. Select your preferred generation and helper models

OpenRouter Setup

  1. Provider: OpenRouter
  2. Get API key from openrouter.ai/keys
  3. Select your preferred generation and helper models

Security Notes

  • API keys are stored in your browser's local storage
  • Keys are never transmitted to AIUI servers
  • All AI requests go directly to your chosen provider
  • Clear your browser data to remove stored keys
  • Use separate API keys for AIUI to easily track usage

Troubleshooting

"Invalid API key" Error

  • Verify you copied the complete key without extra spaces
  • Check that the key is for the correct provider
  • Ensure the key hasn't been revoked or expired
  • Try generating a new key

"Model not found" Error

  • Click Refresh Models to update the list
  • Verify your API key has access to the selected model
  • Some models require specific account tiers

Slow Generations

  • Try a faster model (e.g., Flash instead of Pro)
  • Check your internet connection
  • The provider may be experiencing high load

Rate Limit Errors

Check your usage on your provider's dashboard: