Build an AI Business Assistant SaaS

Build and deploy a multi-tool AI SaaS app using Google AI Studio.

Introduction

30 Second Summary

Business owners spend hours every week writing marketing emails, replying to customers, and drafting proposals. What if they had an AI-powered assistant that could handle all of that in seconds?

In this project, you will build and deploy a fully functional AI Business Assistant web app using only natural language prompts. No coding required.

What You'll Build

A multi-tool AI SaaS dashboard powered by Google's Gemini model, built and deployed entirely through Google AI Studio's Build Mode.

By the end of this project, you'll have:

A live, deployed AI Business Assistant accessible via a public URL that anyone can visit.
A professional dashboard with three AI-powered tools: a Content Generator, Customer Reply Drafter, and Business Document Creator.
Experience designing and shipping AI products from idea to deployment using only natural language prompts.
Secret Mission: Add a Business Profile feature that saves user details so they never have to re-enter them.

Are there any prerequisites?

All you need is a Google account (Gmail or Google Workspace). Everything else happens in your browser with no installations or billing setup required.

Set Up Google AI Studio

Before you can build your AI Business Assistant, you need a workspace where you can describe what you want and watch it come to life.

Google AI Studio's Build Mode lets you create full-stack web apps by typing natural language prompts. In this step, you'll sign in and get familiar with the interface you'll use for the rest of the project.

In this step, get ready to:

Sign in to Google AI Studio and accept the Terms of Service.
Enter Build Mode and orient yourself in the interface.
Confirm your environment is ready to start building.

Access Google AI Studio and enter Build Mode

Google AI Studio is a free, browser-based tool from Google. No downloads or installations needed.

Open a new browser tab and navigate to aistudio.google.com.
Sign in with your Google account (Gmail or Google Workspace).
When prompted, accept the Terms of Service.

What happens when you accept the Terms of Service?

Google AI Studio automatically creates a default Google Cloud project and API key for you. You do not need to set up billing or configure anything manually.

In the left-hand navigation panel, click Build to enter Build Mode.

What is Build Mode?

Build Mode is where you describe what you want to create using plain English. An AI agent called the Antigravity Agent reads your prompts and generates a complete full-stack web app (React frontend and Node.js backend) for you in real time.

You never need to write or edit code directly. The agent handles everything based on your descriptions.

Understand the Build Mode interface

Build Mode has a few key areas you'll use throughout this project. Take a moment to locate each one.

Find the chat panel at the bottom of the screen. This is where you type prompts describing what you want the AI to build.
Find the preview panel on the right-hand side. This shows a live preview of your app as the AI builds it.
Find the Code tab in the preview panel. This lets you view the generated code if you are curious, but you will not need to edit it.

What about the API key?

Your GEMINI_API_KEY is automatically configured as a server-side secret. No manual setup is required.

The key is injected into the server-side runtime and never exposed in client-side code. This means the AI features you build are secure by default.

Verify your environment is ready

Confirm you see the Build Mode interface with the chat panel at the bottom and the preview area on the right.
Click into the chat panel and confirm you can type text.

✔️ I see the chat panel and preview area

You are all set. Your Google AI Studio environment is ready and your GEMINI_API_KEY is configured automatically.

ⓧ I don't see Build Mode or the chat panel

Make sure you clicked Build in the left-hand navigation panel.
Try refreshing the page. Google AI Studio occasionally takes a moment to load fully.
If the interface looks different from expected, try maximizing your browser window. On smaller screens the layout may collapse into a tabbed view.

Having trouble signing in?

Make sure you are using a personal Google account or a Google Workspace account that has access to Google AI Studio. Some organizational accounts may restrict access.

If you see a Terms of Service prompt, make sure to accept it before proceeding. The default project and API key are only created after you accept.

Help me troubleshoot signing in to Google AI Studio.

Your workspace is ready. Next up, you'll use the chat panel to describe your app and watch the AI build your dashboard in real time.

Create Your App Dashboard

Your environment is set up and ready to go. Now it's time to build the core of your AI Business Assistant: a professional dashboard where users choose between three AI-powered tools.

Google AI Studio's Build Mode lets you describe your app in plain English using the chat panel. The Antigravity Agent then generates a full-stack React app in the preview panel from your natural language description.

In this step, get ready to:

Prompt the AI agent to build your dashboard foundation.
Refine the design until it looks polished and professional.

Prompt the AI agent to generate your SaaS foundation

Your first prompt sets the foundation for the entire app. A detailed description helps the Antigravity Agent build something close to your vision on the first try.

In the chat panel at the bottom of Build Mode, type or paste the following prompt to describe your app:

Build a professional AI Business Assistant web app. It should have a clean dashboard with a header that says 'AI Business Assistant' and three tool cards the user can click: 1) Content Generator, 2) Customer Reply Drafter, 3) Business Document Creator. Use a modern, professional design with a blue and white color scheme. Each card should have an icon, title, and short description.

What does this prompt do?

This prompt tells the Antigravity Agent exactly what to build. It specifies the app name, the layout (a dashboard with three cards), the visual style (blue and white), and what each card should contain (icon, title, description).

The more specific your prompt, the closer the output matches your vision. Vague prompts lead to generic results.

Press Enter (or click the send button) to submit your prompt.
Watch the preview panel as the Antigravity Agent generates your app in real-time.

After a few seconds, you should see a dashboard appear in the preview panel with a blue header and three tool cards arranged in a grid or row.

Don't see anything in the preview panel?

Make sure you pressed Enter or clicked the send button after typing your prompt. The agent only starts building once the prompt is submitted.

If the preview panel shows an error or stays blank for more than 30 seconds, try sending the prompt again. Temporary delays can happen during generation.

Help me troubleshoot why my Build Mode preview is not generating.

Refine the dashboard design

The first generation is a starting point. Build Mode lets you iterate by sending follow-up prompts in the same chat conversation.

Review the dashboard in the preview panel. Check that all three cards are visible and clearly labeled.
Send this follow-up prompt to improve the card sizing and add a tagline to the header:

Make the cards larger with more padding. Change the header to include a tagline: AI-powered tools for busy business owners.

What is iteration in Build Mode?

Each follow-up prompt builds on your previous prompts. The agent remembers the full conversation, so you can ask for specific tweaks without re-describing the entire app.

You can also use annotation mode to highlight a specific part of the UI and describe changes. For now, chat-based iteration is the fastest way to refine your dashboard.

Wait for the preview to update. You should see larger cards with more spacing and a tagline beneath the header.
Confirm each of the three tool cards is clickable by hovering over them in the preview.
If anything else looks off, send additional prompts to the agent describing the specific change you want.

Your dashboard should now show a professional blue and white layout with the title "AI Business Assistant", the tagline "AI-powered tools for busy business owners", and three polished tool cards.

Keep iterating until you're happy

There is no limit to how many refinement prompts you can send. Try adjusting colors, font sizes, or card descriptions until the dashboard feels right to you.

Dashboard looks broken after a refinement prompt?

Sometimes a follow-up prompt can accidentally overwrite parts of the original design. If this happens, describe what went wrong and ask the agent to restore it. For example: "The three cards disappeared. Bring them back with their icons and descriptions."

Help me fix my dashboard layout after a refinement prompt broke something.

Your dashboard is looking sharp. Next up, you'll build the first tool behind those cards: the Content Generator that creates marketing emails, social posts, and product descriptions on demand.

Build the Content Generator Tool

Your dashboard is looking sharp with three tool cards ready and waiting. It's time to bring the first one to life.

The Content Generator is the flagship tool of your SaaS. It takes simple inputs like a business name and desired tone, then uses the Gemini API to produce professional marketing content in seconds.

In this step, get ready to:

Build a form interface for the Content Generator tool.
Connect the form to the Gemini API for AI-powered content generation.
Add navigation and polish with a loading spinner and back button.

Create the Content Generator interface

Right now, clicking the Content Generator card does nothing. You need a form that collects the information the AI needs to generate useful content.

In the chat panel, type the following prompt to tell the Antigravity Agent what to build:

When the user clicks the Content Generator card, show a form with these fields: Business Name (text input), Industry (dropdown with options like Retail, Technology, Healthcare, Food & Beverage, Professional Services, Other), Content Type (dropdown: Marketing Email, Social Media Post, Product Description), Tone (dropdown: Professional, Friendly, Casual, Persuasive), and a Brief Description field (textarea for the user to describe what they want). Add a Generate button and an output area below it.

What does this prompt do?

This prompt tells the agent to create a complete form with five input fields. Each field gives the AI a piece of context it needs to write relevant content for the user's business.

The dropdown fields constrain the options so users get consistent results without needing to think about what to type. The textarea gives them space to describe their specific request.

Watch the preview panel as the agent generates the form in real-time.
Once the preview updates, click the Content Generator card in the preview to confirm it navigates to the new form.
Verify you see all five fields: Business Name, Industry, Content Type, Tone, and Brief Description.

Form not appearing after clicking the card?

If clicking the card does nothing, the agent may not have connected the navigation. Type a follow-up prompt like: "Make the Content Generator card clickable and navigate to the form when clicked."

If the form is missing fields, ask the agent to add them specifically: "Add an Industry dropdown with options Retail, Technology, Healthcare, Food & Beverage, Professional Services, Other."

help me fix my Content Generator form navigation

Connect the AI generation logic

The form collects inputs, but it doesn't do anything with them yet. Now you'll wire up the Generate button to send everything to the Gemini API and display the result.

In the chat panel, type this prompt to add the AI generation logic:

When the user clicks Generate, take all the form inputs and send them to the Gemini API to generate the content. The prompt to Gemini should include the business name, industry, content type, tone, and description. Display the AI-generated result in the output area below the form with a Copy to Clipboard button.

What's happening behind the scenes?

The agent writes server-side code that takes your form inputs, builds a prompt combining all five fields, and sends it to the Gemini API. Your GEMINI_API_KEY is already configured as a server-side secret, so there's nothing to set up manually.

The response from Gemini gets displayed in the output area, and the Copy to Clipboard button lets users grab the generated text without selecting it manually.

Test the flow by entering sample data in the form. Try something like: Business Name Sunrise Bakery, Industry Food & Beverage, Content Type Social Media Post, Tone Friendly, and a brief description like Announce our new sourdough bread launching this weekend.
Click Generate and verify the AI produces relevant, well-formatted content in the output area.
Click the Copy to Clipboard button and paste somewhere (like a text editor) to confirm it works.

Generate button not producing output?

If clicking Generate does nothing or shows an error, give the agent a follow-up prompt: "The Generate button isn't working. Make sure it sends the form data to the Gemini API and displays the response in the output area."

If the output is generic or ignores your form inputs, try: "Make sure the prompt to Gemini includes all five form fields: business name, industry, content type, tone, and description."

help me debug my Content Generator AI output

Add a back button and polish

Users need a way to return to the dashboard after generating content. A loading spinner also helps users know the AI is working on their request.

In the chat panel, type this prompt to add navigation and loading feedback:

Add a Back to Dashboard button at the top of the Content Generator page so users can return to the main menu. Also add a loading spinner while the AI is generating content.

Why add a loading spinner?

AI generation takes a few seconds. Without visual feedback, users might think the app is broken and click Generate again. A spinner sets the right expectation.

Test the full flow from start to finish. Click the Content Generator card from the dashboard.
Fill in the form fields and click Generate.
Confirm you see a loading spinner appear while the AI works.
Once the content appears, click Copy to Clipboard to verify it still works.
Click Back to Dashboard and confirm you return to the main menu with all three tool cards visible.

Back button not working?

If the Back to Dashboard button doesn't navigate back, tell the agent: "The Back to Dashboard button should navigate back to the main dashboard view showing all three tool cards."

If you don't see the loading spinner, try: "Show a spinning animation while waiting for the Gemini API response, and hide it once the content is displayed."

help me fix navigation in my Build Mode app

Iterate until it feels right

Build Mode is all about iteration. If anything looks off (spacing, colors, button placement), describe the change you want in the chat panel. Small follow-up prompts like "make the Generate button larger" or "add more spacing between the form and output area" are totally valid.

Your first tool is fully functional. Next up, you'll build the Customer Reply Drafter and Business Document Creator using the same pattern.

Build the Reply Drafter and Document Creator

Your Content Generator is live and generating polished marketing content on demand. Now it's time to bring the other two tools to life.

In this step, you'll build the Customer Reply Drafter and the Business Document Creator. Each tool follows the same pattern: a form collects context from the user, sends it to Gemini, and displays professional output ready to copy.

In this step, get ready to:

Build the Customer Reply Drafter with a form and AI generation.
Build the Business Document Creator with a form and AI generation.
Test all three tools end-to-end for quality and navigation.

Build the Customer Reply Drafter

Business owners spend hours crafting replies to customer emails. The Reply Drafter automates this by turning a pasted customer message into a polished, tone-appropriate response.

In the chat panel at the bottom of Build Mode, type the following prompt to build the Customer Reply Drafter tool:

Build the Customer Reply Drafter tool. When the user clicks its card from the dashboard, show a form with: Business Name (text input), Your Role (text input, e.g. Customer Service Manager), Customer Message (textarea where they paste the customer's email or message), Desired Outcome (dropdown: Resolve Complaint, Answer Question, Provide Information, Apologize, Follow Up), and Tone (dropdown: Professional, Empathetic, Friendly, Formal). Add a Draft Reply button that sends everything to Gemini and displays a professional reply. Include Copy to Clipboard and Back to Dashboard buttons.

What does this prompt tell the agent to build?

A dedicated page with five input fields that capture context about the customer interaction.
The Desired Outcome dropdown gives Gemini a clear goal for the reply (resolve, answer, apologize, etc.).
The Draft Reply button sends all form data to the Gemini API and renders the response below.
Copy to Clipboard and Back to Dashboard buttons match the pattern you already have in the Content Generator.

Watch the preview panel as the agent generates the new tool page.
Once the preview loads, click the Customer Reply Drafter card on the dashboard to confirm it navigates to the new form.
Test the tool by entering a sample business name, role, and a short customer complaint in the Customer Message field.
Select a Desired Outcome and Tone, then click Draft Reply.
Verify the AI produces a professional, contextually relevant response in the output area.

Reply Drafter not appearing?

If the dashboard card does not navigate to the form, tell the agent: "Make sure clicking the Customer Reply Drafter card navigates to the new form page."
If the AI output is blank or returns an error, tell the agent: "The Draft Reply button should send all form inputs to Gemini and display the result below the form."
If you see the preview stuck loading, try refreshing the preview panel and re-entering your prompt.

Still having trouble? Help me debug why my Customer Reply Drafter isn't working in Google AI Studio Build Mode.

Build the Business Document Creator

The Document Creator handles proposals, follow-ups, meeting summaries, and more. It gives business owners a quick way to produce structured documents without starting from a blank page.

In the chat panel, type the following prompt to build the Business Document Creator tool:

Build the Business Document Creator tool. When the user clicks its card from the dashboard, show a form with: Business Name (text input), Document Type (dropdown: Proposal, Follow-Up Email, Meeting Summary, Project Brief, Thank You Note), Recipient (text input), Key Points (textarea for main points to include), and Tone (dropdown: Professional, Friendly, Formal, Persuasive). Add a Create Document button that sends everything to Gemini and displays the formatted document. Include Copy to Clipboard and Back to Dashboard buttons.

What does this prompt tell the agent to build?

A form page with five fields that capture the document's purpose and audience.
The Document Type dropdown tells Gemini what structure to use (proposal format vs. email format vs. meeting notes format).
The Key Points textarea lets the user provide bullet points that Gemini weaves into a polished document.
The same Copy to Clipboard and Back to Dashboard buttons keep the user experience consistent across all three tools.

Watch the preview panel as the agent generates the Document Creator page.
Click the Business Document Creator card on the dashboard to confirm navigation works.
Enter a sample business name, select Proposal as the document type, add a recipient name, and type a few key points.
Select a tone and click Create Document.
Verify the AI produces a well-structured, formatted document in the output area.

Document Creator not generating output?

If clicking the card does nothing, tell the agent: "Make the Business Document Creator card navigate to its form page when clicked."
If the generated document looks like raw text with no formatting, tell the agent: "Format the document output with proper headings, paragraphs, and structure."
If the tone dropdown is missing options, tell the agent: "The Tone dropdown for the Document Creator should include Professional, Friendly, Formal, and Persuasive."

Still stuck? Help me fix my Business Document Creator in Google AI Studio Build Mode.

Test the complete navigation flow

With all three tools built, it's time to confirm the full app works as a cohesive product. A real user should be able to move between tools without hitting dead ends or broken buttons.

Return to the dashboard by clicking Back to Dashboard from whichever tool you're on.
Click the Content Generator card, generate a sample piece of content, click Copy to Clipboard, and click Back to Dashboard.
Click the Customer Reply Drafter card, draft a sample reply, test the Copy to Clipboard button, and return to the dashboard.
Click the Business Document Creator card, create a sample document, test the Copy to Clipboard button, and return to the dashboard.
Confirm the design looks consistent across all three tool pages (similar layout, button placement, and color scheme).

Refine anything that feels off

If any tool needs polish, describe the changes you want in the chat panel. For example: "Make the button styles consistent across all three tools" or "Add more padding to the form fields on the Reply Drafter." The agent applies changes to your existing app without starting over.

Navigation broken between tools?

If a Back to Dashboard button does not return you to the main page, tell the agent: "Fix the Back to Dashboard button on the [tool name] page so it navigates back to the main dashboard."
If clicking a dashboard card shows a blank page, the agent may not have connected the card to the tool page. Tell it: "When I click the [tool name] card on the dashboard, it should navigate to the [tool name] form page."
If the design is inconsistent, tell the agent: "Make the styling consistent across all three tool pages, matching the header, button styles, and spacing from the Content Generator."

Need more help? Help me fix navigation issues in my AI Business Assistant app.

All three tools are built, tested, and working together as a cohesive product. Next up, you'll deploy your AI Business Assistant to a live URL that anyone can access.

Deploy Your SaaS to a Live URL

Your AI Business Assistant is fully built and tested. All three tools generate professional content, draft replies, and create documents on demand. There's just one problem. Right now, only you can use it.

In this step, you'll deploy your app to a live public URL that anyone can access. Google AI Studio's Starter Tier handles all the deployment infrastructure for free. No billing account or Cloud Run setup required.

In this step, get ready to:

Review your app one final time for quality.
Publish your app using the Starter Tier.
Verify your live deployment works on a public URL.

Final review of your app

Before you ship, take one final pass through your app to make sure every tool works smoothly. A quick review now saves you from sharing a broken link later.

In the preview panel, click each of the three tool cards on your dashboard one by one.
On each tool page, fill in the form fields with sample data and click the generate button.
Verify that each tool produces AI-generated output in the output area below the form.
Test the Copy to Clipboard button on at least one tool's output.
Click Back to Dashboard on each tool page to confirm navigation works.
Check that the design is consistent across all pages (colors, fonts, spacing).

Look for rough edges

Pay attention to loading states, button alignment, and text overflow. If anything looks off, describe the fix to the agent in the chat panel before you publish.

Publish your app using the Starter Tier

The Starter Tier lets you publish up to 2 full-stack applications without setting up a Google Cloud project or billing account. Each deployment creates a corresponding service in Cloud Run automatically.

Click the Publish button in the top right corner of Google AI Studio.
Click Get Started.
Click Publish App.
Wait for deployment to complete. This may take a minute or two as Google creates your Cloud Run service.

Once deployment is complete, AI Studio provides a Cloud Run URL where you can access your live application.

What just happened?

Google AI Studio packaged your React frontend and Node.js backend into a Cloud Run service. Your app is now running on Google's infrastructure with a public URL that anyone on the internet can visit.

This counts as 1 of your 2 free Starter Tier deployments. Your services are deployed in a single Cloud Run region.

Publishing failed or stuck?

Google AI Studio's publishing feature can occasionally experience temporary issues. If your publish attempt fails or gets stuck for more than a few minutes, wait 5-10 minutes and try again.

If you already have 2 applications deployed, you will be asked to either unpublish one of the applications or upgrade to a paid account.

Help me troubleshoot my publish failure in Google AI Studio.

Verify your live deployment

Your app is live. Time to confirm it works for real users, not just inside the AI Studio preview.

Copy the Cloud Run URL that AI Studio displayed after deployment.
Open the URL in a new browser tab.
Verify that your dashboard loads with all three tool cards visible.
Click one of the tools, fill in the form, and click the generate button.
Confirm the AI generates output successfully on the live version.

Test on your phone too

Try opening the Cloud Run URL on your phone's browser. This is the same link you'll share with employers, clients, or on your portfolio. Seeing it work on mobile confirms it's truly accessible to anyone.

Save your Cloud Run URL somewhere safe. You'll use it for your portfolio, resume, or to share with clients.

App not loading at the URL?

Give it 30-60 seconds after the first deployment. Cloud Run services can take a moment to start up on the first request.

If the page stays blank or shows an error, go back to Google AI Studio and check that the publish status shows success. You can try clicking Publish again to trigger a fresh deployment.

Help me debug why my deployed app isn't loading.

You just shipped a live AI-powered SaaS product. Anyone with your URL can now use your AI Business Assistant to generate content, draft replies, and create documents. Next up, there's a Secret Mission that adds a powerful quality-of-life feature for your users.

Secret mission

Add a Business Profile Feature

Your AI Business Assistant works great, but users have to re-enter their Business Name, Industry, and Tone every single time they switch tools. What if the app could remember who they are? In this secret mission, you'll add a Business Profile feature that saves user details and auto-fills them across all three tools.

Clean Up Your Resources

Decide whether to keep your resources running or delete them entirely. This project runs on Google AI Studio's free Starter Tier, so there are no ongoing costs regardless of your choice.

Resources you used:

1 Google AI Studio app (free, no billing).
1 Cloud Run deployment via Starter Tier (free, no billing account required).

Keep everything running

No action needed. Choose this if you want your AI Business Assistant to stay live and accessible at its public URL.

Your app stays live at the Cloud Run URL at no cost on the Starter Tier.
It counts as 1 of your 2 free Starter Tier deployments.
You can continue to iterate on the app in Google AI Studio and republish at any time.

Pause - I'll come back to this later

Since the Starter Tier has no cost, there is nothing to pause. Your app will remain live without generating charges.

Bookmark your Cloud Run URL so you can find it later.
If you need to free up your deployment slot (you only get 2 on the Starter Tier), follow the Delete tab instructions when you are ready.

Delete - I don't want to use this again

Remove your app and free up your Starter Tier deployment slot.

In Google AI Studio, go to your Apps page.
In the left menu, select Apps.
Hold the pointer over the app you want to delete.
Click the trash can icon on the right-side of the row to delete the app.

This removes both the Google AI Studio app and its associated Cloud Run deployment.

That's a Wrap!

Nice work! You just designed, built, and deployed a fully functional AI-powered SaaS product using nothing but natural language prompts.

You've learned how to:

Designed and built a multi-tool AI Business Assistant dashboard with three AI-powered business tools using Google AI Studio's Build Mode.
Connected each tool to Google's Gemini API to generate professional content, customer replies, and business documents from simple form inputs.
Deployed a live AI-powered SaaS product to a public Cloud Run URL that anyone can access.
Secret Mission: Added a Business Profile feature for persistent user customization that auto-populates fields across all three tools.

Ready to quiz yourself?