\n
\n\nAmp
\n Follow https://ampcode.com/manual#mcp and use the config provided above. You can also install webview-devtools-mcp using the CLI:\n\n```bash\namp mcp add webview-devtools -- npx webview-devtools-mcp@latest\n```\n\n\n
\n\nAntigravity
\n\nTo use webview-devtools-mcp follow the instructions from Antigravity's docs to install a custom MCP server. Add the following config to the MCP servers config:\n\n```bash\n{\n \"mcpServers\": {\n \"webview-devtools\": {\n \"command\": \"npx\",\n \"args\": [\n \"-y\",\n \"webview-devtools-mcp@latest\"\n ]\n }\n }\n}\n```\n\n\n
\n\nClaude Code
\n\n**Install via CLI (MCP only)**\n\nUse the Claude Code CLI to add the webview-devtools-mcp (guide):\n\n```bash\nclaude mcp add webview-devtools --scope user npx webview-devtools-mcp@latest\n```\n\n**Install as a Plugin (MCP + Skills)**\n\nTo install webview-devtools-mcp with skills, add the marketplace registry in Claude Code:\n\n```sh\n/plugin marketplace add ilharp/webview-devtools-mcp\n```\n\nThen, install the plugin:\n\n```sh\n/plugin install webview-devtools-mcp@webview-devtools-plugins\n```\n\nRestart Claude Code to have the MCP server and skills load (check with `/skills`).\n\n> [!TIP]\n> If the plugin installation fails with a `Failed to clone repository` error (e.g., HTTPS connectivity issues behind a corporate firewall), see the [troubleshooting guide](./docs/troubleshooting.md#claude-code-plugin-installation-fails-with-failed-to-clone-repository) for workarounds, or use the CLI installation method above instead.\n\n\n
\n\nCline
\n Follow https://docs.cline.bot/mcp/configuring-mcp-servers and use the config provided above.\n\n
\n\nCodex
\n Follow the configure MCP guide\n using the standard config from above. You can also install webview-devtools-mcp using the Codex CLI:\n\n```bash\ncodex mcp add webview-devtools -- npx webview-devtools-mcp@latest\n```\n\n\n
\n\nCommand Code
\n\nUse the Command Code CLI to add webview-devtools-mcp (MCP guide):\n\n```bash\ncmd mcp add webview-devtools --scope user npx webview-devtools-mcp@latest\n```\n\n\n
\n\nCopilot CLI
\n\nStart Copilot CLI:\n\n```\ncopilot\n```\n\nStart the dialog to add a new MCP server by running:\n\n```\n/mcp add\n```\n\nConfigure the following fields and press `CTRL+S` to save the configuration:\n\n- **Server name:** `webview-devtools`\n- **Server Type:** `[1] Local`\n- **Command:** `npx -y webview-devtools-mcp@latest`\n\n\n
\n\nCopilot / VS Code
\n\n**Install as a Plugin (Recommended)**\n\nThe easiest way to get up and running is to install `webview-devtools-mcp` as an agent plugin.\nThis bundles the **MCP server** and all **skills** together, so your agent gets both the tools\nand the expert guidance it needs to use them effectively.\n\n1. Open the **Command Palette** (`Cmd+Shift+P` on macOS or `Ctrl+Shift+P` on Windows/Linux).\n2. Search for and run the **Chat: Install Plugin From Source** command.\n3. Paste in our repository name: `ilharp/webview-devtools-mcp`.\n\nThat's it! Your agent is now supercharged with webview-devtools-mcp capabilities.\n\n\n ![\"Install](\"https://cursor.com/deeplink/mcp-install-dark.svg\")
](https://cursor.com/en/install-mcp?name=webview-devtools&config=eyJjb21tYW5kIjoibnB4IC15IHdlYnZpZXctZGV2dG9vbHMtbWNwQGxhdGVzdCJ9)\n\n**Or install manually:**\n\nGo to `Cursor Settings` -> `MCP` -> `New MCP Server`. Use the config provided above.\n\n
\n\nCursor
\n\n**Click the button to install:**\n\n[](https://cursor.com/en/install-mcp?name=webview-devtools&config=eyJjb21tYW5kIjoibnB4IC15IHdlYnZpZXctZGV2dG9vbHMtbWNwQGxhdGVzdCJ9)\n\n**Or install manually:**\n\nGo to `Cursor Settings` -> `MCP` -> `New MCP Server`. Use the config provided above.\n\n\n
\n\nFactory CLI
\nUse the Factory CLI to add webview-devtools-mcp (guide):\n\n```bash\ndroid mcp add webview-devtools \"npx -y webview-devtools-mcp@latest\"\n```\n\n\n
\n\nGemini CLI
\nInstall webview-devtools-mcp using the Gemini CLI.\n\n**Project wide:**\n\n```bash\n# Either MCP only:\ngemini mcp add webview-devtools npx webview-devtools-mcp@latest\n# Or as a Gemini extension (MCP+Skills):\ngemini extensions install --auto-update https://github.com/ilharp/webview-devtools-mcp\n```\n\n**Globally:**\n\n```bash\ngemini mcp add -s user webview-devtools npx webview-devtools-mcp@latest\n```\n\nAlternatively, follow the MCP guide and use the standard config from above.\n\n\n
\n\nGemini Code Assist
\n Follow the configure MCP guide\n using the standard config from above.\n\n
\n\nGrok Build CLI
\n\n```bash\ngrok mcp add webview-devtools npx webview-devtools-mcp@latest\n```\n\nSee the docs for more options\n\n
\n\nJetBrains AI Assistant & Junie
\n\nGo to `Settings | Tools | AI Assistant | Model Context Protocol (MCP)` -> `Add`. Use the config provided above.\nThe same way webview-devtools-mcp can be configured for JetBrains Junie in `Settings | Tools | Junie | MCP Settings` -> `Add`. Use the config provided above.\n\n\n
\n\nKiro
\n\nIn **Kiro Settings**, go to `Configure MCP` > `Open Workspace or User MCP Config` > Use the configuration snippet provided above.\n\nOr, from the IDE **Activity Bar** > `Kiro` > `MCP Servers` > `Click Open MCP Config`. Use the configuration snippet provided above.\n\n\n
\n\nMistral Vibe
\n\nAdd in ~/.vibe/config.toml:\n\n```toml\n[[mcp_servers]]\nname = \"webview-devtools\"\ntransport = \"stdio\"\ncommand = \"npx\"\nargs = [\"webview-devtools-mcp@latest\"]\n```\n\n\n
\n\nOpenCode
\n\nAdd the following configuration to your `opencode.json` file. If you don't have one, create it at `~/.config/opencode/opencode.json` (guide):\n\n```json\n{\n \"$schema\": \"https://opencode.ai/config.json\",\n \"mcp\": {\n \"webview-devtools\": {\n \"type\": \"local\",\n \"command\": [\"npx\", \"-y\", \"webview-devtools-mcp@latest\"]\n }\n }\n}\n```\n\n\n
\n\nQoder
\n\nIn **Qoder Settings**, go to `MCP Server` > `+ Add` > Use the configuration snippet provided above.\n\nAlternatively, follow the MCP guide and use the standard config from above.\n\n\n
\n\nQoder CLI
\n\nInstall webview-devtools-mcp using the Qoder CLI (guide):\n\n**Project wide:**\n\n```bash\nqodercli mcp add webview-devtools -- npx webview-devtools-mcp@latest\n```\n\n**Globally:**\n\n```bash\nqodercli mcp add -s user webview-devtools -- npx webview-devtools-mcp@latest\n```\n\n\n ![\"Install](\"https://img.shields.io/badge/Visual_Studio-Install-C16FDE?logo=visualstudio&logoColor=white\")
](https://vs-open.link/mcp-install?%7B%22name%22%3A%22webview-devtools%22%2C%22command%22%3A%22npx%22%2C%22args%22%3A%5B%22webview-devtools-mcp%40latest%22%5D%7D)\n\n
\n\nVisual Studio
\n\n**Click the button to install:**\n\n[](https://vs-open.link/mcp-install?%7B%22name%22%3A%22webview-devtools%22%2C%22command%22%3A%22npx%22%2C%22args%22%3A%5B%22webview-devtools-mcp%40latest%22%5D%7D)\n\n\n
\n\nWarp
\n\nGo to `Settings | AI | Manage MCP Servers` -> `+ Add` to [add an MCP Server](https://docs.warp.dev/knowledge-and-collaboration/mcp#adding-an-mcp-server). Use the config provided above.\n\n\n
\n\n## Your first prompt\n\nAfter the WebView is open and connected, enter a prompt like this in your MCP client:\n\n```text\nList connected pages using webview-devtools-mcp and take a text snapshot.\n```\n\nYour MCP client should report the connected page and return an text snapshot. From there you can ask it to click, fill forms, evaluate JavaScript, inspect console messages, inspect network requests, or take screenshots.\n\n> [!NOTE]\n> Connecting to the MCP server alone does not create a page. The page appears only after your instrumented WebView loads `target.js` and connects back to the server.\n\n## Tools\n\nIf you run into any issues, checkout our [troubleshooting guide](./docs/troubleshooting.md).\n\n\n\n- **Input automation** (7 tools)\n - [`click`](docs/tool-reference.md#click)\n - [`fill`](docs/tool-reference.md#fill)\n - [`fill_form`](docs/tool-reference.md#fill_form)\n - [`hover`](docs/tool-reference.md#hover)\n - [`press_key`](docs/tool-reference.md#press_key)\n - [`type_text`](docs/tool-reference.md#type_text)\n - [`click_at`](docs/tool-reference.md#click_at)\n- **Navigation automation** (4 tools)\n - [`list_pages`](docs/tool-reference.md#list_pages)\n - [`navigate_page`](docs/tool-reference.md#navigate_page)\n - [`select_page`](docs/tool-reference.md#select_page)\n - [`wait_for`](docs/tool-reference.md#wait_for)\n- **Network** (2 tools)\n - [`get_network_request`](docs/tool-reference.md#get_network_request)\n - [`list_network_requests`](docs/tool-reference.md#list_network_requests)\n- **Debugging** (7 tools)\n - [`evaluate_script`](docs/tool-reference.md#evaluate_script)\n - [`get_console_message`](docs/tool-reference.md#get_console_message)\n - [`list_console_messages`](docs/tool-reference.md#list_console_messages)\n - [`take_screenshot`](docs/tool-reference.md#take_screenshot)\n - [`take_snapshot`](docs/tool-reference.md#take_snapshot)\n - [`screencast_start`](docs/tool-reference.md#screencast_start)\n - [`screencast_stop`](docs/tool-reference.md#screencast_stop)\n- **Third-party** (2 tools)\n - [`execute_3p_developer_tool`](docs/tool-reference.md#execute_3p_developer_tool)\n - [`list_3p_developer_tools`](docs/tool-reference.md#list_3p_developer_tools)\n- **WebMCP** (2 tools)\n - [`execute_webmcp_tool`](docs/tool-reference.md#execute_webmcp_tool)\n - [`list_webmcp_tools`](docs/tool-reference.md#list_webmcp_tools)\n\n\n\n## Configuration\n\nwebview-devtools-mcp supports the following configuration option:\n\n\n\n- **`--port`**\n\n - **Type:** number\n - **Default:** `9333`\n\n- **`--host`**\n\n - **Type:** string\n - **Default:** `127.0.0.1`\n\n- **`--logFile`/ `--log-file`**\n Path to a file to write debug logs to. Set the env variable `DEBUG` to `*` to enable verbose logs. Useful for submitting bug reports.\n - **Type:** string\n - **Default:** `false`\n\n- **`--acceptInsecureCerts`/ `--accept-insecure-certs`**\n If enabled, ignores errors relative to self-signed and expired certificates. Use with caution.\n - **Type:** boolean\n - **Default:** `false`\n\n- **`--experimentalPageIdRouting`/ `--experimental-page-id-routing`**\n Whether to expose pageId on page-scoped tools and route requests by page ID (useful for concurrent agent sessions).\n - **Type:** boolean\n - **Default:** `false`\n\n- **`--experimentalDevtools`/ `--experimental-devtools`**\n Whether to enable automation over DevTools targets\n - **Type:** boolean\n - **Default:** `false`\n\n- **`--experimentalVision`/ `--experimental-vision`**\n Whether to enable coordinate-based tools such as click_at(x,y). Usually requires a computer-use model able to produce accurate coordinates by looking at screenshots.\n - **Type:** boolean\n - **Default:** `false`\n\n- **`--memoryDebugging`/ `--memory-debugging`, `-experimentalMemory`**\n Whether to enable memory debugging tools.\n - **Type:** boolean\n - **Default:** `false`\n\n- **`--experimentalStructuredContent`/ `--experimental-structured-content`**\n Whether to output structured formatted content.\n - **Type:** boolean\n - **Default:** `false`\n\n- **`--experimentalIncludeAllPages`/ `--experimental-include-all-pages`**\n Whether to include all kinds of pages such as webviews or background pages as pages.\n - **Type:** boolean\n - **Default:** `false`\n\n- **`--experimentalScreencast`/ `--experimental-screencast`**\n Exposes experimental screencast tools (requires ffmpeg). Install ffmpeg https://www.ffmpeg.org/download.html and ensure it is available in the MCP server PATH.\n - **Type:** boolean\n - **Default:** `false`\n\n- **`--experimentalFfmpegPath`/ `--experimental-ffmpeg-path`**\n Path to ffmpeg executable for screencast recording.\n - **Type:** string\n - **Default:** `false`\n\n- **`--categoryExperimentalWebmcp`/ `--category-experimental-webmcp`**\n Set to true to enable debugging WebMCP tools. Requires Chrome 149+ with the following flags: `--enable-features=WebMCP,DevToolsWebMCPSupport`\n - **Type:** boolean\n - **Default:** `false`\n\n- **`--blockedUrlPattern`/ `--blocked-url-pattern`**\n Restricts browser's network access by blocking specified URL patterns (uses https://urlpattern.spec.whatwg.org/). Silently detaches from targets with blocked URLs upon connection, and blocks runtime requests (including navigations and subresources). Accepts an array of patterns.\n - **Type:** array\n - **Default:** `false`\n\n- **`--allowedUrlPattern`/ `--allowed-url-pattern`**\n Restricts browser's network access by allowing only specified URL patterns (uses https://urlpattern.spec.whatwg.org/). Requires Chrome 149+. Silently detaches from targets with unallowed URLs upon connection, and blocks runtime requests (including navigations and subresources). Accepts an array of patterns.\n - **Type:** array\n - **Default:** `false`\n\n- **`--categoryEmulation`/ `--category-emulation`**\n Set to false to exclude tools related to emulation.\n - **Type:** boolean\n - **Default:** `true`\n\n- **`--categoryPerformance`/ `--category-performance`**\n Set to false to exclude tools related to performance.\n - **Type:** boolean\n - **Default:** `true`\n\n- **`--categoryNetwork`/ `--category-network`**\n Set to false to exclude tools related to network.\n - **Type:** boolean\n - **Default:** `true`\n\n- **`--categoryExtensions`/ `--category-extensions`**\n Set to true to include tools related to extensions. Note: This feature is currently only supported with a pipe connection. autoConnect, browserUrl, and wsEndpoint are not supported with this feature until 149 will be released.\n - **Type:** boolean\n - **Default:** `false`\n\n- **`--categoryExperimentalThirdParty`/ `--category-experimental-third-party`**\n Set to true to enable third-party developer tools exposed by the inspected page itself\n - **Type:** boolean\n - **Default:** `false`\n\n- **`--screenshotFormat`/ `--screenshot-format`**\n Override the default output format used by take_screenshot when the caller does not specify one. JPEG and WebP are ~3-5x smaller than PNG, which helps reduce context size in AI conversations. Unset preserves the existing default (\"png\").\n - **Type:** string\n - **Choices:** `jpeg`, `png`, `webp`\n - **Default:** `false`\n\n- **`--screenshotQuality`/ `--screenshot-quality`**\n Override the default compression quality (0-100) used by take_screenshot for JPEG and WebP when the caller does not specify one. Lower values mean smaller files. Ignored for PNG. Unset preserves the Puppeteer default.\n - **Type:** number\n - **Default:** `false`\n\n- **`--screenshotMaxWidth`/ `--screenshot-max-width`**\n Maximum width in pixels for screenshots. If the captured image is wider, it is downscaled (preserving aspect ratio) before being returned. Reduces context size in AI conversations. Unset means no resize.\n - **Type:** number\n - **Default:** `false`\n\n- **`--screenshotMaxHeight`/ `--screenshot-max-height`**\n Maximum height in pixels for screenshots. If the captured image is taller, it is downscaled (preserving aspect ratio) before being returned. Can be combined with --screenshot-max-width; the smaller scale factor wins. Unset means no resize.\n - **Type:** number\n - **Default:** `false`\n\n- **`--slim`**\n Exposes a \"slim\" set of 3 tools covering navigation, script execution and screenshots only. Useful for basic browser tasks.\n - **Type:** boolean\n - **Default:** `false`\n\n- **`--redactNetworkHeaders`/ `--redact-network-headers`**\n If true, redacts some of the network headers considered sensitive before returning to the client.\n - **Type:** boolean\n - **Default:** `false`\n\n- **`--allowUnrestrictedPaths`/ `--allow-unrestricted-paths`**\n If set, disables the default path restriction that applies when the MCP client does not negotiate the roots capability. By default, file-writing tools are restricted to the OS temp directory when no roots are configured. Use this only when connecting a trusted local client that does not implement MCP roots and requires access to paths outside the temp directory.\n - **Type:** boolean\n - **Default:** `false`\n\n\n\nPass them via the `args` property in the JSON configuration. For example:\n\n```json\n{\n \"mcpServers\": {\n \"webview-devtools\": {\n \"command\": \"npx\",\n \"args\": [\"webview-devtools-mcp@latest\", \"--port=9334\"]\n }\n }\n}\n```\n\nRemember to keep the injected script URL in sync with these options:\n\n```html\n\n```\n\n## Concepts\n\n### Instrumented WebViews, not launched browser tabs\n\n`webview-devtools-mcp` can inspect and automate pages that have loaded `target.js`. It cannot inject the script into an arbitrary page by itself, and it cannot create a new WebView for you. If `list_pages` returns no pages, open or reload the WebView and verify that the script URL is reachable from that runtime.\n\n### Navigation\n\n`navigate_page` operates on an already connected page. If navigation takes the WebView to a document that does not load `target.js`, the page will disconnect and no further tools can operate on it until an instrumented page loads again.\n\n### Security and privacy\n\n`webview-devtools-mcp` exposes the connected page to MCP clients. A connected agent may inspect page content, read console output, observe network requests, execute JavaScript, click, type, and otherwise interact with the page.\n\nOnly connect pages and MCP clients that you trust. Avoid opening sensitive personal or production data in an instrumented WebView unless you intend to make it available to the connected MCP client.\n\nWhen using `--host=0.0.0.0` or another non-loopback host for a remote device, the debugging bridge may be reachable by other machines on the network. Use a trusted network, firewall the selected port, and stop the MCP server when you are done.\n\n## Known limitations\n\nSee [Troubleshooting](./docs/troubleshooting.md).\n",
"bytes": 24994,
"sha": "a6cdcc0ea315afceba62e155e54c6d144f87cb85c3926cc836bf84645a694d1a",
"repo_slug": "ilharp/webview-devtools-mcp",
"fonte": "repo",
"truncated": false,
"api": "https://agentalog.com/api/listings/plg_ilharp_webview_devtools_mcp_40894d9c/readme"
}