AI Coding Agents

Connect Yocoolab to your AI coding agent over MCP. Pin a comment on any live page, click Send to Agent, and your agent gets the element, the screenshot and the discussion.

Send to Agent queues the thread for your connected agent and moves it to In Progress. The agent reads it with the tools below, makes the change in your repository, and moves the thread to In Review. A person resolves it; the agent never does. Send to Agent shows only while a connected agent is detected, and is available to workspace owners and admins, and to others an admin gives AI access.

Quick Start

  1. 1

    Install the browser extension

    Install it from the Chrome store (it is also available for Firefox and Edge), pin it, and sign in with Google, GitHub, or email and password. You'll need it 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.

    Without a token, the selection and companion tools still work; the thread tools need 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 with repo write permission. The GitHub token is optional: it is only used by create_pr_for_thread, for repositories connected through GitHub. Leave the placeholder in and that tool stays off; your agent can open the pull request itself.

Available Tools

Once connected, your agent has access to these tools:

list_open_threads

Show open feedback threads, optionally only the ones sent to an agent

get_thread_context

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

add_thread_message

Post a reply on a thread without changing its status

mark_thread_addressed

Move a thread to In Review with a note and, optionally, the PR and preview links. A person resolves it.

create_pr_for_thread

For repositories connected through GitHub, with a GitHub token: open a PR for a thread. Otherwise your agent opens the PR itself and records it with mark_thread_addressed.

get_deployment_preview

Check whether a preview deployment exists for a repo and branch

get_latest_selection

Get the element you just clicked in the browser

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

get_companion_messages / reply_to_companion

Read and answer messages from the AI Companion panel in the extension

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 used only by create_pr_for_thread, for GitHub-connected repositories
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 the change
  5. Agent opens a pull request in your repository
  6. Agent calls mark_thread_addressed with the PR link, which moves the thread to In Review
  7. A person reviews the change and resolves the thread

Ready to start reviewing on the real product?

Install the free extension for Chrome, Edge or Firefox and pin your first comment on a live page.

Install Extension — FreeOr sign in to the dashboard →

No seat fees in beta. Every team member included — designers, developers, PMs, stakeholders.