DevTools

​

Start the Emulator

npm run dev

pnpm dev

yarn dev

bun dev

deno task dev

• http://localhost:3000/mcp: your MCP server
• http://localhost:3000/: the DevTools

​

Explore the Features

• Tool controls: generated from the tool’s input schema. Inputs can be saved and re-run from the tool header.
• Tool output: the raw server response (content, structuredContent, _meta), with status, latency, and payload size.
• State inspector: the view state as a JSON tree, updated as the view mutates it.
• View preview: the rendered View, with live controls to switch theme, locale, and device type; the preview updates immediately. The display mode is shown as a badge rather than a control, because only the view changes it, through setDisplayMode.
• Context warnings: a badge on the tool output and the view state when either grows large enough to crowd the model’s context, at 5,000 estimated tokens for tool output and 20,000 for view state. The same warning prints in the browser and dev server consoles. Nothing is blocked or truncated, and the full payload stays inspectable.
• Call logs: every runtime API call the view makes (setViewState, callTool, requestDisplayMode) with its arguments and responses.

​

Preview in a Host Conversation

• Switch client between ChatGPT and Claude. Each shell is measured against the real app, in light and dark, and the mode resets to inline when you switch.
• Toggle device to render the shell inside a 390 x 844 phone frame, with the mobile layout that client uses.
• Display modes follow what the selected client supports. Inline and fullscreen work everywhere, pip only on ChatGPT desktop, where it renders as a floating card. A pip request becomes fullscreen on ChatGPT mobile, and Claude keeps the current mode.
• Quit preview returns to the panel with your tool state intact.

​

Drive DevTools from a Coding Agent

• Run any registered tool and render its view in the preview.
• Read the rendered view by screenshotting the preview, then drive it as a real page.
• Switch the preview controls: theme, locale, and device. The display mode is not among them, since the view owns it.

​

Set It Up

1

Add chrome-devtools-mcp to your agent

Register the MCP server with the WebMCP flag, forwarding the browser feature flag to the Chrome it launches.

• Claude Code
• Codex
• Cursor
• Others

claude mcp add chrome-devtools --scope user -- \
  npx chrome-devtools-mcp@latest \
  --categoryExperimentalWebmcp=true \
  --chrome-arg=--enable-features=WebMCP,DevToolsWebMCPSupport

codex mcp add chrome-devtools -- \
  npx chrome-devtools-mcp@latest \
  --categoryExperimentalWebmcp=true \
  --chrome-arg=--enable-features=WebMCP,DevToolsWebMCPSupport

See the client configuration guide, or add this to your MCP config:

mcp.json

{
  "mcpServers": {
    "chrome-devtools": {
      "command": "npx",
      "args": [
        "-y",
        "chrome-devtools-mcp@latest",
        "--categoryExperimentalWebmcp=true",
        "--chrome-arg=--enable-features=WebMCP,DevToolsWebMCPSupport"
      ]
    }
  }
}

2

Start DevTools

Run npm run dev and open the DevTools URL printed in the terminal.

3

Prompt your agent

Open my app in DevTools, run a tool, and check the view renders

CopiedCopy promptOpen in Cursor

​

Authenticated Servers

​

Limitations

• No model: you pick the tool and type the arguments yourself. Tool selection, the prompt surface (names, descriptions, schemas), and follow-up messages are never exercised.
• Mocked runtimes: DevTools mocks the MCP Apps runtime and also injects a window.openai shim for the Apps SDK, so an Apps SDK call that works here can still be host-specific in production. Host behaviour outside those mocks is not reproduced, and the conversation around a preview is a skeleton, not a working client.
• Loose CSP: external resources blocked by hosts in production may load locally.

​

Go Further