AIUIaiui/docs

Setting Up Your Account

This guide covers everything you need to configure AIUI for the best experience: creating your account, setting up API keys, and customizing your preferences.

Creating Your Account

AIUI uses Google OAuth for simple, secure authentication. No passwords to remember.

Sign In with Google

Visit aiui.zugl.in and click "Get Started". You'll be prompted to sign in with your Google account.

After signing in, you're automatically taken to your dashboard at /app.

Your Profile

Your profile is created automatically from your Google account:

  • Display name — From your Google account
  • Avatar — Your Google profile picture
  • Email — Used for collaboration invites

Getting Your API Keys

AIUI uses your own API keys for AI generation. This means:

  • You control costs — Pay only for what you use
  • No usage limits — Generate as much as you need
  • Privacy — Your prompts go directly to the AI provider

Option 1: Gemini API Key

  1. Go to aistudio.google.com/apikey
  2. Sign in with your Google account
  3. Click "Create API Key"
  4. Select a project (or create a new one)
  5. Copy the generated key

Check your usage and limits on the Google AI Studio dashboard.

Option 2: OpenRouter API Key

OpenRouter gives you access to multiple AI models from different providers.

  1. Go to 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

Manage your usage and billing on the OpenRouter dashboard.

Adding Your API Key to AIUI

Once you have your API key:

  1. Open any project in AIUI
  2. Look at the prompt bar at the bottom of the canvas
  3. Click the gear icon next to the provider dropdown
  4. The Settings panel opens

In the Settings Panel

  1. Select your provider — Choose "Gemini" or "OpenRouter"
  2. Paste your API key — In the API Key field
  3. Click Save

A green checkmark confirms your key is saved.

Choosing Your Models

AIUI uses two types of models:

Generation Model

This is the main model that creates your UI. Select from the available models in your provider's list.

Helper Model

Used for lighter tasks like generating titles, prompt enhancement, and memory extraction. Can be a smaller, faster model to save costs.

Changing Models

  1. Open Settings (gear icon in prompt bar)
  2. Under Models, select your preferred Generation Model
  3. Optionally, select a different Helper Model
  4. Click Save

Understanding API Key Storage

Your API keys are stored locally in your browser. This means:

What Happens Details
Keys stay on your device Never sent to AIUI servers
Browser-specific Different browsers = separate keys
Clearing data removes keys Clearing browser data deletes your keys
No account sync Keys don't follow you to new devices

Best Practices

  • Keep a backup — Store your API keys in a password manager
  • Use the same browser — For consistent access to your keys
  • Regenerate if compromised — If you suspect a leak, create new keys

Preferences

Additional settings you can configure:

Canvas Preferences

  • Grid visibility — Show or hide the background grid
  • Snap to grid — Align nodes automatically
  • Default zoom level — Starting zoom when opening projects

Generation Preferences

  • Auto-preview — Automatically show preview after generation
  • Stream output — Watch code generate in real-time (recommended)

Troubleshooting

"Invalid API Key" Error

  • Double-check you copied the complete key
  • Ensure there are no extra spaces
  • Verify the key is for the correct provider
  • Try generating a new key

"Rate Limit Exceeded"

Check your usage on your provider's dashboard:

Keys Not Saving

  • Check that cookies/local storage are enabled
  • Try a different browser
  • Disable privacy extensions temporarily

Next Steps

With your account configured, you're ready to design: