How to Use the Microsoft Clarity MCP in VS Code Copilot

Q: Can VS Code Copilot analyze Microsoft Clarity heatmaps to find layout bugs?

Yes, the agent calls listheatmaps and getheatmap to retrieve user interaction zones. It then compares this visual data with your local HTML to spot elements that are hard to find.

Q: How does VS Code Copilot help fix rage clicks identified by Microsoft Clarity?

Your agent calls listrageclicks to find where users are struggling. It then searches your workspace for the corresponding UI components and suggests the necessary code changes.

Share Microsoft Clarity behavioral insights across your engineering team directly within VS Code Copilot.

See Vinkius in Action

Works with every AI agent you already use

…and any MCP-compatible client

MCP Servers - Free for Subscribers

Connect Microsoft Clarity MCP to VS Code Copilot

Create your Vinkius account to connect Microsoft Clarity to VS Code Copilot and route execution through our secure gateway. The platform manages server hosting, runtime updates, and security layers. Configuration requires no manual server provisioning.

GDPR Free for Subscribers

Setup Microsoft Clarity with VS Code Copilot

Ask AI about this MCP

ChatGPT

Claude

Perplexity

Share Microsoft Clarity insights across your dev team

Keep your entire team aligned on user experience issues. By committing this MCP Server configuration to your repository, every developer using VS Code Copilot gets immediate access to user behavior metrics. Your team's agent calls `list_top_pages` to find which screens are getting the most traffic and require immediate optimization. When a bug is reported, any team member can ask Copilot to run `get_recording` to see the exact session. This eliminates back-and-forth debugging because everyone sees the same user struggle.

Debug frustrating UI bugs inside VS Code Copilot

Stop guessing why users are abandoning your forms. Your VS Code Copilot agent runs `list_dead_clicks` to pull a list of broken buttons that users are actively clicking. It maps these events directly to the source files in your workspace. It then uses `list_rage_clicks` to prioritize which bugs are causing the most frustration. You get a prioritized list of files to edit without leaving your workspace.

Monitor live production health from your editor

Keep an eye on your production deployment without switching to a web browser. The agent calls `get_live_insights` to pull real-time behavioral data directly into your VS Code Copilot panel. This MCP Server combines this with `get_dashboard` to show you overall session health. You'll know within minutes of a deploy if your changes are causing user errors.

Setup guide

Set up Microsoft Clarity MCP in VS Code Copilot

Prerequisites

VS Code 1.99 or later with GitHub Copilot extension
Active Vinkius subscription with a valid endpoint token

1

Open MCP configuration

Open the Command Palette (Cmd+Shift+P / Ctrl+Shift+P) and run "MCP: Add Server". Select HTTP (Streamable) as the server type. VS Code will create .vscode/mcp.json in your workspace.
2

Add the Microsoft Clarity MCP

Paste the JSON snippet shown on the right into your .vscode/mcp.json. Replace [YOUR_TOKEN_HERE] with your endpoint token from cloud.vinkius.com.
3

Switch to Agent mode

Open Copilot Chat (Cmd+Shift+I / Ctrl+Shift+I) and switch to Agent mode using the dropdown. MCP tools are only available in Agent mode — they do not appear in Edit or Ask modes.
4

Verify the connection

In the Copilot Chat input, type # to list available tools. You should see the Microsoft Clarity tools listed. Try asking: "List my recent Microsoft Clarity transactions" and Copilot will invoke them automatically.

.vscode/mcp.json

{
  "mcpServers": {
    "microsoft-clarity-mcp": {
      "url": "https://edge.vinkius.com/[YOUR_TOKEN_HERE]/mcp"
    }
  }
}

Get your connection token →

Independent Platform Disclaimer: Vinkius is an independent platform and is not affiliated with, endorsed by, sponsored by, verified by, or otherwise authorized by Microsoft Clarity. All third-party trademarks, logos, and brand names are the property of their respective owners. Their use on this website is strictly for informational purposes to identify service compatibility and interoperability.

Why Choose Vinkius

Vinkius connects your tools to AI with real-time monitoring and automatic cost savings — all from one dashboard.

Connect Microsoft Clarity now

Real-time monitoring

Live

visibility into every interaction

Connect your favorite tools to your AI and see exactly what's happening — every request, every response, in real time.

Built-in savings

60%

lower AI costs

Vinkius compresses data between your apps and your AI automatically. Lower bills every month — no configuration required.

Single dashboard

One

place for every integration

Every tool your AI connects to, managed from a single screen. One account, complete control.

Common questions about Microsoft Clarity MCP in VS Code Copilot

You add the configuration to your team's shared setup. This lets every developer on your team use the MCP tools inside their chat panel.

Yes, the agent calls `list_heatmaps` and `get_heatmap` to retrieve user interaction zones. It then compares this visual data with your local HTML to spot elements that are hard to find.

It brings production user behavior data directly into your development loop. Instead of reading static bug reports, your agent pulls live session data from Microsoft Clarity to help you write better code.

Your agent calls `list_rage_clicks` to find where users are struggling. It then searches your workspace for the corresponding UI components and suggests the necessary code changes.

Your click tracking data is fetched securely using the Vinkius runtime. The integration uses strict token-based authentication to ensure your customer behavioral data is never exposed to unauthorized users.

Use it with your favorite AI tools

Connect this server to Cursor, Claude, VS Code, and more.

OpenAI Agents SDK sdk-python

Google ADK sdk-python

Pydantic AI sdk-python

Vercel AI SDK sdk-typescript