ต้นแบบ · รุ่นทดลอง: มีทุก server ในทะเบียนทางการ อัปเดตทุก 30 นาที รีวิวและบัญชีผู้ใช้จะมาในขั้นถัดไป
PopNx MCPที่รวม MCP สำหรับคนใช้ AI · อธิบายเป็นภาษาคน

MCP Cdp

โดย dockndevaiรุ่น 0.2.3i★ –iรันบนเครื่อง
ชื่อใน registryio.github.dockndevai/mcp-cdp

ติดตั้ง

ภาพรวม

คำอธิบายจากผู้ทำ (ภาษาอังกฤษตามต้นฉบับ)

Safe-by-default MCP that drives an Electron/Chrome app over CDP: DOM, console, network, input.

สามเสาของ PopNx MCP

สามเรื่องนี้ไม่รวมเป็นคะแนนเดียว เพราะความเห็น การวัด และความนิยม เป็นคนละเรื่องกัน

ใช้ทำอะไรได้

ตัวนี้ยังไม่ได้เรียบเรียงเป็นภาษาไทย ด้านล่างคือข้อเท็จจริงที่เราอ่านจาก registry

  • การเชื่อมต่อ: รันบนเครื่อง
  • ช่องทาง (transport): stdio
  • หมวด: เว็บและเบราว์เซอร์

ติดตั้ง

เลือกโปรแกรม AI ที่คุณใช้ แล้วคัดลอกค่าตั้งไปวาง

ก่อนติดตั้ง

ต้องเตรียมก่อน

  • npmติดตั้ง Node.js (มีคำสั่ง npx) ในเครื่อง

คุณใช้แอปไหน

เลือกแอปด้านบน เราจำไว้ให้ ครั้งหน้าปุ่มจะขึ้นว่า “ติดตั้งลง …”

เปิด Claude Desktop → Settings → Developer → Edit Config แล้ววางค่านี้ในไฟล์ claude_desktop_config.json

{
  "mcpServers": {
    "cdp": {
      "command": "npx",
      "args": [
        "-y",
        "@dockndevai/mcp-cdp"
      ],
      "env": {
        "CDP_PORT": "ใส่ค่าของคุณ",
        "CDP_HOST": "ใส่ค่าของคุณ",
        "CDP_MODE": "ใส่ค่าของคุณ",
        "CDP_ALLOW_EVAL": "ใส่ค่าของคุณ",
        "CDP_TARGET_ALLOWLIST": "ใส่ค่าของคุณ",
        "CDP_DRY_RUN": "ใส่ค่าของคุณ"
      }
    }
  }
}

พิมพ์คำสั่งนี้ใน Terminal

claude mcp add cdp --env CDP_PORT='ใส่ค่าของคุณ' --env CDP_HOST='ใส่ค่าของคุณ' --env CDP_MODE='ใส่ค่าของคุณ' --env CDP_ALLOW_EVAL='ใส่ค่าของคุณ' --env CDP_TARGET_ALLOWLIST='ใส่ค่าของคุณ' --env CDP_DRY_RUN='ใส่ค่าของคุณ' -- npx -y @dockndevai/mcp-cdp

เติมค่าที่เว้นว่างไว้ก่อนรัน

เปิดใน Cursor

หรือคัดลอกค่าตั้งเอง

วางในไฟล์ .cursor/mcp.json ของโปรเจกต์ หรือ ~/.cursor/mcp.json

{
  "mcpServers": {
    "cdp": {
      "command": "npx",
      "args": [
        "-y",
        "@dockndevai/mcp-cdp"
      ],
      "env": {
        "CDP_PORT": "ใส่ค่าของคุณ",
        "CDP_HOST": "ใส่ค่าของคุณ",
        "CDP_MODE": "ใส่ค่าของคุณ",
        "CDP_ALLOW_EVAL": "ใส่ค่าของคุณ",
        "CDP_TARGET_ALLOWLIST": "ใส่ค่าของคุณ",
        "CDP_DRY_RUN": "ใส่ค่าของคุณ"
      }
    }
  }
}

เบราว์เซอร์จะถามก่อนเปิดแอป จากนั้นแอปแสดงค่าตั้งให้ตรวจแล้วกดยืนยัน ช่อง key เว้นว่างไว้ให้คุณใส่เอง

เปิดใน VS Code

หรือคัดลอกค่าตั้งเอง

วางในไฟล์ .vscode/mcp.json ของโปรเจกต์

{
  "servers": {
    "cdp": {
      "type": "stdio",
      "command": "npx",
      "args": [
        "-y",
        "@dockndevai/mcp-cdp"
      ],
      "env": {
        "CDP_PORT": "ใส่ค่าของคุณ",
        "CDP_HOST": "ใส่ค่าของคุณ",
        "CDP_MODE": "ใส่ค่าของคุณ",
        "CDP_ALLOW_EVAL": "ใส่ค่าของคุณ",
        "CDP_TARGET_ALLOWLIST": "ใส่ค่าของคุณ",
        "CDP_DRY_RUN": "ใส่ค่าของคุณ"
      }
    }
  }
}

เบราว์เซอร์จะถามก่อนเปิดแอป จากนั้นแอปแสดงค่าตั้งให้ตรวจแล้วกดยืนยัน ช่อง key เว้นว่างไว้ให้คุณใส่เอง

ตัวนี้รันในเครื่องคุณ แต่ ChatGPT ต่อได้เฉพาะ server บนอินเทอร์เน็ต ลองเลือกแอปอื่น

ตัวเลือกเก็บในคุกกี้บนเครื่องนี้ ไม่ต้องมีบัญชี

ค่าที่ต้องใส่เอง

  • CDP_PORT env
    The --remote-debugging-port your app/browser exposes (default 9222).
  • CDP_HOST env
    Host serving the DevTools endpoint (default 127.0.0.1; non-loopback needs CDP_ALLOW_REMOTE).
  • CDP_MODE env
    Access mode: read-only | read-write | admin. Starts read-only; interactions need read-write.
  • CDP_ALLOW_EVAL env
    Set true to allow the evaluate tool (arbitrary JS) — admin mode only. Default false.
  • CDP_TARGET_ALLOWLIST env
    Comma-separated URL patterns; interactions are confined to matching targets. Empty = all.
  • CDP_DRY_RUN env
    Set true to log interactions without dispatching them to the browser.

ค่าตั้งนี้สร้างจากข้อมูลใน registry ของผู้ทำ ถ้าไม่ตรงกับ README ให้เชื่อ README

ทำอะไรได้บ้าง

รันในเครื่องคุณ รายการเครื่องมือจะขึ้นในแอป AI หลังติดตั้ง

ผลตรวจเบื้องต้นi

เราตรวจจากข้อมูลที่ใครก็เปิดดูได้ ยังไม่ได้อ่านโค้ด ข้อที่ไม่เกี่ยวกับตัวนี้ไม่นับในตัวหาร · ตรวจเมื่อ 7 พ.ย. 2569

  • ✓ ผ่าน

    ตัวตนผู้ทำตรงกับ repo

    ชื่อใน registry ยืนยันด้วยบัญชี GitHub dockndevai ซึ่งเป็นเจ้าของ repo

  • … ยังไม่ตรวจ

    ยังมีคนดูแล

    ยังไม่ได้อ่านข้อมูล repo จาก GitHub

  • … ยังไม่ตรวจ

    มีสัญญาอนุญาต (license)

    ยังไม่ได้อ่านข้อมูล repo จาก GitHub

  • – ไม่เกี่ยว

    endpoint ตอบ

    ตัวนี้รันบนเครื่องคุณ ไม่มี endpoint บนอินเทอร์เน็ต

  • – ไม่เกี่ยว

    ล็อกอินแบบ OAuth

    ตัวนี้รันบนเครื่อง ใช้ค่าที่ตั้งในเครื่องแทน

  • … ยังไม่ตรวจ

    คำอธิบายเครื่องมือไม่มีคำสั่งแอบแฝง

    รันในเครื่องคุณ เราอ่านรายการเครื่องมือได้เฉพาะตัวที่มี endpoint บนอินเทอร์เน็ต

เทียบกับตัวอื่นในหมวด เว็บและเบราว์เซอร์i

  • ดาวมากกว่า 0% ของอีก 878 ตัวในหมวดนี้
  • ส่งรุ่นใหม่เข้า registry ล่าสุดกว่า 73% ของอีก 878 ตัวในหมวดนี้
  • ผลตรวจเบื้องต้นดีกว่าหรือเท่ากับ 100% ของอีก 878 ตัวในหมวดนี้

เทียบกับทุก server ที่ยังใช้งานในหมวดนี้ทั้งทะเบียน ดาวนับเฉพาะเมื่อผู้ลงทะเบียนเป็นเจ้าของ repo

คำถามที่พบบ่อย

MCP Cdp ปลอดภัยไหม?

จากการตรวจเบื้องต้นของเรา ผ่าน 1 จาก 1 ข้อที่ตรวจได้ เรายังไม่ได้อ่านโค้ด ก่อนใส่กุญแจหรือ token ให้ดูว่า server ขอสิทธิ์อะไร และเลือกกุญแจที่ทำได้เท่าที่จำเป็น

ต้องใช้กุญแจหรือรหัสอะไรบ้าง?

registry ไม่ได้ระบุว่าต้องใช้กุญแจ แต่บางตัวจะขอให้ล็อกอินตอนใช้ครั้งแรก

ตัวนี้รันบนเครื่องหรือบนคลาวด์?

รันบนเครื่องของคุณ โปรแกรม AI จะเปิด server ขึ้นมาเองเมื่อใช้ ข้อมูลไม่ต้องผ่านเซิร์ฟเวอร์ของผู้ทำ (ยกเว้นตัวที่ไปเรียกบริการออนไลน์ต่อ)

ยังมีคนดูแลอยู่ไหม?

repo บน GitHub มีการแก้โค้ดล่าสุด – และส่งรุ่นล่าสุด (0.2.3) เข้า registry 12 วันที่ผ่านมา

ใช้กับโปรแกรมไหนได้บ้าง?

โปรแกรมที่รองรับ MCP เช่น Claude Desktop, Claude Code, Cursor และ VS Code ตัวนี้ต้องมี Node.js ในเครื่องด้วย

มีตัวไหนใช้แทนได้บ้าง?

ในหมวดเดียวกันมี Browser Use, Chrome DevTools MCP, MCP Server Browser

ตัวที่ใช้แทนได้

server หมวดเดียวกันจากผู้ทำคนอื่น เรียงตามดาว

อ่านการ์ด:★ ดาว GitHubiสามเสา: รีวิว · ผลตรวจ · การใช้งานiอัปเดต = วันที่ส่งรุ่นล่าสุดเข้า registryi

Browser Use

โดย browser-use

ให้ AI ทำงานบนเว็บแทนคุณ เช่น กรอกฟอร์ม ค้นหา และดึงข้อมูล ใช้เบราว์เซอร์บนคลาวด์ของผู้ทำหรือรันในเครื่องก็ได้

บนเครื่องหรือคลาวด์★ 120,087MITอัปเดต 17 วันที่ผ่านมา
ติดตั้ง

Chrome DevTools MCP

โดย ChromeDevTools

ให้ AI ใช้เครื่องมือนักพัฒนาของ Chrome ตรวจหน้าเว็บ ดูว่าโหลดช้าตรงไหน และหาข้อผิดพลาด ทำโดยทีม Chrome DevTools

รันบนเครื่อง★ 54,821Apache-2.0อัปเดต 15 วันที่ผ่านมา
ติดตั้ง

MCP Server Browser

โดย bytedance

MCP server for browser use access

รันบนเครื่อง★ 39,550Apache-2.0อัปเดต 14 เดือนที่ผ่านมา
ติดตั้ง

README จากผู้ทำ

เปิดอ่าน README

ส่วนนี้คัดจาก repo ของผู้ทำตามต้นฉบับ PopNx MCP ไม่ได้ตรวจหรือรับรองเนื้อหา ตัด HTML รูปภาพ และสคริปต์ออกแล้ว ลิงก์จะพาออกนอกเว็บ

mcp-cdp

A safe-by-default Model Context Protocol server that drives an Electron or Chrome/Chromium app over the Chrome DevTools Protocol (CDP) — instead of pixel-level GUI automation. Point it at the app's --remote-debugging-port and an agent gets the DOM, console, network requests, real input (click / type / navigate), and — gated — JavaScript evaluation.

Why this beats computer-use for a desktop/web app:

  • The DOM, not a screenshot. The agent reads exact rendered HTML and can query any element — far more information, and it sees things that aren't on screen.
  • Console + network. When a test fails, the uncaught exception or the failed request is right there — no guessing from an image.
  • No collisions. Each agent attaches to its own debugging port, so parallel agents (e.g. one per git worktree) never fight over one desktop.
  • Cross-OS. CDP works identically on macOS, Linux and Windows — the same flow runs on a headless VPS.

Part of the dockndevai MCP server suite — one governance model across all of them.

What it gives an agent

Starts read-only (see Safe by default); higher-capability tools are only registered when you raise the mode.

ToolForNeeds mode
list_targetslist pages / webviews / Electron windows (id, type, title, url)read-only
dom_snapshotrendered HTML of the page or a selector's subtreeread-only
query_domouter HTML of every element matching a CSS selectorread-only
console_logsrecent console output + uncaught exceptionsread-only
network_requestsrecent requests (method, url, status, mime; headers never captured)read-only
screenshota PNG of the viewportread-only
clickclick the first element matching a selectorread-write
type_texttype into the page (focus a selector first)read-write
press_keyEnter / Tab / Escape / Backspace / Delete / Arrowsread-write
navigatenavigate a target to a URL (confirmed)read-write
evaluaterun a JavaScript expression in the pageadmin + CDP_ALLOW_EVAL

Install

npx -y @dockndevai/mcp-cdp

Expose a debugging port

Start your app (or a worktree's dev build) with an explicit port — one per agent:

  • Electron app: your-app --remote-debugging-port=9222, or in main-process code app.commandLine.appendSwitch('remote-debugging-port', '9222') before app.whenReady().
  • Plain Chrome/Chromium: chrome --headless=new --remote-debugging-port=9222 --user-data-dir=/tmp/p1 .

Check it's up: curl http://127.0.0.1:9222/json/version.

Configure

{

"mcpServers": { "cdp": { "command": "npx", "args": ["-y", "@dockndevai/mcp-cdp"], "env": { "CDP_PORT": "9222", "CDP_MODE": "read-only" } } } }

See docs/CLIENTS.md for Claude Code / Cursor / Codex / VS Code / Windsurf, and .env.example for every variable.

Safe by default

Enforced by src/security.ts. The browser process is the real boundary — this keeps an agent inside the targets and actions you intend:

  • `CDP_MODE` — read-only (default) → read-write → admin. Tools above the mode aren't registered, so in read-only the agent cannot click, type or navigate at all.
  • `CDP_TARGET_ALLOWLIST` — confine interactions to targets whose URL matches your patterns (empty = all). Reads (inspection) are always allowed.
  • `CDP_PROTECTED_TARGETS` — targets that can be inspected but never interacted with. Defaults protect sign-in pages (accounts.google.com, login.microsoftonline.com, …) and browser internals (chrome://, devtools://, extensions).
  • `CDP_ALLOW_EVAL` — evaluate is arbitrary code execution in the renderer: admin mode plus this flag, refused on protected targets, with a human confirmation.
  • `CDP_DRY_RUN` — interactions log their intent and return without dispatching.
  • Secrets — request/response headers are never captured (cookies/auth), and sensitive URL query values are redacted. evaluate and navigate also prompt a human via MCP elicitation.
  • Loopback only — the endpoint must be 127.0.0.1 unless CDP_ALLOW_REMOTE=true.

Optional AI risk guard. Set CDP_GUARD_MODE=monitor|enforce to have the evaluate tool consult a local laya-guard daemon (pipx install laya-guard && laya-guard) that classifies the JS expression allow/confirm/block before it runs. It runs *after* the eval gate and can only tighten, never grant; fails closed.

There is a bundled skill, cdp-safe-operations, that teaches an agent how to expose a port, read the DOM/console/network instead of screenshots, the safety rules, and the "why did this fail?" workflow. See also SECURITY.md.

Developing

npm install

npm run build

list the tools:

echo '{"jsonrpc":"2.0","id":1,"method":"tools/list","params":{}}' | CDP_PORT=9222 node dist/index.js npm test

Licence

MIT

ถาม PopNx