Evolution API WhatsApp MCP Server
by luiso2
- mcp-evolution-api
- public
index.html•30 kB
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Evolution API MCP Dashboard</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
<link href="./styles.css" rel="stylesheet">
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-primary">
<div class="container-fluid">
<a class="navbar-brand" href="#">
<i class="fab fa-whatsapp me-2"></i>
Evolution API MCP Dashboard
</a>
<div class="navbar-nav ms-auto">
<span class="navbar-text me-3">
<i class="fas fa-user me-2"></i>
<span id="logged-user"></span>
</span>
<span class="navbar-text me-3">
<span id="status-indicator" class="badge bg-success">Online</span>
</span>
<button class="btn btn-outline-light btn-sm" id="logoutBtn">
<i class="fas fa-sign-out-alt me-2"></i>Cerrar Sesión
</button>
</div>
</div>
</nav>
<div class="container-fluid mt-4">
<div class="row">
<!-- Sidebar -->
<div class="col-md-3 col-lg-2">
<div class="list-group">
<a href="#dashboard" class="list-group-item list-group-item-action active" data-tab="dashboard">
<i class="fas fa-tachometer-alt me-2"></i>Dashboard
</a>
<a href="#instances" class="list-group-item list-group-item-action" data-tab="instances">
<i class="fas fa-mobile-alt me-2"></i>Instancias
</a>
<a href="#messages" class="list-group-item list-group-item-action" data-tab="messages">
<i class="fas fa-comments me-2"></i>Mensajes
</a>
<a href="#webhooks" class="list-group-item list-group-item-action" data-tab="webhooks">
<i class="fas fa-webhook me-2"></i>Webhooks
</a>
<a href="#templates" class="list-group-item list-group-item-action" data-tab="templates">
<i class="fas fa-file-alt me-2"></i>Plantillas
</a>
<a href="#logs" class="list-group-item list-group-item-action" data-tab="logs">
<i class="fas fa-list-alt me-2"></i>Logs
</a>
<a href="#openai" class="list-group-item list-group-item-action" data-tab="openai">
<i class="fas fa-robot me-2"></i>OpenAI Config
</a>
</div>
</div>
<!-- Main Content -->
<div class="col-md-9 col-lg-10">
<!-- Dashboard Tab -->
<div id="dashboard-content" class="tab-content active">
<h2>Dashboard General</h2>
<div class="row mb-4">
<div class="col-md-3">
<div class="card text-white bg-primary">
<div class="card-body">
<div class="d-flex justify-content-between">
<div>
<h5 class="card-title">Instancias</h5>
<h3 id="total-instances">0</h3>
</div>
<i class="fas fa-mobile-alt fa-2x"></i>
</div>
</div>
</div>
</div>
<div class="col-md-3">
<div class="card text-white bg-success">
<div class="card-body">
<div class="d-flex justify-content-between">
<div>
<h5 class="card-title">Conectadas</h5>
<h3 id="connected-instances">0</h3>
</div>
<i class="fas fa-check-circle fa-2x"></i>
</div>
</div>
</div>
</div>
<div class="col-md-3">
<div class="card text-white bg-warning">
<div class="card-body">
<div class="d-flex justify-content-between">
<div>
<h5 class="card-title">Mensajes Hoy</h5>
<h3 id="messages-today">0</h3>
</div>
<i class="fas fa-envelope fa-2x"></i>
</div>
</div>
</div>
</div>
<div class="col-md-3">
<div class="card text-white bg-info">
<div class="card-body">
<div class="d-flex justify-content-between">
<div>
<h5 class="card-title">Webhooks</h5>
<h3 id="active-webhooks">0</h3>
</div>
<i class="fas fa-webhook fa-2x"></i>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="card">
<div class="card-header">
<h5>Estado del Sistema</h5>
</div>
<div class="card-body">
<div id="system-status">
<div class="d-flex justify-content-between align-items-center mb-2">
<span>API Server</span>
<span class="badge bg-success">Online</span>
</div>
<div class="d-flex justify-content-between align-items-center mb-2">
<span>Evolution API</span>
<span class="badge bg-success" id="evolution-status">Conectado</span>
</div>
<div class="d-flex justify-content-between align-items-center">
<span>Base de Datos</span>
<span class="badge bg-secondary">No configurada</span>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-6">
<div class="card">
<div class="card-header">
<h5>Actividad Reciente</h5>
</div>
<div class="card-body">
<div id="recent-activity">
<p class="text-muted">Cargando actividad...</p>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Instances Tab -->
<div id="instances-content" class="tab-content">
<div class="d-flex justify-content-between align-items-center mb-4">
<h2>Gestión de Instancias</h2>
<button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#createInstanceModal">
<i class="fas fa-plus me-2"></i>Nueva Instancia
</button>
</div>
<div class="card">
<div class="card-body">
<div id="instances-table">
<p class="text-muted">Cargando instancias...</p>
</div>
</div>
</div>
</div>
<!-- Messages Tab -->
<div id="messages-content" class="tab-content">
<h2>Envío de Mensajes</h2>
<div class="card">
<div class="card-body">
<form id="send-message-form">
<div class="row">
<div class="col-md-6">
<div class="mb-3">
<label for="instance-select" class="form-label">Instancia</label>
<select class="form-select" id="instance-select" required>
<option value="">Seleccionar instancia...</option>
</select>
</div>
</div>
<div class="col-md-6">
<div class="mb-3">
<label for="phone-number" class="form-label">Número de Teléfono</label>
<input type="text" class="form-control" id="phone-number" placeholder="5511999999999" required>
</div>
</div>
</div>
<div class="mb-3">
<label for="message-text" class="form-label">Mensaje</label>
<textarea class="form-control" id="message-text" rows="4" placeholder="Escribe tu mensaje aquí..." required></textarea>
</div>
<button type="submit" class="btn btn-success">
<i class="fas fa-paper-plane me-2"></i>Enviar Mensaje
</button>
</form>
</div>
</div>
</div>
<!-- Other tabs content will be loaded dynamically -->
<div id="webhooks-content" class="tab-content">
<h2>Configuración de Webhooks</h2>
<!-- Webhook Configuration Form -->
<div class="row">
<div class="col-md-8">
<div class="card">
<div class="card-header">
<h5 class="mb-0">Configurar Webhook</h5>
</div>
<div class="card-body">
<form id="webhook-config-form">
<div class="mb-3">
<label for="webhook-instance" class="form-label">Instancia</label>
<select class="form-select" id="webhook-instance" required>
<option value="">Seleccionar instancia...</option>
</select>
</div>
<div class="mb-3">
<label for="webhook-url" class="form-label">URL del Webhook</label>
<input type="url" class="form-control" id="webhook-url"
placeholder="https://tu-servidor.com/webhook" required>
<div class="form-text">URL donde se enviarán los eventos de WhatsApp</div>
</div>
<div class="mb-3">
<label class="form-label">Eventos a Escuchar</label>
<div class="row">
<div class="col-md-6">
<div class="form-check">
<input class="form-check-input" type="checkbox" id="event-message" value="message" checked>
<label class="form-check-label" for="event-message">Mensajes</label>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" id="event-status" value="status">
<label class="form-check-label" for="event-status">Estado de Mensajes</label>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" id="event-presence" value="presence">
<label class="form-check-label" for="event-presence">Presencia</label>
</div>
</div>
<div class="col-md-6">
<div class="form-check">
<input class="form-check-input" type="checkbox" id="event-connection" value="connection">
<label class="form-check-label" for="event-connection">Conexión</label>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" id="event-group" value="group">
<label class="form-check-label" for="event-group">Grupos</label>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" id="event-call" value="call">
<label class="form-check-label" for="event-call">Llamadas</label>
</div>
</div>
</div>
</div>
<div class="mb-3">
<label for="webhook-headers" class="form-label">Headers Personalizados (JSON)</label>
<textarea class="form-control" id="webhook-headers" rows="3"
placeholder='{"Authorization": "Bearer token", "Content-Type": "application/json"}'></textarea>
<div class="form-text">Headers adicionales para las peticiones webhook (opcional)</div>
</div>
<div class="d-flex gap-2">
<button type="submit" class="btn btn-primary">Configurar Webhook</button>
<button type="button" class="btn btn-outline-secondary" id="test-webhook-btn">Probar Webhook</button>
</div>
</form>
</div>
</div>
</div>
<div class="col-md-4">
<!-- Webhook Status -->
<div class="card mb-3">
<div class="card-header">
<h6 class="mb-0">Estado del Webhook</h6>
</div>
<div class="card-body">
<div id="webhook-status">
<div class="text-muted">No configurado</div>
</div>
</div>
</div>
<!-- Recent Webhook Events -->
<div class="card">
<div class="card-header">
<h6 class="mb-0">Eventos Recientes</h6>
</div>
<div class="card-body">
<div id="webhook-events" class="webhook-events">
<div class="text-muted">No hay eventos recientes</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="templates-content" class="tab-content">
<h2>Plantillas de Mensajes</h2>
<p class="text-muted">Contenido en desarrollo...</p>
</div>
<div id="logs-content" class="tab-content">
<h2>Logs del Sistema</h2>
<p class="text-muted">Contenido en desarrollo...</p>
</div>
<!-- OpenAI Configuration Tab -->
<div id="openai-content" class="tab-content">
<h2>Configuración de OpenAI</h2>
<div class="row">
<div class="col-md-8">
<div class="card">
<div class="card-header">
<h5 class="mb-0">Configuración de API</h5>
</div>
<div class="card-body">
<form id="openai-config-form">
<div class="mb-3">
<label for="openai-api-key" class="form-label">API Key</label>
<div class="input-group">
<input type="password" class="form-control" id="openai-api-key" placeholder="sk-..." required>
<button class="btn btn-outline-secondary" type="button" id="toggle-api-key">
<i class="fas fa-eye"></i>
</button>
</div>
<div class="form-text">Tu API key de OpenAI. Se almacena de forma segura.</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="mb-3">
<label for="openai-model" class="form-label">Modelo</label>
<select class="form-select" id="openai-model">
<option value="gpt-3.5-turbo">GPT-3.5 Turbo</option>
<option value="gpt-4">GPT-4</option>
<option value="gpt-4-turbo">GPT-4 Turbo</option>
<option value="gpt-4o">GPT-4o</option>
<option value="gpt-4o-mini">GPT-4o Mini</option>
</select>
</div>
</div>
<div class="col-md-6">
<div class="mb-3">
<label for="openai-temperature" class="form-label">Temperatura</label>
<input type="range" class="form-range" id="openai-temperature" min="0" max="2" step="0.1" value="0.7">
<div class="d-flex justify-content-between">
<small>0 (Preciso)</small>
<small id="temperature-value">0.7</small>
<small>2 (Creativo)</small>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="mb-3">
<label for="openai-max-tokens" class="form-label">Máximo de Tokens</label>
<input type="number" class="form-control" id="openai-max-tokens" value="1000" min="1" max="4000">
</div>
</div>
<div class="col-md-6">
<div class="mb-3">
<label for="openai-timeout" class="form-label">Timeout (segundos)</label>
<input type="number" class="form-control" id="openai-timeout" value="30" min="5" max="120">
</div>
</div>
</div>
<div class="mb-3">
<label for="openai-system-prompt" class="form-label">Prompt del Sistema</label>
<textarea class="form-control" id="openai-system-prompt" rows="4" placeholder="Eres un asistente útil que responde mensajes de WhatsApp..."></textarea>
<div class="form-text">Instrucciones base para el comportamiento del asistente.</div>
</div>
<div class="mb-3">
<div class="form-check">
<input class="form-check-input" type="checkbox" id="openai-enabled">
<label class="form-check-label" for="openai-enabled">
Habilitar respuestas automáticas con OpenAI
</label>
</div>
</div>
<div class="d-flex gap-2">
<button type="submit" class="btn btn-primary">
<i class="fas fa-save me-2"></i>Guardar Configuración
</button>
<button type="button" class="btn btn-success" id="test-openai">
<i class="fas fa-vial me-2"></i>Probar Conexión
</button>
</div>
</form>
</div>
</div>
</div>
<div class="col-md-4">
<!-- Status Card -->
<div class="card mb-3">
<div class="card-header">
<h6 class="mb-0">Estado de la Configuración</h6>
</div>
<div class="card-body">
<div id="openai-status" class="status-indicator">
<span class="status-dot status-inactive"></span>
<span class="status-text">No configurado</span>
</div>
<div class="mt-3">
<small class="text-muted">Última actualización:</small>
<div id="openai-last-update">-</div>
</div>
</div>
</div>
<!-- Usage Stats -->
<div class="card">
<div class="card-header">
<h6 class="mb-0">Estadísticas de Uso</h6>
</div>
<div class="card-body">
<div class="mb-2">
<small class="text-muted">Mensajes procesados hoy:</small>
<div id="openai-messages-today">0</div>
</div>
<div class="mb-2">
<small class="text-muted">Tokens utilizados:</small>
<div id="openai-tokens-used">0</div>
</div>
<div class="mb-2">
<small class="text-muted">Costo estimado:</small>
<div id="openai-estimated-cost">$0.00</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Create Instance Modal -->
<div class="modal fade" id="createInstanceModal" tabindex="-1">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Crear Nueva Instancia</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
</div>
<div class="modal-body">
<form id="create-instance-form">
<div class="mb-3">
<label for="instance-name" class="form-label">Nombre de la Instancia</label>
<input type="text" class="form-control" id="instance-name" required>
</div>
<div class="mb-3">
<label for="instance-token" class="form-label">Token (opcional)</label>
<input type="text" class="form-control" id="instance-token">
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancelar</button>
<button type="button" class="btn btn-primary" id="create-instance-btn">Crear Instancia</button>
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<script src="./dashboard.js"></script>
</body>
</html>
Latest Blog Posts
- MCP Moves to the Linux Foundation: Neutral Stewardship for Agentic InfrastructureBy Om-Shree-0709 on .mcpanthropicLinux Foundation
MCP directory API
We provide all the information about MCP servers via our MCP API.
curl -X GET 'https://glama.ai/api/mcp/v1/servers/luiso2/mcp-evolution-api'
If you have feedback or need assistance with the MCP directory API, please join our Discord server