# browser-use/browsercode architecture

> Architecture diagram of the GitHub repository browser-use/browsercode, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-09-28). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/browser-use/browsercode
- Repository: https://github.com/browser-use/browsercode

## Overview

BrowserCode is a coding agent with a persistent, code-driven browser capability. The main workflow is a user task entering through the CLI/TUI or hosted API, being handled by the agent and an LLM, then executed as JavaScript against a browser over CDP; results return to the agent. The repository also includes server/API, desktop and web clients, reusable browser skills, and telemetry. The README documents hosted runs and local/remote browser options, but the sampled excerpts do not establish all runtime wiring, so uncertain links are omitted.

Main entry points: [`packages/opencode/src`](https://github.com/browser-use/browsercode/tree/main/packages/opencode/src) (Coding agent), [`packages/bcode-browser/src/index.ts`](https://github.com/browser-use/browsercode/blob/main/packages/bcode-browser/src/index.ts) (Browser tools), [`packages/bcode-browser/src/browser-execute.ts`](https://github.com/browser-use/browsercode/blob/main/packages/bcode-browser/src/browser-execute.ts) (Browser execute), [`packages/server/src/routes.ts`](https://github.com/browser-use/browsercode/blob/main/packages/server/src/routes.ts) (HTTP server)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_entry["User interfaces"]
  node_cli["CLI commands<br/>[commands.ts]"]
  node_tui["Terminal UI<br/>[app.tsx]"]
  node_webapp["Web application<br/>[app.tsx]"]
end

subgraph group_agent["Agent runtime"]
  node_core["Coding agent"]
  node_model["LLM provider"]
  node_codemode["Code execution<br/>[codemode.ts]"]
end

subgraph group_browser["Browser execution"]
  node_browserpkg["Browser tools<br/>[index.ts]"]
  node_execute["Browser execute<br/>[browser-execute.ts]"]
  node_cdp["CDP session<br/>[session.ts]"]
  node_browserstate[("Session store<br/>[session-store.ts]")]
  node_skills["Reusable skills<br/>[skills.ts]"]
end

subgraph group_services["Services and state"]
  node_server["HTTP server<br/>[routes.ts]"]
  node_hosted["Hosted runs"]
  node_telemetry["Usage telemetry<br/>[telemetry.ts]"]
  node_storage[("Agent storage<br/>[storage.ts]")]
end

node_user(("Engineer"))
node_chrome["Chrome browser"]

node_user -->|"submits task"| node_cli
node_user -->|"submits task"| node_tui
node_user -->|"uses"| node_webapp
node_user -.->|"starts run"| node_hosted
node_cli -->|"starts agent"| node_core
node_tui -->|"uses SDK"| node_core
node_webapp -->|"connects"| node_server
node_hosted -.->|"dispatches run"| node_server
node_server -->|"provides services"| node_core
node_core -->|"requests completion"| node_model
node_core -->|"runs code"| node_codemode
node_codemode -->|"exposes tools"| node_browserpkg
node_browserpkg -->|"dispatches"| node_execute
node_execute -->|"controls browser"| node_cdp
node_cdp -->|"sends CDP commands"| node_chrome
node_execute -->|"retains session"| node_browserstate
node_core -->|"uses scripts"| node_skills
node_browserpkg -->|"records traces"| node_telemetry
node_core -->|"reads and writes"| node_storage

click node_cli "https://github.com/browser-use/browsercode/blob/main/packages/cli/src/commands/commands.ts"
click node_tui "https://github.com/browser-use/browsercode/blob/main/packages/tui/src/app.tsx"
click node_webapp "https://github.com/browser-use/browsercode/blob/main/packages/app/src/app.tsx"
click node_server "https://github.com/browser-use/browsercode/blob/main/packages/server/src/routes.ts"
click node_core "https://github.com/browser-use/browsercode/tree/main/packages/opencode/src"
click node_codemode "https://github.com/browser-use/browsercode/blob/main/packages/codemode/src/codemode.ts"
click node_browserpkg "https://github.com/browser-use/browsercode/blob/main/packages/bcode-browser/src/index.ts"
click node_execute "https://github.com/browser-use/browsercode/blob/main/packages/bcode-browser/src/browser-execute.ts"
click node_cdp "https://github.com/browser-use/browsercode/blob/main/packages/bcode-browser/src/cdp/session.ts"
click node_browserstate "https://github.com/browser-use/browsercode/blob/main/packages/bcode-browser/src/session-store.ts"
click node_skills "https://github.com/browser-use/browsercode/blob/main/packages/bcode-browser/src/skills.ts"
click node_telemetry "https://github.com/browser-use/browsercode/blob/main/packages/bcode-browser/src/telemetry.ts"
click node_storage "https://github.com/browser-use/browsercode/blob/main/packages/opencode/src/storage/storage.ts"

classDef toneNeutral fill:#f8fafc,stroke:#334155,stroke-width:1.5px,color:#0f172a
classDef toneBlue fill:#dbeafe,stroke:#2563eb,stroke-width:1.5px,color:#172554
classDef toneAmber fill:#fef3c7,stroke:#d97706,stroke-width:1.5px,color:#78350f
classDef toneMint fill:#dcfce7,stroke:#16a34a,stroke-width:1.5px,color:#14532d
classDef toneRose fill:#ffe4e6,stroke:#e11d48,stroke-width:1.5px,color:#881337
classDef toneIndigo fill:#e0e7ff,stroke:#4f46e5,stroke-width:1.5px,color:#312e81
classDef toneTeal fill:#ccfbf1,stroke:#0f766e,stroke-width:1.5px,color:#134e4a
class node_cli,node_tui,node_webapp,node_chrome toneBlue
class node_core,node_model,node_codemode toneAmber
class node_browserpkg,node_execute,node_cdp,node_browserstate,node_skills toneMint
class node_server,node_hosted,node_telemetry,node_storage toneRose
class node_user toneIndigo
```

## Components

### User interfaces

- [CLI commands](https://github.com/browser-use/browsercode/blob/main/packages/cli/src/commands/commands.ts): `packages/cli/src/commands/commands.ts`
- [Terminal UI](https://github.com/browser-use/browsercode/blob/main/packages/tui/src/app.tsx): `packages/tui/src/app.tsx`
- [Web application](https://github.com/browser-use/browsercode/blob/main/packages/app/src/app.tsx): `packages/app/src/app.tsx`

### Agent runtime

- [Coding agent](https://github.com/browser-use/browsercode/tree/main/packages/opencode/src): `packages/opencode/src`
- **LLM provider**
- [Code execution](https://github.com/browser-use/browsercode/blob/main/packages/codemode/src/codemode.ts): `packages/codemode/src/codemode.ts`

### Browser execution

- [Browser tools](https://github.com/browser-use/browsercode/blob/main/packages/bcode-browser/src/index.ts): `packages/bcode-browser/src/index.ts`
- [Browser execute](https://github.com/browser-use/browsercode/blob/main/packages/bcode-browser/src/browser-execute.ts): `packages/bcode-browser/src/browser-execute.ts`
- [CDP session](https://github.com/browser-use/browsercode/blob/main/packages/bcode-browser/src/cdp/session.ts): `packages/bcode-browser/src/cdp/session.ts`
- [Session store](https://github.com/browser-use/browsercode/blob/main/packages/bcode-browser/src/session-store.ts): `packages/bcode-browser/src/session-store.ts`
- [Reusable skills](https://github.com/browser-use/browsercode/blob/main/packages/bcode-browser/src/skills.ts): `packages/bcode-browser/src/skills.ts`

### Services and state

- [HTTP server](https://github.com/browser-use/browsercode/blob/main/packages/server/src/routes.ts): `packages/server/src/routes.ts`
- **Hosted runs**
- [Usage telemetry](https://github.com/browser-use/browsercode/blob/main/packages/bcode-browser/src/telemetry.ts): `packages/bcode-browser/src/telemetry.ts`
- [Agent storage](https://github.com/browser-use/browsercode/blob/main/packages/opencode/src/storage/storage.ts): `packages/opencode/src/storage/storage.ts`

### Other components

- **Engineer**
- **Chrome browser**

## Connections

- Engineer → CLI commands: submits task
- Engineer → Terminal UI: submits task
- Engineer → Web application: uses
- Engineer → Hosted runs: starts run
- CLI commands → Coding agent: starts agent
- Terminal UI → Coding agent: uses SDK
- Web application → HTTP server: connects
- Hosted runs → HTTP server: dispatches run
- HTTP server → Coding agent: provides services
- Coding agent → LLM provider: requests completion
- Coding agent → Code execution: runs code
- Code execution → Browser tools: exposes tools
- Browser tools → Browser execute: dispatches
- Browser execute → CDP session: controls browser
- CDP session → Chrome browser: sends CDP commands
- Browser execute → Session store: retains session
- Coding agent → Reusable skills: uses scripts
- Browser tools → Usage telemetry: records traces
- Coding agent → Agent storage: reads and writes