---
title: "Ship Amplitude in your stack"
description: "Copy-paste tutorials for every framework and coding agent. Complete files, checked against the docs, with a prompt you can hand straight to Cursor or Claude Code."
canonical: "https://amplitude.com/en-us/build"
---

# Ship Amplitude in your stack

Copy-paste tutorials for every framework and coding agent. Complete files, checked against the docs, with a prompt you can hand straight to Cursor or Claude Code.

Source: https://amplitude.com/en-us/build

---

###### Amplitude Build Tutorials

# Ship Amplitude in your stack

Copy-paste tutorials for every framework and coding agent. Complete files, checked against the docs, with a prompt you can hand straight to Cursor or Claude Code.

Search tutorials: Next.js, MCP, funnels, proxy…

## Featured

[Chris Tam · 15 min](/build/nextjs-web-analytics)

### [How to add web analytics to a Next.js app](/build/nextjs-web-analytics)

[Configure the Amplitude Unified SDK so every App Router navigation becomes a page view, every visit carries its UTM and referrer data, and sessions feed bounce rate and session length. Then open the Marketing Analytics views that read those events. About 15 minutes, all copy-paste.](/build/nextjs-web-analytics)

[Chris Tam · 15 min](/build/nextjs-session-replay)

### [How to add session replay to a Next.js app](/build/nextjs-session-replay)

[Install the Amplitude Unified SDK in a Next.js App Router project, start session replay once on the client with a sample rate you choose, mask what shouldn't leave the browser, and confirm a replay lands. About 15 minutes, all copy-paste.](/build/nextjs-session-replay)

## All tutorials

60 tutorials · newest first

- ### [How to add Web Experiment to a React Router app (formerly Remix)](/build/react-router-web-experiment)
  [Load the Amplitude Web Experiment script in the root \`Layout\` so it runs before React hydrates, give the elements you want to test stable selectors, and confirm \`\[Experiment\] Impression\` events land. About 15 minutes, all copy-paste.](/build/react-router-web-experiment)
  [- React Router 7+- React 19- Framework mode- Unified SDK 1.x- Web Experiment script](/build/react-router-web-experiment)
  [Chris Tam](/build/react-router-web-experiment)

  [15 min · 14 Oct 2026](/build/react-router-web-experiment)
- ### [How to add Web Experiment to an Angular app](/build/angular-web-experiment)
  [Load the Amplitude Web Experiment script first in \`src/index.html\` so it runs before Angular starts, give the elements you want to test stable selectors, and confirm \`\[Experiment\] Impression\` events land. Works with and without Angular SSR. About 15 minutes, all copy-paste.](/build/angular-web-experiment)
  [- Angular 19+- Unified SDK 1.x- Web Experiment script](/build/angular-web-experiment)
  [Chris Tam](/build/angular-web-experiment)

  [15 min · 14 Oct 2026](/build/angular-web-experiment)
- ### [How to add feature flags and experiments to a React Router app (formerly Remix)](/build/react-router-feature-flags)
  [Render an Amplitude feature flag's variant in the first HTML and track its exposure from the browser. About 30 minutes, all copy-paste.](/build/react-router-feature-flags)
  [- React Router 7+- Framework mode- Unified SDK 1.x- Experiment Node SDK 1.x](/build/react-router-feature-flags)
  [Chris Tam](/build/react-router-feature-flags)

  [30 min · 14 Oct 2026](/build/react-router-feature-flags)
- ### [How to add feature flags and experiments to an Angular app](/build/angular-feature-flags)
  [Read an Amplitude feature flag through a small signal-based Angular service, send an exposure only when the variant renders, and, if you use Angular SSR, render the variant straight into the first HTML. About 25 minutes, all copy-paste.](/build/angular-feature-flags)
  [- Angular 19+- Unified SDK 1.x- Experiment Node SDK 1.x](/build/angular-feature-flags)
  [Chris Tam](/build/angular-feature-flags)

  [25 min · 14 Oct 2026](/build/angular-feature-flags)
- ### [How to add guides and surveys to a React Router app (formerly Remix)](/build/react-router-guides-surveys)
  [Turn on guides and surveys in a React Router app, send guide links and buttons through React Router's \`navigate()\`, anchor a pin to a component, and open a survey from your own button. About 20 minutes, all copy-paste.](/build/react-router-guides-surveys)
  [- React Router 7+- Framework mode- Unified SDK 1.x](/build/react-router-guides-surveys)
  [Chris Tam](/build/react-router-guides-surveys)

  [20 min · 14 Oct 2026](/build/react-router-guides-surveys)
- ### [How to add guides and surveys to an Angular app](/build/angular-guides-surveys)
  [Turn on guides and surveys in an Angular app, send guide links and buttons through Angular Router, anchor a pin to a component, and open a survey from your own button. About 20 minutes, all copy-paste.](/build/angular-guides-surveys)
  [- Angular 19+- Unified SDK 1.x](/build/angular-guides-surveys)
  [Chris Tam](/build/angular-guides-surveys)

  [20 min · 14 Oct 2026](/build/angular-guides-surveys)
- ### [How to add heatmaps to a React Router app (formerly Remix)](/build/react-router-heatmaps)
  [Confirm session replay records in a React Router app, switch on heatmap capture for the project, give each settings tab its own route so heatmaps don't merge them, and create a click map for a dynamic route. About 15 minutes of setup, then heatmaps fill in as traffic arrives.](/build/react-router-heatmaps)
  [- React Router 7+- Framework mode- Unified SDK 1.x](/build/react-router-heatmaps)
  [Chris Tam](/build/react-router-heatmaps)

  [15 min · 14 Oct 2026](/build/react-router-heatmaps)
- ### [How to add heatmaps to an Angular app](/build/angular-heatmaps)
  [Turn on session replay in an Angular app from \`main.ts\`, switch on heatmap capture for the project, give each settings tab its own child route so heatmaps don't merge them, and create a click map for a dynamic route. About 15 minutes of setup, then heatmaps fill in as traffic arrives.](/build/angular-heatmaps)
  [- Angular 19+- Unified SDK 1.x](/build/angular-heatmaps)
  [Chris Tam](/build/angular-heatmaps)

  [15 min · 14 Oct 2026](/build/angular-heatmaps)
- ### [How to add product analytics to a React Router app (formerly Remix)](/build/react-router-product-analytics)
  [Install the Amplitude Unified SDK in a React Router app through the client entry, capture page views on every client-side navigation, identify signed-in users from your root loader, and track one custom event. About 10 minutes, all copy-paste.](/build/react-router-product-analytics)
  [- React Router 7+- Framework mode- Unified SDK 1.x](/build/react-router-product-analytics)
  [Chris Tam](/build/react-router-product-analytics)

  [10 min · 14 Oct 2026](/build/react-router-product-analytics)
- ### [How to add product analytics to an Angular app](/build/angular-product-analytics)
  [Install the Amplitude Unified SDK in an Angular app from \`main.ts\`, capture page views on every Angular Router navigation, identify signed-in users from a signal, and track one custom event. About 10 minutes, all copy-paste.](/build/angular-product-analytics)
  [- Angular 19+- Unified SDK 1.x](/build/angular-product-analytics)
  [Chris Tam](/build/angular-product-analytics)

  [10 min · 14 Oct 2026](/build/angular-product-analytics)
- ### [How to add session replay to a React Router app (formerly Remix)](/build/react-router-session-replay)
  [Turn on Amplitude session replay in a React Router app, record every session in development and a small share in production, mask sensitive components and whole routes, and open your own test replay. About 15 minutes, all copy-paste.](/build/react-router-session-replay)
  [- React Router 7+- Framework mode- Unified SDK 1.x](/build/react-router-session-replay)
  [Chris Tam](/build/react-router-session-replay)

  [15 min · 14 Oct 2026](/build/react-router-session-replay)
- ### [How to add session replay to an Angular app](/build/angular-session-replay)
  [Turn on Amplitude session replay in an Angular app, record every session in development and a small share in production, mask sensitive elements and whole routes, and open your own test replay. About 15 minutes, all copy-paste.](/build/angular-session-replay)
  [- Angular 19+- Unified SDK 1.x](/build/angular-session-replay)
  [Chris Tam](/build/angular-session-replay)

  [15 min · 14 Oct 2026](/build/angular-session-replay)
- ### [How to add web analytics to a React Router app (formerly Remix)](/build/react-router-web-analytics)
  [Configure the Amplitude Unified SDK so every React Router navigation becomes a page view, every visit carries its UTM and referrer data, and sessions feed bounce rate and session length. Then keep campaign parameters alive through \`redirect()\` and \`navigate()\`, and open the Marketing Analytics views that read them. About 15 minutes, all copy-paste.](/build/react-router-web-analytics)
  [- React Router 7+- Framework mode- Unified SDK 1.x](/build/react-router-web-analytics)
  [Chris Tam](/build/react-router-web-analytics)

  [15 min · 14 Oct 2026](/build/react-router-web-analytics)
- ### [How to add web analytics to an Angular app](/build/angular-web-analytics)
  [Configure the Amplitude Unified SDK so every Angular Router navigation becomes a page view, every visit carries its UTM and referrer data, and sessions feed bounce rate and session length. Then keep campaign parameters alive through \`redirectTo\`, guards, \`router.navigate()\`, and Angular SSR server redirects, and open the Marketing Analytics views that read them. About 15 minutes, all copy-paste.](/build/angular-web-analytics)
  [- Angular 19+- Unified SDK 1.x](/build/angular-web-analytics)
  [Chris Tam](/build/angular-web-analytics)

  [15 min · 14 Oct 2026](/build/angular-web-analytics)
- ### [How to add Web Experiment to a SvelteKit app](/build/sveltekit-web-experiment)
  [Load the Amplitude Web Experiment script in src/app.html so it runs before SvelteKit hydrates, give the elements you want to test stable selectors, and confirm \[Experiment\] Impression events land. About 15 minutes, all copy-paste.](/build/sveltekit-web-experiment)
  [- SvelteKit 2.10+- Svelte 5- Unified SDK 1.x- Web Experiment script](/build/sveltekit-web-experiment)
  [Chris Tam](/build/sveltekit-web-experiment)

  [15 min · 13 Oct 2026](/build/sveltekit-web-experiment)
- ### [How to add feature flags and experiments to a SvelteKit app](/build/sveltekit-feature-flags)
  [Render an Amplitude feature flag's variant in SvelteKit's first HTML and track its exposure from the browser. About 30 minutes, all copy-paste.](/build/sveltekit-feature-flags)
  [- SvelteKit 2.10+- Svelte 5- Unified SDK 1.x- Experiment Node SDK 1.x](/build/sveltekit-feature-flags)
  [Chris Tam](/build/sveltekit-feature-flags)

  [30 min · 13 Oct 2026](/build/sveltekit-feature-flags)
- ### [How to add guides and surveys to a SvelteKit app](/build/sveltekit-guides-surveys)
  [Turn on guides and surveys in a SvelteKit app, send guide links and buttons through SvelteKit's client router, anchor a pin to a component, and open a survey from your own button. About 20 minutes, all copy-paste.](/build/sveltekit-guides-surveys)
  [- SvelteKit 2.10+- Svelte 5- Unified SDK 1.x](/build/sveltekit-guides-surveys)
  [Chris Tam](/build/sveltekit-guides-surveys)

  [20 min · 13 Oct 2026](/build/sveltekit-guides-surveys)
- ### [How to add heatmaps to a SvelteKit app](/build/sveltekit-heatmaps)
  [Turn on session replay in a SvelteKit app through the client init hook, switch on heatmap capture for the project, give each settings tab its own route so heatmaps don't merge them, and create a click map for a dynamic route. About 15 minutes of setup, then heatmaps fill in as traffic arrives.](/build/sveltekit-heatmaps)
  [- SvelteKit 2.10+- Svelte 5- Unified SDK 1.x](/build/sveltekit-heatmaps)
  [Chris Tam](/build/sveltekit-heatmaps)

  [15 min · 13 Oct 2026](/build/sveltekit-heatmaps)
- ### [How to add product analytics to a SvelteKit app](/build/sveltekit-product-analytics)
  [Install the Amplitude Unified SDK in a SvelteKit app through the client init hook, capture page views on every client-side navigation, identify signed-in users from your layout data, and track one custom event. About 10 minutes, all copy-paste.](/build/sveltekit-product-analytics)
  [- SvelteKit 2.10+- Svelte 5- Unified SDK 1.x](/build/sveltekit-product-analytics)
  [Chris Tam](/build/sveltekit-product-analytics)

  [10 min · 13 Oct 2026](/build/sveltekit-product-analytics)
- ### [How to add session replay to a SvelteKit app](/build/sveltekit-session-replay)
  [Turn on Amplitude session replay in a SvelteKit app, record every session in development and a small share in production, mask sensitive components and whole routes, and open your own test replay. About 15 minutes, all copy-paste.](/build/sveltekit-session-replay)
  [- SvelteKit 2.10+- Svelte 5- Unified SDK 1.x](/build/sveltekit-session-replay)
  [Chris Tam](/build/sveltekit-session-replay)

  [15 min · 13 Oct 2026](/build/sveltekit-session-replay)
- ### [How to add web analytics to a SvelteKit app](/build/sveltekit-web-analytics)
  [Configure the Amplitude Unified SDK so every SvelteKit navigation becomes a page view, every visit carries its UTM and referrer data, and sessions feed bounce rate and session length. Then keep campaign parameters alive through redirect() and goto(), and open the Marketing Analytics views that read them. About 15 minutes, all copy-paste.](/build/sveltekit-web-analytics)
  [- SvelteKit 2.10+- Svelte 5- Unified SDK 1.x](/build/sveltekit-web-analytics)
  [Chris Tam](/build/sveltekit-web-analytics)

  [15 min · 13 Oct 2026](/build/sveltekit-web-analytics)
- ### [How to add Web Experiment to a Vue app](/build/vue-web-experiment)
  [Load the Amplitude Web Experiment script in your Vite \`index.html\` so it runs before Vue mounts, give the elements you want to test stable selectors, and confirm \`\[Experiment\] Impression\` events land. About 15 minutes, all copy-paste.](/build/vue-web-experiment)
  [- Vue 3- Vite- Vue Router- Web Experiment script](/build/vue-web-experiment)
  [Chris Tam](/build/vue-web-experiment)

  [15 min · 9 Oct 2026](/build/vue-web-experiment)
- ### [How to add feature flags and experiments to a Nuxt app](/build/nuxt-feature-flags)
  [Evaluate an Amplitude feature flag in a Nitro server route with the Experiment Node.js SDK, give the server the same device ID the browser uses, hand the variant to the page through the Nuxt payload, and send the exposure from the browser after the variant renders. About 25 minutes, all copy-paste.](/build/nuxt-feature-flags)
  [- Nuxt 4 or 3.7+- Vue 3- Experiment Node SDK 1.x- Unified SDK 1.x- Local evaluation](/build/nuxt-feature-flags)
  [Chris Tam](/build/nuxt-feature-flags)

  [25 min · 9 Oct 2026](/build/nuxt-feature-flags)
- ### [How to add feature flags and experiments to a Vue app](/build/vue-feature-flags)
  [Create a client deployment and a feature flag with a JSON payload, read the variant through a \`useFlag\` composable in a Vue and Vite app, refetch when the user signs in, and confirm the exposure lands on the right user. About 15 minutes, all copy-paste.](/build/vue-feature-flags)
  [- Vue 3- Vite- Vue Router- Unified SDK 1.x](/build/vue-feature-flags)
  [Chris Tam](/build/vue-feature-flags)

  [15 min · 9 Oct 2026](/build/vue-feature-flags)
- ### [How to add guides and surveys to a Vue app](/build/vue-guides-surveys)
  [Turn on guides and surveys in a Vue and Vite app, send guide links and buttons through Vue Router, anchor a pin to a component, and open a survey from your own button. About 20 minutes, all copy-paste.](/build/vue-guides-surveys)
  [- Vue 3- Vite- Vue Router- Unified SDK 1.x](/build/vue-guides-surveys)
  [Chris Tam](/build/vue-guides-surveys)

  [20 min · 9 Oct 2026](/build/vue-guides-surveys)
- ### [How to add heatmaps to a Vue app](/build/vue-heatmaps)
  [Turn on session replay in a Vue app built with Vite and Vue Router, switch on heatmap capture for the project, give each settings tab its own child route so heatmaps don't merge them, and create a click map for a dynamic route. About 15 minutes of setup, then heatmaps fill in as traffic arrives.](/build/vue-heatmaps)
  [- Vue 3- Vite- Vue Router- Unified SDK 1.x](/build/vue-heatmaps)
  [Chris Tam](/build/vue-heatmaps)

  [15 min · 9 Oct 2026](/build/vue-heatmaps)
- ### [How to add product analytics to a Nuxt app](/build/nuxt-product-analytics)
  [Install the Amplitude Unified SDK in a Nuxt app through a client-only plugin, read the key from runtime config, capture page views on every navigation, identify signed-in users, and track one custom event. About 10 minutes, all copy-paste.](/build/nuxt-product-analytics)
  [- Nuxt 4 or 3.7+- Vue 3- Unified SDK 1.x](/build/nuxt-product-analytics)
  [Chris Tam](/build/nuxt-product-analytics)

  [10 min · 9 Oct 2026](/build/nuxt-product-analytics)
- ### [How to add product analytics to a Vue app](/build/vue-product-analytics)
  [Install the Amplitude Unified SDK in a Vue app built with Vite, capture page views on every Vue Router navigation, identify signed-in users, and track one custom event. About 10 minutes, all copy-paste.](/build/vue-product-analytics)
  [- Vue 3- Vite- Vue Router- Unified SDK 1.x](/build/vue-product-analytics)
  [Chris Tam](/build/vue-product-analytics)

  [10 min · 9 Oct 2026](/build/vue-product-analytics)
- ### [How to add session replay to a Vue app](/build/vue-session-replay)
  [Turn on Amplitude session replay in a Vue, Vite, and Vue Router app, record every session in development and a small share in production, mask sensitive components and whole routes, and open your own test replay. About 15 minutes, all copy-paste.](/build/vue-session-replay)
  [- Vue 3- Vite- Vue Router- Unified SDK 1.x](/build/vue-session-replay)
  [Chris Tam](/build/vue-session-replay)

  [15 min · 9 Oct 2026](/build/vue-session-replay)
- ### [How to add web analytics to a Vue app](/build/vue-web-analytics)
  [Configure the Amplitude Unified SDK so every Vue Router navigation becomes a page view, every visit carries its UTM and referrer data, and sessions feed bounce rate and session length. Then keep campaign parameters alive through navigation guards and redirects, and open the Marketing Analytics views that read them. About 15 minutes, all copy-paste.](/build/vue-web-analytics)
  [- Vue 3- Vite- Vue Router- Unified SDK 1.x](/build/vue-web-analytics)
  [Chris Tam](/build/vue-web-analytics)

  [15 min · 9 Oct 2026](/build/vue-web-analytics)
- ### [How to send events to Amplitude from your server](/build/send-events-server-side)
  [Forward the browser's session ID to your API, carry the user's IP and user agent onto server events, dedupe webhook retries with \`insert\_id\`, and backdate events from a background job. About 20 minutes, all copy-paste.](/build/send-events-server-side)
  [- Node 20.6+- Express- Node SDK 1.x- HTTP V2 API](/build/send-events-server-side)
  [Chris Tam](/build/send-events-server-side)

  [20 min · 8 Oct 2026](/build/send-events-server-side)
- ### [How to stitch client and server events to one user](/build/stitch-client-server-events)
  [Define the user ID once on the server, read the browser's device ID from a header or the Amplitude cookie, send both IDs on the sign-up event, hand the same user ID back to the browser, and reset cleanly on sign-out. About 20 minutes, all copy-paste.](/build/stitch-client-server-events)
  [- Node 20.6+- Express- Unified SDK 1.x- Node SDK 1.x](/build/stitch-client-server-events)
  [Chris Tam](/build/stitch-client-server-events)

  [20 min · 8 Oct 2026](/build/stitch-client-server-events)
- ### [How to use local evaluation for low-latency feature flags in Node.js](/build/nodejs-local-evaluation)
  [Create a local evaluation flag, load its rules into your Express server before it takes traffic, evaluate it in a route with no network call, and track exposures for the users who see it. About 15 minutes, all copy-paste.](/build/nodejs-local-evaluation)
  [- Node 20.6+- Express- Experiment Node SDK 1.x](/build/nodejs-local-evaluation)
  [Chris Tam](/build/nodejs-local-evaluation)

  [15 min · 8 Oct 2026](/build/nodejs-local-evaluation)
- ### [How to add Web Experiment to a React app](/build/react-web-experiment)
  [Load the Amplitude Web Experiment script in your Vite \`index.html\` so it runs before React renders, give the elements you want to test stable selectors, and confirm \`\[Experiment\] Impression\` events land. About 15 minutes, all copy-paste.](/build/react-web-experiment)
  [- React 18+- Vite- React Router- Web Experiment script](/build/react-web-experiment)
  [Chris Tam](/build/react-web-experiment)

  [15 min · 7 Oct 2026](/build/react-web-experiment)
- ### [How to add feature flags and experiments to a Node.js backend](/build/nodejs-feature-flags)
  [Create a server deployment and a flag with a JSON payload, read the variant in an Express route, track the exposure for the right user, and serve a safe default when the fetch fails. About 15 minutes, all copy-paste.](/build/nodejs-feature-flags)
  [- Node 20.6+- Express- Experiment Node SDK 1.x](/build/nodejs-feature-flags)
  [Chris Tam](/build/nodejs-feature-flags)

  [15 min · 7 Oct 2026](/build/nodejs-feature-flags)
- ### [How to add feature flags and experiments to a React app](/build/react-feature-flags)
  [Create a client deployment and a feature flag with a JSON payload, read the variant in a Vite and React Router app, refetch when the user signs in, and confirm the exposure lands on the right user. About 15 minutes, all copy-paste.](/build/react-feature-flags)
  [- React 18+- Vite- React Router- Unified SDK 1.x](/build/react-feature-flags)
  [Chris Tam](/build/react-feature-flags)

  [15 min · 7 Oct 2026](/build/react-feature-flags)
- ### [How to add guides and surveys to a React app](/build/react-guides-surveys)
  [Turn on guides and surveys in a Vite and React Router app, send guide links and buttons through your router, anchor a pin to a React component, and open a survey from your own button. About 20 minutes, all copy-paste.](/build/react-guides-surveys)
  [- React 18+- Vite- React Router- Unified SDK 1.x](/build/react-guides-surveys)
  [Chris Tam](/build/react-guides-surveys)

  [20 min · 7 Oct 2026](/build/react-guides-surveys)
- ### [How to add heatmaps to a React app](/build/react-heatmaps)
  [Turn on session replay in a Vite and React Router app, switch on heatmap capture for the project, give each tab its own route so heatmaps don't merge them, and create a click map for a dynamic route. About 15 minutes of setup, then heatmaps fill in as traffic arrives.](/build/react-heatmaps)
  [- React 18+- Vite- React Router- Unified SDK 1.x](/build/react-heatmaps)
  [Chris Tam](/build/react-heatmaps)

  [15 min · 7 Oct 2026](/build/react-heatmaps)
- ### [How to add product analytics to your app with Claude Code](/build/claude-code-product-analytics)
  [Connect Claude Code to Amplitude's MCP servers and plugin, hand it one prompt that installs the SDK the docs recommend for your stack, review the diff for the mistakes agents make, and save the rules in CLAUDE.md. About 15 minutes, all copy-paste.](/build/claude-code-product-analytics)
  [- Claude Code- Amplitude MCP- Amplitude plugin- CLAUDE.md](/build/claude-code-product-analytics)
  [Chris Tam](/build/claude-code-product-analytics)

  [15 min · 6 Oct 2026](/build/claude-code-product-analytics)
- ### [How to add product analytics to your app with Devin Desktop](/build/devin-desktop-product-analytics)
  [Connect Devin Desktop to Amplitude's MCP servers with one project config file, hand its agent one prompt that installs the SDK the docs recommend for your stack, review the diff for the mistakes agents make, and save the rules as a workspace rule. About 15 minutes, all copy-paste.](/build/devin-desktop-product-analytics)
  [- Devin Desktop- Formerly Windsurf- Amplitude MCP- .devin/rules](/build/devin-desktop-product-analytics)
  [Chris Tam](/build/devin-desktop-product-analytics)

  [15 min · 6 Oct 2026](/build/devin-desktop-product-analytics)
- ### [How to add product analytics to your app with Gemini CLI](/build/gemini-cli-product-analytics)
  [Connect Gemini CLI to Amplitude's MCP servers, hand it one prompt that installs the SDK the docs recommend for your stack, review its changes for the mistakes agents make, and save the rules in GEMINI.md. About 15 minutes, all copy-paste.](/build/gemini-cli-product-analytics)
  [- Gemini CLI- Amplitude MCP- Docs MCP- GEMINI.md](/build/gemini-cli-product-analytics)
  [Chris Tam](/build/gemini-cli-product-analytics)

  [15 min · 6 Oct 2026](/build/gemini-cli-product-analytics)
- ### [How to add product analytics to your app with Kiro](/build/kiro-product-analytics)
  [Connect Kiro to Amplitude's MCP servers, put your API key in an env file, and hand Kiro one prompt that installs the SDK the docs recommend for your stack. Then review the diff for the mistakes agents make, add one event that matches your taxonomy, and save the rules in a steering file. About 15 minutes, all copy-paste.](/build/kiro-product-analytics)
  [- Kiro- Amplitude MCP- Docs MCP- Steering](/build/kiro-product-analytics)
  [Chris Tam](/build/kiro-product-analytics)

  [15 min · 6 Oct 2026](/build/kiro-product-analytics)
- ### [How to add product analytics to your app with Lovable](/build/lovable-product-analytics)
  [Connect Lovable to Amplitude's MCP servers, put your API key where the browser can read it, and hand Lovable one prompt that installs the SDK the docs recommend. Then review its changes, add one event that matches your taxonomy, and save the rules as project knowledge. About 15 minutes, all copy-paste.](/build/lovable-product-analytics)
  [- Lovable- React- TanStack Start- Amplitude MCP](/build/lovable-product-analytics)
  [Chris Tam](/build/lovable-product-analytics)

  [15 min · 6 Oct 2026](/build/lovable-product-analytics)
- ### [How to add product analytics to your app with Replit](/build/replit-product-analytics)
  [Connect Replit Agent to Amplitude's MCP servers, give your API key a name the browser can read, and hand Agent one prompt that installs the SDK the docs recommend. Then review its changes, add one event that matches your taxonomy, and save the rules in replit.md. About 15 minutes, all copy-paste.](/build/replit-product-analytics)
  [- Replit- React- Vite- Amplitude MCP](/build/replit-product-analytics)
  [Chris Tam](/build/replit-product-analytics)

  [15 min · 6 Oct 2026](/build/replit-product-analytics)
- ### [How to add product analytics to your app with v0](/build/v0-product-analytics)
  [Connect v0 to Amplitude's MCP servers, add your API key as an environment variable the browser build can read, and hand v0 one prompt that installs the SDK the docs recommend. Then review its diff, add one event that matches your taxonomy, and save the rules as a v0 Instruction. About 15 minutes, all copy-paste.](/build/v0-product-analytics)
  [- v0- Next.js- App Router- Amplitude MCP](/build/v0-product-analytics)
  [Chris Tam](/build/v0-product-analytics)

  [15 min · 6 Oct 2026](/build/v0-product-analytics)
- ### [How to add session replay to a React app](/build/react-session-replay)
  [Turn on Amplitude session replay in a Vite and React Router app, record every session in development and a small share in production, mask sensitive components and whole routes, and open your own test replay. About 15 minutes, all copy-paste.](/build/react-session-replay)
  [- React 18+- Vite- React Router- Unified SDK 1.x](/build/react-session-replay)
  [Chris Tam](/build/react-session-replay)

  [15 min · 6 Oct 2026](/build/react-session-replay)
- ### [How to add web analytics to a React app](/build/react-web-analytics)
  [Configure the Amplitude Unified SDK so every React Router navigation becomes a page view, every visit carries its UTM and referrer data, and sessions feed bounce rate and session length. Then keep campaign parameters alive through client-side redirects and open the Marketing Analytics views that read them. About 15 minutes, all copy-paste.](/build/react-web-analytics)
  [- React 18+- Vite- React Router- Unified SDK 1.x](/build/react-web-analytics)
  [Chris Tam](/build/react-web-analytics)

  [15 min · 6 Oct 2026](/build/react-web-analytics)
- ### [How to add product analytics to a Next.js app](/build/nextjs-product-analytics)
  [Install the Amplitude Unified SDK in a Next.js App Router project, identify signed-in users, track one custom event from a click and one conversion from a server action, and confirm both land on the same user. About 15 minutes, all copy-paste.](/build/nextjs-product-analytics)
  [- Next.js 13+- App Router- Unified SDK 1.x- Node SDK 1.x](/build/nextjs-product-analytics)
  [Chris Tam](/build/nextjs-product-analytics)

  [15 min · 29 Sept 2026](/build/nextjs-product-analytics)
- ### [How to add Web Experiment to a Next.js app](/build/nextjs-web-experiment)
  [Load the Amplitude Web Experiment script in your Next.js root layout so variants render before the page paints, keep analytics in the npm SDK you already have, and confirm \[Experiment\] Impression events land. About 15 minutes, and most of it is one \<script> tag.](/build/nextjs-web-experiment)
  [- Next.js 13+- App Router- Web Experiment script](/build/nextjs-web-experiment)
  [Chris Tam](/build/nextjs-web-experiment)

  [15 min · 25 Sept 2026](/build/nextjs-web-experiment)
- ### [How to add agent analytics to a Next.js app](/build/nextjs-agent-analytics)
  [Install the Amplitude AI SDK on the server side of a Next.js app, wrap an LLM route handler in an agent session, link it to the user's browser session, and flush before the function freezes. About 20 minutes, all copy-paste.](/build/nextjs-agent-analytics)
  [- Next.js 15+- App Router- Amplitude AI SDK](/build/nextjs-agent-analytics)
  [Chris Tam](/build/nextjs-agent-analytics)

  [20 min · 25 Sept 2026](/build/nextjs-agent-analytics)
- ### [How to add feature flags and experiments to a Next.js app](/build/nextjs-feature-flags)
  [Create a client deployment and a feature flag in Amplitude, initialize Feature Experiment in the Next.js App Router, read the variant in a client component, and confirm the exposure lands on the right user. About 15 minutes, all copy-paste.](/build/nextjs-feature-flags)
  [- Next.js 13+- App Router- Unified SDK 1.x- Feature Experiment](/build/nextjs-feature-flags)
  [Chris Tam](/build/nextjs-feature-flags)

  [15 min · 25 Sept 2026](/build/nextjs-feature-flags)
- ### [How to add guides and surveys to a Next.js app](/build/nextjs-guides-surveys)
  [Install the Amplitude Unified SDK in a Next.js App Router project, let it boot guides and surveys once on the client, route guide links through the Next.js router, identify signed-in users so targeting works, and open a survey from your own button. About 20 minutes, all copy-paste.](/build/nextjs-guides-surveys)
  [- Next.js 13+- App Router- Unified SDK 1.x](/build/nextjs-guides-surveys)
  [Chris Tam](/build/nextjs-guides-surveys)

  [20 min · 25 Sept 2026](/build/nextjs-guides-surveys)
- ### [How to add heatmaps to a Next.js app](/build/nextjs-heatmaps)
  [Install the Amplitude Unified SDK with session replay on, initialize it once on the client, give each App Router view its own URL, and create a click map for a dynamic route. About 15 minutes of setup, then heatmaps fill in as traffic arrives.](/build/nextjs-heatmaps)
  [- Next.js 13+- App Router- Unified SDK 1.x- Session Replay plugin 1.7+](/build/nextjs-heatmaps)
  [Chris Tam](/build/nextjs-heatmaps)

  [15 min · 25 Sept 2026](/build/nextjs-heatmaps)
- ### [How to add session replay to a Next.js app](/build/nextjs-session-replay)
  [Install the Amplitude Unified SDK in a Next.js App Router project, start session replay once on the client with a sample rate you choose, mask what shouldn't leave the browser, and confirm a replay lands. About 15 minutes, all copy-paste.](/build/nextjs-session-replay)
  [- Next.js 13+- App Router- Unified SDK 1.x](/build/nextjs-session-replay)
  [Chris Tam](/build/nextjs-session-replay)

  [15 min · 25 Sept 2026](/build/nextjs-session-replay)
- ### [How to add web analytics to a Next.js app](/build/nextjs-web-analytics)
  [Configure the Amplitude Unified SDK so every App Router navigation becomes a page view, every visit carries its UTM and referrer data, and sessions feed bounce rate and session length. Then open the Marketing Analytics views that read those events. About 15 minutes, all copy-paste.](/build/nextjs-web-analytics)
  [- Next.js 13+- App Router- Unified SDK 1.x](/build/nextjs-web-analytics)
  [Chris Tam](/build/nextjs-web-analytics)

  [15 min · 25 Sept 2026](/build/nextjs-web-analytics)
- ### [Track events from React Server Components](/build/nextjs-server-components-tracking)
  [Move Amplitude tracking out of Server Component render and into server actions and route handlers, pass the browser's device ID and your user ID to the Node.js SDK, and flush before each request ends. About 15 minutes, all copy-paste.](/build/nextjs-server-components-tracking)
  [- Next.js 14+- App Router- Node SDK 1.x](/build/nextjs-server-components-tracking)
  [Chris Tam](/build/nextjs-server-components-tracking)

  [15 min · 25 Sept 2026](/build/nextjs-server-components-tracking)
- ### [Use feature flags with server-side rendering in Next.js](/build/nextjs-feature-flags-ssr)
  [Evaluate an Amplitude feature flag on the server with the Experiment Node server SDK, give the server the same device ID the browser uses, and render the variant in the first HTML, either from a Server Component or from a client component bootstrapped with initialVariants. Exposures go out only after the variant is on screen.](/build/nextjs-feature-flags-ssr)
  [- Next.js 13+- App Router- Experiment Node SDK 1.x- Experiment JS SDK 1.x- Local evaluation](/build/nextjs-feature-flags-ssr)
  [Chris Tam](/build/nextjs-feature-flags-ssr)

  [25 min · 25 Sept 2026](/build/nextjs-feature-flags-ssr)
- ### [How to add analytics to your app with Codex CLI](/build/codex-cli-analytics)
  [Connect Codex CLI to Amplitude's MCP servers, hand it one prompt that installs the right SDK for your stack, review the diff for the mistakes agents make, and save the rules in AGENTS.md so later edits follow them. About 15 minutes, all copy-paste.](/build/codex-cli-analytics)
  [- Codex CLI- Amplitude MCP- Docs MCP- AGENTS.md](/build/codex-cli-analytics)
  [Chris Tam](/build/codex-cli-analytics)

  [15 min · 24 Sept 2026](/build/codex-cli-analytics)
- ### [How to add product analytics to a Node.js backend](/build/nodejs-product-analytics)
  [Install the Amplitude Node.js SDK in an Express backend, attach the right user or device ID to every server event, and flush the queue before the process exits. About 15 minutes, all copy-paste.](/build/nodejs-product-analytics)
  [- Node 20.6+- Express- Node SDK 1.x](/build/nodejs-product-analytics)
  [Chris Tam](/build/nodejs-product-analytics)

  [15 min · 24 Sept 2026](/build/nodejs-product-analytics)
- ### [How to add product analytics to a React app](/build/react-product-analytics)
  [Install the Amplitude Unified SDK in a Vite and React Router app, capture page views on every client-side navigation, identify signed-in users, and track one custom event. About 10 minutes, all copy-paste.](/build/react-product-analytics)
  [- React 18+- Vite- React Router- Unified SDK 1.x](/build/react-product-analytics)
  [Chris Tam](/build/react-product-analytics)

  [10 min · 24 Sept 2026](/build/react-product-analytics)

For Agents

Every Build tutorial, in a format agents can read.

[llms.txt](/llms.txt)[llms-full.txt](/llms-full.txt)

## Get an API key and start shipping

A free account covers almost every tutorial here. For the full SDK reference, head to the docs.

[Get started free](https://app.amplitude.com/signup)[Read the docs](https://amplitude.com/docs/sdks)
