AIUIaiui/docs

Quick Start

Create your first AI-generated UI in just 5 minutes. This guide walks you through the entire process from sign-in to sharing your work.

Step 1: Visit AIUI

Open your browser and go to aiui.zugl.in. You'll see the AIUI landing page showcasing the infinite canvas and AI generation features.

Step 2: Sign In

Click "Get Started" in the top-right corner. You'll be taken to the sign-in page where you can:

  • Sign in with Google — Fastest option, one-click authentication
  • Sign in with GitHub — Great for developers
  • Email/Password — Create a new account or sign in with existing credentials

After signing in, you'll be redirected to your dashboard.

Step 3: Your Dashboard

The dashboard at /app is your home base. Here you'll see:

  • Your projects — Cards showing each project's name, type, and last modified date
  • New Project button — Create a fresh canvas
  • Settings (gear icon) — Configure API keys and preferences

If this is your first time, the dashboard will be empty with a prompt to create your first project.

Step 4: Create a New Project

Click "New Project" to open the project creation dialog. You have two options:

  • Simple Create: Enter a name, choose a type (Web or App), and click Create.
  • Magic Starter (Recommended): Click the Sparkle icon to launch the AI wizard. Describe your idea (e.g., "A fitness app for busy parents") and let the AI bootstrap your entire project context and initial screens in seconds.

Step 5: Add Your API Key

Before generating UI, you need to configure an AI provider. Click the gear icon in the prompt bar at the bottom of the screen.

In the Settings panel:

  1. Choose your provider: Gemini (recommended) or OpenRouter
  2. Paste your API key (see Account Setup for how to get one)
  3. Click Save

Your API key is stored locally in your browser and never sent to our servers.

Step 6: Generate Your First UI

Now the fun part! Click in the prompt bar at the bottom of the canvas and type:

A pricing page with three tiers: Free, Pro, and Enterprise

Press Enter or click the send button.

Watch as a new node appears on your canvas. The AI streams the generated code in real-time, and you'll see a live preview of your UI as it's being created.

Step 7: Preview Your Result

Once generation completes:

  1. Click the node to select it
  2. Press Shift + Space to open the full-size preview modal
  3. Interact with your generated UI — hover states, buttons, and animations all work

Press Escape or click outside to close the preview.

Step 8: Create a Branch

Want to explore a variation? With your node selected, type another prompt:

Make it darker with a purple gradient

Press Enter. A new node appears, connected to your original with a line.

Reference with @ Mentions

You can also reference other designs by typing @ in the prompt bar. This tells the AI to look at that specific screen for inspiration. For example: "Match the footer style of @Homepage".

Step 9: Share Your Work

Ready to show someone? Click the "Share" button in the top toolbar.

  1. Click "Generate Link" to create a shareable URL
  2. Copy the link
  3. Send it to anyone — they can view your canvas without signing up

You can also:

  • Invite collaborators by email with specific roles
  • Set permissions — Viewer, Editor, or Admin
  • Revoke access anytime by disabling the share link

You're Ready!

You've just:

  • Created your first project
  • Generated UI with AI
  • Explored branching for design iteration
  • Shared your work with a link

What's Next?