Jack Herrington développe en JavaScript depuis 40 ans et forme des développeurs sur YouTube sous le nom de Blue Collar Coder. Contributeur principal à TanStack, il construit désormais TanStack AI, un SDK type-safe et agnostique au fournisseur pour intégrer l’IA dans les applications web. Sa future fonctionnalité Code Mode illustre ce qui se passe quand on laisse des agents orchestrer des outils MCP en TypeScript.

Cet article est adapté d’une MCP MVPinterview avec Jack Herrington, TanStack Core chez Netlify.

En 2025, les développeurs ont adopté la stack TypeScript pour créer des applications IA tournées vers l’utilisateur. Chaque framework gère à sa façon le streaming, l’appel d’outils et les adaptateurs de fournisseurs (nous en avons déjà couvert certains des plus populaires dans notre documentation). La communauté TypeScript aime les approches opinionées, et les fournisseurs de services sont souvent trop heureux d’en proposer pour attirer de nouveaux clients sur leur plateforme.

Jack Herrington travaille sur une véritable alternative open source et opinionée, sans vendor lock-in. Jack est un contributeur principal à TanStack, connu de centaines de milliers de développeurs sous le nom de Blue Collar Coder sur YouTube. Il construit TanStack AI, la bibliothèque la plus récente de l’écosystème TanStack. Elle reprend la philosophie qui a fait le succès de TanStack Query, TanStack Router et TanStack Start (agnostique au framework, type-safe, sans vendor lock-in) et l’applique à l’IA.

« Nous avons vraiment réfléchi aux façons d’étendre ou de modifier la structure de base », a confié Jack à RL Nabors lors d’une interview pour la série MCP MVP d’Arcade. « La démo de chat basique tient en 20 lignes de code serveur et 10 lignes côté frontend. Mais nous voulions de la flexibilité pour les cas d’usage réels. »

Comment TanStack AI se distingue parmi les frameworks d’agents

TanStack AI offre un moyen type-safe et agnostique au fournisseur d’intégrer des fonctionnalités IA dans les applications web. Des adaptateurs pour OpenAI, Anthropic, Gemini et Ollama sont fournis d’emblée, avec des bibliothèques client pour React, Solid et JavaScript vanilla. La bibliothèque principale gère le streaming, l’exécution des outils et les boucles agentiques. Elle est agnostique au framework, fidèle à la philosophie TanStack : s’intégrer à votre stack existante plutôt que la remplacer.

Ce qui la rend particulièrement intéressante pour les développeurs travaillant avec des outils MCP, c’est que TanStack AI supporte nativement les définitions d’outils en JSON Schema. Si votre serveur MCP expose déjà des outils avec du JSON Schema, vous n’avez besoin ni de wrappers Zod ni de couches de conversion. Passez simplement les définitions, ça fonctionne. Jack a précisé que c’était un choix de conception délibéré pour simplifier l’intégration. Ce sont ces petites finitions qui ont conquis les développeurs React.

TanStack AI supporte aussi le protocole AG-UI, un standard ouvert pour la communication entre agent et frontend. Si vous avez un backend en PHP ou Python qui parle AG-UI, les bibliothèques client de TanStack AI fonctionneront avec lui, ce qui en fait le premier framework IA TypeScript livré avec cette interopérabilité cross-langage.

TanStack AI inclut des adaptateurs pour la génération d’images, la synthèse vocale, la transcription et l’audio en temps réel (avec un support à venir pour des fournisseurs comme l’API temps réel d’OpenAI et ElevenLabs).

Les outils peuvent être isomorphes. Définissez-les une fois avec toolDefinition() puis implémentez-les séparément côté serveur et client. Il existe également un support natif pour les workflows d’approbation des outils pour garder l’humain dans la boucle.

Outils MCP sans client MCP

L’un des points forts de la conversation était la fluidité avec laquelle les outils MCP s’intègrent à TanStack AI. Rachel-Lee a construit un chatbot en utilisant les serveurs MCP d’Arcade avec TanStack AI et a été frappé par le peu de code de liaison nécessaire.

« Vous prenez votre bibliothèque client MCP pour récupérer vos outils, vous les passez à TanStack AI, et ça marche », a expliqué Jack. « Le JSON Schema est le contrat d’interface. »

C’est important, car cela signifie que TanStack AI n’a pas besoin d’embarquer son propre client MCP. Le SDK Model Context Protocol gère la connexion ; TanStack AI s’occupe du streaming, de la boucle agentique et de l’UI. Chacun fait ce pour quoi il est bon.

Jack entrevoit un futur où des modules d’outils prépackagés deviendraient courants. On pourrait importer un package tmdb-toolset l’agent saurait instantanément chercher des films. Ou intégrer un module gmail-toolspour lire et envoyer des emails. Les serveurs MCP comme ceux qu’Arcade.dev propose sont déjà là, offrant un accès authentifié à des services comme Gmail, Slack, GitHub et bien d’autres, avec toute la complexité OAuth gérée pour vous.

Code Mode : quand votre agent a besoin d’orchestrer

TanStack AI dispose d’une nouvelle fonctionnalité en alpha qui montre où va l’orchestration d’outils. Elle s’appelle Code Mode et répond à un problème précis que quiconque a construit des workflows agentiques a rencontré : que faire quand les appels d’outils un par un ne sont plus assez efficaces ?

Voilà le scénario. Vous demandez à un agent de comparer les statistiques de téléchargement d’une douzaine de packages, de ne plus suivre 200 comptes, ou d’auditer chaque composant d’un design system. Avec l’appel d’outils standard, le LLM fait un appel par aller-retour, chacun élargissant la fenêtre de contexte et brûlant des tokens. À l’itération 47, le modèle commence à perdre le fil.

En Code Mode, au lieu d’appeler les outils un par un, l’agent écrit un programme TypeScript qui orchestre ces appels, puis l’exécute dans un environnement sandboxé. Le LLM fait un seul appel execute_typescriptincluant une boucle qui gère toutes les itérations de façon programmatique.

Jack en a fait la démonstration en direct. Une requête standard avec appel d’outils utilisait 17K de contexte. La même requête via Code Mode en utilisait 4K, avec 12 appels d’outils internes dans une boucle TypeScript que l’agent avait écrite lui-même. Même résultat, un quart du contexte, et l’agent a conçu sa propre structure de rapport au passage.

« Il est meilleur pour écrire du code que pour boucler sur des appels d’outils », a dit Jack. « Il perd le fil si vous lui faites appeler les outils un par un. Mais écrire le script pour le faire ? Aucun problème. »

Fonctionnement : vous fournissez à Code Mode vos outils externes et un driver d’isolation (actuellement Isolated VM, avec Cloudflare Workers et Bun prévus). Code Mode convertit les définitions d’outils en types TypeScript, les injecte dans le sandbox, et donne au LLM un seul outil : execute_typescript. Avant exécution, le code est compilé ; s’il échoue, l’agent voit l’erreur du compilateur TypeScript et se corrige, en réécrivant jusqu’à ce que ça passe.

Code Mode orchestre les outils MCP sans les remplacer. Vos outils MCP fournissent toujours les actions authentifiées et encadrées : envoyer un email, interroger une base de données, poster sur Slack. Code Mode permet à l’agent d’écrire un script qui appelle ces outils efficacement, plutôt que de laisser le LLM narrer chaque étape.

Code Mode et outils MCP ensemble

Mateo d’Arcade s’est joint à la conversation pour creuser la façon dont Code Mode et les outils MCP interagissent en pratique. Vous décidez quels outils le LLM appelle directement et lesquels vont dans le sandbox Code Mode. Vous pouvez même les mettre dans les deux.

Tout est une question d’adéquation entre la conception des outils et leur contexte. Les outils LLM de premier niveau, ceux que le modèle appelle directement, doivent être conversationnels et descriptifs, adaptés à un système qui raisonne en langage naturel. Les outils Code Mode peuvent être plus resserrés : signatures style API avec entrées et sorties typées, puisqu’ils sont appelés par du code et non en réponse à un prompt en langage naturel.

La sécurité reste contrôlée par l’humain. TanStack AI intègre des modes d’approbation à la fois au niveau de l’appel direct d’outils et dans Code Mode. Quand un script sandboxé tente d’appeler un outil avec des effets réels (envoyer de l’argent ou publier du contenu), il émet un événement vers le client, qui peut approuver ou rejeter avant la reprise de l’exécution.

Plutôt que d’exiger une approbation pour chaque action, dirigez les effets de bord vers une file de brouillons. L’agent compose cinq emails ; l’humain parcourt la liste et approuve, modifie ou rejette chacun. C’est plus rapide que de valider un par un, et l’agent reçoit un retour sur les rejets.

L’agent de reporting : générer une UI à la volée

Pour montrer où tout cela mène, Jack a démontré un « agent de reporting » construit sur Code Mode. Il lui a demandé de trouver les bibliothèques de gestion d’état les plus populaires. L’agent a généré une UI React en temps réel, affichant un rapport personnalisé avec des composants interactifs, directement dans le navigateur. Quand le code a planté en cours de génération, l’agent a détecté l’erreur, réécrit le composant, et le rapport s’est reconstruit.

Il a ensuite montré un tableau de bord bancaire où l’agent avait ajouté un bouton personnalisé avec du TypeScript intégré dans son handler onPressPlus tard, appuyer sur ce bouton exécute le code en dehors de toute conversation LLM. C’est du TypeScript figé, qui tourne de façon déterministe. Sans inférence.

« Imaginez un système d’exploitation personnel », a dit Jack. « Donnez-moi un tableau de bord sur les ventres de porc, il le construit. Ou mon app domotique : donne-moi un bouton qui allume la télé. Et ça marche. »

Cela pointe vers quelque chose que les chefs de produit commencent à intégrer : quand l’UI peut s’adapter à l’utilisateur à la volée, on arrête de penser fonctionnalité par fonctionnalité et on pense en termes de capacités. Quelles capacités de base le système expose-t-il ? Quels outils MCP sont disponibles ? Le LLM les assemble dans la forme dont l’utilisateur a besoin.

Les skills comme mémoire

Code Mode embarque aussi une bibliothèque de skills. Quand l’agent écrit une routine TypeScript particulièrement efficace, vous pouvez la persister. La prochaine fois qu’un utilisateur demande quelque chose de similaire, l’agent récupère le skill mis en cache et l’exécute immédiatement. Le gain de contexte est significatif : une routine complexe qui a coûté 4K de contexte à générer ne coûte presque rien à rejouer.

Comme tout cache, les entrées obsolètes peuvent être évincées. Jack a évoqué une idée explorée par l’équipe : utiliser un modèle de niveau supérieur, comme Opus, comme agent-bibliothécaire qui examinerait la bibliothèque de skills, trouverait des correspondances proches et enrichirait les outils existants à la demande. Le travail quotidien resterait sur Haiku, que Jack décrit comme remarquablement rapide tant pour écrire du code que pour appeler des outils.

La conversation a bifurqué vers une analogie frappante. Rachel-Lee a partagé son expérience de construction de systèmes de notes et de transcription pour compenser des épisodes de perte de mémoire à court terme liés au COVID. Rachel-Lee se réveillait chaque matin avec peu de souvenirs de la veille. Grâce à ce système, Rachel-Lee pouvait laisser des notes à son futur soi et continuer à fonctionner efficacement.

C’est un cadre utile pour quiconque construit des systèmes d’agents. Les LLMs n’ont pas de mémoire linéaire. Ils repartent de zéro à chaque fenêtre de contexte. Les skills de Code Mode sont une forme de persistance. Les outils MCP sont les capacités qu’il mobilise. Les deux fonctionnent ensemble : les skills apprennent à l’agent à raisonner sur une tâche ; les outils lui donnent des actions déterministes à exécuter.

Essayez par vous-même

Le moyen le plus rapide de voir TanStack AI fonctionner avec des outils MCP authentifiés est le tutoriel pas à pas d’Arcade : Construire un chatbot IA avec Arcade et TanStack AI. Vous connecterez une application TanStack Start aux outils Gmail et Slack d’Arcade, gérerez l’autorisation OAuth automatiquement, et aurez un chatbot fonctionnel en quelques minutes.

Pour démarrer avec TanStack AI seul :

npx @tanstack/cli create my-app

TanStack AI Code Mode sera lancé en alpha, première bibliothèque IA TypeScript à proposer l’orchestration d’outils par code avec injection d’outils externes. Pour les retours et discussions, rejoignez le canal TanStack AI sur Discord. Pour les bugs et demandes de fonctionnalités, ouvrez des issues sur le dépôt GitHub.

Retrouvez Jack sur YouTube en tant que Blue Collar Coder, sur Bluesky sous @jherr.dev, sur X sous @jherr, et sur GitHub. Son site : jackherrington.com.

MCP MVP est une série vidéo d’Arcade avec RL Nabors qui met en lumière les bâtisseurs qui façonnent l’écosystème agentique. Voir l’interview complète avec Jack Herrington →