Browser Use
ให้ AI ทำงานบนเว็บแทนคุณ เช่น กรอกฟอร์ม ค้นหา และดึงข้อมูล ใช้เบราว์เซอร์บนคลาวด์ของผู้ทำหรือรันในเครื่องก็ได้
คำอธิบายจากผู้ทำ (ภาษาอังกฤษตามต้นฉบับ)
MCP server + Chrome extension for AI browser control with real sessions.
สามเรื่องนี้ไม่รวมเป็นคะแนนเดียว เพราะความเห็น การวัด และความนิยม เป็นคนละเรื่องกัน
ตัวนี้ยังไม่ได้เรียบเรียงเป็นภาษาไทย ด้านล่างคือข้อเท็จจริงที่เราอ่านจาก registry
เลือกโปรแกรม AI ที่คุณใช้ แล้วคัดลอกค่าตั้งไปวาง
ต้องเตรียมก่อน
คุณใช้แอปไหน
เลือกแอปด้านบน เราจำไว้ให้ ครั้งหน้าปุ่มจะขึ้นว่า “ติดตั้งลง …”
เปิด Claude Desktop → Settings → Developer → Edit Config แล้ววางค่านี้ในไฟล์ claude_desktop_config.json
{
"mcpServers": {
"real-browser": {
"command": "npx",
"args": [
"-y",
"real-browser-mcp"
]
}
}
}พิมพ์คำสั่งนี้ใน Terminal
claude mcp add real-browser -- npx -y real-browser-mcpวางในไฟล์ .cursor/mcp.json ของโปรเจกต์ หรือ ~/.cursor/mcp.json
{
"mcpServers": {
"real-browser": {
"command": "npx",
"args": [
"-y",
"real-browser-mcp"
]
}
}
}เบราว์เซอร์จะถามก่อนเปิดแอป จากนั้นแอปแสดงค่าตั้งให้ตรวจแล้วกดยืนยัน ช่อง key เว้นว่างไว้ให้คุณใส่เอง
วางในไฟล์ .vscode/mcp.json ของโปรเจกต์
{
"servers": {
"real-browser": {
"type": "stdio",
"command": "npx",
"args": [
"-y",
"real-browser-mcp"
]
}
}
}เบราว์เซอร์จะถามก่อนเปิดแอป จากนั้นแอปแสดงค่าตั้งให้ตรวจแล้วกดยืนยัน ช่อง key เว้นว่างไว้ให้คุณใส่เอง
ตัวนี้รันในเครื่องคุณ แต่ ChatGPT ต่อได้เฉพาะ server บนอินเทอร์เน็ต ลองเลือกแอปอื่น
ตัวเลือกเก็บในคุกกี้บนเครื่องนี้ ไม่ต้องมีบัญชี
ค่าตั้งนี้สร้างจากข้อมูลใน registry ของผู้ทำ ถ้าไม่ตรงกับ README ให้เชื่อ README
รันในเครื่องคุณ รายการเครื่องมือจะขึ้นในแอป AI หลังติดตั้ง
เราตรวจจากข้อมูลที่ใครก็เปิดดูได้ ยังไม่ได้อ่านโค้ด ข้อที่ไม่เกี่ยวกับตัวนี้ไม่นับในตัวหาร · ตรวจเมื่อ 7 พ.ย. 2569
ชื่อใน registry ยืนยันด้วยบัญชี GitHub ofershap ซึ่งเป็นเจ้าของ repo
ยังไม่ได้อ่านข้อมูล repo จาก GitHub
ยังไม่ได้อ่านข้อมูล repo จาก GitHub
ตัวนี้รันบนเครื่องคุณ ไม่มี endpoint บนอินเทอร์เน็ต
ตัวนี้รันบนเครื่อง ใช้ค่าที่ตั้งในเครื่องแทน
รันในเครื่องคุณ เราอ่านรายการเครื่องมือได้เฉพาะตัวที่มี endpoint บนอินเทอร์เน็ต
เทียบกับทุก server ที่ยังใช้งานในหมวดนี้ทั้งทะเบียน ดาวนับเฉพาะเมื่อผู้ลงทะเบียนเป็นเจ้าของ repo
จากการตรวจเบื้องต้นของเรา ผ่าน 1 จาก 1 ข้อที่ตรวจได้ เรายังไม่ได้อ่านโค้ด ก่อนใส่กุญแจหรือ token ให้ดูว่า server ขอสิทธิ์อะไร และเลือกกุญแจที่ทำได้เท่าที่จำเป็น
registry ไม่ได้ระบุว่าต้องใช้กุญแจ แต่บางตัวจะขอให้ล็อกอินตอนใช้ครั้งแรก
รันบนเครื่องของคุณ โปรแกรม AI จะเปิด server ขึ้นมาเองเมื่อใช้ ข้อมูลไม่ต้องผ่านเซิร์ฟเวอร์ของผู้ทำ (ยกเว้นตัวที่ไปเรียกบริการออนไลน์ต่อ)
repo บน GitHub มีการแก้โค้ดล่าสุด – และส่งรุ่นล่าสุด (1.2.1) เข้า registry 8 เดือนที่ผ่านมา
โปรแกรมที่รองรับ 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 รูปภาพ และสคริปต์ออกแล้ว ลิงก์จะพาออกนอกเว็บ
real-browser-mcp
Agentic browsers give agents a new browser. Coding agents need yours.
MCP + Chrome extension for the Chrome you already have open:
cookies, SSO, staging sessions, the bug you already reproduced.
Everyone is building "agentic browsers." Most of them hand the agent a new browser: headless Chromium, a cloud VM, a clean profile with no cookies.
That is the wrong tool for the coding loop.
You ship a fix. The agent says "done, please verify." You already have Chrome open on staging, past SSO, on the exact page that breaks. The agent wrote the code. It could verify it there. It just cannot see that browser.
real-browser-mcp is the bridge: a local MCP server plus a Chrome extension over localhost WebSocket. Your agent talks MCP. Your real Chrome executes. Sessions stay on your machine.
This is not Playwright with a fresh profile. Not a hosted agent browser. Not CDP remote-debugging bolted onto your default Chrome profile (Chrome 136+ blocks that path for good security reasons).
Two parts:
Cursor (one click):
Or add manually in Cursor Settings > MCP > "Add new MCP server":
{
"mcpServers": { "real-browser": { "command": "npx", "args": ["-y", "real-browser-mcp"] } } }
Claude Desktop, Windsurf, or other MCP clients
Claude Desktop: Edit ~/Library/Application Support/Claude/claude_desktop_config.json (macOS) or %APPDATA%\Claude\claude_desktop_config.json (Windows). Add the same JSON block.
Windsurf: Settings > MCP. Same config.
Any MCP-compatible client works.
Or load from source:
git clone https://github.com/ofershap/real-browser-mcp.git
chrome://extensions and enable Developer mode (toggle in the top right)extension/ folder from the cloned repoClick the Real Browser MCP icon in your toolbar.
Green dot = connected. Gray = waiting for server.
Done. Your agent can see your browser.
This repo ships as an Agent Plugins 1.0.0 package: root plugin.json, mcp.json, and skills/real-browser-control/ teach agents when to pick real Chrome over headless / cloud agentic browsers.
Claude Code .claude-plugin/ and agent-config/ remain for rules and marketplace flows. Agent Plugins is the cross-client layout (MCP + skill in one tree).
Cursor (local plugin): clone the repo, then copy or symlink it to ~/.cursor/plugins/local/real-browser-mcp and reload the window. You still need the Chrome extension connected. One-click MCP install below adds only the server unless you also install the local plugin folder.
Spec and tooling: agent-plugins.org.
| Stack | What the agent gets | Where it fails for coding agents |
|---|---|---|
| Playwright MCP / Puppeteer | New browser, clean state | No SSO cookies, no "the tab I already opened" |
| Cloud agentic browsers | Remote browser / VM | Separate login, not your IDE-local Chrome |
| Chrome DevTools MCP (CDP / autoConnect) | DevTools-oriented attach | Chrome 136+ refuses --remote-debugging-port on the default profile, so everyday logged-in Chrome is hard to attach without a throwaway profile |
| Real Browser MCP | Your Chrome via MV3 extension + localhost MCP | Not for CI parallel clean runs (use Playwright there) |
If you want repeatable automation in CI, use Playwright. If you want the agent inside the browser you already authenticated, use this.
| Real Browser MCP | Playwright MCP | Chrome DevTools MCP | Cloud agentic browser | |
|---|---|---|---|---|
| Browser | Your real Chrome | Launches new Chromium (usually) | Attach via CDP | Hosted / remote |
| Cookies / SSO already there | Yes | No (inject or replay) | Fragile on default profile after Chrome 136 | Separate session |
| Connection model | Extension ↔ localhost WebSocket | Playwright driver | Remote debugging / autoConnect | Vendor cloud |
| Best fit | Live verify in IDE | CI + repeatable runs | Performance / DevTools debugging | Unattended remote browse |
| Leaves your machine? | No control plane | Local (unless you add cloud) | Local | Yes |
The agent can use all 18 tools out of the box, but it works better when it knows _when_ and _how_ to chain them. A config file teaches the right workflow - snapshot first, then act, then verify.
Run one command:
npx real-browser-mcp --setup cursor
This installs:
~/.cursor/rules/real-browser-mcp.mdc - teaches the snapshot-first workflow, how to handle dropdowns, when to use screenshots vs snapshots~/.cursor/commands/check-browser.md - adds /check-browser to your Cursor chatAfter that, type /check-browser in any chat. Or just say "check the result in my browser" and the agent knows what to do.
Claude Code setup
npx real-browser-mcp --setup claude
Adds an AGENTS.md to your project root. Claude Code auto-discovers it.
See agent-config/ for manual installation or to customize the rules.
18 tools. Grouped by purpose.
See
| Tool | What it does |
|---|---|
browser_snapshot | Accessibility tree with element refs. Compact mode (default) returns only interactive elements |
browser_screenshot | Capture what's on screen |
browser_text | Extract raw text from page or element |
browser_find | Query elements by CSS selector |
Interact
| Tool | What it does |
|---|---|
browser_click | Click by ref or CSS selector |
browser_click_text | Click by visible text. Works through React portals and overlays |
browser_type | Type into inputs and contenteditable fields |
browser_press_key | Key combos (Enter, Escape, Ctrl+A) |
browser_scroll | Scroll pages and virtual containers |
browser_hover | Trigger tooltips and dropdowns |
browser_select | Pick from native dropdowns |
browser_wait | Wait for elements to appear or disappear |
Navigate
| Tool | What it does |
|---|---|
browser_navigate | Go to a URL in the active tab |
browser_tabs | List, create, close, or focus tabs |
Debug
| Tool | What it does |
|---|---|
browser_console | Console output (log, warn, error) |
browser_network | XHR/fetch requests with status codes |
browser_evaluate | Run JavaScript via Chrome DevTools Protocol |
browser_handle_dialog | Handle alert/confirm/prompt dialogs |
| Env var | Default | What it does |
|---|---|---|
WS_PORT | 7225 | WebSocket port for extension connection |
Connection drops are handled automatically with exponential backoff (1s to 30s), ping/pong health checks every 10s, and per-tool timeouts (5s for clicks, 60s for navigation).
Multiple Chrome profiles
Run two server instances on different ports:
{
"mcpServers": { "browser-work": { "command": "npx", "args": ["-y", "real-browser-mcp"] }, "browser-personal": { "command": "npx", "args": ["-y", "real-browser-mcp"], "env": { "WS_PORT": "9333" } } } }
Update the port in each extension popup to match.
Architecture
Everything stays on your machine. The extension connects to the MCP server via WebSocket on localhost. No cloud, no proxy, nothing leaves your browser.
real-browser-mcp/
├── mcp-server/ MCP server (npm package, TypeScript) │ └── src/tools/ One file per tool, registry pattern ├── extension/ Chrome extension (Manifest V3, plain JS) │ ├── background.js Service worker, WebSocket client, tool handlers │ ├── content.js Console capture │ └── popup/ Connection status UI ├── agent-config/ Pre-built configs for Cursor + Claude Code │ ├── cursor/ Rules and commands │ ├── skills/ Browser automation skill │ └── setup.mjs One-command installer └── tests/ Bridge + registry tests
Stack: TypeScript (strict) · MCP SDK · WebSocket · Chrome Extension Manifest V3 · Vitest
Development
git clone https://github.com/ofershap/real-browser-mcp.git
cd real-browser-mcp npm install npm run build npm test
| Command | What it does |
|---|---|
npm run build | Compile TypeScript |
npm run dev | Watch mode |
npm test | Run tests |
npm run typecheck | Type check without emitting |
| npm run setup:cursor | Install C
ตัดมาแค่ช่วงต้น อ่านต่อใน repo