Jack Herrington lleva 40 años trabajando con JavaScript y educa a desarrolladores en YouTube como el Blue Collar Coder. Como contribuidor principal de TanStack, ahora construye TanStack AI, un SDK type-safe e independiente de proveedor para añadir AI a aplicaciones web. Su próxima función Code Mode muestra qué pasa cuando dejas que los agentes orquesten herramientas MCP con TypeScript.
Este artículo es una adaptación de una MCP MVP entrevista con Jack Herrington, TanStack Core en Netlify.
En 2025, los desarrolladores adoptaron el stack de TypeScript para crear aplicaciones web de cara al usuario impulsadas por AI. Cada framework maneja a su manera el streaming, las llamadas a herramientas y los adaptadores de proveedor (ya cubrimos algunos de los más populares en nuestra documentación). La comunidad TypeScript valora un enfoque con criterio propio para construir, y los proveedores de servicios suelen estar más que dispuestos a ofrecer ese tipo de tooling para atraer clientes a su plataforma.
Jack Herrington lleva tiempo trabajando en una alternativa genuinamente open source y con criterio propio (sin vendor lock-in). Jack es contribuidor principal de TanStack y cientos de miles de desarrolladores lo conocen como el Blue Collar Coder en YouTube. Está construyendo TanStack AI, la biblioteca más nueva del ecosistema TanStack. Toma la misma filosofía que hizo populares a TanStack Query, TanStack Router y TanStack Start (independiente de framework, type-safe, sin vendor lock-in) y la aplica a AI.
“Hemos pensado mucho en las formas en que quieres extender o cambiar la estructura base”, le dijo Jack a RL Nabors en una entrevista para la serie MCP MVP de Arcade. “El demo de chat más simple tiene unas 20 líneas de código de servidor y 10 de frontend. Pero queríamos flexibilidad para casos de uso reales.”
Cómo TanStack AI se distingue entre los frameworks de agentes
TanStack AI ofrece una forma type-safe e independiente de proveedor para integrar funciones de AI en aplicaciones web. Trae adaptadores para OpenAI, Anthropic, Gemini y Ollama desde el inicio, con bibliotecas cliente para React, Solid y JavaScript puro. La biblioteca principal maneja streaming, ejecución de herramientas y ciclos agénticos. Es independiente de framework, fiel a la filosofía de TanStack de encajar en tu stack existente en lugar de reemplazarlo.
Lo que resulta especialmente interesante para quienes trabajan con herramientas MCP es que TanStack AI soporta de forma nativa las definiciones de herramientas en JSON Schema. Si tu servidor MCP ya expone herramientas con JSON Schema, no necesitas wrappers de Zod ni capas de conversión. Solo pasa las definiciones y funcionan. Jack señaló que fue una decisión de diseño deliberada para simplificar la integración. Son esos pequeños detalles y refinamientos los que han hecho que TanStack se gane el corazón de los desarrolladores de React.
TanStack AI también soporta el protocolo AG-UI, un estándar abierto para la comunicación entre agentes y frontend. Esto significa que si tienes un backend en PHP o Python que habla AG-UI, las bibliotecas cliente de TanStack AI funcionarán con él, convirtiéndolo en el primer framework de AI en TypeScript con esta interoperabilidad entre lenguajes.
TanStack AI incluye adaptadores para generación de imágenes, texto a voz, voz a texto y audio en tiempo real (con soporte próximo para proveedores como la API en tiempo real de OpenAI y ElevenLabs).
Las herramientas pueden ser isomórficas. Defínelas una vez con toolDefinition()e impleméntalas por separado para servidor y cliente. Además, hay soporte integrado para flujos de aprobación de herramientas que mantienen a los humanos en el ciclo.
Herramientas MCP sin un cliente MCP
Uno de los puntos más fuertes de la conversación fue lo naturalmente que las herramientas MCP se integran con TanStack AI. Rachel-Lee construyó un chatbot usando los servidores MCP de Arcade con TanStack AI y le sorprendió el poco código de pegamento que necesitó.
“Solo usa tu biblioteca cliente MCP para obtener las herramientas, pásalas a TanStack AI y listo”, dijo Jack. “El JSON Schema es el contrato de interfaz.”
Esto importa porque significa que TanStack AI no necesita traer su propio cliente MCP. El Model Context Protocol SDK maneja la conexión; TanStack AI maneja el streaming, el ciclo agéntico y la UI. Cada uno hace lo que sabe hacer.
Jack ve un futuro donde los módulos de herramientas preempaquetados se vuelven comunes. Podrías importar un tmdb-toolspaquete y tu agente sabría al instante cómo buscar películas. O traer un gmail-toolsmódulo para leer y enviar correos. Los servidores MCP como los que ofrece Arcade.dev ya están ahí, con acceso autenticado a servicios como Gmail, Slack, GitHub y más, con toda la complejidad de OAuth resuelta por ti.
Code Mode: cuando tu agente necesita orquestar
TanStack AI tiene una nueva función en alpha que muestra hacia dónde va la orquestación de herramientas. Se llama Code Mode y aborda un problema específico que cualquiera que haya construido flujos agénticos conoce bien: ¿qué pasa cuando llamar herramientas una por una no es suficientemente eficiente?
Este es el escenario. Le pides a un agente que compare estadísticas de descarga de una docena de paquetes, deje de seguir 200 cuentas, o audite cada componente de un sistema de diseño. Con las llamadas a herramientas estándar, el LLM hace una llamada por turno, cada una expande la ventana de contexto y quema tokens. En la iteración 47, el modelo empieza a perderse.
En Code Mode, en lugar de llamar herramientas una a la vez, el agente escribe un programa en TypeScript que orquesta esas llamadas y lo ejecuta en un entorno sandboxed. El LLM hace una sola llamada a execute_typescriptque incluye un loop que maneja todas las iteraciones de forma programática.
Jack hizo un demo en vivo de la diferencia. Una consulta con tool calling estándar usó 17K de contexto. La misma consulta con Code Mode usó 4K, con el agente haciendo 12 llamadas internas a herramientas dentro de un loop de TypeScript que él mismo escribió. Mismo resultado, un cuarto del contexto, y el agente diseñó su propia estructura de reporte en el proceso.
“Es mejor escribiendo código que iterando llamadas a herramientas”, dijo Jack. “Se pierde si lo haces llamar herramientas una por una. ¿Pero escribir el script para hacerlo? Sin problema alguno.”
Cómo funciona: le das a Code Mode tus herramientas externas y un driver de aislamiento (actualmente Isolated VM, con soporte planeado para Cloudflare Workers y Bun). Code Mode convierte las definiciones de herramientas en tipos de TypeScript, las inyecta en el sandbox y le da al LLM una sola herramienta: execute_typescript. Antes de la ejecución, el código se compila, y si falla, el agente ve el error del compilador de TypeScript y se autocorrige, reescribiendo hasta que pase.
Code Mode orquesta herramientas MCP en lugar de reemplazarlas. Tus herramientas MCP siguen proporcionando las acciones autenticadas y con restricciones: enviar un correo, consultar una base de datos, publicar en Slack. Code Mode le permite al agente escribir un script que llame esas herramientas de forma eficiente, en lugar de hacer que el LLM narre cada paso.
Code Mode y herramientas MCP juntos
Mateo de Arcade se unió a la conversación para profundizar en cómo Code Mode y las herramientas MCP interactúan en la práctica. Tú decides qué herramientas llama el LLM directamente y cuáles van dentro del sandbox de Code Mode. Incluso puedes ponerlas en ambos.
Todo está en hacer coincidir el diseño de herramientas con el contexto. Las herramientas de nivel superior que el modelo llama directamente deben ser conversacionales y descriptivas, pensadas para un sistema que razona en lenguaje natural. Las herramientas de Code Mode pueden ser más compactas: firmas estilo API con entradas y salidas tipadas, ya que las llama código, no una respuesta a un prompt en lenguaje natural.
La seguridad sigue bajo control humano. TanStack AI tiene modos de aprobación integrados tanto en el nivel de llamada directa a herramientas como dentro de Code Mode. Cuando un script sandboxed intenta llamar una herramienta con efectos en el mundo real, como enviar dinero o publicar contenido, emite un evento al cliente, que puede aprobar o rechazar antes de que la ejecución continúe.
Entonces, en lugar de pedir aprobación para cada acción, enruta los efectos secundarios a una cola de borradores. El agente redacta cinco correos; el humano revisa la lista y aprueba, edita o rechaza cada uno. Es más rápido que aprobar uno por uno, y el agente recibe retroalimentación de los rechazos.
El agente de reportes: generando UI al vuelo
Para mostrar hacia dónde lleva todo esto, Jack hizo un demo de un “agente de reportes” construido sobre Code Mode. Le pidió encontrar las bibliotecas de gestión de estado más populares. El agente generó una UI en React en tiempo real, renderizando un reporte personalizado con componentes interactivos, en vivo en el navegador. Cuando el código falló a mitad de la generación, el agente detectó el error, reescribió el componente y el reporte se reconstruyó.
Luego mostró un dashboard bancario donde el agente añadió un botón personalizado con TypeScript embebido en su onPresshandler. Después, al presionar ese botón, el código se ejecuta fuera de cualquier conversación con el LLM. Es TypeScript congelado, que corre de forma determinista. Sin inferencia.
“Piensa en un sistema operativo personal”, dijo Jack. “Dame un dashboard sobre panzas de cerdo, y simplemente lo construye. O mi app de automatización del hogar: dame un botón que encienda el TV. Y simplemente funciona.”
Esto apunta hacia algo con lo que los product managers están empezando a lidiar: cuando la UI puede adaptarse al usuario sobre la marcha, dejas de pensar primero en features y empiezas a pensar en capacidades. ¿Qué capacidades base expone el sistema? ¿Qué herramientas MCP están disponibles? El LLM las une en la forma que el usuario necesite.
Habilidades como memoria
Code Mode también incluye una biblioteca de habilidades. Cuando el agente escribe una rutina de TypeScript especialmente buena, puedes persistirla. La próxima vez que un usuario pida algo similar, el agente saca la habilidad del caché y la ejecuta de inmediato. El ahorro de contexto es significativo: una rutina compleja que tomó 4K de contexto para generarse cuesta casi nada reproducirla.
Como cualquier caché, las entradas obsoletas pueden eliminarse. Jack planteó una idea que el equipo está explorando: usar un modelo de nivel superior, como Opus, como un subagente bibliotecario que revisa la biblioteca de habilidades, encuentra coincidencias cercanas y amplía herramientas existentes según la demanda. El trabajo diario se mantiene en Haiku, que según Jack es notablemente rápido tanto para escribir código como para llamar herramientas.
La conversación giró hacia una analogía vívida. Rachel-Lee compartió su experiencia construyendo sistemas de notas y transcripción para compensar una racha de pérdida de memoria a corto plazo por COVID. Rachel-Lee se despertaba cada mañana con poca memoria del día anterior. Con este sistema, podía pasarle notas a su yo futuro y seguir funcionando con efectividad.
Es un marco útil para cualquiera que construya sistemas de agentes. Los LLMs no tienen memoria lineal. Se despiertan frescos en cada ventana de contexto. Las habilidades de Code Mode son una forma de persistencia. Las herramientas MCP son las capacidades a las que recurre. Los dos trabajan juntos: las habilidades le enseñan al agente cómo razonar sobre una tarea; las herramientas le dan acciones deterministas para ejecutar.
Pruébalo tú mismo
La forma más rápida de ver TanStack AI funcionando con herramientas MCP autenticadas es el tutorial paso a paso de Arcade: Construye un chatbot de AI con Arcade y TanStack AI. Conectarás una app de TanStack Start con las herramientas de Gmail y Slack de Arcade, manejarás la autorización OAuth automáticamente y tendrás un chatbot funcionando en minutos.
Para empezar con TanStack AI por tu cuenta:
npx @tanstack/cli create my-app
El Code Mode de TanStack AI se lanzará en alpha, la primera biblioteca de AI en TypeScript en ofrecer orquestación de herramientas basada en código con inyección de herramientas externas. Para feedback y discusión, únete al canal de TanStack AI en Discord. Para bugs y solicitudes de funciones, abre issues en el repositorio de GitHub.
Encuentra a Jack en YouTube como el Blue Collar Coder, en Bluesky como @jherr.dev, en X como @jherr, y en GitHub. Su sitio es jackherrington.com.
MCP MVP es una serie de videos de Arcade con RL Nabors que destaca a los creadores que dan forma al ecosistema agéntico. Mira la entrevista completa con Jack Herrington →
