Show HN: Browser AI – Use Playwright Without Blowing Up Your Context Window

Hey HN! I built Browser AI after getting frustrated with the official Playwright MCP server in Claude Code. If you've used it, you know the pain:

  - 20+ separate tools that Claude has to juggle (click, fill, navigate, wait_for_selector, etc.)

  - Context window explosions from verbose screenshot data and DOM snapshots

  - Constant tool selection errors where Claude picks the wrong tool or forgets parameters
  

Browser AI wraps Playwright MCP with a single natural language interface. Instead of Claude managing dozens of tools, you get one: browser_ai.execute. Just tell it what you want in plain English:

  "Go to news.ycombinator.com and click on the first comment link"

  "Fill out the login form with test@example.com and submit"

  "Take a screenshot of the pricing table"

The magic: Browser AI uses Claude (via your Claude Code subscription) to interpret your commands and translate them into the right Playwright calls. This means:

  - 80% less context usage: No more massive tool definitions or snapshot data in your conversation

  - Actually works: The subagent handles tool selection, so Claude doesn't have to

  - OAuth auth: Uses your existing Claude Code subscription, no separate API keys needed

  - Smart error recovery: If something fails, you get helpful feedback, not cryptic Playwright errors

Technical details:

  - Built with TypeScript and the MCP SDK
  
  - Uses AI SDK
  
  - Open source (MIT)

Installation is two lines:

npx @qckfx/browser-ai --auth

claude mcp add browser-ai -- npx --yes @qckfx/browser-ai@latest

I've been using this for web scraping and E2E test writing, and it's completely changed how I work with browser automation in Claude Code. Would love to hear if this solves similar pain points for others!

GitHub: https://github.com/qckfx/browser-ai

npm: https://www.npmjs.com/package/@qckfx/browser-ai