What is Grip?

Grip helps you pick elements on any web page, inspect accessibility data, and connect your browser to AI tools through MCP.

What is Grip?

Grip is an open-source toolkit for working with live web pages. You get a Chrome extension for visual picking, a shared UI across popup / DevTools / floating panel, and an MCP server so AI assistants can snapshot, click, and debug pages in your real browser.

Think of it as a bridge: the extension captures what you see on the page; grip-mcp lets tools like Cursor, Claude Code, or Gemini CLI act on that same browser session.

What you can do

  • Pick any element — hover, click, and get CSS, XPath, role, and text in one place.
  • Share context with AI — copy MCP-ready prompts or let an agent call snapshot and click directly.
  • Debug faster — read console logs and network traffic next to your picks.
  • Use one UI everywhere — popup, DevTools panel, and in-page floating tray share the same layout and pick history.

Who it's for

Developers

Stop guessing selectors. Pick once, copy a stable path, and move on. Grip is built for day-to-day front-end and automation work — not just demos.

AI apps & agents

Through Model Context Protocol (MCP), agents get structured browser access: accessibility refs, clicks, fills, logs, and network data — all tied to the page you already have open.

Teams

Everyone on the team sees the same pick history and session UI, whether they open Grip from the toolbar, DevTools, or the floating button on the page.

Where to go next

New here? Start with the quick start, then wire up MCP for your editor or CLI.

Quick start

Install, build, launch Chrome, and load the extension in a few minutes.

MCP configuration

Set up grip-mcp for Cursor, VS Code, Claude Code, Gemini CLI, OpenCode, and more.

Chrome extension

Build and load the extension — popup, DevTools panel, and floating tray.

MCP tools

What each tool does and a simple workflow agents should follow.

Minimal setup

If you already have the repo cloned, this is the shortest path to a working stack:

pnpm install
pnpm turbo build
pnpm run build:mcp
./scripts/launch-chrome.sh 9222

After Chrome is running, open the Grip extension and check the MCP chip in the header — green means your browser is reachable on port 9222.

Want package-level detail? See grip-dev, @grip/devtools, and grip-mcp.