Z 18 000 tokenů na 300: Jak jsme postavili lehký browser skill

Prosinec 2025. Agentní runtime TeamDay potřeboval automatizaci prohlížeče.

Zjevná volba: MCP servery. Playwright MCP (~13,7k tokenů), Chrome DevTools MCP (~18k tokenů). Obojí osvědčené, dobře zdokumentované, široce přijaté.

Pak jsme si přečetli článek Maria Zechnera. A postavili jsme něco jiného.

---

Daň v tokenech, o které nikdo nemluví

Když připojíte MCP server ke Claudeovi, každý popis nástroje se okamžitě načte do kontextu. Chrome DevTools MCP spotřebuje 18 000 tokenů jen pro svých 26 definic nástrojů — to je 9 % kontextového okna Claudeho, než jste cokoliv udělali.

Playwright MCP je mírně lepší na 13 700 tokenech (21 nástrojů), ale stále bere 6,8 % vašeho rozpočtu.

Problém se násobí:

• Každý další MCP server přidává tisíce tokenů navíc
• Popisy nástrojů zůstávají načteny, ať je používáte nebo ne
• Komplexní nástroje potřebují podrobnou dokumentaci, čímž jsou drahé
• Agent se zmate, když má příliš mnoho nástrojů na výběr

Matematika je krutá. Připojte 3–4 MCP servery a spálíte 30–40k tokenů na definice nástrojů. To je kontext, který nelze využít na skutečnou práci.

Co když MCP vůbec nepotřebujete?

Mario Zechner si položil tuto otázku a ukázal odpověď: jednoduché bash skripty používající Puppeteer Core, zdokumentované v ~225 tokenech.

Jeho postřeh: Moderní velké jazykové modely již umí programovat. Místo 26 specializovaných nástrojů jim dejte několik primitiv a nechte je skládat řešení.

Klíčové výhody:

• Efektivita tokenů: ~300 tokenů vs. ~18 000 tokenů
• Skutečná kompozibilita: výstup do souborů, napojení na jiné nástroje
• Snadné rozšiřování: přidávání nových schopností během minut
• Podpora profilů: připojení k běžícímu prohlížeči s vašimi přihlašovacími údaji
• Postupné odhalování: skills se načítají pouze tehdy, kdy jsou potřeba

Tento přístup jsme vzali a postavili /browser — lehký skill pro Claude Code.

Co jsme postavili: 7 skriptů, nekonečné možnosti

Základní primitiva

# Spustit prohlížeč jednou (s vaším Chrome profilem pro autentizované relace)
bun browser-start.ts --profile

# Navigovat kamkoliv
bun browser-navigate.ts https://example.com

# Spustit JavaScript v kontextu stránky
bun browser-eval.ts 'document.title'

# Rychlé screenshoty do souboru
bun browser-screenshot.ts page.webp

# Interaktivní výběr elementů (uživatel kliká, agent dostane selektory)
bun browser-pick.ts --multi

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

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

To je vše. Sedm jednoduchých skriptů. Každý dělá jednu věc dobře. Agent je skládá pro složité pracovní postupy.

Proč to funguje

Připojení k běžícímu prohlížeči místo spouštění nových instancí:

• Okamžité spuštění (žádný overhead spuštění prohlížeče)
• Zachování autentizace (Google, GitHub, LinkedIn atd.)
• Uživatel může interagovat (klikat na elementy, ručně se přihlásit)
• Rychlá iterace (žádné čištění mezi příkazy)

Postupné odhalování:

• Metadata skilu: ~50 tokenů („máte browser skill”)
• Dokumentace skilu: ~300 tokenů (načtena, když je potřeba)
• Celkový overhead: 60× méně než Chrome DevTools MCP

Skutečná kompozibilita:

# Extrakce dat do souboru
bun browser-eval.ts 'data' > output.json

# Screenshot a zpracování
bun browser-screenshot.ts page.webp && magick page.webp page.jpg

# Řetězení navigace a extrakce
bun browser-navigate.ts https://site.com && bun browser-eval.ts 'scrape()'

Skutečný test: 548 slovenských odborníků

NGO Leaf potřebovalo slovenské senior odborníky pracující v zahraničí pro mentorský program. Data byla v Clay.com, za autentizací a API limity.

Výzva:

• Musí být autentizovaný u Clay.com
• API nezdokumentované (zpětné inženýrství ze sítě)
• Náhled omezen na 100 výsledků na požadavek
• Potřeba segmentovat podle země kvůli limitům
• Extrakce 500+ profilů s LinkedIn URL, tituly, firmami, lokacemi

Tradiční přístup: Postavit plný scraper, spravovat relace, řešit stránkování, exportovat data. Hodiny práce.

S /browser skilem: 45 minut od startu do 548 exportovaných odborníků.

Jak to fungovalo

1. Spuštění prohlížeče s profilem (zachovává přihlášení do Clay):

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

2. Objevení API inspekcí síťového provozu:

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

Nalezeno: https://api.clay.com/v3/actions/run-enrichment

3. Extrakce autentizačních cookies:

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

4. Sestavení skriptu pro extrakci segmentované podle zemí:

Agent napsal specializovaný skript (clay-slovak-experts.ts), který:

• Používá autentizovanou relaci z prohlížeče
• Vyhledává slovensky mluvící osoby mimo Slovensko
• Filtruje podle úrovně senority (senior, director, VP, C-level)
• Segmentuje podle zemí kvůli limitu 100 výsledků
• Extrahuje z 11 zemí: USA, UK, Německo, Rakousko, ČR, Nizozemsko, Švýcarsko, Irsko, Kanada, Austrálie, Francie
• Řeší stránkování a rate limiting
• Deduplikuje podle LinkedIn URL

5. Spuštění extrakce:

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 minut (včetně objevení API, vytvoření skriptu, extrakce).

Síla přístupu: Agent použil automatizaci prohlížeče jako kompozibilní primitivum. Navigace, inspekce, autentizace, extrakce — každý krok čistý a jednoduchý.

Proč na tom záleží

Úspora tokenů, která se násobí

Přístup	Overhead tokenů	% kontextu
Chrome DevTools MCP	~18 000 tokenů	9,0 %
Playwright MCP	~13 700 tokenů	6,8 %
Browser Skill	~300 tokenů	0,15 %

Úspora: 60× méně spotřeby kontextu.

To je 17 700 tokenů, které můžete využít pro skutečnou práci — dokumenty, kód, uvažování.

Rychlost skrze jednoduchost

Přístup MCP:

• Spustit nový prohlížeč pro každou relaci
• Čekat na inicializaci
• Spustit nástroj přes MCP protokol
• Parsovat strukturované odpovědi

Přístup skill:

• Připojit se k běžícímu prohlížeči (okamžitě)
• Spustit skript přímo (žádný protokolový overhead)
• Výstup do souborů (kombinovat se standardními nástroji)
• Udržet prohlížeč aktivní mezi příkazy

Praktický rozdíl: Extrakce 548 odborníků za 45 minut vs. hodiny vlastní integrace.

Rozšiřitelnost jako součást návrhu

Potřebujete novou schopnost? Napište 50řádkový skript.

Příklad: Interaktivní výběr elementů (postaven za 15 minut):

// browser-pick.ts
// Uživatel kliká na elementy v prohlížeči, agent dostane selektory

import puppeteer from 'puppeteer-core';

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

    // Vložit posluchač kliknutí
    await page.evaluate(() => {
        document.addEventListener('click', (e) => {
            const el = e.target;
            // Vrátit selektor, text, atributy atd.
            console.log({
                tag: el.tagName,
                selector: getSelector(el),
                text: el.textContent,
                ...
            });
        });
    });
}

Zkuste to postavit jako MCP nástroj. Pak to zkuste upravit pro váš konkrétní případ.

Podpora profilů mění vše

S vaším Chrome profilem:

• Již přihlášeni do Google, GitHub, LinkedIn, Clay atd.
• Žádná správa přihlašovacích údajů
• Žádné OAuth toky
• Žádné řízení relací
• Prostě navigovat a pracovat

Pro extrakci Clay: Nenapsali jsme žádný autentizační kód. Prohlížeč již měl relaci. Agent ji jen využil.

Architektura: Skills > Nástroje

Anthropic to vysvětlil ve svém agent skills talk:

„Kód není jen případ použití, ale univerzální rozhraní k digitálnímu světu.”

Skills jsou organizované složky s procedurálními znalostmi. Postupné odhalování znamená, že agentovi můžete dát stovky skillů, aniž byste zahltili kontext.

MCP zajišťuje konektivitu. Skills zajišťují odbornost.

Browser skill to demonstruje:

• Metadata: „Máte schopnost automatizace prohlížeče”
• Dokumentace: 6 131 znaků (~300 tokenů po načtení)
• Skripty: Spouštějí se jen tehdy, kdy jsou potřeba, nenačítají se do kontextu
• Kompozibilní: Výstupy souborů, funguje s dalšími skills

Kdy použít MCP vs. Skills

Použijte MCP servery, když:

• Potřebujete streaming dat v reálném čase (databáze, API)
• Externí služba poskytuje oficiální MCP integraci
• Stav nástroje musí přetrvávat napříč požadavky
• Více agentů potřebuje sdílený přístup

Použijte skills, když:

• Chcete minimální overhead tokenů
• Kompozibilita s bash/soubory je důležitá
• Potřebujete časté přizpůsobování chování
• Rychlost iterace > standardizovaný protokol

Použijte obojí: MCP pro konektivitu (databáze, Slack, Notion). Skills pro odbornost (automatizace prohlížeče, zpracování dat, pracovní postupy).

Vyzkoušejte sami

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

"Navigoval na example.com a extrahoval všechny titulky článků"
"Pořídil screenshot naší domovské stránky v světlém i tmavém režimu"
"Našel selektor pro tlačítko vyhledávání na této stránce"
"Extrahoval 50 nejlepších příspěvků z Hacker News se skóre > 100"

Agent automaticky použije browser skill — připojí se, naviguje, extrahuje, vypíše výsledky.

Overhead tokenů: ~300 tokenů po načtení. 60× méně než Chrome DevTools MCP.

---

Klíčový poznatek

Moderní velké jazykové modely jsou natolik dobré v kódování, že jednoduché skripty + dokumentace překonávají komplexní nástroje.

Nepotřebujete 26 specializovaných browserových nástrojů. Potřebujete 7 primitiv a agenta, který ví, jak je skládat.

Výsledek: Menší overhead kontextu. Rychlejší provádění. Jednodušší přizpůsobení. Skutečná práce hotová za minuty místo hodin.

548 slovenských odborníků pro Leaf NGO. Extrahováno za 45 minut s 300 tokeny overheadu.

To je síla lehkých skillů.

---

Postaveno na poznatku Maria Zechnera. Vybudováno pro agenty TeamDay. Používáno v produkci pro skutečnou práci NGO.