Stop describing your UI. Show it.
A Chrome extension that gives coding agents eyes on your web page — screenshots, DOM, styles, selectors, and accessibility info.
Install from Chrome Web StoreFree — works with Claude Code, Codex, Gemini CLI, Cursor, Windsurf, and any MCP client
Pick an element or draw a region in Chrome. Add context like "fix this button."
Captures screenshot, HTML, CSS, selectors, accessibility info, and bounding box.
Receives everything it needs to understand and act on what you see.
Everything the agent needs to understand, locate, and modify the element.
The agent calls screenshot, pick_element, or select_region. You interact with the page. The result goes back automatically.
Pick elements with Alt+Shift+P or draw regions with Alt+Shift+S. Add a note. Say "yoink" and the agent gets it.
No copying, no pasting, no describing what you see in words.
Install the extension, add the MCP server, and you're yoinking.
Requires Node.js 20+.
claude mcp add yoink -- npx yoink-mcpcodex mcp add yoink -- npx yoink-mcpgemini mcp add yoink -- npx yoink-mcpFor Cursor, Windsurf, Claude Desktop, or other MCP-compatible clients, add to your MCP config file:
{
"mcpServers": {
"yoink": {
"command": "npx",
"args": ["yoink-mcp"]
}
}
}| 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 |
The AI agent communicates with the MCP server via stdio. The server connects to the Chrome extension over a localhost WebSocket. The extension injects content scripts to interact with web pages.