What We’re Building

Imagine a Chrome extension that automatically scans your Gmail inbox, detects all your active subscriptions (like Spotify, Canva, Netflix, Notion, etc.), identifies renewal dates, amounts, and even alerts you before you're charged.

Now imagine building that, without writing a single line of code, just by chatting with an AI agent.

That’s exactly what this tutorial covers.

You’ll see how we used Emergent, an agentic AI-based app builder, to create:

- A Gmail Subscription Tracker Chrome Extension
- A backend that extracts and analyzes emails using AI (GPT-4 via Emergent’s Universal Key, no API setup required)
- A dashboard (React web app) where users can view, filter, delete or export all subscriptions
- And even a landing page where people can download the extension

Everything, from backend logic to Chrome extension manifest files, was generated through simple natural language prompts. 

And the best part? You don’t need any coding knowledge.  

How This Chrome Extension Works (In Simple Words)

Before we start building, here’s how the whole system functions:

The Core Idea

• When a user installs the Chrome extension, it asks for permission to read Gmail (only the necessary scope).
  It scans emails for receipts, payment confirmations, or subscription renewals.
  
  

• Each email is passed through GPT-4 using Emergent's built-in LLM Key, no OpenAI account needed.

  
  

• The AI extracts:

  
  

  • Service/Platform name → e.g., “Canva”

  • Billing amount → e.g., “$12.99”

  • Renewal date → e.g., “renews on Feb 10”

  • Billing frequency → e.g., “monthly/yearly”
    
    

• All this data is then shown inside the dashboard we built automatically.

Behind the Scenes (Made Easy)

You don’t need to know JavaScript, Chrome APIs, React, or Google Cloud, everything is generated using natural language, start to finish.  

Building on Emergent 

Now let’s actually build this inside Emergent, the fun part.

If you’ve never built here before, think of Emergent as your AI engineer.

You just describe what you want, and the AI agent builds, tests, and debugs the entire system for you.

Here’s exactly how to do it

Step 1 : 

Go to emergent.sh and create a free account to get started. 

The first step in the journey is setting up your Emergent project. 

This is where you’ll define the vision and inspiration you have for project : 

Here is the exact prompt we gave :  

“Build a Chrome extension that connects to a user’s Gmail account, scans emails for subscription or receipt keywords (like “subscription”, “renewal”, “invoice”, “payment confirmed”), extracts merchant names, prices, and renewal dates, and displays them in a dashboard.

The dashboard should include:

Monthly spending summary

Upcoming renewals

Top 5 recurring subscriptions

Option to export data as CSV

Use GPT-4 (via Emergent’s Universal LLM key) to summarize each subscription email in one line (e.g., “You’re paying $9.99/month for Spotify – renews on Nov 15”).

UI: clean, minimalist, with tabs for “Overview”, “Details”, and “Export”.”

Step 2 : Answer the agent’s clarifying questions 

To make sure it builds exactly what we want, the agent asked things like:

• How do you want Gmail access to work — Gmail OAuth 2.0 or API key?

• Should I use Emergent’s Universal LLM key for GPT-4 extraction?

• What email range should I scan — last 30 days, 3 months, custom?

• Should the Chrome extension be standalone or inside a web app?

And our answers were simple:

• Use Gmail OAuth 2.0, but handle setup for me [how to do this is explained later in the tutorial!]

• Yes, use Emergent’s Universal LLM Key (so no API setup needed)

• Add custom date filters

• Build a standalone Chrome extension + a React-based dashboard + a landing page 

After that, the agent started building autonomously. 

What Emergent Started Generating Automatically

- Chrome Extension (manifest, background Gmail logic, popup UI)
- Backend (FastAPI server that reads Gmail, extracts receipts, uses GPT-4 to structure data, sends it back)
- React Dashboard + Landing Page (to view subscriptions, filter, export CSV, and let users download the extension) 

At this point, the core structure was ready - extension files, backend code, dashboard UI, and landing page - all built from one prompt and a short conversation. 

Here is the first preview :  

Getting the Extension Working in Your Browser

Once the agent generated the first version of the Chrome extension, you needed to load it into your browser to test it.

Here’s the process, simplified and in the exact order it happened:

1. Download the Chrome Extension Folder

• The agent gives you a ZIP file named something like /chrome-extension/.

• You have to extract it - inside were files like:

  • manifest.json

  • background.js

  • popup.html, popup.js 

2. Load It in Chrome (Developer Mode)

1. Open Chrome → go to:
   chrome://extensions/

2. Turn on Developer Mode (top-right corner).

3. Click “Load Unpacked” → select the folder that contains manifest.json.

If done correctly, your extension now appears in the Chrome toolbar.

 3. Getting Your Extension ID (Important Step)

Chrome only gives you an Extension ID after the first upload.

• Once loaded, you will see something like:
  Extension ID: abcdefghijklmno1234567

• You’ll need this ID later while creating Google Cloud OAuth credentials (Gmail API only works for approved extension IDs). 

4. Add OAuth Credentials to manifest.json

After getting your first Extension ID, you will now update the extension with real credentials:

• Go to Google Cloud Console → APIs & Services → Credentials

• Create OAuth Client → Chrome App

• Paste your Extension ID

• Google gives you a client_id 

You then need to add this to your manifest.json like:

"oauth2": {
  "client_id": "xxxxxxxxxxxxxxxx.apps.googleusercontent.com",
  "scopes": ["https://www.googleapis.com/auth/gmail.readonly"]
}

5. Refresh the Extension

After updating the manifest file:

• Go back to chrome://extensions/

• Click the Refresh/Reload (🔄) icon on your extension

• No need to delete or re-upload - just refresh to apply changes  

How the Chrome Extension works : 

Once the extension was installed and connected to Gmail, everything started working together in a seamless loop. 

The Chrome extension first scans your Gmail inbox (based on keywords like subscription, renewal, invoice), sends those emails to the backend, where GPT-4 processes the email content using Emergent’s Universal LLM Key and extracts structured data like merchant name, price, currency and renewal date. 

This cleaned data is then sent back to both the extension and the React dashboard, where users can instantly see their monthly spending, upcoming renewals, top subscriptions and filter everything by date

All of this happens automatically - no manual database work, no coding, and no config files - just natural language prompts, and Emergent agents generate the extension, backend and dashboard for you.  

Debugging & Testing : How You Can Fix Issues Without Writing Code

As you start testing your Chrome extension, you might run into small problems - missing data, blank UI, API errors, or Spline/Gmail not loading.

The good news? You don’t fix anything manually.

You just take a screenshot of the error, upload it inside Emergent, describe what’s wrong - and the agent debugs itself.

Here’s how we did it, step-by-step:

Whenever something broke, we didn’t touch the code. We simply:
→ Took a screenshot of the bug (runtime error, missing Gmail data, blank extension screen, etc.)

→ Pasted it into Emergent and wrote: “This is broken - can you find the issue and fix it?”

From there, the agent:

• Located the exact line of error in the backend or Chrome extension files

• Fixed the logic autonomously (API endpoint, missing import, Gmail auth flow, frontend rendering) 

• Rebuilt and redeployed the updated code automatically

• Showed the new working version

Real Debug Examples (That You Might Face Too)

• ❌ Gmail authentication failed → we sent a screenshot → agent fixed OAuth flow & updated manifest.json
  
  

  

  
  

• ❌ “Module not found” or build failed → screenshot → agent auto-installed dependencies like npm install @googleapis/gmail or pip install google-api-python-client, restarted server
  
  

• ❌ Blank popup screen inside Chrome extension → screenshot → agent fixed missing popup.js reference

You just show the error and the AI fixes itself.

That’s the real power of Emergent, debugging becomes a conversation, not a technical task. 

What Users Actually See in the Final Dashboard

Once your Chrome extension scans Gmail and the backend processes all subscription emails, users can head to the dashboard — and this is exactly what they see (just like in the image you shared):

Real-Time Subscription Dashboard

A clean, dark UI where users enter their Gmail ID → click Load Data → and instantly see their subscription breakdown.

The dashboard is divided into sections:

Summary Cards at the Top

• Monthly Spending – Total active spending (e.g. $159/month → auto-calculated into yearly).

• Active Subscriptions – Number of unique services detected (e.g. 2 tracked services).

• Upcoming Renewals – Subscriptions renewing in the next 30 days (e.g. 1 renewal coming up). 

• 
  

Top Subscriptions List

Below the analytics cards, users see their highest-cost subscriptions listed like this:

This list automatically updates based on email receipts + GPT extraction.

Tabs Built Automatically

Just like a real SaaS app, the agent-generated UI gives three tabs:

• Overview – Clean analytics + top 5 subscriptions.

• Details – A table view of all subscriptions with billing cycle, merchant, amount, next renewal. 

• Export – One-click button to download all data as CSV. 

  

Landing Page (Also Auto-Built)

The agent even created a mini-marketing site that explains:

• What the Chrome Extension does

• How to install it

• Why Gmail data stays secure

• A Download Extension button

And all of this was built using just natural language prompts, no manual coding.   

Isn’t that crazy? 

P.S. Right now, your app is limited to internal users. 

Here’s how to open it up to everyone:

1. Go to Google Cloud Console

• Visit: https://console.cloud.google.com

• Select the same project that contains your OAuth credentials

2. Navigate to OAuth Consent Screen

• In the left sidebar, go to APIs & Services → OAuth consent screen

3. Change User Type

• Current setting: Internal (restricted to your org users)

• Click “Edit App” or “Make External”

• Change the User Type to External

• Click Save or Publish App

Once that’s done, anyone can sign in with Google, connect their Calendar and ClickUp, and use your dashboard, making it a fully usable SaaS-style app built on Emergent.

What You Can Build Next

Right now, you have a working Gmail Subscription Tracker that auto-scans receipts, extracts subscription data using GPT, and displays it beautifully inside a dashboard.

This is already a polished MVP, but what makes it exciting is how easily this can grow into a full-fledged SaaS product. 

Here’s how you can evolve it further.

Immediate Enhancements (Next 1 - 2 Weeks)

The first upgrades are simple yet extremely impactful. You can start by adding email notifications. For example, every week or month, the system can automatically email users a summary of how much they’re spending on subscriptions. You can even trigger alerts a few days before renewals, notify users when a price increases, or when a completely new subscription is detected from Gmail.

Another useful addition is better subscription management inside the dashboard. That means allowing users to mark a service as active, cancelled or trial, add small personal notes like “shared with flatmate” or “cancel next month,” and even include smart links that take users directly to the subscription’s cancellation or account management page (like Google, Netflix, Notion, etc.).

To make it more insightful, you can add analytics and trends. Imagine showing charts of spending per month, category breakdowns like “Entertainment vs. Productivity vs. Finance,” or even how much a user could save if they cancel X number of subscriptions. This transforms your dashboard from just a tracker into a smart financial tool.

Lastly, users might want to connect multiple Gmail accounts — personal, work, family — and see everything in one place. So enabling multi-account support and switching between accounts in the dashboard becomes a natural next step.

Turning This into a Real SaaS (3 - 6 Months)

Once these features are in place, you can move from “cool side project” to “real startup”. The cleanest way to monetize is through a Freemium model. The free version can let users track up to 10 subscriptions manually, while the Pro version unlocks unlimited tracking, auto-scanning, notifications, analytics, and multiple Gmail accounts.

If you ever want to target businesses or finance teams, you can also offer an Enterprise plan - with team dashboards, admin-level analytics, API access, and white-label options.

Another approach is a one-time lifetime purchase, which appeals to people who don’t like subscriptions. You can launch it on platforms like AppSumo or Gumroad. 

Or third option - a completely free product supported by affiliate revenue. Every time your dashboard detects a paid service (like Netflix or Adobe), it can suggest a cheaper alternative and earn a commission when users switch.

Wrapping Up  

What you just built isn’t a demo. 

It’s a fully working AI-powered Chrome extension + backend + dashboard - built end-to-end using simple natural language prompts on Emergent. No manual coding. No messing around with servers, OAuth headaches, folder structures, or deployment scripts.

You gave an idea → the agent asked a few clarifying questions → and within minutes, it built:

• A functioning Chrome extension with Gmail OAuth

• A backend that connects to Gmail, extracts subscriptions using GPT, and removes duplicates

• A React dashboard showing monthly spending, renewal dates, CSV downloads

• Live debugging - where we simply uploaded screenshots, and the agent fixed itself autonomously

• A real-world product you can ship, monetize, and showcase publicly

If this sparked even a little excitement in you,imagine what happens when you build your second project, your tenth project, your first paying SaaS.

This is exactly why we built Emergent - to make shipping ideas feel like talking.

So go ahead. 

Open Emergent, type your first prompt, and let the agent build the next thing with you.