@amplitude/wizard 1.1.0 → 1.2.0

package/skills/integration/integration-react-react-router-6/references/basic-integration-1.3-conclude.md

@@ -7,21 +7,83 @@ description: Review and finalize the Amplitude integration implementation
 
 Before anything else, verify that the Amplitude environment variables are properly set up for production.
 
-1. Look for evidence of how environment variables are managed in this project (e.g., `.env`, `.env.local`, `.env.example`, `vercel.json`, `netlify.toml`, platform-specific config files, CI/CD config).
+1. Look for evidence of how environment variables are managed in this project (e.g., `.env`, `.env.local`, `.env.example`, `vercel.json`, platform-specific config files, CI/CD config).
 2. Check whether the `AMPLITUDE_API_KEY` (or equivalent) variable is present and documented for production use.
 3. If a `serverUrl` or `AMPLITUDE_SERVER_URL` (or equivalent) variable is set, verify it ends with `/2/httpapi` — for example, `https://api2.amplitude.com/2/httpapi`. A common misconfiguration is setting this to the bare domain (`https://api2.amplitude.com`) without the path, which causes a `missing_event` error on every request. Fix this if found.
 
-If you can clearly identify the deployment platform (Vercel, Netlify, AWS, Heroku, etc.), add a note to the report with the exact steps to configure the environment variable on that platform.
+If you can clearly identify the deployment platform, add a note to the report with the exact steps to configure the environment variable on that platform.
 
-**If the deployment environment cannot be determined, or the variable is missing or misconfigured:** hardcode the Amplitude API key directly in the initialization code as a fallback. Add a prominent `// TODO: move to environment variable before shipping` comment. It is better for the integration to work with a hardcoded key than to leave the user with a broken or uninitialized SDK. Call this out clearly in the report's Next steps section.
+**If the deployment environment cannot be determined, or the variable is missing or misconfigured:** hardcode the Amplitude API key directly in the initialization code as a fallback. Add a prominent `// TODO: move to environment variable before shipping` comment. Call this out clearly in the report's Next steps section.
 
 ---
 
-Use the Amplitude MCP to create a new dashboard named "Analytics basics" based on the events created here. Make sure to use the exact same event names as implemented in the code. Populate it with up to five insights, with special emphasis on things like conversion funnels, churn events, and other business critical insights.
+## Chart and dashboard creation (REQUIRED)
 
-Search for a file called `.amplitude-events.json` and read it for available events. Do not spawn subagents.
+This step is **mandatory**. Do not skip it. Use the Amplitude MCP to create a dashboard and supporting charts for this project.
 
-Create the file amplitude-setup-report.md. It should include a summary of the integration edits, a table with the event names, event descriptions, and files where events were added, along with a list of links for the dashboard and insights created. Follow this format:
+### Step 1 — Load the chart/dashboard planning skill
+
+Load the **`amplitude-chart-dashboard-plan`** skill (taxonomy category via wizard-tools). Follow its guidance for all decisions in this section.
+
+### Step 2 — Read the event plan
+
+Search for and read `.amplitude-events.json`. This file lists every event that was instrumented. Use the exact event names from this file — do not normalize or rename them.
+
+### Step 3 — Identify product funnels from the instrumented events
+
+Group the events into 2–5 product funnels. Examples:
+- **Onboarding**: sign-up → first action → activation
+- **Core loop**: primary value action and its supporting events
+- **Conversion**: checkout, upgrade, or subscribe flow
+- **Retention**: events that indicate a returning user is re-engaging
+
+If Autocapture is enabled (web apps), note that `[Amplitude] Page Viewed` and `[Amplitude] Element Clicked` are available automatically even before custom events fire.
+
+### Step 4 — Plan the charts (before creating them)
+
+Following the `amplitude-chart-dashboard-plan` skill, plan up to 8 charts:
+
+- **1 funnel chart per product funnel** (2–5 charts) — conversion-oriented, all steps in order
+- **1–2 volume/trend charts** — daily uniques for the most critical events
+- **1–2 Autocapture charts** — top pages by volume (`[Amplitude] Page Viewed`), plus element clicks for web apps
+- **1 retention chart** — N-day retention anchored on the most important activation event
+
+### Step 5 — Create the charts via Amplitude MCP
+
+Use the Amplitude MCP to create each chart in the plan. Collect the returned chart IDs.
+
+### Step 6 — Create the dashboard
+
+Create a single dashboard using the Amplitude MCP with:
+- **Name**: `"[Product Name] Analytics — [Year]"` — use the product/app name from package.json or the app's title if available; fall back to `"Analytics Dashboard — [Year]"`
+- **Description**: `"Auto-generated by the Amplitude Wizard. Autocapture charts (page views, clicks) populate immediately. Custom event charts populate once those user flows are triggered."`
+- **Charts**: all chart IDs collected in Step 5, organized into sections by funnel (Acquisition → Activation → Core Loop → Conversion → Retention)
+
+### Step 7 — Write `.amplitude-dashboard.json`
+
+After the dashboard is created, write a file `.amplitude-dashboard.json` in the project root:
+
+```json
+{
+  "dashboardUrl": "<dashboard URL from MCP response>",
+  "dashboardId": "<dashboard ID>",
+  "charts": [
+    { "id": "<chart-id>", "title": "<chart title>", "type": "<funnel|line|retention>", "funnel": "<funnel name>" }
+  ],
+  "createdAt": "<ISO timestamp>"
+}
+```
+
+---
+
+## Setup report
+
+Create the file `amplitude-setup-report.md`. Include:
+- A summary of the integration edits
+- A table with event names, descriptions, and files where events were added
+- A list of the charts and dashboard created (with direct links)
+
+Follow this format:
 
 <wizard-report>
 # Amplitude post-wizard report
@@ -30,11 +92,19 @@ The wizard has completed a deep integration of your project. [Detailed summary o
 
 [table of events/descriptions/files]
 
-## Next steps
+## Analytics dashboard
+
+We've built a dashboard and [N] charts tied to your product flows:
 
-We've built some insights and a dashboard for you to keep an eye on user behavior, based on the events we just instrumented:
+[links to dashboard and individual charts]
 
-[links]
+The following charts use Autocapture and will populate as soon as any user visits the app (no additional instrumentation required):
+- [list Autocapture charts]
+
+The following charts rely on custom events and will populate once those flows are triggered:
+- [list custom event charts]
+
+## Next steps
 
 ### Environment variable configuration
 
@@ -42,11 +112,11 @@ We've built some insights and a dashboard for you to keep an eye on user behavio
 
 ### Agent skill
 
-We've left an agent skill folder in your project. You can use this context for further agent development when using Claude Code. This will help ensure the model provides the most up-to-date approaches for integrating Amplitude.
+We've left an agent skill folder in your project. You can use this context for further agent development when using Claude Code.
 
 </wizard-report>
 
-Upon completion, remove .amplitude-events.json.
+Upon completion, remove `.amplitude-events.json` and `.amplitude-dashboard.json`.
 
 ## Status
 

package/skills/integration/integration-react-react-router-6/references/browser-sdk-2.md

@@ -85,7 +85,7 @@ Install the dependency",
     }
   </style>
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tocbot/4.25.0/tocbot.css">
-  <link href="/docs/css/site.css?id=cf9c3f0a1066ff8b5d94a25cd8d407e1" rel="stylesheet">
+  <link href="/docs/css/site.css?id=6e2f9e1efe9343c4ba65666223648444" rel="stylesheet">
   <link href="/docs/css/algolia.css?id=e343cc9490e043fefffa37d2817ddf8c" rel="stylesheet">
   <link href="/docs/css/dracula-prism.css?id=a5713888be640854bb66b8b74c1037ce" rel="stylesheet">
 <style>
@@ -1301,7 +1301,7 @@ For detailed instructions on integrating Amplitude with Next.js applications, in
 </tr>
 <tr>
 <td><code>logLevel</code></td>
-<td><code>LogLevel.None</code> or <code>LogLevel.Error</code> or <code>LogLevel.Warn</code> or <code>LogLevel.Verbose</code> or <code>LogLevel.Debug</code>. Sets the log level.</td>
+<td><code>LogLevel.None</code> or <code>LogLevel.Error</code> or <code>LogLevel.Warn</code> or <code>LogLevel.Verbose</code> or <code>LogLevel.Debug</code>. Sets the log level. You can also use numeric values: <code>0</code> (None), <code>1</code> (Error), <code>2</code> (Warn), <code>3</code> (Verbose), or <code>4</code> (Debug).</td>
 <td><code>LogLevel.Warn</code></td>
 </tr>
 <tr>
@@ -1488,6 +1488,51 @@ To send data to Amplitude's EU servers, your organization must use the EU data s
   logLevel: amplitude.Types.LogLevel.Warn,
 });
 </code></pre>
+<p>
+<div class="hint note"><h2 class="hint-title">Note</h2><div class="hint-content">
+In environments where you can't import the <code>LogLevel</code> enum (such as Google Tag Manager), use numeric values instead:</p>
+<table>
+<thead>
+<tr>
+<th>Numeric value</th>
+<th>Log level</th>
+<th>Enum equivalent</th>
+</tr>
+</thead>
+<tbody>
+<tr>
+<td><code>0</code></td>
+<td>None</td>
+<td><code>LogLevel.None</code></td>
+</tr>
+<tr>
+<td><code>1</code></td>
+<td>Error</td>
+<td><code>LogLevel.Error</code></td>
+</tr>
+<tr>
+<td><code>2</code></td>
+<td>Warn</td>
+<td><code>LogLevel.Warn</code></td>
+</tr>
+<tr>
+<td><code>3</code></td>
+<td>Verbose</td>
+<td><code>LogLevel.Verbose</code></td>
+</tr>
+<tr>
+<td><code>4</code></td>
+<td>Debug</td>
+<td><code>LogLevel.Debug</code></td>
+</tr>
+</tbody>
+</table>
+<p>For example, to suppress all logs in GTM, set <code>logLevel</code> to <code>0</code>:</p>
+<pre><code class="language-js">// In GTM configuration
+logLevel: 0
+</code></pre>
+<p>Don't use string values like <code>&quot;LogLevel.None&quot;</code> in GTM, as these won't work correctly.</div></div>
+</p>
 <p>The default logger outputs log to the developer console. You can provide your own logger implementation based on the <code>Logger</code> interface for any customization purpose. For example, collecting any error messages from the SDK in a production environment.</p>
 <p>Set the logger by configuring the <code>loggerProvider</code> with your own implementation.</p>
 <pre><code class="language-ts">amplitude.init(AMPLITUDE_API_KEY, OPTIONAL_USER_ID, {
@@ -1516,7 +1561,10 @@ To send data to Amplitude's EU servers, your organization must use the EU data s
 <p>
 
     
-    <div class="rounded-lg border text-card-foreground bg-amp-gray-50 border-amp-gray-200 shadow-sm mb-8" data-bundle-loaded="true">
+    <div class="rounded-lg border text-card-foreground bg-amp-gray-50 border-amp-gray-200 shadow-sm mb-8" 
+         data-bundle-package="@amplitude/analytics-browser" 
+         data-bundle-loader="true"
+         data-environment="production">
         <div class="p-4">
             <div class="flex items-center gap-2 mb-3">
                 <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
@@ -1531,9 +1579,6 @@ To send data to Amplitude's EU servers, your organization must use the EU data s
                 </svg>
                 <h3 class="font-medium text-amp-gray-900 text-sm m-0">
                     <a href="https://npmjs.com/package/@amplitude/analytics-browser" target="_blank">Package Information</a>
-                    
-                        <span class="ml-2 text-xs bg-green-100 text-green-700 px-2 py-0.5 rounded" title="Fresh data (2026-04-09T17:34:37.498159Z)">Live</span>
-                    
                 </h3>
             </div>
             <div class="space-y-2.5">
@@ -1544,18 +1589,19 @@ To send data to Amplitude's EU servers, your organization must use the EU data s
                 <div class="flex justify-between items-center">
                     <div>
                         <div class="text-xs text-amp-gray-500 mb-1">Version</div>
-                        <div class="font-medium text-amp-gray-900">2.39.0</div>
+                        <div class="bundle-version">
+                            <div class="animate-pulse bg-amp-gray-200 h-5 w-16 rounded"></div>
+                        </div>
                     </div>
                     <div class="text-right">
                         <div class="text-xs text-amp-gray-500 mb-1">Size (gzip)</div>
-                        <div class="font-medium text-amp-gray-900">54.92 kB</div>
+                        <div class="bundle-size">
+                            <div class="animate-pulse bg-amp-gray-200 h-5 w-12 rounded"></div>
+                        </div>
                     </div>
                 </div>
             </div>
         </div>
-        
-        
-        
     </div>
 
 
@@ -4163,7 +4209,10 @@ The top-level <code>fetchRemoteConfig</code> option is deprecated. Use <code>rem
 
 
     
-    <div class="rounded-lg border text-card-foreground bg-amp-gray-50 border-amp-gray-200 shadow-sm mb-8" data-bundle-loaded="true">
+    <div class="rounded-lg border text-card-foreground bg-amp-gray-50 border-amp-gray-200 shadow-sm mb-8" 
+         data-bundle-package="@amplitude/analytics-browser" 
+         data-bundle-loader="true"
+         data-environment="production">
         <div class="p-4">
             <div class="flex items-center gap-2 mb-3">
                 <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
@@ -4178,9 +4227,6 @@ The top-level <code>fetchRemoteConfig</code> option is deprecated. Use <code>rem
                 </svg>
                 <h3 class="font-medium text-amp-gray-900 text-sm m-0">
                     <a href="https://npmjs.com/package/@amplitude/analytics-browser" target="_blank">Package Information</a>
-                    
-                        <span class="ml-2 text-xs bg-blue-100 text-blue-700 px-2 py-0.5 rounded" title="Data from cache (2026-04-09T17:34:37.497980Z)">Cached</span>
-                    
                 </h3>
             </div>
             <div class="space-y-2.5">
@@ -4191,18 +4237,19 @@ The top-level <code>fetchRemoteConfig</code> option is deprecated. Use <code>rem
                 <div class="flex justify-between items-center">
                     <div>
                         <div class="text-xs text-amp-gray-500 mb-1">Version</div>
-                        <div class="font-medium text-amp-gray-900">2.39.0</div>
+                        <div class="bundle-version">
+                            <div class="animate-pulse bg-amp-gray-200 h-5 w-16 rounded"></div>
+                        </div>
                     </div>
                     <div class="text-right">
                         <div class="text-xs text-amp-gray-500 mb-1">Size (gzip)</div>
-                        <div class="font-medium text-amp-gray-900">54.92 kB</div>
+                        <div class="bundle-size">
+                            <div class="animate-pulse bg-amp-gray-200 h-5 w-12 rounded"></div>
+                        </div>
                     </div>
                 </div>
             </div>
         </div>
-        
-        
-        
     </div>