MCP Server for Microsoft Clarity based on data export API
npm install @microsoft/clarity-mcp-serverbash
Install globally
npm install -g @microsoft/clarity-mcp-server
Run the server
clarity-mcp-server
`
#### Option 2: Run with npx without installing
You can run the server directly using npx without installing:
`bash
npx @microsoft/clarity-mcp-server
`
With either option, you can provide your Clarity API token using the --clarity_api_token parameter:
`bash
npx @microsoft/clarity-mcp-server --clarity_api_token=your-token-here
`
#### Option 3: Manual Installation
1. Clone or download this repository
2. Install dependencies:
`
npm install
`
3. Build the TypeScript code:
`
npm run build
`
4. Run the server:
`
npm run start
`
$3
#### Visual Studio Code Extension
Click the button above to install the Microsoft Clarity MCP server directly in Visual Studio Code.
#### Claude Desktop Plugin
Install from Claude's extension gallery:
1. Open Claude Desktop
2. Navigate to File → Settings → Extensions
3. Search for Microsoft Clarity
4. Click Install to add the extension
5. Configure your API Token:
Follow the instructions in the API Token section to retrieve and set it up correctly.
Configuration
You can provide the Clarity data export API token in two ways:
1. Command Line Arguments:
`bash
npx @microsoft/clarity-mcp-server --clarity_api_token=your-token
`
2. Tool Parameters:
Provide token as a parameter when calling the get-clarity-data tool
Configuring MCP Clients
$3
MCP clients typically require configuration to connect to the server. Here's a general example of how to configure an MCP client:
`json
{
"mcpServers": {
"@microsoft/clarity-mcp-server": {
"command": "npx",
"args": [
"@microsoft/clarity-mcp-server",
"--clarity_api_token=your-api-token-here"
]
}
}
}
`
The specifics of where and how to add this configuration will depend on your specific MCP client.
$3
To configure Claude for Desktop to use this server:
1. Open your Claude for Desktop configuration file:
- Windows: %AppData%\Claude\claude_desktop_config.json
- macOS: ~/Library/Application Support/Claude/claude_desktop_config.json
2. Add the configuration shown in the generic example above
3. Save the configuration file and restart Claude for Desktop
Server Usage
The server exposes various tools that you can call from any MCP client.
Just ask naturally and keep each request focused on one thing.
$3
- Name: query-analytics-dashboard
- Description: Retrieves analytics data and metrics from your project's dashboard using a simplified natural language search query.
- Examples:
- How many Clarity sessions did we get from Egypt in the past 3 days?
- What are the most used browsers in my Clarity project?
- Show me traffic metrics from my Clarity project for the last week
$3
- Name: list-session-recordings
- Description: Lists your project's session recordings based on a specified filtering criteria. The filters allow you to narrow down the recordings by various fields such as URLs, device types, browser, OS, country, city, and more.
- Examples:
- List the most recent Clarity sessions from mobile devices
- Show the top 5 Clarity sessions with the highest number of user clicks
- Get Clarity recordings where users encountered JavaScript errors
$3
- Name: query-documentation-resources`