DEV Community: naveen gaur

How to Analyze Your Google Analytics Data with AI: GA4 AI Agent Guide

naveen gaur — Wed, 27 May 2026 17:11:28 +0000

Stop Wrestling with Dashboards: How to Analyze Your Google Analytics Data with an AI Agent

If you have ever opened Google Analytics 4 and immediately felt mentally exhausted, you are not alone.

GA4 is powerful, but for many people it feels:

overly technical,
difficult to navigate,
and frustratingly slow for answering simple business questions.

Something like:

“Why did traffic drop this week?”

can quickly turn into:

opening multiple reports,
comparing date ranges,
adding filters,
exporting spreadsheets,
and manually trying to interpret charts.

The bigger your website or marketing operation becomes, the worse this friction gets.

That is why conversational analytics is becoming one of the most interesting AI workflows right now.

Instead of manually searching dashboards, people are starting to ask questions directly to AI tools connected to their analytics data.

What Conversational Analytics Feels Like

Instead of navigating reports, imagine opening Google Antigravity or Claude Code and asking:

“Which landing pages are getting traffic but poor engagement?”

And receiving:

Top opportunities detected:

1. /seo-guide
- High organic traffic
- Average engagement time significantly below site average
- High mobile bounce rate

2. /landing-page-services
- Strong paid traffic
- Low scroll depth
- Weak conversion performance

Or asking:

“Why did conversions drop after our homepage redesign?”

And getting:

Organic mobile traffic declined 18% after the redesign.

The decline primarily affected:
- Android users
- Google Search visitors
- Service landing pages

Bounce rate also increased on smaller screen sizes.

This is the core idea behind conversational analytics:
turning dashboards into questions and answers.

But Here’s the Important Reality Most Articles Skip

Right now, there is no magical:

“Connect Claude or ChatGPT directly to GA4 in one click”

solution. Most modern AI analytics workflows still rely on:

Model Context Protocol (MCP) servers
Secure middleware integration layers
Normalized API connector pipelines

That is important to understand because many articles oversimplify how this ecosystem actually works. The current reality of direct integration is closer to this:

Google Analytics 4 (GA4) API
            ↓
  MCP / Connector / API Layer
            ↓
  AI Agent / Workspace (Antigravity, Cursor, ChatGPT, Claude)
            ↓
  Conversational Analysis & Insights

The middle layer handles the heavy lifting: authentication, API permissions, event schema normalization, data caching, and query orchestration. Without this structural layer, AI tools cannot reliably interact with GA4 data directly.

Why This Infrastructure Exists

Google Analytics data is not naturally structured for conversational AI. Under the hood, GA4 APIs involve:

Complex metrics and dimensions (e.g., activeUsers, sessionDefaultChannelGroup)
Strict API quotas and query limits
OAuth 2.0 permission scopes and project credentials
Custom event schemas, attribution models, and data compatibility rules

Even experienced developers find the GA4 API ecosystem challenging to navigate. That is why modern AI analytics workflows focus heavily on MCP (Model Context Protocol) to translate complex analytics databases into formats conversational engines can immediately reason about.

The Three Main Ways to Use AI with GA4 Today

Right now, most conversational analytics workflows fall into three categories.

1. Manual CSV Exports (The Simple Way)

This remains the most common starting point. You navigate GA4, export a CSV report, upload it to Claude or ChatGPT, and ask for an analysis.

Pros: Zero setup required; works with any standard chatbot.
Cons: Stale data, manual work, strict row/token limitations, and a lack of real-time query capability.

2. Connector Platforms (The Easy, No-Code Way)

Paid middleware platforms act as a translation bridge, automatically streaming normalized analytics data directly into ChatGPT Custom GPTs, Claude Projects, or custom Slack dashboards.

Pros: Quick onboarding, no infrastructure management.
Cons: Recurring subscription fees, dependency on third-party security pipelines, and limited developer customization.

3. Direct MCP + API Integration (The Developer Way)

The gold standard for developers, technical SEOs, and automation engineers. By establishing a direct connection between your AI workspace and the GA4 Data API via an MCP server or local credentials, you get instant, unlimited conversational query power.

Pros: Direct API access, zero middleware fees, local-first privacy, and infinite customization.
Cons: Requires a one-time technical authentication setup.

What Is Model Context Protocol (MCP)?

Model Context Protocol (MCP) is an open standard that acts as a universal bridge between AI reasoning engines and local or remote tools, APIs, and databases. Instead of manually copy-pasting data, MCP allows your AI assistant to securely query live databases, inspect systems, and fetch real-time metrics on demand.

Easy Setup Guide: Building Your GA4 AI Agent

Setting up your own GA4 conversational analytics agent is straightforward. Here is the blueprint to get it running:

Step 1: Grab Your GA4 Property ID

Log in to Google Analytics, go to Admin ➔ Property Settings, and copy the numeric Property ID shown at the top right.

Step 2: Enable the APIs in Google Cloud

You need to authorize API access. Go to your Google Cloud Console, select your project, and enable two free APIs:

Google Analytics Data API (to run and read reports).
Google Analytics Admin API (to read custom dimensions and settings).

Step 3: Securely Authenticate

The cleanest way to authorize the connection without hardcoding sensitive passwords is using Google's official Application Default Credentials (ADC). Open your terminal and run:

gcloud auth application-default login --scopes="https://www.googleapis.com/auth/cloud-platform,https://www.googleapis.com/auth/analytics.readonly"

This securely logs you in and stores a local credential token that your system-wide environments can inherit.

Step 4: Connect Your AI Platform

For IDEs with Settings UI (Cursor, Windsurf): Add the pre-built Google Analytics server in your IDE's Model Context Protocol (MCP) settings, passing in your GA4 Property ID and Google Cloud Project ID.
For Google Antigravity IDE (Unified ADC Sync Method): Because Antigravity is a high-performance agentic workspace, it directly inherits system-wide Application Default Credentials. To bypass Google's strict security blocks locally without a settings GUI:
- 🔥 The Ultimate Agentic Shortcut: Since Google Antigravity is a fully autonomous coding agent, you don't even have to copy and paste these files yourself! You can literally copy the URL of this article, paste it into your Antigravity chat, and say: _"Read this guide, extract the auth scripts from the Appendix, write them to my workspace, and execute them to set up my GA4 integration." Your agent will read, write, and run the entire pipeline for you in seconds!_
- Manual Step-by-Step Setup: If you prefer configuring this yourself:
- Save the two helper scripts, authenticate_google.py and sync_gcloud_adc.py from — Open files , directly into your project's root folder.
- Run your local OAuth script authenticate_google.py to authorize your custom Google Cloud client credentials and generate tokens_unified.json.
- Run sync_gcloud_adc.py to synchronize these tokens and write the unified credentials directly to your local ADC file:
```
   python sync_gcloud_adc.py
```

4. **The Ultimate Value:** Once these scripts run, both your local reporting tools and your **Google Antigravity agentic AI assistant** will instantly inherit this session. Your Antigravity agent will automatically detect your project structure, read your credentials, and query your GA4 Data API natively and completely unblocked on your behalf!

Critical "Gotchas" to Avoid

Enable BOTH APIs: If you forget to enable the Admin API in Step 2, your agent will be partially blind. It might pull basic numbers but won't understand your custom events or property setups.
The 403 "Quota Project" Error: If Google blocks your connection with a billing/quota error, run this simple command in your terminal to set your active project:

  gcloud auth application-default set-quota-project [YOUR_PROJECT_ID]

Verify Strategic Advice: Treat your AI agent like a highly efficient junior analyst. It is incredibly fast at parsing raw numbers, but always cross-check its strategic advice before executing major site-wide code overrides.

Start Querying Your Analytics

Once connected, you can ask conversational questions directly in your workspace chat:

"Analyze our traffic trends over the last 30 days. Any unusual spikes?"

"Which blog posts have high organic traffic but low engagement times?"

"Compare our mobile vs. desktop conversions for the past month."

"Did our custom form_submit tracking events stop firing after yesterday's update?"

The Core Benefits of Conversational Analytics

The real value shift isn't just that "AI can read reports." It’s that it completely eliminates:

Dashboard hunting and report building
Repetitive CSV exports and spreadsheet formatting
Manual date-range comparisons
Disconnected charts and guessing games

It compresses hours of tedious data parsing into seconds of natural conversation, keeping you focused on building rather than navigating reporting menus.

The Important Downsides to Keep in Mind

This ecosystem still has real limitations that you must prepare for:

1. Initial Setup Friction

Configuring Google Cloud projects, OAuth consent screens, and credentials requires a one-time technical setup. It is not yet a single-click consumer workflow.

2. AI Hallucinations and Attribution Limits

AI is excellent at spotting anomalies and summarizing trends, but it can occasionally misinterpret complex attribution pathways or imply incorrect causation. Human oversight is mandatory.

3. GA4 Data Quality Rules

If your conversion tags are broken, your events aren't configured, or your tracking scripts are failing, the AI will only analyze garbage data. A healthy tracking setup is still a prerequisite.

Where the Industry Is Headed

The shift is clear: analytics is moving away from traditional, crowded dashboards and transitioning toward context-aware, conversational reporting layers. We are still early in this transition, but setting up a local-first MCP or ADC sync pipeline today gives developers, agencies, and technical founders a massive edge in speed and operational efficiency.

Final Thoughts

Most people don't actually hate web analytics. They hate the friction of finding the answers they need inside complex dashboards.

Conversational analytics changes that experience fundamentally. Instead of building manual dashboards, you ask questions and get instant, context-rich answers. Once you experience that speed, traditional reporting starts feeling incredibly slow.

Naveen Gaur is a WordPress Performance Specialist & Full-Stack Consultant specializing in speed optimization, Core Web Vitals, and technical audits for high-performance websites.

Naveen Gaur | WordPress Performance Specialist & Full-Stack Consultant

WordPress Performance Specialist & Full-Stack Consultant | Technical SEO · Emergency Recovery · Custom Web Apps | Helping Founders Fix What Others Can’t

naveengaur.com

The Complete Developer’s Guide to the Baileys WhatsApp Bot: Setup, Scaling, and VPS Deployment

naveen gaur — Wed, 27 May 2026 07:40:47 +0000

WhatsApp has become the default operating system for daily communication in regions like India. For modern web platforms—particularly in EdTech, local logistics, or localized services—forcing users to log into a complex desktop portal often results in a steep drop-off in user engagement.

When building LoopLearnX (an automated homework evaluation and tutoring tool for CBSE students), we realized that students rarely log in to a web dashboard on a desktop to upload their homework. Instead, they do their homework on physical notebooks, snap a picture, and expect instant grading.

Integrating a custom, self-hosted WhatsApp interface directly into our Next.js application was not just a convenience—it was the single most critical driver of student engagement.

This guide details the technical blueprint of how we built a resilient, memory-aware WhatsApp AI Bot using @whiskeysockets/baileys and Next.js, hosted on an Oracle Cloud VPS. We will cover the exact production failures we encountered, learnings learned, and why custom self-hosting beats off-the-shelf agent frameworks.

🚀 1. Why WhatsApp & Baileys?

The Engagement Multiplier

For many demographics, WhatsApp represents friction-free engagement. Users don't need to remember passwords, manage active sessions, or learn a new user interface. By bringing our platform inside a messaging channel, we instantly enabled frictionless student homework submissions.

The Bot Core: Why Baileys?

To connect an application to WhatsApp, you have two primary routes:

The Official WhatsApp Business Cloud API: Extremely restrictive, expensive (per-conversation pricing), and requires Facebook Business Verification. It strictly forbids sending arbitrary free-form text or non-template messages outside a 24-hour window.
Baileys (@whiskeysockets/baileys): A high-performance, headless, WebSocket-based implementation of the WhatsApp Web protocol. It allows you to programmatically control a WhatsApp account (including standard consumer or business accounts) with full messaging flexibility, zero per-message charges, and native support for modern features like multi-file authentication state.

The Hybrid Architecture

To keep operations lightweight, we split the application into a two-tier architecture:

The Gateway (Ubuntu VPS): Runs a lightweight Node.js daemon using Baileys to maintain WebSocket connections with WhatsApp servers 24/7. It listens to incoming messages, handles media download streams, and converts payloads into clean base64 data to pass forward.
The Logic Engine (Vercel Serverless): A secure Next.js API route that handles heavy database transactions (Supabase), state transitions, and LLM evaluations (Gemini-2.5-Flash).

[Student WhatsApp]
       │
       ▼ (WebSocket 24/7 connection)
[Node.js VPS Gateway (Baileys + PM2)]
       │
       ▼ (HTTP POST with x-bot-secret)
[Next.js Serverless Route (Vercel)]
  ├── 1. Authenticate Request
  ├── 2. Query Student Profile & History (Supabase)
  ├── 3. Classify & Evaluate Intent (Gemini API)
  └── 4. Write new Submission Record (Supabase)
       │
       ▼ (JSON Reply)
[Node.js VPS Gateway (Safe Queued Output)] ──► Sent back to Student WhatsApp

🛠️ 2. Step-by-Step Code Walkthrough

Part A: Setting up the Baileys Client (`index.js`)

The core responsibilities of index.js on the VPS are maintaining the WebSocket session, managing authentication states, rendering QR codes for linking, and mounting an Express endpoint to monitor status.

// index.js
require("dotenv").config();
const {
  default: makeWASocket,
  useMultiFileAuthState,
  DisconnectReason,
} = require("@whiskeysockets/baileys");
const { Boom } = require("@hapi/boom");
const pino = require("pino");
const express = require("express");
const qrcodeTerminal = require("qrcode-terminal");
const qrcode = require("qrcode");
const { handleIncomingMessage } = require("./bridge");

const app = express();
const PORT = process.env.PORT || 3000;

let sock = null;
let botStatus = "starting";
let currentQrImage = null;

async function connectToWhatsApp() {
  // 1. Initialize multi-file authentication state
  const { state, saveCreds } = await useMultiFileAuthState("auth_info_baileys");

  sock = makeWASocket({
    auth: state,
    printQRInTerminal: false, // We render custom QR inside terminal & web UI
    logger: pino({ level: "silent" }),
  });

  // 2. Listen for connection state updates
  sock.ev.on("connection.update", async (update) => {
    const { connection, lastDisconnect, qr } = update;

    if (qr) {
      botStatus = "qr_needed";
      // Render QR in terminal
      qrcodeTerminal.generate(qr, { small: true });
      // Generate Data URL QR for web UI status page
      currentQrImage = await qrcode.toDataURL(qr);
    }

    if (connection === "close") {
      const shouldReconnect =
        lastDisconnect?.error instanceof Boom
          ? lastDisconnect.error.output?.statusCode !==
            DisconnectReason.loggedOut
          : true;

      botStatus = shouldReconnect ? "disconnected" : "logged_out";
      console.log("Connection closed. Reconnecting...", shouldReconnect);

      if (shouldReconnect) {
        connectToWhatsApp();
      }
    } else if (connection === "open") {
      botStatus = "connected";
      console.log("✅ WhatsApp WebSocket Connected successfully!");
    }
  });

  // 3. Save updated credentials on session changes
  sock.ev.on("creds.update", saveCreds);

  // 4. Mount incoming message listener
  sock.ev.on("messages.upsert", async (m) => {
    if (m.type === "notify") {
      for (const msg of m.messages) {
        if (!msg.key.fromMe) {
          await handleIncomingMessage(sock, msg);
        }
      }
    }
  });
}

// Simple web UI endpoint for linking & status monitoring
app.get("/", (req, res) => {
  res.send(`
        <html>
        <body style="font-family: Arial, sans-serif; text-align: center; margin-top: 100px;">
            <h1>LoopLearnX Bot Status</h1>
            <p>Current Status: <strong>${botStatus}</strong></p>
            ${botStatus === "qr_needed" && currentQrImage ? `<img src="${currentQrImage}" alt="Scan QR Code" />` : ""}
        </body>
        </html>
    `);
});

app.listen(PORT, () => {
  console.log(`Express status server running on port ${PORT}`);
  connectToWhatsApp();
});

Part B: Creating a Resilient Message Handler (`bridge.js`)

The bridge.js file handles payload filtering, captures typed text, and handles complex media streams.

One of the biggest issues in production is text messages arriving empty at Vercel. WhatsApp packs text differently based on messaging schemas. We wrote a nested parser that extracts text under all possible client payloads. Additionally, when receiving an image, the bot downloads the file buffer, converts it to base64, and triggers our serverless endpoint:

// bridge.js
const axios = require("axios");
const { downloadMediaMessage } = require("@whiskeysockets/baileys");

const API_URL = process.env.LOOPLEARN_API_URL;
const BOT_SECRET = process.env.WHATSAPP_BOT_SECRET;

async function handleIncomingMessage(sock, msg) {
  const jid = msg.key.remoteJid;
  if (!jid || jid.endsWith("@g.us")) return; // Skip group chats

  const phone = jid.replace("@s.whatsapp.net", "");
  const content = msg.message;

  const imageMsg = content?.imageMessage;
  const isText = !!(
    content?.conversation || content?.extendedTextMessage?.text
  );

  // 1. Text Message Processing Route
  if (isText) {
    const textBody =
      content?.conversation || content?.extendedTextMessage?.text || "";

    if (!textBody.trim()) return;

    await callApi("/api/whatsapp/receive", {
      phone,
      messageType: "text",
      textBody: textBody.trim(),
    })
      .then((data) => {
        if (data?.replyText) queueMessage(sock, jid, data.replyText);
      })
      .catch(() => {
        queueMessage(sock, jid, "⚠️ System check failed. Please try again.");
      });
    return;
  }

  // 2. Multimodal Photo Homework Route
  if (imageMsg) {
    queueMessage(
      sock,
      jid,
      "📸 Photo mila! Evaluate ho raha hai... thodi der ruko. ⏳",
    );

    let imageBuffer;
    try {
      // Securely download the encrypted media buffer from WhatsApp servers
      imageBuffer = await downloadMediaMessage(msg, "buffer", {});
    } catch (e) {
      console.error("Image download error:", e.message);
      queueMessage(sock, jid, "❌ Photo download fail. Please try again.");
      return;
    }

    const imageBase64 = imageBuffer.toString("base64");
    const mimeType = imageMsg.mimetype || "image/jpeg";

    await callApi("/api/whatsapp/receive", {
      phone,
      imageBase64,
      mimeType,
      messageType: "image",
    })
      .then((data) => {
        const reply =
          data?.replyText ?? "⚠️ Evaluation failed. Dobara try karo.";
        queueMessage(sock, jid, reply);
      })
      .catch((e) => {
        console.error("API error:", e.message);
        queueMessage(
          sock,
          jid,
          "⚠️ Server connection timeout. Please try again.",
        );
      });
    return;
  }
}

async function callApi(path, body) {
  const res = await axios.post(`${API_URL}${path}`, body, {
    headers: {
      "Content-Type": "application/json",
      "x-bot-secret": BOT_SECRET,
    },
    timeout: 90000, // 90-second timeout — Gemini Vision can be slow
  });
  return res.data;
}

🚫 3. Crucial: Solving the \"Ban & Crash\" Problem (Rate-Limiting Queues)

If your bot sends multiple API calls instantly to the same recipient or pushes bulk updates simultaneously, WhatsApp will trigger a session ban. We mitigated this risk using an asynchronous, rate-limited memory queue:

const sendQueue = [];
let sending = false;

function queueMessage(sock, jid, text) {
  sendQueue.push({ jid, text });
  processSendQueue(sock);
}

async function processSendQueue(sock) {
  if (sending || !sendQueue.length) return;
  sending = true;

  while (sendQueue.length) {
    const { jid, text } = sendQueue.shift();
    try {
      await sock.sendMessage(jid, { text });
    } catch (e) {
      console.error("WebSocket send error:", e.message);
    }
    // Artificial delay mimicking natural human interaction patterns
    await sleep(1500 + Math.random() * 1500);
  }
  sending = false;
}

💡 4. Production VPS Deployment & Management

To run the Node.js Baileys gateway in a professional VPS environment, you must secure your server with PM2 process monitors and fail-safes.

Step 1: Install VPS Dependencies

Connect to your Ubuntu server:

sudo apt update && sudo apt upgrade -y
curl -fsSL https://deb.nodesource.com/setup_20.x | sudo -E bash -
sudo apt install -y nodejs
sudo npm install -g pm2

Step 2: PM2 Configuration (`ecosystem.config.js`)

Create a custom configuration file. Warning: You must run only 1 instance to prevent authorization lock conflicts:

// ecosystem.config.js
module.exports = {
  apps: [
    {
      name: "looplearnX-bot",
      script: "index.js",
      instances: 1, // DO NOT USE MAX (Cluster mode breaks Baileys)
      autorestart: true,
      watch: false,
      max_memory_restart: "500M",
      restart_delay: 5000, // Wait 5s before rebooting on crash
      env: {
        NODE_ENV: "production",
      },
    },
  ],
};

Start the bot and make it persistent across system updates:

pm2 start ecosystem.config.js
pm2 save
pm2 startup

To monitor logs and check performance status:

pm2 logs looplearnX-bot
pm2 status

🧠 Why Build Custom Instead of Using Off-the-Shelf Agents (Hermes, Landbot)?

When setting up a WhatsApp integration, many teams consider wrapper services like Hermes, Coze, or standard flow builders like Landbot. Here is a technical breakdown of why we rejected off-the-shelf agents in favor of a custom Baileys/Next.js stack:

Evaluation Metric	Off-The-Shelf Agents (e.g. Hermes, Landbot)	Custom Self-Hosted Stack (Baileys + Next.js)
API & Database Integration	Restricted to webhooks and limited UI components.	Direct access to server-side Postgres (Supabase client), executing transactions natively.
Memory Architecture	Generic system chat history (context window size limitations).	Custom Memory Context Routing. We query previous attempts for that exact homework plan ID and feed that specific context straight to Gemini.
Hinglish & Direct Tone Tuning	Very hard to enforce strict localized prompt guidelines consistently.	Full controller prompts. The model speaks in second-person direct Hinglish ("Aapne" instead of "Student ne").
Pricing Scaling	Per-message/per-run markup pricing (can grow to thousands of dollars).	$0 SaaS Fees. You only pay for a $3 VPS (Oracle/Hetzner) and raw token consumption on Gemini API.

Summary

Integrating the Baileys WhatsApp Bot with Next.js on an Oracle Cloud VPS completely transformed the adoption curve of our LoopLearnX EdTech platform. Instead of fighting friction on desktops, students now have an active personal AI tutor in their pockets.

Self-hosting using Baileys gives you total database sovereignty, complete control over token pricing, and the ability to customize your conversational workflows with zero platform restrictions. The key to operational success is keeping your VPS thread-safe, deploying rate-limited queues, and handling serverless timeout boundaries gracefully.

Naveen Gaur is a WordPress Performance Specialist & Full-Stack Consultant specializing in speed optimization, Core Web Vitals, and technical audits for high-performance websites.

Naveen Gaur | WordPress Performance Specialist & Full-Stack Consultant

WordPress Performance Specialist & Full-Stack Consultant | Technical SEO · Emergency Recovery · Custom Web Apps | Helping Founders Fix What Others Can’t

naveengaur.com

How to Go Incognito and Stop Google Analytics Tracking (GA4 Guide)

naveen gaur — Fri, 22 May 2026 19:43:17 +0000

When you launch a new website or blog, every visitor count feels like a milestone. But as you test layouts, update content, and fix bugs, your own traffic can easily inflate your metrics.

If your website gets 100 visits a week, and 40 of those visits are you checking if a button works, your data is compromised. Your average session duration, bounce rates, and conversion paths will be completely skewed by your own behavior.

The Big Myth: Does "Incognito Mode" Stop Google Analytics Tracking?

If you want to go incognito and stop Google Analytics tracking, your browser's standard Incognito Mode (or Private Browsing) is not the answer.

This is a massive misconception: Chrome's Incognito mode only prevents your browser from saving your browsing history, cookies, and form data locally on your own device. When you visit a website in Incognito mode, the Google Analytics tracking script (gtag.js) still runs completely normally. To the website owner and to Google, you are still tracked as a active user.

To truly block tracking and maintain clean data, you need to use specific opt-out tools.

Clean Data vs. Personal Privacy: Why Opt Out?

There are two distinct reasons you might want to stop Google Analytics tracking:

Data Integrity (For Site Owners/Devs): Keeping your admin views, local dev work, and testing sessions from polluting your actual user metrics.
Personal Privacy (For Everyday Users): Google Analytics is used on millions of sites to track your activity across the web. This data aggregates into behavioral profiles for targeted advertising. Opting out cuts Google's tracking link to your personal browsing footprints.

Here are the three best ways to exclude yourself from tracking, starting with the absolute easiest.

1. The Easiest Way: Browser Opt-Out & Adblockers

If your goal is to stop Google Analytics tracking in the simplest way possible without touching code or logging into complex dashboards, browser-level blocks are your best bet.

This is particularly useful if you have a dynamic IP address (an IP address that changes every time your router resets), which makes server-side IP filtering ineffective.

Option A: Install the Official Google Analytics Opt-Out Add-on

Google provides a free, lightweight browser extension specifically for this purpose.

Install the official Google Analytics Opt-out Browser Add-on.
It is available for Chrome, Firefox, Safari, Edge, and Opera.
Once enabled, the extension prevents the gtag.js script from sending tracking events to Google servers whenever you visit any website, including your own.

Option B: Use an Adblocker or Privacy Shield

If you already use an adblocker like uBlock Origin, or browse using the Brave Browser with shields turned on, you are likely already excluding yourself. These tools automatically block request pathways to google-analytics.com and analytics.google.com by default.

2. The Dashboard Way: GA4 Internal Traffic IP Filtering

For website owners who want to stop Google Analytics tracking for their entire team or household without installing extensions on every device, GA4 offers a built-in filter. If you want to ensure your traffic is excluded across all your devices (including your phone, tablet, and laptop) when working on your office or home Wi-Fi, you can set up an IP filter inside your Google Analytics admin panel.

Note: This method requires a static (unchanging) IP address.

Step 1: Define Your Internal Traffic IP

Go to your Google Analytics Dashboard and click Admin (the gear icon in the bottom left).
Under Data collection and modification, click on Data Streams and select your active Web Data Stream.
Under Google Tag, scroll down and click Configure tag settings.
In the settings block, click Show all to expand the list.
Find and click Define internal traffic.
Click Create and set up the following rule:
- Rule name: Home/Office Static IP
- traffic_type value: internal (leave as default)
- Match type: IP address equals
- Value: [Your Public IP address. If you don't know it, search "What is my IP" on Google.]
Click Create in the top right to save it.

Step 2: Activate the Data Filter

By default, GA4 creates new filters in "Testing" mode so they don't permanently discard data right away. You must activate it:

Go back to GA4 Admin -> Data collection and modification -> Data filters.
You will see a pre-built filter named Internal Traffic. Click on it.
Change the filter state from Testing to Active.
Click Save and confirm the change.

GA4 will now permanently filter out any incoming events originating from your defined IP address.

3. The Developer Way: Exclude Localhost via Code

If you are a web developer looking to stop Google Analytics tracking on your local machine (e.g., localhost:3000), you should prevent the tracking script from running at all in your development environment. This ensures your staging and local testing environments remain perfectly clean.

If you are using a modern framework like Next.js, React, or Astro, you can conditionalize the initialization script by checking the NODE_ENV environment variable.

For example, in a Next.js environment, you can modify your Root Layout like this:

// Define your GA ID only in production environments
const isProduction = process.env.NODE_ENV === "production";
const GA_ID = isProduction ? (process.env.NEXT_PUBLIC_GA_ID ?? "") : "";

export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        {/* Only inject the scripts if GA_ID is resolved in production */}
        {GA_ID && (
          <>
            <Script
              src={`https://www.googletagmanager.com/gtag/js?id=${GA_ID}`}
              strategy="afterInteractive"
            />
            <Script id="ga4-init" strategy="afterInteractive">
              {`
                window.dataLayer = window.dataLayer || [];
                function gtag(){dataLayer.push(arguments);}
                gtag('js', new Date());
                gtag('config', '${GA_ID}');
              `}
            </Script>
          </>
        )}
        {children}
      </body>
    </html>
  );
}

By ensuring that GA_ID resolves to an empty string during development, Next.js will skip rendering the script tags entirely on your local machine, keeping your dev workflow separate from your production analytics.

Have you tried blocking GA4 in your own workflow? Did you notice cleaner reports or fewer false conversions? Share your experience below — I’d love to hear how you balance analytics with privacy.

Naveen Gaur is a WordPress Performance Specialist & Full-Stack Consultant specializing in speed optimization, Core Web Vitals, and technical audits for high-performance websites.

Naveen Gaur | WordPress Performance Specialist & Full-Stack Consultant

WordPress Performance Specialist & Full-Stack Consultant | Technical SEO · Emergency Recovery · Custom Web Apps | Helping Founders Fix What Others Can’t

naveengaur.com

Google Antigravity 2.0 Broke My IDE: Fixing the Missing File Explorer and Workspace Bug

naveen gaur — Fri, 22 May 2026 05:16:59 +0000

If you recently updated Google Antigravity to version 2.0.1 or higher and suddenly lost:

your file explorer,
workspace sidebar,
code editor layout,
or previous chat history,

you’re not alone.

After updating, both:

Antigravity
and Antigravity IDE

started opening the exact same agent-focused interface on my system, with the normal IDE layout completely missing.

This guide explains:

what likely changed,
how to restore the classic IDE workspace,
and how to recover your previous chat history, settings, and extensions.

What Changed in Antigravity 2.0+

Based on the observed behavior after the 2.0.1 update, Google appears to have separated Antigravity into two distinct layers:

Antigravity (Core)

An agent-focused interface centered around:

AI conversations,
autonomous workflows,
and background agent execution.

Antigravity IDE

The traditional Electron-based development environment containing:

workspace explorer,
local terminal,
extension system,
and editor layout.

The problem is that after the update, both launchers can end up opening the same agent-focused interface instead of the IDE workspace.

That makes it look like:

your files disappeared,
your workspaces were deleted,
or your setup was reset.

Fortunately, the actual project files and chat databases are still stored locally.

Symptoms of the Bug

After updating to 2.0.1+, you may see:

Missing file explorer sidebar
No visible workspace folders
Agent-only conversation interface
Empty editor layout
Missing extensions/themes
Missing previous chat history
Both launchers opening the same interface

This is especially alarming if you rely on Antigravity as your primary development workspace.

Quick Fix: Restore the IDE Workspace

The fastest workaround is to temporarily rename the updated app.asar package so the IDE falls back to its original workspace renderer.

Step 1: Close All Antigravity Processes

Fully close:

Antigravity
Antigravity IDE

Use Task Manager if necessary.

Step 2: Rename `app.asar`

Open PowerShell as Administrator and run:

cd "$env:LOCALAPPDATA\Programs\Antigravity\resources"

Rename-Item app.asar app.asar.bak

Now launch Antigravity IDE normally.

On my system, this restored:

the workspace explorer,
folder tree,
code editor,
and standard IDE layout.

Why This Works

Based on testing and reports from other users, the updated app.asar package appears to prioritize the newer agent-first interface layer.

Renaming it forces Electron to bypass that package and fall back to the original IDE rendering flow.

This is not necessarily the official intended architecture, but it consistently restored the classic IDE interface during testing.

Important Note

If you ever want to restore the newer agent interface again, simply reverse the rename:

Rename-Item app.asar.bak app.asar

Restoring Old Chat History and Workspace State

After restoring the IDE view, you may still notice:

missing chat history,
missing recent workspaces,
missing settings,
or empty conversation panels.

That happens because the update generates a new configuration directory.

Your old data still exists — it just lives in the previous profile folder.

Step 3: Copy the Old User Profile

Close Antigravity IDE completely.

Then:

Press Win + R
Enter:

%APPDATA%

Open the Roaming directory

You should now see two folders:

Antigravity
Antigravity IDE

Step 4: Migrate the Old User Folder

Open:

Antigravity

Copy the folder named:

User

Then paste it into:

Antigravity IDE

When Windows prompts:
choose:

Replace files in destination

This restored:

previous conversations,
workspace state,
and historical session data on my setup.

Fixing Missing Extensions and Themes

Some extensions may still fail to appear after restoring the profile.

This appears related to extension indexing after the update.

Step 5: Rebuild Extension State

Navigate to:

C:\Users\<YourUsername>\

Copy the contents of:

.antigravity

into:

.antigravity-ide

Then open:

.antigravity-ide\extensions\

Delete:

extensions.json

This forces the IDE to rebuild the extension index during the next launch.

After restarting Antigravity IDE, my extensions and themes reappeared correctly.

What Likely Caused the Issue

Based on observed behavior and discussions from other developers, the issue appears related to:

shared Electron installation paths,
launcher routing conflicts,
and the transition toward the newer agent-first architecture.

The update also appears to generate:

new profile directories,
new extension indexes,
and separate IDE configuration paths.

That separation likely explains why:

chat history,
themes,
extensions,
and workspace state initially appear missing.

Verification Checklist

After completing the recovery process, verify:

File explorer sidebar restored
Workspace folders visible
Previous chats restored
Extensions loaded correctly
Themes rendering properly
Terminal functioning normally
Existing repositories accessible

Final Thoughts

The confusing part of this update is that it initially looks catastrophic:

missing files,
broken workspaces,
deleted conversations,
and lost configuration.

In reality, most of the data still exists locally.

The issue appears to be primarily:

launcher routing,
profile separation,
and extension indexing.

Hopefully future releases handle the transition more clearly, because the current behavior makes it feel like the entire IDE environment vanished overnight.

If you ran into this issue too, I’d be interested to know whether the same workaround restored your workspace setup or if your installation behaved differently.

About the Author

Naveen Gaur is a full-stack developer focused on AI-native workflows, CMS systems, frontend performance, and developer tooling.

Naveen Gaur | WordPress Performance Specialist & Full-Stack Consultant

WordPress Performance Specialist & Full-Stack Consultant | Technical SEO · Emergency Recovery · Custom Web Apps | Helping Founders Fix What Others Can’t

naveengaur.com

Ghost CMS Theme Development Explained: post.hbs, Partials, and Related Posts

naveen gaur — Sun, 17 May 2026 09:42:36 +0000

Ghost CMS theme customization looks deceptively simple until you start modifying Handlebars templates directly.

The moment you move beyond basic CSS overrides and start editing:

post.hbs
partials
related post logic
or custom layouts

context propagation becomes the thing that quietly breaks everything.

I recently worked on a Ghost CMS customization project involving:

custom author box integration,
sidebar restructuring,
related posts debugging,
and responsive layout fixes.

This article breaks down the Ghost theme concepts that matter most when modifying production Ghost themes — especially the Handlebars context mistakes that commonly cause partials and related posts to fail silently.

Understanding Ghost Theme Structure

A Ghost theme is primarily built from:

Handlebars (.hbs) templates,
CSS,
JavaScript,
and reusable partials.

For article pages specifically, these are the files that usually matter most:

File	Purpose
`post.hbs`	Individual article page layout
`index.hbs`	Main blog/homepage listing
`partials/related.hbs`	Related posts section
`partials/latest.hbs`	Latest posts section
`partials/topper.hbs`	Post header area
`partials/card.hbs`	Reusable content cards
`assets/css/screen.css`	Main frontend styling

Most production Ghost customizations eventually involve editing:

post.hbs,
partial structure,
and layout containers.

That’s where things usually start breaking.

Why `post.hbs` Matters So Much

post.hbs controls the layout of individual article pages.

A simplified structure often looks like this:

{{!< default}}

{{#post}}
  {{> topper}}

  <div class="content-with-sidebar-container">
    <article class="c-post {{ post_class }}">
      <div class="c-content">
        {{ content }}
      </div>
    </article>

    <aside class="article-sidebar">
      <!-- Sidebar -->
    </aside>
  </div>

  {{> related}}
  {{> latest}}
{{/post}}

The important part here is:

{{#post}}

Everything inside this block has access to the current post context.

That includes:

title,
tags,
authors,
content,
IDs,
custom helpers,
and partials included inside the block.

If a partial loses access to the correct context, features like:

related posts,
author sections,
paywalls,
or metadata rendering

can silently stop working even though the template itself still renders.

The Most Common Ghost CMS Mistake: Context Errors

This is probably the most common issue I see in Ghost theme debugging.

Inside {{#post}}, you are already in the post context.

That means:
you access properties directly.

Wrong

{{#get 'posts' filter='tags:[{{post.primary_tag.slug}}]+id:-{{post.id}}'}}

Correct

{{#get 'posts' filter='tags:[{{primary_tag.slug}}]+id:-{{id}}'}}

The mistake is subtle but important.

Inside the post context:

primary_tag.slug works,
post.primary_tag.slug does not.

This is one of the biggest reasons related post sections silently fail.

A Working Related Posts Partial

Here’s a working related.hbs example:

{{#get 'posts'
  filter='tags:[{{primary_tag.slug}}]+id:-{{id}}'
  include='tags,authors'
  order='published_at desc'
  limit='4'
}}

  {{#if posts}}
    <div class="c-section c-section--related">
      <div class="o-grid o-grid--4-columns">
        {{#foreach posts}}
          {{> card showExcerpt=true}}
        {{/foreach}}
      </div>
    </div>
  {{/if}}

{{/get}}

This fetches:

up to 4 posts,
sharing the same primary tag,
excluding the current post.

Why Related Posts Still Sometimes Fail

Even with correct syntax, related posts may still not appear.

The most common reasons:

1. No Primary Tag Assigned

Ghost depends heavily on the primary tag.

If no primary tag exists:
the filter returns nothing.

2. Not Enough Related Posts

If only one post exists for that tag:
there’s nothing to show.

3. Broken `card.hbs`

The query may work correctly while the rendering partial itself fails.

Always verify:

partials/card.hbs exists,
and renders independently.

Debugging Ghost Partials

One thing I like about Ghost is:
most template problems become much easier once you understand how to debug context flow.

Technique 1: HTML Debug Comments

Add visible comments:

<!-- RELATED SECTION START -->
<!-- RELATED SECTION END -->

Then inspect page source.

If the comments never appear:
the partial itself is not loading.

Technique 2: Force Visibility With CSS

.related-section,
.c-section--related {
  border: 3px solid red !important;
  display: block !important;
  min-height: 50px;
}

This helps identify:

rendering issues,
hidden layouts,
empty containers,
or spacing problems.

Technique 3: Check Browser Console

Especially useful when:

JavaScript-powered components,
sliders,
sticky sidebars,
or lazy-loading behaviour are involved.

Frontend JS errors can sometimes make template problems appear worse than they actually are.

What Usually Breaks After Modifying `post.hbs`

This is where Ghost theme work becomes tricky.

Changing layout structure inside post.hbs often has ripple effects across:

partials,
CSS,
responsive layouts,
and JavaScript assumptions.

Partials That Commonly Break

`related.hbs`

Loses access to post context if moved outside {{#post}}

`table-of-contents.hbs`

May fail if selectors change

`comments/ghost.hbs`

Can break depending on article structure

`topper.hbs`

Usually tied tightly to layout hierarchy

CSS That Commonly Breaks

Especially:

content width assumptions,
mobile breakpoints,
flex/grid layouts,
sidebar spacing,
sticky positioning.

Many Ghost themes assume:
single-column article layouts.

The moment you introduce sidebars or restructuring:
responsive logic often needs reworking.

Real-World Testing Checklist

After modifying post.hbs, I usually verify:

Standard article renders correctly
Featured images still work
Related posts appear
Author box displays correctly
Sidebar behaves responsively
Mobile layout remains readable
Member-only content still works
Table of contents still functions
Comments render properly

This catches most production issues before deployment.

One Important Ghost CMS Insight

A lot of Ghost customization issues are not actually CSS problems.

They are:

context problems.

Once you understand:

Handlebars scope,
partial inheritance,
and context propagation,

Ghost theme customization becomes dramatically easier to debug.

That’s especially important on client projects where themes have already been modified multiple times by different developers.

Final Thoughts

Ghost CMS gives developers a very clean publishing-focused architecture, but serious theme customization requires understanding how Handlebars context flows through templates and partials.

Most silent failures in Ghost themes come from:

incorrect context assumptions,
misplaced partials,
or layout restructuring that unintentionally breaks dependent components.

Once you understand how post.hbs controls context flow, debugging Ghost themes becomes much more predictable.

And honestly:
that’s the point where Ghost customization starts feeling significantly more developer-friendly.

If you work with Ghost CMS regularly, I’d be curious what theme issue consumed the most debugging time for you. Mine was definitely related-post context flow the first time I modified a production theme.

About the Author

Naveen Gaur is a full-stack developer focused on Ghost CMS customization, frontend performance, analytics workflows, and AI-native development systems.

More articles and case studies:
Naveen Gaur

GOOGLE ANALYTICS + ANTIGRAVITY via MCP: How to Fix the Most Annoying Part of Analytics Implementation

naveen gaur — Thu, 14 May 2026 13:57:19 +0000

Last week, I connected a GA4 MCP server to my AI coding workflow inside Google Antigravity IDE to test something I’d been thinking about for a while:

What happens when your coding agent can inspect analytics data while you’re still working inside the codebase?

Not after deployment.

Not after checking dashboards later.

While coding.

I expected it to be mildly useful.

Instead, the workflow surfaced suspicious traffic patterns, a discoverability issue tied to sitemap structure, and a dramatically faster way to validate event tracking implementations.

More importantly, it changed how I think about analytics and development workflows.

The Problem With Traditional Analytics Workflows

Most web development workflows still separate:

implementation,
analytics,
debugging,
and optimization.

The typical loop looks something like this:

Build or modify something
Deploy changes
Open GA4
Check if tracking/data looks correct
Form hypotheses
Go back to the codebase
Repeat

It works, but it creates a lot of context switching.

Especially for:

conversion tracking,
event debugging,
analytics validation,
and optimization work.

I wanted to see whether connecting analytics directly into the AI-assisted development environment would tighten that loop.

The Setup

The stack was roughly:

Google Antigravity IDE
MCP server for GA4
Google Analytics Data API
Google Analytics Admin API
Application Default Credentials (ADC)

The basic flow was:

connect the MCP server,
authenticate locally,
point the agent toward the GA4 property,
then start querying analytics context from inside the IDE.

One thing that surprised me:
this setup is still pretty rough around the edges right now.

There’s very little practical documentation around real-world MCP analytics workflows, so a lot of the setup involved debugging by trial and error.

Example MCP Configuration

Part of my MCP configuration looked roughly like this:

{
  "mcpServers": {
    "ga4": {
      "command": "python",
      "args": ["-u", "-m", "analytics_mcp"]
    }
  }
}

The -u flag ended up being important because of Python stdout buffering issues during MCP communication.

What the Agent Was Actually Doing

This part is important.

The agent was not “magically analyzing my business.”

It was:

querying reports,
inspecting event patterns,
comparing engagement signals,
checking tracking activity,
and helping correlate implementation context with analytics behaviour.

In practice, that meant I could ask things like:

Which landing pages have high traffic but weak engagement?

Which pages receive page_view events but no form_start events?

Are newly implemented events firing correctly?

Which traffic sources show unusually weak interaction patterns?

That’s where the workflow became interesting.

What One Session Actually Surfaced

1. Suspicious Traffic Patterns

The agent surfaced analytics patterns that looked inconsistent with normal user behaviour:

unusually weak engagement,
suspicious Direct traffic patterns,
low interaction depth,
and behaviour that didn’t align with typical user flows.

Important distinction:

GA4 does NOT expose raw IP-level visitor data through the APIs, so this was not definitive “bot detection.”

But it was enough signal to justify further investigation.

Without the analytics workflow sitting close to the implementation workflow, this kind of investigation usually happens much later — if it happens at all.

2. A Discoverability Problem Hidden Behind Page Views

One page was receiving page_view activity but almost no meaningful conversion interaction.

The page itself existed.

The form existed.

Tracking appeared functional.

The analytics signal prompted a deeper inspection of how the page was being surfaced and linked internally.

That eventually led to a sitemap/discoverability issue.

The interesting part was not that the AI independently diagnosed SEO problems.

It didn’t.

The valuable part was:
the analytics signal and implementation context were sitting close enough together that the issue surfaced much faster. This isn't about the AI being smarter than a human analyst; it’s about reducing the 'latency' between data and code.

3. Event Validation Became Much Faster

This was probably the most immediately useful part.

While reviewing or modifying tracking-related code, I could validate whether events like:

click
form_start
custom engagement events

were firing as expected without constantly jumping between:

the IDE,
GA4,
browser tools,
and reporting interfaces.

The feedback loop compressed from:

deploy → wait → inspect later

to something much closer to:

edit → validate → continue

That matters more than it sounds.

Especially on client projects where tracking bugs are often discovered too late.

What Broke During Setup

Honestly, quite a few things.

And this was the part I found most valuable because almost none of it was documented properly.

Python Buffering Caused Silent Hangs

At one point the MCP server would connect, but the agent would just sit there indefinitely without responding.

The fix ended up being:

python -u -m analytics_mcp

The -u flag forces unbuffered stdout, which MCP communication depended on.

Without it, the process looked alive but responses weren’t flowing correctly.

Older Documentation Used Different Metric Formats

One issue came from older examples using object-style metric definitions instead of plain strings.

This failed:

{
  "name": "conversions"
}

But this worked:

["sessions", "conversions"]

This kind of mismatch is surprisingly time-consuming because different examples online reference slightly different API assumptions.

Partial API Access Creates Confusing Results

Initially I had only enabled the Analytics Data API.

That allowed reports to run, but some property-level context and configuration details were missing.

Enabling both:

Analytics Data API
Analytics Admin API

made the setup significantly more reliable.

The Most Important Realization

The interesting part of this workflow was NOT:

“AI reads analytics.”

The more important shift was:

analytics stopped being separated from implementation.

That changes:

debugging speed,
tracking validation,
optimization workflows,
and context switching.

Instead of treating analytics as something checked “later,” it becomes part of the active development environment.

I think that’s a much bigger workflow shift than most discussions around AI coding tools currently acknowledge.

Would I Use This Workflow Long-Term?

Yes — with caveats.

I would not trust the agent to:

autonomously interpret business performance,
make optimization decisions alone,
or replace human analysis.

But as a workflow accelerator?

Absolutely.

Especially for:

event tracking validation,
implementation audits,
analytics debugging,
and identifying suspicious behavioural signals faster.

The key is treating the agent as:

an assistant,
a correlation engine,
and a workflow accelerator.

Not as an autonomous analyst.

Where I Think This Gets Interesting

Right now this workflow still feels early.

But the broader idea feels important:

AI-native development workflows where analytics, debugging, implementation, and optimization stop living in separate tools.

I suspect that becomes much more common over the next few years.

Especially for:

CRO work,
analytics engineering,
technical SEO,
frontend debugging,
and performance optimization.

Final Thoughts

The setup was rough.

The documentation ecosystem is immature.

The agent still makes mistakes.

But after using it on a real client project, I don’t think I want to go fully back to the old workflow.

The reduction in context switching alone makes it useful.

And more importantly:
it changes how quickly analytics signals can influence implementation decisions.

That’s the part that stuck with me.

If you’ve experimented with MCP + analytics workflows, I’d genuinely be interested in hearing how you approached it — especially outside the usual demo/tutorial setups.

About the Author

Naveen Gaur is a full-stack developer working on AI-native workflows, analytics systems, and CMS performance optimization.

Website: naveengaur.com

GitHub as CMS: Modular, Effortless Developer Portfolio

naveen gaur — Mon, 02 Feb 2026 06:27:41 +0000

This is a submission for the New Year, New You Portfolio Challenge Presented by Google AI

About Me

I am a Full‑Stack Freelance Developer. My mission is to use technology to solve everyday problems and ease the pain points we all face, whether in business or daily life. For 2026, I applied that same philosophy to my own personal brand by tackling a challenge many developers struggle with: portfolio rot.

Managing and refreshing a portfolio is often time‑consuming, so I designed a system that eliminates this friction. By treating GitHub Web UI as a Headless CMS, I can update both content and images directly in the browser — no local setup required, no database setup required.

This project reflects the “New Me”: an architect who orchestrates AI, automation, and practical innovation to build systems that stay fresh, solve real pain points, and make life easier.

Portfolio

How I Built It

The Innovation: GitHub as a Headless CMS
I wanted a portfolio that I could update in 3 minutes from my phone or a browser without ever cloning a repository. I architected the "GitHub-as-CMS" model:

Content: is stored as local MDX files.
Assets: Managed directly in the public/ folder for real-time GitHub previews. Next.js optimizes images automatically, removing the usual headaches of handling visuals for project
Validation: is enforced by Velite; if a user commits malformed data (like a missing project date), the GitHub Action fails the PR check before the site can break.

Leveraging Google AI Tools
Google Gemini Pro - Used for deep research, data analysis, and reporting. Its capabilities helped me investigate common pain points developers face with their portfolios. Two recurring issues stood out: the difficulty of ongoing management and the challenge of showcasing projects effectively. Gemini Pro guided me in devising a solution — from selecting the technical stack to evaluating feasibility and anticipating potential issues.

Google Antigravity agents
They handled the heavy lifting: converting screenshots into working code, building a full application from scratch, connecting it to my GitHub repository, and deploying seamlessly to Google Cloud. As the architect, I orchestrated multiple sub‑agents through the Agent Manager.

The Tech Stack

Framework: Next.js 16.1 (App Router) with the latest React 19 features, chosen not only for its modern architecture but also for its built‑in image optimization capabilities.
Styling: Tailwind CSS v4.1, utilizing a CSS-first configuration and semantic variables for instant theming.
Content Layer: Velite 0.1.8 + Zod for strict build-time schema validation of MDX files.
Deployment: Containerized via Docker and deployed to Google Cloud Run using a Continuous Deployment pipeline from GitHub.

What I'm Most Proud Of

The "Self-Driving" Repository: I designed a workflow where GitHub itself acts as the CMS. Content and images are updated entirely in the browser through Github Web UI. Safe updates (linters, types) are auto‑merged, while framework upgrades are flagged for manual review — ensuring my portfolio evolves without constant maintenance.
Composable LEGO Architecture: The site isn’t a rigid template. Every section — Hero, Gallery, Testimonials — is a modular “Block” that can be rearranged in a single file (page.tsx). This LEGO‑style architecture makes the portfolio endlessly adaptable without touching complex code.
High-Performance Visuals: Even with the easy‑to‑edit GitHub workflow, the site maintains a Lighthouse score of 98+. A custom MDX image interception component eliminates Cumulative Layout Shift (CLS), so uploaded images render smoothly and consistently. This ensures a polished user experience while keeping updates effortless.
Solving a Shared Developer Pain Point:
I am most proud of attempting to provide a solution for an issue I and many fellow developers face: creating a portfolio but struggling to manage it due to multiple challenges. Managing text content and images often feels tedious, so this system uses the GitHub Web UI for direct updates, Next.js to optimize images automatically, and continuous deployment to Google Cloud Run. This project is not just a showcase of my skills and work — it’s also a chance to address an existing problem in our community by building a portfolio system that stays fresh, easy to maintain, and free from “Portfolio Rot.”

💡 Technical Deep Dive
If you are interested in the "Librarian" logic behind Velite or the semantic variables used in Tailwind v4, feel free to explore my repository!

Thanks to Google AI for motivating this refresh — it gave me the chance to think differently and build a solution that benefits both myself and fellow developers.

Google AI Tools for Building Your Developer Portfolio: What to Use, When, and Why

naveen gaur — Sat, 10 Jan 2026 07:41:37 +0000

You're revisiting your portfolio and considering how Google's AI tools might fit into your workflow. You open Gemini, Google AI Studio, or Antigravity—and a practical question comes up quickly:

Which tool should I use for which kind of task?

This article is not a tutorial and not portfolio advice. It's a tool-to-use-case reference guide, using a developer portfolio website as a concrete example.

The goal is simple: help you choose the right Google AI tool for the right type of work, without guessing or misusing tools that weren't designed for the job.

The Tools (Quick, Technical Overview)

Before mapping use cases, it helps to understand where each tool draws its strength.

Gemini (Flash / Pro)

Text-only reasoning
Strong at comparison, abstraction, and evaluation
No UI preview, no code execution, no codebase awareness
Best for: Pure reasoning before implementation

Google AI Studio (Build + Annotation)

Rapid UI generation with live preview
Visual iteration through annotation
Optimized for visual iteration speed
Best when: You need to see something rendered immediately

Google Antigravity

Agentic IDE with full codebase awareness
Handles multi-file changes, refactors, and verification
Integrated terminal and browser testing
Best when: Code quality, structure, and maintainability matter

These tools overlap in capability, but they differ in strength. Choosing the wrong one usually costs time, not results.

Quick Reference: Which Tool Should I Use?

Your Task	Best Tool	Why
Deciding what to build	Gemini Pro	Pure reasoning, no implementation
Comparing stacks or approaches	Gemini Pro	Trade-off analysis without code
Seeing design ideas quickly	AI Studio	Live preview and fast iteration
Building from scratch with quality	Antigravity	Structure + verification
Refactoring existing code	Antigravity	Multi-file awareness
Debugging or fixing broken code	Antigravity	Terminal integration, can run tests
Quick one-off UI components	AI Studio	Speed over structure
Evaluating technical options	Gemini Pro	No execution needed

If you're unsure where to start, this table will usually get you there faster than reading the full article.

Use Case 1: Pre-Implementation Decisions

What this covers

Questions like:

What should my portfolio emphasize?
Which stack best represents my skills?
How complex should this site be?
Who is this portfolio primarily for?

Best Tool: Gemini Pro

Why Gemini Pro Wins

These are pure reasoning tasks:

No UI required
No code execution required
Heavy on comparison and trade-offs

Gemini Pro excels because it:

Decides what to build before generating any code
Evaluates options without pushing implementation
Helps you commit to a direction confidently

Why Not the Other Tools

AI Studio introduces visuals before decisions are settled
Antigravity adds unnecessary overhead when no code exists yet

Rule of thumb:

If you're deciding what or why before building anything, use Gemini Pro.

Use Case 2: Rapid Visual Prototyping

Scenario

You want a modern portfolio site quickly and need to see layouts, sections, and visual hierarchy immediately.

Best Tool: Google AI Studio (Build Mode)

Why AI Studio Wins

AI Studio is optimized for:

Fast UI generation
Immediate visual feedback
Iterating on layout and styling with minimal setup

You describe design goals in plain language (for example: "modern, minimal, dark theme"), and AI Studio renders a working UI you can refine visually.

Trade-offs

Code structure may be shallow
Components may not be reusable long-term
Best suited for exploration, not final architecture

Why Not Antigravity

Antigravity shines when structure matters
For early visual exploration, it adds unnecessary setup cost

Rule of thumb:

If seeing the design matters more than code structure, start with AI Studio.

Use Case 3: Building a Portfolio with Clean, Professional Code

Scenario

You expect other developers or hiring managers to inspect your repository.

You care about:

Folder structure
Reusable components
Accessibility
Maintainability

Best Tool: Google Antigravity

Why Antigravity Wins

Antigravity understands the entire project, not isolated files. It can:

Create consistent folder structures
Enforce shared layout and component APIs
Apply accessibility fixes (labels, focus states, semantic HTML)
Verify behavior by running the app

This is where Antigravity clearly outperforms other tools.

Trade-offs

Slower initial setup than AI Studio
Steeper learning curve
Overkill for small, throwaway prototypes

Why Not AI Studio

Limited awareness of existing structure
Generated code often requires refactoring later

Rule of thumb:

If code quality itself is part of what you're showcasing, use Antigravity.

Use Case 4: Refactoring an Existing Portfolio

Scenario

You already have a working portfolio, but want to:

Restructure folders
Extract shared components
Add TypeScript to existing JavaScript
Remove unused imports and dead code
Consolidate duplicate styling or logic
Fix prop drilling with better state management
Improve accessibility and performance

Best Tool: Google Antigravity

Why This Is Antigravity's Strongest Use Case

Refactoring requires:

Multi-file awareness
Understanding dependencies
Verifying that nothing breaks

Antigravity's agentic model is designed for exactly this type of work.

Trade-offs

Requires an existing codebase
Overkill for greenfield projects

Why Not AI Studio

Operates best on isolated code
Lacks full project context
Refactors become risky or manual

Rule of thumb:

If a change touches multiple files or affects structure, use Antigravity.

One Common Pattern (Not a Rule)

Many developers naturally follow this sequence:

Gemini Pro → clarify ideas and decisions
AI Studio → explore design and generate an initial version
Antigravity → refine structure and professionalize the code

You can skip steps, but this flow mirrors how decisions typically turn into implementation.

Anti-Patterns: When Not to Use Each Tool

Don't Use Gemini When:

You need rendered output
You need to test code execution
You're modifying an existing project

Don't Use AI Studio When:

You're refactoring existing code
You need consistent architecture across files
You care about long-term maintainability

Don't Use Antigravity When:

You're still exploring ideas
You're asking one-off questions
The task is small and isolated

Negative knowledge saves more time than best practices.

Final Takeaway

This article isn't about how to build a portfolio. It's about choosing the right tool for the right kind of work.

Gemini helps you reason
AI Studio helps you visualize
Antigravity helps you ship clean, maintainable code

Once you understand those boundaries, the workflow becomes obvious.

That's the real skill these tools reward.

Do you actually keep your portfolio site updated?

naveen gaur — Sat, 03 Jan 2026 14:17:57 +0000

My Experience
I built my personal portfolio site early last year with React. It looked good at the time, but here’s the truth: I haven’t updated it since.

Why?

Updating projects feels time‑consuming and not very rewarding.
I don’t feel my projects are showcased properly on the site.
Updating my Upwork profile seems easier and gives me more direct results (clients, visibility, reviews).

So even though I know a portfolio site is supposed to be important, I find myself neglecting it.

The Question
I’m curious about other devs and freelancers here:

Do you update your portfolio site regularly?
If not, what are the main reasons?

Do you find platforms like Upwork, LinkedIn, or GitHub more rewarding to keep updated compared to a personal site?

Why I’m Asking
I’ve been planning to update my portfolio for a long time, but the Google Portfolio Challenge finally gave me the push I needed. It feels like a great opportunity to rebuild my portfolio — not just for the sake of the challenge, but to create something genuinely useful for myself and (hopefully) for others too. That’s why I’m curious about how other developers approach portfolio updates, and what makes a portfolio worth maintaining in the long run.

Your input will help me design mine in a way that’s actually worth maintaining — not just another site that gets abandoned after launch.

For many of us, the portfolio site feels like a “must‑have,” but maybe the real question is: how do we make it useful enough that we want to keep it updated?

DEV Community: naveen gaur

How to Analyze Your Google Analytics Data with AI: GA4 AI Agent Guide

Stop Wrestling with Dashboards: How to Analyze Your Google Analytics Data with an AI Agent

What Conversational Analytics Feels Like

But Here’s the Important Reality Most Articles Skip

Why This Infrastructure Exists

The Three Main Ways to Use AI with GA4 Today

1. Manual CSV Exports (The Simple Way)

2. Connector Platforms (The Easy, No-Code Way)

3. Direct MCP + API Integration (The Developer Way)

What Is Model Context Protocol (MCP)?

Easy Setup Guide: Building Your GA4 AI Agent

Step 1: Grab Your GA4 Property ID

Step 2: Enable the APIs in Google Cloud

Step 3: Securely Authenticate

Step 4: Connect Your AI Platform

Critical "Gotchas" to Avoid

Start Querying Your Analytics

The Core Benefits of Conversational Analytics

The Important Downsides to Keep in Mind

1. Initial Setup Friction

2. AI Hallucinations and Attribution Limits

3. GA4 Data Quality Rules

Where the Industry Is Headed

Final Thoughts

Naveen Gaur | WordPress Performance Specialist & Full-Stack Consultant

The Complete Developer’s Guide to the Baileys WhatsApp Bot: Setup, Scaling, and VPS Deployment

🚀 1. Why WhatsApp & Baileys?

The Engagement Multiplier

The Bot Core: Why Baileys?

The Hybrid Architecture

🛠️ 2. Step-by-Step Code Walkthrough

Part A: Setting up the Baileys Client (index.js)

Part B: Creating a Resilient Message Handler (bridge.js)

🚫 3. Crucial: Solving the \"Ban & Crash\" Problem (Rate-Limiting Queues)

💡 4. Production VPS Deployment & Management

Step 1: Install VPS Dependencies

Step 2: PM2 Configuration (ecosystem.config.js)

🧠 Why Build Custom Instead of Using Off-the-Shelf Agents (Hermes, Landbot)?

Summary

Naveen Gaur | WordPress Performance Specialist & Full-Stack Consultant

How to Go Incognito and Stop Google Analytics Tracking (GA4 Guide)

The Big Myth: Does "Incognito Mode" Stop Google Analytics Tracking?

Clean Data vs. Personal Privacy: Why Opt Out?

1. The Easiest Way: Browser Opt-Out & Adblockers

Option A: Install the Official Google Analytics Opt-Out Add-on

Option B: Use an Adblocker or Privacy Shield

2. The Dashboard Way: GA4 Internal Traffic IP Filtering

Step 1: Define Your Internal Traffic IP

Step 2: Activate the Data Filter

3. The Developer Way: Exclude Localhost via Code

Naveen Gaur | WordPress Performance Specialist & Full-Stack Consultant

Google Antigravity 2.0 Broke My IDE: Fixing the Missing File Explorer and Workspace Bug

What Changed in Antigravity 2.0+

Antigravity (Core)

Antigravity IDE

Symptoms of the Bug

Quick Fix: Restore the IDE Workspace

Step 1: Close All Antigravity Processes

Step 2: Rename app.asar

Why This Works

Important Note

Restoring Old Chat History and Workspace State

Step 3: Copy the Old User Profile

Step 4: Migrate the Old User Folder

Fixing Missing Extensions and Themes

Step 5: Rebuild Extension State

What Likely Caused the Issue

Verification Checklist

Final Thoughts

About the Author

Naveen Gaur | WordPress Performance Specialist & Full-Stack Consultant

Ghost CMS Theme Development Explained: post.hbs, Partials, and Related Posts

Understanding Ghost Theme Structure

Why post.hbs Matters So Much

The Most Common Ghost CMS Mistake: Context Errors

Wrong

Correct

A Working Related Posts Partial

Why Related Posts Still Sometimes Fail

Part A: Setting up the Baileys Client (`index.js`)

Part B: Creating a Resilient Message Handler (`bridge.js`)

Step 2: PM2 Configuration (`ecosystem.config.js`)

Step 2: Rename `app.asar`

Why `post.hbs` Matters So Much

3. Broken `card.hbs`

What Usually Breaks After Modifying `post.hbs`

`related.hbs`

`table-of-contents.hbs`

`comments/ghost.hbs`

`topper.hbs`