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

Get started

1. Install the Chrome extension

Install Yoink from the Chrome Web Store.

2. Install the MCP server

The MCP server requires Node.js 20+. Install it via npm:

npm install -g yoink-mcp

3. Configure your AI client

Add Yoink to your MCP client. For Claude Code:

claude mcp add yoink -- npx yoink-mcp

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

{
  "mcpServers": {
    "yoink": {
      "command": "npx",
      "args": ["yoink-mcp"]
    }
  }
}

4. Connect the extension

When the MCP server starts, it writes its auth token and port to $TMPDIR/yoink-auth:

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

Click the Yoink extension icon in Chrome
Enter the port and paste the auth token
Click Connect

The token regenerates each time the MCP server starts. Set a custom port via the YOINK_PORT environment variable (default: 18321).

5. Start yoinking

Tell the agent to start yoinking — it binds to your active Chrome tab
Use agent tools (screenshot, pick_element, select_region) or pick elements yourself with keyboard shortcuts
Selections are sent to the agent automatically

Troubleshooting

Extension shows "Disconnected"

Check that the MCP server is running (your AI client starts it automatically)
Verify the auth token matches: cat $TMPDIR/yoink-auth
Verify the port matches (default 18321)

Token changed after restart

By design. The auth token regenerates each time the MCP server starts. Re-read $TMPDIR/yoink-auth and update the token in the extension popup.

Element picker doesn't activate

Content scripts don't run on chrome:// or extension pages. Navigate to a regular web page.

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