# Webview Devtools Mcp

> DevTools for any WebView — no remote-debugging port required. Works in Safari/iOS WebView/Lark Web App and more.

- **Type:** MCP server
- **Install:** `agentstack add mcp-ilharp-webview-devtools-mcp`
- **Verified:** Yes — security-reviewed for prompt injection and unsafe behavior
- **Seller:** [ilharp](https://agentstack.voostack.com/s/ilharp)
- **Installs:** 0
- **Category:** [Web & Browser](https://agentstack.voostack.com/c/web-and-browser)
- **Latest version:** 0.1.0
- **License:** Apache-2.0
- **Upstream author:** [ilharp](https://github.com/ilharp)
- **Source:** https://github.com/ilharp/webview-devtools-mcp

## Install

```sh
agentstack add mcp-ilharp-webview-devtools-mcp
```

Requires the [AgentStack CLI](https://agentstack.voostack.com/docs/cli). Works with Claude Code, Cursor, and any MCP-compatible agent.

## About

# 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](https://github.com/ChromeDevTools/chrome-devtools-mcp) and [chii](https://github.com/liriliri/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](https://nodejs.org/) [LTS](https://github.com/nodejs/Release#release-schedule) version.
- [npm](https://www.npmjs.com/)

## Getting started

### 1. Add the MCP server to your client

Add the following config to your MCP client:

```json
{
  "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:

```json
{
  "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:

```json
{
  "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:

```html

```

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

```html
:/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:

```text
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"
         ]
       }
     }
   }
   ```

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

   ```html
   
   ```

4. Make sure the phone and PC are on the same network and that your firewall allows inbound TCP connections to the selected port.
5. 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:

```bash
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:

```bash
{
  "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):

```bash
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:

```sh
/plugin marketplace add ilharp/webview-devtools-mcp
```

Then, install the plugin:

```sh
/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:

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

  Command Code

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

```bash
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):

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

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

**Project wide:**

```bash
# 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:**

```bash
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

```bash
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:

```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):

```json
{
  "$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:**

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

**Globally:**

```bash
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](https://docs.warp.dev/knowledge-and-collaboration/mcp#adding-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:

```text
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#get_network_request)
  - [`list_network_requests`](docs/tool-reference.md#list_network_requests)
- **Debugging** (7 tools)
  - [`evaluate_script`](docs/tool-reference.md#evaluate_script)
  - [`get_console_message`](docs/tool-reference.md#get_console_message)
  - [`list_console_messages`](docs/tool-reference.md#list_console_messages)
  - [`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#execute_3p_developer_tool)
  - [`list_3p_developer_tools`](docs/tool-reference.md#list_3p_developer_tools)
- **WebMCP** (2 tools)
  - [`execute_webmcp_tool`](docs/tool-reference.md#execute_webmcp_tool)
  - [`list_webmcp_tools`](docs/tool-reference.md#list_webmcp_tools)

## 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](https://github.com/ilharp)
- **Source:** [ilharp/webview-devtools-mcp](https://github.com/ilharp/webview-devtools-mcp)
- **License:** Apache-2.0

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

## Pricing

- **Free** — Free

## Security capabilities

Automated source analysis of v0.1.0 — what this tool can access:

- **Network access:** no
- **Filesystem access:** no
- **Shell / process execution:** no
- **Environment & secrets:** no
- **Dynamic code execution:** no

*"Yes" means the capability is present in the source — more access means more to trust, not that it is unsafe.*


## Versions

- **0.1.0** — security scan: passed — Imported from the upstream source.

## Links

- Listing page: https://agentstack.voostack.com/l/mcp-ilharp-webview-devtools-mcp
- Seller: https://agentstack.voostack.com/s/ilharp
- Browse the marketplace: https://agentstack.voostack.com/browse

---
Listed on AgentStack — the marketplace for AI agent skills and MCP servers. Every listing is security-reviewed. Creators keep 70%.