WebMCP Demo

---

¡Hola developer 👋🏻! Demo educativa en español para entender cómo una web puede exponer acciones a agentes de IA mediante WebMCP. Incluye una lista de películas y una extensión Manifest V3 que usa WebLLM y WebGPU para descubrir e invocar esas acciones.

📑 Tabla de Contenidos

• Características
• Tecnologías
• Requisitos Previos
• Instalación
• Uso
• Estructura del Proyecto
• Contribuir
• Sígueme

✨ Características

• Publica herramientas WebMCP declarativas e imperativas desde una web estática.
• Añade películas, cambia el tema y gestiona el estado de la lista sin backend.
• Descubre y ejecuta las herramientas de la pestaña activa desde una extensión Chrome/Edge.
• Ejecuta un modelo local con WebLLM y WebGPU para realizar function calling.

🛠️ Tecnologías Utilizadas

• HTML, CSS y JavaScript sin framework.
• WebMCP (document.modelContext y formularios con toolname).
• Chrome/Edge Extensions Manifest V3.
• WebLLM 0.2.84, esbuild 0.25.10 y WebGPU.

📋 Requisitos Previos

• Python 3 para servir la web localmente.
• Chrome o Edge con soporte WebMCP disponible y modo desarrollador habilitado.
• Un dispositivo y navegador compatibles con WebGPU para usar el agente local.
• Node.js y npm para compilar la extensión.

🚀 Instalación

Paso 1: Clonar el repositorio

git clone https://github.com/0GiS0/webmcp-demo.git
cd webmcp-demo

Paso 2: Servir la demo web

python3 -m http.server 8000

Abre http://localhost:8000 en Chrome o Edge.

Paso 3: Compilar la extensión

cd extension
npm install
npm run build

No se necesitan variables de entorno para este proyecto.

Paso 4: Cargar la extensión local

1. Abre chrome://extensions o edge://extensions.
2. Activa Modo de desarrollador.
3. Selecciona Cargar descomprimida y elige la carpeta extension.

💻 Uso

En la web puedes añadir películas y cambiar entre los temas claro y oscuro. La página expone las herramientas add_movie y set_theme a través de WebMCP.

Para probar el agente:

1. Mantén abierta la demo en la pestaña activa.
2. Abre el side panel desde el icono de la extensión.
3. Descarga el modelo local cuando se solicite y escribe una instrucción.

Ejemplo Básico

Añade "Iron Man" a mi lista y cambia el tema a oscuro.

La primera descarga del modelo puede ocupar varios GB y requiere memoria suficiente para WebGPU.

📁 Estructura del Proyecto

webmcp-demo/
├── index.html
├── script.js
├── styles.css
├── marvel-mcu-antes-de-endgame.csv
├── extension/
│   ├── src/
│   ├── side_panel.html
│   ├── side_panel.css
│   ├── background.js
│   └── manifest.json
└── README.md

• script.js: estado, renderizado y registro de herramientas WebMCP.
• extension/src/: cliente WebMCP, caché del modelo y side panel.
• extension/README.md: detalles de desarrollo de la extensión.

🤝 Contribuir

1. Crea una rama para tu cambio.
2. Mantén los cambios centrados en el comportamiento de la demo.
3. Comprueba la web y recompila la extensión con npm run build.
4. Abre un pull request describiendo la mejora.

🌐 Sígueme en Mis Redes Sociales

Si te ha gustado este proyecto y quieres ver más contenido como este, no olvides suscribirte a mi canal de YouTube y seguirme en mis redes sociales: