Microsoft Clarity

Clarity is an open-source behavioral analytics library focused on privacy and performance. The project is divided into several specialized packages depending on your use case:

• clarity-js: Instrumentation code for websites to track user interactions and layout changes.
• clarity-decode: Server-side code used to decode incoming telemetry data back into its original format.
• clarity-visualize: Converts decoded data into pixel-perfect session replays.
• clarity-devtools: A Chromium-based browser extension for generating live captures on any website.

Clarity Developer Tools follows these data collection principles:

• Triggered Instrumentation: The extension only begins instrumenting a website after you explicitly open the browser developer tools and click on the Clarity tab.
• Local Data: All data captured by the extension remains on your local device and is not uploaded to any external servers.

To build the Clarity Developer Tools extension, ensure your development environment is set up according to the project's contribution guidelines. Run the build command from the root of the repository. The resulting extension files will be located in the extension folder.

yarn build

Follow these steps to load the unpacked extension into your browser and use it for live session replays:

1. Open your browser's extensions page (e.g., edge://extensions or chrome://extensions).
2. Enable Developer mode.
3. Click on Load unpacked.
4. Select the extension folder generated by the build process.
5. Navigate to any website.
6. Open the browser's Developer Tools (F12).
7. Click on the Clarity tab to see the live replay in action.

If you are using Claude Code for development, you can enable the Git MCP (Model Context Protocol) server to perform enhanced Git operations via natural language.

Prerequisites

1. Ensure Python 3 is installed:

   python3 --version

2. Install the Git MCP Server using pip:

   pip3 install mcp-server-git

Enable the Server

You can enable the server in two ways:

Option 1: Auto-enable (Recommended) Add the following to your .claude/settings.local.json file:

{
  "enableAllProjectMcpServers": true
}

Option 2: Explicit approval Claude Code will prompt you to approve the MCP server upon its first use.

When calling setup(target, options), use the Options interface to configure the playback environment. Key options include:

• version: (string) The version of Clarity being used.
• dom: Layout.DomEvent - Initial DOM state.
• onresize: ResizeHandler - Callback when the container resizes.
• logerror: ErrorLogger - Callback for error reporting.
• useproxy: LinkHandler - Function to handle link proxying.
• onclickMismatch: ClickLogger - Callback for click mismatches.
• onalphafallback: AlphaFallbackLogger - Callback when the Alpha selector is used as a fallback.
• pointer: boolean - Enable pointer visualization.
• canvas: boolean - Use canvas for rendering.
• keyframes: boolean - Enable keyframes.
• mobile: boolean - Simulate mobile view.
• locale: string - Set the locale.

The Playwright configuration dynamically generates test projects based on the contents of the packages directory.

1. Package Projects: For every directory in packages/ that contains both a test directory and a package.json, a project is created with the package name as the name and the test directory as the testDir.
2. E2E Project: A manual project named e2e is defined to run tests located in the root test directory using the chromium browser.

To add a new project, ensure it follows the directory structure expected by the dynamic mapper or add it explicitly to the projects array.