Visual Intent Layer MCPサーバー
コミット 2026年9月20日ブラウザでレンダリングされたインターフェース内で、ターゲットを指し示す、ドラッグする、またはボックスで囲むことで、AIエージェントが正確な視覚的アノテーションを受け取れるようにします。
別名 willa-code/visual-intent-layer
- スター
- 0
- ツール
- —
- ダウンロード数(30日間)
- —
- 最新バージョン
- 0.4.0
- 最終コミット
- 2026年9月20日
- ライセンス
- Apache-2.0
Visual Intent Layer MCPとは
Visual Intent LayerはMCPサーバーです。 ブラウザでレンダリングされたインターフェース内で、ターゲットを指し示す、ドラッグする、またはボックスで囲むことで、AIエージェントが正確な視覚的アノテーションを受け取れるようにします。.
プロジェクトのREADMEから生成された概要
Visual Intent Layer MCP server について
このローカルMCP serverは、ローカルのWebアプリケーションや保存されたHTMLドキュメントを扱う開発者に対し、AIエージェントへ正確な視覚的コンテキストを提供することを可能にします。要素の場所を説明するためにテキストによる記述に頼るのではなく、ユーザーはブラウザでレンダリングされたインターフェースを操作して、特定のターゲットを指し示したり、ドラッグしたり、ボックスで囲んだりできます。これにより、人間の視覚的な意図とエージェントの動作が直接結びつきます。
サーバーはローカルマシン上で動作し、Node.js 20以降とWebブラウザが必要です。ブラウザを起動し、ループバックポートをバインドしてReview Surfaceを表示することで機能します。このローカルディスプレイに依存しているため、リモートホスト、コンテナ、またはクラウドベースのエージェントからは使用できません。
ユーザーはReview Surfaceを通じてワークフローを管理し、ターゲットをアノテーションとしてグループ化したり、参照画像を添付したり、各リクエストの配信状態を追跡したりできます。この構成により、人間による判断が可能になり、各アノテーションを手動で確認して、エージェントが指示通りに動作することを確実にできます。
できること
- 1UIの変更を視覚的に指定するユーザーがブラウザインターフェース内でターゲットを指し示す、ドラッグする、またはボックスで囲むことで、AIエージェントが指示を受け取ることができます。
- 2複雑な視覚的フィードバックを整理する複数の視覚的ターゲットを単一のアノテーションにグループ化し、明快さを高めるために参照画像を含めることができます。
- 3エージェントの動作を手動で監査する開発者は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を開き、上記のインストールセクションに示すCursor設定を使ってmcpServersの下にサーバーを追加します。
Visual Intent Layerがサポートしている対象は何ですか?
このMCP serverは保存されたHTMLドキュメントとローカルのWebアプリをサポートしていますが、モバイル版、ネイティブウィンドウ、デザインファイル、およびPDFはサポートされていません。
このサーバーをコンテナやリモートホストで実行できますか?
いいえ、このサーバーはローカルブラウザを起動し、ループバックポートをバインドするため、画面を表示しているローカルマシン上で実行する必要があります。
システム要件は何ですか?
Node.js version 20以降、サーバーを実行するマシン上のブラウザ、およびReview Surfaceを使用するためのMCP対応エージェントが必要です。