Yoink — Let AI agents see your browser

How it works

Yoink is a Chrome extension paired with an MCP server that bridges the gap between text-based AI agents and visual browser content. Users pick elements or draw regions in the browser, and the agent retrieves screenshots, DOM data, styles, and accessibility info via MCP tools.

Communication is bidirectional: the agent can request screenshots and element data, and the user can push feedback from the browser.

Agent-initiated

The AI agent requests a screenshot or activates the element picker. You interact with the page, and the result is sent back to the agent.

User-initiated

You pick elements or draw regions using keyboard shortcuts (Alt+Shift+P, Alt+Shift+S) or the right-click menu. Add optional context like "fix this button" and the selection is automatically sent to the agent.

What the agent gets

When you pick an element, the agent receives:

A cropped screenshot of the element
CSS selector and XPath
Outer HTML (truncated to 10 KB)
26 computed CSS properties
Accessibility info (ARIA role, label, state)
Bounding box coordinates
Page URL and title

MCP tools

Tool	Description
`start_yoinking`	Bind to the user's active Chrome tab
`stop_yoinking`	Unbind from the current tab
`screenshot`	Capture a screenshot of the current browser tab
`pick_element`	User clicks an element to capture its data
`select_region`	User draws a rectangle to capture a screenshot
`get_element_info`	Query element data by CSS selector
`yoink`	Fetch pending selections sent from the browser

Setup

1. Install and build

npm install
npm run build

2. Load the Chrome extension

Open chrome://extensions/ in Chrome
Enable Developer mode (top right toggle)
Click Load unpacked and select packages/chrome-extension/dist

3. Configure the MCP server

For Claude Code:

claude mcp add yoink node /path/to/yoink/packages/mcp-server/dist/src/index.js

For Claude Desktop or other MCP clients, add to your config:

{
  "mcpServers": {
    "yoink": {
      "command": "node",
      "args": ["/path/to/yoink/packages/mcp-server/dist/src/index.js"]
    }
  }
}

4. Connect the extension

Read the auth token from $TMPDIR/yoink-auth and paste it into the extension popup. The token regenerates each time the MCP server restarts.

cat $TMPDIR/yoink-auth
# {"port":18321,"token":"abc123..."}

Privacy

✓ No data leaves your machine

Localhost-only — WebSocket binds to 127.0.0.1
Token authentication — 32-byte random token with timing-safe comparison
Zero external requests — No analytics, telemetry, or third-party services
Zero runtime dependencies — The extension bundle is entirely first-party code
UI isolation — All injected UI uses closed Shadow DOM

Full privacy policy

Requirements

Node.js >= 20
npm >= 10
Google Chrome