00:00:00Os agentes de IA começaram a se integrar em todas as partes das nossas vidas agora.
00:00:03E uma das maiores áreas em que isso aconteceu foi no navegador.
00:00:06Todas as grandes empresas de IA perceberam que o navegador é a única ferramenta que todos usam
00:00:11todos os dias.
00:00:12Então, por que não colocar IA nisso?
00:00:14Mas a verdade é que todas são ruins.
00:00:15E não é uma questão de otimização.
00:00:17Há um problema fundamental que nenhuma quantidade de otimização vai resolver.
00:00:20Mas o Google, em colaboração com a Microsoft, acabou de lançar algo chamado WebMCP.
00:00:24E em vez de tentar tornar os agentes melhores em usar sites, ele torna os sites melhores
00:00:29em falar com agentes.
00:00:30Essa é uma abordagem completamente diferente.
00:00:32E o que isso possibilita é algo que nunca vimos antes.
00:00:35Esta é uma página HTML simples rodando em um servidor local.
00:00:38Abrindo a aba de extensões, temos a extensão WebMCP.
00:00:41Ao abri-la, abaixo do nome deste site, temos uma ferramenta: BookTable.
00:00:45Conectamos esta ponte WebMCP ao Claude Code e dissemos a ele que tínhamos um formulário
00:00:49de reserva de restaurante aberto com ferramentas WebMCP disponíveis.
00:00:52Demos a ele a tarefa de reservar uma mesa para dois com data, nome e um pedido especial.
00:00:57Todos esses campos estão presentes no formulário.
00:00:59Ele confirmou a data, usou a ferramenta WebMCP fornecida pelo site, preencheu os campos
00:01:03e fez a reserva com sucesso.
00:01:06No momento, um agente tem duas formas de entender o que está na tela.
00:01:09A primeira forma é baseada em visão.
00:01:11O agente tira um print da página inteira, anota cada elemento que consegue ver e
00:01:15envia essa imagem para um modelo que tenta descobrir onde clicar.
00:01:19A segunda forma é a análise de DOM.
00:01:21O agente extrai o HTML bruto da página.
00:01:24E se você já abriu o “Inspecionar Elemento” em qualquer site, sabe como é.
00:01:28Milhares de linhas de código.
00:01:29O agente lê tudo isso e tenta identificar o botão correto.
00:01:33Ambas as abordagens têm o mesmo problema fundamental.
00:01:35Elas são não-determinísticas.
00:01:36O agente está dando seu melhor palpite em cada tentativa.
00:01:39A razão pela qual nada disso funciona de forma consistente é porque toda a internet foi feita
00:01:43para olhos humanos.
00:01:45Cada site assume que uma pessoa está olhando para ele.
00:01:47Não há estrutura para máquinas.
00:01:48Assim, todo agente, não importa quão bom seja o modelo, fica preso tentando interpretar algo
00:01:53que nunca foi projetado para ser interpretado por uma máquina.
00:01:55Com o WebMCP, em vez do agente tentar decifrar seu site, seu site registra
00:02:00as ações disponíveis como ferramentas.
00:02:01Quando um agente chega em uma página, ele não adivinha.
00:02:04Ele apenas lê as ferramentas disponíveis e as chama diretamente.
00:02:07Atualmente, o WebMCP está disponível apenas para visualização antecipada.
00:02:10À medida que a web baseada em agentes evolui, os sites também precisam evoluir com ela.
00:02:13E como você já viu, ao definir essas ferramentas, damos a esses agentes melhor acesso para interagir
00:02:18com nossos sites.
00:02:19A demonstração funcionou porque era um formulário HTML simples.
00:02:21Mas a maioria dos sites reais não é tão simples assim.
00:02:23Por isso, o WebMCP possui duas abordagens diferentes, dependendo do que você está criando.
00:02:28Existem duas maneiras que permitem aos agentes assumir o controle do navegador.
00:02:31A API declarativa é para fluxos simples, como os formulários HTML que você acabou de ver.
00:02:35A API imperativa é para aplicativos web complexos com múltiplas páginas, e estes exigem uma
00:02:40implementação extra que abordaremos mais adiante.
00:02:43No momento, não há documentação oficial, mas eles têm um repositório de ferramentas WebMCP
00:02:48no Google Chrome Labs com dois demos, e apenas um deles está realmente hospedado.
00:02:52Há um demo simples de busca de voos e uma extensão oficial de inspeção de ferramentas da Marvel.
00:02:56Depois de instalá-la, em qualquer site que tenha WebMCP implementado, você poderá detectar
00:03:01essas ferramentas via extensão e poderá fazer outras coisas legais também.
00:03:05O esquema de entrada para as ferramentas aparece bem ali.
00:03:07No momento, há apenas uma ferramenta nesta página: a ferramenta de busca de voos.
00:03:10Eles deram duas opções para usar isso.
00:03:12Você pode fornecer argumentos de entrada personalizados para o modelo de IA preencher ou pode
00:03:16configurar sua chave de API do Gemini, dar um comando em linguagem natural e a página será
00:03:21controlada de acordo com isso.
00:03:22No momento, ela tem estas entradas padrão.
00:03:24Nós as trocamos e ela realmente buscou os voos e trouxe vários resultados.
00:03:28Eu voltei e, desta vez, o site de viagens com WebMCP tinha quatro ferramentas disponíveis,
00:03:32sendo que três delas agora eram filtros que poderiam ser aplicados.
00:03:35Os argumentos de entrada para a página também haviam mudado.
00:03:37Adicionei outro argumento e recebemos uma notificação de que as configurações de filtro foram atualizadas.
00:03:41Nenhum voo correspondeu àqueles filtros, mas todos foram aplicados.
00:03:44Alternamos entre o navegador Zen e o Chrome durante isso, e é porque, embora tenham
00:03:48lançado o WebMCP como um protocolo aberto para qualquer navegador, no momento ele só funciona
00:03:54na versão Canary do Chrome.
00:03:55Isso até que lancem o padrão para que todos possam usar.
00:03:58Então, isso é tudo o que temos de ferramentas oficiais por enquanto.
00:04:01Sem documentação, apenas dois demos, funciona apenas no Chrome Canary e você não pode usá-lo
00:04:05com o Claude Code porque ele é destinado a agentes de navegador.
00:04:09Então, encontramos esta ponte WebMCP customizada que você pode instalar no seu sistema,
00:04:14que fornece um MCP e também uma extensão.
00:04:16É isso que permite ao Claude Code usar o WebMCP para navegar e utilizar as ferramentas
00:04:22que qualquer site oferece.
00:04:23Para mostrar como os sites realmente implementam isso, começaremos pela abordagem mais simples.
00:04:27Na API declarativa, que você viu com o formulário HTML, tudo o que você precisa fazer é
00:04:31declarar três coisas dentro do formulário HTML: o nome da ferramenta, a descrição e a
00:04:36descrição dos parâmetros.
00:04:37Você não precisa se aprofundar neles.
00:04:39Você só precisa garantir que seu agente os inclua.
00:04:41Criamos dois guias através de engenharia reversa dos demos no repositório WebMCP e demos ao
00:04:46Claude Code acesso a eles.
00:04:47Durante esse processo, encontramos alguns problemas comuns e tivemos que corrigir esses
00:04:51guias ao longo do caminho.
00:04:53Ambos estão disponíveis no AI Labs Pro, que é a nossa comunidade onde você recebe templates
00:04:57prontos para usar.
00:04:58Você pode integrá-los diretamente em seus projetos, tanto para este vídeo quanto para os anteriores.
00:05:01O ensinamento principal está todo aqui no vídeo, mas se quiser os arquivos reais, os links
00:05:05estão na descrição.
00:05:06Se o seu agente adicionar essas declarações, o resto fica por conta do navegador, que as
00:05:10lê diretamente do HTML.
00:05:12A segunda maneira era a API imperativa, para casos que exigem interações mais complexas e
00:05:17execução de JavaScript.
00:05:18Inicializamos um app Next.js, demos o guia de Next.js para o Claude Code e isso foi tudo de
00:05:23que ele precisou para implementar.
00:05:24Em apps React, ele cria um novo arquivo na pasta library onde declara todas as ferramentas
00:05:29que o site necessita.
00:05:30Estas são todas as funções e estas são as suas definições.
00:05:33Mas como esses apps web podem ficar muito grandes e ter potencialmente mais de 100 ferramentas,
00:05:38enfrentamos o mesmo problema do Claude Code, onde o contexto sobrecarrega tudo
00:05:41e quebra o sistema inteiro.
00:05:43Então, em vez de carregar todas as ferramentas de um site, é melhor carregar apenas as
00:05:47ferramentas de uma única página.
00:05:48Esse conceito é chamado de carregamento contextual.
00:05:50Este é o app Next.js que o Claude Code criou para nós.
00:05:53É um pequeno app de demonstração totalmente funcional com o backend implementado.
00:05:57No momento, estamos na página inicial e este site tem apenas 3 ferramentas disponíveis.
00:06:01Fui para a página do carrinho e, desta vez, tínhamos 4 ferramentas e os nomes também mudaram.
00:06:05A disponibilidade das ferramentas muda com base na página em que você está.
00:06:09É aqui que entram as funções de registro.
00:06:11Sempre que você entra em uma página, como a home, ela executa a função registerHomeTools e,
00:06:15quando sai, executa unregisterHomeTools.
00:06:18Com base em quais ferramentas pertencem àquela página, ela apenas as registra e depois as desregistra.
00:06:23É por isso que, neste caso, não depende apenas do navegador, mas o próprio código também
00:06:27gerencia a integração.
00:06:28Não estamos realmente usando WebMCP com um agente de navegador, que é o que o Google quer
00:06:32e o que cada navegador implementaria por conta própria.
00:06:34Estamos usando uma ponte que conecta o Claude Code ao WebMCP, e é assim que controlamos
00:06:39os sites.
00:06:40Se você quiser tirar mais proveito do Claude Code, temos um vídeo sobre as 10
00:06:44maneiras mais atualizadas de ganhar vantagem com ele.
00:06:46Esta ponte é um projeto da comunidade e, com a API imperativa, ela tem o problema de que
00:06:51a troca de ferramentas não funciona muito bem com este servidor MCP.
00:06:54Quando abri o site, estávamos na página de checkout e iniciamos a sessão do Claude Code lá.
00:06:58Quando pedimos para navegar de volta para a página inicial, ele não conseguiu ver as ferramentas
00:06:59disponíveis na home.
00:07:03Estávamos na home e fui para a página do produto, onde tínhamos um botão de adicionar ao carrinho.
00:07:04Mas quando estava na página do produto, ele não conseguia ver esse botão.
00:07:08Tivemos que adicionar um item manualmente ao carrinho para fazer esta demonstração.
00:07:11Mas quando pedimos para finalizar o checkout, ele preencheu automaticamente os detalhes,
00:07:14fez o pedido e completou todo o fluxo de compra.
00:07:18Essa é uma limitação deste MCP, o que nos leva a outro ponto.
00:07:21O WebMCP é código aberto, com grandes navegadores e empresas de tecnologia listados como participantes.
00:07:25Mas, no momento, o único navegador que o suporta é o Chrome Canary, e o agente pretendido
00:07:30é o Gemini, a IA do Google integrada diretamente no navegador.
00:07:34Se você é proprietário de um site e implementa o WebMCP hoje, o único agente que pode usar
00:07:38suas ferramentas nativamente é o Gemini.
00:07:42O Claude Code precisa de uma ponte comunitária que quebra quando o carregamento contextual ocorre.
00:07:44Qualquer agente que não seja do Google está em desvantagem.
00:07:49Agora, o Claude poderia alcançar o Google?
00:07:51Claro, eles têm sua própria extensão de navegador.
00:07:52E como ela também é um agente de navegador, poderia potencialmente descobrir essas ferramentas
00:07:55da mesma forma que o Gemini faz.
00:07:59Mas a questão é: quantas pessoas vão instalar deliberadamente uma extensão do Claude
00:08:00em vez de apenas usar o Gemini que já vem embutido no Chrome?
00:08:04O Chrome tem bilhões de usuários que não precisam instalar nada.
00:08:08Em nossa opinião, o Google não está bloqueando ninguém.
00:08:11Eles estão apenas aproveitando a arquitetura e o público que já possuem.
00:08:13Um padrão aberto que funciona melhor dentro do navegador que eles já dominam, com o agente que
00:08:17eles já distribuem.
00:08:21Isso não significa que você não deva implementá-lo.
00:08:22O padrão em si é genuinamente útil, e tornar seu site acessível para agentes é inteligente,
00:08:23independentemente de qual agente se beneficie primeiro.
00:08:28Existem algumas coisas que vale a pena saber se você for implementar isso.
00:08:30A especificação recomenda no máximo 50 ferramentas por página.
00:08:33Isso não serve para expor toda a sua aplicação.
00:08:36É para ações focadas e específicas, as coisas que alguém realmente gostaria de fazer
00:08:38naquela página.
00:08:42As descrições das ferramentas também importam mais do que você imagina.
00:08:43Os agentes leem essas descrições para decidir qual ferramenta chamar.
00:08:46Descrições vagas fazem com que o agente escolha a ferramenta errada ou a ignore completamente.
00:08:49Escreva-as como se estivesse explicando a ação para alguém que nunca viu seu site.
00:08:53E lembre-se: isso ainda é experimental.
00:08:57A interface da API vai mudar.
00:08:58O Chrome 146 será lançado em março com suporte mais amplo.
00:09:00Mas até lá, isto é apenas para testes de desenvolvedores.
00:09:03Não lance em produção ainda.
00:09:05Se você segue este canal, sabe que acompanhar a IA exige uma base técnica sólida.
00:09:06É por isso que eu adoro o Brilliant.
00:09:11É uma plataforma interativa com lições práticas criadas por professores de classe mundial
00:09:13do MIT, Harvard e Stanford.
00:09:17Eu recomendo muito os cursos deles sobre agrupamento e classificação e como a IA funciona.
00:09:19Eles ensinam você a descobrir padrões ocultos e a entender a lógica por trás dos grandes
00:09:23modelos de linguagem de forma interativa.
00:09:27Como você pode ver no catálogo na tela, eles oferecem uma enorme variedade de cursos que cobrem
00:09:28tudo, desde matemática básica até ciência de dados avançada e computação.
00:09:33O Brilliant também está oferecendo aos nossos espectadores 20% de desconto em uma assinatura anual premium,
00:09:37oferecendo acesso diário ilimitado a tudo na plataforma.
00:09:42Para aprender de graça no Brilliant por 30 dias inteiros, acesse brilliant.org/ailabs, escaneie o
00:09:44QR code na tela ou clique no link na descrição.
00:09:50Crie um hábito real de aprendizado hoje e leve suas habilidades para o próximo nível acessando
00:09:53o Brilliant.
00:09:56Isso nos traz ao fim deste vídeo.
00:09:57Se você gostaria de apoiar o canal e nos ajudar a continuar fazendo vídeos como este,
00:09:59pode fazer isso usando o botão “Valeu” abaixo.
00:10:03Como sempre, obrigado por assistir e vejo você no próximo.
00:10:06Como sempre, obrigado por assistir e vejo você no próximo.