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","deleted","label",[176,158],"backend","permalink","https://www.val.town/x/aeewvweefe33/koalasauz/code/backend/ui.ts","extension","actionData","errors"]

🌐 Browser Automation Studio