Grip on anything on the web.

Get Started Configure MCP

Target WebpageBrowser Node

Inspects properties, state variables, and DOM components.

@grip/extensionChrome Extension

Visual element picker overlay and DevTools inspector panels.

grip-mcpGo Server

Connects over CDP to execute browser queries & clicks.

AI Client / IDEMCP Consumer

Reads layouts, fills values, and applies precise codebase edits.

Quick Start Workflow

Expose standard Chrome DevTools debugger ports, connect your MCP server, and trigger browser queries.

Configure local packages and server bin

$pnpm install && pnpm run build:mcp

> grip-dev@0.1.0 build
> tsup && tsc -p tsconfig.dts.json

CLI Building entry: src/index.ts, src/mcp/index.ts
✔ compiled successfully to bin/grip-mcp

Ecosystem Architecture

Grip consists of modular layers designed to work together, bridging the gap between web applications and AI agent workspaces.

grip-dev

Zero-dependency TypeScript package. Generates robust selectors and packages clean, semantic accessibility tree snapshots tailored for LLM reasoning.

// Generate selector and accessibility snapshots

const selector = generateSelector(element);

const snapshot = buildSnapshotForLLM(document);

@grip/extension

Chrome MV3 developer extension featuring interactive selection canvas overlays, DevTools inspector panel integrations, and session sync capabilities.

View extension guide→

grip-mcp

Go background daemon implementing the Model Context Protocol. Connects standard command-line tools to target browser sessions using remote debugging protocol ports.

View server reference→

AI Agent Integrations

Seamless connection with leading AI coding tools. Feeds precise elements directly into context windows, enabling agents to execute code-aware edits and verification steps.

CursorClaude DesktopVS Code AgentZed

Architecture Layout

Bridges target browser environments to host IDE workspaces safely and efficiently.

1. Content Scripts

Injects target page observers. Parses internal React fiber nodes to extract structured component props, states, and coordinates.

2. Chrome DevTools API

Elevated extension context. Resolves source mappings on the fly to match target selectors back to original local files and line numbers.

3. Go Daemon

Background MCP server. Forwards agent tool calls (snapshots, element interactions, keyboard input) directly to connected debug tabs.

Ready to integrate? Review the setup guidelines.

Read Configuration Docs