Yocoolab

Name: Yocoolab
Author: Yocoolab

認証済みおすすめローカル

yocoolab.com開発ツール21 週間前に更新

ドキュメントリポジトリ公式サイト

Yocoolab について

Yocoolabは、MCPツールを通じてデザインフィードバックやページ情報をコーディングエージェントに提供します。チームはスレッドを確認・返信し、選択箇所をソースファイルと結び付け、対応済みフィードバックのプルリクエストを作成できます。

主な機能

01フィードバックスレッドの一覧と整理
02スレッドや選択箇所の詳細取得
03デザイナーへの返信と対応済み設定
04フィードバック対応のプルリクエスト作成
05ページや要素のコンテキスト確認

活用シーン

01デザインコメントをコード修正に反映
02選択したUI要素のソースを特定
03実装状況を追跡してフィードバックを完了

MCP 対応

MCPサーバーは、Yocoolabのフィードバックスレッド、デザイン選択、コンパニオンメッセージ、AI会話、デプロイプレビュー、任意のPendo分析をツールとして公開します。ホスト型エンドポイントがあり、ローカルパッケージはChrome拡張機能の選択箇所を取得するブリッジに対応します。

設定

ローカルサーバーの設定はどのクライアントでも共通です。コピーしてクライアントの MCP 設定ファイルに貼り付けてください。

mcp.json · 共通設定

{
  "mcpServers": {
    "yocoolab": {
      "command": "npx",
      "args": [
        "-y",
        "@yocoolab/mcp-server"
      ],
      "env": {
        "YOCOOLAB_TOKEN": "<YOCOOLAB_TOKEN>",
        "YOCOOLAB_API_URL": "<YOCOOLAB_API_URL>",
        "GITHUB_TOKEN": "<GITHUB_TOKEN>",
        "YOCOOLAB_BRIDGE_WORKSPACE": "<YOCOOLAB_BRIDGE_WORKSPACE>"
      }
    }
  }
}

起動コマンドnpx -y @yocoolab/mcp-server

設定が必要な環境変数

YOCOOLAB_TOKENシークレットYour Yocoolab JWT, from the Chrome extension settings or app.yocoolab.com. When unset, thread feedback tools are disabled but bridge, companion and selection tools still work.

YOCOOLAB_API_URLYocoolab API base URL. Defaults to https://app.yocoolab.com.

GITHUB_TOKENシークレットGitHub PAT with repo scope, needed only for the PR-creation tools. Auto-detected from the gh CLI when authenticated.

YOCOOLAB_BRIDGE_WORKSPACEAbsolute path to your project workspace, used to resolve file references in selections. Defaults to the current working directory.

ローカルサーバーにはマシン上の実行環境（Node.js 18 以上など）が必要です。設定ファイルの場所はクライアントごとに異なります。

パッケージ

npm@yocoolab/mcp-server3.0.0stdio

ツール

掲載時のツール一覧 · 2 週間前に更新

このツールにパラメーターはありません。

詳細

@yocoolab/mcp-server

Yocoolab のフィードバックスレッドやデザイン上の選択箇所を、Claude Code やその他の MCP 対応クライアント向けのツールとして提供する MCP（Model Context Protocol）サーバーです。

インストールすると、AI コーディングアシスタントで次のことができます。

リポジトリの未解決なデザインフィードバックスレッドを一覧表示し、優先度を判断する
スレッドの詳細なコンテキスト（選択箇所、スクリーンショット、会話、変更されたファイル）を取得する
デザイナーに返信し、スレッドを対応済みとしてマークする
フィードバックスレッドを解決する PR を作成する
Yocoolab Chrome 拡張機能から要素のコンテキストと選択履歴を確認する
関連するチャットメッセージ、AI との会話、Pendo のプロダクト分析を読み取る

おすすめ：ホスト版 Yocoolab MCP（インストール不要）

ほとんどの方にとって、このパッケージはもう必要ありません。Yocoolab は https://app.yocoolab.com/mcp で MCP サーバーをホストしています。エージェントは初回にブラウザーで Yocoolab にサインインするため、トークンを貼り付ける必要はありません。

claude mcp add --transport http --scope user yocoolab https://app.yocoolab.com/mcp

次に、Claude Code で /mcp と入力し、yocoolab を選んで「Authenticate」を選択してください。Cursor、VS Code、Claude アプリ、ヘッドレスエージェント（ヘッダーにエージェントトークンを指定）のセットアップ方法は app.yocoolab.com/connect をご覧ください。

常時稼働エージェント： ワークスペース内の「Send to Agent」をすべて1台のコンピューターで自動的に処理するには（Claude Code を実行します）、そのコンピューターで次のコマンドを実行してください。

curl -fsSL https://app.yocoolab.com/agent/install.sh | sh

このパッケージからホスト版サーバーに切り替えますか？最初に古いエントリーを削除してください（claude mcp remove yocoolab を、見つからなくなるまで繰り返します）。削除しないと、Claude が引き続き古いサーバーを使用する場合があります。

自分のコンピューター上で実行する機能、つまり Chrome 拡張機能からのライブ選択箇所に対応する :9800 のローカルブリッジが必要な場合に限り、このパッケージを使用してください。

インストール（ローカルパッケージ）

コマンド1つでインストールできます。

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

setup ウィザードはインストール済みの AI エージェント（Claude Code、Cursor、Cline、Roo Code、Windsurf）を自動検出し、それぞれに適した MCP 設定を書き込みます。エージェントを再起動すると、すべてのツールを利用できる yocoolab サーバーが表示されます。

v1.0.x のインストール手順との後方互換性のため、init は setup のエイリアスとして残されています。

手動で設定する場合、同等の ~/.mcp.json は次のようになります。

{
  "mcpServers": {
    "yocoolab": {
      "command": "npx",
      "args": ["-y", "@yocoolab/mcp-server@3"],
      "env": {
        "YOCOOLAB_API_URL": "https://app.yocoolab.com",
        "YOCOOLAB_TOKEN": "<your-yocoolab-jwt>",
        "GITHUB_TOKEN": "<your-github-pat>",
        "YOCOOLAB_BRIDGE_PORT": "9800",
        "YOCOOLAB_BRIDGE_WORKSPACE": "/absolute/path/to/your/workspace"
      }
    }
  }
}

@3 のバージョン固定により、v3 メジャー系列を使い続けられます。バグ修正や新機能は自動的に受け取れますが、将来、互換性を破る変更を含む v4 がリリースされてもセットアップに影響しません。v3.0.0 ではアクティビティモニターが削除され、Claude Code のフックが ~/.claude/settings.json に書き込まれなくなりました。v2 からアップグレードする場合は、CHANGELOG.md をご覧ください。

要件

Node.js 20 以降。 CI では Node 20 と 22 でテストしています。Active LTS または Maintenance LTS のステータスにある Node.js バージョンをサポートし、EOL の 30 日以内にサポートを終了します。Node 18 は v2.0.0 でサポート対象外になりました（EOL は 2025 年 4 月）。
Yocoolab アカウントと JWT トークン — Yocoolab Chrome 拡張機能の設定、またはアカウントの app.yocoolab.com から取得してください。
PR 作成ツール（create_pr_for_thread）を使用する場合は、repo スコープを持つ GitHub 個人アクセストークン が必要です。GitHub CLI をインストールして認証済み（gh auth login）であれば、トークンは自動検出されます。その場合、GITHUB_TOKEN 環境変数は不要です。それ以外の場合は、github.com/settings/tokens/new?scopes=repo でトークンを作成してください。

設定

環境変数	必須	デフォルト	説明
`YOCOOLAB_TOKEN`	いいえ	—	Yocoolab JWT（Chrome 拡張機能から取得）。未設定の場合、スレッドフィードバックツールは無効になりますが、ブリッジ／コンパニオン／選択ツールは引き続き動作します。
`YOCOOLAB_API_URL`	いいえ	`https://app.yocoolab.com`	Yocoolab API のベース URL
`GITHUB_TOKEN`	PR ツールでのみ必要	—	`repo` スコープを持つ GitHub PAT。自動検出されます — `gh` CLI がインストールされ、認証済み（`gh auth token`）であれば、環境変数は不要です。`<your GitHub PAT>` のようなプレースホルダー値は検出され、安全に無視されます。
`YOCOOLAB_BRIDGE_PORT`	いいえ	`9800`	Chrome 拡張機能への HTTP ブリッジ用ローカルポート
`YOCOOLAB_BRIDGE_WORKSPACE`	いいえ	`process.cwd()`	選択範囲内のファイル参照を解決するために使用する、プロジェクトワークスペースの絶対パス
`YOCOOLAB_AGENT_NAME`	いいえ	`Claude Code`	Chrome 拡張機能のエージェント選択画面に表示される名前
`YOCOOLAB_PROJECT_PR_LINKS`	いいえ	`1`	`0` に設定すると、v2.5 より前の動作に戻ります。PR／プレビューのリンクフィールドを含まない `mark_thread_addressed` と、プロンプト内の GitHub のみを対象とした PR ガイダンスが適用されます
`YOCOOLAB_AGENT_TYPE`	いいえ	`claude-code`	エージェントの種類を示す識別子（`claude-code`、`roo`、`cline`、`cursor`、`windsurf`、または `custom`）

CLI

yocoolab-mcp           Run the MCP server (used by your agent via .mcp.json)
yocoolab-mcp setup     Interactive setup — auto-detects agents and writes their configs
yocoolab-mcp init      Alias for `setup` (backwards compatible with v1.0.x)
yocoolab-mcp --help    Show this help

mcp-server コマンドは yocoolab-mcp の別名です。どちらも使用できます。

ツール

サーバーは複数のカテゴリにわたるツールを公開します。

スレッド — list_open_threads、get_thread_context、add_thread_message、mark_thread_addressed、create_pr_for_thread
- GitHub App が接続されていないリンクのみのプロジェクトでは、自分で git／gh を使って PR を開き、mark_thread_addressed を pr_url（利用できる場合は pr_branch、preview_url も）とともに呼び出してください。PR フィールドはスレッドに反映され、プレビューリンクはレビューのメッセージに追加されます。get_thread_context はプロジェクトのリポジトリリンクを表示するため、参照先のリポジトリを確認できます。create_pr_for_thread は、GitHub に接続された owner/name ワークスペース向けに引き続き使用できます。
選択範囲／ブリッジ — get_latest_selection、get_selection_history、get_element_context、find_source_for_selection、ai_analyze_page
コンパニオン — get_companion_messages、reply_to_companion
AI — get_ai_conversations
デプロイ — get_deployment_preview
Pendo（任意） — pendo_list_guides、pendo_page_analytics、pendo_feature_usage、pendo_track_event

各ツールの詳しい説明とパラメーターは、サーバーの起動後に MCP クライアントから確認できます。

トラブルシューティング

yocoolab-mcp: command not found — v1.0.1 以降を使用していることを確認してください。現在のリリースを取得するには、npx -y @yocoolab/mcp-server@latest setup を実行してください。

[yocoolab] Warning: YOCOOLAB_TOKEN not set — トークンが設定されていない場合、スレッドへのフィードバックツールは無効になりますが、ブリッジ／コンパニオン／選択ツールは引き続き動作します。すべての機能を有効にするには、yocoolab-mcp setup を実行して、JWT を使って設定を（再）生成してください。

インストール後、エージェントにツールが表示されない — エージェントを完全に再起動してください（終了してから再度開きます）。MCP サーバーは起動時に読み込まれます。

Port 9800 is already in use — MCP サーバーの別のインスタンスが実行中か、別のアプリがそのポートを使用しています。.mcp.json で YOCOOLAB_BRIDGE_PORT に別の値（例：9801）を設定してください。

詳細な診断ログ — 環境変数ブロックで DEBUG=yocoolab:* を設定してください。診断出力はすべて stderr に出力されるため、stdout 上の MCP stdio プロトコルに干渉しません。

PR の作成時に「GitHub token not configured」と表示される — create_pr_for_thread ツールには GitHub トークンが必要です。解決方法は 2 つあります。

自動検出（最も簡単）： GitHub CLI をインストールして、gh auth login を実行します。サーバーがトークンを自動的に取得します。
手動： repo スコープを持つ個人アクセストークンを作成し、MCP 設定の env ブロックに GITHUB_TOKEN: "ghp_..." を追加します。設定に <your GitHub PAT> のようなプレースホルダー値がある場合、サーバーはそれを検出し、401 エラーでクラッシュする代わりに役立つメッセージを表示します。

サポート

ドキュメント： この README と、MCP クライアントで確認できるツールのインライン説明
バグ報告： github.com/Yocoolab/mcp-server/issues（バグ報告用テンプレートを使用してください）
セキュリティ問題： SECURITY.md を参照してください。公開の Issue は作成しないでください。
その他の質問： [email protected]

開発

git clone https://github.com/Yocoolab/mcp-server.git
cd mcp-server
npm install
npm run build       # compile TypeScript to dist/
npm test            # run the vitest suite
npm run dev         # tsc --watch

コントリビューター向けワークフローの全容については、CONTRIBUTING.md を参照してください。

セキュリティとサプライチェーン

npm provenance を使用してリリースされています。公開された各バージョンには GitHub Actions OIDC による暗号署名が付与され、正確なコミットとワークフローの実行まで追跡できます。
各リリースには、GitHub Release に添付された CycloneDX SBOM が含まれています。
すべての PR で、CI において npm audit signatures と CodeQL による静的解析を実行しています。
脆弱性の報告については、SECURITY.md を参照してください。

ライセンス

Markdown 対応

ログインしてコメント

MCP は初めてですか？

プロトコルの概要から最初のサーバーの導入まで、よくある疑問にまとめて答えます。

入門ガイドを読む

AI アプリケーションが外部のツールやデータソースに統一的な方法で接続するためのオープンなプロトコルです。クライアントはモデルとの対話を担い、MCP サーバーはツール・リソース・プロンプトテンプレートを提供します。標準メッセージでやり取りするため、1 つのサーバーを複数のクライアントで再利用できます。

Yocoolab

Yocoolab について

主な機能

活用シーン

MCP 対応

設定

ツール

詳細

@yocoolab/mcp-server

おすすめ：ホスト版 Yocoolab MCP（インストール不要）

インストール（ローカルパッケージ）

要件

設定

CLI

ツール

トラブルシューティング

サポート

開発

セキュリティとサプライチェーン

ライセンス

コメント

MCP は初めてですか？

MCP（Model Context Protocol）とは？

MCP サーバーとクライアントの違いは？

ローカルとリモート、どちらを選ぶべき？

Claude や Cursor にサーバーを導入するには？

掲載プロジェクトは審査されていますか？「認証済み」とは？

自分のプロジェクトが掲載されています。どう申請できますか？