Construímos um registro público e SDK para ferramentas WebMCP. Aqui está por que isso é importante.

Se você ainda não conheceu o WebMCP, a versão rápida é esta: é uma proposta do W3C que permite que uma página da web registre ações chamáveis diretamente no navegador usando document.modelContext. Pense nisso como um servidor MCP dentro do navegador. Em vez de um agente de IA raspando sua interface ou conversando com um backend separado, sua página declara o que pode fazer, e o agente chama essas ações diretamente com a sessão ativa do usuário e o estado atual já em escopo. Sylwia Lasek escreveu um ótimo artigo introdutório sobre isso aqui se você quiser entender os fundamentos antes de prosseguir.

O problema que notamos é que a especificação aborda como as ferramentas funcionam no navegador, mas não aborda a descoberta. Um agente que visita uma página pode consultar document.modelContext.getTools() assim que chega lá, mas não tem como saber quais ferramentas estão disponíveis em um determinado site antes de carregá-lo. Essa lacuna é importante para agentes que precisam planejar com antecedência, injetar esquemas de ferramentas em um prompt do sistema ou decidir quais sites valem a pena visitar.

Então, construímos duas coisas.

• O Registro WebMCP é um diretório público em webmcp-registry.dev onde os desenvolvedores registram seus domínios e contratos de ferramentas. Ele pode ser consultado por palavra-chave, categoria ou domínio, possui um sistema de verificação baseado em registros DNS TXT e expõe uma API HTTP pública para que os agentes possam consultar o que um site pode fazer antes de visitá-lo. O registro também registra suas próprias ferramentas usando WebMCP, o que parecia ser o movimento certo.

• @webmcp-registry/kit é o pacote npm que lida com o lado do desenvolvedor. Você obtém defineTool para descrever uma ferramenta com um esquema Zod e um manipulador, ganchos React para registrar ferramentas a partir de componentes e uma CLI chamada webmcp para sincronizar seus contratos de ferramentas com o registro automaticamente.

Veja como uma definição de ferramenta realmente se parece:

import { defineTool } from '@webmcp-registry/kit'
import { z } from 'zod'

export const addTodoTool = defineTool({
  name: 'add-todo',
  description: "Adicionar um novo item à lista de tarefas ativa do usuário",
  kind: 'write',
  input: z.object({
    text: z.string().describe('O texto do item da tarefa'),
  }),
  handler: ({ text }) => {
    const todo = addTodo(text)
    return { added: todo }
  },
})

defineTool gera o JSON Schema a partir da sua entrada Zod, envolve a validação e o formato de resposta { content: [...] } que a especificação WebMCP espera, e lhe devolve um objeto simples que o navegador pode registrar. Sem necessidade de escrever esquemas manualmente.

Para registrá-lo, você o insere em um componente usando o gancho fornecido:

import { useWebMCPTools } from '@webmcp-registry/kit/react'
import { todoTools } from './todo.tools'

function TodoApp() {
  useWebMCPTools(todoTools)
  // resto do componente
}

O gancho registra suas ferramentas quando o componente é montado e limpa quando é desmontado. Se document.modelContext não estiver disponível (o que ainda é o caso na maioria dos navegadores hoje, já que o WebMCP está atualmente atrás de uma flag no Chrome), é uma operação silenciosa em produção e um aviso nomeado no console em desenvolvimento para que você saiba o que está esperando na plataforma.

Uma coisa que o kit lida e que é menos óbvia: alguns manipuladores de ferramentas não podem viver no escopo do módulo porque precisam fechar sobre o estado do componente. Um setter do useState, um dispatch do useReducer. Para esses casos, você separa o esquema do manipulador usando defineToolContract, que dá à CLI algo para descobrir estaticamente enquanto mantém o manipulador onde realmente precisa viver:

// draft.tools.ts
export const setDraftContract = defineToolContract({
  name: 'set-draft-text',
  description: 'Definir o texto na nova entrada de tarefa sem enviar',
  kind: 'write',
  input: z.object({ text: z.string() }),
})

// App.tsx
useWebMCPTool(setDraftContract, ({ text })