Agent Browser for testing UI with Claude Code

This lesson introduces Vercel's agent-browser library as a faster, more reliable alternative to the Chrome integration for browser testing with Claude Code. You'll learn how it works under the hood — it's CLI-based, headless by default, and uses a snapshot-ref pattern that assigns IDs to interactive elements rather than analyzing the full page visually. This makes it significantly faster and more token-efficient than firing up a real browser.

After a quick walkthrough of installation and adding the agent-browser skill to your project, you'll watch a live demo where Claude builds a confetti celebration effect on the to-do list app, then uses agent-browser to navigate the app, interact with it, capture screenshots of the confetti in action, and record a video of the whole flow. The result is shareable visual proof artifacts — screenshots and video files — that confirm the feature works without anyone needing to manually test it. This is especially valuable on teams where code reviewers can see exactly what was built without recreating the environment themselves.

Topics covered:

• What agent-browser is and how it differs from Chrome integration (CLI-based, headless, snapshot-ref pattern)
• Why it's faster and more token-efficient
• Installing agent-browser and adding the Claude Code skill
• Live demo: building a confetti feature and having agent-browser visually verify it
• Capturing screenshots and recording video as proof artifacts
• How visual proof artifacts help with code review and team workflows