00:00:00Hay una nueva propuesta respaldada por Google y Microsoft que podría estar definiendo el futuro
00:00:03de cómo usamos la web, y la verdad es que me gusta. Se llama WebMCP, pero no hay que confundirla
00:00:08con un servidor MCP normal. WebMCP es en realidad una API del navegador que permitirá a los
00:00:13desarrolladores front-end exponer funciones de sus sitios como herramientas para agentes de IA,
00:00:18haciendo que cada sitio sea básicamente un mini servidor MCP. Y aunque ya habrán visto sitios
00:00:23que han empezado a lanzar sus propios servidores MCP, esto es un poco diferente. Su objetivo
00:00:27es que los agentes usen el sitio web por ti, en lugar de solo acceder a tus APIs y mostrar
00:00:32la información en un chat. Se basará totalmente en el front-end. Si esta distinción suena
00:00:37algo confusa, veamos una demostración y hablemos de por qué me gusta.
00:00:46Lo primero que debo admitir es que esta demo no va a parecer muy emocionante, pero
00:00:49ese es precisamente el punto de WebMCP. Toma algo que ya es posible, pero lo
00:00:54hace mucho mejor. Así que tengan paciencia. Aquí tengo la versión Canary de Chrome
00:00:58donde están probando esta propuesta, y también un sitio configurado con herramientas WebMCP.
00:01:02Pueden ver a la derecha una extensión capaz de interactuar con estas herramientas de WebMCP,
00:01:06pero imaginen que en el futuro esto será simplemente la IA integrada de su navegador,
00:01:10ya sea Gemini, ChatGPT Atlas o en lo que sea que Arc se haya convertido ahora.
00:01:15Pueden ver que si envío una instrucción de usuario estando en este sitio, diciendo que quiero
00:01:19reservar un vuelo de ida y vuelta para dos personas de Londres a Nueva York en fechas específicas,
00:01:23y pulso enviar, me llevará a la página de resultados de búsqueda; es decir, usó el sitio por mí.
00:01:28Increíble, ¿verdad? Sí, como dije, la demo iba a ser muy básica, pero lo
00:01:33fundamental de WebMCP es cómo usó ese sitio por mí. El enfoque actual para que la IA
00:01:38use sitios web suele ser mediante herramientas como Playwright, análisis de HTML o incluso
00:01:42tomando capturas de pantalla e intentando usarlo como un humano. Pero todo eso es ineficiente,
00:01:48especialmente en consumo de tokens, y propenso a errores. WebMCP viene a solucionar esto.
00:01:53WebMCP permite al desarrollador del sitio exponer ciertas herramientas MCP que luego
00:01:58interactúan con el JavaScript del lado del cliente. Eso es todo lo que ocurre cuando una IA decide
00:02:03usar una de estas herramientas WebMCP. Simplemente ejecuta una función de JavaScript en el sitio
00:02:07que tú, como desarrollador, has definido. Pueden ver en el ejemplo de esta página de vuelos
00:02:12que tengo una herramienta WebMCP disponible llamada “search flights” (buscar vuelos) y
00:02:16acepta argumentos de entrada como origen, destino y tipo de viaje que coinciden exactamente
00:02:20con el formulario que tenemos aquí. Lo crucial es que ahora la IA sabe que puede usar esta
00:02:25herramienta MCP. Así que, al enviar una instrucción como esta, no va a rellenar el formulario
00:02:29usando Playwright o analizando el HTML. De hecho, ni siquiera necesita saber cómo se ve el sitio
00:02:34ni conocer su estructura HTML. Simplemente sabe que tiene esa herramienta WebMCP,
00:02:38la llama con esos argumentos de entrada y yo, como desarrollador, he definido qué ocurre
00:02:43cuando recibo esos argumentos y ejecuto una función JavaScript, que en este caso
00:02:47simplemente actualiza el estado de React y provoca la navegación a la página de búsqueda. Si
00:02:52miramos el código del front-end, es increíblemente sencillo y espero que
00:02:55empiece a tener mucho más sentido. Lo primero que debemos hacer es registrar
00:02:59las herramientas WebMCP disponibles para una página usando window.navigator.model_context.
00:03:04Esta es la API que deberá integrarse en los navegadores si la propuesta prospera,
00:03:09y ya está en Chrome Canary para pruebas. Una vez que tenemos nuestra API de
00:03:13contexto de modelo, podemos registrar nuestras herramientas con la función registerTool
00:03:18y, en este caso, estoy registrando la herramienta “search flights” que vimos antes.
00:03:22Si revisamos qué es una herramienta en sí, verán que es una definición de objeto muy simple.
00:03:26Tiene un nombre y una descripción que se pasan a la IA para que sepa cuándo usarla,
00:03:30y también un esquema de entrada por si queremos recibir argumentos. En mi caso,
00:03:34tenía cosas como origen y destino para coincidir con el formulario. También hay
00:03:38más contexto que podemos dar a la IA para que entienda qué deberían ser esos argumentos.
00:03:42La parte importante de la definición de una herramienta es la función execute. Este es el
00:03:47JavaScript del lado del cliente que se ejecutará en tu sitio cuando se use la herramienta MCP.
00:03:51Básicamente, puede ser cualquier cosa que desees. En mi caso, uso la función searchFlights
00:03:55y no hay que preocuparse mucho por la implementación, pero básicamente lo que hago es tomar
00:03:59los parámetros que la IA ha completado y emito un evento llamado “search flights”
00:04:03con esos parámetros. Luego, en mi código de React, lo único que hago es simplemente
00:04:08añadir un escuchador de eventos para ese evento y, cuando se recibe, ejecuto
00:04:12la función handleSearchFlights, que es donde podemos hacer básicamente cualquier cosa
00:04:15que se pueda en React; en mi caso, tomo los parámetros y los establezco como
00:04:19parámetros de búsqueda, lo que provoca la navegación. Es así de simple, y por eso me
00:04:24gusta tanto este enfoque: no solo es muy eficiente en tokens, sino que me permite como
00:04:29desarrollador definir las interacciones del sitio y que la IA siga mis reglas. Es una
00:04:34solución genial para crear sitios pensando tanto en humanos como en asistentes de IA,
00:04:39en lugar del enfoque actual de hacer un sitio para humanos y luego un servidor MCP
00:04:43para la IA; y si la IA necesita usar la web, pues rezas para que se las arregle de algún modo.
00:04:48También cabe destacar que estas herramientas WebMCP no solo sirven para provocar
00:04:51eventos en la página como navegar o rellenar un formulario, sino que son muy útiles
00:04:55cuando necesitas analizar información que está en la página. Digamos que yo, como humano,
00:05:00ajusto algunos filtros, como un precio menor a 500 dólares y una hora de salida antes
00:05:05del mediodía. Sigue habiendo muchos vuelos en la página, así que quiero que la IA
00:05:11me ayude a elegir el mejor. Así que pregunto: “¿Qué vuelo me recomendarías en esta página?”.
00:05:15Los métodos actuales usarían Playwright o análisis de HTML para capturar toda la
00:05:20página e intentar entender la información y convertirla en algún tipo de dato estructurado,
00:05:24pero con WebMCP no hace falta. En su lugar, como desarrollador, simplemente
00:05:29he configurado una herramienta WebMCP llamada “list flights” que tiene acceso al estado de React,
00:05:33por lo que accede a toda la información que ve el usuario pero en un formato JSON limpio.
00:05:38De esta forma, si le pido eso a la IA, verán que llama a esa herramienta, enumera
00:05:42todos los vuelos que se muestran actualmente en la página y nos da una recomendación,
00:05:46en este caso el vuelo 56. Y puedo encontrar ese mismo vuelo aquí en la página.
00:05:51Ese proceso ha usado muchísimos menos tokens y será mucho más preciso. Ahora,
00:05:56lo último que quiero mostrar es cómo aprovechar WebMCP sin usar JavaScript.
00:06:00Hasta ahora hemos usado la API imperativa, donde yo, como desarrollador,
00:06:05he escrito el JavaScript para manejar las llamadas y registrar las herramientas.
00:06:10Pero hay un segundo enfoque llamado API declarativa. Este es mucho más simple,
00:06:14pensado para el caso básico de rellenar formularios HTML. Aquí tengo un formulario
00:06:19sencillo de reserva de mesa y puedo pedirle a mi IA que me reserve una con los datos
00:06:23necesarios, y ella irá y rellenará el formulario por mí.
00:06:27Esto es porque tiene acceso a una herramienta WebMCP llamada “book table”. Pero lo
00:06:32importante es que no escribí nada de JavaScript para tener acceso a esa herramienta.
00:06:36Y es que la API declarativa de WebMCP funciona simplemente añadiendo un atributo
00:06:40de nombre y descripción de herramienta a tu formulario HTML, y el navegador
00:06:44intentará convertir ese formulario en una herramienta WebMCP por ti, deduciendo
00:06:49cuáles deberían ser los argumentos de entrada. Vemos que aquí tenemos el nombre
00:06:53de herramienta “book table” en el formulario de reserva y una descripción para que la IA
00:06:57sepa cuándo llamarla, y es un formulario HTML normal. La única diferencia está en
00:07:02algunos de los campos: usamos el atributo “tool param description” para dar a la IA
00:07:06más contexto sobre cómo debe completar esa información. Por lo demás, el navegador
00:07:10detectará el input, el tipo, el nombre, y lo usará para crear la herramienta MCP.
00:07:14Podemos verlo en nuestro inspector, donde ha detectado correctamente los argumentos:
00:07:18nombre, teléfono, fecha, hora, comensales, ubicación y peticiones. Y lo ha hecho
00:07:23solo con lógica de formularios HTML, sin que yo escriba nada de JavaScript. Esto es
00:07:27básicamente todo lo que hay en la propuesta de WebMCP por ahora. Como dije, soy muy
00:07:31optimista con esto. Me gusta cómo cierra la brecha entre aplicaciones web y agentes de IA,
00:07:34elimina las conjeturas cuando los agentes intentan usar un sitio y asegura que las
00:07:38interacciones sean definidas explícitamente por los desarrolladores. Además, aún no me he
00:07:43entregado por completo a la IA; me gusta que haya herramientas que ayuden a un agente
00:07:47a trabajar conmigo en lugar de reemplazarme. No me gusta la idea de reservar vuelos
00:07:51o restaurantes solo en la interfaz de ChatGPT; prefiero ir yo mismo al sitio web.
00:07:56Y si quiero, que la IA me asista en esa página. Es un sistema mucho mejor para
00:08:00mantener al humano al tanto y permitir que los desarrolladores definan la experiencia.
00:08:05Pero hay que recordar que esto es solo una propuesta por ahora. Podría pasar tiempo
00:08:08antes de verlo en los navegadores, y todavía hay limitaciones que resolver.
00:08:12Como el clásico tema de seguridad: podría haber herramientas o descripciones maliciosas
00:08:16en ciertos sitios. ¿Qué tanto acceso tendrá a los datos del usuario y cuánto control
00:08:21tendrá la IA sobre el navegador? Si una herramienta maliciosa se descontrola,
00:08:25¿cuánto daño puede hacer? Ojalá encuentren respuesta, porque la propuesta me entusiasma.
00:08:29Díganme qué opinan en los comentarios. Y ya que están por ahí, suscríbanse.
00:08:33Como siempre, ¡nos vemos en el próximo video!