Visual Intent Layer MCP server
2026년 9월 20일 커밋브라우저로 렌더링된 인터페이스 내에서 대상을 가리키거나, 드래그하거나, 박스로 지정하여 AI agent가 정밀한 시각적 주석을 받을 수 있도록 합니다.
다른 이름 willa-code/visual-intent-layer
- 스타
- 0
- Tools
- —
- 다운로드, 30일
- —
- 최신 버전
- 0.4.0
- 마지막 커밋
- 2026년 9월 20일
- 라이선스
- Apache-2.0
Visual Intent Layer MCP란?
Visual Intent Layer은(는) MCP server입니다. 브라우저로 렌더링된 인터페이스 내에서 대상을 가리키거나, 드래그하거나, 박스로 지정하여 AI agent가 정밀한 시각적 주석을 받을 수 있도록 합니다.
프로젝트 README에서 생성된 요약
Visual Intent Layer MCP server 정보
이 로컬 MCP server는 로컬 웹 애플리케이션이나 저장된 HTML 문서를 다루는 개발자가 AI agent에게 정밀한 시각적 컨텍스트를 제공할 수 있게 합니다. 요소의 위치를 설명하기 위해 텍스트 설명에 의존하는 대신, 사용자는 브라우저로 렌더링된 인터페이스와 상호작용하여 특정 대상을 가리키거나, 드래그하거나, 박스로 지정할 수 있습니다. 이를 통해 인간의 시각적 의도와 agent의 동작 사이에 직접적인 연결을 생성합니다.
server는 사용자의 머신에서 로컬로 실행되며 Node.js 20 이상과 웹 브라우저가 필요합니다. 브라우저를 실행하고 루프백 포트를 바인딩하여 Review Surface를 표시하는 방식으로 작동합니다. 로컬 디스플레이에 의존하기 때문에 원격 호스트, 컨테이너 또는 클라우드 기반 agent에서는 사용할 수 없습니다.
사용자는 Review Surface를 통해 워크플로우를 관리하며, 여기서 대상을 주석으로 그룹화하고, 참조 이미지를 첨부하며, 각 요청의 전달 상태를 추적할 수 있습니다. 이러한 설정은 인간의 판단을 가능하게 하여, 사용자가 각 주석을 수동으로 검토하고 결정함으로써 agent가 정확한 지침을 따르도록 보장합니다.
활용 사례
- 1UI 변경 사항을 시각적으로 지정AI agent는 사용자가 브라우저 인터페이스 내에서 대상을 가리키거나, 드래그하거나, 박스로 지정하는 방식으로 지침을 받을 수 있습니다.
- 2복잡한 시각적 피드백 정리여러 시각적 대상을 하나의 주석으로 그룹화하고 명확성을 위해 참조 이미지를 포함할 수 있습니다.
- 3agent 동작 수동 감사개발자는 Review Surface를 사용하여 각 주석의 상태를 직접 검사하고 결정할 수 있습니다.
- 4주석 진행 상황 추적시스템은 전송되지 않은 주석과 전달된 주석을 해결 상태와 함께 기록으로 유지합니다.
프로젝트의 README를 바탕으로 작성되었습니다. 모든 활용 사례는 해당 내용의 인용문과 대조하여 확인합니다.
Visual Intent Layer MCP 설치 방법
형식 확인: 2026년 11월 10일Cursor에 추가Goose에 추가Claude Code에 Visual Intent Layer MCP 설치
$ claude mcp add visual-intent-layer -- npx -y visual-intent-layerCursor에 Visual Intent Layer MCP 설치
~/.cursor/mcp.json
{
"mcpServers": {
"visual-intent-layer": {
"command": "npx",
"args": [
"-y",
"visual-intent-layer"
]
}
}
}VS Code에 Visual Intent Layer MCP 설치
.vscode/mcp.json
{
"servers": {
"visual-intent-layer": {
"type": "stdio",
"command": "npx",
"args": [
"-y",
"visual-intent-layer"
]
}
}
}VS Code CLI에 Visual Intent Layer MCP 설치
$ code --add-mcp '{"name":"visual-intent-layer","type":"stdio","command":"npx","args":["-y","visual-intent-layer"]}'Claude Desktop에 Visual Intent Layer MCP 설치
claude_desktop_config.json
{
"mcpServers": {
"visual-intent-layer": {
"command": "npx",
"args": [
"-y",
"visual-intent-layer"
]
}
}
}Codex에 Visual Intent Layer MCP 설치
$ codex mcp add visual-intent-layer -- npx -y visual-intent-layerCodex config.toml에 Visual Intent Layer MCP 설치
~/.codex/config.toml
[mcp_servers.visual-intent-layer] command = "npx" args = ["-y", "visual-intent-layer"]
Gemini CLI에 Visual Intent Layer MCP 설치
$ gemini mcp add -s user visual-intent-layer npx -- -y visual-intent-layerGemini settings.json에 Visual Intent Layer MCP 설치
~/.gemini/settings.json
{
"mcpServers": {
"visual-intent-layer": {
"command": "npx",
"args": [
"-y",
"visual-intent-layer"
]
}
}
}자동 검사
2026년 11월 15일에 실행됨전체 보고서 →아직 인증되지 않았습니다. 서버는 80점 이상의 점수, 심각한 결함 없음, 그리고 검사에 충분한 데이터를 갖추어야 합니다. 검사 방식 · 점수를 높이기 위해 수정할 항목
- 소스 저장소 연결 및 접근 가능Repository not reachablegithub.com/willa-code/visual-intent-layer ↗결함 발견
- 패키지가 이 저장소를 소스로 명시visual-intent-layer names willa-code/visual-intent-layer as sourcenpmjs.com/package/visual-intent-layer ↗통과
- 빌드 출처(Sigstore 증명)Sigstore attestation for visual-intent-layernpmjs.com/package/visual-intent-layer/v/0.4.0#provenance ↗통과
- 오픈 소스 라이선스 (OSI)Apache-2.0spdx.org/licenses/Apache-2.0.html ↗통과
- 최근 1년 내 커밋 또는 릴리스Last commit or release 2026-09-20github.com/willa-code/visual-intent-layer ↗통과
- OpenSSF Scorecard검사되지 않음
- 패키지 이름이 인기 패키지와 유사하지 않음No popular package one edit away from visual-intent-layer통과
- 패키지 및 해당 종속성에 중요한 보안 권고 없음100 resolved dependencies checked; no critical advisoryosv.dev ↗통과
- 모델에 대한 숨겨진 지침 없음0 tool descriptions and the README read; no override phrases, credential paths or hidden characters통과
- 파괴적인 도구에 라벨 표시됨검사되지 않음
- 원격 엔드포인트가 MCP 핸드셰이크에 응답검사되지 않음
README
GitHub에서 보기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
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.
Visual Intent Layer MCP 질문
Visual Intent Layer MCP를 Claude Code에 추가하려면 어떻게 하나요?
터미널에서 claude mcp add visual-intent-layer -- npx -y visual-intent-layer를 실행합니다. 모든 프로젝트에서 사용할 수 있게 하려면 --scope user를 추가합니다.
Visual Intent Layer MCP를 Cursor에 추가하려면 어떻게 하나요?
~/.cursor/mcp.json를 열고 mcpServers 아래에 서버를 추가합니다. 위 설치 섹션에 표시된 Cursor 구성을 사용합니다.
Visual Intent Layer가 지원하는 환경은 무엇인가요?
이 MCP server는 저장된 HTML 문서와 로컬 웹 앱을 지원하지만, 모바일 빌드, 네이티브 윈도우, 디자인 파일 및 PDF는 지원하지 않습니다.
이 server를 컨테이너나 원격 호스트에서 실행할 수 있나요?
아니요, 로컬 브라우저를 실행하고 루프백 포트를 바인딩하므로 화면을 보고 있는 로컬 머신에서 실행해야 합니다.
시스템 요구 사항은 무엇인가요?
Node.js 20 이상의 버전, server가 실행되는 머신의 브라우저, 그리고 Review Surface를 사용할 수 있는 MCP 지원 agent가 필요합니다.