Skip to main content
Testing through a real host means exposing a public URL, registering a connector, starting a conversation, and prompting the model until it calls the right tool. DevTools cuts that loop down to a file save: it runs locally, emulates the host runtime, and lets you call tools directly, no model or host involved.

​
Start the Emulator

DevTools ships with the dev server. In a scaffolded project, start it from the project root:
Two routes come up:
  • http://localhost:3000/mcp: your MCP server
  • http://localhost:3000/: the DevTools
Every tool registered on the server appears in the sidebar automatically, and edits to the server or the views reload the preview on save.

​
Explore the Features

Select a tool in the sidebar and DevTools gives you the full exchange:
DevTools Illustration

The DevTools interface

  • 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 display mode, theme, locale, and device type; the preview updates immediately.
  • Call logs: every runtime API call the view makes (setViewState, callTool, requestDisplayMode) with its arguments and responses.

​
Drive DevTools from a Coding Agent

DevTools exposes its actions as WebMCP tools, so a coding agent that drives your browser runs them directly. The agent connects through chrome-devtools-mcp, an MCP server that discovers and calls a page’s WebMCP tools. On the DevTools page it can:
  • 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: display mode, theme, locale, and device.

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

Open in Cursor
Your agent now closes its own loop: it edits a view, runs the tool, reads the rendered result, and fixes what is wrong.
WebMCP is experimental and supported Chrome version 149 or newer.

​
Authenticated Servers

When your server requires OAuth, DevTools registers itself through Dynamic Client Registration on first connect and walks the full PKCE flow as a public client. A server that needs a pre-registered client or a different grant type won’t connect from DevTools. DevTools caches the authorization within the browser, so later sessions reconnect without prompting. To clear a cached registration, click Sign out in the header.

​
Limitations

DevTools emulates, and three gaps separate the emulation from production:
  • 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.
  • One runtime: as of today the preview mocks the Apps SDK runtime. MCP Apps-specific features are not yet supported.
  • Loose CSP: external resources blocked by hosts in production may load locally.
To test your app against a real LLM, use the playground or connect your server to ChatGPT or Claude using the tunnel.

​
Go Further

Tunnel

Expose your local server to real hosts

Playground

Chat with a real model running your app

Audit

Catch spec and platform issues before submission