trending/browser-use
1
0
Fork 0
mirror of https://github.com/browser-use/browser-use.git synced 2026-10-02 04:04:36 +08:00
Code Issues Packages Projects Releases Wiki Activity

docs: feature driving-test demo and clarify Browser Use product choices (#5753)

Browse Source 
The README's older form and extraction demos did not reflect the current
product or website. Feature Johannes's public driving-test booking demo
and explain the local, managed-browser, and hosted-agent options using
the website's existing artwork.

Reuse the current light/dark product diagrams from the SDK docs, with a
separate expandable vertical view for mobile. The Python quickstart
calls OpenAI directly with `ChatOpenAI(model='gpt-5.6-luna',
reasoning_effort='xhigh')`, an `OPENAI_API_KEY`, and explicit `.env`
loading. Preserve the benchmark plot and its qualification.

Sources: [driving-test
demo](https://x.com/mathisdittrich/status/2078619618265141560), [public
showcase](https://browser-use.com/showcase), and [product
guide](https://docs.browser-use.com/cloud/which-product). Asset
provenance is recorded in `static/readme/README.md`.

Validation:
- Pre-commit and `git diff --check` passed.
- All three Python snippets parse; local image references resolve and
all four SVGs parse.
- Verified actual GitHub rendering at desktop and 390px mobile widths,
including the vertical diagram disclosure. The product table fits
without horizontal scrolling.
- New website/docs links return HTTP 200. No live model invocation was
performed.
This commit is contained in:
Magnus Müller
2026-09-09 11:50:06 -07:00
committed by GitHub
parent b1f1162c4c cb66bf1313
commit ac0e918bbf
10 changed files with 321 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files
README.md
+71 -32
View File
@@ -37,42 +37,81 @@
<a href="https://cloud.browser-use.com?utm_source=github&utm_medium=readme-badge-cloud"><img src="https://media.browser-use.tools/badges/cloud" height="48" alt="Browser-Use Cloud"></a>
</div>
</br>
<br/>
# What can Browser Use do?
Browser Use lets an AI agent use a web browser the same way humans do — it opens pages, clicks buttons, types, and fills in forms. You describe the task, and it completes it. For example, you can have it:
Browser Use gives AI agents a browser. Describe a task, and the agent navigates websites, fills forms, and gets the work done.
### Book a driving test
### 📋 Fill Forms
#### Task: "Fill in this job application with my resume and information."
Find an available slot, handle the CAPTCHA, and schedule the test with Browser Use V4.
![Job Application Demo](https://github.com/user-attachments/assets/57611d8e-0474-4de6-84b7-37a0c0cd27e7)
[![Johannes's Browser Use V4 driving-test booking demo](static/readme/driving-test.jpg)](https://x.com/mathisdittrich/status/2078619618265141560)
[Example code ↗](https://github.com/browser-use/browser-use/blob/main/examples/use-cases/apply_to_job.py)
### 🍎 Extract data
#### Task: "Extract structured data about my followers and export it as a CSV."
https://github.com/user-attachments/assets/485fd3ec-61b9-4afc-9e86-ee9b85acb592
[Browser Use Cloud Docs ↗](https://docs.browser-use.com/cloud/quickstart)
[Watch Johannes's demo ↗](https://x.com/mathisdittrich/status/2078619618265141560)
[Explore more demos and prompts ↗](https://browser-use.com/showcase)
<br/>
# Start with Browser Use Cloud
# Which Browser Use do I need?
<table>
<tr>
<td width="32%" valign="middle">
<a href="#quickstart"><img src="static/readme/local-agent.jpg" alt="A white monolith opened like a book, with people walking in" width="100%"></a>
</td>
<td width="68%" valign="top">
<h3>Your agent, your browser</h3>
<p>Connect your coding agent with the CLI, or build automation with the Python library.</p>
<a href="#quickstart">Start locally ↗</a>
</td>
</tr>
<tr>
<td width="32%" valign="middle">
<a href="https://docs.browser-use.com/cloud/browser/quickstart"><img src="static/readme/cloud-browsers.jpg" alt="A key-shaped bridge across a canyon" width="100%"></a>
</td>
<td width="68%" valign="top">
<h3>Your agent, our browsers</h3>
<p>Connect your agent to cloud browsers with stealth, proxies, and saved profiles.</p>
<a href="https://docs.browser-use.com/cloud/browser/quickstart">Connect a cloud browser ↗</a>
</td>
</tr>
<tr>
<td width="32%" valign="middle">
<a href="https://docs.browser-use.com/cloud/agent/quickstart"><img src="static/readme/hosted-agent.jpg" alt="A hand holding a magnifier over glass carriages carrying cities" width="100%"></a>
</td>
<td width="68%" valign="top">
<h3>Our agent, our cloud</h3>
<p>Send a task to V4. We run the agent, browser, and infrastructure.</p>
<a href="https://docs.browser-use.com/cloud/agent/quickstart">Run a hosted task ↗</a>
</td>
</tr>
</table>
<picture>
<source media="(prefers-color-scheme: dark)" srcset="static/readme/which-product-dark.svg">
<img alt="Choose your agent, CLI, and browser: local agents can use real Chrome or cloud browsers; hosted V4 runs the full stack. Profile Sync is a separate step." src="static/readme/which-product-light.svg" width="100%">
</picture>
<details>
<summary>View the diagram vertically</summary>
<picture>
<source media="(prefers-color-scheme: dark)" srcset="static/readme/which-product-dark-mobile.svg">
<img alt="Vertical view of the local-agent and hosted-cloud paths, including explicit Profile Sync" src="static/readme/which-product-light-mobile.svg" width="360">
</picture>
</details>
[How the pieces fit together ↗](https://docs.browser-use.com/cloud/which-product)
Eligible new Google, GitHub or Microsoft signups get a one-time **$15 Cloud credit**. No card required; email/password signups do not qualify. [Pricing and eligibility](https://browser-use.com/pricing.md).
- **Hosted agent:** [V4 quickstart](https://docs.browser-use.com/cloud/agent/quickstart), using `browser-use-sdk`.
- **Your own agent:** [Managed browser quickstart](https://docs.browser-use.com/cloud/browser/quickstart).
- **Local framework:** the `browser-use` Python library below.
# Quickstart
If you want to use Browser Use in your agent (Claude Code, Codex, Cursor, Hermes, OpenClaw, etc.), paste this prompt, and it sets everything up itself:
If you want to use Browser Use in your agent (Claude Code, Codex, OpenCode, Cursor, Hermes, OpenClaw, etc.), paste this prompt, and it sets everything up itself:
```text
Install or upgrade browser-use to the latest stable version with uv using Python 3.12, run `browser-use skill install` to register the skill, and connect it to my browser. If setup or connection fails, follow https://github.com/browser-use/browser-harness/blob/main/install.md.
@@ -93,13 +132,11 @@ uv add browser-use
# or: pip install browser-use
```
**2. Add your LLM API key to `.env`**. Get one from [Browser Use Cloud](https://cloud.browser-use.com/new-api-key?utm_source=github&utm_medium=readme-quickstart-api-key), or bring your own provider key:
**2. Add your [OpenAI API key](https://platform.openai.com/api-keys) to `.env`:**
```bash
# .env
BROWSER_USE_API_KEY=your-key
# GOOGLE_API_KEY=your-key
# ANTHROPIC_API_KEY=your-key
OPENAI_API_KEY=your-key
```
**3. Run your first agent:**
@@ -107,15 +144,15 @@ BROWSER_USE_API_KEY=your-key
```python
import asyncio
from browser_use import Agent, ChatBrowserUse
from browser_use import Agent, ChatOpenAI
from dotenv import load_dotenv
load_dotenv()
async def main():
agent = Agent(
task="Find the number of stars of the browser-use repo",
llm=ChatBrowserUse(model='openai/gpt-5.5'),
# llm=ChatBrowserUse(model='bu-2-0-mini-preview'), # Browser Use's optimized model
# llm=ChatOpenAI(model='gpt-5.5'),
# llm=ChatAnthropic(model='claude-opus-4-8'), # Sonnet also works well
llm=ChatOpenAI(model='gpt-5.6-luna', reasoning_effort='xhigh'),
)
history = await agent.run()
@@ -123,11 +160,11 @@ if __name__ == "__main__":
asyncio.run(main())
```
Check out the [library docs](https://docs.browser-use.com/open-source/introduction) and the [cloud docs](https://docs.cloud.browser-use.com?utm_source=github&utm_medium=readme-cloud-docs) for more!
Check out the [library docs](https://docs.browser-use.com/open-source/introduction) and the [cloud docs](https://docs.browser-use.com/cloud/quickstart) for more!
<br/>
# Open Source vs Cloud
# Benchmark
<img alt="Browser Use Benchmark v2 - Mean rubric score by model and cost per task" src="static/hard_benchmark_v2.jpg" width="100%">
@@ -135,6 +172,8 @@ This [very hard benchmark](https://github.com/browser-use/benchmark) targets the
Browser Use is also **#1 on the [Odysseys leaderboard](https://odysseysbench.com/leaderboard)** with an 87.4% average, ahead of computer-use agents from OpenAI, Anthropic, Google, and Microsoft. Odysseys measures the agent's performance on 200 long-horizon web tasks.
# Open Source vs Cloud
**Use the Open-Source Agent**
- Free, and runs on your own machine
- Deep code-level integration and control: pick your LLM, customize the agent's behavior
@@ -195,7 +234,7 @@ Yes. `ChatBrowserUse` accepts provider-prefixed model ids, so a single `BROWSER_
```python
from browser_use import Agent, ChatBrowserUse
llm = ChatBrowserUse(model='anthropic/claude-sonnet-4-6') # or 'openai/gpt-5.5', 'google/gemini-3-pro'
llm = ChatBrowserUse(model='anthropic/claude-sonnet-4-6') # or 'google/gemini-3-pro'
agent = Agent(task='...', llm=llm)
```
static/readme/README.md
+36
View File
@@ -0,0 +1,36 @@
# README artwork and demo sources
These assets reuse Browser Use's existing website and documentation artwork.
No demo footage was generated for this README.
## Product artwork
Copied unchanged from the [Browser Use website](https://browser-use.com),
`browser-use/website` commit `f07970a`:
| Local file | Website source |
| --- | --- |
| `local-agent.jpg` | `/lander/plates/oss-14b77bfd.jpg` |
| `cloud-browsers.jpg` | `/lander/plates/browsers-8dd60aa0.jpg` |
| `hosted-agent.jpg` | `/lander/plates/agents-be1dd941.jpg` |
## Product map
The four `which-product-*.svg` files are copied unchanged from
[`browser-use/sdk`, `docs/cloud/images`](https://github.com/browser-use/sdk/tree/main/docs/cloud/images).
They were introduced in [SDK PR #241](https://github.com/browser-use/sdk/pull/241).
Keep the local/cloud routes and separate Profile Sync path aligned with the
[product guide](https://docs.browser-use.com/cloud/which-product).
## Demo thumbnail
| Local file | Published source |
| --- | --- |
| `driving-test.jpg` | [Johannes Dittrich's driving-test demo](https://x.com/mathisdittrich/status/2078619618265141560) |
The README links to the playable public recording. Keep the poster and
caption consistent with that recording when updating them.
`driving-test.jpg` is the 8-second frame of Johannes's public recording,
showing the appointment-location selection. The personal contact fields are
not in this frame.
static/readme/cloud-browsers.jpg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 165 KiB

static/readme/driving-test.jpg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 57 KiB

static/readme/hosted-agent.jpg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 211 KiB

static/readme/local-agent.jpg
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 147 KiB

static/readme/which-product-dark-mobile.svg
+56
View File
@@ -0,0 +1,56 @@
<svg xmlns="http://www.w3.org/2000/svg" width="360" height="704" viewBox="0 0 360 704" role="img" aria-labelledby="title desc">
<title id="title">Choose your agent, CLI and browser</title>
<desc id="desc">Both columns share three aligned rows: agent, CLI, browser. On your computer, choose Claude Code, Codex, OpenCode or Hermes Agent, then Playwright CLI or Browser Use CLI. Both CLIs can use real Chrome or the single Cloud Browser in our cloud. Hosted V4 runs OpenCode, Browser Use CLI and that Cloud Browser. Profile Sync copies selected cookies from real Chrome to a cloud profile; it is a separate, explicit step. Send a prompt through the V4 API and get a result back.</desc>
<defs><marker id="gray-arrow" markerWidth="7" markerHeight="7" refX="6" refY="3.5" orient="auto"><path d="M0 0L7 3.5L0 7Z" fill="#A1A1AA"/></marker><marker id="orange-arrow" markerWidth="7" markerHeight="7" refX="6" refY="3.5" orient="auto"><path d="M0 0L7 3.5L0 7Z" fill="#FFAA66"/></marker></defs>
<rect width="360" height="704" fill="#18181B"/><g font-family="Inter, ui-sans-serif, system-ui, sans-serif">
<rect x="196" y="10" width="156" height="686" rx="12" fill="#29211B" stroke="#835733" stroke-width="1.7"/>
<text x="90" y="39" fill="#FAFAFA" font-size="16" font-weight="750" text-anchor="middle">YOUR COMPUTER</text>
<text x="90" y="63" fill="#C0C0C8" font-size="16" font-weight="450" text-anchor="middle">Choose each part</text>
<text x="274" y="39" fill="#FAFAFA" font-size="16" font-weight="750" text-anchor="middle">OUR CLOUD</text>
<text x="274" y="63" fill="#FFAA66" font-size="16" font-weight="600" text-anchor="middle">Send a prompt.</text>
<text x="274" y="84" fill="#C0C0C8" font-size="16" font-weight="450" text-anchor="middle">Get a result.</text>
<rect x="8" y="95" width="166" height="128" rx="12" fill="#27272A" stroke="#A1A1AA" stroke-width="1.7"/>
<text x="91" y="119" fill="#C0C0C8" font-size="16" font-weight="700" text-anchor="middle">YOUR AGENT</text>
<text x="91" y="143" fill="#FAFAFA" font-size="16" font-weight="600" text-anchor="middle">Claude Code</text>
<text x="91" y="165" fill="#FAFAFA" font-size="16" font-weight="600" text-anchor="middle">Codex · OpenCode</text>
<text x="91" y="187" fill="#FAFAFA" font-size="16" font-weight="600" text-anchor="middle">Hermes Agent</text>
<rect x="208" y="95" width="132" height="128" rx="12" fill="#27272A" stroke="#A1A1AA" stroke-width="1.7"/>
<text x="274" y="166" fill="#FAFAFA" font-size="18" font-weight="750" text-anchor="middle">OpenCode</text>
<path d="M91 223V253" fill="none" stroke="#A1A1AA" stroke-width="2" stroke-linejoin="round" marker-end="url(#gray-arrow)"/>
<path d="M274 223V253" fill="none" stroke="#A1A1AA" stroke-width="2" stroke-linejoin="round" marker-end="url(#gray-arrow)"/>
<rect x="8" y="263" width="166" height="92" rx="12" fill="#3A281A" stroke="#FFAA66" stroke-width="1.7"/>
<text x="91" y="292" fill="#FAFAFA" font-size="16" font-weight="750" text-anchor="middle">Playwright CLI</text>
<text x="91" y="316" fill="#C0C0C8" font-size="16" font-weight="450" text-anchor="middle">or</text>
<text x="91" y="340" fill="#FAFAFA" font-size="16" font-weight="600" text-anchor="middle">Browser Use CLI</text>
<rect x="208" y="263" width="132" height="92" rx="12" fill="#3A281A" stroke="#FFAA66" stroke-width="1.7"/>
<text x="274" y="303" fill="#FAFAFA" font-size="16" font-weight="750" text-anchor="middle">Browser Use</text>
<text x="274" y="326" fill="#FAFAFA" font-size="16" font-weight="750" text-anchor="middle">CLI</text>
<path d="M50 355V379H132V355" fill="none" stroke="#A1A1AA" stroke-width="2" stroke-linejoin="round"/>
<path d="M50 379V406H87V425" fill="none" stroke="#A1A1AA" stroke-width="2" stroke-linejoin="round" marker-end="url(#gray-arrow)"/>
<path d="M132 379H183V489H202" fill="none" stroke="#FFAA66" stroke-width="2" stroke-linejoin="round" marker-end="url(#orange-arrow)"/>
<path d="M274 355V425" fill="none" stroke="#FFAA66" stroke-width="2" marker-end="url(#orange-arrow)"/>
<circle cx="50" cy="379" r="3" fill="#A1A1AA"/>
<circle cx="132" cy="379" r="3" fill="#FFAA66"/>
<rect x="18" y="435" width="138" height="108" rx="12" fill="#18181B" stroke="#A1A1AA" stroke-width="1.7"/>
<path d="M18 462H156" fill="none" stroke="#A1A1AA" stroke-width="2" stroke-linejoin="round"/>
<circle cx="32" cy="449" r="2.6" fill="#A1A1AA"/>
<circle cx="42" cy="449" r="2.6" fill="#A1A1AA"/>
<circle cx="52" cy="449" r="2.6" fill="#A1A1AA"/>
<text x="87" y="491" fill="#FAFAFA" font-size="16" font-weight="750" text-anchor="middle">Real Chrome</text>
<text x="87" y="514" fill="#C0C0C8" font-size="16" font-weight="450" text-anchor="middle">your tabs,</text>
<text x="87" y="532" fill="#C0C0C8" font-size="16" font-weight="450" text-anchor="middle">cookies, logins</text>
<rect x="208" y="435" width="132" height="108" rx="12" fill="#3A281A" stroke="#FFAA66" stroke-width="1.7"/>
<path d="M208 462H340" fill="none" stroke="#FFAA66" stroke-width="2" stroke-linejoin="round"/>
<circle cx="222" cy="449" r="2.6" fill="#FFAA66"/>
<circle cx="232" cy="449" r="2.6" fill="#FFAA66"/>
<circle cx="242" cy="449" r="2.6" fill="#FFAA66"/>
<text x="274" y="491" fill="#FAFAFA" font-size="16" font-weight="750" text-anchor="middle">Cloud Browser</text>
<text x="274" y="514" fill="#C0C0C8" font-size="16" font-weight="450" text-anchor="middle">profiles, stealth,</text>
<text x="274" y="532" fill="#C0C0C8" font-size="16" font-weight="450" text-anchor="middle">proxies</text>
<path d="M87 543V573H274V553" fill="none" stroke="#A1A1AA" stroke-width="2" stroke-dasharray="6 5" stroke-linejoin="round" marker-end="url(#gray-arrow)"/>
<rect x="80" y="580" width="204" height="26" rx="4" fill="#18181B"/>
<text x="182" y="599" fill="#C0C0C8" font-size="16" font-weight="600" text-anchor="middle">Profile Sync · cookies</text>
<text x="89" y="651" fill="#C0C0C8" font-size="16" font-weight="600" text-anchor="middle">Both CLIs.</text>
<text x="89" y="673" fill="#C0C0C8" font-size="16" font-weight="600" text-anchor="middle">Either browser.</text>
<text x="274" y="651" fill="#FFAA66" font-size="16" font-weight="600" text-anchor="middle">Hosted V4 API</text>
</g></svg>
Side by Side

After

Width:  |  Height:  |  Size: 6.0 KiB

static/readme/which-product-dark.svg
+51
View File
@@ -0,0 +1,51 @@
<svg xmlns="http://www.w3.org/2000/svg" width="1200" height="674" viewBox="0 0 1200 674" role="img" aria-labelledby="title desc">
<title id="title">Choose your agent, CLI and browser</title>
<desc id="desc">Both columns share three aligned rows: agent, CLI, browser. On your computer, choose Claude Code, Codex, OpenCode or Hermes Agent, then Playwright CLI or Browser Use CLI. Both CLIs can use real Chrome or the single Cloud Browser in our cloud. Hosted V4 runs OpenCode, Browser Use CLI and that Cloud Browser. Profile Sync copies selected cookies from real Chrome to a cloud profile; it is a separate, explicit step. Send a prompt through the V4 API and get a result back.</desc>
<defs><marker id="gray-arrow" markerWidth="7" markerHeight="7" refX="6" refY="3.5" orient="auto"><path d="M0 0L7 3.5L0 7Z" fill="#A1A1AA"/></marker><marker id="orange-arrow" markerWidth="7" markerHeight="7" refX="6" refY="3.5" orient="auto"><path d="M0 0L7 3.5L0 7Z" fill="#FFAA66"/></marker></defs>
<rect width="1200" height="674" fill="#18181B"/><g font-family="Inter, ui-sans-serif, system-ui, sans-serif">
<rect x="648" y="18" width="524" height="620" rx="17" fill="#29211B" stroke="#835733" stroke-width="2.5"/>
<text x="298" y="62" fill="#FAFAFA" font-size="25" font-weight="750" text-anchor="middle">YOUR COMPUTER</text>
<text x="298" y="91" fill="#C0C0C8" font-size="17" font-weight="450" text-anchor="middle">Choose each part</text>
<text x="910" y="62" fill="#FAFAFA" font-size="25" font-weight="750" text-anchor="middle">OUR CLOUD</text>
<text x="910" y="91" fill="#C0C0C8" font-size="17" font-weight="450" text-anchor="middle">Send a prompt, get a result</text>
<rect x="48" y="128" width="500" height="96" rx="17" fill="#27272A" stroke="#A1A1AA" stroke-width="2.5"/>
<text x="298" y="161" fill="#C0C0C8" font-size="14" font-weight="700" text-anchor="middle">YOUR AGENT</text>
<text x="298" y="195" fill="#FAFAFA" font-size="18" font-weight="600" text-anchor="middle">Claude Code · Codex · OpenCode · Hermes Agent</text>
<rect x="784" y="128" width="252" height="96" rx="17" fill="#27272A" stroke="#A1A1AA" stroke-width="2.5"/>
<text x="910" y="184" fill="#FAFAFA" font-size="23" font-weight="750" text-anchor="middle">OpenCode</text>
<path d="M298 224V245H167V270" fill="none" stroke="#A1A1AA" stroke-width="2.5" stroke-linejoin="round" marker-end="url(#gray-arrow)"/>
<path d="M298 245H429V270" fill="none" stroke="#A1A1AA" stroke-width="2.5" stroke-linejoin="round" marker-end="url(#gray-arrow)"/>
<path d="M910 224V270" fill="none" stroke="#A1A1AA" stroke-width="2.5" stroke-linejoin="round" marker-end="url(#gray-arrow)"/>
<rect x="48" y="280" width="238" height="78" rx="17" fill="#27272A" stroke="#A1A1AA" stroke-width="2.5"/>
<text x="167" y="327" fill="#FAFAFA" font-size="21" font-weight="750" text-anchor="middle">Playwright CLI</text>
<rect x="310" y="280" width="238" height="78" rx="17" fill="#3A281A" stroke="#FFAA66" stroke-width="2.5"/>
<text x="429" y="327" fill="#FAFAFA" font-size="21" font-weight="750" text-anchor="middle">Browser Use CLI</text>
<rect x="784" y="280" width="252" height="78" rx="17" fill="#3A281A" stroke="#FFAA66" stroke-width="2.5"/>
<text x="910" y="327" fill="#FAFAFA" font-size="21" font-weight="750" text-anchor="middle">Browser Use CLI</text>
<path d="M167 358V395H429V358" fill="none" stroke="#A1A1AA" stroke-width="2.5" stroke-linejoin="round"/>
<path d="M167 395V444" fill="none" stroke="#A1A1AA" stroke-width="2.5" marker-end="url(#gray-arrow)"/>
<path d="M429 395V425H746V520H772" fill="none" stroke="#FFAA66" stroke-width="2.5" stroke-linejoin="round" marker-end="url(#orange-arrow)"/>
<path d="M910 358V444" fill="none" stroke="#FFAA66" stroke-width="2.5" marker-end="url(#orange-arrow)"/>
<circle cx="167" cy="395" r="4" fill="#A1A1AA"/>
<circle cx="429" cy="395" r="4" fill="#FFAA66"/>
<text x="125" y="423" fill="#C0C0C8" font-size="14" font-weight="750" text-anchor="middle">LOCAL</text>
<text x="585" y="413" fill="#FFAA66" font-size="14" font-weight="750" text-anchor="middle">CLOUD</text>
<rect x="41" y="454" width="252" height="124" rx="17" fill="#18181B" stroke="#A1A1AA" stroke-width="2.5"/>
<path d="M41 481H293" fill="none" stroke="#A1A1AA" stroke-width="2.5" stroke-linejoin="round"/>
<circle cx="55" cy="468" r="2.6" fill="#A1A1AA"/>
<circle cx="65" cy="468" r="2.6" fill="#A1A1AA"/>
<circle cx="75" cy="468" r="2.6" fill="#A1A1AA"/>
<text x="167" y="525" fill="#FAFAFA" font-size="24" font-weight="750" text-anchor="middle">Real Chrome</text>
<text x="167" y="553" fill="#C0C0C8" font-size="16" font-weight="450" text-anchor="middle">your tabs · cookies · logins</text>
<rect x="784" y="454" width="252" height="124" rx="17" fill="#3A281A" stroke="#FFAA66" stroke-width="2.5"/>
<path d="M784 481H1036" fill="none" stroke="#FFAA66" stroke-width="2.5" stroke-linejoin="round"/>
<circle cx="798" cy="468" r="2.6" fill="#FFAA66"/>
<circle cx="808" cy="468" r="2.6" fill="#FFAA66"/>
<circle cx="818" cy="468" r="2.6" fill="#FFAA66"/>
<text x="910" y="525" fill="#FAFAFA" font-size="24" font-weight="750" text-anchor="middle">Cloud Browser</text>
<text x="910" y="553" fill="#C0C0C8" font-size="16" font-weight="450" text-anchor="middle">profiles · stealth · proxies</text>
<path d="M305 561H772" fill="none" stroke="#A1A1AA" stroke-width="2.2" stroke-dasharray="7 6" marker-end="url(#gray-arrow)"/>
<text x="538" y="587" fill="#C0C0C8" font-size="16" font-weight="600" text-anchor="middle">Profile Sync · cookies</text>
<text x="910" y="613" fill="#FFAA66" font-size="17" font-weight="600" text-anchor="middle">Hosted V4 API</text>
<text x="298" y="625" fill="#C0C0C8" font-size="17" font-weight="500" text-anchor="middle">Either CLI can control either browser.</text>
</g></svg>
Side by Side

After

Width:  |  Height:  |  Size: 5.6 KiB

static/readme/which-product-light-mobile.svg
+56
View File
@@ -0,0 +1,56 @@
<svg xmlns="http://www.w3.org/2000/svg" width="360" height="704" viewBox="0 0 360 704" role="img" aria-labelledby="title desc">
<title id="title">Choose your agent, CLI and browser</title>
<desc id="desc">Both columns share three aligned rows: agent, CLI, browser. On your computer, choose Claude Code, Codex, OpenCode or Hermes Agent, then Playwright CLI or Browser Use CLI. Both CLIs can use real Chrome or the single Cloud Browser in our cloud. Hosted V4 runs OpenCode, Browser Use CLI and that Cloud Browser. Profile Sync copies selected cookies from real Chrome to a cloud profile; it is a separate, explicit step. Send a prompt through the V4 API and get a result back.</desc>
<defs><marker id="gray-arrow" markerWidth="7" markerHeight="7" refX="6" refY="3.5" orient="auto"><path d="M0 0L7 3.5L0 7Z" fill="#71717A"/></marker><marker id="orange-arrow" markerWidth="7" markerHeight="7" refX="6" refY="3.5" orient="auto"><path d="M0 0L7 3.5L0 7Z" fill="#C94D00"/></marker></defs>
<rect width="360" height="704" fill="#FFFFFF"/><g font-family="Inter, ui-sans-serif, system-ui, sans-serif">
<rect x="196" y="10" width="156" height="686" rx="12" fill="#FFF7ED" stroke="#F2C99E" stroke-width="1.7"/>
<text x="90" y="39" fill="#242428" font-size="16" font-weight="750" text-anchor="middle">YOUR COMPUTER</text>
<text x="90" y="63" fill="#606068" font-size="16" font-weight="450" text-anchor="middle">Choose each part</text>
<text x="274" y="39" fill="#242428" font-size="16" font-weight="750" text-anchor="middle">OUR CLOUD</text>
<text x="274" y="63" fill="#C94D00" font-size="16" font-weight="600" text-anchor="middle">Send a prompt.</text>
<text x="274" y="84" fill="#606068" font-size="16" font-weight="450" text-anchor="middle">Get a result.</text>
<rect x="8" y="95" width="166" height="128" rx="12" fill="#F4F4F5" stroke="#71717A" stroke-width="1.7"/>
<text x="91" y="119" fill="#606068" font-size="16" font-weight="700" text-anchor="middle">YOUR AGENT</text>
<text x="91" y="143" fill="#242428" font-size="16" font-weight="600" text-anchor="middle">Claude Code</text>
<text x="91" y="165" fill="#242428" font-size="16" font-weight="600" text-anchor="middle">Codex · OpenCode</text>
<text x="91" y="187" fill="#242428" font-size="16" font-weight="600" text-anchor="middle">Hermes Agent</text>
<rect x="208" y="95" width="132" height="128" rx="12" fill="#F4F4F5" stroke="#71717A" stroke-width="1.7"/>
<text x="274" y="166" fill="#242428" font-size="18" font-weight="750" text-anchor="middle">OpenCode</text>
<path d="M91 223V253" fill="none" stroke="#71717A" stroke-width="2" stroke-linejoin="round" marker-end="url(#gray-arrow)"/>
<path d="M274 223V253" fill="none" stroke="#71717A" stroke-width="2" stroke-linejoin="round" marker-end="url(#gray-arrow)"/>
<rect x="8" y="263" width="166" height="92" rx="12" fill="#FFF0DF" stroke="#C94D00" stroke-width="1.7"/>
<text x="91" y="292" fill="#242428" font-size="16" font-weight="750" text-anchor="middle">Playwright CLI</text>
<text x="91" y="316" fill="#606068" font-size="16" font-weight="450" text-anchor="middle">or</text>
<text x="91" y="340" fill="#242428" font-size="16" font-weight="600" text-anchor="middle">Browser Use CLI</text>
<rect x="208" y="263" width="132" height="92" rx="12" fill="#FFF0DF" stroke="#C94D00" stroke-width="1.7"/>
<text x="274" y="303" fill="#242428" font-size="16" font-weight="750" text-anchor="middle">Browser Use</text>
<text x="274" y="326" fill="#242428" font-size="16" font-weight="750" text-anchor="middle">CLI</text>
<path d="M50 355V379H132V355" fill="none" stroke="#71717A" stroke-width="2" stroke-linejoin="round"/>
<path d="M50 379V406H87V425" fill="none" stroke="#71717A" stroke-width="2" stroke-linejoin="round" marker-end="url(#gray-arrow)"/>
<path d="M132 379H183V489H202" fill="none" stroke="#C94D00" stroke-width="2" stroke-linejoin="round" marker-end="url(#orange-arrow)"/>
<path d="M274 355V425" fill="none" stroke="#C94D00" stroke-width="2" marker-end="url(#orange-arrow)"/>
<circle cx="50" cy="379" r="3" fill="#71717A"/>
<circle cx="132" cy="379" r="3" fill="#C94D00"/>
<rect x="18" y="435" width="138" height="108" rx="12" fill="#FFFFFF" stroke="#71717A" stroke-width="1.7"/>
<path d="M18 462H156" fill="none" stroke="#71717A" stroke-width="2" stroke-linejoin="round"/>
<circle cx="32" cy="449" r="2.6" fill="#71717A"/>
<circle cx="42" cy="449" r="2.6" fill="#71717A"/>
<circle cx="52" cy="449" r="2.6" fill="#71717A"/>
<text x="87" y="491" fill="#242428" font-size="16" font-weight="750" text-anchor="middle">Real Chrome</text>
<text x="87" y="514" fill="#606068" font-size="16" font-weight="450" text-anchor="middle">your tabs,</text>
<text x="87" y="532" fill="#606068" font-size="16" font-weight="450" text-anchor="middle">cookies, logins</text>
<rect x="208" y="435" width="132" height="108" rx="12" fill="#FFF0DF" stroke="#C94D00" stroke-width="1.7"/>
<path d="M208 462H340" fill="none" stroke="#C94D00" stroke-width="2" stroke-linejoin="round"/>
<circle cx="222" cy="449" r="2.6" fill="#C94D00"/>
<circle cx="232" cy="449" r="2.6" fill="#C94D00"/>
<circle cx="242" cy="449" r="2.6" fill="#C94D00"/>
<text x="274" y="491" fill="#242428" font-size="16" font-weight="750" text-anchor="middle">Cloud Browser</text>
<text x="274" y="514" fill="#606068" font-size="16" font-weight="450" text-anchor="middle">profiles, stealth,</text>
<text x="274" y="532" fill="#606068" font-size="16" font-weight="450" text-anchor="middle">proxies</text>
<path d="M87 543V573H274V553" fill="none" stroke="#71717A" stroke-width="2" stroke-dasharray="6 5" stroke-linejoin="round" marker-end="url(#gray-arrow)"/>
<rect x="80" y="580" width="204" height="26" rx="4" fill="#FFFFFF"/>
<text x="182" y="599" fill="#606068" font-size="16" font-weight="600" text-anchor="middle">Profile Sync · cookies</text>
<text x="89" y="651" fill="#606068" font-size="16" font-weight="600" text-anchor="middle">Both CLIs.</text>
<text x="89" y="673" fill="#606068" font-size="16" font-weight="600" text-anchor="middle">Either browser.</text>
<text x="274" y="651" fill="#C94D00" font-size="16" font-weight="600" text-anchor="middle">Hosted V4 API</text>
</g></svg>
Side by Side

After

Width:  |  Height:  |  Size: 6.0 KiB

static/readme/which-product-light.svg
+51
View File
@@ -0,0 +1,51 @@
<svg xmlns="http://www.w3.org/2000/svg" width="1200" height="674" viewBox="0 0 1200 674" role="img" aria-labelledby="title desc">
<title id="title">Choose your agent, CLI and browser</title>
<desc id="desc">Both columns share three aligned rows: agent, CLI, browser. On your computer, choose Claude Code, Codex, OpenCode or Hermes Agent, then Playwright CLI or Browser Use CLI. Both CLIs can use real Chrome or the single Cloud Browser in our cloud. Hosted V4 runs OpenCode, Browser Use CLI and that Cloud Browser. Profile Sync copies selected cookies from real Chrome to a cloud profile; it is a separate, explicit step. Send a prompt through the V4 API and get a result back.</desc>
<defs><marker id="gray-arrow" markerWidth="7" markerHeight="7" refX="6" refY="3.5" orient="auto"><path d="M0 0L7 3.5L0 7Z" fill="#71717A"/></marker><marker id="orange-arrow" markerWidth="7" markerHeight="7" refX="6" refY="3.5" orient="auto"><path d="M0 0L7 3.5L0 7Z" fill="#C94D00"/></marker></defs>
<rect width="1200" height="674" fill="#FFFFFF"/><g font-family="Inter, ui-sans-serif, system-ui, sans-serif">
<rect x="648" y="18" width="524" height="620" rx="17" fill="#FFF7ED" stroke="#F2C99E" stroke-width="2.5"/>
<text x="298" y="62" fill="#242428" font-size="25" font-weight="750" text-anchor="middle">YOUR COMPUTER</text>
<text x="298" y="91" fill="#606068" font-size="17" font-weight="450" text-anchor="middle">Choose each part</text>
<text x="910" y="62" fill="#242428" font-size="25" font-weight="750" text-anchor="middle">OUR CLOUD</text>
<text x="910" y="91" fill="#606068" font-size="17" font-weight="450" text-anchor="middle">Send a prompt, get a result</text>
<rect x="48" y="128" width="500" height="96" rx="17" fill="#F4F4F5" stroke="#71717A" stroke-width="2.5"/>
<text x="298" y="161" fill="#606068" font-size="14" font-weight="700" text-anchor="middle">YOUR AGENT</text>
<text x="298" y="195" fill="#242428" font-size="18" font-weight="600" text-anchor="middle">Claude Code · Codex · OpenCode · Hermes Agent</text>
<rect x="784" y="128" width="252" height="96" rx="17" fill="#F4F4F5" stroke="#71717A" stroke-width="2.5"/>
<text x="910" y="184" fill="#242428" font-size="23" font-weight="750" text-anchor="middle">OpenCode</text>
<path d="M298 224V245H167V270" fill="none" stroke="#71717A" stroke-width="2.5" stroke-linejoin="round" marker-end="url(#gray-arrow)"/>
<path d="M298 245H429V270" fill="none" stroke="#71717A" stroke-width="2.5" stroke-linejoin="round" marker-end="url(#gray-arrow)"/>
<path d="M910 224V270" fill="none" stroke="#71717A" stroke-width="2.5" stroke-linejoin="round" marker-end="url(#gray-arrow)"/>
<rect x="48" y="280" width="238" height="78" rx="17" fill="#F4F4F5" stroke="#71717A" stroke-width="2.5"/>
<text x="167" y="327" fill="#242428" font-size="21" font-weight="750" text-anchor="middle">Playwright CLI</text>
<rect x="310" y="280" width="238" height="78" rx="17" fill="#FFF0DF" stroke="#C94D00" stroke-width="2.5"/>
<text x="429" y="327" fill="#242428" font-size="21" font-weight="750" text-anchor="middle">Browser Use CLI</text>
<rect x="784" y="280" width="252" height="78" rx="17" fill="#FFF0DF" stroke="#C94D00" stroke-width="2.5"/>
<text x="910" y="327" fill="#242428" font-size="21" font-weight="750" text-anchor="middle">Browser Use CLI</text>
<path d="M167 358V395H429V358" fill="none" stroke="#71717A" stroke-width="2.5" stroke-linejoin="round"/>
<path d="M167 395V444" fill="none" stroke="#71717A" stroke-width="2.5" marker-end="url(#gray-arrow)"/>
<path d="M429 395V425H746V520H772" fill="none" stroke="#C94D00" stroke-width="2.5" stroke-linejoin="round" marker-end="url(#orange-arrow)"/>
<path d="M910 358V444" fill="none" stroke="#C94D00" stroke-width="2.5" marker-end="url(#orange-arrow)"/>
<circle cx="167" cy="395" r="4" fill="#71717A"/>
<circle cx="429" cy="395" r="4" fill="#C94D00"/>
<text x="125" y="423" fill="#606068" font-size="14" font-weight="750" text-anchor="middle">LOCAL</text>
<text x="585" y="413" fill="#C94D00" font-size="14" font-weight="750" text-anchor="middle">CLOUD</text>
<rect x="41" y="454" width="252" height="124" rx="17" fill="#FFFFFF" stroke="#71717A" stroke-width="2.5"/>
<path d="M41 481H293" fill="none" stroke="#71717A" stroke-width="2.5" stroke-linejoin="round"/>
<circle cx="55" cy="468" r="2.6" fill="#71717A"/>
<circle cx="65" cy="468" r="2.6" fill="#71717A"/>
<circle cx="75" cy="468" r="2.6" fill="#71717A"/>
<text x="167" y="525" fill="#242428" font-size="24" font-weight="750" text-anchor="middle">Real Chrome</text>
<text x="167" y="553" fill="#606068" font-size="16" font-weight="450" text-anchor="middle">your tabs · cookies · logins</text>
<rect x="784" y="454" width="252" height="124" rx="17" fill="#FFF0DF" stroke="#C94D00" stroke-width="2.5"/>
<path d="M784 481H1036" fill="none" stroke="#C94D00" stroke-width="2.5" stroke-linejoin="round"/>
<circle cx="798" cy="468" r="2.6" fill="#C94D00"/>
<circle cx="808" cy="468" r="2.6" fill="#C94D00"/>
<circle cx="818" cy="468" r="2.6" fill="#C94D00"/>
<text x="910" y="525" fill="#242428" font-size="24" font-weight="750" text-anchor="middle">Cloud Browser</text>
<text x="910" y="553" fill="#606068" font-size="16" font-weight="450" text-anchor="middle">profiles · stealth · proxies</text>
<path d="M305 561H772" fill="none" stroke="#71717A" stroke-width="2.2" stroke-dasharray="7 6" marker-end="url(#gray-arrow)"/>
<text x="538" y="587" fill="#606068" font-size="16" font-weight="600" text-anchor="middle">Profile Sync · cookies</text>
<text x="910" y="613" fill="#C94D00" font-size="17" font-weight="600" text-anchor="middle">Hosted V4 API</text>
<text x="298" y="625" fill="#606068" font-size="17" font-weight="500" text-anchor="middle">Either CLI can control either browser.</text>
</g></svg>
Side by Side

After

Width:  |  Height:  |  Size: 5.6 KiB