Microsoft Clarity + Claude Code Setup

I just found something that changed how I build websites. You connect Microsoft Clarity to Claude Code, and Claude can see exactly how real users are using your site. Where they click. Where they get stuck. Where they rage click because something looks tappable but is not. Then you tell Claude to fix it. It's a real feedback loop between your users and the AI that built your site.

Most people ship a site and guess what's working. You launch, you stare at Google Analytics, you see a number go up or down, you shrug. Clarity is different. It shows you the actual session. You watch real people use your site. You see the dead clicks, the scroll patterns, the abandoned forms. All of it is free forever. No upsell, no pricing page, no surprise credit card.

Here is the workflow once this is set up. I ask Claude Code to pull my Clarity data. It tells me things like "users are dead-clicking the hero image because it looks like a button" or "mobile visitors are bouncing on the pricing section because the cards are too tall." Then I say "fix it." Claude reads my codebase, makes the change, I ship it. Not even exaggerating.. this is the closest thing to having a designer and a developer watching your site 24/7.

Install Microsoft Clarity on my website. My Clarity Project ID is [PASTE YOUR PROJECT ID HERE]. Add it to the root layout using the Next.js Script component with the afterInteractive strategy. Store the Project ID in an environment variable called NEXT_PUBLIC_CLARITY_PROJECT_ID so I can change it without editing code. Only load the script in production, not in development. When you are done, show me the file you changed and explain what it does.

That gets Clarity collecting data. Now comes the fun part. You connect Clarity to Claude Code so you can talk to your analytics instead of clicking through a dashboard.

Install the Microsoft Clarity MCP server in Claude Code at user scope so it is available across every project on my machine. My Clarity API token is [PASTE YOUR TOKEN HERE]. Walk me through the exact command to run, explain what scope means, and confirm it is installed. After it is added, tell me the exact Claude Code command to restart so it picks up the new tools.

Once the MCP is connected, you talk to your analytics like a teammate. No dashboards. No filters. Just questions in plain English and real answers back.

This is where it gets ridiculous. Claude Code now has eyes on your Clarity data AND access to your codebase. It finds an issue, explains what's happening, then fixes it. All in the same session. Use the prompt below to kick it off.

Use the Clarity MCP to analyze my website from the last 7 days. Pull the top dead clicks, rage clicks, and any patterns where users are getting stuck. Also check the mobile vs desktop split and flag anything that looks broken on either. For every issue you find, tell me:
1. What is happening (with the page and element involved)
2. Why it is likely happening (your hypothesis)
3. The specific fix you would make in my codebase

Do not change any code yet. Just give me the full list. I will tell you which ones to fix.

A few things to know before you start. Clarity data takes a few hours to show up after install, so do not panic if your dashboard looks empty on day one.

The API token is sensitive. Never paste it into a public repo or a client-side file. Store it in an env var and keep it server-side only.

If you use session recording in a regulated industry, your privacy policy should mention it. Claude Code can draft that paragraph for you in one prompt.

That's the whole thing. Install Clarity. Install the MCP. Talk to your site. Let Claude fix it. Your website gets better every week without you opening a single analytics dashboard.

The full course shows you how I combine Clarity with Google Analytics and session replay workflows to ship site improvements every single week.