Add AI-assisted installation documentation (#2180)

ryancurtis1 · claude · web-flow · commit 977cfb093833 · 2025-10-23T16:28:10.000-04:00
* Add AI-assisted installation documentation Adds comprehensive "Install with AI" guide to help users set up Mixpanel using AI coding assistants like Claude, ChatGPT, and Cursor. Includes quickstart callout section highlighting the new installation method. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com> * Update AI installation docs with beta label and styling improvements - Add [beta] label to page title and navigation - Switch to ExtendedButton component for better styling - Move install-with-ai to bottom of quickstart navigation - Add margin-top to callout section for better spacing - Update cspell dictionary with new terms 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com> * fix bug * add import * simplify formatting * fix typo * update copy --------- Co-authored-by: Ryan Curtis <176308989+ryancurtis1@users.noreply.github.com> Co-authored-by: Claude <noreply@anthropic.com>
diff --git a/cspell.json b/cspell.json
@@ -67,6 +67,7 @@
     "callout",
     "Cartfile",
     "CCPA",
+    "chatbots",
     "checksumming",
     "chmln",
     "Clevertap",
@@ -223,6 +224,7 @@
     "screenflows",
     "searchbox",
     "serviceaccount",
+    "sessionreplay",
     "SFMC",
     "shlex",
     "shopify",
@@ -313,4 +315,4 @@
       "addWords": true
     }
   ]
-}
+}
diff --git a/pages/docs/quickstart.mdx b/pages/docs/quickstart.mdx
@@ -1,4 +1,5 @@
 import { Cards } from 'nextra/components'
+import ExtendedButton from "/components/ExtendedButton/ExtendedButton";
 
 # Quickstart
 
@@ -7,3 +8,14 @@ import { Cards } from 'nextra/components'
   <Cards.Card icon title="Identify Users" href="/docs/quickstart/identify-users" />
   <Cards.Card icon title="Capture Events" href="/docs/quickstart/track-events" />
 </Cards>
+
+### [BETA] Set up Mixpanel at the speed of AI
+Install Mixpanel faster and easier than ever with the AI code editor integration. The Mixpanel Installation Wizard is an interactive CLI tool that generates customized, AI-optimized SDK installation instructions for developers integrating Mixpanel analytics. It creates step-by-step guides that can be directly fed to AI coding assistants like Cursor or Claude Code to automate the integration process.
+<div className="extendedButtonComponent" >
+<br/>
+<ExtendedButton
+    title="Get Started with AI"
+    link="/docs/quickstart/install-with-ai"
+  ></ExtendedButton>
+</div>
+
diff --git a/pages/docs/quickstart/_meta.ts b/pages/docs/quickstart/_meta.ts
@@ -2,6 +2,7 @@ export default {
   "install-mixpanel": "Install Mixpanel",
   "identify-users": "Identify Users",
   "capture-events": "Capture Events",
+  "install-with-ai": "Install with AI [BETA]",
   "tips-and-tricks": {
     "display": "hidden"
   },
diff --git a/pages/docs/quickstart/install-with-ai.mdx b/pages/docs/quickstart/install-with-ai.mdx
@@ -0,0 +1,228 @@
+# Install with AI [BETA]
+
+This guide will help you add Mixpanel analytics to your app or website using AI assistance, even if you're not a developer. The Mixpanel Installation Wizard creates step-by-step instructions that you can give to AI coding tools like Claude, ChatGPT, or Cursor.
+
+## What You'll Need
+
+Before starting, make sure you have:
+
+- A Mixpanel account with Admin or Owner access ([sign up](https://www.mixpanel.com/signup) if you don't have one)
+- Access to an AI coding assistant (Claude, ChatGPT, Cursor, etc.)
+    - Be sure to use the most advanced AI model you have access to
+- Your project's code files and a development or staging environment to test the changes
+
+## Step 1: Get Your Mixpanel Project Token
+
+1. Log into your [Mixpanel account](https://www.mixpanel.com/login)
+2. Go to your [project settings](https://www.mixpanel.com/settings/project) (gear icon in the bottom left)
+3. Click on "Overview" in the left sidebar
+4. Scroll down to Access Keys section and copy your "Project Token" - it looks like a long string of letters and numbers
+
+    (You will need to be an Admin or Owner in your project)
+
+5. Keep this handy - you'll need it in the next step
+
+## Step 2: Create Your AI Instructions
+
+1. Simply paste this command in your terminal:
+```
+npx @mixpanel/mixpanel-wizard
+```
+2. Go through and answer a few quick questions and it will then create a customized installation guide
+
+### Choose Your Settings
+
+You'll need to pick three things:
+
+**A. Choose Your SDK Type**
+
+This depends on what type of app or website you're building:
+
+- **`javascript`**
+- **`react-native`**
+- **`ios-swift`**
+- **`ios-objective-c`**
+- **`android`**
+- **`python`**
+- **`nodejs`**
+- **`flutter`**
+- **`unity`**
+- **`go`**
+- **`ruby`**
+- **`php`**
+- **`java`**
+
+*Don't see your platform? Check with a developer or choose the closest match.*
+
+**B. Choose Your Event Type**
+
+This determines what kinds of user actions you'll track:
+
+- **`ai`** - Best for AI-powered features (chatbots, AI tools, ML features)
+- **`ecommerce`** - Best for online stores and shopping apps
+- **`default`** - Good general-purpose events for most other apps
+
+**C. Decide on Extra Features**
+
+- **Autocapture** - Automatically tracks clicks and page views (JavaScript SDK only)
+- **Session Replay** - Records user sessions for debugging (JavaScript, iOS Swift, Android SDKs only)
+
+*Recommendation: Enable both if they're available for your platform*
+
+## Step 3: Give Instructions to Your AI Assistant
+
+1. Open your AI coding tool (Claude, ChatGPT, Cursor, etc.).
+2. Copy over the instruction file generated from the step2 to your project.
+3. Make sure it has access to your project files
+4. Next, copy and paste this prompt into your AI Agent
+
+```
+Let's set up Mixpanel.
+1. Set up mixpanel by following the steps in MIXPANEL_INSTALLATION_INSTRUCTIONS.txt. Make sure to follow the global rules specified in the MIXPANEL_INSTALLATION_INSTRUCTIONS.txt.
+2. After completing the steps in the installation guide, delete the MIXPANEL_INSTALLATION_INSTRUCTIONS.txt
+```
+
+4. Let the AI complete all the steps
+
+The AI will:
+
+- Follow the generated setup instructions
+- Install the necessary code
+- Set up tracking for your chosen events
+
+## Step 4: Test Your Installation
+
+After the AI completes the setup, test that everything is working:
+
+### Quick Test
+
+1. Deploy the changes to your testing environment
+2. Use your app or website normally
+3. Go to your Mixpanel dashboard
+4. Click on "Events" in the left sidebar or visit the [Events page](https://mixpanel.com/report/events)
+5. You should see events flowing in as you use your app (you may need to refresh Mixpanel)
+
+### What to Look For
+
+Depending on your event type, you should see:
+
+**For AI events:**
+
+- "Launch AI" when AI features are used
+- "AI Prompt Sent" when users send prompts
+- "AI Response Sent" when AI responds
+
+**For E-commerce events:**
+
+- "Product Viewed" when products are viewed
+- "Add to Cart" when items are added to cart
+- "Purchase" when transactions complete
+
+**For Default events:**
+
+- "Sign Up" for new user registrations
+- "Page View" for page visits
+- "Search" for search queries
+
+## Troubleshooting
+
+### No Events Showing Up?
+
+1. Check that you used the correct project token
+2. Verify your app is running and being used
+3. Wait a few minutes - sometimes there's a delay
+4. Check the browser console (F12) for any error messages
+
+### Wrong Events Tracking?
+
+1. Make sure you chose the right event type in Step 2B
+2. Ask your AI assistant to show you what events are being tracked
+3. You can always re-run the setup with different event types
+
+### Need Help?
+
+1. Check the Mixpanel documentation at [docs.mixpanel.com](https://docs.mixpanel.com/)
+2. Ask your AI assistant to explain what it installed
+3. Contact [Mixpanel support](https://mixpanel.com/contact-us/support/) through our help center
+
+### Success! 🎉
+
+Once you see events flowing into your Mixpanel dashboard, you're all set! You can now:
+
+- View real-time user activity
+- Create reports and dashboards
+- Set up alerts for important events
+- Analyze user behavior patterns
+
+The AI has set up all the technical details for you - now you can focus on understanding your users and growing your product.
+
+## Command Line Mode
+
+Skip the interactive prompts by providing options directly:
+
+```bash
+# Basic usage
+mixpanel-wizard --token YOUR_TOKEN --sdk javascript --events ai
+
+# With additional options
+mixpanel-wizard --token YOUR_TOKEN --sdk javascript --autocapture --sessionreplay --events ecommerce
+
+# With approval for each code change
+mixpanel-wizard --token YOUR_TOKEN --sdk javascript --confirm-each --events ai
+
+# iOS with specific package manager
+mixpanel-wizard --token YOUR_TOKEN --sdk ios-swift --events default
+```
+
+### Available Options
+
+| Option            | Description                                                    | Values                                                                                                                                      |
+| ----------------- | -------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------- |
+| `-t, --token`     | Your Mixpanel project token                                    | String                                                                                                                                      |
+| `--sdk`           | SDK type to install                                            | `javascript`, `flutter`, `ios-objective-c`, `ios-swift`, `android`, `react-native`, `go`, `python`, `ruby`, `php`, `nodejs`,`java`, `unity` |
+| `--events`        | Additional event type options                                  | `ai`, `ecommerce`, `default`                                                                                                                |
+| `--autocapture`   | Enable autocapture (JavaScript only)                           | Boolean flag                                                                                                                                |
+| `--sessionreplay` | Enable session replay (Javascript, iOS Swift and Android Only) | Boolean flag                                                                                                                                |
+| `--confirm-each`  | Require approval for each code change made by AI               | Boolean flag                                                                                                                                |
+
+### Output
+
+The wizard generates a `MIXPANEL_INSTALLATION_INSTRUCTIONS.txt` file containing:
+
+1. **Step 1: SDK Installation** - Platform-specific installation commands and configuration
+2. **Step 2: User Identification** - Code snippets for identifying users
+3. **Step 3: Event Tracking** - Implementation examples and event templates
+4. **Best Practices** - Security guidelines and recommendations
+
+Simply provide the prompt from MIXPANEL_INSTALLATION_INSTRUCTIONS.txt to your AI coding agent.
+
+## Event Templates
+
+### Default Events
+
+- **Sign Up**: Track new user acquisition with signup method and UTM parameters
+- **Sign In**: Monitor user login events with authentication method tracking
+- **Page View**: Track page/screen views with URL and title information
+- **Search**: Capture search queries and result counts
+- **Error**: Monitor application errors with error types and messages
+- **Purchase**: Track completed transactions with revenue and currency data
+- **Conversion**: Monitor key value moments specific to your product type
+
+### AI Events
+
+- **Launch AI**: Track AI feature engagement and measure adoption patterns
+- **AI Prompt Sent and Prompt Text**: Capture user prompts and analyze engagement intent
+- **AI Response Sent**: Monitor AI outputs with cost, token usage, and response time metrics
+- **API Error**: Track AI feature errors and monitor failure rates
+- **User Feedback**: Collect user sentiment and feedback on AI interactions
+- **AI Dismissed**: Monitor AI feature disengagement points
+- **Conversion Event**: Measure how AI features influence key business outcomes
+
+### E-commerce Events
+
+- **Purchase**: Track completed transactions with cart contents and total price
+- **Add to Cart**: Monitor shopping behavior with cart items and product categories
+- **Product Viewed**: Track product engagement across the purchasing funnel
+- **Ad Data**: Monitor advertising spend and cost data for ROI calculations
+
+**⚠️ Important**: This tool generates AI-optimized installation instructions. Always review and test the generated code before deploying to production. Human oversight is strongly recommended for all integrations.
