De 18 000 tokens à 300 : Comment nous avons créé un Browser Skill léger qui surpasse MCP

Claude & Jozo · 8 min read · 2026/01/22

Agent SkillsAutomatisation de navigateurMCPClaude CodeOutils développeur

De 18 000 tokens à 300 : Comment nous avons créé un Browser Skill léger

Décembre 2025. Le runtime d’agents de TeamDay avait besoin d’automatisation du navigateur.

Le choix évident : les serveurs MCP. Playwright MCP (~13 700 tokens), Chrome DevTools MCP (~18 000 tokens). Les deux éprouvés, bien documentés, largement adoptés.

Puis nous avons lu l’article de Mario Zechner. Et nous avons construit quelque chose de différent.

La taxe en tokens dont personne ne parle

Quand vous connectez un serveur MCP à Claude, chaque description d’outil se charge immédiatement dans le contexte. Chrome DevTools MCP consomme 18 000 tokens rien que pour ses 26 définitions d’outils — soit 9 % de la fenêtre de contexte de Claude, avant même d’avoir fait quoi que ce soit.

Playwright MCP est légèrement mieux avec 13 700 tokens (21 outils), mais prend tout de même 6,8 % de votre budget.

Le problème se multiplie :

Chaque serveur MCP supplémentaire ajoute des milliers de tokens
Les descriptions d’outils restent chargées que vous les utilisiez ou non
Les outils complexes nécessitent une documentation détaillée, ce qui les rend coûteux
L’agent se perd quand il a trop d’outils à choisir

Les maths sont brutales. Connectez 3-4 serveurs MCP et vous avez brûlé 30-40k tokens en définitions d’outils. C’est du contexte que vous ne pouvez pas utiliser pour le travail réel.

Et si vous n’aviez pas besoin de MCP du tout ?

Mario Zechner a posé cette question et y a apporté une réponse : de simples scripts bash utilisant Puppeteer Core, documentés en ~225 tokens.

Son insight : Les LLMs modernes savent déjà programmer. Au lieu de 26 outils spécialisés, donnez-leur quelques primitives et laissez-les composer des solutions.

Les avantages clés :

Efficacité des tokens : ~300 tokens vs. ~18 000 tokens
Vraie composabilité : sortie vers des fichiers, connexion à d’autres outils
Facilement extensible : nouvelles capacités en quelques minutes
Support des profils : connexion au navigateur en cours d’exécution avec vos identifiants
Révélation progressive : les skills ne se chargent qu’en cas de besoin

Nous avons adopté cette approche et construit /browser — un skill léger pour Claude Code.

Ce que nous avons construit : 7 scripts, possibilités infinies

Les primitives de base

# Démarrer le navigateur une fois (avec votre profil Chrome pour les sessions authentifiées)
bun browser-start.ts --profile

# Naviguer n'importe où
bun browser-navigate.ts https://example.com

# Exécuter du JavaScript dans le contexte de la page
bun browser-eval.ts 'document.title'

# Captures d'écran rapides vers fichier
bun browser-screenshot.ts page.webp

# Sélecteur interactif d'éléments (l'utilisateur clique, l'agent obtient les sélecteurs)
bun browser-pick.ts --multi

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

# Arrêt propre
bun browser-stop.ts

C’est tout. Sept scripts simples. Chacun fait une chose bien. L’agent les compose pour des workflows complexes.

Pourquoi ça fonctionne

Connexion au navigateur en cours plutôt que de lancer de nouvelles instances :

Démarrage instantané (pas de surcharge de lancement du navigateur)
Conserver l’authentification (Google, GitHub, LinkedIn, etc.)
L’utilisateur peut interagir (cliquer sur des éléments, se connecter manuellement)
Itération rapide (pas de nettoyage entre les commandes)

Révélation progressive :

Métadonnées du skill : ~50 tokens (« vous avez un browser skill »)
Documentation du skill : ~300 tokens (chargée en cas de besoin)
Surcharge totale : 60× moins que Chrome DevTools MCP

Vraie composabilité :

# Extraire des données vers un fichier
bun browser-eval.ts 'data' > output.json

# Capture d'écran et traitement
bun browser-screenshot.ts page.webp && magick page.webp page.jpg

# Enchaîner navigation et extraction
bun browser-navigate.ts https://site.com && bun browser-eval.ts 'scrape()'

Le test réel : 548 professionnels slovaques

L’ONG Leaf avait besoin de professionnels seniors slovaques travaillant à l’étranger pour une initiative de mentorat. Les données étaient dans Clay.com, derrière une authentification et des limites d’API.

Le défi :

Doit être authentifié sur Clay.com
API non documentée (rétro-ingénierie depuis le réseau)
Aperçu limité à 100 résultats par requête
Besoin de segmenter par pays pour contourner les limites
Extraire 500+ profils avec URLs LinkedIn, titres, entreprises, localisations

Approche traditionnelle : Construire un scraper complet, gérer les sessions, gérer la pagination, exporter les données. Des heures de travail.

Avec le skill /browser : 45 minutes du départ à 548 professionnels exportés.

Comment ça a fonctionné

1. Démarrer le navigateur avec le profil (conserve la connexion Clay) :

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

2. Découvrir l’API en inspectant le trafic réseau :

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

Repéré : https://api.clay.com/v3/actions/run-enrichment

3. Extraire les cookies d’authentification :

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

4. Construire le script d’extraction segmenté par pays :

L’agent a écrit un script spécialisé (clay-slovak-experts.ts) qui :

Utilise la session authentifiée du navigateur
Recherche des locuteurs slovaques hors de Slovaquie
Filtre par niveaux de séniorité (senior, directeur, VP, C-level)
Segmente par pays pour contourner la limite de 100 résultats
Extrait depuis 11 pays : États-Unis, Royaume-Uni, Allemagne, Autriche, République tchèque, Pays-Bas, Suisse, Irlande, Canada, Australie, France
Gère la pagination et le rate limiting
Déduplique par URL LinkedIn

5. Lancer l’extraction :

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

Sortie :

🇸🇰 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

Temps total : 45 minutes (dont découverte de l’API, création du script, extraction).

La puissance : L’agent a utilisé l’automatisation du navigateur comme une primitive composable. Naviguer, inspecter, s’authentifier, extraire — chaque étape propre et simple.

Pourquoi c’est important

Efficacité des tokens qui se cumule

Approche	Surcharge de tokens	% du contexte
Chrome DevTools MCP	~18 000 tokens	9,0 %
Playwright MCP	~13 700 tokens	6,8 %
Browser Skill	~300 tokens	0,15 %

Économie : 60× moins de consommation de contexte.

C’est 17 700 tokens que vous pouvez utiliser pour le vrai travail — documents, code, raisonnement.

Vitesse par la simplicité

Approche MCP :

Lancer un nouveau navigateur pour chaque session
Attendre l’initialisation
Exécuter l’outil via le protocole MCP
Parser les réponses structurées

Approche skill :

Se connecter au navigateur en cours (instantané)
Exécuter le script directement (pas de surcharge de protocole)
Sortie vers des fichiers (composable avec les outils standard)
Garder le navigateur actif entre les commandes

Différence réelle : Extraire 548 professionnels en 45 minutes vs. des heures d’intégration personnalisée.

Extensibilité par conception

Besoin d’une nouvelle capacité ? Écrivez un script de 50 lignes.

Exemple : Sélecteur interactif d’éléments (construit en 15 minutes) :

// browser-pick.ts
// L'utilisateur clique sur des éléments dans le navigateur, l'agent obtient les sélecteurs

import puppeteer from 'puppeteer-core';

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

    // Injecter un listener de clic
    await page.evaluate(() => {
        document.addEventListener('click', (e) => {
            const el = e.target;
            // Retourner sélecteur, texte, attributs, etc.
            console.log({
                tag: el.tagName,
                selector: getSelector(el),
                text: el.textContent,
                ...
            });
        });
    });
}

Essayez de construire ça comme un outil MCP. Puis essayez de le modifier pour votre cas d’usage spécifique.

Le support des profils change tout

Avec votre profil Chrome :

Déjà connecté à Google, GitHub, LinkedIn, Clay, etc.
Pas de gestion des identifiants
Pas de flux OAuth
Pas de gestion de session
Il suffit de naviguer et de travailler

Pour l’extraction Clay : Nous n’avons pas écrit de code d’authentification. Le navigateur avait déjà la session. L’agent l’a simplement utilisée.

L’architecture : Skills > Outils

Anthropic l’a expliqué dans sa conférence sur les agent skills :

« Le code n’est pas seulement un cas d’usage, mais l’interface universelle avec le monde numérique. »

Les skills sont des dossiers organisés avec des connaissances procédurales. La révélation progressive signifie que vous pouvez donner à un agent des centaines de skills sans noyer le contexte.

MCP fournit la connectivité. Les skills fournissent l’expertise.

Le browser skill le démontre :

Métadonnées : « Vous avez la capacité d’automatisation du navigateur »
Documentation : 6 131 caractères (~300 tokens chargés)
Scripts : Exécutés uniquement quand nécessaire, pas chargés dans le contexte
Composable : Génère des fichiers, fonctionne avec d’autres skills

Quand utiliser MCP vs. Skills

Utilisez les serveurs MCP quand :

Vous avez besoin de streaming de données en temps réel (bases de données, APIs)
Un service externe fournit une intégration MCP officielle
L’état de l’outil doit persister entre les requêtes
Plusieurs agents ont besoin d’un accès partagé

Utilisez les skills quand :

Vous voulez une surcharge minimale de tokens
La composabilité avec bash/fichiers est importante
Vous devez personnaliser fréquemment le comportement
Vitesse d’itération > protocole standardisé

Utilisez les deux : MCP pour la connectivité (bases de données, Slack, Notion). Skills pour l’expertise (automatisation du navigateur, traitement de données, workflows).

Essayez par vous-même

Le browser skill est disponible dans TeamDay. Demandez à un agent de :

"Naviguer sur example.com et extraire tous les titres d'articles"
"Capturer notre page d'accueil en mode clair et sombre"
"Trouver le sélecteur du bouton de recherche sur cette page"
"Extraire les 50 meilleurs posts de Hacker News avec un score > 100"

L’agent utilisera automatiquement le browser skill — se connecter, naviguer, extraire, afficher les résultats.

Surcharge de tokens : ~300 tokens chargés. 60× moins que Chrome DevTools MCP.

L’insight central

Les LLMs modernes sont suffisamment bons en programmation pour que des scripts simples + documentation surpasse des outils complexes.

Vous n’avez pas besoin de 26 outils de navigateur spécialisés. Vous avez besoin de 7 primitives et d’un agent qui sait comment les composer.

Le résultat : Moins de surcharge de contexte. Exécution plus rapide. Personnalisation plus facile. Vrai travail accompli en minutes plutôt qu’en heures.

548 professionnels slovaques pour l’ONG Leaf. Extraits en 45 minutes avec 300 tokens de surcharge.

C’est la puissance des skills légers.

Basé sur l’insight de Mario Zechner. Construit pour les agents TeamDay. Utilisé en production pour du vrai travail d’ONG.