Google AI Studio

The app from the video, step by step

Your own app, built in Google AI Studio from my free template, Your AI Firebase. In the video it becomes an online luxury store that is also the store’s order centre: a shop with Stripe checkout, a custom order form, and a products tab for the team. No code: you describe each page, the app writes the prompt, and Gemini builds it.Every step as the app and Firebase name it, and what I typed in each box. Words like these are mine; change them to yours.

Part 1

Get the template

The app I build in the video starts as my free template. Your name and email, and it opens in Google AI Studio: remix it, and it is yours.

Get it, then make it yours

Free. The only emails are news of new versions, if you want them.

  1. Step 1

    Get the free template

    Your name and your email. Leave the switch on to hear about bug fixes and new features: I send nothing else. Then Google AI Studio opens the template.

    No spam. No confirmation email. Unsubscribe any time.

  2. Step 2 · Google AI Studio

    Remix

    Your AI Firebase opens. Press Remix at the top to copy the app into your own Google AI Studio, give it any name, then Remix app. It takes about a minute to load.

  3. Step 3 · Your app

    The setup page

    The first thing the app shows. It walks you through every step of Part 2, if you would rather not watch the video.

Part 2

Connect Firebase

Sign-in, the database and file storage, in a Firebase project of your own. The setup page has each step and writes the security rules for you: you copy values from one to the other.

The project

In Firebase, then its values in AI Studio.

  1. Step 1 · Firebase

    Create a project

    Open the link on the setup page and create a new Firebase project. Any name: I give everything the same one. Switch off Gemini in Firebase and Google Analytics, you need neither, then Create project.

  2. Step 2 · Firebase

    Add a web app

    Add app, under the project’s name, then the web icon. Name it and Register. The Firebase SDK snippet that comes up has every value you need.

  3. Step 3 · Google AI Studio

    Paste the values

    In AI Studio’s secrets, each box is named after a value in the snippet: copy each one across. Don’t press Apply yet.

    Firebase API key:
    apiKey
    Auth domain:
    authDomain
    Project ID:
    projectId
    Storage bucket:
    empty for now: storage is the last step
    Messaging sender ID:
    messagingSenderId
    App ID:
    appId
    Admin emails:
    your own address

Sign-in

Firebase → Security → Authentication.

  1. Step 4 · Firebase

    Sign-in methods

    Continue to the console, then Security → Authentication → Get started. These three to start with: inside your app you can switch methods on and off later.

    Email/Password:
    on, and passwordless sign-in on too: a customer who pays emails themselves a link instead of making a whole account
    Google:
    on, with your support email
    Anonymous:
    on: form submissions and guest payments need it

  2. Step 5 · Firebase

    Authorized domains

    Copy the app link from the setup page. In Authentication → Settings → Authorized domains, Add domain and paste it. Once the app is published, add your own domain here too.

The database and storage

Firebase → Database and storage, with the rules from the setup page.

  1. Step 6 · Firebase

    Create the database

    Firestore → Create database. Keep the settings, but if your users are not in the United States pick the location closest to them. Production mode.

  2. Step 7 · Setup page

    Generate the rules

    In the box Who runs this app, type the emails you will test with as admins: anyone can be made an admin later. Generate the rules and copy them. In Firestore’s Rules tab, replace everything with them, scroll up and Publish. The rules are your whole back end.

  3. Step 8 · Firebase

    Turn on storage

    Storage → Upgrade project. It needs a Cloud Billing account: make one or use one you have, set a budget for the alerts, and link it. Then the default settings, production mode, Create.

  4. Step 9 · Setup page

    Publish the storage rules

    Copy the storage rules. In Storage’s Rules tab, replace what is there with them and Publish. Then press Attach permission, so storage and the database work together.

  5. Step 10 · Google AI Studio

    The bucket, then Apply

    In Storage’s Files tab, copy the storage bucket at the top. Paste it into the storage bucket box in AI Studio, and now press Apply.

  6. Step 11 · Setup page

    I’ve completed all of the steps

    Your starter app opens. Stuck before that? Help, at the bottom of the setup page: email me, book a session to do the setup together, ask for a quote, or report an issue.

Part 3

Choose how people sign in

You sign in as the admin. Then the Sign-in tab switches each way in on and off, a phone number included.

Sign-in

Your admin dashboard, and Firebase for the phone.

  1. Step 1 · Your app

    Sign in as the admin

    With the admin email you typed for the rules. A Google address is the easiest: Continue with Google. All your admin tabs are there.

  2. Step 2 · Pages

    View page

    A second preview of your app. It only works in Chrome, and can take a while to update: reload it after each change.

  3. Step 3 · Sign-in

    Ways in

    The methods you set up are on: email and password, email link and Google. Switch one off and it leaves the sign-in page at once.

  4. Step 4 · Firebase

    A phone number

    How to set it up, in the app, walks you through it. In Firebase: Authentication → Sign-in method → Add new provider → Phone, switch it on, Save. Then Settings → SMS policy: pick every country you will let sign in, or it won’t work. Save, and switch it on in the app. GitHub, X and two-factor authentication are set up the same way.

  5. Step 5 · Your app

    Try it

    Continue with phone number sends a code by text. Someone new is then asked to finish registering; the email can be verified later. In the video this is Michael, the team member of Part 6.

Part 4

Your theme

Your logo, your name and the look you want, in a sentence. The Theme tab writes the prompt, and Gemini redesigns the app.

Theme

The prompt generator that helps Gemini design your app.

  1. Step 1 · Theme

    Your brand

    The app name is what the browser tab says.

    Logo:
    your main logo
    Browser tab icon:
    your favicon
    App name:
    Maison Store
    Light or dark:
    whatever the device uses

  2. Step 2 · Theme

    Describe the look

    Mine, in a line. Be as specific as you like: the prompt is written under the box as you type.

    The look

    Chic old money black and gold theme showcasing our luxurious premium online accessory store

  3. Step 3 · Google AI Studio

    Send the prompt

    Copy the prompt, paste it into a new chat and send it. A couple of minutes later the app has your logo, your colours and new titles: View the app, in Theme, shows it.

Part 5

The home page

What goes on it, the pictures for it and a form, all in one page of the Pages tab. Gemini builds it, and every form sent comes to your admin dashboard.

Pages → Website pages

Your public pages. The home page is first.

  1. Step 1 · Pages

    Describe the home page

    Open it with the arrow and say what you want on it. Mine asks for these:My whole description is on screen at .

    The page:
    a luxurious, minimal landing page
    Hero:
    a high-resolution photo of our model, a brand statement, a Shop and a Custom order button
    Collection:
    three or four pieces
    Custom order:
    a section with the form
    Then:
    a call to action, and anything else it likes: be creative

  2. Step 2 · Pages

    Media

    Any file to feature on the page: images, videos, audio. From your computer, from Assets (what you have uploaded already, like your logos), or a link, such as a YouTube video. Then say what it is and where it goes.

    Upload:
    the photo of our model
    Description:
    main image of a model for hero
    And:
    the three pieces for the collection, each described

  3. Step 3 · Pages

    Form

    Say what to ask your customers. AI makes the form and puts it on the page; each one sent comes to your admin dashboard with everything in it.

    The form

    Add a bespoke custom bag order form where user can provide a custom item they want to get. Specify dimensions, colors, upload sketches of the item.

  4. Step 4 · Google AI Studio

    Send the prompt

    Pages writes one long prompt from all of it. Copy it, open a new chat and send it. The home page is not shown inside the admin dashboard: View it from Pages.

  5. Step 5 · Your app

    The bell

    Send the form once yourself. The bell at the top has it as a new form submission, and opens the Inbox tab: every answer, the sketch attached.

Part 6

A tab for your team

Tabs are what people see once they sign in, and roles decide who sees which. Here, a Products tab where the team adds products and only admins delete them.

Users

Roles decide which tabs people see.

  1. Step 1 · Users

    Give a role

    Someone who signs in is a member: no tabs yet. In Members, change their role from the list: Team member, Admin, or a role you add, such as Client or Supplier. I make Michael a team member.

Pages → Tabs

A page for people who are signed in.

  1. Step 2 · Pages

    Add a page

    The other three kinds: private, each person sees only their own; shared, but each sees only what an admin assigns them; and private until it is posted, like a Google Doc or a listing.

    Who sees it:
    my team and admins: someone who just registers never does
    Kind:
    the first: shared, the whole team works in it together
    Name:
    Products

  2. Step 3 · Pages

    Describe the tab

    An inventory page, a step at a time. Mine asks for these:My whole description is on screen at .

    Details:
    name, price, description
    Variants:
    colours, each with a shade and a name
    Photos:
    a gallery for each variant: up to 10 pictures, one made the main one, dragged into order
    Preview:
    the whole listing as it will look on the shop page

  3. Step 4 · Pages

    Who can do what

    My team:
    add and edit products
    Admins:
    everything, and a history of every change: what was added, and who added it
    Delete:
    only me and admins

  4. Step 5 · Google AI Studio

    Send the prompt

    Copy the prompt into a new chat: a new chat clears the context. One this long can paste as a block of text: press the stripes icon on it and it is a prompt again.

  5. Step 6 · Pages

    Debugging log

    Gemini can leave bugs. The debugging log, under Pages at the top, says what it needs to fix: Copy, send it in, and it fixes your pages.

  6. Step 7 · Your app

    Try it

    Michael sees Products now. He adds a product, its variants and photos, previews it and publishes. As the admin you see it too, with Delete and the log of who did what, and his changes as he makes them.

Part 7

Payments and the shop

One Stripe key turns payments on. Then a Shop page with every product from the Products tab, a cart, and checkout with Stripe.

Stripe

In test mode: no real money.

  1. Step 1 · Payments

    Set up payments

    All it needs is one secret key.

  2. Step 2 · Stripe

    A sandbox

    Click your account’s name at the top left → Switch to sandbox → Create a sandbox. Name it and create it: nothing else to do in Stripe. Copy the secret key at the top.

  3. Step 3 · Google AI Studio

    Add the secret

    The cog at the top is Google AI Studio’s settings: Secrets → Add secret, then Apply changes. Close Secrets and press I have added the variables: it says payments are on, in test mode.

    Name:
    STRIPE_SECRET_KEY
    Value:
    the secret key: it says test in it, so no real money is charged

Pages → Website pages → Shop

A new website page.

  1. Step 4 · Pages

    Describe the shop

    Mine asks for these:My whole description is on screen at .

    Top:
    a minimal header
    Below:
    a card for every product in the Products tab
    The cards:
    switch colours and add to cart on the card; open one for the listing and every photo
    Before paying:
    email, phone number and delivery address, then the Stripe payment link

  2. Step 5 · Pages

    Linked pages

    So Gemini joins the two properly and makes no duplicates: Link a page, pick one you have, and say how they are linked.

    Page:
    Products
    How:
    the shop shows only products from the Products tab, synced in real time: added, deleted or updated there, it is updated on the shop. A purchase on the shop updates the inventory in Products.

  3. Step 6 · Pages

    Add a payment

    Pick its kind. Dynamic works out how much to pay and makes the payment link: right for a cart. One-time payments and subscriptions are made in the Payments tab.

    Kind:
    Dynamic payment
    How:
    once the user clicks Check out with the total price, they continue to pay with Stripe; once that’s completed, they’re forwarded to the dashboard

  4. Step 7 · Google AI Studio

    Send the prompt

    Copy the prompt and send it in a new chat. The shop shows every product you added in Products.

  5. Step 8 · Stripe

    Pay in test mode

    Add to cart and check out: the address box fills itself in as you type. Pay with the card 4242 4242 4242 4242 and anything in the other boxes. The buyer gets an account made for them, so no payment goes missing: they verify their email and see what they paid under Billing. You get a new payment notification.

Part 8

Go live

When your app is ready, it goes live from the app itself.

Publish

  1. Step 1 · Your app

    Publish app

    Under the three dots. It guides you through every step.

  2. Step 2 · Firebase

    Your domain

    Add it to Authorized domains, as the app link was in Part 2.

For your team

Want this set up for your team?

I build apps like this for businesses — your pages, your roles, your payments — or we set the template up together on a call.

The next guide

Get the next guide

When the next video is up, its guide comes to your inbox: every step, every prompt. One email per guide.

One email when the next one is up. Nothing else, ever. Unsubscribe any time.