visual-intent-layer
OfficialClick on "Deploy Server".
Wait a few minutes for the server to deploy. Once ready, it will show a "Started" state.
In the chat, type
@followed by the MCP server name and your instructions, e.g., "@visual-intent-layerOpen the login form, select the email field, and align the label to its left."
That's it! The server will respond to your query, and you can continue using it as needed.
Here is a step-by-step guide with screenshots.
Visual Intent Layer
Point at what you see and say what should change. The agent changes exactly that, and you verify by hand. It reviews a browser-rendered artifact — a saved or generated HTML document, or a local web app running on this machine; a mobile build, a native window, a design file and a PDF are outside it by decision rather than omission.
Install
Requires Node 20+. No Rust toolchain, no hosted account.
The product is a standard local MCP server. You register it with your own agent's MCP mechanism — there is no install command of ours to run, and nothing of yours that we write.
Harness | What to run |
Claude Code |
|
Codex |
|
opencode |
|
pi | the entry below, with |
any other | any host that can launch a local stdio server: command |
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.
Install it on the machine where you look at the screen. The Review Surface launches a browser on the machine running the server and binds a loopback port there. A server in a container, on a remote host, or inside a cloud agent has nothing to show you.
Registering takes effect when your agent next starts, so restart it.
The pi entry
pi itself ships no MCP; pi-mcp-adapter provides it. Add this to the project's
.mcp.json — merge it into mcpServers if the file already has one, rather than
replacing the file:
{
"mcpServers": {
"visual-intent-layer": {
"command": "npx",
"args": ["-y", "--package", "visual-intent-layer@latest", "visual-intent-mcp"]
}
}
}A project .mcp.json applies to that project only. .pi/mcp.json is the Pi-only
project override, and ~/.config/mcp/mcp.json applies to every project. Install
the package globally (npm install -g visual-intent-layer) and the entry's
command becomes visual-intent with args ["mcp"].
Update
@latest is resolved when npx fetches the package, so there is nothing to update
by hand — unless your Harness caches the resolved command and keeps serving it:
pi-mcp-adapter caches for 24 hours, reading the cache from disk, so a restart
does not renew it. Delete ~/.pi/agent/mcp-npx-cache.json to force a fresh
fetch. npm view visual-intent-layer version says what is current.
To hold a version still, replace @latest with an exact version in the entry. A
global install updates with npm install -g visual-intent-layer@latest.
Uninstall
Remove the entry you added, with the mechanism you added it: codex mcp remove visual-intent-layer in Codex, claude mcp remove visual-intent-layer in Claude
Code, and by deleting the entry from your Harness's own MCP config everywhere
else. A global install comes out with npm uninstall -g visual-intent-layer.
Uninstalling deletes none of your reviews: Annotations, sessions and attachments
stay in ~/.visual-intent-layer/data until you remove that directory.
docs/guide.md names the file for the Harnesses that keep one.
If the tools do not appear
Run the entry's command by hand first. It separates Node and npm from the Harness:
npx -y --package visual-intent-layer@latest visual-intent-mcpIt prints visual-intent review service on http://127.0.0.1:<port> to stderr and
then holds the connection open for an agent; Ctrl-C ends it. If that works, your
agent's own MCP panel is where the reason is: it names the server and reports why
it failed to start. The product cannot tell you — it writes no configuration and
reads none.
The server runs without an agent too:
npx -y --package visual-intent-layer@latest visual-intent open --html ./checkout.htmlRelated MCP server: claude-annotate
Documentation
docs/guide.md is the product manual: the Review Surface, the
Annotation model, target resolution, Check-In, the four MCP tools, environment and
data, the envelope schema, develop and layout. SECURITY.md holds the threat
model, supported versions and the disclosure process. docs/adr/ records why the
product behaves as it does, and docs/pi-validation.md is the live-pi checklist,
awaiting a human run.
License
Apache-2.0. The complete local loop is permissively open.
This server cannot be deployed
Maintenance
Related MCP Connectors
Turn any webpage into a structured action manifest — clickable, fillable, submittable elements.
Turn PRDs and product ideas into structured specs so coding agents build your intent, not theirs.
Agent-Native design tool - create and edit visual designs with agent assistance
UI design from prompts, screenshots, and URLs for AI coding agents and theme tokens.
Related MCP Servers
- AlicenseAqualityDmaintenanceIntent-aware visual verification for coding agents: the agent declares what a UI change should affect, and SnapDiff diffs the page against a baseline and flags anything that changed outside that intent for review or rollback — local screenshot capture via Playwright.6224 npm5MIT
- AlicenseNot gradedqualityDmaintenanceEnables visual annotation on web pages for Claude Code, allowing element selection, comment addition, screenshot capture, and structured UI feedback for code fixes via an MCP server.MIT
- AlicenseNot gradedqualityDmaintenanceEnables AI coding agents to visually interact with frontend apps by taking screenshots, clicking elements, reading console logs, and performing visual diffs.4 npm3MIT
- FlicenseAqualityAmaintenanceEnables visual browser feedback collection directly into Claude Code. Users can point at elements in their browser and send annotated feedback that Claude can act on immediately.121-