SuperAPI AI Directory
Partner with us中文AI newsFavorites
All toolsAI codingmcp-server

mcp-server

🎖️ 📇 🏠 ☁️ 🍎 🪟 🐧 - Pin visual feedback on live web pages with the Yocoolab extension and hand it to coding agents with the element, selector and screenshot attached.

Open website

About this tool

Purpose

@yocoolab/mcp-server is an MCP (Model Context Protocol) server that exposes Yocoolab's visual feedback threads and design selections as tools to Claude Code and other MCP-compatible clients. Its core goal is to enable AI coding assistants to directly access and process design feedback from the Yocoolab Chrome extension, thereby closing the loop on design feedback within the coding workflow.

Main Capabilities

After installation, AI coding assistants can perform the following operations:

  • List and categorize open design feedback threads in a repository
  • Pull rich context for a thread (selection, screenshots, conversation, involved files)
  • Reply to designers and mark threads as addressed
  • Create PRs that close feedback threads
  • Get element context and selection history from the Yocoolab Chrome extension
  • Read companion chat messages, AI conversations, and Pendo product analytics data

The tools exposed by the server fall into the following categories:

  • Threads: list_open_threads, get_thread_context, add_thread_message, mark_thread_addressed, create_pr_for_thread
  • Selection / Bridge: get_latest_selection, get_selection_history, get_element_context, find_source_for_selection, ai_analyze_page
  • Companion: get_companion_messages, reply_to_companion
  • AI: get_ai_conversations
  • Deployment: get_deployment_preview
  • Pendo (optional): pendo_list_guides, pendo_page_analytics, pendo_feature_usage, pendo_track_event

The full tool descriptions and parameters will be listed by the MCP client after the server starts.

Usage

The setup wizard automatically detects installed AI agents (Claude Code, Cursor, Cline, Roo Code, Windsurf) and writes the correct MCP configuration for each. After restarting the agent, the yocoolab server will appear in the tool list.

init is retained as an alias for setup for compatibility with v1.0.x installation instructions.

For manual configuration, the equivalent ~/.mcp.json content is as follows (the original text does not provide a complete example, only a description of the format).

Version pinning note: the @3 version pin stays on the v3 mainline, automatically receiving bug fixes and new features, and future breaking changes in v4 will not affect existing setups. v3.0.0 removed the activity monitor and no longer writes Claude Code hooks to ~/.claude/settings.json; for upgrades from v2, see CHANGELOG.md.

Environment requirements:

  • Node.js 20 or higher. CI tests on Node 20 and 22. Node.js versions currently in Active LTS or Maintenance LTS status are supported, and support is dropped within 30 days after EOL. Node 18 was dropped in v2.0.0 (EOL April 2025).
  • A Yocoolab account and JWT token—available from the Yocoolab Chrome extension settings or the app.yocoolab.com account.
  • To use the PR creation tool (create_pr_for_thread), a GitHub personal access token with repo permissions is required. If the GitHub CLI is installed and authenticated (gh auth login), the token will be detected automatically, and no GITHUB_TOKEN environment variable is needed. Otherwise, it can be created at github.com/settings/tokens/new?scopes=repo.

The mcp-server command is a synonym for yocoolab-mcp; either can be used.

For link-only projects (no GitHub App connection): open the PR using your own git/gh, then call mark_thread_addressed and pass in pr_url (along with pr_branch and preview_url if available). PR wordThe segment will land on the thread, and the preview link enters the review message; get_thread_context will print the project's repository link so you can confirm the repository it points to. create_pr_for_thread is reserved for owner/name workspaces that have GitHub connected.

Troubleshooting

  • yocoolab-mcp: command not found — confirm the version is v1.0.1 or higher. Run npx -y @yocoolab/mcp-server@latest setup to get the current version.
  • [yocoolab] Warning: YOCOOLAB_TOKEN not set — without a token, the thread feedback tools are disabled, but the bridge / companion / selection tools remain available. To enable all features, run yocoolab-mcp setup to regenerate the configuration and fill in the JWT.
  • Tools do not appear in the agent after installation — fully restart the agent (quit and reopen). The MCP server loads at startup.
  • Port 9800 is already in use — another MCP server instance is running, or another application has occupied that port. Set YOCOOLAB_BRIDGE_PORT to another value (such as 9801) in .mcp.json.
  • Verbose diagnostic logs — set DEBUG=yocoolab:* in the env block. All diagnostics are output to stderr (they will not interfere with the MCP stdio protocol on stdout).
  • PR creation prompts "GitHub token not configured" — the create_pr_for_thread tool requires a GitHub token. Two ways to fix it: Automatic detection (simplest): install the GitHub CLI and run gh auth login, and the server will automatically obtain the token. Manual: create a personal access token with repo permission, and add GITHUB_TOKEN: "ghp_..." to the env block of the MCP configuration. If the configuration contains a placeholder value such as <your GitHub PAT>, the server will detect it and display a prompt message instead of crashing with a 401.

When to use

Suitable for developers and teams who use the Yocoolab Chrome extension to collect web page visualfeedback and want to let AI coding assistants (such as Claude Code, Cursor, Cline, Roo Code, Windsurf) directly read and process this design feedback. Design feedback threads can be connected to code modification and PR creation workflows.

Limitations

  • Requires Node.js 20 or higher.
  • The thread feedback tools require a Yocoolab account and JWT token; without a token, some tools are unavailable.
  • The PR creation tool requires a GitHub token (repo permission), or an installed and authenticated GitHub CLI.
  • Pendo-related tools are optional features.
  • Documentation: this README plus the inline tool descriptions visible in the MCP client; for bug reports see github.com/Yocoolab/mcp-server/issues (use the bug template); for security issues see SECURITY.md, do not open a public issue; for other questions contact support@yocoolab.com; for the contribution process see CONTRIBUTING.md.

Security and supply chain

  • Released with npm provenance — every published version is cryptographically signed by GitHub Actions OIDC and can be traced back to the exact commit and workflow run.
  • Each release includes a CycloneDX SBOM in the GitHub Release.
  • CI runs npm audit signatures and CodeQL static analysis on every PR.
  • For vulnerability reports see SECURITY.md.

License: Apache 2.0 — © 2026 Yocoolab.

Related tools

Browse category