🌐 pi-chrome-devtools — Chrome DevTools Tools for Pi Agents

@narumitw/pi-chrome-devtools is a native Pi coding agent extension that exposes Chrome DevTools Protocol (CDP) automation as Pi tools.

Use it to let the Pi agent inspect browser tabs, navigate pages, evaluate JavaScript, and capture screenshots while debugging web apps or validating UI behavior.

This package is inspired by chrome-devtools-mcp, but it is implemented as native Pi tools instead of an MCP server.

✨ Features

• Lists inspectable Chrome tabs and pages.
• Selects an active Chrome page for later tool calls.
• Navigates Chrome to a target URL.
• Evaluates JavaScript in the selected page.
• Captures PNG screenshots, including optional full-page screenshots.
• Uses a local Chrome DevTools Protocol endpoint.
• Shows statusline activity only while Chrome DevTools tools are running.

📦 Install

pi install npm:@narumitw/pi-chrome-devtools

Try without installing permanently:

pi -e npm:@narumitw/pi-chrome-devtools

Try this package locally from the repository root:

pi -e ./extensions/pi-chrome-devtools

🚀 Start Chrome with CDP enabled

The extension connects to 127.0.0.1:9222 by default.

google-chrome --remote-debugging-port=9222 --user-data-dir=/tmp/pi-chrome-devtools

On macOS:

/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome \
  --remote-debugging-port=9222 \
  --user-data-dir=/tmp/pi-chrome-devtools

Override the endpoint if needed:

PI_CHROME_DEVTOOLS_HOST=127.0.0.1 PI_CHROME_DEVTOOLS_PORT=9223 pi -e ./extensions/pi-chrome-devtools

🛠️ Pi tools

• chrome_devtools_list_pages — list inspectable Chrome tabs/pages.
• chrome_devtools_select_page — select the active page for later tool calls.
• chrome_devtools_navigate — navigate a page to a URL.
• chrome_devtools_evaluate — evaluate JavaScript in the selected page.
• chrome_devtools_screenshot — capture a PNG screenshot.

💬 Command

/chrome-devtools

Shows the configured CDP endpoint and a quick-start hint.

🧠 Use cases

• Debug front-end applications with an AI coding agent.
• Verify DOM state after code changes.
• Capture screenshots for visual inspection.
• Drive local browser workflows without a separate MCP server.
• Combine with Pi coding tools for end-to-end web app fixes.

🗂️ Package layout

extensions/pi-chrome-devtools/
├── src/
│   └── chrome-devtools.ts
├── README.md
├── LICENSE
├── tsconfig.json
└── package.json

The package exposes its Pi extension through package.json:

{
  "pi": {
    "extensions": ["./src/chrome-devtools.ts"]
  }
}

🔎 Keywords

Pi extension, Pi coding agent, Chrome DevTools Protocol, CDP, browser automation, web debugging, JavaScript evaluation, screenshot automation, AI coding agent tools.

📄 License

MIT. See LICENSE.