Servidor WASM MCP

Implementación de prueba de concepto de un servidor de Protocolo de Contexto de Modelo (MCP) que se ejecuta en WebAssembly (WASM) dentro de un navegador web. Este proyecto demuestra la integración de herramientas y recursos de MCP en un entorno de navegador.

Características

Herramienta calculadora

• Realiza operaciones aritméticas básicas (suma, resta, multiplicación, división)

• Validación de entrada y manejo de errores

• Resultados de cálculos en tiempo real

Sistema de almacenamiento

• Funcionalidad de almacenamiento de clave-valor

• Establecer y recuperar valores utilizando claves de cadena

• Almacenamiento persistente dentro de la sesión del navegador

• Manejo de recursos basado en plantillas

Related MCP server: MCP Server Basic Example

Implementación técnica

Componentes del servidor

• server.ts : Implementación del servidor MCP principal con definiciones de herramientas y recursos

• main.ts : Integración del lado del cliente y manejo de la interacción de la interfaz de usuario

• browser-transport.ts : Capa de transporte personalizada para la comunicación del navegador

Arquitectura

• Utiliza el SDK del Protocolo de Contexto de Modelo para la implementación del servidor

• Implementa una capa de transporte de navegador personalizada

• Las herramientas se registran con funciones de devolución de llamada

• Los recursos utilizan rutas de plantilla con sustitución de parámetros

Conceptos clave

1. Herramientas

   • Registrado usando server.tool()

   • Ejecutar mediante funciones de devolución de llamada

   • Validación de esquemas con Zod

2. Recursos

   • Rutas basadas en plantillas (por ejemplo, storage://{key} )

   • Se accede a través de readCallback

   • Manejo de recursos parametrizado

Uso

Calculadora

1. Seleccione una operación (sumar, restar, multiplicar, dividir)

2. Introduzca dos números

3. Haga clic en "Calcular" para ver el resultado.

4. Manejo de errores para entradas no válidas y división por cero

Almacenamiento

1. Introduzca una clave y un valor en los campos respectivos

2. Haga clic en "Establecer almacenamiento" para almacenar el valor

3. Ingrese una clave y haga clic en "Obtener almacenamiento" para recuperar un valor

4. Retroalimentación proporcionada para operaciones exitosas y errores.

Dependencias

• @modelcontextprotocol/sdk

• Zod (para validación de esquemas)

• Mecanografiado

• Vite (para desarrollo y construcción)

Estructura del proyecto

mcp-wasm-poc/
├── src/
│   └── web/
│       ├── server.ts      # MCP server implementation
│       ├── main.ts        # Client-side logic
│       └── browser-transport.ts # Browser transport layer
├── index.html            # Web interface
└── package.json         # Project dependencies

Manejo de errores

• Errores de inicialización del servidor

• Errores de ejecución de la herramienta

• Errores de acceso a recursos

• Validación de entrada

• Errores de la capa de transporte

Mejoras futuras

• Operaciones adicionales de la calculadora

• Almacenamiento persistente entre sesiones

• Interfaz de usuario/experiencia de usuario mejorada

• Herramientas y recursos adicionales de MCP

• Optimización WASM

Desarrollo

Esta es una implementación de prueba de concepto que demuestra la viabilidad de ejecutar un servidor MCP en un navegador web mediante WebAssembly. La implementación se centra en demostrar los conceptos básicos de MCP, manteniendo la simplicidad y la claridad.