Conheça o WebBrain: um agente de navegador com IA de código aberto e local-first que lê páginas e automatiza tarefas no Chrome e no Firefox

Reset demo

Actions here are illustrative and safe. The real extension asks before consequential actions.

Built by Marktechpost

(function(){

var CH = 'wb-dev-demo';

var SCEN = {

label:"Explain code", req:"ask",

url:"https://github.com/acme/router/blob/main/debounce.js",

prompt:"Explain what this function does",

page:'

'+

'

export function debounce(fn, wait) {\n let t;\n return (...args) => {\n'+

' clearTimeout(t);\n t = setTimeout(() => fn(...args), wait);\n };\n}

'+

'

Source file view

',

steps:[{t:'Reading file contents', c:'read_page'}],

result:function(){

return '

What it does

'+

'

• Returns a wrapped version of fn that delays calls.
'+

'

• Each new call clears the pending timer and restarts it.
'+

'

• fn runs only after wait ms of no new calls.
'+

'

Follow-up: '+

'How do I use it?

';

steps:[{t:'Preparing an example', c:'scratchpad_write'}],

result:'

Usage

const onSearch = debounce((q) => {\n fetchResults(q);\n}, 300);\n\ninput.addEventListener("input", e => onSearch(e.target.value));

'

label:"Extract API endpoints", req:"ask",

url:"https://docs.acme.dev/api/reference",

prompt:"List every endpoint and its method from this reference",

page:'Acme API Reference

v1

'+

'

'+

'

'+

'

'+

'

'+

'

'+

'

',

{t:'Reading page structure', c:'get_accessibility_tree'},

{t:'Extracting endpoints', c:'extract_data'}

result:function(){

return '

6 endpoints found

'+

'

'+

'

'+

'

'+

'

'+

'

'+

'

'+

'

GET	/v1/users
POST	/v1/users
GET	/v1/users/{id}
PATCH	/v1/users/{id}
DELETE	/v1/users/{id}
GET	/v1/health

Export as JSON or an OpenAPI stub.

';

research: {

label:"Research a topic", req:"ask",

url:"https://blog.statelib.dev/state-in-2026",

prompt:"Compare these two state libraries and recommend one",

page:'State management in 2026

By A. Rivera · 6 min read

'+

'

Two small libraries dominate new projects: StateLib and Acme Store. '+

'Both are signal-based. They differ on bundle size, server rendering, and devtools.

'+

'

The agent also reads docs.acme-store.dev in the background.

',

{t:'Reading blog.statelib.dev', c:'research_url'},

{t:'Reading docs.acme-store.dev', c:'research_url'}

result:function(){

return '

Summary

'+

'

• Both are signal-based and ship first-class TypeScript types.
'+

'

• StateLib has a smaller core; Acme Store has stronger SSR support.
'+

'

• For a server-rendered app, the sources lean Acme Store.
'+

'

Illustrative synthesis from two sources. '+

'Which is smaller?

';

steps:[{t:'Checking published bundle sizes', c:'fetch_url'}],

result:'

Bundle size (illustrative)

'+

'

'+

'

StateLib	3.1 kB min+gzip
Acme Store	5.4 kB min+gzip

'

label:"Star the repo", req:"act",

url:"https://github.com/acme/router",

prompt:"Star this repository",

page:'

'+

'

Tiny type-safe router for modern web apps.

'+

''+

'☆ Star · 8.4k'+

'

Signed in as you on GitHub.

',

{t:'Finding the Star control', c:'get_interactive_elements'},

{t:'Capturing visible tab', c:'screenshot', token:true}

approve:"Star this repository on your signed-in GitHub account?",

finishStep:{t:'Clicking Star via the page UI', c:'click_ax'},

onFinish:function(){

var b=document.getElementById('gh-star');

if(b){ b.innerHTML='★ Starred · 8.4k';

b.style.background='#f8faf4'; b.style.borderColor='#cfe6a8'; b.style.color='#4f8a00'; }

result:function(){

return '

Done

Repository starred through the visible UI — not a direct API call.

'+

'

Ran in your authenticated session; no credentials were stored.

';

var order = ['explain','api','research','star'];

var state = { mode:'ask', scen:'explain', running:false, aborted:false };

var timers = [];

var $ = function(id){ return document.getElementById(id); };

function clearTimers(){ timers.forEach(clearTimeout); timers = []; }

function renderChips(){

var box=$('wb-chips'); box.innerHTML='';

order.forEach(function(k){

var s=SCEN[k];

var b=document.createElement('button');

b.className='wb-chip'+(k===state.scen?' on':'');

b.innerHTML=s.label+' · '+(s.req==='act'?'Act':'Ask')+'';

b.onclick=function(){ selectScen(k); };

box.appendChild(b);

function renderMode(){

$('wb-modeseg').querySelectorAll('button').forEach(function(b){ b.classList.toggle('on', b.dataset.mode===state.mode); });

var pill=$('wb-modepill'); pill.textContent=state.mode==='act'?'Act':'Ask';

pill.className='wb-mode-pill '+(state.mode==='act'?'act':'ask');

function selectScen(k){

if(state.running) return;

state.scen=k; var s=SCEN[k];

$('wb-url').textContent=s.url; $('wb-page').innerHTML=s.page; $('wb-input').value=s.prompt;

if(s.req==='act' && state.mode!=='act'){ state.mode='act'; }

renderChips(); renderMode(); resetLog();

function resetLog(){

clearTimers(); state.running=false; state.aborted=false;

$('wb-run').style.display=''; $('wb-run').disabled=false;

var stop=$('wb-stopbtn'); if(stop) stop.remove();

$('wb-log').innerHTML='

';

function addStep(html){

var d=document.createElement('div'); d.className='wb-step'; d.innerHTML=html;

$('wb-log').appendChild(d); postHeight(); return d;

function showStop(){

var stop=document.createElement('button');

stop.id='wb-stopbtn'; stop.className='wb-stop'; stop.textContent='Stop';

stop.onclick=function(){ state.aborted=true; clearTimers(); finishAbort(); };

$('wb-run').style.display='none'; $('wb-run').parentNode.appendChild(stop);

function hideStop(){ var s=$('wb-stopbtn'); if(s) s.remove(); $('wb-run').style.display=''; $('wb-run').disabled=false; }

function finishAbort(){ state.running=false; hideStop();

addStep('× Stopped by user.'); }

function run(){

if(state.running) return;

var s=SCEN[state.scen];

if(s.req==='act' && state.mode!=='act'){

$('wb-log').innerHTML='';

addStep('ⓘ '+

'Ask mode is read-only. Switch to Act mode to run this task.');

state.running=true; state.aborted=false;

$('wb-log').innerHTML=''; $('wb-run').disabled=true; showStop();

var delay=350;

s.steps.forEach(function(st){

timers.push(setTimeout(function(){

if(state.aborted) return;

var el=addStep(' '+st.t+' · '+st.c+'');

timers.push(setTimeout(function(){

if(state.aborted) return;

el.innerHTML='✓ '+st.t+' · '+st.c+'';

if(st.token) addStep('

');

postHeight();

delay+=780;

timers.push(setTimeout(function(){

if(state.aborted) return;

if(s.approve){ askApproval(s); } else { finish(s); }

}, delay+150));

function askApproval(s){

var box=document.createElement('div'); box.className='wb-approve';

box.innerHTML='

⚠ Consequential action — '+s.approve+'

';

$('wb-log').appendChild(box); postHeight();

box.querySelector('.wb-yes').onclick=function(){ box.remove(); finish(s); };

box.querySelector('.wb-no').onclick=function(){

box.remove(); state.running=false; hideStop();

addStep('× Action cancelled. Nothing was changed.');

function finish(s){

state.running=false; hideStop();

if(s.finishStep){ addStep('✓ '+s.finishStep.t+' · '+s.finishStep.c+''); }

if(s.onFinish){ try{ s.onFinish(); }catch(e){} }

var r=document.createElement('div'); r.className='wb-result'; r.innerHTML=s.result();

$('wb-log').appendChild(r);

addStep('✓ Task complete · done');

postHeight();

if(s.follow){ var link=document.getElementById('wb-follow'); if(link) link.onclick=function(e){ e.preventDefault(); runFollow(s); }; }

function runFollow(s){

if(state.running) return; state.running=true; $('wb-run').disabled=true; showStop();

s.follow.steps.forEach(function(st){

timers.push(setTimeout(function(){

if(state.aborted) return;

var el=addStep(' '+st.t+' · '+st.c+'');

timers.push(setTimeout(function(){

if(state.aborted) return;

el.innerHTML='✓ '+st.t+' · '+st.c+'';

},d)); d+=650;

timers.push(setTimeout(function(){

if(state.aborted) return;

state.running=false; hideStop();

var r=document.createElement('div'); r.className='wb-result'; r.innerHTML=s.follow.result;

$('wb-log').appendChild(r); postHeight();

}, d+150));

$('wb-modeseg').querySelectorAll('button').forEach(function(b){

b.onclick=function(){ if(state.running) return; state.mode=b.dataset.mode; renderMode(); };

$('wb-run').onclick=run;

$('wb-reset').onclick=function(){ state.mode='ask'; selectScen('explain'); };

$('wb-input').addEventListener('keydown',function(e){ if(e.key==='Enter') run(); });

function postHeight(){

var el=document.getElementById('wb-root');

var h=(el?el.offsetHeight:document.body.offsetHeight)+40;

if(window.parent && window.parent!==window){ window.parent.postMessage({wbHeight:h, ch:CH},'*'); }

}catch(e){}

window.postHeight=postHeight;

window.addEventListener('load',function(){ postHeight(); setTimeout(postHeight,300); });

if(window.ResizeObserver){ try{ new ResizeObserver(postHeight).observe(document.getElementById('wb-root')); }catch(e){} }

renderChips(); renderMode(); selectScen('explain');

(function(){

window.addEventListener("message", function(e){

if(e && e.data && e.data.ch === "wb-dev-demo" && typeof e.data.wbHeight === "number"){

var f = document.getElementById("webbrain-frame-2");

if(f){ f.style.height = e.data.wbHeight + "px"; }

WebBrain is available on the Chrome Web Store, Firefox Add-ons, and GitHub. Product details at webbrain website.

Note:Thanks to the Webbrain team for the thought leadership/ Resources for this article. Webbrain team has supported this content/article for promotion.

The post Meet WebBrain: An Open-Source, Local-First AI Browser Agent That Reads Pages and Automates Tasks in Chrome and Firefox appeared first on MarkTechPost.