Browser Automation Studio

⚙️ Configuration Browserbase

🔑 Browserbase Credentials

API Key

Project ID

🌐 Proxy Settings

Proxy Mode

\n \n \n

⚙️ Session Options

Region

Timeout (seconds)

\n \n

🤖 LLM Model (for Stagehand)

Model

LLM API Key

No active session

\n \n

No Active Session

Configure credentials and click Launch Session

\n \n

[system] Browser Automation Studio ready.

🧩 Automation Blocks

+ Add Block

\n \n \n \n \n \n \n \n

`;\n}\n\nfunction buildJS(): string {\n // All JS uses single quotes and string concatenation — NO backticks\n return `\nvar currentProvider = 'browserbase';\nvar session = null;\nvar blocks = [\n { id: crypto.randomUUID(), type:'navigate', label:'Navigate to URL', config:{ url:'https://example.com' }, enabled:true }\n];\n\nfunction switchProvider(p) {\n currentProvider = p;\n document.getElementById('tab-bb').className = 'provider-tab' + (p==='browserbase' ? ' active-bb' : '');\n document.getElementById('tab-kr').className = 'provider-tab' + (p==='kernel' ? ' active-kr' : '');\n document.getElementById('bb-config').style.display = p==='browserbase' ? 'block' : 'none';\n document.getElementById('kr-config').style.display = p==='kernel' ? 'block' : 'none';\n document.documentElement.style.setProperty('--accent', p==='browserbase' ? 'var(--accent-bb)' : 'var(--accent-kr)');\n var chip = document.getElementById('provider-chip');\n chip.textContent = p==='browserbase' ? 'Browserbase' : 'Kernel';\n chip.className = 'chip ' + (p==='browserbase' ? 'chip-bb' : 'chip-kr');\n}\n\ndocument.getElementById('bb-proxy-mode').addEventListener('change', function() {\n document.getElementById('bb-proxy-geo').style.display = this.value==='default' ? 'block' : 'none';\n document.getElementById('bb-proxy-custom').style.display = this.value==='custom' ? 'block' : 'none';\n});\ndocument.getElementById('kr-proxy-type').addEventListener('change', function() {\n var managed = ['datacenter','residential','mobile'].indexOf(this.value) >= 0;\n document.getElementById('kr-proxy-managed').style.display = managed ? 'block' : 'none';\n document.getElementById('kr-proxy-custom').style.display = this.value==='custom' ? 'block' : 'none';\n});\n\nfunction log(msg, type) {\n var panel = document.getElementById('log-panel');\n var ts = new Date().toLocaleTimeString();\n var el = document.createElement('div');\n el.className = 'log-entry ' + (type || '');\n el.innerHTML = '[' + ts + '] ' + msg;\n panel.appendChild(el);\n panel.scrollTop = panel.scrollHeight;\n}\n\nfunction api(path, body) {\n return fetch(path, {\n method: 'POST',\n headers: { 'Content-Type': 'application/json' },\n body: JSON.stringify(body)\n }).then(function(r) { return r.json(); });\n}\n\nfunction launchSession() {\n var btn = document.getElementById('btn-launch');\n btn.disabled = true;\n btn.textContent = 'Launching...';\n\n var promise;\n if (currentProvider === 'browserbase') {\n var apiKey = document.getElementById('bb-api-key').value;\n var projectId = document.getElementById('bb-project-id').value;\n if (!apiKey || !projectId) { log('Missing Browserbase credentials','error'); btn.disabled=false; btn.textContent='Launch Session'; return; }\n var proxyMode = document.getElementById('bb-proxy-mode').value;\n var proxies;\n if (proxyMode === 'default') { proxies = true; }\n else if (proxyMode === 'custom') {\n proxies = [{ type:'external', server: document.getElementById('bb-ext-server').value,\n username: document.getElementById('bb-ext-user').value || undefined,\n password: document.getElementById('bb-ext-pass').value || undefined }];\n }\n log('Creating Browserbase session...');\n promise = api('/api/browserbase/session', {\n apiKey: apiKey, projectId: projectId, proxies: proxies,\n region: document.getElementById('bb-region').value,\n timeout: parseInt(document.getElementById('bb-timeout').value) || 900\n }).then(function(result) {\n if (!result.success) throw new Error(result.error);\n session = Object.assign({ provider:'browserbase', apiKey:apiKey, projectId:projectId }, result.session);\n log('Session created: ' + session.id, 'success');\n showLiveView(session.debuggerFullscreenUrl || session.liveViewUrl);\n });\n } else {\n var krKey = document.getElementById('kr-api-key').value;\n if (!krKey) { log('Missing Kernel API key','error'); btn.disabled=false; btn.textContent='Launch Session'; return; }\n\n var proxyType = document.getElementById('kr-proxy-type').value;\n var proxyPromise = Promise.resolve(undefined);\n\n if (proxyType !== 'none') {\n log('Creating Kernel proxy (' + proxyType + ')...');\n var proxyBody = { apiKey: krKey, proxyType: proxyType, proxyName: 'studio-' + Date.now() };\n if (proxyType === 'custom') {\n proxyBody.proxyConfig = {\n host: document.getElementById('kr-ext-host').value,\n port: parseInt(document.getElementById('kr-ext-port').value),\n username: document.getElementById('kr-ext-user').value || undefined,\n password: document.getElementById('kr-ext-pass').value || undefined\n };\n } else {\n proxyBody.proxyConfig = {\n country: document.getElementById('kr-proxy-country').value || 'US',\n state: document.getElementById('kr-proxy-state').value || undefined,\n city: document.getElementById('kr-proxy-city').value || undefined\n };\n }\n proxyPromise = api('/api/kernel/proxy', proxyBody).then(function(r) {\n if (r.success) { log('Proxy created: ' + r.proxy.id, 'success'); return r.proxy.id; }\n else { log('Proxy failed: ' + r.error + ' - continuing without','error'); return undefined; }\n });\n }\n\n promise = proxyPromise.then(function(proxyId) {\n log('Creating Kernel browser...');\n return api('/api/kernel/browser', {\n apiKey: krKey,\n stealth: document.getElementById('kr-stealth').checked,\n headless: document.getElementById('kr-headless').checked,\n timeout: parseInt(document.getElementById('kr-timeout').value) || 3600,\n proxyId: proxyId\n });\n }).then(function(result) {\n if (!result.success) throw new Error(result.error);\n session = Object.assign({ provider:'kernel', apiKey: krKey }, result.browser);\n log('Browser created: ' + session.session_id, 'success');\n showLiveView(session.browser_live_view_url);\n });\n }\n\n promise.then(function() {\n document.getElementById('btn-stop').style.display = 'block';\n document.getElementById('btn-run').disabled = false;\n setStatus(true);\n }).catch(function(err) {\n log('Error: ' + err.message, 'error');\n }).finally(function() {\n btn.disabled = false;\n btn.textContent = 'Launch Session';\n });\n}\n\nfunction stopSession() {\n if (!session) return;\n log('Stopping session...');\n var promise;\n if (session.provider === 'browserbase') {\n promise = api('/api/browserbase/session/stop', { apiKey:session.apiKey, projectId:session.projectId, sessionId:session.id });\n } else {\n promise = api('/api/kernel/browser/delete', { apiKey:session.apiKey, sessionId:session.session_id });\n }\n promise.then(function() { log('Session stopped','success'); })\n .catch(function(err) { log('Stop error: '+err.message,'error'); })\n .finally(function() {\n session = null; hideLiveView();\n document.getElementById('btn-stop').style.display = 'none';\n document.getElementById('btn-run').disabled = true;\n setStatus(false);\n });\n}\n\nfunction showLiveView(url) {\n if (!url) { log('Live view URL not available','error'); return; }\n document.getElementById('placeholder').style.display = 'none';\n var frame = document.getElementById('live-frame');\n frame.style.display = 'block';\n frame.src = url;\n document.getElementById('btn-external').style.display = 'inline-flex';\n document.getElementById('btn-external').dataset.url = url;\n log('Live view loaded: ' + url);\n}\nfunction hideLiveView() {\n document.getElementById('placeholder').style.display = 'flex';\n var frame = document.getElementById('live-frame');\n frame.style.display = 'none'; frame.src = '';\n document.getElementById('btn-external').style.display = 'none';\n}\nfunction openLiveViewExternal() {\n var url = document.getElementById('btn-external').dataset.url;\n if (url) window.open(url, '_blank');\n}\nfunction setStatus(active) {\n document.getElementById('status-dot').className = 'status-dot' + (active ? ' active' : '');\n var name = currentProvider === 'browserbase' ? 'Browserbase' : 'Kernel';\n document.getElementById('status-text').textContent = active ? name + ' session active' : 'No active session';\n}\n\nfunction esc(s) {\n return String(s).replace(/&/g,'&').replace(//g,'>').replace(/\"/g,'"').replace(/'/g,''');\n}\n\nfunction renderBlocks() {\n var list = document.getElementById('block-list');\n list.innerHTML = '';\n blocks.forEach(function(b, i) {\n var el = document.createElement('div');\n el.className = 'block-item' + (b.enabled ? '' : ' disabled');\n el.draggable = true;\n el.dataset.index = i;\n el.innerHTML = renderBlockInner(b, i);\n el.addEventListener('dragstart', function(e) { e.dataTransfer.setData('text/plain', String(i)); el.style.opacity='.5'; });\n el.addEventListener('dragend', function() { el.style.opacity='1'; });\n el.addEventListener('dragover', function(e) { e.preventDefault(); el.style.borderTop='2px solid var(--accent)'; });\n el.addEventListener('dragleave', function() { el.style.borderTop=''; });\n el.addEventListener('drop', function(e) {\n e.preventDefault(); el.style.borderTop='';\n var from = parseInt(e.dataTransfer.getData('text/plain'));\n var to = i;\n if (from !== to) { var item = blocks.splice(from, 1)[0]; blocks.splice(to, 0, item); renderBlocks(); }\n });\n list.appendChild(el);\n });\n}\n\nfunction renderBlockInner(b, i) {\n var configHTML = '';\n if (b.type === 'navigate') {\n configHTML = '

';\n } else if (b.type === 'act') {\n configHTML = '

';\n } else if (b.type === 'extract') {\n configHTML = '

';\n } else if (b.type === 'observe') {\n configHTML = '

';\n } else if (b.type === 'screenshot') {\n configHTML = '

Capture current page

';\n } else if (b.type === 'wait') {\n configHTML = '

seconds

';\n } else if (b.type === 'script') {\n configHTML = '

';\n }\n\n return '

' +\n '' + b.type.toUpperCase() + '' +\n '

' +\n '' +\n '' +\n '

' + configHTML;\n}\n\nfunction addBlock(type) {\n var defaults = {\n navigate: { label:'Navigate', config:{ url:'' } },\n act: { label:'AI Action', config:{ instruction:'' } },\n extract: { label:'Extract Data', config:{ instruction:'' } },\n observe: { label:'Observe', config:{ instruction:'' } },\n screenshot: { label:'Screenshot', config:{ fullPage:false } },\n wait: { label:'Wait', config:{ seconds:2 } },\n script: { label:'Script', config:{ code:'' } }\n };\n var d = defaults[type];\n var cfg = {};\n Object.keys(d.config).forEach(function(k){ cfg[k] = d.config[k]; });\n blocks.push({ id:crypto.randomUUID(), type:type, label:d.label, config:cfg, enabled:true });\n renderBlocks();\n log('Added ' + type + ' block');\n}\n\nfunction removeBlock(i) { blocks.splice(i,1); renderBlocks(); }\nfunction toggleBlock(i) { blocks[i].enabled = !blocks[i].enabled; renderBlocks(); }\nfunction updateBlockConfig(i, key, val) { blocks[i].config[key] = val; }\n\nfunction runAutomation() {\n if (!session) { log('No active session','error'); return; }\n var btn = document.getElementById('btn-run');\n btn.disabled = true; btn.textContent = 'Running...';\n var enabledBlocks = blocks.filter(function(b){ return b.enabled; });\n\n api('/api/automation/run', { provider: currentProvider, blocks: enabledBlocks })\n .then(function(result) {\n if (!result.success) throw new Error(result.error);\n log('Execution plan: ' + result.totalSteps + ' steps on ' + result.provider, 'success');\n result.plan.forEach(function(step) {\n log(' Step ' + step.step + ': [' + step.type.toUpperCase() + '] ' + JSON.stringify(step.config));\n });\n log('Automation flow submitted. Watch the Live View!', 'success');\n })\n .catch(function(err) { log('Error: ' + err.message, 'error'); })\n .finally(function() { btn.disabled = false; btn.textContent = 'Run'; });\n}\n\nrenderBlocks();\n`;\n}\n",[],[166,217],[166],{"_108":225,"_99":226,"_167":227,"_169":-5,"_170":148,"_171":105,"_172":173,"_110":228,"_104":33,"_175":229,"_177":230,"_178":22,"_179":-5,"_180":231,"_102":232},"e38a451e-290d-11f1-b425-42dde27851f2","main.ts","019d2a14-e3e3-733d-b53b-e0ff68035b70",["D",1774527505292],"http","/**\n * Browser Automation Studio - Main HTTP Entry Point\n * Kết hợp Browserbase + Kernel với Stagehand, có giao diện người dùng,\n * live view, proxy config, và automation blocks.\n */\nimport { renderHTML } from \"./backend/ui.ts\";\nimport { handleApiRequest } from \"./backend/api.ts\";\n\nexport default async function(req: Request): Promise {\n const url = new URL(req.url);\n const pathname = url.pathname;\n\n // CORS preflight\n if (req.method === \"OPTIONS\") {\n return new Response(null, {\n headers: {\n \"Access-Control-Allow-Origin\": \"*\",\n \"Access-Control-Allow-Methods\": \"GET, POST, OPTIONS\",\n \"Access-Control-Allow-Headers\": \"Content-Type\",\n },\n });\n }\n\n // API routes\n if (pathname.startsWith(\"/api/\")) {\n return handleApiRequest(req, pathname);\n }\n\n // Main UI\n return new Response(renderHTML(), {\n headers: { \"Content-Type\": \"text/html; charset=utf-8\" },\n });\n}\n",[],[226],"files",[164,182,191,199,207,215,224],"counts",{"_237":33,"_238":239,"_240":105,"_241":242,"_245":246},"pulls","branches",3,"forks","envVars",{"_243":105,"_244":33},"count","emptyCount","connections",{"_243":33,"_247":33},"unfilledCount","contents",[],"file",{"_108":192,"_99":193,"_167":194,"_169":168,"_170":148,"_171":105,"_172":22,"_110":252,"_104":33,"_175":187,"_177":196,"_178":22,"_179":-5,"_102":253},["D",1774527505292],[166,193],"upstreamProject",{"_108":156,"_99":100,"_116":76,"_117":76,"_114":115,"_23":256},{"_97":257,"_138":76},"aeewvweefe33","upstreamBranch",{"_108":151,"_110":260,"_261":262,"_99":45,"_149":156,"_104":153,"_150":-5,"_152":-5,"_263":264,"_112":-5,"_161":22,"_114":115,"_160":257,"_16":158,"_159":100},["D",1774525333502],"updatedAt",["D",1774526420464],"lockfileKey","1774526421234-esm.town_v_aeewvweefe33_njujyn@10-main","emptyEnvVars","isNew","flags",[],"routes/_app.x.$handle.$name.branch.$branch.version.$version.code.$",{"_97":98,"_99":100,"_101":45,"_104":105,"_102":103,"_106":271,"_162":276,"_233":305,"_250":306,"_248":309,"_310":311,"_314":-5,"_315":316,"_317":33,"_318":319,"_241":-5},{"_108":109,"_99":100,"_110":272,"_112":-5,"_113":22,"_114":115,"_116":76,"_117":76,"_14":118,"_119":-5,"_120":22,"_121":-5,"_122":-5,"_123":33,"_16":124,"_125":-5,"_126":-5,"_127":-5,"_128":129,"_130":129,"_131":132,"_133":132,"_134":132,"_135":129,"_136":129,"_23":273,"_140":274,"_145":275,"_161":22},["D",1774527505292],{"_97":98,"_138":139},{"_97":98,"_142":139,"_14":118,"_143":144},{"_104":147,"_99":45,"_108":148,"_149":109,"_150":151,"_152":153,"_154":115,"_155":156,"_157":158,"_159":100,"_160":98},[277,301],{"_108":165,"_99":166,"_167":168,"_169":-5,"_170":148,"_171":105,"_172":173,"_110":278,"_104":33,"_175":176,"_177":-5,"_178":22,"_179":-5,"_180":279,"_102":300},["D",1774527505292],[280,284,288,292,296],{"_108":183,"_99":184,"_167":185,"_169":168,"_170":148,"_171":105,"_172":22,"_110":281,"_104":33,"_175":187,"_177":188,"_178":22,"_179":-5,"_180":282,"_102":283},["D",1774527505292],[],[166,184],{"_108":192,"_99":193,"_167":194,"_169":168,"_170":148,"_171":105,"_172":22,"_110":285,"_104":33,"_175":187,"_177":196,"_178":22,"_179":-5,"_180":286,"_102":287},["D",1774527505292],[],[166,193],{"_108":200,"_99":201,"_167":202,"_169":168,"_170":148,"_171":105,"_172":22,"_110":289,"_104":33,"_175":187,"_177":204,"_178":22,"_179":-5,"_180":290,"_102":291},["D",1774527505292],[],[166,201],{"_108":208,"_99":209,"_167":210,"_169":168,"_170":148,"_171":105,"_172":173,"_110":293,"_104":33,"_175":187,"_177":212,"_178":22,"_179":-5,"_180":294,"_102":295},["D",1774527505292],[],[166,209],{"_108":216,"_99":217,"_167":218,"_169":168,"_170":148,"_171":105,"_172":22,"_110":297,"_104":33,"_175":187,"_177":220,"_178":22,"_179":-5,"_180":298,"_102":299},["D",1774527505292],[],[166,217],[166],{"_108":225,"_99":226,"_167":227,"_169":-5,"_170":148,"_171":105,"_172":173,"_110":302,"_104":33,"_175":229,"_177":230,"_178":22,"_179":-5,"_180":303,"_102":304},["D",1774527505292],[],[226],[277,280,284,288,292,296,301],{"_108":192,"_99":193,"_167":194,"_169":168,"_170":148,"_171":105,"_172":22,"_110":307,"_104":33,"_175":187,"_177":196,"_178":22,"_179":-5,"_102":308},["D",1774527505292],[166,193],[],"upstream",{"_108":151,"_110":312,"_261":313,"_99":45,"_149":156,"_104":153,"_150":-5,"_152":-5,"_263":264,"_112":-5,"_161":22,"_114":115,"_160":257,"_16":158,"_159":100},["D",1774525333502],["D",1774526420464],"pull","ahead",11,"behind","templates",[],"actionData","errors"]

🌐 Browser Automation Studio

lungamiddiscard

njujyn