Skip to content
Add to Chrome
AI INTEGRATION

AI integration

Let an AI agent measure mismatches against the comp and report back. Written for developers.

Last updated:
On this page
  1. What it does
  2. Requirements
  3. Flow
  4. Reading results
  5. Security
  6. Activity log
  7. Troubleshooting

What it does#

The AI reads PixelPont’s state, runs measurements and gets results directly from inside the page. No extra software (such as an MCP server) is required.

  • Read the current comp, position and scale
  • Measure the viewport or the full page
  • Receive results (offsets, colors, confidence) as structured data
  • Move the comp and measure again

For the full method list and details, see Developers.

Requirements#

An AI agent that can drive a browser and run scripts inside the page. Works on any page you’ve allowed site access to, not just localhost.

Example setupStatus
Claude Code + Claude in ChromeTested
Agents with a browser MCP (Playwright etc.)Works if it can run in-page scripts
OthersWorks if the same condition is met

Flow#

  1. 1

    Copy the promptYou

    The AI chip at the top of the panel → “Copy AI prompt”. The prompt carries a passphrase; the chip switches to “AI waiting”.

  2. 2

    Paste into your AIYou

    Paste it into the AI agent you use.

  3. 3

    AI connects on the target tabAI

    When the AI connects with the passphrase, the chip shows “AI on”.

  4. 4

    MeasureAI

    The AI runs a measurement. The same results appear in the Measure tab.

  5. 5

    ReportAI

    The AI reports the mismatches and a pass / fail.

  6. 6

    DisconnectAI

    The AI disconnects when done. It also drops after 30 minutes idle.

Sample prompt (dummy — won’t work as is. Copy the real one from the panel)Example
Connect to PixelPont on this tab and measure how the page differs from the design comp.
Check available actions with window.__pixelpont.help().
The passphrase for connecting is included in this prompt.
List of actions

help() returns the current list. It isn’t copied here so it never goes stale.

Reading results#

FieldMeaning
VerdictPasses if nothing exceeds tolerance
OffsetsPosition / size difference per element (px)
ColorBuild vs comp color codes
SkippedLow-confidence items hidden, with count and reason
AI agentNeeds fixes
Measured. 3 elements are off from the comp, and 1 color differs.
1.hero__title↓3px
2.hero__visual→2px
3.btn--orderw+4
◐.card:nth-child(2)#E2E2E2 → #EDEDED
Fix all 4 now?

Security#

  • Connecting requires the passphrase in the prompt
  • Disconnects automatically after 30 minutes idle
  • A call from another tab of the same site, with the right passphrase, moves the target to that tab (the panel shows a notice you can undo)
  • The target never moves to a tab of another site on its own
What it can’t do

The passphrase can’t be fully protected from other scripts running on the same page. Don’t use AI integration on pages that run untrusted scripts.

On sites other than localhost, AI integration works only after you allow access to that site. Before you allow it, here is what to know.

  • While connected, other scripts on the page (analytics tags, ads and so on) can call the same API
  • The API returns on-screen colors and element positions. On a signed-in page, that content is included
  • Visited links change color, so the color may reveal whether a given link has been visited
  • Colors of images and embeds from other sites are never returned. An image that a same-site URL redirects to another site cannot be told apart, though, and its colors may be returned
A rule of thumb

Allow access only on sites you trust, and disconnect when the work is done. You can revoke access at any time: open PixelPont’s “Details” in chrome://extensions and change “Site access”.

Activity log#

Every AI action is logged on your device. Nothing is sent out.

  • What: time, action and its arguments (selectors, coordinates, changes), a summary of the result, page URL and title, comp name, the name the AI gave
  • Before you share the log, check that it holds page URLs and the like
  • Where: in your browser (never deleted automatically)
  • View / clear: Menu → “AI activity log…”
Before sharing the log

The log includes page titles, comp names and other project-identifying info.

Troubleshooting#

Can’t connect

If the chip stays on “AI waiting”, the prompt didn’t reach the AI. Copy and paste it again.

The AI is working in another tab

On the same site, the target moves to that tab on its own (the notice has an Undo). If it couldn’t move, the panel shows “AI is calling from another tab”. Press “Target this tab” to switch.

Results don’t match the panel

The AI and the panel read the same results. If they differ, check the time and the area (viewport / full page).

Something else

Tell us via Contact. The panel’s activity log helps us find the cause.