Yoink icon

Yoink

Let AI agents see and interact with what you see in Chrome.

Install from Chrome Web Store
AI Agent Claude, etc.
stdio
MCP Server localhost
WebSocket
Extension Chrome
content scripts
Web Page any site

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:

MCP tools

ToolDescription
start_yoinkingBind to the user's active Chrome tab
stop_yoinkingUnbind from the current tab
screenshotCapture a screenshot of the current browser tab
pick_elementUser clicks an element to capture its data
select_regionUser draws a rectangle to capture a screenshot
get_element_infoQuery element data by CSS selector
yoinkFetch 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

  1. Tell your agent "start yoinking"
  2. The agent will print a port and auth token
  3. Click the Yoink extension icon in Chrome, enter the port and paste the token — it connects automatically
  4. 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

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

Troubleshooting

Extension shows "Disconnected"

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

Full privacy policy

Requirements