Webview Devtools Mcp

webview-devtools-mcp

[](https://npmjs.org/package/webview-devtools-mcp)

DevTools for any WebView — no remote-debugging port required. Works in Safari/iOS WebView/Lark Web App and more. Based on chrome-devtools-mcp and chii.

webview-devtools-mcp is a Model Context Protocol (MCP) server for AI coding agents such as Claude Code, Cursor, Copilot, Gemini CLI, and Antigravity. It lets an agent inspect and automate a WebView or web page that you explicitly instrument with target.js: take snapshots and screenshots, click and type, inspect console messages and network requests, evaluate JavaScript, and debug live app state.

Unlike browser-launching MCP servers, this server does not open a browser tab for you. It starts a local debugging bridge and waits for your WebView/page to connect back.

[Tool reference](./docs/tool-reference.md) | [Troubleshooting](./docs/troubleshooting.md)

Screenshots

| Lark Web App | | --------------------------------------- | | |

How it works

1. Your MCP client starts webview-devtools-mcp.
2. The server listens on --host/--port and serves target.js.
3. You add a ` tag for that target.js` to the starting HTML that your WebView loads.
4. When the WebView opens or reloads, it connects to the MCP server.
5. Your agent can list the connected page and drive it through the MCP tools.

A connected page only exists while the instrumented WebView/page is open. If the WebView reloads or closes, the target may disappear and then reconnect.

Update checks

By default, the server periodically checks the npm registry for updates and logs a notification when a newer version is available. You can disable these update checks by setting the CHROME_DEVTOOLS_MCP_NO_UPDATE_CHECKS environment variable.

Requirements

• Node.js LTS version.
• npm

Getting started

1. Add the MCP server to your client

Add the following config to your MCP client:

{
  "mcpServers": {
    "webview-devtools": {
      "command": "npx",
      "args": ["-y", "webview-devtools-mcp@latest"]
    }
  }
}

> [!NOTE] > Using webview-devtools-mcp@latest ensures that your MCP client will always use the latest version of the webview-devtools-mcp.

By default the server listens on 127.0.0.1:9333. If you change the port, the script URL you inject must use the same port:

{
  "mcpServers": {
    "webview-devtools": {
      "command": "npx",
      "args": ["-y", "webview-devtools-mcp@latest", "--port=9334"]
    }
  }
}

If you are interested in doing only basic browser tasks, use the --slim mode:

{
  "mcpServers": {
    "webview-devtools": {
      "command": "npx",
      "args": ["-y", "webview-devtools-mcp@latest", "--slim"]
    }
  }
}

See [Slim tool reference](./docs/slim-tool-reference.md).

2. Inject target.js into your starting HTML

Add this script tag to the HTML document that your WebView loads first:

If you configured a different --host or --port, use that exact host and port in the script URL:

:/target.js">

For best results, place the script early in the document, for example in ``, so console, network, and page lifecycle activity is available as early as possible.

> [!IMPORTANT] > The host in the script URL is resolved from the WebView's runtime environment, not from your MCP client. 127.0.0.1 works only when the WebView and the MCP server run on the same machine/runtime.

3. Open or reload the WebView

After your MCP client has started the server and your WebView has loaded the instrumented HTML, ask your agent to inspect the connected page, for example:

List connected pages using webview-devtools-mcp and take a snapshot of the current page.

If no page appears, reload the WebView and verify that the target.js URL is reachable from the WebView environment.

Remote WebViews and mobile devices

When the MCP server runs on your PC but the WebView runs on a phone, simulator, embedded device, or another machine, do not use 127.0.0.1 in the injected script. On the phone, 127.0.0.1 means the phone itself, not your PC.

Use a host address that the device can reach:

1. Start the MCP server on an interface reachable from the device, for example:

``json { "mcpServers": { "webview-devtools": { "command": "npx", "args": [ "-y", "webview-devtools-mcp@latest", "--host=0.0.0.0", "--port=9333" ] } } } ``

1. Find your PC's LAN IP address, for example 192.168.1.23.
2. In the WebView's starting HTML, inject the PC address, not localhost:

```html

```

1. Make sure the phone and PC are on the same network and that your firewall allows inbound TCP connections to the selected port.
2. Open or reload the WebView, then have your agent call list_pages or take a snapshot.

For emulators, use the address that the emulator exposes for the host machine when appropriate (for example, Android Emulator commonly uses 10.0.2.2). The key rule is the same: the WebView must be able to fetch http://:/target.js and open the bridge connection back to that host and port.

MCP Client configuration

Amp Follow https://ampcode.com/manual#mcp and use the config provided above. You can also install webview-devtools-mcp using the CLI:

amp mcp add webview-devtools -- npx webview-devtools-mcp@latest

Antigravity

To 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:

{
  "mcpServers": {
    "webview-devtools": {
      "command": "npx",
      "args": [
        "-y",
        "webview-devtools-mcp@latest"
      ]
    }
  }
}

Claude Code

Install via CLI (MCP only)

Use the Claude Code CLI to add the webview-devtools-mcp (guide):

claude mcp add webview-devtools --scope user npx webview-devtools-mcp@latest

Install as a Plugin (MCP + Skills)

To install webview-devtools-mcp with skills, add the marketplace registry in Claude Code:

/plugin marketplace add ilharp/webview-devtools-mcp

Then, install the plugin:

/plugin install webview-devtools-mcp@webview-devtools-plugins

Restart Claude Code to have the MCP server and skills load (check with /skills).

> [!TIP] > 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.

Cline Follow https://docs.cline.bot/mcp/configuring-mcp-servers and use the config provided above.

Codex Follow the configure MCP guide using the standard config from above. You can also install webview-devtools-mcp using the Codex CLI:

codex mcp add webview-devtools -- npx webview-devtools-mcp@latest

Command Code

Use the Command Code CLI to add webview-devtools-mcp (MCP guide):

cmd mcp add webview-devtools --scope user npx webview-devtools-mcp@latest

Copilot CLI

Start Copilot CLI:

copilot

Start the dialog to add a new MCP server by running:

/mcp add

Configure the following fields and press CTRL+S to save the configuration:

• Server name: webview-devtools
• Server Type: [1] Local
• Command: npx -y webview-devtools-mcp@latest

Copilot / VS Code

Install as a Plugin (Recommended)

The easiest way to get up and running is to install webview-devtools-mcp as an agent plugin. This bundles the MCP server and all skills together, so your agent gets both the tools and the expert guidance it needs to use them effectively.

1. Open the Command Palette (Cmd+Shift+P on macOS or Ctrl+Shift+P on Windows/Linux).
2. Search for and run the Chat: Install Plugin From Source command.
3. Paste in our repository name: ilharp/webview-devtools-mcp.

That's it! Your agent is now supercharged with webview-devtools-mcp capabilities.

Cursor

Click the button to install:

[](https://cursor.com/en/install-mcp?name=webview-devtools&config=eyJjb21tYW5kIjoibnB4IC15IHdlYnZpZXctZGV2dG9vbHMtbWNwQGxhdGVzdCJ9)

Or install manually:

Go to Cursor Settings -> MCP -> New MCP Server. Use the config provided above.

Factory CLI Use the Factory CLI to add webview-devtools-mcp (guide):

droid mcp add webview-devtools "npx -y webview-devtools-mcp@latest"

Gemini CLI Install webview-devtools-mcp using the Gemini CLI.

Project wide:

# Either MCP only:
gemini mcp add webview-devtools npx webview-devtools-mcp@latest
# Or as a Gemini extension (MCP+Skills):
gemini extensions install --auto-update https://github.com/ilharp/webview-devtools-mcp

Globally:

gemini mcp add -s user webview-devtools npx webview-devtools-mcp@latest

Alternatively, follow the MCP guide and use the standard config from above.

Gemini Code Assist Follow the configure MCP guide using the standard config from above.

Grok Build CLI

grok mcp add webview-devtools npx webview-devtools-mcp@latest

See the docs for more options

JetBrains AI Assistant & Junie

Go to Settings | Tools | AI Assistant | Model Context Protocol (MCP) -> Add. Use the config provided above. The same way webview-devtools-mcp can be configured for JetBrains Junie in Settings | Tools | Junie | MCP Settings -> Add. Use the config provided above.

Kiro

In Kiro Settings, go to Configure MCP > Open Workspace or User MCP Config > Use the configuration snippet provided above.

Or, from the IDE Activity Bar > Kiro > MCP Servers > Click Open MCP Config. Use the configuration snippet provided above.

Mistral Vibe

Add in ~/.vibe/config.toml:

[[mcp_servers]]
name = "webview-devtools"
transport = "stdio"
command = "npx"
args = ["webview-devtools-mcp@latest"]

OpenCode

Add the following configuration to your opencode.json file. If you don't have one, create it at ~/.config/opencode/opencode.json (guide):

{
  "$schema": "https://opencode.ai/config.json",
  "mcp": {
    "webview-devtools": {
      "type": "local",
      "command": ["npx", "-y", "webview-devtools-mcp@latest"]
    }
  }
}

Qoder

In Qoder Settings, go to MCP Server > + Add > Use the configuration snippet provided above.

Alternatively, follow the MCP guide and use the standard config from above.

Qoder CLI

Install webview-devtools-mcp using the Qoder CLI (guide):

Project wide:

qodercli mcp add webview-devtools -- npx webview-devtools-mcp@latest

Globally:

qodercli mcp add -s user webview-devtools -- npx webview-devtools-mcp@latest

Visual Studio

Click the button to install:

[](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)

Warp

Go to Settings | AI | Manage MCP Servers -> + Add to add an MCP Server. Use the config provided above.

Windsurf Follow the configure MCP guide using the standard config from above.

Your first prompt

After the WebView is open and connected, enter a prompt like this in your MCP client:

List connected pages using webview-devtools-mcp and take a text snapshot.

Your 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.

> [!NOTE] > 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.

Tools

If you run into any issues, checkout our [troubleshooting guide](./docs/troubleshooting.md).

• Input automation (7 tools)
• [click](docs/tool-reference.md#click)
• [fill](docs/tool-reference.md#fill)
• [fill_form](docs/tool-reference.md#fill_form)
• [hover](docs/tool-reference.md#hover)
• [press_key](docs/tool-reference.md#press_key)
• [type_text](docs/tool-reference.md#type_text)
• [click_at](docs/tool-reference.md#click_at)
• Navigation automation (4 tools)
• [list_pages](docs/tool-reference.md#list_pages)
• [navigate_page](docs/tool-reference.md#navigate_page)
• [select_page](docs/tool-reference.md#select_page)
• [wait_for](docs/tool-reference.md#wait_for)
• Network (2 tools)
• [get_network_request](docs/tool-reference.md#getnetworkrequest)
• [list_network_requests](docs/tool-reference.md#listnetworkrequests)
• Debugging (7 tools)
• [evaluate_script](docs/tool-reference.md#evaluate_script)
• [get_console_message](docs/tool-reference.md#getconsolemessage)
• [list_console_messages](docs/tool-reference.md#listconsolemessages)
• [take_screenshot](docs/tool-reference.md#take_screenshot)
• [take_snapshot](docs/tool-reference.md#take_snapshot)
• [screencast_start](docs/tool-reference.md#screencast_start)
• [screencast_stop](docs/tool-reference.md#screencast_stop)
• Third-party (2 tools)
• [execute_3p_developer_tool](docs/tool-reference.md#execute3pdeveloper_tool)
• [list_3p_developer_tools](docs/tool-reference.md#list3pdeveloper_tools)
• WebMCP (2 tools)
• [execute_webmcp_tool](docs/tool-reference.md#executewebmcptool)
• [list_webmcp_tools](docs/tool-reference.md#listwebmcptools)

Configuration

webview-devtools-mcp supports the following configuration option:

• --port

• Type: number
• Default: 9333

• --host

• Type: string
• Default: 127.0.0.1

• --logFile/ --log-file

Path to a file to write debug logs to. Set the env variable DEBUG to * to enable verbose logs. Useful for submitting bug reports.

• Type: string
• Default: false

• --acceptInsecureCerts/ --accept-insecure-certs

If enabled, ignores errors relative to self-signed and expired certificates. Use with caution.

• Type: boolean
• Default: false

• --experimentalPageIdRouting/ --experimental-page-id-routing

Whether to expose pageId on page-scoped tools and route requests by page ID (useful for concurrent agent sessions).

• Type: boolean
• Default: false

• --experimentalDevtools/ --experimental-devtools

Whether to enable automation over DevTools targets

• Type: boolean
• Default: false

• --experimentalVision/ --experimental-vision

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.

• Type: boolean
• Default: false

• --memoryDebugging/ --memory-debugging, -experimentalMemory

Whether to enable memory debugging tools.

• Type: boolean
• Default: false

• --experimentalStructuredContent/ --experimental-structured-content

Whether to output structured formatted content.

• Type: boolean
• Default: false

• --experimentalIncludeAllPages/ --experimental-include-all-pages

Whether to include all kinds of pages such as webviews or background pages as pages.

• Type: boolean
• Default: false

• --experimentalScreencast/ --experimental-screencast

Exposes experimental screencast tools (requires ffmpeg). Install ffmpeg https://www.ffmpeg.org/download.html and ensure it is available in the MCP server PATH.

…

Source & license

This open-source MCP server is cataloged on AgentStack and links to its original source — we do not rehost the code.

• Author: ilharp
• Source: ilharp/webview-devtools-mcp
• License: Apache-2.0

Install and usage instructions live in the source repository linked above.