Give Claude a browser, explained by monkey
(both setups)
Claude Code builds your site but can't look at it until you give it a browser. Here are both ways to do it, Claude in Chrome and Playwright, with every command and some prompts to try.
Claude Code can write your whole website, but without a browser it can't open the page and click around the way you do, so you end up copying errors back and forth. Give it a browser and it opens the site, clicks the buttons and reads the page by itself. There are two easy ways:
- Claude in Chrome: Claude uses your real browser, already logged in to your sites. Needs a Claude plan (Pro, Max, Team or Enterprise).
- Playwright: Claude drives a separate browser. Needs no account, just Node.js 18 or later.
Option A: Claude in Chrome
What you need:
- The Claude in Chrome extension, version 1.0.36 or later, in Chrome, Edge or another Chromium browser like Brave or Arc.
- A direct Anthropic plan (Pro, Max, Team or Enterprise), signed in to Claude Code with /login.
Then start Claude Code with the --chrome flag:
claude --chrome
- Inside the session, /chrome checks the connection.
- Pick Enabled by default in /chrome and you can skip --chrome from then on. The catch: the browser tools then load in every session and take up context. If you're watching context, leave it off and use --chrome when you need it.
- Claude opens its own tabs and shares your browser's logins, so it can work in any site you're already signed into, like Gmail, Notion or Google Docs, with no API setup.
- When it hits a login page or a CAPTCHA, it stops and asks you to handle it.
Option B: Playwright (no account needed)
Run this in your terminal, not inside a Claude session:
claude mcp add playwright -- npx -y @playwright/mcp@latest
Then start Claude Code and try:
Use playwright to open https://example.com and tell me the page title
Why the two dashes matter
That command has two halves. Everything before the -- is for Claude Code. Everything after it is the command that starts the Playwright server. Leave the -- out and Claude Code tries to read the server's own flags as its own, and the setup breaks.
- claude mcp add: add a tool server to Claude Code
- playwright: the name you're giving it
- --: the end of Claude Code's own options
- npx -y @playwright/mcp@latest: the command that starts the server (npx downloads and runs the latest version)
Options for Claude Code go before the --. For example, to add Playwright to all your projects instead of just this one:
claude mcp add --scope user playwright -- npx -y @playwright/mcp@latest
Check it worked:
claude mcp list # look for ✔ Connected
claude mcp get playwright # shows the command it saved
- By default the server is added just for you, in this project. --scope user adds it to all your projects, and --scope project shares it with your team through a .mcp.json file.
- Inside a session, /mcp shows your servers and reconnects them.
- The first start can take longer than the 30-second startup limit while npx downloads Playwright. If it times out, raise the limit with MCP_TIMEOUT.
- Every connected server takes up a little context, so remove the ones you don't use.
Prompts to try
Start your site first, and swap http://localhost:3000 for wherever it runs.
Open http://localhost:3000, click every button and link on the home page, and tell me which ones do nothing or show an error. Then fix them and check again.
Fill in the sign-up form on http://localhost:3000 with test details, submit it, and tell me exactly what happens. If it breaks, fix the code and try again until it works.
Open http://localhost:3000 and compare it with what I asked you to build. List anything that's missing or looks broken, then fix it and check the page again.
With Claude in Chrome, it can also work in the sites you're logged into:
Open my Notion page called Bug list, read the bugs on it, and fix the first three in this project. Tell me which ones you fixed.
Monkey believe in you. Now go build.
follow @nocodemonkey
