วิธีใช้ MCP Server ควบคุม Chrome Browser ด้วย Browserbase MCP Server

เคยคิดไหมว่า AI ของคุณจะสามารถท่องเว็บได้เหมือนคุณ? เตรียมตัวให้พร้อม เพราะวันนี้เราจะมาเจาะลึกโลกของ Browserbase MCP Server—เครื่องมือที่พลิกโฉมวงการที่ช่วยให้โมเดล AI อย่าง Claude, GPT และ Gemini ควบคุมเว็บเบราว์เซอร์ได้ ลองจินตนาการว่า AI ของคุณสามารถนำทางเว็บไซต์ คลิกปุ่ม กรอกแบบฟอร์ม และแม้กระทั่งจับภาพหน้าจอได้ด้วยตัวเอง ฟังดูเป็นเรื่องอนาคตใช่ไหม? แต่มันกำลังเกิดขึ้นจริงแล้ว และการตั้งค่าก็ง่ายกว่าที่คุณคิด โดยเฉพาะอย่างยิ่งกับ Browserbase MCP Server

ในคู่มือนี้ ผมจะพาคุณไปทำความเข้าใจว่า Browserbase MCP Server คืออะไร ทำไมมันถึงเป็นสิ่งที่จำเป็นสำหรับเวิร์กโฟลว์ที่ขับเคลื่อนด้วย AI และวิธีตั้งค่าให้พร้อมใช้งานเพื่อควบคุมเบราว์เซอร์ Chrome ไม่ว่าคุณจะเป็นนักพัฒนา นักวิทยาศาสตร์ข้อมูล หรือเพียงแค่ผู้ที่สนใจ AI บทแนะนำทีละขั้นตอนนี้จะทำให้คุณรู้สึกเหมือนเป็นมืออาชีพ มาเริ่มกันเลย!

💡

ต้องการเครื่องมือทดสอบ API ที่ยอดเยี่ยมซึ่งสร้าง เอกสาร API ที่สวยงาม ใช่ไหม?

ต้องการแพลตฟอร์มแบบ All-in-One ที่ครบวงจรสำหรับทีมพัฒนาของคุณ เพื่อทำงานร่วมกันด้วย ประสิทธิภาพสูงสุด ใช่ไหม?

Apidog ตอบสนองทุกความต้องการของคุณ และ เข้ามาแทนที่ Postman ในราคาที่ย่อมเยาลงมาก!

ปุ่ม

Browserbase MCP Server คืออะไร?

Browserbase MCP Server เป็นเครื่องมือโอเพนซอร์สที่ใช้ Model Context Protocol (MCP) เพื่อเชื่อมต่อโมเดลภาษาขนาดใหญ่ (LLMs) เข้ากับเว็บเบราว์เซอร์ ลองนึกภาพว่ามันเป็นสะพานที่ช่วยให้ AI โต้ตอบกับเว็บไซต์ได้แบบเรียลไทม์ ด้วยเซิร์ฟเวอร์นี้ AI ของคุณสามารถ:

นำทางไปยัง URL ใดก็ได้
คลิกปุ่มและกรอกแบบฟอร์ม
ดึงข้อมูลจากหน้าเว็บ
จับภาพหน้าจอ
รัน JavaScript บนเว็บไซต์
จัดการเซสชันเบราว์เซอร์หลายรายการพร้อมกัน

มันเหมือนกับการให้ AI ของคุณมีมือเป็นของตัวเองเพื่อท่องเว็บ และส่วนที่ดีที่สุดคืออะไรน่ะเหรอ? มันทำงานร่วมกับโมเดล AI ยอดนิยม เช่น GPT ของ OpenAI, Claude ของ Anthropic และ Gemini ของ Google

ทำไมต้องใช้ Browserbase MCP Server?

ก่อนที่เราจะไปดูวิธีการใช้งาน มาคุยกันก่อนว่าทำไม Browserbase MCP Server ถึงเป็นสิ่งที่พลิกโฉมวงการ:

ระบบอัตโนมัติบนคลาวด์: รันงานเบราว์เซอร์บนคลาวด์ ไม่ต้องปวดหัวกับการตั้งค่าในเครื่อง
รองรับหลายโมเดล: ทำงานร่วมกับโมเดล AI ที่หลากหลาย คุณจึงสามารถเลือกโมเดลที่คุณชื่นชอบได้
เซสชันแบบขนาน: จัดการงานเบราว์เซอร์หลายรายการพร้อมกันเพื่อประสิทธิภาพ
ความสามารถด้านการมองเห็น: จับภาพหน้าจอและวิเคราะห์หน้าเว็บด้วยภาพ
การผสานรวมที่ง่ายดาย: เชื่อมต่อได้อย่างราบรื่นกับไคลเอนต์ AI เช่น Claude Desktop หรือ Cursor

ไม่ว่าคุณจะกำลังสร้างแอปที่ขับเคลื่อนด้วย AI, ทำให้เวิร์กโฟลว์เป็นอัตโนมัติ หรือเพียงแค่ทดลองใช้งาน Browserbase MCP Server ช่วยประหยัดเวลาและเปิดโอกาสใหม่ๆ

วิธีติดตั้งและตั้งค่า Browserbase MCP Server

มีสามวิธีในการเริ่มต้นใช้งาน: การใช้เซิร์ฟเวอร์ระยะไกลแบบโฮสต์, การรันด้วย npm หรือการรันในเครื่อง ผมจะกล่าวถึงทั้งสามวิธี เพื่อให้คุณสามารถเลือกวิธีที่เหมาะสมที่สุดสำหรับคุณ

ข้อกำหนดเบื้องต้น

ก่อนที่คุณจะลงมือใช้ Browserbase MCP Server เพื่อควบคุมเบราว์เซอร์ Chrome ด้วย AI ตรวจสอบให้แน่ใจว่าคุณมีสิ่งต่อไปนี้:

ไคลเอนต์ AI ที่รองรับ MCP: ติดตั้งไคลเอนต์ เช่น Claude Desktop หรือ Cursor ที่รองรับ Model Context Protocol (MCP)
คีย์ API ของ Browserbase: ขอรับได้จาก Browserbase เพื่อเชื่อมต่อ AI ของคุณเข้ากับระบบอัตโนมัติของเบราว์เซอร์

สำหรับ การตั้งค่าในเครื่อง (ไม่บังคับ)

หากคุณวางแผนที่จะรันเซิร์ฟเวอร์ในเครื่อง คุณจะต้องมีสิ่งเหล่านี้เพิ่มเติม:

Git: สำหรับโคลน repository จาก GitHub
pnpm: ติดตั้งตัวจัดการแพ็คเกจนี้จาก pnpm.io เพื่อจัดการ dependencies
Node.js: ดาวน์โหลดได้จาก nodejs.org เพื่อรันเซิร์ฟเวอร์
คีย์ API ของโมเดล AI: ขอรับคีย์สำหรับโมเดลที่คุณเลือก เช่น Gemini

ตัวเลือกที่ 1: การใช้เซิร์ฟเวอร์ระยะไกลแบบโฮสต์ของ BrowserBase MCP Server (ง่ายที่สุด)

หากคุณต้องการหลีกเลี่ยงความยุ่งยากในการตั้งค่า ตัวเลือกแบบโฮสต์คือเพื่อนของคุณ นี่คือวิธีการ:

เยี่ยมชม Smithery: ไปที่ smithery.ai เพื่อรับคีย์ API และ URL MCP ระยะไกลของคุณ

กำหนดค่าไคลเอนต์ AI ของคุณ: เพิ่ม URL ที่ได้รับลงในการตั้งค่า MCP ของไคลเอนต์ AI ของคุณ ตัวอย่างเช่น ใน Claude Desktop คุณจะเพิ่มสิ่งนี้ลงใน claude_desktop_config.json ของคุณ:

{
  "mcpServers": {
    "browserbase": {
      "url": "https://your-smithery-url.com"
    }
  }
}

หรือ หากคุณกำลังใช้ mcp-remote CLI:

{
  "mcpServers": {
    "browserbase": {
      "command": "npx",
      "args": ["mcp-remote", "https://your-smithery-url.com"]
    }
  }
}

รีสตาร์ทไคลเอนต์ของคุณ: ปิดและเปิดไคลเอนต์ AI ของคุณใหม่เพื่อใช้การเปลี่ยนแปลง

แค่นั้นเอง! ตอนนี้ AI ของคุณสามารถควบคุมเบราว์เซอร์ Chrome ผ่าน Browserbase MCP Server ได้แล้ว

ตัวเลือกที่ 2: รัน BrowserBase MCP Server บน NPM (แนะนำ)

นี่คือแนวทางที่แนะนำเนื่องจากความเข้ากันได้กับไคลเอนต์ MCP ส่วนใหญ่ ไปที่ไฟล์ MCP Config JSON ของคุณแล้ววางการกำหนดค่า Browserbase Server:

{
  "mcpServers": {
    "browserbase": {
      "command": "npx",
      "args": ["@browserbasehq/mcp"],
      "env": {
        "BROWSERBASE_API_KEY": "",
        "BROWSERBASE_PROJECT_ID": "",
        "GEMINI_API_KEY": ""
      }
    }
  }
}

ตัวเลือกที่ 3: ติดตั้งและรัน BrowserBase MCP Server ในเครื่อง (เพื่อการควบคุมเต็มรูปแบบ)

ต้องการปรับแต่งภายใต้การทำงานหรือไม่? การรันเซิร์ฟเวอร์ในเครื่องจะให้ความยืดหยุ่นมากขึ้น นี่คือวิธีการ:

โคลน Repository:

เปิดเทอร์มินัลของคุณแล้วรัน:

git clone https://github.com/browserbase/mcp-server-browserbase.git
cd mcp-server-browserbase

ติดตั้ง Dependencies:

ตรวจสอบให้แน่ใจว่าคุณได้ติดตั้ง pnpm แล้ว จากนั้นรัน:

pnpm install && pnpm build

เริ่มเซิร์ฟเวอร์:

คุณสามารถรันเซิร์ฟเวอร์โดยใช้ STDIO หรือ HTTP transport
สำหรับ STDIO (กระบวนการในเครื่อง):
เพิ่มสิ่งนี้ลงในการกำหนดค่าไคลเอนต์ MCP ของคุณ:

{
  "mcpServers": {
    "browserbase": {
      "command": "node",
      "args": ["path/to/mcp-server-browserbase/cli.js"],
      "env": {
        "BROWSERBASE_API_KEY": "your_api_key",
        "BROWSERBASE_PROJECT_ID": "your_project_id",
        "GEMINI_API_KEY": "your_gemini_key"
      }
    }
  }
}

สำหรับ HTTP transport:
เริ่มเซิร์ฟเวอร์ด้วย:

node cli.js --port 3000

กำหนดค่าไคลเอนต์ของคุณให้เชื่อมต่อกับ http://localhost:3000

เพิ่มคีย์ API: แทนที่ตัวยึดตำแหน่งในการกำหนดค่าด้วยคีย์ API ของ Browserbase และโมเดลของคุณ

รีสตาร์ทไคลเอนต์ของคุณ: เช่นเดียวกับที่เคยทำ ให้รีสตาร์ทไคลเอนต์ AI ของคุณเพื่อเปิดใช้งานเซิร์ฟเวอร์

การปรับแต่งเซิร์ฟเวอร์

Browserbase MCP Server มีแฟล็กให้ปรับแต่งพฤติกรรมของมัน นี่คือบางส่วนที่ใช้งานได้สะดวก:

--proxies: เปิดใช้งานพร็อกซี Browserbase เพื่อความเป็นส่วนตัวที่ดีขึ้น
--advancedStealth: ใช้โหมดซ่อนตัวเพื่อหลีกเลี่ยงการตรวจจับ (ต้องใช้ Scale Plan)
--browserWidth และ --browserHeight: ตั้งค่าขนาดหน้าต่างเบราว์เซอร์
--modelName: เลือกโมเดล AI อื่นสำหรับ Stagehand

คุณสามารถเพิ่มแฟล็กเหล่านี้ลงในอาร์เรย์ args ในการกำหนดค่า MCP ของคุณได้ ตัวอย่างเช่น:

"args": ["path/to/cli.js", "--proxies", "--browserWidth=1920"]

วิธีใช้ Browserbase MCP Server เพื่อควบคุม Chrome

เมื่อเซิร์ฟเวอร์ของคุณตั้งค่าเสร็จแล้ว มาเริ่มใช้งานกันเลย! นี่คือวิธีใช้ Browserbase MCP Server เพื่อควบคุมเบราว์เซอร์ Chrome

ขั้นตอนที่ 1: เชื่อมต่อไคลเอนต์ AI ของคุณ

ตรวจสอบให้แน่ใจว่าไคลเอนต์ AI ของคุณ (เช่น Claude Desktop หรือ Cursor) เชื่อมต่อกับ Browserbase MCP Server โดยใช้วิธีใดวิธีหนึ่งในสามวิธีข้างต้น

ขั้นตอนที่ 2: ออกคำสั่ง

ในไคลเอนต์ AI ของคุณ ตอนนี้คุณสามารถออกคำสั่งด้วยภาษาธรรมชาติเพื่อควบคุมเบราว์เซอร์ได้แล้ว นี่คือตัวอย่างบางส่วน:

นำทางไปยัง URL:

https://example.com

คลิกปุ่ม:

"คลิกปุ่ม 'Sign Up'"

กรอกแบบฟอร์ม:

user@example.com

จับภาพหน้าจอ:

"จับภาพหน้าจอของหน้าแรก"

ดึงข้อมูล:

"ดึงชื่อผลิตภัณฑ์ทั้งหมดจากหน้านี้"

AI จะแปลคำสั่งเหล่านี้ให้เป็นการกระทำของเบราว์เซอร์โดยใช้ Browserbase MCP Server

ขั้นตอนที่ 3: ดูผลลัพธ์

ขึ้นอยู่กับคำสั่ง AI จะส่งคืนผลลัพธ์เช่น:

การยืนยันการกระทำ (เช่น "นำทางไปยัง https://example.com แล้ว")
ข้อมูลที่ดึงมา (เช่น รายชื่อชื่อผลิตภัณฑ์)
ภาพหน้าจอ (บันทึกหรือแสดงผล ขึ้นอยู่กับการตั้งค่าของคุณ)

ตัวอย่างเช่น หากคุณขอภาพหน้าจอ AI อาจตอบกลับมาว่า:

"จับภาพหน้าจอแล้วบันทึกเป็น 'homepage.png'"

การทดสอบ Browserbase MCP Server

มาทดสอบด้วยตัวอย่างจริงกัน สมมติว่าคุณต้องการทำให้การค้นหาบนเว็บไซต์เป็นอัตโนมัติ

เปิดไคลเอนต์ AI ของคุณ: สำหรับตัวอย่างนี้ เราจะใช้ Claude Desktop
ออกคำสั่ง:

https://google.com

3. สังเกตเบราว์เซอร์: หากคุณกำลังรันในเครื่องด้วย HTTP transport คุณอาจเห็นเบราว์เซอร์เปิดขึ้นและดำเนินการตามคำสั่ง

4. ตรวจสอบการตอบสนอง: Claude ควรยืนยันการกระทำและอาจดึงชื่อหน้าหรือเนื้อหาออกมา

การทดสอบง่ายๆ นี้แสดงให้เห็นว่า Browserbase MCP Server ช่วยให้ AI ควบคุม Chrome เพื่อทำงานบนเว็บได้อย่างไร

เคล็ดลับการแก้ไขปัญหา

เซิร์ฟเวอร์ไม่เริ่มทำงานใช่ไหม? ตรวจสอบให้แน่ใจว่าคุณมีคีย์ API ที่ถูกต้อง และ pnpm build เสร็จสมบูรณ์
ไคลเอนต์ไม่เชื่อมต่อใช่ไหม? ตรวจสอบการกำหนดค่า MCP อีกครั้งและรีสตาร์ทไคลเอนต์ AI ของคุณ
การกระทำไม่ทำงานใช่ไหม? ตรวจสอบโครงสร้างของเว็บไซต์; บางเว็บไซต์อาจต้องใช้โหมดซ่อนตัวขั้นสูงหรือพร็อกซี
ปัญหาเกี่ยวกับโมเดลใช่ไหม? ตรวจสอบให้แน่ใจว่าคีย์ API ของโมเดลของคุณถูกต้อง และโมเดลรองรับความสามารถที่จำเป็น

บทสรุป

และนี่คือทั้งหมด! คุณได้เรียนรู้วิธีใช้ Browserbase MCP Server เพื่อควบคุมเบราว์เซอร์ Chrome ด้วย AI แล้ว ไม่ว่าคุณจะเลือกเส้นทางแบบโฮสต์เพื่อความเรียบง่าย, npm หรือการตั้งค่าในเครื่องเพื่อการควบคุม ตอนนี้คุณก็พร้อมที่จะทำให้งานบนเว็บเป็นอัตโนมัติเหมือนมืออาชีพแล้ว Browserbase MCP Server เป็นเครื่องมือที่ทรงพลังที่นำ AI และระบบอัตโนมัติบนเว็บมารวมกัน เปิดโอกาสไม่รู้จบสำหรับนวัตกรรม

พร้อมที่จะสำรวจเพิ่มเติมหรือไม่? ลองทำให้งานบนเว็บประจำวันของคุณเป็นอัตโนมัติ หรือนำไปรวมเข้ากับโปรเจกต์ AI ถัดไปของคุณ

💡

ปุ่ม