Skip to content

Commit d103b58

Browse files
committed
docs: Add full expandable examples and define FASTAPI_APP
Add copy-pasteable full examples using expandable CodeGroups for the screenshot and agent data extraction sections. Define the missing FASTAPI_APP constant in the step-by-step code blocks.
1 parent c3c2002 commit d103b58

1 file changed

Lines changed: 284 additions & 0 deletions

File tree

docs/use-cases/remote-browser.mdx

Lines changed: 284 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -69,6 +69,26 @@ Deploy a web app inside an E2B sandbox, get a public URL, then use a Kernel brow
6969
```typescript JavaScript & TypeScript
7070
import { Sandbox } from 'e2b'
7171

72+
// A minimal FastAPI app with three routes to screenshot
73+
const FASTAPI_APP = `
74+
from fastapi import FastAPI
75+
from fastapi.responses import HTMLResponse
76+
77+
app = FastAPI()
78+
79+
@app.get("/")
80+
def home():
81+
return HTMLResponse("<h1>Home</h1><p>Welcome to the app.</p>")
82+
83+
@app.get("/about")
84+
def about():
85+
return HTMLResponse("<h1>About</h1><p>About this app.</p>")
86+
87+
@app.get("/dashboard")
88+
def dashboard():
89+
return HTMLResponse("<h1>Dashboard</h1><p>Your dashboard.</p>")
90+
`
91+
7292
const sandbox = await Sandbox.create('kernel-browser', {
7393
envs: { KERNEL_API_KEY: process.env.KERNEL_API_KEY! },
7494
timeoutMs: 300_000,
@@ -88,6 +108,26 @@ await sandbox.commands.run(
88108
import os
89109
from e2b import Sandbox
90110

111+
# A minimal FastAPI app with three routes to screenshot
112+
FASTAPI_APP = """
113+
from fastapi import FastAPI
114+
from fastapi.responses import HTMLResponse
115+
116+
app = FastAPI()
117+
118+
@app.get("/")
119+
def home():
120+
return HTMLResponse("<h1>Home</h1><p>Welcome to the app.</p>")
121+
122+
@app.get("/about")
123+
def about():
124+
return HTMLResponse("<h1>About</h1><p>About this app.</p>")
125+
126+
@app.get("/dashboard")
127+
def dashboard():
128+
return HTMLResponse("<h1>Dashboard</h1><p>Your dashboard.</p>")
129+
"""
130+
91131
sandbox = Sandbox.create(
92132
"kernel-browser",
93133
envs={"KERNEL_API_KEY": os.environ["KERNEL_API_KEY"]},
@@ -186,6 +226,162 @@ sandbox.kill()
186226
</Step>
187227
</Steps>
188228

229+
Full example:
230+
231+
<CodeGroup>
232+
```typescript JavaScript & TypeScript expandable
233+
import { Sandbox } from 'e2b'
234+
235+
// A minimal FastAPI app with three routes to screenshot
236+
const FASTAPI_APP = `
237+
from fastapi import FastAPI
238+
from fastapi.responses import HTMLResponse
239+
240+
app = FastAPI()
241+
242+
@app.get("/")
243+
def home():
244+
return HTMLResponse("<h1>Home</h1><p>Welcome to the app.</p>")
245+
246+
@app.get("/about")
247+
def about():
248+
return HTMLResponse("<h1>About</h1><p>About this app.</p>")
249+
250+
@app.get("/dashboard")
251+
def dashboard():
252+
return HTMLResponse("<h1>Dashboard</h1><p>Your dashboard.</p>")
253+
`
254+
255+
// 1. Create the sandbox and start the app
256+
const sandbox = await Sandbox.create('kernel-browser', {
257+
envs: { KERNEL_API_KEY: process.env.KERNEL_API_KEY! },
258+
timeoutMs: 300_000,
259+
})
260+
261+
await sandbox.files.write('/home/user/app.py', FASTAPI_APP)
262+
await sandbox.commands.run(
263+
'pip install fastapi uvicorn',
264+
{ timeoutMs: 60_000 },
265+
)
266+
await sandbox.commands.run(
267+
'uvicorn app:app --host 0.0.0.0 --port 8000',
268+
{ background: true, cwd: '/home/user' },
269+
)
270+
271+
// 2. Screenshot each route with a Kernel browser
272+
const host = sandbox.getHost(8000)
273+
const appUrl = `https://${host}`
274+
275+
const BROWSE_SCRIPT = `
276+
import sys
277+
from kernel import Kernel
278+
from playwright.sync_api import sync_playwright
279+
280+
app_url = "${appUrl}"
281+
routes = ["/", "/about", "/dashboard"]
282+
283+
kernel = Kernel()
284+
kb = kernel.browsers.create()
285+
286+
with sync_playwright() as pw:
287+
browser = pw.chromium.connect_over_cdp(kb.cdp_ws_url)
288+
page = browser.new_page()
289+
page.set_viewport_size({"width": 1280, "height": 720})
290+
291+
for route in routes:
292+
page.goto(f"{app_url}{route}", wait_until="networkidle")
293+
name = "home" if route == "/" else route.strip("/")
294+
page.screenshot(path=f"/home/user/{name}.png")
295+
print(f"Captured {route}")
296+
297+
browser.close()
298+
`
299+
300+
await sandbox.files.write('/home/user/browse.py', BROWSE_SCRIPT)
301+
const result = await sandbox.commands.run(
302+
'python3 /home/user/browse.py',
303+
{ timeoutMs: 60_000 },
304+
)
305+
console.log(result.stdout)
306+
await sandbox.kill()
307+
```
308+
```python Python expandable
309+
import os
310+
from e2b import Sandbox
311+
312+
# A minimal FastAPI app with three routes to screenshot
313+
FASTAPI_APP = """
314+
from fastapi import FastAPI
315+
from fastapi.responses import HTMLResponse
316+
317+
app = FastAPI()
318+
319+
@app.get("/")
320+
def home():
321+
return HTMLResponse("<h1>Home</h1><p>Welcome to the app.</p>")
322+
323+
@app.get("/about")
324+
def about():
325+
return HTMLResponse("<h1>About</h1><p>About this app.</p>")
326+
327+
@app.get("/dashboard")
328+
def dashboard():
329+
return HTMLResponse("<h1>Dashboard</h1><p>Your dashboard.</p>")
330+
"""
331+
332+
# 1. Create the sandbox and start the app
333+
sandbox = Sandbox.create(
334+
"kernel-browser",
335+
envs={"KERNEL_API_KEY": os.environ["KERNEL_API_KEY"]},
336+
timeout=300,
337+
)
338+
339+
sandbox.files.write("/home/user/app.py", FASTAPI_APP)
340+
sandbox.commands.run(
341+
"pip install fastapi uvicorn",
342+
timeout=60,
343+
)
344+
sandbox.commands.run(
345+
"uvicorn app:app --host 0.0.0.0 --port 8000",
346+
background=True,
347+
cwd="/home/user",
348+
)
349+
350+
# 2. Screenshot each route with a Kernel browser
351+
host = sandbox.get_host(8000)
352+
app_url = f"https://{host}"
353+
354+
BROWSE_SCRIPT = f'''
355+
from kernel import Kernel
356+
from playwright.sync_api import sync_playwright
357+
358+
app_url = "{app_url}"
359+
routes = ["/", "/about", "/dashboard"]
360+
361+
kernel = Kernel()
362+
kb = kernel.browsers.create()
363+
364+
with sync_playwright() as pw:
365+
browser = pw.chromium.connect_over_cdp(kb.cdp_ws_url)
366+
page = browser.new_page()
367+
page.set_viewport_size({{"width": 1280, "height": 720}})
368+
369+
for route in routes:
370+
page.goto(f"{{app_url}}{{route}}", wait_until="networkidle")
371+
name = "home" if route == "/" else route.strip("/")
372+
page.screenshot(path=f"/home/user/{{name}}.png")
373+
print(f"Captured {{route}}")
374+
375+
browser.close()
376+
'''
377+
378+
sandbox.files.write("/home/user/browse.py", BROWSE_SCRIPT)
379+
result = sandbox.commands.run("python3 /home/user/browse.py", timeout=60)
380+
print(result.stdout)
381+
sandbox.kill()
382+
```
383+
</CodeGroup>
384+
189385
---
190386

191387
## Agent data extraction
@@ -294,6 +490,94 @@ sandbox.kill()
294490
</Step>
295491
</Steps>
296492

493+
Full example:
494+
495+
<CodeGroup>
496+
```typescript JavaScript & TypeScript expandable
497+
import { Sandbox } from 'e2b'
498+
499+
// 1. Create the sandbox with API keys
500+
const sandbox = await Sandbox.create('kernel-browser', {
501+
envs: {
502+
KERNEL_API_KEY: process.env.KERNEL_API_KEY!,
503+
ANTHROPIC_API_KEY: process.env.ANTHROPIC_API_KEY!,
504+
},
505+
timeoutMs: 300_000,
506+
})
507+
508+
// 2. Write and run the Browser Use agent
509+
const AGENT_SCRIPT = `
510+
import asyncio
511+
from kernel import Kernel
512+
from browser_use import Agent, Browser, ChatAnthropic
513+
514+
async def main():
515+
kernel = Kernel()
516+
kb = kernel.browsers.create()
517+
browser = Browser(cdp_url=kb.cdp_ws_url)
518+
519+
agent = Agent(
520+
task="Go to https://news.ycombinator.com, find the top 5 stories, and return their titles and point counts as JSON",
521+
llm=ChatAnthropic(model="claude-sonnet-4"),
522+
browser=browser,
523+
)
524+
result = await agent.run()
525+
print(result)
526+
527+
asyncio.run(main())
528+
`
529+
530+
await sandbox.files.write('/home/user/agent_task.py', AGENT_SCRIPT)
531+
const result = await sandbox.commands.run(
532+
'python3 /home/user/agent_task.py',
533+
{ timeoutMs: 180_000 },
534+
)
535+
console.log(result.stdout)
536+
await sandbox.kill()
537+
```
538+
```python Python expandable
539+
import os
540+
from e2b import Sandbox
541+
542+
# 1. Create the sandbox with API keys
543+
sandbox = Sandbox.create(
544+
"kernel-browser",
545+
envs={
546+
"KERNEL_API_KEY": os.environ["KERNEL_API_KEY"],
547+
"ANTHROPIC_API_KEY": os.environ["ANTHROPIC_API_KEY"],
548+
},
549+
timeout=300,
550+
)
551+
552+
# 2. Write and run the Browser Use agent
553+
AGENT_SCRIPT = '''
554+
import asyncio
555+
from kernel import Kernel
556+
from browser_use import Agent, Browser, ChatAnthropic
557+
558+
async def main():
559+
kernel = Kernel()
560+
kb = kernel.browsers.create()
561+
browser = Browser(cdp_url=kb.cdp_ws_url)
562+
563+
agent = Agent(
564+
task="Go to https://news.ycombinator.com, find the top 5 stories, and return their titles and point counts as JSON",
565+
llm=ChatAnthropic(model="claude-sonnet-4"),
566+
browser=browser,
567+
)
568+
result = await agent.run()
569+
print(result)
570+
571+
asyncio.run(main())
572+
'''
573+
574+
sandbox.files.write("/home/user/agent_task.py", AGENT_SCRIPT)
575+
result = sandbox.commands.run("python3 /home/user/agent_task.py", timeout=180)
576+
print(result.stdout)
577+
sandbox.kill()
578+
```
579+
</CodeGroup>
580+
297581
---
298582

299583
## Live browser preview

0 commit comments

Comments
 (0)