WebMCP

Una propuesta y un código para que los sitios web apoyen los LLM del lado del cliente

WebMCP permite que los sitios web compartan herramientas, recursos, indicaciones, etc. con los LLM. En otras palabras, WebMCP permite que un sitio web funcione como servidor MCP. No se comparten claves API. Utilice el modelo que desee.

Aquí hay un sitio web simple que construí y que está habilitado para WebMCP.

Viene en forma de un widget que el propietario de un sitio web puede colocar en su sitio y exponer herramientas para brindar a los LLM del lado del cliente lo que necesitan para brindar una excelente UX para el usuario o agente.

La apariencia, la experiencia de uso y la seguridad están totalmente abiertas a contribuciones y críticas constructivas. Que los clientes de MCP creen directamente la funcionalidad de WebMCP parece ser el resultado ideal.

Un usuario final puede conectarse a cualquier cantidad de sitios web a la vez, y las herramientas están "clasificadas" (por nombre) en función del dominio para simplificar la organización.

Demostración súper rápida (20 segundos, sonido activado 🔊)

https://github.com/user-attachments/assets/61229470-1242-401e-a7d9-c0d762d7b519

Primeros pasos (utilizando su LLM con sitios web mediante WebMCP)

Instalación

Simplemente especifique su cliente MCP ( claude , cursor , cline , windsurf o una ruta a json)

npx -y @jason.today/webmcp@latest --config claude

Si está interesado en configurarlo manualmente, utilice el comando npx -y @jason.today/webmcp@latest --mcp .

La instalación automática se inspiró en Smithery, pero su código es AGPL, así que lo escribí yo mismo. Si no te funciona o no ves tu cliente mcp, por favor, reporta un problema.

Uso de WebMCP

Cuando esté listo para conectarse a un sitio web, puede pedirle a su modelo que le genere un token mcp.

Copia el token y pégalo en la entrada del sitio web. En cuanto el sitio web se registre con él, se descarta y no puede usarse para registros posteriores ni para nada más. El sitio web recibirá su propio token de sesión para realizar solicitudes.

Si prefiere que su modelo/servicio nunca vea el token, puede ejecutar manualmente npx @jason.today/webmcp --new .

Algunos clientes MCP, incluido Claude Desktop, necesitan reiniciarse para obtener acceso a nuevas herramientas (al menos al momento de escribir este artículo).

Para desconectarse, puede cerrar la pestaña del navegador, hacer clic en "desconectar" o apagar el servidor con npx @jason.today/webmcp -q .

Todos los archivos de configuración se almacenan en el directorio ~/.webmcp .

Related MCP server: autonomous-frontend-browser-tools

Primeros pasos (cómo agregar WebMCP a su sitio web)

Para usar WebMCP, simplemente incluya webmcp.js en su página (a través de src o directamente):

<script src="webmcp.js"></script>

El widget WebMCP se inicializará automáticamente y aparecerá en la esquina inferior derecha de la página. Al hacer clic en él, se solicitará un token WebMCP que el usuario final generará.

Demostración completa (3 minutos)

https://github.com/user-attachments/assets/43ad160a-846d-48ad-9af9-f6d537e78473

Más información sobre cómo funciona

El puente entre el cliente MCP y el sitio web es un servidor websocket exclusivo para el host local (no accesible para solicitudes externas a su ordenador). Dado que está configurado para permitir solicitudes desde su navegador web local, se requiere autenticación/intercambio de tokens en caso de que visite un sitio web que intente abusar de esta función.

Lo ideal sería que el propio navegador web tuviera un permiso explícito para esto, como el uso de la cámara web o el micrófono.

1. El cliente MCP se conecta a la ruta /mcp usando el token de servidor de .env (generado automáticamente)

2. El servidor genera un token de registro (iniciado a través de la herramienta mcp incorporada por un modelo o el comando --new )

3. Los clientes web se conectan al punto final /register con este token y su dominio.

4. Las páginas web se conectan a su canal asignado en función de su dominio.

5. Cuando un LLM desea utilizar una herramienta/recurso/indicación, la solicitud fluye desde:

   • Cliente MCP → Servidor MCP → Servidor WebSocket → Página web con la herramienta/recurso/indicador

   • (similar para solicitar una lista de herramientas/recursos/indicaciones)

6. La página web ejecuta la solicitud (por ejemplo, llamar a la herramienta) y envía el resultado a través de la misma ruta.

7. Se pueden conectar varias páginas web simultáneamente, cada una con su propio conjunto de herramientas y tokens.

8. El cliente MCP ve todas las herramientas como una lista unificada, con prefijos de canal para evitar colisiones de nombres

sequenceDiagram
    participant User
    participant MCP as MCP Client
    participant Server as MCP Server
    participant WS as WebSocket Server
    participant Web as Website
    
    %% Initial connection
    MCP->>Server: Connect to /mcp with internal server token
    
    %% Website registration token
    User->>MCP: Request registration token
    MCP->>Server: Request registration token
    Server-->>MCP: Return registration token
    MCP-->>User: Display registration token
    
    %% Website registration
    User->>Web: Paste registration token
    Web->>WS: Connect to /register with token & domain (registration token deleted)
    WS-->>Web: Assign channel & session token
    Web->>WS: Connect to assigned channel
    
    %% Tool interaction
    MCP->>Server: Request tools list
    Server->>WS: Forward request
    WS->>Web: Request tools
    Web-->>WS: Return tools list
    WS-->>Server: Forward tools list
    Server-->>MCP: Return tools list
    
    %% Tool execution
    MCP->>Server: Tool request
    Server->>WS: Forward request
    WS->>Web: Execute tool
    Web-->>WS: Return result
    WS-->>Server: Forward result
    Server-->>MCP: Return result
    
    %% Disconnection
    User->>Web: Disconnect
    Web->>WS: Close connection

Seguridad

Este es un proyecto en sus primeras etapas. Me interesa mucho reforzar la seguridad para evitar que extensiones maliciosas, etc., puedan realizar ataques de inyección rápida y similares. Si tienes alguna idea constructiva, contáctame o abre un problema.

Herramientas integradas

• Generador de tokens (para conectarse a sitios web de WebMCP)

• Definidor de herramientas MCP (para simplificar la creación del esquema de una herramienta para su uso con MCP)

  • Puede solicitar el javascript (si corresponde) en un mensaje de seguimiento para utilizarlo con WebMCP

Estibador

Hay un Dockerfile específicamente para la implementación de Smithery.

Si desea utilizar Docker para ejecutar el servidor websocket, he agregado un docker-compose.yml para fines de demostración.

Si se proporciona --docker a la configuración del cliente mcp junto con --mcp , se asumirá que el servidor está en ejecución. Esto permitirá dockerizar el proceso principal (servidor websocket), y el cliente mcp se conectará al contenedor de Docker mediante websocket. De igual forma, los sitios web se comunicarán con el contenedor de Docker.