First MCP Project

Este proyecto es una demostración de la implementación del Protocolo de Contexto de Modelo (MCP) con integración de Puppeteer.

🚀 Características

• API MCP completa: Implementación del estándar Model Context Protocol
• Integración con Puppeteer: Control de navegador web automatizado
• Interfaz de usuario demo: Para probar las funcionalidades de Puppeteer
• Servidor MCP: Compatible con VS Code y otros clientes MCP

📋 Requisitos previos

• Node.js (versión 18.17.0 o superior)
• pnpm o npm

💻 Instalación

1. Clona este repositorio:

git clone https://github.com/DevJuliox/first-mcp-project.git
cd first-mcp-project

2. Instala las dependencias:

pnpm install
# o npm install

🛠️ Uso

Desarrollo local

Ejecuta el servidor de desarrollo:

pnpm dev
# o npm run dev

Abre http://localhost:3000 en tu navegador para ver la aplicación.

Servidor MCP

Para iniciar el servidor MCP independiente:

pnpm start:mcp-server
# o npm run start:mcp-server

Pruebas

Para ejecutar las pruebas del cliente MCP de Puppeteer:

pnpm test:mcp
# o npm run test:mcp

🔌 Integración con VS Code

Puedes configurar VS Code para usar este servidor MCP añadiendo lo siguiente a tu settings.json:

"mcp": {
  "servers": {
    "puppeteer": {
      "type": "sse",
      "url": "http://localhost:3000"
    }
  }
}

📁 Estructura del proyecto

app/
  ├── api/mcp/puppeteer/      # Endpoints API para manejar solicitudes MCP
  ├── puppeteer-demo/         # Página de demostración de Puppeteer
  └── ...
lib/
  ├── mcp/                    # Implementación del protocolo MCP
  │   ├── controller.ts       # Controlador MCP para Puppeteer
  │   ├── server.ts           # Servidor MCP
  │   └── types.ts            # Definiciones de tipos para MCP
  ├── puppeteer/              # Cliente para controlar Puppeteer
  └── ...
public/
  ├── mcp-client.html         # Cliente web para pruebas MCP
  └── ...
scripts/
  ├── start-mcp-server.ts     # Script para iniciar el servidor MCP
  └── test-mcp-puppeteer.ts   # Script para probar cliente MCP

📖 API MCP disponible

El servidor MCP proporciona las siguientes herramientas:

• puppeteer_initialize - Inicializa el navegador
• puppeteer_navigate - Navega a una URL
• puppeteer_screenshot - Toma capturas de pantalla
• puppeteer_click - Hace clic en elementos
• puppeteer_fill - Rellena formularios
• puppeteer_evaluate - Ejecuta JavaScript
• puppeteer_close - Cierra el navegador

🔑 Licencia

MIT