About visual-intent-layer
Visual Intent Layer is a local MCP server and browser-based review surface for saved HTML documents and local web apps. It lets agents and human reviewers ground requested changes in directly selected visual targets and track annotation decisions.
Key features
- 01Point, drag, or box visible targets
- 02Group targets into contextual annotations
- 03Attach reference images
- 04Track delivery, revision, and resolution states
- 05Review annotations manually in a browser
- 06Store review data locally
Use cases
- 01Give an agent precise feedback on a local web interface
- 02Mark changes on a saved HTML document
- 03Review and decide each proposed annotation
- 04Run a browser review without an agent
MCP support
It runs as a local stdio MCP server for MCP-capable agents. The server exposes a browser-based review surface and MCP tools for working with annotations.
Configuration
Local server config is the same for every client. Copy it into your client’s MCP config file.
Tools
4Saved tool list · updated 3w ago
| Parameter | Type | Required | Description |
|---|---|---|---|
| url | string | No | Localhost URL of the running React/Vite application. |
| kind | enum | Yes | saved-html | react-vite-app |
| path | string | No | Filesystem path to the saved HTML artifact. |
| waitMs | number | No | How long to hold the call for the human, in milliseconds. Omit for the default window. |
| sourceRoot | string | No | Filesystem path to the application source root, so its revision can be derived from files without a build step. Omit to derive the revision from the served document instead. |
| capabilities | object | No | What this host can do. Omit to be treated as a browsing host with polling updates. |
| capabilities.embeddedUI | boolean | No | The host renders the review surface itself. |
| capabilities.subscriptions | boolean | No | The host can subscribe to live updates. |
Details
From the project READMEVisual 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 Code
claude mcp add visual-intent-layer -- npx -y --package visual-intent-layer@latest visual-intent-mcp
Codex
codex mcp add visual-intent-layer -- npx -y --package visual-intent-layer@latest visual-intent-mcp
opencode
Run opencode mcp add visual-intent-layer, then provide npx and the package
arguments when prompted:
-y --package visual-intent-layer@latest visual-intent-mcp
pi
pi does not ship an MCP client. With pi-mcp-adapter installed, add this to
the project's .mcp.json (merge it into an existing mcpServers object):
{
"mcpServers": {
"visual-intent-layer": {
"command": "npx",
"args": ["-y", "--package", "visual-intent-layer@latest", "visual-intent-mcp"]
}
}
}
The same entry can be placed in .pi/mcp.json for a project-only Pi override,
or ~/.config/mcp/mcp.json for all projects. The adapter's /mcp setup panel
can also create the entry.
Other MCP clients
Use the JSON configuration above, or launch a local stdio server with command
npx and arguments -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.
Comments
New to MCP?
From what the protocol is to installing your first server, these answers cover most first questions.
An open protocol that defines how AI applications connect to external tools and data in a uniform way. Clients talk to the model; MCP servers provide tools, resources and prompt templates. They exchange standard messages, so one server can be reused by many clients.