vercel / vercel/examples

Example proposal: cookieless analytics with native MCP integration for AI agents

Open
#1,483 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Dominant language
TypeScript
Stars
5.2k
Forks
1.8k
Avg merge
3d 12h
Merged PRs (30d)
6

Description

Proposal

A solutions/ example showing how to integrate cookieless web analytics into a Next.js app, with native MCP so coding agents (Cursor, Claude, Codex, Windsurf) can install + query analytics in one prompt. Would slot in next to script-component-strategies and script-component-ad, which cover related <Script> patterns.

The framework already has framework-boilerplates/xmcp showing how to build an MCP server. This proposal is the complementary case: how to consume an MCP-aware analytics service from a Next.js app, end to end.

What the example would demonstrate

  1. Cookieless tracker installation — one <Script> in app/layout.tsx, gated on NEXT_PUBLIC_GIZMO_KEY. No cookie banner needed under CNIL/EDPB. afterInteractive strategy so the tracker doesn't compete with LCP.
  2. MCP server integration — the AI coding agent connects via the hosted MCP endpoint, OAuth onboarding via dynamic client registration (RFC 7591), and can run setup operations (setup_analytics_for_site, verify_install), workflow operations (summarize_all_sites, explain_traffic_change), and query primitives (filterable breakdowns, time series).
  3. Custom event tracking via Vercel functions — a small API route showing how to fire server-side events alongside the client tracker.

Why this is useful here

  • Vercel's audience increasingly uses AI coding agents — this is the only end-to-end example showing the "talk to your analytics from your editor" workflow.
  • Cookieless analytics is the de-facto choice for any EU-facing Next.js site that doesn't want a consent banner. There's no example covering that pattern today.
  • Builds naturally on script-component-strategies (script loading), which is the closest existing example.

Why I'm raising it as an issue first

I'd build this against Gizmo Analytics since that's the MCP-first analytics service I'm familiar with (free tier, MIT-licensed MCP server, hosted endpoint with full OAuth, official MCP Registry listed). But I don't want to assume a brand-specific example is what you want — wanted to check first.

Three paths I can take, ordered by preference:

  1. Brand-agnosticsolutions/cookieless-analytics-mcp using Gizmo as the concrete provider, with the README explicitly noting it's swappable for any MCP-aware analytics provider that follows the same <Script> + gizmoanalytics.io/mcp-style remote endpoint pattern.
  2. Brandedsolutions/gizmo-analytics similar to how solutions/platforms-slate-supabase is brand-specific.
  3. Built into an existing example — fold the integration into one of the existing solutions/ examples (e.g., a blog template) as an opt-in analytics layer.

Happy to build whichever fits your conventions, or skip if it's not a fit. Just looking for a thumbs-up + direction before I spend the time.

Contributor guide

No contributing guide indexed for this repository

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

First read the related solutions/script-component-strategies and solutions/script-component-ad examples, plus framework-boilerplates/xmcp. Confirm whether the example should be brand-agnostic, branded, or added to an existing solution before starting. Done means an agreed example demonstrates the app/layout.tsx tracker, MCP setup and queries, and a Vercel function for custom events.

Written by the indexing model from the issue text.

Assessment

Tech stack
nextjs, typescript
Domain
analytics, api, web-dev
Issue type
Feature
Difficulty
5/5
Estimated time
Over a week
Activity status
Quiet
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.