เอเจนต์ของคุณขับเคลื่อนเบราว์เซอร์จริง
ไม่ใช่เบราว์เซอร์ปลอม
AgentsRoom ฝังเบราว์เซอร์ Chromium จริงในทุกโปรเจกต์ และจัดส่งเซิร์ฟเวอร์ AgentsRoom Browser MCP ที่ให้เอเจนต์ AI ของคุณควบคุมมัน เอเจนต์ QA ของคุณเปิดไซต์ localhost ของคุณ คลิกปุ่ม กรอกแบบฟอร์ม ถ่ายภาพหน้าจอ อ่านคอนโซล และตรวจสอบว่าฟีเจอร์ทำงานจริงก่อนที่จะบอกว่าเสร็จสิ้น การทำงานอัตโนมัติของเบราว์เซอร์แบบ end-to-end สำหรับ Claude, Codex, GitHub Copilot CLI, Cursor และ CLI ของเอเจนต์อีก 10 ตัว โดยไม่มีการกำหนดค่า Playwright
จับคู่กับ Agent Teams: เอเจนต์ Dev ส่งฟีเจอร์ เอเจนต์ QA โหลดไซต์ localhost ในเบราว์เซอร์ที่ฝังอยู่ รันสถานการณ์การตรวจสอบ ถ่ายภาพหน้าจอผลลัพธ์ และลงนาม การทำงานอัตโนมัติของเบราว์เซอร์แบบเนทีฟก็อยู่ในแผนงานเช่นกัน โดยมีเซิร์ฟเวอร์ MCP ในอนาคตที่วางแผนสำหรับแอป React Native และ Electron เพื่อให้เอเจนต์สามารถทดสอบแอปมือถือและเดสก์ท็อปได้เช่นกัน
การสาธิต Browser MCP ของ AgentsRoom: การทดสอบเว็บแอปแบบ end-to-end ที่ขับเคลื่อนโดยเอเจนต์ QA ของ Claude Code ผ่านเบราว์เซอร์ Chromium ที่ฝังอยู่
การทำงานอัตโนมัติของเบราว์เซอร์ใน AgentsRoom คือสองสิ่งในหนึ่ง สิ่งแรกคือเบราว์เซอร์ Chromium จริงที่ฝังอยู่ในทุกห้องโปรเจกต์ พร้อมแถบ URL ปุ่มย้อนกลับ/ไปข้างหน้า โหลดใหม่ ประวัติ ถ่ายภาพหน้าจอไปยังคลิปบอร์ด เปิดในเบราว์เซอร์เริ่มต้น คุกกี้ถาวร และ localStorage ต่อโปรเจกต์ สิ่งที่สองคือเซิร์ฟเวอร์ AgentsRoom Browser MCP (agentsroom-browser) ที่เปิดเผยเบราว์เซอร์นั้นให้กับเอเจนต์ AI ของคุณผ่าน Model Context Protocol เอเจนต์จะได้รับอินเทอร์เฟซที่สะอาดและสามารถเขียนสคริปต์ได้: นำทาง คลิก พิมพ์ ถ่ายภาพหน้าจอ ประเมิน JavaScript รอองค์ประกอบ รับสถานะหน้า รับบันทึกคอนโซล ย้อนกลับ ไปข้างหน้า โหลดใหม่
ทำไมสิ่งนี้ถึงสำคัญ? เพราะคำสัญญาทั้งหมดของเอเจนต์การเขียนโค้ด AI จะพังทลายเมื่อเอเจนต์บอกว่า 'ฟีเจอร์ถูกส่ง' แต่ไม่เคยเปิดหน้าเพื่อตรวจสอบ เอเจนต์ส่วนใหญ่ในปัจจุบันพึ่งพาการรันการทดสอบหน่วย จากนั้นพวกเขาหวัง ด้วย MCP เบราว์เซอร์จริง เอเจนต์โหลดเซิร์ฟเวอร์ localhost ใช้งานฟลว์ผู้ใช้ เห็นสิ่งที่ผู้ใช้มนุษย์จะเห็น และเพียงแค่นั้นจึงลงนาม บทบาทของเอเจนต์ QA Engineer ในที่สุดก็มีเครื่องมือที่จำเป็นในการทำ QA จริง ไม่ใช่แค่การวิเคราะห์แบบสแตติก
การตั้งค่าทางเทคนิคทั้งหมดมองไม่เห็นจากฝั่งคุณ เมื่อคุณติ๊ก 'Browser access' ให้เอเจนต์ AgentsRoom จะรวมรายการ agentsroom-browser เข้ากับ .mcp.json ของโปรเจกต์คุณ แล้วเอเจนต์จะบูตขึ้นมาพร้อมเครื่องมือเบราว์เซอร์ที่ใช้งานได้ทันที สะพาน WebSocket ที่ทำงานบนพอร์ต loopback (127.0.0.1 ระบบปฏิบัติการเป็นผู้กำหนดพอร์ต สร้างใหม่ทุกครั้งที่บูต และยืนยันตัวตนด้วยโทเค็นเลขฐานสิบหกขนาด 32 ไบต์) จะเชื่อม subprocess ของ MCP เข้ากับ Chromium WebContentsView ในแอป Electron ทุกการคลิก ทุกการพิมพ์ ทุกภาพหน้าจอคือการเรียก JSON-RPC หนึ่งครั้ง เอเจนต์จึงเห็นเบราว์เซอร์ของจริง ไม่ใช่ stub
แผงเบราว์เซอร์ AgentsRoom: แถบ URL ประวัติ การถ่ายภาพหน้าจอ และพื้นผิวการควบคุม MCP เต็มรูปแบบสำหรับเอเจนต์ AI ในการนำทาง คลิก พิมพ์ และตรวจสอบ
เบราว์เซอร์จริง ไม่ใช่ stub ของ Playwright
การสาธิตเอเจนต์ AI ส่วนใหญ่ที่พูดถึงการทำงานอัตโนมัติของเบราว์เซอร์ใช้ Playwright แบบไม่มีหัวที่สร้างขึ้นในแต่ละการเรียกเครื่องมือ ซึ่งทำงานได้สำหรับการทดสอบ แต่เป็นเรื่องเจ็บปวดในชีวิตจริง: คุณไม่สามารถเห็นว่าเอเจนต์กำลังทำอะไร ทุกการนำทางจะสร้าง Chromium ใหม่ คุกกี้จะหายไป localStorage จะว่างเปล่า เซิร์ฟเวอร์พัฒนาของคุณคิดว่าทุกการเยี่ยมชมเป็นเซสชันใหม่ทั้งหมด AgentsRoom ใช้มุมมองที่แตกต่างออกไป เบราว์เซอร์เปิดอยู่ในห้องโปรเจกต์ของคุณแล้ว (คุณใช้มันเอง เหมือนเบราว์เซอร์ปกติ) และเอเจนต์ขับเคลื่อนเบราว์เซอร์นั้น เซสชัน คุกกี้ localStorage สถานะการเข้าสู่ระบบ ทั้งหมดถูกเก็บรักษาไว้
ทุกการคลิกและการพิมพ์จากเอเจนต์จะกระตุ้นการส่งข้อมูลจริงผ่าน WebContentsView ของ Electron โดยมีเหตุการณ์คีย์ เหตุการณ์เมาส์ และการเปลี่ยนแปลง DOM ที่เหมาะสม ภาพหน้าจอเป็น PNG จริงที่จับจากหน้าที่เรนเดอร์จริง (ไม่ใช่การแฮ็ก DOM-to-image) บันทึกคอนโซลจะถูกบัฟเฟอร์และสามารถสอบถามได้ รวมถึงคำเตือนและข้อผิดพลาด เอเจนต์เห็นสิ่งเดียวกับที่คุณจะเห็นหากคุณเปิด DevTools: ประสิทธิภาพจริง พฤติกรรมเครือข่ายจริง CORS จริง การตรวจสอบสิทธิ์จริง
การแยกห้องข้ามถูกบังคับใช้ AgentsRoom สร้าง Chromium WebContentsView หนึ่งตัวต่อโปรเจกต์ โดยมีพาร์ติชันเซสชันของตัวเอง (persist:agentsroom-browser-<projectId>) คุกกี้ของโปรเจกต์ A จะไม่รั่วไหลไปยังโปรเจกต์ B เมื่อคุณเปลี่ยนโปรเจกต์ เบราว์เซอร์ก่อนหน้านี้จะถูกซ่อนและเบราว์เซอร์ใหม่จะออนไลน์ด้วยสถานะของตัวเอง เอเจนต์จะลงจอดในโปรเจกต์ที่ถูกต้องเสมอ โดยมีข้อมูลรับรองที่ถูกต้อง
ชั้น MCP มีขนาดเล็กและไม่มีการพึ่งพาโดยเจตนา subprocess browser-mcp-server.cjs พูดโปรโตคอล MCP 2024-11-05 ผ่าน stdio (initialize, tools/list, tools/call) และแปลเป็นการเรียก JSON-RPC ผ่านสะพาน WebSocket loopback เมื่อเปรียบเทียบกับเซิร์ฟเวอร์ที่ใช้ SDK ขนาดใหญ่ สิ่งนี้ยังคงรวดเร็ว (การเรียกเครื่องมือครั้งแรกใช้เวลาน้อยกว่า 100 มิลลิวินาที) และง่ายต่อการดีบัก หลังจากทุกการกระทำที่เปลี่ยนหน้า (คลิก พิมพ์ นำทาง โหลดใหม่ ย้อนกลับ ไปข้างหน้า) การตอบสนองจะรวมภาพหน้าจอ PNG base64 ที่มีขนาดสูงสุด 1.6 MB เพื่อให้เอเจนต์เห็นผลลัพธ์ของสิ่งที่เพิ่งทำไป สิ่งนี้กลายเป็นการชนะความน่าเชื่อถือที่ใหญ่ที่สุดอย่างเดียว: เอเจนต์ที่เห็นหน้าจอทำสิ่งที่ถูกต้องบ่อยกว่ามากกว่าเอเจนต์ที่หวัง
ชุดเครื่องมือ Browser MCP ที่เอเจนต์ของคุณได้รับ
เอเจนต์ AI ทุกตัวที่มีการเข้าถึงเบราว์เซอร์จะบูตด้วยเครื่องมือเหล่านี้ที่พร้อมใช้งาน พวกเขาจะถูกเปิดเผยผ่าน MCP มาตรฐาน ดังนั้น CLI ที่เข้ากันได้ใด ๆ จึงเห็นพวกเขา: Claude, Codex, GitHub Copilot CLI, Cursor และ CLI ของเอเจนต์อีก 10 ตัว
browser_navigate
เปิด URL ในเบราว์เซอร์ที่ฝังอยู่ การจัดการ URL ที่ชาญฉลาด: localhost:3000 จะกลายเป็น http://localhost:3000 แทนที่จะกระตุ้นกล่องโต้ตอบ 'ไม่สามารถเปิดแอปพลิเคชัน' คืนค่า URL สุดท้ายและภาพหน้าจอของหน้าเมื่อโหลดเสร็จ
browser_click
คลิกที่องค์ประกอบโดยการเลือกหรือโดยข้อความที่มองเห็นได้ เหตุการณ์คลิกแบบเนทีฟจริง ไม่ใช่การส่งข้อมูล JavaScript คืนค่าภาพหน้าจอหลังคลิกเพื่อให้เอเจนต์เห็นผลลัพธ์ของการกระทำของตน
browser_type
พิมพ์ข้อความลงในช่องป้อนข้อมูลหรือ textarea รองรับการใช้คีย์ลัดและการส่งข้อมูล เหตุการณ์คีย์จริง ตัวจัดการ onChange ของหน้าเว็บจะทำงาน คืนภาพหน้าจอหลังจากพิมพ์
browser_screenshot
จับภาพมุมมองปัจจุบันเป็น PNG มีประโยชน์สำหรับการตรวจสอบการเปลี่ยนแปลงทางภาพ, การตรวจสอบคุณภาพการออกแบบ, การเปรียบเทียบก่อนและหลัง, หรือการแชร์สถานะของบั๊กกับทีม
browser_evaluate
รันนิพจน์ JavaScript ในโลกหลักของหน้าเว็บ รับผลลัพธ์ที่ถูกจัดรูปแบบกลับมา ใช้โดยเอเจนต์เพื่ออ่านสถานะของหน้าเว็บ, สอบถาม DOM, ตรวจสอบ Redux store, หรือกระตุ้นการกระทำที่ไม่มีปุ่มที่มองเห็นได้
browser_wait_for
รอให้ปรากฏองค์ประกอบ, รอให้ URL เปลี่ยน, รอให้คำขอเครือข่ายเสร็จสิ้น, หรือรอให้ JavaScript ที่กำหนดคืนค่า true หลีกเลี่ยงการแข่งขัน 'เอเจนต์คลิกเร็วเกินไป' แบบคลาสสิก
browser_get_state
อ่าน URL ปัจจุบัน, ชื่อเรื่อง, มุมมอง, ตำแหน่งการเลื่อน, และภาพรวมที่มีโครงสร้างขององค์ประกอบที่เข้าถึงได้ของหน้าเว็บ ข้อมูลหลักของเอเจนต์เมื่อมันต้องวางแผนการกระทำถัดไป
browser_get_logs
ดึงบัฟเฟอร์คอนโซล (log, warn, error) เอเจนต์สามารถเห็นคำเตือน React, ข้อผิดพลาดการเติมน้ำ, ความล้มเหลวของเครือข่าย และข้อยกเว้นระหว่างการทำงานที่คุณจะเห็นใน DevTools รายงานบั๊กกลายเป็น 'นี่คือข้อผิดพลาดจากคอนโซล'
browser_set_viewport
ปรับขนาดมุมมองของหน้าเว็บ เพื่อให้เอเจนต์ตรวจสอบเลย์เอาต์ที่ความกว้างจริง แทนที่จะเป็นขนาดใดก็ตามที่แผงมีอยู่ในขณะนั้น ชุดค่ากำหนดอุปกรณ์ (ตั้งแต่ iPhone SE ถึง iPad Pro) ให้พฤติกรรมมือถือที่แท้จริง: แท็ก viewport meta ถูกนำมาใช้งาน เหตุการณ์การสัมผัสทำงาน devicePixelRatio และ user agent เปลี่ยนไปตามอุปกรณ์นั้น ความกว้างแบบกำหนดเองครอบคลุมเบรกพอยต์ของเดสก์ท็อป แผงที่ฝังอยู่จะปรับขนาดไปพร้อมกัน เพื่อให้คุณเห็นหน้าเว็บหน้าเดียวกับที่เอเจนต์กำลังตรวจสอบ และคุณสามารถเปลี่ยนกลับได้จากเมนูอุปกรณ์
browser_go_back / forward / reload
การนำทางเบราว์เซอร์มาตรฐาน, สามารถเขียนสคริปต์ได้ ใช้โดยเอเจนต์เพื่อย้อนกลับเมื่อการไหลผิดพลาด, หรือเพื่อตรวจสอบหน้าเว็บอีกครั้งหลังจากการโหลดร้อนจาก Vite, Next.js หรือ Expo Metro เบราว์เซอร์นี้ทำงานโดยปิดแคช HTTP เอเจนต์จึงเห็นบิลด์ล่าสุดเสมอ ไม่ใช่บันเดิลเก่า ใช้ useCache: true เพื่ออนุญาตแคชสำหรับการโหลดครั้งเดียว
สิ่งที่เอเจนต์ทำจริงกับเบราว์เซอร์
เวิร์กโฟลว์จริงที่คุณสามารถสร้างได้ในวันนี้ โดยมีบทบาท QA Engineer และทีมเอเจนต์
การทดสอบแบบ end-to-end ในทุกการส่งมอบ
เชื่อมต่อ Dev กับทีม QA เอเจนต์ QA นำทางไปยังเซิร์ฟเวอร์ dev localhost ของคุณ คลิกผ่านเส้นทางสำคัญ (ลงทะเบียน, ชำระเงิน, แดชบอร์ด), ถ่ายภาพหน้าจอผลลัพธ์, และอนุมัติหากไม่มีอะไรเกิดขึ้น จับการถดถอยก่อนที่มนุษย์จะเปิดหน้าเว็บ
การตรวจสอบการเปลี่ยนแปลงทางภาพ
ภาพหน้าจอก่อนและหลังการเปลี่ยนแปลง UI เอเจนต์โหลดหน้าเว็บในคอมมิตก่อนหน้า, ถ่ายภาพหน้าจอ, เปลี่ยนสาขา, ถ่ายภาพหน้าจอ, ขอให้ Claude เปรียบเทียบ การตรวจสอบความแตกต่างทางภาพที่ไม่แพงโดยไม่ต้องใช้ Percy หรือ Chromatic
การล่าข้อผิดพลาดในคอนโซล
เอเจนต์นำทางแอป, เรียก browser_get_logs, หาคำเตือนการเติมน้ำของ React, คำเตือน useEffect, ความล้มเหลวของเครือข่าย 404, ข้อผิดพลาด CORS, ข้อความการเลิกใช้ รายงานเป็นรายการความเสี่ยงในข้อมูลการส่งมอบทีม เอเจนต์ Dev ถัดไปจะแก้ไขพวกเขา
การทดสอบการตรวจสอบฟอร์ม
เอเจนต์กรอกฟอร์มด้วยข้อมูลที่ถูกต้อง, ด้วยฟิลด์ว่าง, ด้วยกรณีขอบ (สตริง XSS, ข้อมูลที่ยาวมาก, non-ASCII) ยืนยันข้อความการตรวจสอบ, คำขอเครือข่าย, การเปลี่ยนเส้นทาง การตรวจสอบฟอร์มจริง ไม่ใช่การทดสอบหน่วย
การตรวจสอบการเข้าถึง
เอเจนต์เดินไปตามหน้าเว็บ, สอบถามต้นไม้การเข้าถึงผ่าน browser_get_state และ browser_evaluate, ตรวจสอบข้อความ alt, คุณสมบัติ ARIA, การจัดการโฟกัส, การนำทางด้วยคีย์บอร์ด รายงานปัญหาพร้อมภาพหน้าจอ
การตรวจสอบคุณภาพการออกแบบกับ Figma
รวมกับฟีเจอร์ Figma to AI agents เอเจนต์โหลดเฟรม Figma, ถ่ายภาพหน้าจอ, โหลดหน้าเว็บ localhost, ถ่ายภาพหน้าจอ, เปรียบเทียบระยะห่าง, ฟอนต์, สี, การจัดเรียง ส่งรายชื่อความไม่ตรงกัน
การตรวจสอบอุโมงค์พรีวิวสด
จับคู่กับอุโมงค์ localhost ของ AgentsRoom เอเจนต์นำทางไปยัง URL พรีวิว HTTPS สาธารณะ (ไม่ใช่ localhost), ยืนยันว่าเว็บไซต์สามารถเข้าถึงได้จากโลกภายนอก, ถ่ายภาพหน้าจอ, และยืนยันว่าสมาชิกผู้มีส่วนได้ส่วนเสียสามารถเปิดลิงก์ได้จริง
ทำซ้ำบั๊กของลูกค้าจากตั๋วในรายการที่สาธารณะ
ตั๋วในรายการที่รอการดำเนินการสาธารณะเข้ามาพร้อมกับ URL และขั้นตอนในการทำซ้ำ เอเจนต์ QA เปิด URL ทำตามขั้นตอน จับภาพข้อผิดพลาดในคอนโซล แนบภาพหน้าจอ และส่งต่อให้ Dev ด้วยการทำซ้ำที่ชัดเจน ไม่มีการวนซ้ำ 'ไม่สามารถทำซ้ำได้' อีกต่อไป
ชี้ไปที่องค์ประกอบ ส่งตรงไปยังเอเจนต์
การขับเคลื่อนเบราว์เซอร์เป็นเพียงครึ่งหนึ่งของเรื่อง บางครั้งคุณคือคนที่เห็นปัญหา: ปุ่มที่ไม่ตรงแนว ป้ายที่มีข้อความผิด หรือการ์ดที่แตกบนมือถือ แทนที่จะอธิบายด้วยคำพูด คุณชี้ไปที่มัน เบราว์เซอร์ในตัวมีโหมดชี้: คลิกที่องค์ประกอบใด ๆ บนหน้าและ AgentsRoom จะจับ CSS selector ที่แน่นอนจาก DOM สด.
เพิ่มบันทึกสั้น ๆ เช่น 'ปรับระยะห่างนี้ให้แน่น' หรือ 'สีผิดที่นี่' และองค์ประกอบที่ชี้ไปพร้อมกับการบันทึกของคุณจะถูกส่งไปยังเอเจนต์ที่ใช้งานเป็นคำขอการเปลี่ยนแปลงที่แม่นยำและไม่คลุมเครือ ไม่ต้องมีอีกต่อไป 'การ์ดที่สามจากซ้าย': เอเจนต์จะได้รับ selector บริบทโดยรอบและเจตนาของคุณในครั้งเดียว.
โหมดชี้ในเบราว์เซอร์ AgentsRoom: คลิกที่องค์ประกอบ เพิ่มบันทึก และ selector ที่แน่นอนพร้อมกับการบันทึกของคุณจะถูกส่งไปยังเอเจนต์เป็นการเปลี่ยนแปลงที่ชี้ไป.
เข้าสู่โหมดชี้
เปิดเบราว์เซอร์ที่ฝังอยู่ในแอปของคุณและกดปุ่มชี้ ทุกองค์ประกอบจะไฮไลต์เมื่อคุณเลื่อนเมาส์ไปเหนือมัน.
คลิกที่องค์ประกอบ
คลิกที่ปุ่ม บล็อกข้อความ หรือการ์ดที่คุณต้องการเปลี่ยน AgentsRoom จะล็อกเข้าที่และอ่าน CSS selector ที่แน่นอนจาก DOM สด.
เพิ่มบันทึกและส่ง
พิมพ์สิ่งที่ควรเปลี่ยนและยืนยัน Selector บริบทโดยรอบและบันทึกของคุณจะถูกส่งให้กับเอเจนต์ที่ใช้งานเป็นการเปลี่ยนแปลงที่ชี้ไป.
เอเจนต์จะได้รับเบราว์เซอร์ได้อย่างไร
เปิดแท็บเบราว์เซอร์ในห้องของคุณ
ในห้องโปรเจกต์ของคุณ แผงด้านขวาจะแสดงแท็บสามแท็บ: ไฟล์, การเปลี่ยนแปลง, เบราว์เซอร์ คลิกที่เบราว์เซอร์ แผงจะขยาย ข้างเคียงจะหด และมุมมอง Chromium จริงจะปรากฏขึ้น พิมพ์ URL หรือเลือกจากประวัติโปรเจกต์
ติ๊ก 'การเข้าถึงเบราว์เซอร์' บนเอเจนต์
เปิดโมดัลแก้ไขเอเจนต์ ขยายความสามารถ ติ๊กการเข้าถึงเบราว์เซอร์ AgentsRoom จะรวมรายการ agentsroom-browser เข้ากับ .mcp.json ของโปรเจกต์ของคุณ และเอเจนต์จะเห็นเครื่องมือเบราว์เซอร์เมื่อเริ่มต้นครั้งถัดไป
<project>/.mcp.jsonเอเจนต์เริ่มต้นด้วยเบราว์เซอร์ MCP
เมื่อสร้างเอเจนต์ Claude (หรือ Codex, Antigravity, ฯลฯ) จะเริ่มเซิร์ฟเวอร์ agentsroom-browser MCP แสดงรายการเครื่องมือของมัน (browser_navigate, browser_click, browser_type, browser_screenshot, browser_evaluate, browser_wait_for, browser_get_state, browser_get_logs, browser_set_viewport, browser_go_back, browser_go_forward, browser_reload) และจากนี้ไปสามารถควบคุมเบราว์เซอร์ได้
เอเจนต์ใช้เบราว์เซอร์
เอเจนต์ทำการนำทาง คลิก พิมพ์ ถ่ายภาพหน้าจอ อ่านคอนโซล ทุกการกระทำจะผ่านสะพาน WebSocket แบบวนกลับ (127.0.0.1, พอร์ตที่กำหนดโดย OS, โทเค็น 32 ไบต์ในรูปแบบเฮกซา ซึ่งสร้างใหม่ทุกครั้งที่เริ่มต้นแอปเดสก์ท็อป) หลังจากการกระทำที่เปลี่ยนหน้าแต่ละครั้ง ภาพหน้าจอจะถูกส่งกลับในบรรทัดเพื่อให้เอเจนต์ตรวจสอบการเคลื่อนไหวของมันได้อย่างมองเห็น
กำหนดเป้าหมาย localhost โดยอัตโนมัติหรือตัวอุโมงค์ของคุณ
หากมีอุโมงค์ localhost กำลังทำงาน การนำทางครั้งแรกจะไปที่ URL ของอุโมงค์ มิฉะนั้นจะไปที่เซิร์ฟเวอร์ dev ที่ตรวจพบครั้งแรก มิฉะนั้นจะไปที่ https://localhost:3000 ร่วมกับ Dev Terminals เอเจนต์จะเริ่มเซิร์ฟเวอร์ dev จากนั้นเปิดในเบราว์เซอร์และทดสอบ
ตรวจสอบ ถ่ายภาพหน้าจอ ส่งต่อ
เมื่อเชื่อมต่อกับ Agent Teams โหนด QA จะรันสถานการณ์ของมัน จับภาพหน้าจอ ตั้งธง .qaPassed ในข้อมูลที่ส่งต่อ เอเจนต์ถัดไปจะสืบทอดคำตัดสิน ผ่านไปยัง PM หากล้มเหลวจะวนกลับไปที่ Dev พร้อมกับคำแนะนำการทดสอบ
ภายใต้ฝากระโปรง
สำหรับผู้ที่สนใจ สแต็กการทำงานอัตโนมัติของเบราว์เซอร์มีขนาดเล็กโดยเจตนา
แต่ละโปรเจกต์มี Chromium WebContentsView หนึ่งตัว (API Electron สมัยใหม่ ไม่ใช่ BrowserView ที่เลิกใช้) ซึ่งซ้อนทับบนหน้าต่างหลักที่ขอบเขตสตรีมจากตัวเรนเดอร์ React การแบ่งเซสชันต่อโปรเจกต์จะเก็บคุกกี้ localStorage และการตรวจสอบสิทธิ์แยกออกจากกันระหว่างโปรเจกต์ ขอบเขตนอกหน้าจอเริ่มต้นช่วยให้เอเจนต์เรียกใช้เครื่องมือเบราว์เซอร์ได้แม้ก่อนที่มนุษย์จะเปิดแท็บเบราว์เซอร์ โดยมีเวลาหมดอายุ 5 วินาทีสำหรับภาพหน้าจอเพื่อหลีกเลี่ยงการหยุดชะงัก
เซิร์ฟเวอร์ WebSocket ขนาดเล็ก (browser-bridge.ts) ทำงานบนพอร์ตวนกลับที่เลือกโดย OS ผูกติดกับ 127.0.0.1 เท่านั้น การตรวจสอบสิทธิ์ใช้โทเค็น 32 ไบต์ที่สร้างใหม่ทุกครั้งที่เริ่มต้นเดสก์ท็อป ไฟล์สะพาน ~/.agentsroom/browser-bridge.json จะเก็บพอร์ตปัจจุบัน โทเค็น และ PID ซึ่งเขียนใหม่แบบอะตอมิกในแต่ละครั้งที่เริ่มต้น ดังนั้น subprocess MCP จะเลือกข้อมูลประจำตัวใหม่โดยอัตโนมัติพร้อมการลองใหม่
เซิร์ฟเวอร์ MCP เองคือ browser-mcp-server.cjs สคริปต์ Node ที่ไม่มีการพึ่งพาใด ๆ ที่ใช้โปรโตคอล MCP 2024-11-05 ผ่าน stdio (initialize, tools/list, tools/call) มันพูด JSON-RPC กับสะพาน WebSocket ผ่านไคลเอนต์ WebSocket ที่เขียนเอง (ไม่มี ws ไม่มี @modelcontextprotocol/sdk) ขนาดเล็ก รวดเร็ว ง่ายต่อการตรวจสอบ บรรจุเป็นไฟล์ extraResources ในแอปเดสก์ท็อป ดังนั้นการติดตั้งแต่ละครั้งจึงมีมันพร้อมใช้งาน
การสนับสนุนเบราว์เซอร์แบบเนทีฟ (ฟีเจอร์เบราว์เซอร์ระดับหนึ่งที่เหนือกว่า MCP) อยู่ในแผนงานของ AgentsRoom นอกจากนี้ แผนระยะยาวยังรวมถึง MCP เพิ่มเติมเพื่อให้เอเจนต์สามารถควบคุมเป้าหมายที่ไม่ใช่เว็บได้เช่น MCP React Native สำหรับแอปมือถือและ MCP Electron สำหรับแอปเดสก์ท็อป แนวคิดเดียวกัน UX เดียวกัน: เอเจนต์ไม่เพียงแค่เขียนโค้ด แต่ยังทำงานกับแอปที่กำลังทำงานอยู่จริง
FAQ
นี่แตกต่างจาก Playwright MCP หรือเครื่องมือเบราว์เซอร์ที่ใช้ Puppeteer อย่างไร?
Playwright และ MCP ที่ใช้ Puppeteer จะสร้างเบราว์เซอร์แบบ headless ใหม่ในทุกเซสชัน นั่นดีสำหรับงานที่ไม่มีสถานะ แต่จะสูญเสียคุกกี้ localStorage และการตรวจสอบสิทธิ์ระหว่างการเรียก และมนุษย์ไม่สามารถเห็นสิ่งที่เอเจนต์กำลังทำอยู่ เบราว์เซอร์ AgentsRoom คือเบราว์เซอร์เดียวกันที่มนุษย์ใช้ภายในแอป โดยมีเซสชันที่คงอยู่ต่อโปรเจกต์ มองเห็นได้ในเวลาจริง เอเจนต์ควบคุมหน้าต่างที่คุณสามารถเห็นและยกเลิกได้ทุกเมื่อ มันเป็นการทำงานอัตโนมัติของเบราว์เซอร์ที่ซื่อสัตย์และสามารถตรวจสอบได้มากขึ้น
นี่ทำงานกับผู้ให้บริการ AI ทุกคนหรือเฉพาะ Claude Code เท่านั้น?
มันทำงานกับ CLI ของเอเจนต์ทั้ง 14 ตัวที่ AgentsRoom รองรับ: Claude Code, Codex CLI, GitHub Copilot CLI, Cursor และอีก 10 ตัว เครื่องมือเบราว์เซอร์จะถูกเปิดเผยผ่านโปรโตคอล Model Context มาตรฐาน ซึ่ง CLI ทั้งหมดเหล่านี้อ่านจาก .mcp.json เอเจนต์ไม่เคยรู้ว่ามันอยู่ใน AgentsRoom มันเห็นเพียงชุดเครื่องมือ MCP และใช้มันเหมือนกับเครื่องมืออื่น ๆ
เอเจนต์สามารถควบคุมไซต์ระยะไกลได้หรือไม่ หรือเฉพาะ localhost เท่านั้น?
ทั้งสองอย่าง พิมพ์ URL ใด ๆ และไป localhost (และรูปแบบ host:port) จะถูกตรวจจับอย่างชาญฉลาด โดยมีการเติมด้วย http:// และเปิดโดยตรง เว็บไซต์สาธารณะทำงานเหมือนในเบราว์เซอร์ปกติ โดยมีคุกกี้และสถานะการเข้าสู่ระบบที่เก็บรักษาไว้ต่อโปรเจกต์ ร่วมกับอุโมงค์ localhost ของ AgentsRoom เอเจนต์ยังสามารถควบคุมเซิร์ฟเวอร์ dev ของคุณผ่าน URL HTTPS สาธารณะ ซึ่งมีประโยชน์สำหรับการตรวจสอบคุณภาพข้ามเครือข่ายและมือถือ
MCP ของเบราว์เซอร์ปลอดภัยหรือไม่? อะไรหยุดไม่ให้มันถูกใช้ในทางที่ผิด?
สะพานจะผูกติดกับ 127.0.0.1 เท่านั้น ไม่เคยผูกติดกับ 0.0.0.0 พอร์ตจะถูกกำหนดโดย OS (ไม่มีพอร์ตที่กำหนดไว้สำหรับการสแกนที่มีแนวโน้มจะชนกัน) โทเค็น 32 ไบต์จะต้องใช้ในการเชื่อมต่อทุกครั้ง ซึ่งสร้างใหม่ทุกครั้งที่เริ่มต้นเดสก์ท็อป subprocess MCP จะได้รับข้อมูลประจำตัวเฉพาะผ่าน env vars ไม่เคยในไฟล์ที่ถูกบันทึก การเข้าถึงเบราว์เซอร์เป็นแบบเลือกใช้ต่อแต่ละเอเจนต์ในโมดัลแก้ไขเอเจนต์ หากคุณลบมัน รายการ .mcp.json จะถูกลบและเอเจนต์ไม่สามารถใช้เครื่องมือได้อีกต่อไป
เอเจนต์เห็นคอนโซลเบราว์เซอร์ (ข้อผิดพลาด คำเตือน เครือข่าย) หรือไม่?
ใช่ ผ่าน browser_get_logs. บัฟเฟอร์เก็บข้อความ console.log, console.warn และ console.error จากโลกหลักของหน้าเว็บ ข้อผิดพลาดจริงหลายอย่าง (ข้อผิดพลาดการทำให้ React มีชีวิต, คำเตือน useEffect, ความล้มเหลวของ CORS) มักจะปรากฏในคอนโซลเท่านั้น ไม่เคยในหน่วยทดสอบ ดังนั้นนี่จึงเป็นหนึ่งในเครื่องมือที่มีสัญญาณสูงสุดสำหรับเอเจนต์ QA.
เกิดอะไรขึ้นกับภาพหน้าจอที่ส่งคืนให้กับเอเจนต์? มันมีค่าใช้จ่ายมากของโทเค็นหรือไม่?
หลังจากการกระทำที่เปลี่ยนหน้าแต่ละครั้ง ภาพหน้าจอ PNG base64 จะถูกเพิ่มเข้าไปในคำตอบของเครื่องมือ โดยมีขีดจำกัดที่ 1.6 MB หากเกินกว่านั้น จะส่งเป็นเครื่องหมายข้อความแทน ภาพหน้าจอมีความสำคัญต่อความน่าเชื่อถือ (เอเจนต์ที่เห็นหน้าจอทำผิดพลาดน้อยลงมาก) ดังนั้นการแลกเปลี่ยนนี้จึงคุ้มค่า หากคุณต้องการปิดการใช้งานภาพหน้าจ aus สำหรับเหตุผลด้านงบประมาณ การเรียก browser_evaluate แบบธรรมดาจะส่งคืนเฉพาะข้อความเท่านั้น.
เอเจนต์สามารถกรอกแบบฟอร์มเข้าสู่ระบบได้หรือไม่? เก็บเซสชันของมันไว้ได้หรือไม่?
ใช่ คุกกี้และ localStorage จะถูกเก็บรักษาต่อโปรเจกต์ภายใต้พาร์ติชันเซสชัน persist:agentsroom-browser-<projectId>. เอเจนต์สามารถเข้าสู่ระบบได้ครั้งเดียวด้วย browser_type และ browser_click และยังคงอยู่ในสถานะล็อกอินตลอดการทำงานที่เหลือ เมื่อคุณเปลี่ยนโปรเจกต์ เซสชันจะเปลี่ยนไป ดังนั้นข้อมูลประจำตัวจะไม่รั่วไหลข้ามโปรเจกต์.
เอเจนต์จะหยุดทำงานถ้าเซิร์ฟเวอร์พัฒนาไม่ได้ทำงานหรือไม่?
มันจะนำทางไปยัง URL และเห็นหน้าจอข้อผิดพลาดของ Chromium มันสามารถอ่านข้อผิดพลาดนั้นผ่าน browser_get_state และ browser_get_logs และตอบสนองตามนั้น: ขอให้คุณเริ่มเซิร์ฟเวอร์ หรือเรียกคำสั่ง Dev Terminals เพื่อเริ่มมัน ด้วย Agent Teams และ Dev Terminals คุณสามารถเชื่อมโยงการทำงานที่เริ่มเซิร์ฟเวอร์ รอ จากนั้นเปิดเบราว์เซอร์ โดยไม่ต้องมีการแทรกแซงจากมนุษย์.
แอปพลิเคชันมือถือและแอปพลิเคชันเดสก์ท็อปได้รับการสนับสนุนด้วยหรือไม่?
เว็บกำลังส่งมอบในวันนี้ ผ่าน Chromium ที่ฝังอยู่และ AgentsRoom Browser MCP แผนงานรวมถึง AgentsRoom Browser แบบเนทีฟในฐานะฟีเจอร์เบราว์เซอร์ระดับหนึ่ง นอกจากนี้ยังมีเซิร์ฟเวอร์ MCP เพิ่มเติมที่วางแผนไว้: MCP React Native เพื่อให้เอเจนต์สามารถขับเคลื่อนแพ็คเกจ Expo บน iOS และ Android และ MCP Electron เพื่อให้เอเจนต์สามารถขับเคลื่อนแอปเดสก์ท็อปที่ไม่ใช่เว็บได้ เช่นเดียวกับตรรกะของเอเจนต์ที่ใช้กับเป้าหมายที่ไม่ใช่เว็บ.
มนุษย์สามารถหยุดเอเจนต์และควบคุมเบราว์เซอร์ได้หรือไม่?
ใช่ เบราว์เซอร์คือมุมมอง Chromium เดียวกันที่มนุษย์ใช้ ในทุกช่วงเวลา คลิกในแผงเบราว์เซอร์และคุณจะอยู่ในตำแหน่งควบคุม เมื่อคุณหยุดการโต้ตอบ เอเจนต์สามารถกลับมาทำการเรียกเครื่องมือได้อีกครั้ง ไม่มีแนวคิดของ 'เบราว์เซอร์ที่ล็อกโดยเอเจนต์' มันเป็นพื้นผิวที่แชร์กัน เหมือนกับการเขียนโปรแกรมคู่.
เกี่ยวกับ: การมอบหมายเอเจนต์
ให้เอเจนต์ QA ที่ถูกกว่าเรียกใช้เบราว์เซอร์ ไม่ใช่เอเจนต์พัฒนา
Browser MCP ส่องแสงสว่างที่สุดเมื่อไม่ให้เอเจนต์พัฒนาเรียกใช้งานโดยตรง การมอบหมายเอเจนต์จะนำการทดสอบเบราว์เซอร์ไปยังเอเจนต์ QA ที่ถูกกว่าผ่านการเรียก run_qa_test MCP เดียว เอเจนต์ Opus หรือ Codex ของคุณยังคงมุ่งเน้นไปที่การส่งมอบโค้ด เอเจนต์ QA ทำการคลิกบนโมเดลที่เล็กกว่า คำตัดสินจะกลับมาเป็นบรรทัดเดียวเดียวกัน Browser MCP เดียวกัน บิลที่เบากว่า บริบทที่สะอาดกว่า.
อ่านหน้าการมอบหมายเอเจนต์ให้เอเจนต์ของคุณมีสายตาเบราว์เซอร์จริง
ติ๊กการเข้าถึงเบราว์เซอร์ในเอเจนต์ใด ๆ ใน AgentsRoom. Browser MCP จะบูตโดยอัตโนมัติ เอเจนต์ QA ของคุณในที่สุดจะทดสอบสิ่งที่มันส่งมอบ.
แอปคู่หู: ตรวจสอบเอเจนต์ของคุณได้ทุกที่
นำของคุณเอง: Claude, Codex, Antigravity CLI, หรือผู้ให้บริการ AI อื่น ๆ
ส่งข้อบกพร่องและคำขอไปยังแบ็คล็อกสาธารณะของคุณโดยตรง
มองเห็น AgentsRoom ในการทำงาน