First AI Heatmap Supporting Claude Code, 'HeatMapX', Launched

XTV LLC (Headquarters: Tokyo, hereinafter XTV) launched 'HeatMapX' (https://heatmapx.com/), a new type of heatmap tool operable from the command line interface (CLI), on June 4, 2026.

By executing 'heatmapx analyze' in the terminal, it measures clicks and scrolls on target pages, uses AI to diagnose conversion issues, and automatically generates HTML patches for improvement as pull requests. To our knowledge, this is the first offering of a heatmap supporting Claude Code (as of June 2026, according to company research). It is available from a free plan and can be tried immediately with 'npm i -g heatmapx'.

Background: Heatmaps Often Ended at 'Just Looking'

Conventional heatmap and behavior analysis tools are excellent at visualizing clicks and scrolls, but they often face the issue that 'seeing the data does not lead to improvement.' Insights stay trapped in dashboards and are forgotten before they turn into actual code changes—a common scenario in the field of CRO (Conversion Rate Optimization).

Meanwhile, as of 2026, the job titles 'marketing engineer' and 'growth engineer,' referring to marketers with development skills, are spreading rapidly, especially among US SaaS companies. For these individuals who can read and write code and implement improvement hypotheses themselves, dashboard-gazing heatmaps do not fit into their daily workflows.

HeatMapX is designed as a 'CLI-type heatmap' specifically for these developer-oriented marketers and growth managers. It is designed to place analysis and improvement code directly into their daily workflows (Terminal, Git, and Pull Requests) as an alternative to GUI dashboard-type heatmaps.

Three Experiences Offered by HeatMapX

1. **A New Heatmap Executed from the CLI** Run it by specifying a target page, such as 'heatmapx analyze /pricing.' It measures clicks and scrolls with lightweight tags and returns the results to the CLI. You can run analyses without opening a GUI.

2. **AI Diagnoses Issues and Proposes Improvement Code via 'PR' Measurement data is read by AI (Anthropic Claude) to point out the most significant conversion issues. Furthermore, it generates an HTML patch for improvement as a pull request so humans can review and merge it (it does not automatically reflect on production).

3. **'CRO as Code': Managing Hypotheses as Code** Since 'what hypothesis was used and what was changed' can be left as Git history, improvement insights are accumulated in the team and codebase. With the trio of CLI x Git x AI, it integrates CRO into the development workflow.

Quick Start (Try in 30 seconds)

# 1. Install npm i -g heatmapx

# 2. Measure & AI Diagnose Target Page heatmapx analyze https ://example.com/pricing

# 3. Generate Improvement HTML Patch as Pull Request heatmapx patch --pr

In environments where Claude Code is already installed, you can execute the above flow by calling the 'heatmapx' command directly from Claude Code.

Use Cases

* **Improving SaaS Pricing Pages**: Measure CTA click distribution with 'heatmapx analyze /pricing.' The AI diagnoses that the 'Free to Pro' upgrade funnel is weak and proposes HTML patches for button placement and copy improvement via pull request. * **Exit Countermeasures for Media Articles**: Measure scroll depth of blog posts. The AI detects that 70% of readers drop off in the first three paragraphs and proposes improvement plans for heading placement and in-article CTA insertion positions via pull request. * **Improving Cart CV for EC Sites**: Measure the transition from product detail pages to the cart. The AI identifies that drop-offs are concentrated in the size selection UI and proposes selector improvement code via pull request.

Supported Environments

* Node.js 18 or higher * Latest versions of major browsers (Chrome / Safari / Edge / Firefox) * Measurement targets: Next.js / Nuxt / React / Vue / Static HTML sites (can be introduced by adding a single-line tag) * Integrations: Claude Code, GitHub (automatic pull request generation)