O WebMCP fornece uma interface concisa de registro de ferramentas por meio de ganchos do React, e o processo de implementação é o seguinte:
- Introdução dos componentes necessáriosÉ necessário primeiro começar com o
@mcp-b/mcp-react-hooksimportação (dados)McpServerProviderresponder cantandouseMcpServer - Inicialização do servidorUso de
<McpServerProvider>Envolva os componentes do aplicativo para inicialização - Registro das funções da ferramentaUsado dentro do componente
useMcpServerAquisição de ganchosregisterToolmetodologias - Definir a lógica da ferramenta: cada ferramenta precisa definir um nome, um formato de entrada e uma função de retorno de chamada
Veja o exemplo de um aplicativo de tarefas que se registra na ferramenta addTodo:
- O nome da ferramenta é
'addTodo' - O formato do parâmetro de entrada é passado pelo
z.object({text: z.string()})indicar com clareza e certeza - A função de retorno de chamada executa a operação da tarefa de adição e retorna o resultado.
Deve-se tomar cuidado ao desenvolver:
- O registro da ferramenta deve ser feito quando o componente estiver montado
- Os formatos de entrada precisam ser bem definidos para garantir a segurança do tipo
- Os resultados retornados seguem o formato de resposta uniforme
Isso permite que o assistente de IA chame várias funções de ferramentas registradas na página da Web por meio do navegador.
Essa resposta foi extraída do artigoWebMCP: ferramenta de código aberto para executar servidores MCP em páginas da WebO
Não pode ser reproduzido sem permissão:Ferramentas de produtividade de IA " Como o WebMCP permite o registro e o uso de ferramentas de IA em páginas da Web?
