Guide · Agent skill
How to use the Dev Browser Automation agent skill (dev-browser)
Updated · written with AI from the project's own documentation and checked against our catalogue data
The dev-browser skill gives an AI agent a browser it can control. Once installed, it can open websites, click buttons, fill in forms, take screenshots, read page content and extract data. This guide explains what the skill does, how to install it, how to trigger it with plain requests, and what it needs and risks before you run it.
Dev Browser AutomationMemTensor/MemOS · Apache-2.0 Download the skill Quick start
- 1Download and unzip. Download the dev-browser ZIP from this page and unzip it into ~/.claude/skills/ or a project's .claude/skills/ folder.
- 2Install dependencies. Open the skill folder and run npm i so tsx and the project dependencies are available.
- 3Pick a mode. Use standalone mode for a fresh Chromium session, or extension mode to work inside your logged-in Chrome.
- 4Start the browser. Run server.sh for standalone mode and wait for the Ready message. For extension mode, start the relay and wait for Extension connected.
- 5Ask in plain language. Describe the site and goal, such as going to a URL, filling a form or taking a screenshot.
- 6Check results and iterate. Review the logged output or screenshot, then ask for the next small step.
What the dev-browser skill lets the agent do
The skill is browser automation that keeps page state between steps. The agent writes small scripts, runs each one, checks the output, and keeps the page open so work can continue. Once part of a workflow works and repeats, the agent can combine it into a single script.
The skill's own guidance is to use the accessibility snapshot to find elements on unfamiliar pages, take screenshots to see what the user sees, and read the source code first when a site is local or source-available.
- Navigate to URLs and wait for pages to load
- Discover clickable elements and fill in forms
- Take screenshots, including full-page captures
- Read page text and extract data
- Test web apps you are building
- Scrape larger datasets by replaying network requests (see the scraping guide in the skill)
How to install the dev-browser skill
Download the dev-browser ZIP from this page. Then choose one of two install locations: unzip it into ~/.claude/skills/ for personal use across projects, or into a project's .claude/skills/ folder to limit it to that project.
If you use the Claude apps instead, upload the skill under Settings → Capabilities → Skills.
The skill's commands are written as skills/dev-browser/, so after unzipping, run them from the folder that contains dev-browser and adjust paths to match where you put it.
- Option A: unzip into ~/.claude/skills/
- Option B: unzip into your project's .claude/skills/
- Option C: upload in the Claude apps under Settings → Capabilities → Skills
Choose standalone mode or extension mode
Standalone mode is the default. It launches a new Chromium browser for a fresh automation session. Start the server from the skill folder and wait for the Ready message before running scripts. Add --headless if you want no visible window.
Extension mode connects the agent to your own Chrome browser. Use it when you are already logged into a site and want the agent to work inside that session, or when you ask the agent to use the extension. You need the separate dev-browser extension, downloaded from GitHub, and you must launch and activate it. The relay server prints Waiting for extension to connect... and then Extension connected when the browser is ready.
- Standalone: fresh Chromium session, started with server.sh
- Extension: your real Chrome session, started with the relay and the extension
- If the extension is not connected, the agent will ask you to launch and activate it
./skills/dev-browser/server.sh &Trigger the skill with natural requests
You do not need a special command. The skill activates on browser-related requests. The description lists phrases such as go to [url], click on, fill out the form, take a screenshot, scrape, automate, test the website and log into, along with any other browser interaction request.
Be specific about the site, the goal and the mode. If you do not say which mode you want, the agent should ask. Naming a descriptive page, such as checkout or login, also helps the agent keep track of work.
- "Go to example.com and tell me the main headline."
- "Fill out the signup form on my staging site with test data and screenshot the result."
- "Take a screenshot of the pricing page."
- "Test the website's login flow and report any errors."
Run your first script
Scripts run from the skill folder using an inline heredoc. Each script should do one thing, such as navigate, click, fill or check. It should log state at the end so the agent can decide the next step.
Keep page.evaluate() code as plain JavaScript because it runs in the browser, not in TypeScript. Disconnect at the end of each script. Pages stay open on the server, so the next script can pick them up by name.
- Use the client's page(name) call to create or reuse a named page
- Call client.disconnect() to exit; pages persist
- Write files to tmp/ only when a script is reused, complex, or requested
cd skills/dev-browser && npx tsx <<'EOF'
import { connect, waitForPageLoad } from "@/client.js";
const client = await connect();
const page = await client.page("example");
await page.goto("https://example.com");
await waitForPageLoad(page);
console.log({ title: await page.title(), url: page.url() });
await client.disconnect();
EOFSafety, requirements and limits
The skill runs scripts and uses the network. It needs Node.js with npm and npx, plus tsx and project dependencies installed with npm i inside the skill folder. It also uses Playwright and rebrowser-playwright, Chromium for standalone mode, and Chrome plus the dev-browser extension for extension mode.
In extension mode the agent acts with your real logged-in session. The skill does not describe an approval step before each action, so avoid using it on banking or email accounts. The skill also recommends API replay over DOM scraping for large datasets, but you should check a site's terms of service before bulk collection.
- Run scripts only from the skill folder, which holds the @/ import config
- Avoid extension mode for sensitive accounts such as banking or email
- Check terms of service before bulk scraping
- For a simple one-off answer from a page, a plain web search or fetch is faster and lower risk
Troubleshoot and debug a session
Page state persists after a failure, so you can inspect it without starting over. The skill's error recovery approach is to reconnect to the named page, take a screenshot, and log the URL, title and first part of the body text.
If a scraping script returns nothing, the skill advises capturing one request first, inspecting its response shape, extracting a few items, and only then adding pagination. Many failures come from a small path mismatch, such as data.user.timeline versus data.user.result.timeline.
- Reconnect to the same named page and screenshot it
- Log url, title and body text to see the current state
- Check the response structure before writing extraction code
- Confirm the extension shows as connected in extension mode
What people use it for
- Testing a web app you are building by clicking through flows and capturing screenshots
- Pulling structured data from web pages into a table for analysis
- Filling repetitive web forms with test or approved data
- Checking a page's current content or layout for a quick visual review
Frequently asked questions
Is the dev-browser skill free to use?
The skill is published under the Apache-2.0 licence, as stated on this page. Check the licence file in the source repository for the full terms, and note that it requires Node.js, Chromium or Chrome, and a separate extension for extension mode.
What do I need before installing dev-browser?
You need Node.js with npm and npx, and you run npm i inside the skill folder to install tsx and project dependencies. Standalone mode uses Chromium, while extension mode needs Chrome and the dev-browser extension downloaded from GitHub.
How do I install the dev-browser skill in Claude?
Download the ZIP from this page and unzip it into ~/.claude/skills/ or a project's .claude/skills/ folder. Alternatively, upload it in the Claude apps under Settings → Capabilities → Skills.
What is the difference between standalone mode and extension mode?
Standalone mode launches a new Chromium window for a fresh session. Extension mode connects to your own Chrome through the dev-browser extension, so the agent can act inside sessions where you are already logged in.
Is it safe to let an AI agent use my logged-in browser?
Extension mode acts with your real session, and the skill does not describe an approval step before each action. Avoid using it on banking or email accounts, and review what the agent does on any account that matters.
How does dev-browser compare with other browser automation tools?
This page does not compare it with other tools. The skill is built on Playwright and rebrowser-playwright, and it adds persistent named pages and accessibility-snapshot element discovery. For a simple question about a page, a plain web search or fetch is quicker.
New agent skills, repos and AI tools — every week
The best new skills and open-source projects, the fastest-growing repos, and one free prompt. Five minutes to read. Unsubscribe anytime.
Our verdict
Use dev-browser if you are a developer testing a web app, an analyst pulling web data into structured form, or someone automating repetitive form work and you are comfortable installing Node.js and running scripts. Pick something else for simple one-off page questions, or for sensitive accounts such as banking or email in extension mode.
Download the skill