00:00:00Há uma nova proposta apoiada pelo Google e pela Microsoft que pode moldar o futuro
00:00:03de como usamos a web, e eu até que gostei. Chama-se WebMCP, mas não confunda
00:00:08com um servidor MCP normal. Em vez disso, o WebMCP é na verdade uma API de navegador e permitirá
00:00:13que desenvolvedores front-end exponham recursos de seus sites como ferramentas para agentes de IA,
00:00:18basicamente transformando cada site em um mini servidor MCP. E embora você já tenha visto
00:00:23alguns sites começarem com seus próprios servidores MCP, isso aqui é um pouco diferente.
00:00:27O objetivo é permitir que seus agentes usem o site por você, em vez de apenas acessar APIs
00:00:32e mostrar isso em um chat. Será inteiramente baseado no front-end. Agora, se essa distinção
00:00:37parece um pouco confusa, vamos dar uma olhada em uma demonstração e falar por que eu gostei.
00:00:46A primeira coisa que quero admitir é que esta demo não vai parecer muito empolgante, mas
00:00:49esse é o ponto do WebMCP. É pegar algo que já é possível e tornar
00:00:54muito melhor. Então fiquem comigo. O que tenho aqui é a versão Canary
00:00:58do Chrome onde estão testando esta proposta, e também um site configurado com
00:01:02algumas ferramentas WebMCP. Vocês podem ver à direita uma extensão que consegue interagir
00:01:06com essas ferramentas, mas imaginem que no futuro isso seria apenas a IA nativa do seu navegador,
00:01:10seja o Gemini, o ChatGPT Atlas ou o que quer que o Arc tenha se tornado.
00:01:15Vejam que se eu quiser enviar um comando de usuário enquanto estou neste site aqui, dizendo que
00:01:19quero reservar um voo de ida e volta para duas pessoas de Londres para Nova York em datas específicas
00:01:23e clicar em enviar, ele vai me levar para a página de resultados de busca, ou seja, usou o site
00:01:28por mim. Incrível, né? Pois é, como eu disse, esta demo pareceria bem básica,
00:01:33mas a questão central do WebMCP é como ele usou o site para mim. A abordagem atual para IA
00:01:38usar sites costuma ser através de ferramentas como Playwright, análise de HTML ou até prints
00:01:42do site tentando usá-lo como um humano. Mas tudo isso é bem ineficiente, especialmente
00:01:48em termos de tokens, e ainda propenso a muitos erros. É isso que o WebMCP veio resolver.
00:01:53O WebMCP permite que o desenvolvedor do site exponha certas ferramentas MCP que
00:01:58interagem com o JavaScript do lado do cliente. É só isso que acontece quando uma IA escolhe
00:02:03usar uma dessas ferramentas WebMCP. Ela está apenas executando uma função JavaScript no site
00:02:07que você, o desenvolvedor, definiu para rodar. Vejam o exemplo desta página de voos:
00:02:12eu tenho uma ferramenta WebMCP disponível chamada “search flights” e vejam que ela recebe
00:02:16argumentos de entrada como origem, destino e tipo de viagem, que correspondem exatamente
00:02:20ao formulário que temos aqui. O ponto crucial é que a IA agora sabe que pode usar
00:02:25esta ferramenta MCP. Então, quando enviamos um comando assim, ela não vai preencher o formulário
00:02:29usando Playwright ou analisando o HTML. Na verdade, ela nem precisa saber qual a aparência do site
00:02:34ou como é o código HTML. Ela simplesmente sabe que tem aquela ferramenta WebMCP
00:02:38e a chama com os argumentos de entrada. Como desenvolvedor, eu defini o que acontece
00:02:43quando recebo esses argumentos e rodo uma função JavaScript, que neste caso
00:02:47apenas atualiza o estado do React e gera a navegação para a página de voos. Se
00:02:52olharmos o código front-end disso, é incrivelmente simples e espero
00:02:55que comece a fazer muito mais sentido. Vejam que a primeira coisa que precisamos fazer é registrar
00:02:59as ferramentas WebMCP disponíveis para uma página usando window.navigator.model_context.
00:03:04Esta é a API que precisará ser embutida nos navegadores se esta proposta
00:03:09for aprovada; ela já está no Chrome Canary para testes. Podemos ver que,
00:03:13uma vez que temos a API model context, podemos registrar ferramentas usando a função
00:03:18registerTool e, neste caso, estou registrando a ferramenta de busca de voos que vimos antes.
00:03:22Se virmos o que é uma ferramenta real, é uma definição de objeto bem simples.
00:03:26Temos um nome e uma descrição, que é passada para a IA para que ela saiba quando usar
00:03:30a ferramenta, e também um esquema de entrada se quisermos receber argumentos. No
00:03:34meu caso, usei origem e destino para bater com o formulário. Vejam que também temos
00:03:38mais contexto que podemos dar à IA para ela entender o que esses argumentos devem ser.
00:03:42A parte importante da definição da ferramenta é a função execute. Este é o JavaScript
00:03:47do lado do cliente que vai rodar no seu site quando esta ferramenta MCP for usada. Pode
00:03:51ser basicamente qualquer coisa que você quiser. No meu caso, estou usando a função search flights
00:03:55e não precisamos nos preocupar muito com a implementação, mas essencialmente estou apenas pegando
00:03:59os parâmetros que a IA preencheu e disparando um evento chamado
00:04:03“search flights” com esses parâmetros. Então, no meu código React, eu só preciso
00:04:08adicionar um ouvinte para esse evento e, quando ele ocorre, eu simplesmente rodo
00:04:12a função handle search flights, onde podemos fazer basicamente qualquer coisa
00:04:15que o React permite. No meu caso, pego os parâmetros e os defino como
00:04:19parâmetros de busca, o que causa a navegação. É simples assim, e é por isso que
00:04:24eu gosto desta abordagem: não só é eficiente em tokens, mas também me permite,
00:04:29como desenvolvedor, definir as interações do site para que a IA siga minhas regras. É
00:04:34uma solução muito elegante para criar sites pensando tanto no humano quanto num assistente de IA,
00:04:39em vez da abordagem atual de fazer um site para humanos e depois um servidor MCP
00:04:43separado para a IA. E se a IA precisar usar o site, bem, você torce para que ela descubra como.
00:04:48Também vale notar que essas ferramentas WebMCP não servem apenas para disparar
00:04:51eventos como navegação ou preenchimento de formulário, elas são muito úteis
00:04:55também para extrair informações da página. Digamos que eu, como humano, viesse aqui
00:05:00e começasse a ajustar alguns filtros, como preço abaixo de 500 dólares e horário de partida
00:05:05antes do meio-dia. Ainda há muitos voos nesta página, então quero que a IA
00:05:11me ajude a escolher o melhor. Posso perguntar: “Qual voo você recomenda nesta página?”
00:05:15Abordagens atuais usariam Playwright ou análise de HTML para ler toda a página
00:05:20e tentar entender as informações ali e transformá-las em algum tipo de dado estruturado,
00:05:24mas não precisamos disso com o WebMCP. Em vez disso, eu, como desenvolvedor, apenas
00:05:29configurei uma ferramenta chamada “list flights” que tem acesso ao estado atual do React.
00:05:33Assim ela tem acesso a toda a informação exibida para o usuário, mas em um formato
00:05:38JSON limpo. Dessa forma, se eu fizer essa pergunta para a IA, vejam que ela chama
00:05:42a ferramenta, lista todos os voos que estão aparecendo na página e nos dá
00:05:46uma recomendação para o voo 56. E eu consigo achar esse voo aparecendo aqui
00:05:51na página. Esse processo usou muito menos tokens e será muito mais preciso. Agora,
00:05:56a última coisa que quero mostrar é como você pode aproveitar o WebMCP sem
00:06:00precisar de JavaScript. Até agora, estivemos usando a API imperativa, onde eu,
00:06:05o desenvolvedor, escrevi o código para lidar com as chamadas e registrar as ferramentas.
00:06:10Existe também uma segunda abordagem chamada API declarativa. Ela é muito mais simples,
00:06:14feita para o caso básico de preencher formulários HTML. Vejam que tenho um formulário
00:06:19simples de reserva de mesa e posso pedir para a IA reservar para mim com as informações
00:06:23necessárias para o formulário, e ela vai lá e preenche tudo
00:06:27sozinha. Isso acontece porque ela tem acesso a uma ferramenta WebMCP chamada “book table”.
00:06:32Mas o ponto importante é que não escrevi nenhum JavaScript para ter acesso a essa ferramenta.
00:06:36Isso ocorre porque a API declarativa do WebMCP funciona apenas adicionando
00:06:40os atributos tool-name e tool-description ao seu formulário HTML, e o navegador
00:06:44então tentará converter esse formulário em uma ferramenta WebMCP, entendendo o que cada entrada
00:06:49deve ser para os argumentos da ferramenta. Vemos aqui que temos o tool-name
00:06:53como “book table” naquele formulário de reserva e uma descrição para a IA saber
00:06:57quando chamá-lo, e é apenas um formulário HTML normal. A única outra diferença está
00:07:02em algumas das entradas aqui. Também usamos o atributo tool-param-description para dar à IA
00:07:06um pouco mais de contexto sobre como preencher aquela informação. No resto, o navegador
00:07:10vai identificar a entrada, o tipo, o nome e usar isso para criar a
00:07:14ferramenta MCP. Podemos ver isso de volta no nosso inspetor, onde ele identificou que
00:07:18os argumentos são nome, telefone, data, hora, convidados, assento e pedidos.
00:07:23Tudo isso usando lógica simples de formulário HTML, com zero JavaScript escrito por mim. É
00:07:27basicamente isso que compõe a proposta do WebMCP no momento. E como eu disse, estou
00:07:31bem otimista com isso. Gosto da forma como une os web apps e agentes de IA,
00:07:34removendo as suposições quando agentes tentam usar um site e garantindo
00:07:38que as interações sejam definidas explicitamente pelos desenvolvedores. Além disso,
00:07:43ainda não estou totalmente rendido à IA. Gosto quando há uma ferramenta que ajuda um agente a
00:07:47trabalhar ao meu lado em vez de me substituir. Não gosto da ideia de reservar voos ou
00:07:51restaurantes direto na interface do ChatGPT. Prefiro ir ao site propriamente dito no navegador.
00:07:56E se eu quiser, a IA pode me dar uma força naquela página. É um sistema muito melhor
00:08:00para manter o humano no controle e permitir que os desenvolvedores definam como será a experiência.
00:08:05Mas vale lembrar que isso é apenas uma proposta por enquanto. Então pode
00:08:08levar um tempo para aparecer nos navegadores. E também há limitações que
00:08:12precisam ser resolvidas. Como o clássico problema de segurança: pode haver ferramentas e
00:08:16descrições maliciosas em certos sites. Quanto acesso será dado às informações do usuário
00:08:21e quanto controle a IA terá sobre o navegador como um todo? Se uma dessas ferramentas maliciosas
00:08:25sair do controle, qual o tamanho do estrago? Espero que achem uma resposta para
00:08:29isso, pois estou bem animado com esta proposta. Digam o que acham nos comentários
00:08:33aqui embaixo. Aproveitem e se inscrevam. E como sempre, vejo vocês no próximo vídeo.