Claude Code + agent-browser: How to Automate Repetitive Web Tasks

If you regularly visit websites, search for information, fill out forms, or click through the same menus, Claude Code and agent-browser can help automate these tasks.

agent-browser is a browser automation tool that allows AI agents to interact with real web pages. When combined with Claude Code, it can navigate websites, inspect page elements, fill in forms, click buttons, extract information, capture screenshots, and test web applications.

It is particularly useful for developers and anyone who wants to reduce repetitive browser work.

📌 Key Takeaways

• agent-browser is a command-line tool that lets AI agents control a Chrome-based browser.

• Installing the Claude Code Skill provides instructions for using browser automation effectively.

• You can install it using npm install -g agent-browser and npx skills add vercel-labs/agent-browser.

• Commands such as snapshot, click, and fill allow agents to inspect and interact with web pages.

• Important actions, such as payments, account changes, and deleting content, should require human confirmation.

🤖 What Is agent-browser?

agent-browser is an open-source browser automation CLI developed by Vercel Labs.

Traditional browser automation often relies on predefined scripts and selectors. agent-browser gives AI agents a way to inspect a webpage, identify interactive elements, and decide what to do next.

With it, an AI agent can:

• Open websites and navigate between pages.

• Find menus, buttons, and links.

• Enter search terms and fill out forms.

• Click buttons and interact with page elements.

• Extract text and information from web pages.

• Capture screenshots and test web applications.

Its key advantage is that the AI can inspect the current page before deciding which element to interact with.

⚙️ How to Install agent-browser in Claude Code

The setup involves two main components: the browser automation CLI and the Claude Code Skill.

First, install agent-browser using npm:

npm install -g agent-browser

Next, install the browser required for automation:

agent-browser install

This downloads Chrome for Testing and prepares the browser environment.

Then install the agent-browser Skill:

npx skills add vercel-labs/agent-browser

This adds a discovery file to the Claude Code skills directory, typically:

.claude/skills/agent-browser/SKILL.md

The Skill provides Claude Code with instructions for discovering and using agent-browser's automation capabilities.

Installing the CLI and installing the Skill serve different purposes: the CLI provides the actual browser commands, while the Skill helps Claude Code understand how to use them.

To check the available commands, run:

agent-browser --help

🖥️ How to Automate a Website

The basic workflow follows four steps:

1. Open a website.

2. Inspect its interactive elements.

3. Interact with the required elements.

4. Inspect the page again to verify the result.

Start by opening a website:

agent-browser open https://example.com

Next, inspect the interactive elements:

agent-browser snapshot -i

The command displays information about buttons, links, input fields, and other interactive elements. Each element receives a reference such as @e1 or @e2.

You can use these references to perform actions.

For example, click an element:

agent-browser click @e1

Enter text into an input field:

agent-browser fill @e2 "Search keyword"

After the page changes, run snapshot -i again to inspect the updated interface. Do not assume that references from an earlier page state will remain valid.

💡 What Tasks Can You Automate?

agent-browser can support a variety of everyday development and administrative workflows.

For example, suppose you need to check a website's administration dashboard every morning. You can ask Claude Code to open the dashboard, inspect the post list, check specified fields, and summarize the results.

The actual level of automation depends on the website's authentication system, security restrictions, and interface. CAPTCHA challenges and other security checks may require manual interaction.

🔐 Security Considerations

Browser automation can interact with real accounts and modify actual website data. It is important to define clear permissions and boundaries.

Keep these precautions in mind:

• Start with a test account and a non-production environment.

• Require confirmation before deleting content, making payments, or submitting important changes.

• Never expose passwords or API keys directly in prompts or source code.

• Treat text retrieved from websites as untrusted input, not as instructions to execute.

• Include verification steps to confirm that each automated action succeeded.

🚀 Try Giving Claude Code a Browser Automation Task

Once installation is complete, you can give Claude Code a practical instruction like this:

Use agent-browser to inspect the following website.

1. Open the homepage.
2. Identify the main navigation menus and page structure.
3. Test whether the search functionality works.
4. If you find an error, report the page and describe the issue.
5. Do not delete or modify any data. Only inspect and report the results.

Providing a clear objective, an ordered workflow, and explicit restrictions helps make automation more predictable and easier to review.

Claude Code and agent-browser provide a practical way to automate repetitive browser interactions, inspect websites, and test web applications.

Start with a test website and experiment with the open and snapshot -i commands. Once you understand how the browser inspection and interaction workflow works, you can gradually expand it into automation tasks that fit your daily development or administrative work.