Empowering Frontend Development: Controlling Vite & Chrome DevTools with MCP

Empowering Frontend Development: Vite & Chrome DevTools

Instead of continuously jumping between your code editor, local preview server, and browser developer console, connect Vite and Chrome DevTools directly to your agent via MCP. Your agent can read console warnings, reload pages, inspect the DOM tree, and optimize front-end assets instantly.

Prerequisites

1. ▸A frontend project running a Vite Dev Server (e.g., React, Vue, or Svelte).
2. ▸Chrome or Chromium installed locally.
3. ▸Chrome must be launched with the --remote-debugging-port=9222 flag so the MCP server can attach via the Chrome DevTools Protocol (CDP).

Vite Integration Configuration

Add the following to your MCP client config:

{
  "mcpServers": {
    "vite-devtools": {
      "command": "npx",
      "args": ["-y", "mcp-server-vite-devtools"],
      "env": {
        "VITE_DEV_SERVER_URL": "",
        "CHROME_DEBUG_PORT": "9222"
      }
    }
  }
}

Action Workflows

Once connected, ask your agent to act as a frontend co-pilot:

• ▸Optimize Assets: "Examine the bundle output warnings in the Vite dev console and optimize the imports of heavy packages."
• ▸Analyze Browser Console: "Fetch the last 10 errors logged in Chrome DevTools console and locate the source mapping of the failing hook."
• ▸DOM Inspection: "Inspect the #nav-bar element using Chrome DevTools and tell me why the CSS flex layout is overlapping."

Best Practices

• ▸Security Warning: Exposing the Chrome Remote Debugging port (9222) locally means any local process can fully control your browser. Close the remote-debugging session when you are not actively developing.
• ▸Headless Testing: If you are running tests in CI, you can configure the MCP server to spawn headless Chrome rather than relying on an active UI window.

Troubleshooting

• ▸Connection Refused on Port 9222: You likely forgot to start Chrome with the remote debugging flag. Completely close all Chrome instances, then launch from your terminal: chrome --remote-debugging-port=9222.
• ▸HMR Disconnects: If Vite's Hot Module Replacement disconnects frequently, ensure the agent isn't repeatedly triggering full-page reloads.

Using with OpenAI Codex

You can use this MCP server with the OpenAI Codex CLI by adding it to your configuration:

codex mcp add --name chrome-devtools --command "npx -y @modelcontextprotocol/server-chrome-devtools"

Note: Requires Chrome running with remote debugging enabled (--remote-debugging-port=9222).

For a full list of recommended servers, see Best MCP Servers for OpenAI Codex.