Skip to content

Commit 750e046

Browse files
claudeclaude
committed
Rebuild OpenBrowser site with React
1 parent fc59b7d commit 750e046

43 files changed

Lines changed: 3252 additions & 1253 deletions

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎site/.gitignore‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1 +1,6 @@
11
.vercel
2+
node_modules
3+
dist
4+
*.tsbuildinfo
5+
vite.config.js
6+
vite.config.d.ts

‎site/components.json‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
{
2+
"$schema": "https://ui.shadcn.com/schema.json",
3+
"style": "new-york",
4+
"rsc": false,
5+
"tsx": true,
6+
"tailwind": {
7+
"config": "tailwind.config.ts",
8+
"css": "src/index.css",
9+
"baseColor": "neutral",
10+
"cssVariables": true,
11+
"prefix": ""
12+
},
13+
"aliases": {
14+
"components": "@/components",
15+
"utils": "@/lib/utils",
16+
"ui": "@/components/ui",
17+
"lib": "@/lib"
18+
}
19+
}

‎site/index.html‎

Lines changed: 5 additions & 273 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,15 @@
11
<!doctype html>
22
<html lang="en">
33
<head>
4-
<meta charset="utf-8" />
5-
<meta name="viewport" content="width=device-width, initial-scale=1" />
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
66
<title>OpenBrowser | Browser infrastructure for AI agents</title>
77
<meta
88
name="description"
99
content="OpenBrowser gives AI agents isolated Chrome sessions, persistent profiles, proxy-aware identities, human login handoff, remote API, MCP tools, telemetry, and audits."
1010
/>
1111
<meta name="robots" content="index,follow" />
12-
<meta name="theme-color" content="#0b1220" />
12+
<meta name="theme-color" content="#fafafa" />
1313
<link rel="canonical" href="https://browser.floom.dev/" />
1414
<link rel="icon" href="/favicon.ico" sizes="any" />
1515
<meta property="og:type" content="website" />
@@ -29,7 +29,6 @@
2929
content="Browser infrastructure for AI agents: real browsers, real logins, human in the loop."
3030
/>
3131
<meta name="twitter:image" content="https://browser.floom.dev/og.svg" />
32-
<link rel="stylesheet" href="/styles.css" />
3332
<script type="application/ld+json">
3433
{
3534
"@context": "https://schema.org",
@@ -45,274 +44,7 @@
4544
</script>
4645
</head>
4746
<body>
48-
<header class="site-header">
49-
<a class="brand" href="/" aria-label="OpenBrowser home">
50-
<img src="/assets/brand/openbrowser-mark.svg" alt="" />
51-
<span>OpenBrowser</span>
52-
</a>
53-
<nav aria-label="Primary navigation">
54-
<a href="#api">API</a>
55-
<a href="#mcp">MCP</a>
56-
<a href="#profiles">Profiles</a>
57-
<a href="https://github.com/floomhq/openbrowser">GitHub</a>
58-
</nav>
59-
<button class="theme-button" type="button" data-theme-toggle aria-label="Switch color theme">
60-
<span data-theme-label>Night mode</span>
61-
</button>
62-
</header>
63-
64-
<main>
65-
<section class="hero">
66-
<div class="hero-copy">
67-
<div class="eyebrow">
68-
<span class="live-dot"></span>
69-
Real browsers for real agents
70-
</div>
71-
<h1>Browser infrastructure for AI agents.</h1>
72-
<p>
73-
OpenBrowser gives Claude, Codex, Cursor, browser-use, and custom workers isolated Chrome
74-
sessions with persistent logins, proxy-aware profiles, human handoff, telemetry, and audit trails.
75-
</p>
76-
<div class="hero-actions">
77-
<a class="button primary" href="https://github.com/floomhq/openbrowser">Star on GitHub</a>
78-
<a class="button secondary" href="#quickstart">Quick start</a>
79-
</div>
80-
<div class="hero-proof" aria-label="OpenBrowser capabilities">
81-
<span>Remote API</span>
82-
<span>MCP tools</span>
83-
<span>Human login links</span>
84-
</div>
85-
</div>
86-
87-
<div class="product-window" aria-label="OpenBrowser product preview">
88-
<div class="window-top">
89-
<div class="traffic" aria-hidden="true"><span></span><span></span><span></span></div>
90-
<div class="address"><span>LIVE</span> browser.floom.dev/openbrowser/v1</div>
91-
<button type="button">Docs</button>
92-
</div>
93-
<div class="app-shell">
94-
<aside class="sessions">
95-
<div class="small-title">Browser sessions</div>
96-
<div class="session active">
97-
<img src="/assets/logos/googlechrome.svg" alt="Chrome logo" />
98-
<div><strong>work-main</strong><small>Active lease</small></div>
99-
</div>
100-
<div class="session">
101-
<img src="/assets/logos/modelcontextprotocol.svg" alt="Model Context Protocol logo" />
102-
<div><strong>research-01</strong><small>Ready</small></div>
103-
</div>
104-
<div class="session">
105-
<img src="/assets/logos/github.svg" alt="GitHub logo" />
106-
<div><strong>ops-watch</strong><small>Idle</small></div>
107-
</div>
108-
<div class="capacity-card">
109-
<span>Browser pool</span>
110-
<strong>8 / 8 ready</strong>
111-
<div class="meter"><i></i></div>
112-
</div>
113-
</aside>
114-
<section class="browser-preview">
115-
<div class="browser-bar">
116-
<span class="lock">LOCK</span>
117-
<span>https://linkedin.com/search/results/people/</span>
118-
</div>
119-
<div class="fake-browser">
120-
<div class="linkedin-top">
121-
<img src="/assets/logos/googlechrome.svg" alt="" />
122-
<div class="search">Search</div>
123-
<span>Home</span><span>Network</span><span>Jobs</span><span>Messaging</span>
124-
</div>
125-
<div class="profile-card">
126-
<div class="avatar"></div>
127-
<div class="profile-main">
128-
<div class="line wide"></div>
129-
<div class="line mid"></div>
130-
<div class="line short"></div>
131-
<div class="actions"><span></span><span></span><span></span></div>
132-
</div>
133-
<div class="agent-note">
134-
<strong>Agent action</strong>
135-
<span>Save to prospect list</span>
136-
</div>
137-
</div>
138-
<div class="handoff-card">
139-
<img src="/assets/brand/openbrowser-mark.svg" alt="" />
140-
<div>
141-
<strong>Human auth request</strong>
142-
<span>LinkedIn approval needed for work-main</span>
143-
</div>
144-
<button type="button">Approve</button>
145-
</div>
146-
</div>
147-
</section>
148-
<aside class="state">
149-
<div class="small-title">Session state</div>
150-
<div class="state-item"><span></span><div><strong>Active lease</strong><small>28m remaining</small></div></div>
151-
<div class="state-item"><span></span><div><strong>Profile</strong><small>work-main</small></div></div>
152-
<div class="state-item"><span></span><div><strong>Proxy</strong><small>Residential, US-West</small></div></div>
153-
<div class="state-item"><span></span><div><strong>Telemetry</strong><small>Audit clean</small></div></div>
154-
</aside>
155-
</div>
156-
</div>
157-
</section>
158-
159-
<section class="logo-strip" aria-label="Integrations">
160-
<span>Built for the tools agents already use</span>
161-
<div>
162-
<img src="/assets/logos/anthropic.svg" alt="Anthropic logo" />
163-
<img src="/assets/logos/cursor.svg" alt="Cursor logo" />
164-
<img src="/assets/logos/googlechrome.svg" alt="Google Chrome logo" />
165-
<img src="/assets/logos/modelcontextprotocol.svg" alt="Model Context Protocol logo" />
166-
<img src="/assets/logos/github.svg" alt="GitHub logo" />
167-
<img src="/assets/logos/discord.svg" alt="Discord logo" />
168-
<img src="/assets/logos/notion.svg" alt="Notion logo" />
169-
<img src="/assets/logos/linear.svg" alt="Linear logo" />
170-
<img src="/assets/logos/fastapi.svg" alt="FastAPI logo" />
171-
<img src="/assets/logos/python.svg" alt="Python logo" />
172-
<img src="/assets/logos/docker.svg" alt="Docker logo" />
173-
<img src="/assets/logos/cloudflare.svg" alt="Cloudflare logo" />
174-
<img src="/assets/logos/opentelemetry.svg" alt="OpenTelemetry logo" />
175-
</div>
176-
</section>
177-
178-
<section class="grid-section" id="profiles">
179-
<div class="section-heading">
180-
<span class="eyebrow">Why it exists</span>
181-
<h2>One browser contract for every agent.</h2>
182-
<p>
183-
Stop sharing one fragile CDP port. OpenBrowser gives agents leases, profiles, proxies,
184-
handoff links, and a feedback loop that can be audited later.
185-
</p>
186-
</div>
187-
<div class="feature-grid">
188-
<article>
189-
<span class="icon">01</span>
190-
<h3>Persistent browser profiles</h3>
191-
<p>Named identities keep Chrome session state for Gmail, LinkedIn, GitHub, Slack, and internal apps.</p>
192-
</article>
193-
<article>
194-
<span class="icon">02</span>
195-
<h3>Parallel isolated leases</h3>
196-
<p>Agents reserve a slot, work through the broker, heartbeat, and release without blocking each other.</p>
197-
</article>
198-
<article>
199-
<span class="icon">03</span>
200-
<h3>Proxy-aware identities</h3>
201-
<p>Pin selected profiles to residential or ISP proxy routes while keeping generic QA sessions neutral.</p>
202-
</article>
203-
<article>
204-
<span class="icon">04</span>
205-
<h3>Human handoff links</h3>
206-
<p>Login, 2FA, passkeys, and approvals stay in a temporary browser portal, away from chat transcripts.</p>
207-
</article>
208-
<article>
209-
<span class="icon">05</span>
210-
<h3>Agent-steered browser-use</h3>
211-
<p>Use browser-use as a browser tool for screenshots, navigation, clicking, typing, and extraction.</p>
212-
</article>
213-
<article>
214-
<span class="icon">06</span>
215-
<h3>Telemetry and audits</h3>
216-
<p>Every lease, browser action, feedback issue, and failure can be tracked and scored.</p>
217-
</article>
218-
</div>
219-
</section>
220-
221-
<section class="split" id="api">
222-
<div>
223-
<span class="eyebrow">Remote API</span>
224-
<h2>Call a real browser from any machine.</h2>
225-
<p>
226-
Put OpenBrowser behind HTTPS and give agents a bearer token. The same API handles leases,
227-
navigation, screenshots, keyboard events, tabs, auth handoff, telemetry, and audits.
228-
</p>
229-
</div>
230-
<pre><code>BASE=https://browser.example.com/openbrowser/v1
231-
KEY=your-openbrowser-api-key
232-
233-
curl "$BASE/leases" \
234-
-H "authorization: Bearer $KEY" \
235-
-H "content-type: application/json" \
236-
-d '{"owner":"codex","identity_id":"work-main"}'</code></pre>
237-
</section>
238-
239-
<section class="split alt" id="mcp">
240-
<pre><code>{
241-
"mcpServers": {
242-
"openbrowser-remote": {
243-
"command": "openbrowser-remote-mcp",
244-
"env": {
245-
"OPENBROWSER_API_KEY": "...",
246-
"OPENBROWSER_BASE_URL": "https://browser.example.com/openbrowser/v1"
247-
}
248-
}
249-
}
250-
}</code></pre>
251-
<div>
252-
<span class="eyebrow">MCP native</span>
253-
<h2>Give Claude, Codex, Cursor, and workers the same browser tools.</h2>
254-
<p>
255-
The MCP surface exposes leasing, screenshots, snapshots, clicks, real keyboard input,
256-
profile status, feedback issues, telemetry, and broker audits.
257-
</p>
258-
</div>
259-
</section>
260-
261-
<section class="quickstart" id="quickstart">
262-
<div class="section-heading">
263-
<span class="eyebrow">Quick start</span>
264-
<h2>Run it locally or behind your own HTTPS domain.</h2>
265-
</div>
266-
<div class="steps">
267-
<pre><code>git clone https://github.com/floomhq/openbrowser.git
268-
cd openbrowser
269-
python3 -m venv .venv
270-
. .venv/bin/activate
271-
pip install -e .
272-
openbrowser-broker</code></pre>
273-
<pre><code>OPENBROWSER_API_KEYS="$(openssl rand -base64 48)"
274-
OPENBROWSER_PUBLIC_AUTH_BASE_URL="https://browser.example.com"
275-
OPENBROWSER_PUBLIC_OPENBROWSER_BASE_URL="https://browser.example.com/openbrowser/v1"</code></pre>
276-
</div>
277-
</section>
278-
279-
<section class="final-cta">
280-
<img src="/assets/brand/openbrowser-logo-white.svg" alt="OpenBrowser" />
281-
<h2>Give your agents browsers they can actually use.</h2>
282-
<p>Open-source browser infrastructure with real profiles, real handoff, and real audit trails.</p>
283-
<div class="hero-actions">
284-
<a class="button light" href="https://github.com/floomhq/openbrowser">Open GitHub</a>
285-
<a class="button ghost" href="https://github.com/floomhq/openbrowser/blob/main/docs/openbrowser-api.md">Read API docs</a>
286-
</div>
287-
</section>
288-
</main>
289-
290-
<footer>
291-
<span>OpenBrowser</span>
292-
<a href="https://github.com/floomhq/openbrowser">GitHub</a>
293-
<a href="https://github.com/floomhq/openbrowser/blob/main/docs/openbrowser-api.md">API docs</a>
294-
<a href="https://github.com/floomhq/openbrowser/blob/main/LICENSE">MIT License</a>
295-
</footer>
296-
297-
<script>
298-
const root = document.documentElement;
299-
const button = document.querySelector('[data-theme-toggle]');
300-
const label = document.querySelector('[data-theme-label]');
301-
const stored = localStorage.getItem('openbrowser-theme');
302-
if (stored) root.dataset.theme = stored;
303-
304-
function syncLabel() {
305-
const dark = root.dataset.theme === 'dark';
306-
label.textContent = dark ? 'Day mode' : 'Night mode';
307-
}
308-
309-
button.addEventListener('click', () => {
310-
const next = root.dataset.theme === 'dark' ? 'light' : 'dark';
311-
root.dataset.theme = next;
312-
localStorage.setItem('openbrowser-theme', next);
313-
syncLabel();
314-
});
315-
syncLabel();
316-
</script>
47+
<div id="root"></div>
48+
<script type="module" src="/src/main.tsx"></script>
31749
</body>
31850
</html>

0 commit comments

Comments
 (0)