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 // BUG FIX UI-1: Browserbase live view ưu tiên debuggerFullscreenUrl,\n // fallback về liveViewUrl (URL tĩnh từ browserbase.com)\n showLiveView(session.debuggerFullscreenUrl || session.debuggerUrl || 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 log('CDP URL: ' + (session.cdp_ws_url ? 'available' : 'NOT available — blocks will not run'));\n // BUG FIX UI-2: Kernel live view URL lấy từ browser_live_view_url\n showLiveView(session.browser_live_view_url || null);\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 as PNG

';\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) {\n // BUG FIX UI-3: renderBlocks() reset innerHTML làm mất focus và giá trị input\n // KHÔNG gọi renderBlocks() sau mỗi keystroke — chỉ cập nhật data model\n if (blocks[i]) blocks[i].config[key] = val;\n}\n\nfunction runAutomation() {\n if (!session) { log('No active session','error'); return; }\n\n // Lấy CDP WebSocket URL từ session\n var cdpWsUrl = session.cdp_ws_url || session.wsUrl || null;\n if (!cdpWsUrl) {\n log('No CDP WebSocket URL — session does not support block execution','error');\n return;\n }\n\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 if (enabledBlocks.length === 0) {\n log('No enabled blocks to run','error');\n btn.disabled = false; btn.textContent = 'Run';\n return;\n }\n\n log('Running ' + enabledBlocks.length + ' block(s) via CDP...');\n\n api('/api/automation/run', {\n provider: currentProvider,\n blocks: enabledBlocks,\n cdpWsUrl: cdpWsUrl\n })\n .then(function(result) {\n if (!result.success && !result.results) throw new Error(result.error);\n var total = result.totalSteps || (result.results ? result.results.length : 0);\n log('Completed ' + total + ' step(s)', result.success ? 'success' : 'error');\n (result.results || []).forEach(function(r, i) {\n var icon = r.success ? '[OK]' : '[ERR]';\n var msg = icon + ' Step ' + (i+1) + ' [' + r.type.toUpperCase() + '] ' + r.durationMs + 'ms';\n log(msg, r.success ? 'success' : 'error');\n if (r.error) log(' ' + r.error, 'error');\n if (r.data) {\n if (r.data.screenshot) {\n var img = document.createElement('img');\n img.src = r.data.screenshot;\n img.style.cssText = 'max-width:calc(100% - 32px);border-radius:4px;margin:4px 16px;display:block;border:1px solid var(--border);';\n document.getElementById('log-panel').appendChild(img);\n document.getElementById('log-panel').scrollTop = document.getElementById('log-panel').scrollHeight;\n } else {\n var dataStr = JSON.stringify(r.data);\n log(' ' + dataStr.slice(0, 300) + (dataStr.length > 300 ? '...' : ''));\n }\n }\n });\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",[182,163],"backend","permalink","https://www.val.town/x/lungamiddiscard/njujyn/code/backend/ui.ts","extension","actionData","errors"]

🌐 Browser Automation Studio