Build a Web App Connected to Google Sheets With Google AI Studio

Create the Lead Tracker Sheet

Start with a simple Google Sheet containing the data you want the app to manage. For this guide, we will use a Lead Tracker as the example. Create a new Google Sheet and name it Lead Tracker, then add these columns in the first row.

Sheet name

Lead Tracker

Columns (first row)

Name | Email | Service | Status | Date

Example rows (optional)

Sarah | sarah@example.com | Website | New | 2026-09-01 Adam | adam@example.com | SEO | Contacted | 2026-09-01

Keep the Sheet Simple

For the first version:

Use one worksheet/tab

Keep one header row

Use clear column names

Avoid merged cells

Avoid complicated formulas

Avoid hidden data the app should not expose

The Sheet will hold the data. The web app will become the easier interface for working with it.

Copy the Sheet URL

Open the Google Sheet and copy its URL. Keep it ready for the next step.

Start Building in Google AI Studio

Open Google AI Studio and start a new Web app in Build mode. Use the following prompt.

Build the Lead Tracker Web App

Builds a clean lead-management dashboard connected to Google Sheets via AI Studio's native Workspace integration — view, search, filter, add, edit, and change status on real Sheet rows, with New/Contacted/Qualified/Won/Lost statuses. Explicitly forbids Firebase, Supabase, another database, payments, analytics, team roles, or fake/localStorage backend storage — Google Sheets stays the real source of data, reached only through Google Sign-In and AI Studio's own Workspace integration, never a custom OAuth build. Builds a clean, responsive first version, then explains what still needs to be connected or authorized.

Build a clean, professional web app that works as a simple lead-management dashboard connected to Google Sheets. I already have a Google Sheet with these columns: - Name - Email - Service - Status - Date Use Google AI Studio's native Google Sheets Workspace integration for the data. The app should allow me to: - connect to my Google Sheet - view all leads in a clean responsive table or list - search leads by name or email - filter leads by status - add a new lead - edit an existing lead - change the lead status - refresh the data from Google Sheets Use these status options: - New - Contacted - Qualified - Won - Lost Keep the first version simple. Do not add: - Firebase - Supabase - another database - payments - analytics - team roles - complicated CRM features - unnecessary charts Google Sheets should remain the source of the data. Do not create fake backend storage or silently fall back to browser localStorage. Use Google Sign-In and the Google Sheets Workspace integration provided by Google AI Studio rather than building a custom OAuth implementation. Design the app to feel like a practical lightweight business tool: - clean header - clear lead count - search - status filter - Add Lead button - readable lead table/list - simple Add/Edit form - good empty, loading, success, and error states - responsive mobile layout Do not overdesign it. Build the working first version and then explain what I need to connect or authorize before testing it with my real Google Sheet.

How the Sheets Integration Works

Google AI Studio currently supports Google Sheets for reading, writing, and formatting spreadsheet data. When a Workspace integration is added, AI Studio can automatically wire the necessary Google API, generate the server-side integration code, and add the Google authorization flow.

Enable Google Sheets

If AI Studio asks you to enable the integration, open the Integrations panel and enable Google Sheets. Google documents both approaches: you can request the integration directly in the prompt, or enable the Workspace app from the Integrations panel.

Integrations Google Sheets

NOTE

Do not manually create a Google Cloud project or OAuth client unless AI Studio specifically tells you the native integration cannot support your particular workflow.

Sign In With Google

Run the app. When prompted:

Click Sign in with Google. Select the Google account that owns or can edit the Sheet. Review the requested permissions. Grant only the permissions needed for the app.

With AI Studio's Workspace integration, the signed-in user authorizes the app to access their own Google Workspace data.

Connect the Sheet

Use your copied Google Sheet URL when the app asks which spreadsheet to use. If the generated app does not yet have a clear way to select the spreadsheet, use this prompt.

Improve the Google Sheets Connection Flow

Adds a clear, beginner-friendly way to connect or select the intended Google Sheet — shows whether Google is connected, reads the lead worksheet, validates that Name/Email/Service/Status/Date all exist, and shows a useful error for the wrong spreadsheet or a failed request rather than ever showing fake sample data. Keeps using AI Studio's native Sheets Workspace integration, never a custom OAuth system.

Improve the Google Sheets connection flow. I want the user to provide or select the Google Sheet that this app should manage. Keep this beginner-friendly. The app should: - clearly show whether Google is connected - let me connect the intended spreadsheet - read the worksheet containing the lead data - validate that these required columns exist: - Name - Email - Service - Status - Date - show a useful error if the wrong spreadsheet is selected - never display fake sample data when the Google Sheets request fails Do not build a custom OAuth system. Continue using Google AI Studio's native Google Sheets Workspace integration.

Test Reading

The leads already inside the Sheet should now appear in the dashboard.

Google Sheet row

Sarah | sarah@example.com | Website | New

Web App

Sarah should appear as a real lead.

Test Adding a Lead

Click Add Lead, then enter a new lead and save it.

Example lead

Name: Michael Email: michael@example.com Service: Web Design Status: New

Now reopen or refresh the Google Sheet. A new row should appear. That is the important test: adding a lead in the web app should create exactly one new row in the Google Sheet.

Test Updating a Lead

From the dashboard, change Michael's status from New to Contacted. Then check Google Sheets again — the corresponding Sheet value should also change.

If Something Does Not Work

Test the Complete Google Sheets Integration

Verifies Google authentication, that the intended spreadsheet is reachable, that existing rows display correctly, that adding/editing a lead and changing status writes to exactly the right row/cell, and that refreshing pulls the latest Sheet data — inspects any server-side or Sheets API errors and fixes the smallest root cause. Never swaps Google Sheets for localStorage, Firebase, Supabase, or mock data just to make the UI look functional. Finishes with Google Sheets connection: WORKING or NOT WORKING.

Test the complete Google Sheets integration. Do not redesign the app. Verify: 1. Google authentication succeeds. 2. The intended spreadsheet can be accessed. 3. Existing Sheet rows are displayed correctly. 4. Adding a lead creates exactly one new row. 5. Editing a lead updates the correct existing row. 6. Changing Status updates the correct cell/record. 7. Refreshing the app retrieves the latest Sheet data. Inspect any server-side or Google Sheets API errors. Fix the smallest root cause. Do not replace Google Sheets with localStorage, Firebase, Supabase, or mock data just to make the UI appear functional. Finish with: Google Sheets connection: WORKING / NOT WORKING

Polish Without Expanding Scope

Once the Google Sheets connection works, improve only what is necessary for a usable finished app.

Polish the Lead Tracker App

Polishes visual hierarchy, spacing, table readability, search, status filters, the Add/Edit Lead flow, status badges, loading/empty/error states, and mobile responsiveness — without expanding scope. Adds sensible validation (required name, email format when provided, valid status, no duplicate submissions), confirms success only after the real Google Sheets write succeeds, and never adds decorative charts, extra auth, another database, AI features, payments, team management, unrelated CRM features, or fake data when Sheets is unavailable. Tests the full app and finishes with App status: READY or NOT READY.

Polish this Google Sheets lead-management app without expanding its scope. Preserve the working Google Sheets integration. Improve: - visual hierarchy - spacing - lead table/list readability - search - status filters - Add Lead flow - Edit Lead flow - status badges - loading states - empty states - error messages - mobile responsiveness Make it feel like a simple professional business dashboard. Also add sensible validation: - Name should not be empty - validate email when provided - Status must use one of the supported values - prevent accidental duplicate submissions When adding or updating a lead: - show a clear loading state - confirm success only after the Google Sheets operation succeeds - show a useful error if the operation fails - refresh the interface with the latest Sheet data afterward Do not: - add charts just for decoration - add authentication beyond the Google authorization already required - add another database - add AI features - add payments - add team management - add unrelated CRM functionality - use fake data when Google Sheets is unavailable Then test the complete application. Finish with: App status: READY / NOT READY If NOT READY, list only the remaining important problems.

Run the Final Test

Complete this exact flow.

Open the app. Sign in with Google. Connect the correct Sheet. Confirm existing rows appear. Search for an existing lead. Filter by status. Add a new lead. Open Google Sheets and confirm the row was created. Edit that lead in the app. Confirm the Sheet was updated. Refresh the app. Confirm the latest data still appears. Test the main interface on mobile.

Google Sheets, Not Just the Page

The important result: changes made through the app are stored in the real spreadsheet instead of disappearing when the page refreshes.

Best Fit: Personal or Small-Team Sheets Tools

This simple setup is best for tools where you or the signed-in user work with Google Sheets data in their own Google account. Google AI Studio's native Workspace authorization gives each signed-in user access to the data they authorize from their own account. This guide is excellent for things like:

- Lead tracker

- Simple CRM

- Expense tracker

- Inventory manager

- Task tracker

- Content planner

- Customer list

NOT INTENDED FOR

A public multi-user SaaS where hundreds of users all access one private spreadsheet owned by you. That requires a different data architecture and would make this beginner guide unnecessarily complicated.