https://nutchanon.org/_app/immutable/chunks/tI87k0RM.js

1import{f as b,a as i,c as N}from"./CeOD2e6I.js";import{G as p,K as s,I as y,J as O,L as u,M as R,N as M,z as a,O as F}from"./C5Iyu3w9.js";import{d as P}from"./BgyuWewX.js";import{i as B}from"./DJK3LPYy.js";import{s as r}from"./D1z2Jf5u.js";import{s as x}from"./C303owcw.js";import{s as _}from"./ByTXDipk.js";import{o as W,c as E}from"./DaPjyIne.js";const I=""+new URL("../assets/skills-install.mqDCNO1p.webp",import.meta.url).href,Y={title:"agent-browser ชอบครับ ใช้มา 2 สัปดาห์ละ",description:"วิธีติดตั้ง agent-browser กับ Claude Code เชื่อมต่อเบราว์เซอร์ ติดตั้ง skill แล้วเริ่มใช้งานใน 5 นาที",date:"2026-03-28",published:!0,image:"/blog/agent-browser-ai-automation/og.png"},{title:Z,description:$,date:ee,published:se,image:oe}=Y;var q=b(`<p><a href="https://github.com/vercel-labs/agent-browser" rel="nofollow">agent-browser</a> is a CLI that lets AI agents interact with your browser — click, type, read elements, take screenshots. Think of it as giving Claude Code hands in the browser.</p> <p>If you’ve used Chrome DevTools MCP (30k tokens per call) or the Claude Chrome extension (permission prompts on every click), this is the lightweight alternative. ~100 tokens per snapshot instead of 30,000.</p> <h2>Install</h2> <pre class="shiki github-dark" style="background-color:#24292e;color:#e1e4e8" tabindex="0"><code><span class="line"><span style="color:#B392F0">npm</span><span style="color:#9ECBFF"> install</span><span style="color:#79B8FF"> -g</span><span style="color:#9ECBFF"> agent-browser</span></span></code></pre> <h2>Connect to Your Browser</h2> <p>Two options:</p> <h3>Option A: Use Your Existing Chrome</h3> <p>Open <code>chrome://inspect/#remote-debugging</code> in Chrome:</p> <img alt="Chrome remote debugging settings with 'Allow remote debugging' enabled"/> <p>Check “Allow remote debugging.” Now agent-browser connects to your actual browser with all your login sessions:</p> <pre class="shiki github-dark" style="background-color:#24292e;color:#e1e4e8" tabindex="0"><code><span class="line"><span style="color:#B392F0">agent-browser</span><span style="color:#79B8FF"> --cdp-url</span><span style="color:#9ECBFF"> ws://127.0.0.1:41175</span><span style="color:#9ECBFF"> snapshot</span><span style="color:#79B8FF"> -i</span></span></code></pre> <h3>Option B: Let agent-browser Launch One</h3> <pre class="shiki github-dark" style="background-color:#24292e;color:#e1e4e8" tabindex="0"><code><span class="line"><span style="color:#B392F0">agent-browser</span><span style="color:#9ECBFF"> open</span><span style="color:#9ECBFF"> http://localhost:5173</span></span></code></pre> <p>Launches a new browser instance. Simpler, but no existing sessions.</p> <h2>Install the Skill for Claude Code</h2> <p>The skill teaches Claude Code when and how to use agent-browser. Without it, Claude doesn’t know agent-browser exists.</p> <pre class="shiki github-dark" style="background-color:#24292e;color:#e1e4e8" tabindex="0"><code><span class="line"><span style="color:#B392F0">npx</span><span style="color:#9ECBFF"> skills</span><span style="color:#9ECBFF"> install</span><span style="color:#9ECBFF"> vercel-labs/agent-browser</span></span></code></pre> <img alt="Skills installer showing agent-browser skill ready to install"/> <p>Select “agent-browser” and install. Now Claude Code knows the commands.</p> <h2>What Claude Can Do With It</h2> <p>You don’t run these commands — Claude does. Once the skill is installed, Claude can:</p> <ul><li><strong>Read the page</strong> — see every button, input, link, and alert as a compact text snapshot (~100 tokens)</li> <li><strong>Click, type, submit</strong> — interact with forms, buttons, dropdowns</li> <li><strong>Take screenshots</strong> — capture visual state for layout checks</li> <li><strong>Read console/errors</strong> — see browser errors without you copy-pasting</li> <li><strong>Run JavaScript</strong> — evaluate expressions, check state</li> <li><strong>Manage tabs</strong> — open pages, switch between them</li></ul> <h2>What It Looks Like</h2> <p>You say: “The checkout form validation isn’t working.”</p> <p>Claude opens the page, submits an empty form, sees no error appears, reads the source, fixes the validator, waits for hot-reload, submits again, sees the validation error show up, and reports back: “Fixed. Required field validation was missing on email.”</p> <p>No back-and-forth. No “can you check if it works?” Claude verified its own fix.</p> <h2>Links</h2> <ul><li><a href="https://github.com/vercel-labs/agent-browser" rel="nofollow">GitHub: vercel-labs/agent-browser</a></li> <li><a href="https://github.com/nicepkg/nice-skills" rel="nofollow">Skills installer</a> — <code>npx skills install vercel-labs/agent-browser</code></li> <li>Related: <a href="https://github.com/nicepkg/nice-skills" rel="nofollow">Chrome DevTools MCP</a> has an experimental CLI too</li></ul>`,1),z=b(`<p><a href="https://github.com/vercel-labs/agent-browser" rel="nofollow">agent-browser</a> คือ CLI ที่ให้ AI agent interact กับเบราว์เซอร์ได้ — คลิก พิมพ์ อ่าน element จับภาพหน้าจอ เหมือนให้ Claude Code มีมือในเบราว์เซอร์</p> <p>ถ้าเคยใช้ Chrome DevTools MCP (30k token ต่อ call) หรือ Claude Chrome extension (ขอ permission ทุกคลิก) ตัวนี้คือทางเลือกที่เบากว่า ~100 token ต่อ snapshot แทน 30,000</p> <h2>ติดตั้ง</h2> <pre class="shiki github-dark" style="background-color:#24292e;color:#e1e4e8" tabindex="0"><code><span class="line"><span style="color:#B392F0">npm</span><span style="color:#9ECBFF"> install</span><span style="color:#79B8FF"> -g</span><span style="color:#9ECBFF"> agent-browser</span></span></code></pre> <h2>เชื่อมต่อกับเบราว์เซอร์</h2> <p>มี 2 วิธี:</p> <h3>วิธี A: ใช้ Chrome ที่เปิดอยู่</h3> <p>เปิด <code>chrome://inspect/#remote-debugging</code> ใน Chrome:</p> <img alt="หน้าตั้งค่า Chrome remote debugging เปิด 'Allow remote debugging' แล้ว"/> <p>ติ๊ก “Allow remote debugging” agent-browser เชื่อมต่อกับ Chrome จริงของคุณพร้อม login session ทั้งหมด:</p> <pre class="shiki github-dark" style="background-color:#24292e;color:#e1e4e8" tabindex="0"><code><span class="line"><span style="color:#B392F0">agent-browser</span><span style="color:#79B8FF">

1 --cdp-url</span><span style="color:#9ECBFF"> ws://127.0.0.1:41175</span><span style="color:#9ECBFF"> snapshot</span><span style="color:#79B8FF"> -i</span></span></code></pre> <h3>วิธี B: ให้ agent-browser เปิดเอง</h3> <pre class="shiki github-dark" style="background-color:#24292e;color:#e1e4e8" tabindex="0"><code><span class="line"><span style="color:#B392F0">agent-browser</span><span style="color:#9ECBFF"> open</span><span style="color:#9ECBFF"> http://localhost:5173</span></span></code></pre> <p>เปิด browser instance ใหม่ ง่ายกว่า แต่ไม่มี session เดิม</p> <h2>ติดตั้ง Skill สำหรับ Claude Code</h2> <p>Skill สอนให้ Claude Code รู้ว่า agent-browser คืออะไรและใช้ยังไง ถ้าไม่ติดตั้ง Claude ไม่รู้จัก agent-browser</p> <pre class="shiki github-dark" style="background-color:#24292e;color:#e1e4e8" tabindex="0"><code><span class="line"><span style="color:#B392F0">npx</span><span style="color:#9ECBFF"> skills</span><span style="color:#9ECBFF"> install</span><span style="color:#9ECBFF"> vercel-labs/agent-browser</span></span></code></pre> <img alt="Skills installer แสดง agent-browser skill พร้อมติดตั้ง"/> <p>เลือก “agent-browser” แล้วติดตั้ง Claude Code จะรู้จักคำสั่งทั้งหมด</p> <h2>Claude ทำอะไรได้บ้าง</h2> <p>คุณไม่ต้องรันคำสั่งเหล่านี้เอง — Claude ทำให้ พอติดตั้ง skill แล้ว Claude สามารถ:</p> <ul><li><strong>อ่านหน้าเว็บ</strong> — เห็นทุกปุ่ม input ลิงก์ และ alert เป็น text snapshot (~100 token)</li> <li><strong>คลิก พิมพ์ submit</strong> — interact กับฟอร์ม ปุ่ม dropdown</li> <li><strong>จับภาพหน้าจอ</strong> — capture สถานะสำหรับเช็ค layout</li> <li><strong>อ่าน console/error</strong> — เห็น browser error โดยไม่ต้อง copy-paste ให้</li> <li><strong>รัน JavaScript</strong> — evaluate expression เช็คสถานะ</li> <li><strong>จัดการ tab</strong> — เปิดหน้า สลับไปมา</li></ul> <h2>หน้าตาเป็นยังไง</h2> <p>คุณบอก: “Checkout form validation ไม่ทำงาน”</p> <p>Claude เปิดหน้าเว็บ submit ฟอร์มเปล่า เห็นว่าไม่มี error ขึ้น อ่าน source แก้ validator รอ hot-reload submit อีกครั้ง เห็น validation error ขึ้น แล้วรายงาน: “แก้แล้ว required field validation ที่ email หายไป”</p> <p>ไม่มี back-and-forth ไม่ต้อง “ลองเช็คให้ที” Claude verify งานของตัวเองได้</p> <h2>Links</h2> <ul><li><a href="https://github.com/vercel-labs/agent-browser" rel="nofollow">GitHub: vercel-labs/agent-browser</a></li> <li><a href="https://github.com/nicepkg/nice-skills" rel="nofollow">Skills installer</a> — <code>npx skills install vercel-labs/agent-browser</code></li> <li>เกี่ยวข้อง: <a href="https://github.com/ChromeDevTools/chrome-devtools-mcp" rel="nofollow">Chrome DevTools MCP</a> มี experimental CLI ด้วย</li></ul>`,1),G=b(`<img alt="agent-browser: jigsaw puzzle with 'play with its craft' as the missing piece"/> <div style="display: flex; gap: 0.5rem; margin-bottom: 2rem;"><button>EN</button> <button>TH</button></div> <!>`,1);function ae(L){let e=M("th");var m=G(),k=p(m),c=s(k,2),l=O(c);l.__click=()=>y(e,"en");let w;var g=s(l,2);g.__click=()=>y(e,"th");let C;R(c);var S=s(c,2);{var T=o=>{var t=q(),n=s(p(t),16),d=s(n,18);F(20),u(()=>{r(n,"src",E),r(d,"src",I)}),i(o,t)},A=o=>{var t=N(),n=p(t);{var d=h=>{var v=z(),f=s(p(v),16),D=s(f,18);F(20),u(()=>{r(f,"src",E),r(D,"src",I)}),i(h,v)};B(n,h=>{a(e)==="th"&&h(d)},!0)}i(o,t)};B(S,o=>{a(e)==="en"?o(T):o(A,!1)})}u(()=>{r(k,"src",W),_(l,`padding: 0.25rem 0.75rem; border-radius: 4px; border: 1px solid var(--border, #333); background: ${a(e)==="en"?"var(--accent, #e2e8f0)":"transparent"}; cursor: pointer;`),w=x(l,1,"",null,w,{active:a(e)==="en"}),_(g,`padding: 0.25rem 0.75rem; border-radius: 4px; border: 1px solid var(--border, #333); background: ${a(e)==="th"?"var(--accent, #e2e8f0)":"transparent"}; cursor: pointer;`),C=x(g,1,"",null,C,{active:a(e)==="th"})}),i(L,m)}P(["click"]);export{ae as default,Y as metadata};