Build a Custom Google Ads Reporting Dashboard With Claude Code

You can build a proper Google Ads reporting dashboard for your agency with Claude Code. I mean a real Next.js app with its own backend, Google sign-in, one workspace per client and live data, not an HTML file or a Claude artifact you re-upload every week. The fastest route: start from our open-source template on demo data, get Google Ads API access in parallel, then connect real client accounts and deploy it to your own server.

In the video I walk through the live dashboard first, then build our own version with Claude Code commands. This post covers both: what the dashboard does, and the steps to stand up your own.

Why not just use a Claude artifact?

Artifacts are great for a one-off chart. But for client reporting they fall apart fast:

• The data is whatever you pasted in. It's stale the moment you close the tab.
• There's no login, so you can't give a client or a teammate their own view.
• There are no stored connections. Every week someone exports CSVs again.

A dashboard with a backend fixes all three. It stores each client's Google Ads connection, pulls fresh numbers on every page load, and has real user accounts. That's the difference between a demo and something your team uses on Monday morning.

What the dashboard does

This is the dashboard I show in the video:

1. Sign in with Google. A simple Google login, then you land on the dashboard.
2. Add clients. It's made for agencies that run many ad accounts for many clients. You create a client, give it a name and pick a brand colour.
3. Connect Google Ads. Each client connects through Google's OAuth. Afterwards you see the list of ad accounts that login has access to, and you pick one.
4. See the metrics. You get the numbers most agencies report on to clients: spend, conversions, ROAS against target, budget pacing, day-by-day charts and impression share. You can add or remove metrics.
5. Top products. For ecommerce accounts, it shows the best-performing products in the ad account.

You can run this exact version on your own laptop on localhost, and deploy it to your own VPS.

What you need before you start

• Claude Code in the terminal. If you don't have it, follow the terminal setup guide.
• Node 20+ and Docker on your machine.
• Google Ads API access: a Cloud project, OAuth client and an access level that can read production accounts. That's the slow part, so start it on day one. Everything is in the complete Google Ads API access guide.
• A VPS and a domain when you're ready to go live.

Step 1: Install the plugin in Claude Code

I packaged the build into a Claude Code plugin, so Claude follows the same steps every time. Inside a Claude Code session:

/plugin marketplace add tarikwaleed/adlyfy-plugin
/plugin install adlyfy@adlyfy
/reload-plugins

Don't skip the third line. A freshly installed plugin's commands don't show up in the session you're already in until you reload, which looks exactly like a failed install.

The plugin gives you six commands, meant to run in order:

Step 2: Build on demo data while Google reviews you

Run /adlyfy:build. It clones the adltx template, the same Next.js app from the video, and gets it running on mock data. You don't need any Google approval for this.

If you'd rather do it by hand, the template README has the steps:

git clone https://github.com/tarikwaleed/adltx && cd adltx
npm install
docker compose up -d db          # Postgres on port 5439
cp .env.example .env.local       # then fill in AUTH_SECRET and DEV_LOGIN_SECRET
npm run db:migrate
npm run dev                      # http://localhost:3006

Open http://localhost:3006/api/dev/login?secret=<your DEV_LOGIN_SECRET>, add a client, and click Use demo data instead on the connect screen. You get a working dashboard with realistic demo numbers.

This is the point of starting on mock data. Google review takes time, and you can spend that time getting the dashboard right with your team.

Step 3: Make it yours with prompts

Now Claude Code earns its keep. The template is a normal codebase, so you customise it by asking:

Add a "Cost per conversion vs target" card next to ROAS, using each client's target CPA from the onboarding form.

Add a weekly comparison: this week vs last week for spend, conversions and conversion value, with up/down arrows.

Replace the brand colours with ours: primary #F5C518, text #111111. Keep the dark mode working.

Keep each prompt to one change. Look at the result in the browser, then ask for the next. The template has a DESIGN.md and PRODUCT.md that Claude reads, so changes stay consistent with the rest of the app.

Step 4: The queries behind the numbers

You don't need to write these, but it helps to know what the dashboard asks Google for. Everything comes from GAQL, the Google Ads Query Language.

Campaign performance for a date range:

SELECT campaign.name,
       metrics.cost_micros, metrics.clicks, metrics.impressions,
       metrics.conversions, metrics.conversions_value
FROM campaign
WHERE segments.date BETWEEN '2026-10-01' AND '2026-10-25'
  AND campaign.status = 'ENABLED'

Top products for ecommerce accounts:

SELECT segments.product_item_id, segments.product_title,
       metrics.clicks, metrics.cost_micros, metrics.conversions_value
FROM shopping_performance_view
WHERE segments.date DURING LAST_30_DAYS
ORDER BY metrics.conversions_value DESC
LIMIT 10

Cost comes back in micros. Divide by 1,000,000 to get the account currency. ROAS is conversions_value / (cost_micros / 1e6).

If you want to try a query yourself, the Python snippet in the API access guide runs any of these.

Step 5: Connect a real client

Once your Google access is approved, run /adlyfy:connect. The client signs in with the Google account that has access to their Google Ads, approves, and picks the ad accounts to show. From then on the dashboard pulls live data for that client.

The template reads Google Ads through Adlyfy, our API gateway, which handles the OAuth grant and token refresh. No ad-platform credential is stored in the dashboard's own database.

Two things worth knowing:

• The account list is a snapshot taken when the client connects. If they add an account to their manager account later, they reconnect to see it.
• Manager (MCC) accounts aren't selectable as a reporting account. Pick the actual client account.

Step 6: Deploy to your server

Run /adlyfy:deploy. It puts the app on a single VPS with Docker Compose, Postgres and Caddy for automatic HTTPS. Migrations run on every start. Point a subdomain like reports.youragency.com at the server and you're live.

Common problems and how to fix them

The page renders but buttons do nothing. Usually a stale .next build cache. A route failed to compile, the HTML still renders, but nothing is interactive. Delete .next and restart before you debug your code.

Port 5439 already in use. Another Postgres is on that port. Start the database with DB_PORT=5440 docker compose up -d db and change DATABASE_URL to match.

Google sign-in shows invalid_client. The Google OAuth client ID or secret is missing or wrong. Sign-in uses its own OAuth client, separate from Google Ads access.

Real accounts return a permission error. Your Cloud project only has Test access. Apply for Explorer or Basic access. The access guide has the details.

A client sees numbers you don't recognise. Check whether that client is still on the demo connection. Demo data looks real by design, so check before a client sees it.

How Scalvo can help

If you're paying for a reporting SaaS and only use part of it, we can build you your own version, branded and hosted on your server. That's our custom tool replicas service. If you want to turn your dashboard into a product you sell to other agencies, look at SaaS product build, or book a call.