00:00:00Los agentes de IA han comenzado a integrarse en cada parte de nuestras vidas.
00:00:03Y una de las áreas más importantes donde esto ocurre es en el navegador.
00:00:06Las grandes empresas de IA se han dado cuenta de que el navegador es la herramienta que todos usan
00:00:11absolutamente todos los días.
00:00:12Así que, ¿por qué no poner la IA ahí mismo?
00:00:14Pero la verdad es que todas son malísimas.
00:00:15Y no es una cuestión de optimización.
00:00:17Hay un problema fundamental que no se solucionará por mucho que se optimice.
00:00:20Sin embargo, Google, en colaboración con Microsoft, acaba de lanzar algo llamado WebMCP.
00:00:24Y en lugar de intentar que los agentes sean mejores usando sitios web, hace que los sitios sean mejores
00:00:29comunicándose con los agentes.
00:00:30Es un enfoque completamente diferente.
00:00:32Y lo que permite es algo que no habíamos visto antes.
00:00:35Esta es una página HTML simple que se ejecuta en un servidor local.
00:00:38Al abrir la pestaña de extensiones, tenemos la extensión WebMCP.
00:00:41Al abrirla, debajo del nombre de este sitio, tenemos una herramienta: BookTable.
00:00:45Conectamos este puente WebMCP a Claude Code y le indicamos que teníamos abierto un formulario
00:00:49de reserva de restaurante con herramientas WebMCP disponibles.
00:00:52Le asignamos la tarea de reservar una mesa para dos con fecha, nombre y una petición especial.
00:00:57Todos esos campos están presentes en el formulario.
00:00:59Confirmó la fecha, usó la herramienta WebMCP que el sitio proporcionó, completó los campos
00:01:03y realizó la reserva con éxito.
00:01:06Actualmente, un agente tiene dos formas de entender lo que hay en pantalla.
00:01:09La primera se basa en la visión.
00:01:11El agente toma una captura de pantalla de toda la página, anota cada elemento visible y
00:01:15envía esa imagen a un modelo que intenta descifrar dónde hacer clic.
00:01:19La segunda forma es el análisis del DOM.
00:01:21El agente extrae el código HTML puro de la página.
00:01:24Y si alguna vez has abierto “Inspeccionar elemento” en cualquier web, ya sabes qué aspecto tiene.
00:01:28Miles de líneas de código.
00:01:29El agente lee todo eso e intenta identificar el botón correcto.
00:01:33Ambos enfoques comparten el mismo problema fundamental.
00:01:35Son no deterministas.
00:01:36El agente está haciendo su mejor suposición en cada momento.
00:01:39La razón por la que nada de esto funciona de forma constante es que todo internet se diseñó para
00:01:43ojos humanos.
00:01:45Cada sitio web asume que una persona lo está mirando.
00:01:47No hay una estructura pensada para máquinas.
00:01:48Así que cada agente, por muy bueno que sea el modelo, se queda intentando interpretar algo
00:01:53que nunca fue diseñado para ser interpretado por una máquina.
00:01:55Con WebMCP, en lugar de que el agente intente descifrar tu web, tu sitio registra
00:02:00sus acciones disponibles como herramientas.
00:02:01Cuando un agente llega a una página, no tiene que adivinar.
00:02:04Simplemente lee las herramientas disponibles y las llama directamente.
00:02:07Por ahora, WebMCP solo está disponible en una versión preliminar.
00:02:10A medida que la web de agentes evoluciona, los sitios también deben evolucionar con ella.
00:02:13Y como ya viste, al definir esas herramientas, damos a estos agentes un mejor acceso para interactuar
00:02:18con nuestros sitios.
00:02:19La demostración funcionó porque era un formulario HTML sencillo.
00:02:21Pero la mayoría de los sitios web reales no son tan simples.
00:02:23Por eso, WebMCP tiene dos enfoques diferentes según con qué estés trabajando.
00:02:28Hay dos formas que permiten a los agentes tomar el control del navegador.
00:02:31La API declarativa es para flujos de trabajo simples, como los formularios HTML que acabas de ver.
00:02:35La API imperativa es para aplicaciones web completas con múltiples páginas, y estas requieren
00:02:40cierta implementación adicional que veremos más adelante.
00:02:43Actualmente no hay documentación oficial, pero tienen un repositorio de herramientas WebMCP
00:02:48en Google Chrome Labs con dos demos, y solo una de ellas está alojada.
00:02:52Hay una demo simple de búsqueda de vuelos y una extensión oficial de inspección de herramientas.
00:02:56Tras instalarla, cualquier sitio que tenga WebMCP implementado permitirá detectar
00:03:01esas herramientas mediante la extensión, además de otras funciones interesantes.
00:03:05El esquema de entrada de las herramientas aparece justo ahí.
00:03:07Ahora mismo solo hay una herramienta en esta página: la de búsqueda de vuelos.
00:03:10Han dado dos opciones para usarla.
00:03:12Puedes proporcionar argumentos de entrada personalizados para que el modelo de IA los complete, o
00:03:16configurar tu clave de API de Gemini, dar una instrucción en lenguaje sencillo y la página se controlará
00:03:21en función de eso.
00:03:22Ahora mismo tiene estos valores de entrada por defecto.
00:03:24Los cambiamos y realmente buscó vuelos, obteniendo varios resultados.
00:03:28Regresé, y esta vez el sitio de viajes de WebMCP tenía cuatro herramientas disponibles,
00:03:32tres de las cuales son ahora filtros que se pueden aplicar.
00:03:35Los argumentos de entrada de la página también habían cambiado.
00:03:37Añadí otro argumento y nos dio una notificación de que los filtros se habían actualizado.
00:03:41Ningún vuelo coincidía con esos filtros, pero todos se aplicaron.
00:03:44Cambiamos entre Zen Browser y Chrome durante esto porque, aunque han lanzado
00:03:48WebMCP como un protocolo abierto para cualquier navegador, por ahora solo funciona
00:03:54en la versión Canary de Chrome.
00:03:55Eso será así hasta que publiquen el estándar para que todo el mundo pueda usarlo.
00:03:58Así que eso es todo lo que hay en cuanto a herramientas oficiales por ahora.
00:04:01Sin documentación, solo dos demos, solo funciona en Chrome Canary y no puedes usarlo
00:04:05con Claude Code porque está pensado para ser usado por agentes de navegador.
00:04:09Así que encontramos este puente WebMCP personalizado que puedes instalar en tu sistema,
00:04:14y te proporciona un MCP y también una extensión.
00:04:16Esto es lo que permite a Claude Code usar WebMCP y navegar y utilizar las herramientas
00:04:22que ofrece cualquier sitio web.
00:04:23Para mostrar cómo se implementa esto en los sitios, empezaremos con el enfoque más sencillo.
00:04:27En la API declarativa, que viste con el formulario HTML, solo tienes que
00:04:31declarar tres cosas dentro del formulario: el nombre de la herramienta, su descripción y
00:04:36la descripción de sus parámetros.
00:04:37No necesitas profundizar mucho en ellos.
00:04:39Solo debes asegurarte de que tu agente los incluya.
00:04:41Teníamos dos guías creadas mediante ingeniería inversa de las demos del repositorio de WebMCP
00:04:46y le dimos acceso a Claude Code a ellas.
00:04:47Durante ese proceso, nos encontramos con algunos problemas comunes y tuvimos que
00:04:51corregir estas guías sobre la marcha.
00:04:53Ambas están disponibles en AI Labs Pro, nuestra comunidad donde obtienes plantillas
00:04:57listas para usar.
00:04:58Puedes aplicarlas directamente a tus proyectos de este vídeo y de todos los anteriores.
00:05:01La enseñanza principal está aquí en el vídeo, pero si quieres los archivos reales, los enlaces
00:05:05están en la descripción.
00:05:06Si tu agente añade estas declaraciones, el resto depende del navegador, que las
00:05:10lee directamente del HTML.
00:05:12La segunda forma era la API imperativa, para casos que requieren interacciones más complejas
00:05:17y ejecución de JavaScript.
00:05:18Inicializamos una app de Next.js, le dimos a Claude Code la guía de Next.js y eso fue todo
00:05:23lo que necesitó para implementarlo.
00:05:24En las apps de React, crea un nuevo archivo en la carpeta de librerías donde declara todas
00:05:29las herramientas que el sitio necesita.
00:05:30Estas son todas las funciones y estas son sus definiciones.
00:05:33Pero como estas aplicaciones web pueden ser muy grandes y tener más de 100 herramientas,
00:05:38surge el mismo problema que en Claude Code: el contexto sobrecarga todo
00:05:41y rompe el sistema por completo.
00:05:43Por eso, en lugar de cargar todas las herramientas de un sitio, es mejor cargar solo las
00:05:47que corresponden a una sola página.
00:05:48Este concepto se llama carga contextual.
00:05:50Esta es la app de Next.js que hizo Claude Code.
00:05:53Es una pequeña aplicación de demostración funcional con el backend implementado.
00:05:57Ahora estamos en la página de inicio y el sitio solo tiene 3 herramientas disponibles.
00:06:01Fui a la página del carrito y esta vez había 4 herramientas y los nombres también habían cambiado.
00:06:05La disponibilidad de herramientas cambia según la página en la que te encuentres.
00:06:09Aquí es donde entran en juego las funciones de registro.
00:06:11Cada vez que entras en una página, como la de inicio, se ejecuta la función de registro de herramientas de inicio y
00:06:15cuando sales, se ejecuta la de anulación de registro.
00:06:18Dependiendo de qué herramientas pertenezcan a esa página, simplemente las registra y luego las anula.
00:06:23Por eso en este caso no depende solo del navegador, sino que el código también gestiona
00:06:27la integración.
00:06:28No estamos usando realmente WebMCP con un agente de navegador, que es lo que Google quiere
00:06:32y lo que cada navegador implementaría por su cuenta.
00:06:34En realidad usamos un puente que conecta Claude Code con WebMCP y así es como
00:06:39controlamos los sitios web.
00:06:40Si quieres sacar más partido a Claude Code, tenemos un vídeo sobre las 10
00:06:44formas más actualizadas de sacarle ventaja.
00:06:46Este puente es un proyecto comunitario y, con la API imperativa, tiene el problema de que
00:06:51el cambio de herramientas no funciona muy bien con este servidor MCP.
00:06:54Al abrir el sitio, estábamos en la página de pago e iniciamos la sesión de Claude Code allí.
00:06:59Cuando le pedimos volver a la página de inicio, no pudo ver las herramientas disponibles en ella.
00:07:04Estábamos en la página de inicio, entré en la del producto y nos apareció un botón de añadir al carrito.
00:07:08Pero cuando el agente estaba en esa página, no podía ver ese botón.
00:07:11Así que tuvimos que añadir manualmente un artículo al carrito para hacer la demostración.
00:07:14Pero cuando le pedimos completar el pago, automáticamente rellenó los datos,
00:07:18realizó el pedido y completó todo el proceso de compra.
00:07:21Esa es una limitación de este MCP, lo que nos lleva a otro punto.
00:07:25WebMCP es de código abierto y cuenta con importantes navegadores y empresas tecnológicas como participantes.
00:07:30Pero ahora mismo, el único navegador que lo soporta es Chrome Canary y el agente previsto
00:07:34es Gemini, la IA de Google integrada directamente en el navegador.
00:07:38Si eres dueño de un sitio web e implementas WebMCP hoy, el único agente que puede usar
00:07:42tus herramientas de forma nativa es Gemini.
00:07:44Claude Code necesita un puente de la comunidad que falla cuando entra en juego la carga contextual.
00:07:49Cualquier agente que no sea de Google está en desventaja.
00:07:51¿Podría Claude ponerse al día?
00:07:52Claro, tienen su propia extensión de navegador.
00:07:55Y como también es un agente de navegador, podría descubrir estas herramientas de la misma forma
00:07:59que lo hace Gemini.
00:08:00Pero la pregunta es cuánta gente va a instalar deliberadamente una extensión de Claude
00:08:04en lugar de usar el Gemini que ya viene integrado en Chrome.
00:08:08Chrome tiene miles de millones de usuarios; no necesitan instalar nada.
00:08:11En nuestra opinión, Google no está bloqueando a nadie.
00:08:13Simplemente aprovechan la arquitectura y la audiencia que ya tienen.
00:08:17Un estándar abierto que funciona mejor en el navegador que ya poseen con el agente
00:08:21que ya distribuyen.
00:08:22Eso no significa que no debas implementarlo.
00:08:23El estándar en sí es realmente útil, y hacer que tu sitio sea accesible para agentes es inteligente,
00:08:28independientemente de qué agente se beneficie primero.
00:08:30Hay algunas cosas que vale la pena saber si decides implementarlo.
00:08:33La especificación recomienda no más de 50 herramientas por página.
00:08:36Esto no está pensado para exponer toda tu aplicación.
00:08:38Es para acciones específicas y enfocadas, las cosas que alguien realmente querría hacer
00:08:42en esa página concreta.
00:08:43Las descripciones de las herramientas también importan más de lo que crees.
00:08:46Los agentes las leen para decidir qué herramienta llamar.
00:08:49Una descripción vaga hará que el agente elija la herramienta equivocada o la ignore.
00:08:53Escríbelas como si le explicaras la acción a alguien que nunca ha visto tu web.
00:08:57Y recuerda que esto sigue siendo experimental.
00:08:58La interfaz de la API cambiará.
00:09:00Chrome 146 llegará en marzo con un soporte más amplio.
00:09:03Pero hasta entonces, esto es una prueba para desarrolladores.
00:09:05No lo lances a producción todavía.
00:09:06Si sigues este canal, sabes que estar al día con la IA requiere una base técnica sólida.
00:09:11Por eso me encanta Brilliant.
00:09:13Es una plataforma interactiva con lecciones prácticas diseñadas por profesores de talla mundial
00:09:17del MIT, Harvard y Stanford.
00:09:19Recomiendo mucho sus cursos sobre clasificación y sobre cómo funciona la IA.
00:09:23Te enseñan a descubrir patrones ocultos y a entender la lógica tras los grandes modelos de lenguaje
00:09:27de forma interactiva.
00:09:28Como ves en el catálogo en pantalla, ofrecen una enorme variedad de cursos que cubren
00:09:33desde matemáticas básicas hasta ciencia de datos avanzada e informática.
00:09:37Brilliant también ofrece a nuestros seguidores un 20 % de descuento en la suscripción anual premium,
00:09:42dando acceso diario ilimitado a todo el contenido de la plataforma.
00:09:44Para aprender gratis en Brilliant durante 30 días, ve a brilliant.org/ailabs, escanea el
00:09:50código QR o haz clic en el enlace de la descripción.
00:09:53Crea un hábito de aprendizaje real hoy mismo y lleva tus habilidades al siguiente nivel
00:09:56con Brilliant.
00:09:57Eso nos lleva al final de este vídeo.
00:09:59Si quieres apoyar al canal y ayudarnos a seguir haciendo vídeos como este, puedes hacerlo
00:10:03usando el botón de “Súper gracias” de abajo.
00:10:06Como siempre, gracias por vernos y nos vemos en el próximo vídeo.