AI Coding Agents

Connect Yocoolab to your AI coding agent via MCP. Click an element in Chrome, send it to your agent, and get a fix with full context.

Quick Start

  1. 1

    Install the Chrome extension

    Get it from the Chrome Web Store, pin it, and sign in with GitHub or Google. You'll need this to capture elements and send feedback to your agent.

  2. 2

    Run the setup wizard

    One command auto-detects every installed agent and writes the right config for each:

    npx -y @yocoolab/mcp-server@2 setup

    The wizard detects Claude Code, Cursor, Cline, Roo Code, and Windsurf. No global install needed — it runs straight from npm.

  3. 3

    Add your Yocoolab JWT

    Open the Yocoolab Chrome Extension → Settings → API Token, copy the JWT, and paste it into the YOCOOLAB_TOKEN placeholder.

    Token is optional — without it, bridge / companion / activity tools still work; only thread-feedback tools require it.

  4. 4

    Restart your agent

    MCP servers load at agent startup. Quit and reopen your agent — Yocoolab tools should appear automatically. Try: "Show me all open feedback for my repo."

Tip

Prefer to configure manually? Pick your agent below for the exact config snippet, file path, and platform-specific instructions.

Agent Setup Guides

Claude Code

Anthropic

Config file

.mcp.json — Project root

Setup

Create a .mcp.json file in your project root, or run the setup command.

Configuration

{
  "mcpServers": {
    "yocoolab": {
      "command": "npx",
      "args": ["-y", "@yocoolab/mcp-server@2"],
      "env": {
        "YOCOOLAB_API_URL": "https://app.yocoolab.com",
        "YOCOOLAB_TOKEN": "<your token>",
        "GITHUB_TOKEN": "<your GitHub PAT>"
      }
    }
  }
}

Tip

Replace <your token> with your Yocoolab JWT (from the Chrome extension settings) and <your GitHub PAT> with a GitHub personal access token that has repo write permissions.

Available Tools

Once connected, your agent has access to these tools:

list_open_threads

Show unresolved feedback threads for a repo

get_thread_context

Full thread details — screenshot, selector, messages, element metadata

create_pr_for_thread

Create a GitHub PR with code changes linked to a thread

mark_thread_addressed

Resolve a thread with a closing message

get_latest_selection

Get the element you just clicked in Chrome

get_selection_history

Recent element selections from the extension

find_source_for_selection

Map a UI element to source files with confidence scoring

get_element_context

Full element metadata, computed styles, and source candidates

Environment Variables

VariableRequiredPurpose
YOCOOLAB_API_URLNoBackend URL (default: https://app.yocoolab.com)
YOCOOLAB_TOKENNoJWT from the Chrome extension. Required only for thread-feedback tools.
GITHUB_TOKENNoGitHub PAT for PR creation
YOCOOLAB_BRIDGE_PORTNoHTTP bridge port (default: 9800)

Source & Releases

Example Workflow

Tip

Try saying: "Show me all open feedback for my-org/my-repo and fix the most urgent one."

  1. Agent calls list_open_threads to see all feedback
  2. Agent calls get_thread_context on the highest priority thread
  3. Agent sees the screenshot, element selector, and feedback messages
  4. Agent reads your source files and makes changes
  5. Agent calls create_pr_for_thread to push a PR
  6. Agent calls mark_thread_addressed to resolve the thread

Ready to start reviewing on the real product?

Install the free Chrome Extension, connect your tools, and start shipping faster — in under a minute.

Install Extension — FreeOr sign in to the dashboard →

No seat fees. Every team member is free — designers, developers, PMs, stakeholders.