AI Studio System Guide & Cloud Deployment

The AI Studio is a powerful visual prototyping sandbox that allows you to generate responsive, high-performance HTML/CSS/JS websites and React components instantly using Gemini AI models, stream the generated code live, and deploy it to cloud platforms like Vercel or GitHub Pages in one click.

---

Step-by-Step Guide: How to Generate & Deploy

1. Prototyping Your Website

• Describe Your Vision: In the Website Idea field, specify your design requirements (colors, sections, theme, responsiveness).
• Configure Specifications: Choose the pages, select sections (Hero, About, Services, etc.), choose your brand color, and select your preferred font.
• Select Output Format:
  • HTML (Separated Files): Recommended if you want to deploy live to GitHub Pages or Vercel instantly.
  • React Component (TSX): Best for downloading clean React components to paste into your Next.js project.
• Generate: Click Generate Site to watch the code stream live in the monochromatic terminal console.

2. Deploying to GitHub Pages (Free Hosting)

• Step A: Generate a Classic Personal Access Token
  • Do NOT use GitHub's Fine-grained Personal Access Tokens — they do not support the GitHub Pages API.
  • Navigate directly to the Classic Token Creator: github.com/settings/tokens/new.
  • Set a descriptive name (e.g., "AI Studio Deployer").
  • Check the repo checkbox scope at the top of the list. Checking this automatically ticks all necessary sub-scopes.
  • Scroll to the bottom and click Generate token.
  • Copy the generated token immediately (it starts with ghp_). Note: You will not be able to see it again once you close the page.
• Step B: Connect and Deploy
  • Go to the Deploy tab in the AI Studio, select GitHub Pages Hosting, and click Connect GitHub to paste your token.
  • Repository Name: A unique repository name with a random suffix is automatically generated (e.g., my-portfolio-x7k2m). Click the ↺ (regenerate) icon to change it.
  • Click Deploy to GitHub Pages. The AI Studio will create the repository, wait for GitHub initialisation, upload your files, and enable GitHub Pages hosting automatically.
  • Wait 60 seconds for GitHub to finish compiling the deployment, then click Visit Live Website.

3. Deploying to Vercel (InstantSubdomain)

• Step A: Create Vercel Token
  • Go to your Vercel Account Settings: vercel.com/account/settings/tokens.
  • Click Create, name it "AI Studio", set the Scope to All Projects (or select your specific team), and click Create.
  • Copy the token value.
• Step B: Deploy
  • In the Deploy tab under Vercel, paste the token, verify your project name, and click Deploy to Vercel. Your site goes live instantly on a Vercel subdomain!

---

⚠️ Rules of Thumb: Do's and Do Not's

Do's:

• DO use a Classic token (starts with ghp_) on GitHub.
• DO ensure the repo checkbox is ticked when generating your GitHub token.
• DO use a unique name or click the ↺ (regenerate) button to prevent name conflicts.
• DO wait at least 60 seconds after a successful GitHub deploy for the static files to compile before opening the site.

Do Not's:

• DO NOT use Fine-grained Personal Access Tokens on GitHub (these result in a Resource not accessible error).
• DO NOT expose your tokens or API keys. If your tokens are exposed, delete them immediately in your settings panels.
• DO NOT enter API keys, credit cards, or raw database keys into AI prompts.

---

Troubleshooting Common Issues

• Error: "Resource not accessible by personal access token"
  • Cause: You are using a Fine-grained token.
  • Solution: Disconnect, create a Classic token instead at github.com/settings/tokens/new with the repo scope selected, and reconnect.
• Blank Screen on GitHub Pages
  • Cause: Broken relative script/style asset links on subdirectory domains.
  • Solution: The AI Studio now automatically compiles your layouts into a single self-contained HTML page containing all styles and javascript inlined. Make sure to generate and redeploy your layout using the latest version of the studio.