Z 18 000 tokenov na 300: Ako sme postavili ľahký browser skill

December 2025. Agentný runtime TeamDay potreboval automatizáciu prehliadača.

Zrejmá voľba: MCP servery. Playwright MCP (~13,7k tokenov), Chrome DevTools MCP (~18k tokenov). Oboje osvedčené, dobre zdokumentované, široko prijaté.

Potom sme si prečítali článok Maria Zechnera. A postavili sme niečo iné.

---

Daň v tokenoch, o ktorej nikto nehovorí

Keď pripojíte MCP server ku Claudeovi, každý popis nástroja sa okamžite načíta do kontextu. Chrome DevTools MCP spotrebuje 18 000 tokenov len pre svojich 26 definícií nástrojov — to je 9 % kontextového okna Claudea, skôr než ste čokoľvek urobili.

Playwright MCP je mierne lepší na 13 700 tokenoch (21 nástrojov), ale stále berie 6,8 % vášho rozpočtu.

Problém sa násobí:

• Každý ďalší MCP server pridáva tisíce tokenov navyše
• Popisy nástrojov zostávajú načítané, či ich používate alebo nie
• Komplexné nástroje potrebujú podrobnú dokumentáciu, čím sú drahé
• Agent sa zmätie, keď má príliš veľa nástrojov na výber

Matematika je krutá. Pripojte 3–4 MCP servery a spálite 30–40k tokenov na definície nástrojov. To je kontext, ktorý nemožno využiť na skutočnú prácu.

Čo ak MCP vôbec nepotrebujete?

Mario Zechner si položil túto otázku a ukázal odpoveď: jednoduché bash skripty používajúce Puppeteer Core, zdokumentované v ~225 tokenoch.

Jeho postrehnutie: Moderné veľké jazykové modely už vedia programovať. Namiesto 26 špecializovaných nástrojov im dajte niekoľko primitív a nechajte ich skladať riešenia.

Kľúčové výhody:

• Efektivita tokenov: ~300 tokenov vs. ~18 000 tokenov
• Skutočná kompozibita: výstup do súborov, napojenie na iné nástroje
• Ľahké rozširovanie: pridávanie nových schopností za minúty
• Podpora profilov: pripojenie k bežiacemu prehliadaču s vašimi prihlasovacími údajmi
• Postupné odhaľovanie: skills sa načítajú len vtedy, keď sú potrebné

Tento prístup sme zobrali a postavili /browser — ľahký skill pre Claude Code.

Čo sme postavili: 7 skriptov, nekonečné možnosti

Základné primitíva

# Spustiť prehliadač raz (s vaším Chrome profilom pre autentizované relácie)
bun browser-start.ts --profile

# Navigovať kamkoľvek
bun browser-navigate.ts https://example.com

# Spustiť JavaScript v kontexte stránky
bun browser-eval.ts 'document.title'

# Rýchle screenshoty do súboru
bun browser-screenshot.ts page.webp

# Interaktívny výber elementov (používateľ kliká, agent dostane selektory)
bun browser-pick.ts --multi

# Extrakcia HTTP-only cookies
bun browser-cookies.ts --domain=example.com

# Čisté ukončenie
bun browser-stop.ts

To je všetko. Sedem jednoduchých skriptov. Každý robí jednu vec dobre. Agent ich skladá pre zložité pracovné postupy.

Prečo to funguje

Pripojenie k bežiacemu prehliadaču namiesto spúšťania nových inštancií:

• Okamžité spustenie (žiadny overhead spúšťania prehliadača)
• Zachovanie autentizácie (Google, GitHub, LinkedIn atď.)
• Používateľ môže interagovať (klikať na elementy, ručne sa prihlásiť)
• Rýchla iterácia (žiadne čistenie medzi príkazmi)

Postupné odhaľovanie:

• Metadáta skilu: ~50 tokenov („máte browser skill")
• Dokumentácia skilu: ~300 tokenov (načítaná keď je potrebná)
• Celkový overhead: 60× menej ako Chrome DevTools MCP

Skutočná kompozibilita:

# Extrakcia dát do súboru
bun browser-eval.ts 'data' > output.json

# Screenshot a spracovanie
bun browser-screenshot.ts page.webp && magick page.webp page.jpg

# Reťazenie navigácie a extrakcie
bun browser-navigate.ts https://site.com && bun browser-eval.ts 'scrape()'

Skutočný test: 548 slovenských odborníkov

NGO Leaf potrebovalo slovenských senior odborníkov pracujúcich v zahraničí pre mentorskú iniciatívu. Dáta boli v Clay.com, za autentizáciou a API limitmi.

Výzva:

• Musí byť autentizovaný v Clay.com
• API nezdokumentované (spätné inžinierstvo zo siete)
• Náhľad obmedzený na 100 výsledkov na požiadavku
• Potreba segmentovať podľa krajiny kvôli limitom
• Extrakcia 500+ profilov s LinkedIn URL, titulmi, firmami, lokáciami

Tradičný prístup: Postaviť plný scraper, spravovať relácie, riešiť stránkovanie, exportovať dáta. Hodiny práce.

S /browser skilom: 45 minút od štartu do 548 exportovaných odborníkov.

Ako to fungovalo

1. Spustenie prehliadača s profilom (zachováva prihlásenie do Clay):

bun browser-start.ts --profile
bun browser-navigate.ts https://app.clay.com

2. Objavenie API inšpekciou sieťovej prevádzky:

bun browser-eval.ts 'performance.getEntriesByType("resource").map(r => r.name)'

Nájdené: https://api.clay.com/v3/actions/run-enrichment

3. Extrakcia autentizačných cookies:

bun browser-cookies.ts --domain=clay.com

4. Zostavenie skriptu pre extrakciu segmentovanú podľa krajín:

Agent napísal špecializovaný skript (clay-slovak-experts.ts), ktorý:

• Používa autentizovanú reláciu z prehliadača
• Vyhľadáva slovensky hovoriacich mimo Slovenska
• Filtruje podľa úrovne seniority (senior, director, VP, C-level)
• Segmentuje podľa krajín kvôli limitu 100 výsledkov
• Extrahuje z 11 krajín: USA, UK, Nemecko, Rakúsko, ČR, Holandsko, Švajčiarsko, Írsko, Kanada, Austrália, Francúzsko
• Rieši stránkovanie a rate limiting
• Deduplikuje podľa LinkedIn URL

5. Spustenie extrakcie:

bun clay-slovak-experts.ts --count=500 --seniority=senior,director,vp

Výstup:

🇸🇰 Slovak Experts Extractor for Leaf NGO
=========================================
Target: 500 senior Slovak professionals working abroad
Seniority levels: senior, director, vp

🔐 Getting authentication cookies...
📊 Checking total available records...
   Found 1,247 Slovak experts abroad with selected seniority

📥 Extracting 500 records in 5 batches...
   Batch 1/5 (offset 0)... ✅ Got 100 records
   ⏳ Waiting 3s before next batch...
   Batch 2/5 (offset 100)... ✅ Got 100 records
   ...
   Batch 5/5 (offset 400)... ✅ Got 100 records

✅ Extracted 500 Slovak experts
   After deduplication: 548 unique profiles
💾 Saved to: slovak-experts.json
📄 CSV saved to: slovak-experts.csv

📈 Summary:
   Top locations:
   - United States: 198
   - United Kingdom: 142
   - Germany: 87
   - Netherlands: 34
   - Switzerland: 28
   - Austria: 21
   - Czech Republic: 18
   - Canada: 11
   - Ireland: 5
   - Australia: 3
   - France: 1

Celkový čas: 45 minút (vrátane objavenia API, vytvorenia skriptu, extrakcie).

Sila prístupu: Agent použil automatizáciu prehliadača ako kompozibilné primitívum. Navigácia, inšpekcia, autentizácia, extrakcia — každý krok čistý a jednoduchý.

Prečo na tom záleží

Úspora tokenov, ktorá sa násobí

Prístup	Overhead tokenov	% kontextu
Chrome DevTools MCP	~18 000 tokenov	9,0 %
Playwright MCP	~13 700 tokenov	6,8 %
Browser Skill	~300 tokenov	0,15 %

Úspora: 60× menej spotreby kontextu.

To je 17 700 tokenov, ktoré môžete využiť pre skutočnú prácu — dokumenty, kód, uvažovanie.

Rýchlosť cez jednoduchosť

Prístup MCP:

• Spustiť nový prehliadač pre každú reláciu
• Čakať na inicializáciu
• Spustiť nástroj cez MCP protokol
• Parsovať štruktúrované odpovede

Prístup skill:

• Pripojiť sa k bežiacemu prehliadaču (okamžite)
• Spustiť skript priamo (žiadny protokolový overhead)
• Výstup do súborov (kombinovať so štandardnými nástrojmi)
• Udržať prehliadač aktívny medzi príkazmi

Praktický rozdiel: Extrakcia 548 odborníkov za 45 minút vs. hodiny vlastnej integrácie.

Rozšíriteľnosť ako súčasť návrhu

Potrebujete novú schopnosť? Napíšte 50-riadkový skript.

Príklad: Interaktívny výber elementov (postavený za 15 minút):

// browser-pick.ts
// Používateľ kliká na elementy v prehliadači, agent dostane selektory

import puppeteer from 'puppeteer-core';

async function pick() {
    const browser = await puppeteer.connect({...});
    const page = await browser.pages()[0];

    // Vložiť poslucháč kliknutia
    await page.evaluate(() => {
        document.addEventListener('click', (e) => {
            const el = e.target;
            // Vrátiť selektor, text, atribúty atď.
            console.log({
                tag: el.tagName,
                selector: getSelector(el),
                text: el.textContent,
                ...
            });
        });
    });
}

Skúste to postaviť ako MCP nástroj. Potom to skúste upraviť pre váš konkrétny prípad.

Podpora profilov mení všetko

S vaším Chrome profilom:

• Už prihlásení do Google, GitHub, LinkedIn, Clay atď.
• Žiadna správa prihlasovacích údajov
• Žiadne OAuth toky
• Žiadne riadenie relácií
• Jednoducho navigovať a pracovať

Pre extrakciu Clay: Nenapísali sme žiadny autentizačný kód. Prehliadač už mal reláciu. Agent ju len využil.

Architektúra: Skills > Nástroje

Anthropic to vysvetlil vo svojom agent skills talk:

„Kód nie je len prípad použitia, ale univerzálne rozhranie k digitálnemu svetu."

Skills sú organizované priečinky s procedurálnymi znalosťami. Postupné odhaľovanie znamená, že agentovi môžete dať stovky skilov bez toho, aby ste zahltili kontext.

MCP zabezpečuje konektivitu. Skills zabezpečujú odbornosť.

Browser skill to demonštruje:

• Metadáta: „Máte schopnosť automatizácie prehliadača"
• Dokumentácia: 6 131 znakov (~300 tokenov po načítaní)
• Skripty: Spúšťajú sa len vtedy, keď sú potrebné, nenačítajú sa do kontextu
• Kompozibilný: Výstupy súborov, funguje s ďalšími skilmi

Kedy použiť MCP vs. Skills

Použite MCP servery, keď:

• Potrebujete streaming dát v reálnom čase (databázy, API)
• Externá služba poskytuje oficiálnu MCP integráciu
• Stav nástroja musí pretrvávať naprieč požiadavkami
• Viacero agentov potrebuje zdieľaný prístup

Použite skills, keď:

• Chcete minimálny overhead tokenov
• Kompozibilita s bash/súbormi je dôležitá
• Potrebujete časté prispôsobovanie správania
• Rýchlosť iterácie > štandardizovaný protokol

Použite oboje: MCP pre konektivitu (databázy, Slack, Notion). Skills pre odbornosť (automatizácia prehliadača, spracovanie dát, pracovné postupy).

Vyskúšajte sami

Browser skill je dostupný v TeamDay. Požiadajte agenta, aby:

"Navigoval na example.com a extrahoval všetky titulky článkov"
"Pofotografoval našu domovskú stránku v svetlom aj tmavom režime"
"Našiel selektor pre tlačidlo vyhľadávania na tejto stránke"
"Extrahoval 50 najlepších príspevkov z Hacker News so skóre > 100"

Agent automaticky použije browser skill — pripojí sa, naviguje, extrahuje, vypíše výsledky.

Overhead tokenov: ~300 tokenov po načítaní. 60× menej ako Chrome DevTools MCP.

---

Kľúčový poznatk

Moderné veľké jazykové modely sú natoľko dobré v kódovaní, že jednoduché skripty + dokumentácia prekonávajú komplexné nástroje.

Nepotrebujete 26 špecializovaných browserových nástrojov. Potrebujete 7 primitív a agenta, ktorý vie, ako ich skladať.

Výsledok: Menší overhead kontextu. Rýchlejšie vykonávanie. Jednoduchšie prispôsobenie. Skutočná práca hotová za minúty namiesto hodín.

548 slovenských odborníkov pre Leaf NGO. Extrahovaných za 45 minút s 300 tokenmi overheadu.

To je sila ľahkých skilov.

---

Postavené na poznatku Maria Zechnera. Vybudované pre agentov TeamDay. Používané v produkcii pre skutočnú prácu NGO.