Browser Use
ให้ AI ทำงานบนเว็บแทนคุณ เช่น กรอกฟอร์ม ค้นหา และดึงข้อมูล ใช้เบราว์เซอร์บนคลาวด์ของผู้ทำหรือรันในเครื่องก็ได้
คำอธิบายจากผู้ทำ (ภาษาอังกฤษตามต้นฉบับ)
Pin visual feedback on any live web page and send it to Claude Code, Cursor or your AI agent.
สามเรื่องนี้ไม่รวมเป็นคะแนนเดียว เพราะความเห็น การวัด และความนิยม เป็นคนละเรื่องกัน
ตัวนี้ยังไม่ได้เรียบเรียงเป็นภาษาไทย ด้านล่างคือข้อเท็จจริงที่เราอ่านจาก registry
เลือกโปรแกรม AI ที่คุณใช้ แล้วคัดลอกค่าตั้งไปวาง
YOCOOLAB_TOKEN, YOCOOLAB_API_URL, GITHUB_TOKEN, YOCOOLAB_BRIDGE_WORKSPACEค่าที่ติดป้ายความลับคือกุญแจของบัญชีคุณ อย่าส่งให้ใคร และอย่าวางในแชต
ต้องเตรียมก่อน
คุณใช้แอปไหน
เลือกแอปด้านบน เราจำไว้ให้ ครั้งหน้าปุ่มจะขึ้นว่า “ติดตั้งลง …”
เปิด Claude Desktop → Settings → Developer → Edit Config แล้ววางค่านี้ในไฟล์ claude_desktop_config.json
{
"mcpServers": {
"yocoolab": {
"command": "npx",
"args": [
"-y",
"@yocoolab/mcp-server"
],
"env": {
"YOCOOLAB_TOKEN": "ใส่ค่าของคุณ",
"YOCOOLAB_API_URL": "ใส่ค่าของคุณ",
"GITHUB_TOKEN": "ใส่ค่าของคุณ",
"YOCOOLAB_BRIDGE_WORKSPACE": "ใส่ค่าของคุณ"
}
}
}
}พิมพ์คำสั่งนี้ใน Terminal
claude mcp add yocoolab --env YOCOOLAB_TOKEN='ใส่ค่าของคุณ' --env YOCOOLAB_API_URL='ใส่ค่าของคุณ' --env GITHUB_TOKEN='ใส่ค่าของคุณ' --env YOCOOLAB_BRIDGE_WORKSPACE='ใส่ค่าของคุณ' -- npx -y @yocoolab/mcp-serverเติมค่าที่เว้นว่างไว้ก่อนรัน
วางในไฟล์ .cursor/mcp.json ของโปรเจกต์ หรือ ~/.cursor/mcp.json
{
"mcpServers": {
"yocoolab": {
"command": "npx",
"args": [
"-y",
"@yocoolab/mcp-server"
],
"env": {
"YOCOOLAB_TOKEN": "ใส่ค่าของคุณ",
"YOCOOLAB_API_URL": "ใส่ค่าของคุณ",
"GITHUB_TOKEN": "ใส่ค่าของคุณ",
"YOCOOLAB_BRIDGE_WORKSPACE": "ใส่ค่าของคุณ"
}
}
}
}เบราว์เซอร์จะถามก่อนเปิดแอป จากนั้นแอปแสดงค่าตั้งให้ตรวจแล้วกดยืนยัน ช่อง key เว้นว่างไว้ให้คุณใส่เอง
วางในไฟล์ .vscode/mcp.json ของโปรเจกต์
{
"servers": {
"yocoolab": {
"type": "stdio",
"command": "npx",
"args": [
"-y",
"@yocoolab/mcp-server"
],
"env": {
"YOCOOLAB_TOKEN": "ใส่ค่าของคุณ",
"YOCOOLAB_API_URL": "ใส่ค่าของคุณ",
"GITHUB_TOKEN": "ใส่ค่าของคุณ",
"YOCOOLAB_BRIDGE_WORKSPACE": "ใส่ค่าของคุณ"
}
}
}
}เบราว์เซอร์จะถามก่อนเปิดแอป จากนั้นแอปแสดงค่าตั้งให้ตรวจแล้วกดยืนยัน ช่อง key เว้นว่างไว้ให้คุณใส่เอง
ตัวนี้รันในเครื่องคุณ แต่ ChatGPT ต่อได้เฉพาะ server บนอินเทอร์เน็ต ลองเลือกแอปอื่น
ตัวเลือกเก็บในคุกกี้บนเครื่องนี้ ไม่ต้องมีบัญชี
YOCOOLAB_API_URL envYOCOOLAB_BRIDGE_WORKSPACE envค่าตั้งนี้สร้างจากข้อมูลใน registry ของผู้ทำ ถ้าไม่ตรงกับ README ให้เชื่อ README
รันในเครื่องคุณ รายการเครื่องมือจะขึ้นในแอป AI หลังติดตั้ง
เราตรวจจากข้อมูลที่ใครก็เปิดดูได้ ยังไม่ได้อ่านโค้ด ข้อที่ไม่เกี่ยวกับตัวนี้ไม่นับในตัวหาร · ตรวจเมื่อ 7 พ.ย. 2569
ผู้ลงทะเบียน (Jonahbkerr) ไม่ใช่เจ้าของ repo (Yocoolab) อาจเป็นคนอื่นที่นำมาลงต่อ
ยังไม่ได้อ่านข้อมูล repo จาก GitHub
ยังไม่ได้อ่านข้อมูล repo จาก GitHub
ตัวนี้รันบนเครื่องคุณ ไม่มี endpoint บนอินเทอร์เน็ต
ตัวนี้รันบนเครื่อง ใช้ค่าที่ตั้งในเครื่องแทน
รันในเครื่องคุณ เราอ่านรายการเครื่องมือได้เฉพาะตัวที่มี endpoint บนอินเทอร์เน็ต
เทียบกับทุก server ที่ยังใช้งานในหมวดนี้ทั้งทะเบียน ดาวนับเฉพาะเมื่อผู้ลงทะเบียนเป็นเจ้าของ repo
จากการตรวจเบื้องต้นของเรา ผ่าน 0 จาก 1 ข้อที่ตรวจได้ เรายังไม่ได้อ่านโค้ด ก่อนใส่กุญแจหรือ token ให้ดูว่า server ขอสิทธิ์อะไร และเลือกกุญแจที่ทำได้เท่าที่จำเป็น
ต้องใส่ค่าเหล่านี้: YOCOOLAB_TOKEN, GITHUB_TOKEN
รันบนเครื่องของคุณ โปรแกรม AI จะเปิด server ขึ้นมาเองเมื่อใช้ ข้อมูลไม่ต้องผ่านเซิร์ฟเวอร์ของผู้ทำ (ยกเว้นตัวที่ไปเรียกบริการออนไลน์ต่อ)
repo บน GitHub มีการแก้โค้ดล่าสุด – และส่งรุ่นล่าสุด (3.0.0) เข้า registry 34 วันที่ผ่านมา
โปรแกรมที่รองรับ MCP เช่น Claude Desktop, Claude Code, Cursor และ VS Code ตัวนี้ต้องมี Node.js ในเครื่องด้วย
ในหมวดเดียวกันมี Browser Use, Chrome DevTools MCP, MCP Server Browser
server หมวดเดียวกันจากผู้ทำคนอื่น เรียงตามดาว
อ่านการ์ด:★ ดาว GitHubiสามเสา: รีวิว · ผลตรวจ · การใช้งานiอัปเดต = วันที่ส่งรุ่นล่าสุดเข้า registryi
ให้ AI ทำงานบนเว็บแทนคุณ เช่น กรอกฟอร์ม ค้นหา และดึงข้อมูล ใช้เบราว์เซอร์บนคลาวด์ของผู้ทำหรือรันในเครื่องก็ได้
ให้ AI ใช้เครื่องมือนักพัฒนาของ Chrome ตรวจหน้าเว็บ ดูว่าโหลดช้าตรงไหน และหาข้อผิดพลาด ทำโดยทีม Chrome DevTools
MCP server for browser use access
ส่วนนี้คัดจาก repo ของผู้ทำตามต้นฉบับ PopNx MCP ไม่ได้ตรวจหรือรับรองเนื้อหา ตัด HTML รูปภาพ และสคริปต์ออกแล้ว ลิงก์จะพาออกนอกเว็บ
MCP (Model Context Protocol) server that exposes Yocoolab feedback threads and design selections as tools for Claude Code and other MCP-compatible clients.
With this installed, your AI coding assistant can:
Most people no longer need this package. Yocoolab hosts the MCP server at `https://app.yocoolab.com/mcp`. Your agent signs in to Yocoolab in the browser the first time, so there is no token to paste:
claude mcp add --transport http --scope user yocoolab https://app.yocoolab.com/mcp
Then type /mcp in Claude Code, choose yocoolab, and Authenticate. Setup for Cursor, VS Code, the Claude app, and headless agents (agent token in a header) is at [app.yocoolab.com/connect](https://app.yocoolab.com/connect).
Always-on agent: to have one computer pick up every Send to Agent in your workspace by itself (it runs Claude Code), run this on that computer:
curl -fsSL https://app.yocoolab.com/agent/install.sh | sh
Switching from this package to the hosted server? Remove the old entry first (claude mcp remove yocoolab, repeat until none is found). Otherwise Claude may keep using the old one.
Use this package only if you need what runs on your own machine: the local bridge on :9800 for live selections from the Chrome extension.
One command:
npx -y @yocoolab/mcp-server@3 setup
The setup wizard auto-detects your installed AI agents (Claude Code, Cursor, Cline, Roo Code, Windsurf) and writes the correct MCP config for each. Restart your agent and the yocoolab server appears with all tools available.
initis kept as an alias forsetupfor backwards compatibility with v1.0.x install instructions.
If you'd rather configure manually, the equivalent ~/.mcp.json looks like:
{
"mcpServers": { "yocoolab": { "command": "npx", "args": ["-y", "@yocoolab/mcp-server@3"], "env": { "YOCOOLAB_API_URL": "https://app.yocoolab.com", "YOCOOLAB_TOKEN": " ", "GITHUB_TOKEN": " ", "YOCOOLAB_BRIDGE_PORT": "9800", "YOCOOLAB_BRIDGE_WORKSPACE": "/absolute/path/to/your/workspace" } } } }
The @3 version pin keeps you on the v3 major line — you'll receive bug fixes and new features automatically, but a future v4 with breaking changes won't break your setup. v3.0.0 removed the activity monitor and no longer writes Claude Code hooks into ~/.claude/settings.json; see CHANGELOG.md if you are upgrading from v2.
repo scope, if you want to use the PR-creation tools (create_pr_for_thread). The token is auto-detected if you have the GitHub CLI installed and authenticated (gh auth login). No GITHUB_TOKEN env var needed in that case. Otherwise, create one at github.com/settings/tokens/new?scopes=repo.| Env var | Required | Default | Description |
|---|---|---|---|
YOCOOLAB_TOKEN | no | — | Your Yocoolab JWT (from the Chrome extension). When unset, thread feedback tools are disabled but bridge / companion / selection tools still work. |
YOCOOLAB_API_URL | no | https://app.yocoolab.com | Yocoolab API base URL |
GITHUB_TOKEN | only for PR tools | — | GitHub PAT with repo scope. Auto-detected — if gh CLI is installed and authenticated (gh auth token), no env var is needed. Placeholder values like are detected and safely ignored. |
YOCOOLAB_BRIDGE_PORT | no | 9800 | Local port for the HTTP bridge to the Chrome extension |
YOCOOLAB_BRIDGE_WORKSPACE | no | process.cwd() | Absolute path to your project workspace, used to resolve file references in selections |
YOCOOLAB_AGENT_NAME | no | Claude Code | Display name shown in the Chrome extension's agent picker |
YOCOOLAB_PROJECT_PR_LINKS | no | 1 | Set to 0 to restore the pre-2.5 behaviour: mark_thread_addressed without PR/preview link fields, GitHub-only PR guidance in the prompt |
YOCOOLAB_AGENT_TYPE | no | claude-code | Agent type identifier (claude-code, roo, cline, cursor, windsurf, or custom) |
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
The mcp-server command is a synonym for yocoolab-mcp. Either works.
The server exposes tools across several categories:
list_open_threads, get_thread_context, add_thread_message, mark_thread_addressed, create_pr_for_threadgh, then call mark_thread_addressed with pr_url (and pr_branch, preview_url when you have them). The PR fields land on the thread and the preview link goes into the review message; get_thread_context prints the project's repo links so you know which repository it points at. create_pr_for_thread remains for GitHub-connected owner/name workspaces.get_latest_selection, get_selection_history, get_element_context, find_source_for_selection, ai_analyze_pageget_companion_messages, reply_to_companionget_ai_conversationsget_deployment_previewpendo_list_guides, pendo_page_analytics, pendo_feature_usage, pendo_track_eventFor full tool descriptions and parameters, your MCP client will list them after the server starts.
`yocoolab-mcp: command not found` — make sure you're on v1.0.1 or newer. Run npx -y @yocoolab/mcp-server@latest setup to get the current release.
`[yocoolab] Warning: YOCOOLAB_TOKEN not set` — thread feedback tools are disabled without a token, but bridge / companion / selection tools still work. To enable everything, run yocoolab-mcp setup to (re)generate the config with your JWT.
Tools don't appear in your agent after install — restart your agent completely (quit & reopen). MCP servers load at startup.
`Port 9800 is already in use` — another instance of the MCP server is running, or another app has the port. Set YOCOOLAB_BRIDGE_PORT to a different value (e.g. 9801) in your .mcp.json.
Verbose diagnostic logs — set DEBUG=yocoolab:* in your env block. All diagnostic output goes to stderr (so it doesn't interfere with the MCP stdio protocol on stdout).
PR creation says "GitHub token not configured" — the create_pr_for_thread tool needs a GitHub token. Two ways to fix:
gh auth login. The server picks up the token automatically.repo scope and add GITHUB_TOKEN: "ghp_..." to your MCP config's env block.If your config has a placeholder value like , the server detects it and shows a helpful message instead of crashing with a 401.
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
See CONTRIBUTING.md for the full contributor workflow.
npm audit signatures and CodeQL static analysis in CI on every PR.Apache 2.0 — © 2026 Yocoolab