mcpField
V
visual-intent-layer

visual-intent-layer

Local
github.com/willa-codeDeveloper Tools0Updated 6w ago

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

  1. 01Point, drag, or box visible targets
  2. 02Group targets into contextual annotations
  3. 03Attach reference images
  4. 04Track delivery, revision, and resolution states
  5. 05Review annotations manually in a browser
  6. 06Store review data locally

Use cases

  1. 01Give an agent precise feedback on a local web interface
  2. 02Mark changes on a saved HTML document
  3. 03Review and decide each proposed annotation
  4. 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.

mcp.json · Universal config
{
"mcpServers": {
"willa-code-visual-intent-layer": {
"command": "npx",
"args": [
"-y",
"visual-intent-layer"
]
}
}
}
Run commandnpx -y visual-intent-layer

Local servers need a runtime on your machine (e.g. Node.js 18+). Config file locations differ by client; see your client’s docs.

Packages
npmvisual-intent-layer0.4.0

Tools

4

Saved tool list · updated 3w ago

ParameterTypeRequiredDescription
urlstringNoLocalhost URL of the running React/Vite application.
kindenumYessaved-html | react-vite-app
pathstringNoFilesystem path to the saved HTML artifact.
waitMsnumberNoHow long to hold the call for the human, in milliseconds. Omit for the default window.
sourceRootstringNoFilesystem 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.
capabilitiesobjectNoWhat this host can do. Omit to be treated as a browsing host with polling updates.
capabilities.embeddedUIbooleanNoThe host renders the review surface itself.
capabilities.subscriptionsbooleanNoThe host can subscribe to live updates.

Details

From the project README

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:

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

License

Apache-2.0.

Comments

Markdown supported

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.