Visual Intent Layer MCP server
Commit 20 Sep 2026Memungkinkan AI agent menerima anotasi visual yang presisi dengan cara menunjuk, menyeret, atau membuat kotak pada target di dalam interface browser.
Juga dikenal sebagai willa-code/visual-intent-layer
- Stars
- 0
- Tools
- —
- Unduhan, 30 hari
- —
- Versi terbaru
- 0.4.0
- Commit terakhir
- 20 Sep 2026
- Lisensi
- Apache-2.0
Apa itu Visual Intent Layer MCP?
Visual Intent Layer adalah MCP server. Memungkinkan AI agent menerima anotasi visual yang presisi dengan cara menunjuk, menyeret, atau membuat kotak pada target di dalam interface browser.
Ringkasan dibuat dari README proyek
Tentang Visual Intent Layer MCP server
Memberikan konteks visual yang presisi kepada AI agent adalah fungsi utama dari local MCP server ini bagi para developer yang bekerja dengan aplikasi web lokal atau dokumen HTML yang tersimpan. Alih-alih hanya mengandalkan deskripsi teks untuk menjelaskan lokasi elemen, pengguna dapat berinteraksi dengan interface browser untuk menunjuk, menyeret, atau membuat kotak pada target tertentu. Hal ini menciptakan hubungan langsung antara niat visual manusia dan tindakan agent.
Server ini berjalan secara lokal di mesin Anda dan memerlukan Node.js 20 atau terbaru serta web browser. Cara kerjanya adalah dengan meluncurkan browser dan melakukan binding pada loopback port untuk menampilkan Review Surface. Karena bergantung pada tampilan lokal ini, server tidak dapat digunakan dari host remote, container, atau agent berbasis cloud.
Pengguna dapat mengelola workflow melalui Review Surface di mana Anda bisa mengelompokkan target ke dalam anotasi, melampirkan gambar referensi, dan melacak status pengiriman dari setiap request. Setup ini memungkinkan adanya penilaian manusia, sehingga Anda dapat meninjau secara manual dan memutuskan setiap anotasi untuk memastikan agent mengikuti instruksi Anda dengan tepat.
Apa yang bisa Anda lakukan dengannya
- 1Menentukan perubahan UI secara visualAI agent dapat menerima instruksi dengan cara pengguna menunjuk, menyeret, atau membuat kotak pada target di dalam interface browser.
- 2Mengatur feedback visual yang kompleksAnda dapat mengelompokkan beberapa target visual ke dalam satu anotasi dan menyertakan gambar referensi agar lebih jelas.
- 3Audit tindakan agent secara manualDeveloper dapat menggunakan Review Surface untuk memeriksa dan memutuskan status dari setiap anotasi secara manual.
- 4Melacak progres anotasiSistem ini menyimpan catatan anotasi yang belum dikirim dan yang sudah terkirim, beserta status resolusinya.
Ditulis berdasarkan README proyek. Setiap use case diperiksa terhadap kutipan dari README tersebut.
Cara menginstal Visual Intent Layer MCP
Format diverifikasi 10 Nov 2026Tambahkan ke CursorTambahkan ke GooseInstal Visual Intent Layer MCP di Claude Code
$ claude mcp add visual-intent-layer -- npx -y visual-intent-layerInstal Visual Intent Layer MCP di Cursor
~/.cursor/mcp.json
{
"mcpServers": {
"visual-intent-layer": {
"command": "npx",
"args": [
"-y",
"visual-intent-layer"
]
}
}
}Instal Visual Intent Layer MCP di VS Code
.vscode/mcp.json
{
"servers": {
"visual-intent-layer": {
"type": "stdio",
"command": "npx",
"args": [
"-y",
"visual-intent-layer"
]
}
}
}Instal Visual Intent Layer MCP di VS Code CLI
$ code --add-mcp '{"name":"visual-intent-layer","type":"stdio","command":"npx","args":["-y","visual-intent-layer"]}'Instal Visual Intent Layer MCP di Claude Desktop
claude_desktop_config.json
{
"mcpServers": {
"visual-intent-layer": {
"command": "npx",
"args": [
"-y",
"visual-intent-layer"
]
}
}
}Instal Visual Intent Layer MCP di Codex
$ codex mcp add visual-intent-layer -- npx -y visual-intent-layerInstal Visual Intent Layer MCP di Codex config.toml
~/.codex/config.toml
[mcp_servers.visual-intent-layer] command = "npx" args = ["-y", "visual-intent-layer"]
Instal Visual Intent Layer MCP di Gemini CLI
$ gemini mcp add -s user visual-intent-layer npx -- -y visual-intent-layerInstal Visual Intent Layer MCP di Gemini settings.json
~/.gemini/settings.json
{
"mcpServers": {
"visual-intent-layer": {
"command": "npx",
"args": [
"-y",
"visual-intent-layer"
]
}
}
}Pengecekan otomatis
Berjalan 15 Nov 2026Laporan lengkap →Belum diverifikasi. Sebuah server memerlukan skor 80, tidak ada temuan serius, dan data yang cukup untuk kami periksa. Cara kerja checks · Yang perlu diperbaiki untuk menambah poin
- Source repository terhubung dan dapat dijangkauRepository not reachablegithub.com/willa-code/visual-intent-layer ↗Temuan
- Nama paket mencantumkan repositori ini sebagai sumbernyavisual-intent-layer names willa-code/visual-intent-layer as sourcenpmjs.com/package/visual-intent-layer ↗Lolos
- Provenance build (atestasi Sigstore)Sigstore attestation for visual-intent-layernpmjs.com/package/visual-intent-layer/v/0.4.0#provenance ↗Lolos
- Lisensi open source (OSI)Apache-2.0spdx.org/licenses/Apache-2.0.html ↗Lolos
- Ada commit atau release dalam satu tahun terakhirLast commit or release 2026-09-20github.com/willa-code/visual-intent-layer ↗Lolos
- OpenSSF ScorecardTidak diperiksa
- Nama package tidak mirip dengan package populerNo popular package one edit away from visual-intent-layerLolos
- Tidak ada advisory kritis pada paket atau dependensinya100 resolved dependencies checked; no critical advisoryosv.dev ↗Lolos
- Tidak ada instruksi tersembunyi untuk model0 tool descriptions and the README read; no override phrases, credential paths or hidden charactersLolos
- Tools yang bersifat destruktif telah diberi labelTidak diperiksa
- Endpoint remote merespons handshake MCPTidak diperiksa
README
Lihat di GitHubVisual 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
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 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.
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.
Pertanyaan tentang Visual Intent Layer MCP
Bagaimana cara menambahkan Visual Intent Layer MCP ke Claude Code?
Jalankan claude mcp add visual-intent-layer -- npx -y visual-intent-layer di terminal Anda. Tambahkan --scope user agar tersedia di semua proyek.
Bagaimana cara menambahkan Visual Intent Layer MCP ke Cursor?
Buka ~/.cursor/mcp.json dan tambahkan server di bawah mcpServers, menggunakan config Cursor yang ditunjukkan di bagian instalasi di atas.
Permukaan apa saja yang didukung oleh Visual Intent Layer?
Server ini mendukung dokumen HTML yang tersimpan dan web app lokal, namun tidak mendukung build mobile, jendela native, file desain, dan PDF.
Bisakah saya menjalankan server ini di dalam container atau host remote?
Tidak, server harus dijalankan di mesin lokal tempat Anda melihat layar karena server ini meluncurkan browser lokal dan melakukan binding pada loopback port.
Apa saja persyaratan sistemnya?
Anda memerlukan Node.js versi 20 atau terbaru, browser di mesin yang menjalankan server, dan agent yang mendukung MCP untuk menggunakan Review Surface.