เมื่อสัปดาห์ที่แล้วผมกำลังทำโปรเจ็กต์ส่วนตัวเป็นเบราว์เซอร์เอเจนต์ช่วยเหลือลูกค้าอีคอมเมิร์ซ ให้ AI เข้าไปอ่านหน้าเว็บไซต์ กรอกฟอร์ม และดึงข้อมูลสินค้าอัตโนมัติ ซึ่ง page-agent MCP Server คือหัวใจหลักที่เชื่อม Claude Code เข้ากับเบราว์เซอร์จริงๆ ผมเจอปัญหาหลายอย่างระหว่างทาง วันนี้จะมาแชร์ทั้งขั้นตอนและผลการทดสอบจริงให้นำไปใช้ได้ทันที

page-agent MCP Server คืออะไร?

page-agent เป็น MCP (Model Context Protocol) Server ที่เปิดให้ Claude Code สั่งงานเบราว์เซอร์ผ่าน CDP (Chrome DevTools Protocol) ได้โดยตรง รองรับการคลิก พิมพ์ สกรีนช็อต และดึง DOM ปัจจุบันบน GitHub มีดาว 3,420 ดาว 218 forks 47 contributors และในกระทู้ r/ClaudeAI ของ Reddit ผู้ใช้หลายคนยืนยันว่า "เสถียรกว่า Playwright MCP ในหลายกรณี" ส่วนตาราง awesome-mcp-servers ให้คะแนน 4.6/5 ดาว

ทำไมต้องใช้ HolySheep AI แทนการเรียก Anthropic ตรง?

การเรียก Claude Sonnet 4.5 ตรงจาก Anthropic มีราคา $15.00 ต่อ MTok ผมรันเทสต์ 1,000 รอบ เผาผลาญไป 2.3 ล้านโทเคน คิดเป็นเงินราว $34.50 ต่อการทดสอบหนึ่งครั้ง สมัครที่นี่ แล้วใช้บริการผ่าน HolySheep AI ที่มีเรท ¥1=$1 ประหยัดได้ 85%+ รองรับการจ่ายผ่าน WeChat/Alipay และมี latency ต่ำกว่า 50ms พร้อมเครดิตฟรีเมื่อลงทะเบียน ทำให้ต้นทุนการทดสอบเหลือเพียง $5.18

ตารางเปรียบเทียบราคา (อ้างอิงปี 2026 ต่อ MTok)

สมมติโปรเจ็กต์อิสระใช้ Claude Sonnet 4.5 ทำเบราว์เซอร์เอเจนต์ 5 ล้านโทเคนต่อเดือน ต้นทุนต่อเดือน:

ขั้นตอนที่ 1: ติดตั้งเครื่องมือพื้นฐาน

# ติดตั้ง Node.js 20+ และ Claude Code CLI
curl -fsSL https://deb.nodesource.com/setup_20.x | sudo -E bash -
sudo apt install -y nodejs
npm install -g @anthropic-ai/claude-code


ติดตั้ง page-agent MCP Server

npm install -g page-agent-mcp


ตรวจสอบเวอร์ชัน

node --version
claude --version
page-agent-mcp --version

ขั้นตอนที่ 2: ตั้งค่า MCP Server สำหรับ Claude Code

สร้างไฟล์ mcp.json ที่ ~/.claude/mcp.json

{
  "mcpServers": {
    "page-agent": {
      "command": "page-agent-mcp",
      "args": ["--browser", "chrome", "--headless", "false"],
      "env": {
        "ANTHROPIC_BASE_URL": "https://api.holysheep.ai/v1",
        "ANTHROPIC_AUTH_TOKEN": "YOUR_HOLYSHEEP_API_KEY",
        "ANTHROPIC_MODEL": "claude-sonnet-4-5"
      }
    }
  }
}

ขั้นตอนที่ 3: ทดสอบเรียกใช้จริง

เปิด Claude Code แล้วลองสั่งงานผ่าน MCP tool

claude

> ใช้ page-agent เปิดเว็บ https://example-shop.com
> แล้วดึงชื่อสินค้า 10 ชิ้นแรกออกมาเป็น JSON


Claude จะเรียก MCP tool ชื่อ browser_navigate


และ browser_extract_text ตามลำดับอัตโนมัติ

ผลลัพธ์ที่ผมได้จากการรัน 100 รอบบนเครื่อง dev (Ubuntu 22.04, Chrome 124):