WebMCP: ferramenta de código aberto para executar servidores MCP em páginas da Web

O WebMCP é um projeto de código aberto que visa incorporar servidores MCP (Model Context Protocol) diretamente nas páginas da Web, permitindo que os assistentes de IA manipulem o conteúdo da Web por meio do navegador. Ele resolve o problema da MCP O WebMCP aproveita os mecanismos de autenticação existentes no navegador, como cookies ou sessões, para dar aos assistentes de IA acesso direto aos dados da Web com privilégios de usuário. O projeto é desenvolvido em TypeScript, gerenciado sob Turborepo e PNPM, e sob a licença MIT. Os desenvolvedores podem executar o servidor MCP em uma página da Web ou extensão do navegador com instalação e configuração simples. O webMCP é adequado para desenvolvedores que desejam simplificar a interação entre a IA e as páginas da Web, especialmente em cenários em que a colaboração entre páginas da Web é necessária.

Lista de funções

• A execução do servidor MCP em uma página da Web utiliza diretamente o mecanismo de autenticação do navegador.
• Suporte para assistentes de IA para interagir com dados da Web por meio da ferramenta de registro, sem a necessidade de configurar chaves de API adicionais.
• Fornece uma extensão de navegador que agrega ferramentas MCP de várias páginas da Web para simplificar as operações entre páginas.
• Desenvolvido em TypeScript, ele oferece suporte ao desenvolvimento modular e à iteração rápida.
• Otimize o gerenciamento de tarefas e o gerenciamento de dependências do PNPM com o Turborepo para aumentar a eficiência do desenvolvimento.
• O recarregamento automático de extensões permite que os desenvolvedores visualizem os efeitos das alterações de código em tempo real.
• Oferece uma interface de linha de comando simples para iniciar rapidamente ambientes de desenvolvimento ou executar páginas da Web/extensões individualmente.

Usando a Ajuda

Processo de instalação

Para usar o WebMCP, você precisa instalar o Node.js e as ferramentas de gerenciamento de pacotes PNPM. Veja a seguir as etapas detalhadas de instalação e configuração:

1. Clonagem do depósito do projeto
   Abra um terminal e execute o seguinte comando para clonar o repositório WebMCP:

   git clone https://github.com/MiguelsPizza/WebMCP.git
   

   Quando a clonagem estiver concluída, vá para o diretório do projeto:

   cd MCP-B
   

2. Instalação de dependências
   Use o PNPM para instalar as dependências necessárias para o projeto:

   pnpm install
   

   O PNPM baixa e configura automaticamente os pacotes necessários para o projeto, garantindo que o ambiente de desenvolvimento esteja pronto.

3. Início do ambiente de desenvolvimento
   Execute o seguinte comando para iniciar o servidor de desenvolvimento:

   pnpm dev
   

   Esse comando inicia o ambiente de desenvolvimento para o aplicativo da Web e a extensão do navegador. Ele pode ser usado se você quiser iniciar apenas uma parte separadamente:

   • Inicia apenas a extensão:

     pnpm --filter extension dev
     

   • Inicie apenas o aplicativo da Web:

     pnpm --filter web dev
     

4. Configurações de extensão do navegador
   O WebMCP fornece uma extensão de navegador que precisa ser carregada manualmente em um navegador (por exemplo, Chrome). O procedimento é o seguinte:
   • Execute o comando de desenvolvimento estendido (veja acima).
   • Abra a página de gerenciamento de extensões do navegador (Chrome:chrome://extensions/).
   • Ative o "Developer Mode" (Modo de desenvolvedor), clique em "Load Unpacked Extension" (Carregar extensão descompactada), selecione a extensão extension Pasta.
   • Quando a extensão é carregada, as alterações de código são automaticamente detectadas e recarregadas.

Função Fluxo de operação

1. executar o servidor MCP

A principal funcionalidade do WebMCP é a incorporação de servidores MCP em páginas da Web. Os desenvolvedores podem introduzir o recurso Reagir hook para registrar a ferramenta. Por exemplo, crie um aplicativo de lista de tarefas:

import { McpServerProvider, useMcpServer } from '@mcp-b/mcp-react-hooks';
function TodoApp() {
const { registerTool } = useMcpServer();
const [todos, setTodos] = useState([]);
registerTool('addTodo', { text: z.string() }, async ({ text }) => {
const newTodo = { id: Date.now(), text, done: false };
setTodos((prev) => [...prev, newTodo]);
return { content: [{ type: 'text', text: `Added: ${text}` }] };
});
return <div>{/* 网页组件 */}</div>;
}

• Instruções de operação::
  • fazer uso de <McpServerProvider> Envolva os componentes do aplicativo para garantir que o servidor MCP seja inicializado.
  • aprovar (um projeto de lei ou inspeção etc.) useMcpServer Ferramentas de registro de ganchos (como addTodo), definindo o formato de entrada e a lógica da ferramenta.
  • O AI Assistant pode ser chamado de addTodo para adicionar listas de tarefas diretamente em seu navegador.

2. uso de extensões de navegador

A extensão do navegador WebMCP funciona como uma ponte entre o servidor MCP e o AI Assistant em uma página da Web. Depois de instalar a extensão:

• Abra qualquer página habilitada para WebMCP e a extensão detectará automaticamente as ferramentas MCP na página.
• A extensão exibe todas as ferramentas disponíveis para abrir páginas da Web, que o AI Assistant pode chamar a partir da extensão.
• Exemplo de operaçãoNas páginas de tarefas habilitadas para WebMCP, o assistente de IA pode ser chamado por meio da extensão addTodo adicionar tarefas e retornar resultados.

3. autenticação e segurança

O WebMCP usa os mecanismos de autenticação existentes do navegador (como cookies ou sessões OAuth) sem a necessidade de configuração adicional de chaves de API. O servidor MCP é executado na área restrita segura do navegador para garantir:

• O AI Assistant opera somente com os privilégios do usuário atual.
• As interações de dados são autenticadas por meio do navegador para impedir o acesso não autorizado.
• O desenvolvedor precisa garantir que o mecanismo de autenticação (por exemplo, sessão ou token) da página da Web seja válido para que a ferramenta funcione corretamente.

4. comissionamento e desenvolvimento

• depuração em tempo real: Uso pnpm dev Depois de iniciar o ambiente de desenvolvimento, a extensão recarrega automaticamente as alterações de código e os desenvolvedores podem visualizar os registros por meio das ferramentas de desenvolvimento do navegador.
• Código de contribuiçãoReferência ao projeto no CONTRIBUTING.md documentação, compreensão das especificações de envio de código e áreas prioritárias para desenvolvimento.
• Feedback da perguntaSe você encontrar um problema, poderá registrar um problema no repositório do GitHub com os detalhes do problema.

advertência

• Certifique-se de que a versão do Node.js esteja atualizada com a versão estável mais recente, recomendando-se a versão 18 ou superior.
• O PNPM precisa ser instalado globalmente e pode ser executado npm install -g pnpm.
• Durante o desenvolvimento, mantenha uma conexão com a Internet para garantir que as dependências sejam baixadas e que as extensões sejam carregadas corretamente.

cenário do aplicativo

1. Desenvolvedores da Web integram assistentes de IA
   Os desenvolvedores que desejam incorporar assistentes de IA em aplicativos da Web para automatizar tarefas (por exemplo, preenchimento de formulários, extração de dados), o WebMCP fornece uma interface simples que permite que a IA manipule o conteúdo da Web diretamente, sem configurações complexas.
2. Desenvolvedores de extensões de navegador
   Os desenvolvedores de extensões podem usar o WebMCP para criar ferramentas que colaboram entre páginas da Web. Por exemplo, agregar dados de tarefas de várias páginas da Web para gerenciar tarefas de forma unificada.
3. Otimização de ferramentas internas
   Os aplicativos da Web no local podem integrar assistentes de IA por meio do WebMCP para simplificar as operações dos funcionários. Por exemplo, organizar automaticamente os dados dos clientes em um sistema CRM.
4. Educação e pesquisa
   Os pesquisadores podem usar o WebMCP para testar cenários em que a IA interage com páginas da Web e explorar as possibilidades de aplicativos de IA em um ambiente de navegador.

QA

1. Quais navegadores são compatíveis com o WebMCP?
   A extensão WebMCP atualmente é compatível com o Chrome e pode ser estendida a outros navegadores, como o Firefox, no futuro.
2. Preciso configurar servidores adicionais?
   Não. O WebMCP incorpora o servidor MCP em uma página da Web e utiliza a autenticação do navegador sem a necessidade de configurar um servidor separado.
3. Como você garante a segurança dos dados?
   O WebMCP é executado na área restrita do navegador e usa apenas os direitos de autenticação do usuário atual. Os desenvolvedores precisam garantir que o mecanismo de autenticação na própria página da Web seja seguro.
4. Há suporte para usuários não técnicos?
   O WebMCP é voltado principalmente para desenvolvedores. Os usuários não técnicos dependem de páginas ou extensões habilitadas para WebMCP, que são mais simples de usar.