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.