Visual Intent Layer

Point at a browser-rendered interface, describe what should change, and let an agent work from that precise visual context. Visual Intent Layer is a local MCP server and Review Surface for saved HTML documents and local web apps.

About

hello world! this project is a testbed for me to experience new/random/trending stuff! fyi on what i was testing:

• pstack's verification skills
• matt's skills
• ds v4.1 flash via openrouter in pi
• ...

Key features

• Direct pointing. Point, drag, or box visible targets instead of describing their location in prose.
• Annotations with context. Group targets into one Annotation and attach reference images when useful.
• Delivery state you can read. Keep unsent and delivered Annotations together with their revision and resolution state.
• Human judgement. Review the result in a browser and decide each Annotation by hand.
• Local by default. Keep review data on the local machine.

Mobile builds, native windows, design files, and PDFs are outside the supported surface.

Requirements

• Node.js 20 or newer
• A browser on the machine running the server
• An MCP-capable agent, if you want an agent to use the Review Surface

No hosted account or Rust toolchain is required.

Quickstart

Register the local stdio server with your agent, then restart the agent:

{
  "mcpServers": {
    "visual-intent-layer": {
      "command": "npx",
      "args": ["-y", "--package", "visual-intent-layer@latest", "visual-intent-mcp"]
    }
  }
}

The server must run on the machine where you look at the screen. It launches a browser there and binds a loopback port. A server in a container, on a remote host, or inside a cloud agent cannot display that machine's Review Surface.

Registry-aware clients can also find the server as io.github.willa-code/visual-intent-layer in the official MCP Registry, which lists where to get it rather than hosting it.

claude mcp add visual-intent-layer -- npx -y --package visual-intent-layer@latest visual-intent-mcp

codex mcp add visual-intent-layer -- npx -y --package visual-intent-layer@latest visual-intent-mcp

-y --package visual-intent-layer@latest visual-intent-mcp

{
  "mcpServers": {
    "visual-intent-layer": {
      "command": "npx",
      "args": ["-y", "--package", "visual-intent-layer@latest", "visual-intent-mcp"]
    }
  }
}

Start a review without an agent

The package also provides a local CLI:

npx -y --package visual-intent-layer@latest visual-intent open --html ./checkout.html
npx -y --package visual-intent-layer@latest visual-intent open --app http://localhost:5173

Each command opens the default browser and prints the review URL. Add --no-open for headless or scripted use. To run only the local service:

npx -y --package visual-intent-layer@latest visual-intent serve --port 3742

The visual-intent command is also available after npm install -g visual-intent-layer.

Data and privacy

The server writes review data to ~/.visual-intent-layer/data by default. It does not write agent configuration. Uninstalling the package does not delete reviews; remove that data directory only when you want to remove them.

Set VISUAL_INTENT_DATA_DIR to choose another data directory. Set VISUAL_INTENT_NO_OPEN=1 to suppress automatic browser opening.

Update and uninstall

@latest is resolved when npx fetches the package, so there is usually nothing to update by hand. pi-mcp-adapter caches the resolved command for 24 hours; delete ~/.pi/agent/mcp-npx-cache.json to force a fresh fetch. Replace @latest with an exact version in the entry to hold a version still, and update a global install with npm install -g visual-intent-layer@latest.

To uninstall, remove the entry with the mechanism you added it with — claude mcp remove visual-intent-layer, codex mcp remove visual-intent-layer, or by editing your client's configuration. docs/guide.md names the file for each client. Uninstalling deletes none of your reviews: they stay in the data directory until you remove it.

Documentation

• docs/guide.md — product manual, Review Surface, Annotation model, MCP tools, data, schema, development, and layout.
• design.md — normative Review Surface design contract.
• docs/design-references.md — component references and verification notes.
• docs/reference-foundations.md — comparison of candidate reference foundations.
• SECURITY.md — threat model, supported versions, and disclosure process.
• docs/adr/ — architectural decisions.
• docs/pi-validation.md — live Pi validation checklist.

License

Apache-2.0.