# Source: https://lynxjs.org/ai/lynx-devtool-mcp.md

# Lynx DevTool MCP

Lynx DevTool MCP is a [Model Context Protocol (MCP) server](https://modelcontextprotocol.io/docs/learn/server-concepts) that lets coding agents _**control, operate and preview**_ Lynx pages.

## Get started

Add the following config to your MCP client:

```json
{
  "mcpServers": {
    "lynx-devtool": {
      "command": "npx",
      "args": ["-y", "@lynx-js/devtool-mcp-server@latest"]
    }
  }
}
```

<details>
  <summary>
    Claude Code
  </summary>

  Use the Claude Code CLI to add the Lynx DevTool MCP server ([guide](https://docs.anthropic.com/en/docs/claude-code/mcp)):

  ```bash
  claude mcp add lynx-devtool npx @lynx-js/devtool-mcp-server@latest
  ```
</details>

<details>
  <summary>
    Codex
  </summary>

  Follow the [configure MCP guide](https://github.com/openai/codex/blob/main/docs/advanced.md#model-context-protocol-mcp) using the standard config from above. You can also install the Lynx DevTool MCP server using the Codex CLI:

  ```bash
  codex mcp add lynx-devtool -- npx @lynx-js/devtool-mcp-server@latest
  ```
</details>

<details>
  <summary>
    Copilot / VS Code
  </summary>

  Follow the MCP install [guide](https://code.visualstudio.com/docs/copilot/chat/mcp-servers#_add-an-mcp-server), with the standard config from above. You can also install the Lynx DevTool MCP server using the VS Code CLI:

  ```bash
  code --add-mcp '{"name":"lynx-devtool","command":"npx","args":["@lynx-js/devtool-mcp-server@latest"]}'
  ```
</details>

<details>
  <summary>
    Cursor
  </summary>

  **Click the button to install:**

  <a href="https://cursor.com/en/install-mcp?name=lynx-devtool&config=eyJjb21tYW5kIjoibnB4IiwiYXJncyI6WyIteSIsIkBseW54LWpzL2RldnRvb2wtbWNwLXNlcnZlckBsYXRlc3QiXX0=">
    <img src="https://cursor.com/deeplink/mcp-install-light.svg" alt="Install Lynx DevTool MCP in Cursor" style={{ display: 'block', cursor: 'pointer' }} />
  </a>

  **Or install manually:**

  Go to `Cursor Settings` -> `MCP` -> `New MCP Server`. Use the config provided above.
</details>

<details>
  <summary>
    Gemini CLI
  </summary>

  Install the Lynx DevTool MCP server using the Gemini CLI.

  **Project wide:**

  ```bash
  gemini mcp add lynx-devtool npx @lynx-js/devtool-mcp-server@latest
  ```

  **Globally:**

  ```bash
  gemini mcp add -s user lynx-devtool npx @lynx-js/devtool-mcp-server@latest
  ```

  Alternatively, follow the [MCP guide](https://github.com/google-gemini/gemini-cli/blob/main/docs/tools/mcp-server.md#how-to-set-up-your-mcp-server) and use the standard config from above.
</details>

## Usage

Using the Lynx DevTool MCP server is just like using DevTool.

You need to connect to the devices and open Apps like LynxExplorer.

### Elements

Just like the "Elements" tab in DevTool,
there are various tools (prefixed with `CSS_*` or `DOM_*`) in Lynx DevTool MCP server to help you inspect the element tree.

:::note
All these tools are read-only. Modify the source code to make changes to the element tree.
:::

### Console

Just like the "Console" tab in DevTool, the coding agent may use Lynx DevTool MCP server to read all the message in Console and their stack traces.

### Sources

Just like the "Sources" tab in DevTool, all the loading JavaScript sources can be read by the Lynx DevTool MCP server.

This is useful for coding agent to find the corresponding code in Console stack traces.

### Interaction

The coding agent may also interact with the Lynx page using Lynx DevTool MCP server, performing actions like tap or drag.

### Screenshot

The Lynx DevTool MCP server also provides tools to take screenshot of the current Lynx page. Using a multimodal model to understand the screenshot.