# codeandgyan/remote-browser-agent architecture

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

- Interactive diagram: https://gitdiagram.com/codeandgyan/remote-browser-agent
- Repository: https://github.com/codeandgyan/remote-browser-agent

## Overview

Remote Browser Agent provides a command-entry UI alongside a live remote-browser view. A user submits commands to the Express endpoint; the server dispatches supported navigation, click, and text-extraction actions to a Playwright page and returns results for display in the UI’s command log. The UI also embeds the documented VNC view. The sampled server code shows command handling but not how the VNC service is configured, so that integration is represented only where the README and client show it.

Main entry points: [`client/src/App.jsx`](https://github.com/codeandgyan/remote-browser-agent/blob/main/client/src/App.jsx) (Command UI), [`server/index.js`](https://github.com/codeandgyan/remote-browser-agent/blob/main/server/index.js) (Command API), [`client/src/main.jsx`](https://github.com/codeandgyan/remote-browser-agent/blob/main/client/src/main.jsx) (React Entry)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_client["Client UI"]
  node_client_entry["React Entry<br/>[main.jsx]"]
  node_command_ui["Command UI<br/>[App.jsx]"]
  node_command_log["Result Log<br/>[App.jsx]"]
  node_vnc_view["VNC View<br/>[App.jsx]"]
end

subgraph group_server["Command Service"]
  node_command_api["Command API<br/>[index.js]"]
end

subgraph group_browser["Browser Automation"]
  node_playwright_page["Playwright Page<br/>[index.js]"]
end

node_user(("User"))
node_target_site(("Target Website"))
node_vnc_service(("VNC Service"))

node_client_entry -->|"renders"| node_command_ui
node_user -->|"enters commands"| node_command_ui
node_command_ui -->|"posts commands"| node_command_api
node_command_api -->|"dispatches actions"| node_playwright_page
node_playwright_page -->|"navigates or clicks"| node_target_site
node_playwright_page -->|"returns page content"| node_command_api
node_command_api -->|"returns JSON"| node_command_ui
node_command_ui -->|"records results"| node_command_log
node_command_ui -->|"embeds VNC view"| node_vnc_service

click node_client_entry "https://github.com/codeandgyan/remote-browser-agent/blob/main/client/src/main.jsx"
click node_command_ui "https://github.com/codeandgyan/remote-browser-agent/blob/main/client/src/App.jsx"
click node_command_log "https://github.com/codeandgyan/remote-browser-agent/blob/main/client/src/App.jsx"
click node_vnc_view "https://github.com/codeandgyan/remote-browser-agent/blob/main/client/src/App.jsx"
click node_command_api "https://github.com/codeandgyan/remote-browser-agent/blob/main/server/index.js"
click node_playwright_page "https://github.com/codeandgyan/remote-browser-agent/blob/main/server/index.js"

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_client_entry,node_command_ui,node_command_log,node_vnc_view,node_user toneBlue
class node_command_api toneAmber
class node_playwright_page toneMint
class node_target_site,node_vnc_service toneIndigo
```

## Components

### Client UI

- [React Entry](https://github.com/codeandgyan/remote-browser-agent/blob/main/client/src/main.jsx): `client/src/main.jsx`
- [Command UI](https://github.com/codeandgyan/remote-browser-agent/blob/main/client/src/App.jsx): `client/src/App.jsx`
- [Result Log](https://github.com/codeandgyan/remote-browser-agent/blob/main/client/src/App.jsx): `client/src/App.jsx`
- [VNC View](https://github.com/codeandgyan/remote-browser-agent/blob/main/client/src/App.jsx): `client/src/App.jsx`

### Command Service

- [Command API](https://github.com/codeandgyan/remote-browser-agent/blob/main/server/index.js): `server/index.js`

### Browser Automation

- [Playwright Page](https://github.com/codeandgyan/remote-browser-agent/blob/main/server/index.js): `server/index.js`

### Other components

- **User**
- **Target Website**
- **VNC Service**

## Connections

- React Entry → Command UI: renders (evidence: `client/src/main.jsx`)
- User → Command UI: enters commands (evidence: `client/src/App.jsx`)
- Command UI → Command API: posts commands (evidence: `client/src/App.jsx`)
- Command API → Playwright Page: dispatches actions (evidence: `server/index.js`)
- Playwright Page → Target Website: navigates or clicks (evidence: `server/index.js`)
- Playwright Page → Command API: returns page content (evidence: `server/index.js`)
- Command API → Command UI: returns JSON (evidence: `client/src/App.jsx`)
- Command UI → Result Log: records results (evidence: `client/src/App.jsx`)
- Command UI → VNC Service: embeds VNC view (evidence: `client/src/App.jsx`)