Chrome Connect

The Chrome Connect plugin adds the chrome-devtools-cli skill, thus providing integration between an Air session and Chrome DevTools and allowing agents to access live runtime data and perform browser interactions. This equips your agent integrated into WebStorm with real-time observability and action capabilities, closing the loop between code generation, debugging, and validation for frontend development.

The video below shows how you can have a runtime error in an Angular full-stack application fixed by using the Codex agent and the chrome-devtools-cli skill.

Before you start

Make sure the Air and Chrome Connect required plugins are enabled on the Settings | Plugins page. For more information, refer to Plugins.
Although it is strongly recommended that you use Air, you can also use AI Assistant.
A notification will offer you a trial of Air. Moving to Air hides the AI Assistant. To return to AI Assistant, follow the steps outlined here.
Air automatically migrates your WebStorm skills, MCP configuration, agents installed through ACP, authentication, and chat history. Note that chat mode history isn't migrated.
Make sure you have Node.js on your computer.
In the Settings dialog (Ctrl+Alt+S) , go to AI | Skills, and make sure the chrome-devtools-cli skill is enabled.

Use the Chrome DevTools MCP server

The Chrome Connect plugin relies on an MCP (Model Context Protocol) server that lets Air interact with a running Chrome browser through the Chrome DevTools Protocol (CDP).

This Chrome DevTools MCP server is implemented through the chrome-devtools-mcp npm package. The package is installed once, in the background, when an Air session is first run against a project recognized as frontend‑like.

To decide whether a project is frontend-like, WebStorm checks the project's package.json file for mentions of UI frameworks or bundlers and reuses detection of JavaScript or TypeScript frameworks.

04 November 2026