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. Configure your AI client

The MCP server requires Node.js 20+. Add Yoink to your MCP client:

claude mcp add yoink -- npx yoink-mcp

codex mcp add yoink -- npx yoink-mcp

gemini mcp add yoink -- npx yoink-mcp

For Cursor, Windsurf, Claude Desktop, or other MCP-compatible clients, add to your MCP config file:

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

3. Start yoinking

Tell your agent "start yoinking"
The agent will print a port and auth token
Click the Yoink extension icon in Chrome, enter the port and paste the token — it connects automatically
Tell the agent to "start yoinking" again — it binds to your active Chrome tab

The token regenerates each time the MCP server starts, so you'll need to reconnect the extension after restarting your agent. Set a custom port via the YOINK_PORT environment variable (default: 18321).

4. Use it

Ask the agent to take a screenshot, pick_element, or select_region
Or pick elements yourself with keyboard shortcuts (Alt+Shift+P, Alt+Shift+S) and they're sent to the agent automatically
Say "yoink" to have the agent fetch your pending selections

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
UI isolation — All injected UI uses closed Shadow DOM

Full privacy policy

Requirements

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