npm - @messegy/mcp - Versions diffs - 1.0.0 - Mend

@messegy/mcp 1.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (77) hide show

package/README.md +133 -0
package/api/index.js +3 -0
package/dist/api-client.d.ts +10 -0
package/dist/api-client.js +100 -0
package/dist/api-client.js.map +1 -0
package/dist/cli-setup.d.ts +1 -0
package/dist/cli-setup.js +74 -0
package/dist/cli-setup.js.map +1 -0
package/dist/config.d.ts +18 -0
package/dist/config.js +88 -0
package/dist/config.js.map +1 -0
package/dist/index.d.ts +2 -0
package/dist/index.js +56 -0
package/dist/index.js.map +1 -0
package/dist/lib/quota-guard.d.ts +19 -0
package/dist/lib/quota-guard.js +101 -0
package/dist/lib/quota-guard.js.map +1 -0
package/dist/resources/index.d.ts +2 -0
package/dist/resources/index.js +62 -0
package/dist/resources/index.js.map +1 -0
package/dist/server.d.ts +10 -0
package/dist/server.js +364 -0
package/dist/server.js.map +1 -0
package/dist/tools/analytics.d.ts +2 -0
package/dist/tools/analytics.js +42 -0
package/dist/tools/analytics.js.map +1 -0
package/dist/tools/auth.d.ts +2 -0
package/dist/tools/auth.js +113 -0
package/dist/tools/auth.js.map +1 -0
package/dist/tools/auto-replies.d.ts +2 -0
package/dist/tools/auto-replies.js +117 -0
package/dist/tools/auto-replies.js.map +1 -0
package/dist/tools/broadcasts.d.ts +2 -0
package/dist/tools/broadcasts.js +58 -0
package/dist/tools/broadcasts.js.map +1 -0
package/dist/tools/chats.d.ts +2 -0
package/dist/tools/chats.js +77 -0
package/dist/tools/chats.js.map +1 -0
package/dist/tools/contacts.d.ts +2 -0
package/dist/tools/contacts.js +79 -0
package/dist/tools/contacts.js.map +1 -0
package/dist/tools/flows.d.ts +2 -0
package/dist/tools/flows.js +148 -0
package/dist/tools/flows.js.map +1 -0
package/dist/tools/messages.d.ts +2 -0
package/dist/tools/messages.js +149 -0
package/dist/tools/messages.js.map +1 -0
package/dist/tools/shopify.d.ts +2 -0
package/dist/tools/shopify.js +66 -0
package/dist/tools/shopify.js.map +1 -0
package/dist/tools/templates.d.ts +2 -0
package/dist/tools/templates.js +160 -0
package/dist/tools/templates.js.map +1 -0
package/dist/web-app.d.ts +1 -0
package/dist/web-app.js +845 -0
package/dist/web-app.js.map +1 -0
package/package.json +42 -0
package/src/api-client.ts +112 -0
package/src/cli-setup.ts +87 -0
package/src/config.ts +111 -0
package/src/index.ts +66 -0
package/src/lib/quota-guard.ts +138 -0
package/src/resources/index.ts +70 -0
package/src/server.ts +408 -0
package/src/tools/analytics.ts +58 -0
package/src/tools/auth.ts +136 -0
package/src/tools/auto-replies.ts +144 -0
package/src/tools/broadcasts.ts +73 -0
package/src/tools/chats.ts +100 -0
package/src/tools/contacts.ts +99 -0
package/src/tools/flows.ts +192 -0
package/src/tools/messages.ts +177 -0
package/src/tools/shopify.ts +80 -0
package/src/tools/templates.ts +193 -0
package/src/web-app.ts +844 -0
package/tsconfig.json +18 -0
package/vercel.json +10 -0

package/src/web-app.ts ADDED Viewed

@@ -0,0 +1,844 @@
+export function getWebAppHtml(): string {
+  return `<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Messegy AI MCP Hub | Cloud-Hosted Model Context Protocol Server</title>
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap" rel="stylesheet">
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
+  <style>
+    :root {
+      --bg-dark: #070D18;
+      --card-bg: rgba(15, 23, 42, 0.75);
+      --card-border: rgba(30, 41, 59, 0.9);
+      --emerald: #10B981;
+      --emerald-glow: rgba(16, 185, 129, 0.25);
+      --emerald-dark: #059669;
+      --text: #F8FAFC;
+      --text-muted: #94A3B8;
+      --font-main: 'Plus Jakarta Sans', -apple-system, sans-serif;
+      --font-mono: 'JetBrains Mono', monospace;
+    }
+    * { box-sizing: border-box; margin: 0; padding: 0; }
+    body {
+      background-color: var(--bg-dark);
+      background-image:
+        radial-gradient(circle at 15% 15%, rgba(16, 185, 129, 0.08) 0%, transparent 40%),
+        radial-gradient(circle at 85% 85%, rgba(59, 130, 246, 0.06) 0%, transparent 40%);
+      color: var(--text);
+      font-family: var(--font-main);
+      min-height: 100vh;
+      display: flex;
+      flex-direction: column;
+    }
+    /* Navbar */
+    header {
+      border-bottom: 1px solid var(--card-border);
+      background: rgba(7, 13, 24, 0.85);
+      backdrop-filter: blur(12px);
+      position: sticky;
+      top: 0;
+      z-index: 100;
+      padding: 16px 28px;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+    }
+    .brand {
+      display: flex;
+      align-items: center;
+      gap: 10px;
+      text-decoration: none;
+      color: #fff;
+    }
+    .brand-icon {
+      width: 38px;
+      height: 38px;
+      border-radius: 10px;
+      background: linear-gradient(135deg, #10B981, #059669);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      box-shadow: 0 0 16px var(--emerald-glow);
+    }
+    .brand-title {
+      font-size: 20px;
+      font-weight: 800;
+      letter-spacing: -0.5px;
+    }
+    .brand-badge {
+      font-size: 11px;
+      background: rgba(16, 185, 129, 0.15);
+      color: var(--emerald);
+      border: 1px solid rgba(16, 185, 129, 0.3);
+      padding: 2px 8px;
+      border-radius: 6px;
+      font-weight: 700;
+    }
+    .nav-links {
+      display: flex;
+      align-items: center;
+      gap: 18px;
+    }
+    .nav-link {
+      color: var(--text-muted);
+      text-decoration: none;
+      font-size: 14px;
+      font-weight: 600;
+      transition: color 0.2s;
+    }
+    .nav-link:hover { color: #fff; }
+    .btn-portal {
+      background: rgba(255, 255, 255, 0.08);
+      border: 1px solid rgba(255, 255, 255, 0.15);
+      color: #fff;
+      padding: 8px 16px;
+      border-radius: 8px;
+      font-size: 13px;
+      font-weight: 600;
+      text-decoration: none;
+      display: flex;
+      align-items: center;
+      gap: 6px;
+      transition: all 0.2s;
+    }
+    .btn-portal:hover {
+      background: rgba(255, 255, 255, 0.15);
+    }
+    /* Main Container */
+    main {
+      max-width: 1200px;
+      margin: 0 auto;
+      padding: 40px 24px;
+      flex: 1;
+      width: 100%;
+    }
+    .hero {
+      text-align: center;
+      max-width: 780px;
+      margin: 0 auto 40px auto;
+    }
+    .hero-pill {
+      display: inline-flex;
+      align-items: center;
+      gap: 6px;
+      background: rgba(16, 185, 129, 0.12);
+      border: 1px solid rgba(16, 185, 129, 0.3);
+      color: var(--emerald);
+      font-size: 12px;
+      font-weight: 700;
+      padding: 4px 12px;
+      border-radius: 20px;
+      margin-bottom: 18px;
+    }
+    .hero h1 {
+      font-size: 42px;
+      font-weight: 800;
+      letter-spacing: -1px;
+      line-height: 1.2;
+      margin-bottom: 16px;
+    }
+    .gradient-text {
+      background: linear-gradient(135deg, #10B981 0%, #38BDF8 100%);
+      -webkit-background-clip: text;
+      -webkit-text-fill-color: transparent;
+    }
+    .hero p {
+      font-size: 16px;
+      color: var(--text-muted);
+      line-height: 1.6;
+    }
+    /* Grid Layout */
+    .dashboard-grid {
+      display: grid;
+      grid-template-columns: 1fr 1fr;
+      gap: 28px;
+      margin-bottom: 40px;
+    }
+    @media (max-width: 900px) {
+      .dashboard-grid { grid-template-columns: 1fr; }
+    }
+    .card {
+      background: var(--card-bg);
+      border: 1px solid var(--card-border);
+      border-radius: 20px;
+      padding: 28px;
+      backdrop-filter: blur(16px);
+      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
+    }
+    .card-header {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      margin-bottom: 20px;
+    }
+    .card-title {
+      font-size: 18px;
+      font-weight: 700;
+      display: flex;
+      align-items: center;
+      gap: 10px;
+    }
+    .card-icon {
+      color: var(--emerald);
+    }
+    /* Input & Connect Form */
+    .input-group {
+      margin-bottom: 18px;
+    }
+    .input-label {
+      display: block;
+      font-size: 12px;
+      font-weight: 700;
+      color: var(--text-muted);
+      text-transform: uppercase;
+      letter-spacing: 0.5px;
+      margin-bottom: 8px;
+    }
+    .input-field {
+      width: 100%;
+      background: rgba(2, 6, 23, 0.8);
+      border: 1px solid rgba(51, 65, 85, 0.8);
+      border-radius: 10px;
+      padding: 12px 14px;
+      font-family: var(--font-mono);
+      font-size: 13px;
+      color: #fff;
+      outline: none;
+      transition: all 0.2s;
+    }
+    .input-field:focus {
+      border-color: var(--emerald);
+      box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.15);
+    }
+    .btn-connect {
+      width: 100%;
+      background: linear-gradient(135deg, #10B981, #059669);
+      color: #fff;
+      border: none;
+      padding: 12px;
+      border-radius: 10px;
+      font-weight: 700;
+      font-size: 14px;
+      cursor: pointer;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      gap: 8px;
+      transition: all 0.2s;
+      box-shadow: 0 4px 14px var(--emerald-glow);
+    }
+    .btn-connect:hover {
+      transform: translateY(-1px);
+      box-shadow: 0 6px 20px rgba(16, 185, 129, 0.4);
+    }
+    /* Live Quota Badge Cards */
+    .quota-box {
+      margin-top: 20px;
+      padding: 18px;
+      background: rgba(2, 6, 23, 0.6);
+      border: 1px solid rgba(16, 185, 129, 0.25);
+      border-radius: 12px;
+      display: none;
+    }
+    .quota-header {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      margin-bottom: 12px;
+    }
+    .quota-grid {
+      display: grid;
+      grid-template-columns: repeat(3, 1fr);
+      gap: 10px;
+      text-align: center;
+    }
+    .quota-item {
+      background: rgba(15, 23, 42, 0.8);
+      padding: 10px;
+      border-radius: 8px;
+      border: 1px solid var(--card-border);
+    }
+    .quota-val {
+      font-size: 16px;
+      font-weight: 800;
+      color: #fff;
+    }
+    .quota-lbl {
+      font-size: 10px;
+      color: var(--text-muted);
+      text-transform: uppercase;
+      margin-top: 4px;
+    }
+    /* Code Box */
+    .code-box {
+      position: relative;
+      background: #020617;
+      border: 1px solid rgba(51, 65, 85, 0.8);
+      border-radius: 12px;
+      padding: 16px;
+      margin-top: 14px;
+      font-family: var(--font-mono);
+      font-size: 12px;
+      line-height: 1.6;
+      color: #38BDF8;
+      overflow-x: auto;
+    }
+    .btn-copy-code {
+      position: absolute;
+      top: 10px;
+      right: 10px;
+      background: rgba(255, 255, 255, 0.1);
+      border: 1px solid rgba(255, 255, 255, 0.2);
+      color: #fff;
+      padding: 4px 10px;
+      border-radius: 6px;
+      font-size: 11px;
+      font-weight: 600;
+      cursor: pointer;
+      display: flex;
+      align-items: center;
+      gap: 4px;
+      transition: background 0.2s;
+    }
+    .btn-copy-code:hover { background: rgba(255, 255, 255, 0.2); }
+    /* Interactive Live Tool Sandbox */
+    .sandbox-chat {
+      display: flex;
+      flex-direction: column;
+      height: 380px;
+    }
+    .chat-messages {
+      flex: 1;
+      overflow-y: auto;
+      display: flex;
+      flex-direction: column;
+      gap: 12px;
+      padding: 12px 0;
+    }
+    .chat-msg {
+      max-width: 85%;
+      padding: 12px 16px;
+      border-radius: 14px;
+      font-size: 13px;
+      line-height: 1.5;
+    }
+    .chat-msg.user {
+      align-self: flex-end;
+      background: #10B981;
+      color: #fff;
+      border-bottom-right-radius: 4px;
+    }
+    .chat-msg.bot {
+      align-self: flex-start;
+      background: #1E293B;
+      color: var(--text);
+      border-bottom-left-radius: 4px;
+      border: 1px solid var(--card-border);
+    }
+    .chat-input-row {
+      display: flex;
+      gap: 8px;
+      padding-top: 12px;
+      border-top: 1px solid var(--card-border);
+    }
+    .chat-input {
+      flex: 1;
+      background: #020617;
+      border: 1px solid var(--card-border);
+      border-radius: 10px;
+      padding: 10px 14px;
+      color: #fff;
+      font-size: 13px;
+      outline: none;
+    }
+    .chat-input:focus { border-color: var(--emerald); }
+    .btn-send {
+      background: var(--emerald);
+      color: #fff;
+      border: none;
+      border-radius: 10px;
+      padding: 0 16px;
+      cursor: pointer;
+      font-weight: 700;
+    }
+    /* Tools Explorer Tabs */
+    .tools-section {
+      margin-top: 40px;
+    }
+    .section-title {
+      font-size: 24px;
+      font-weight: 800;
+      margin-bottom: 20px;
+      display: flex;
+      align-items: center;
+      gap: 10px;
+    }
+    .tools-grid {
+      display: grid;
+      grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
+      gap: 16px;
+    }
+    .tool-card {
+      background: var(--card-bg);
+      border: 1px solid var(--card-border);
+      border-radius: 14px;
+      padding: 18px;
+      transition: all 0.2s;
+    }
+    .tool-card:hover {
+      border-color: var(--emerald);
+      transform: translateY(-2px);
+    }
+    .tool-name {
+      font-family: var(--font-mono);
+      font-size: 13px;
+      font-weight: 700;
+      color: #38BDF8;
+      margin-bottom: 6px;
+    }
+    .tool-desc {
+      font-size: 12px;
+      color: var(--text-muted);
+      line-height: 1.5;
+    }
+    footer {
+      border-top: 1px solid var(--card-border);
+      padding: 24px;
+      text-align: center;
+      font-size: 13px;
+      color: var(--text-muted);
+    }
+  </style>
+</head>
+<body>
+  <!-- Navbar -->
+  <header>
+    <a href="/" class="brand">
+      <div class="brand-icon">
+        <i class="fa-solid fa-brain" style="color:#fff; font-size:18px;"></i>
+      </div>
+      <span class="brand-title">Messegy <span class="gradient-text">MCP Hub</span></span>
+      <span class="brand-badge">Cloud SSE v1.0</span>
+    </a>
+    <div class="nav-links">
+      <a href="https://docs.messegy.com?page=mcp-server" class="nav-link" target="_blank"><i class="fa-solid fa-book"></i> Documentation</a>
+      <a href="https://app.messegy.com" class="btn-portal" target="_blank"><i class="fa-solid fa-arrow-up-right-from-square"></i> Web Portal</a>
+    </div>
+  </header>
+  <!-- Main Content -->
+  <main>
+    <!-- Hero Banner -->
+    <div class="hero">
+      <div class="hero-pill"><i class="fa-solid fa-bolt"></i> Remote Model Context Protocol (MCP) Cloud Engine</div>
+      <h1>Connect Claude & AI to WhatsApp <span class="gradient-text">In 1 Click</span></h1>
+      <p>Control your WhatsApp Business API directly inside Claude Desktop, Cursor IDE, Windsurf, or custom AI Agents. Zero setup, real-time SSE streaming, and built-in Plan Quota Guard.</p>
+    </div>
+    <!-- Dashboard Grid -->
+    <div class="dashboard-grid">
+      <!-- Card 1: 1-Click Connect & Config Generator -->
+      <div class="card">
+        <div class="card-header">
+          <div class="card-title">
+            <i class="fa-solid fa-key card-icon"></i>
+            <span>1-Click Cloud Connection</span>
+          </div>
+          <span class="brand-badge" id="conn-badge">READY</span>
+        </div>
+        <div class="input-group">
+          <label class="input-label">Messegy API Key</label>
+          <input type="password" id="apiKeyInput" class="input-field" placeholder="msg_live_... (from Settings -> API Keys)">
+        </div>
+        <div class="input-group">
+          <label class="input-label">Project / Workspace Key (Optional)</label>
+          <input type="text" id="projectKeyInput" class="input-field" placeholder="proj_... (optional)">
+        </div>
+        <button class="btn-connect" onclick="verifyAndGenerate()">
+          <i class="fa-solid fa-link"></i> Verify API Key & Unlock 1-Click Setup
+        </button>
+        <!-- POST-CONNECT REVEAL CONTAINER (Hidden until key is entered & verified) -->
+        <div id="postConnectSection" style="display:none; margin-top:20px; animation: fadeIn 0.4s ease-in-out;">
+          <!-- Active Connections Status Banner -->
+          <div id="activeSessionsBanner" style="padding:14px 16px; border-radius:12px; background:rgba(30, 41, 59, 0.7); border:1px solid rgba(16, 185, 129, 0.3); margin-bottom:16px;">
+            <div style="display:flex; align-items:center; justify-content:space-between; margin-bottom:6px;">
+              <span style="font-size:13px; font-weight:700; color:#fff; display:flex; align-items:center; gap:8px;">
+                <i class="fa-solid fa-circle-dot" style="color:#10B981; font-size:10px;"></i>
+                <span id="activeSessionsTitle">Account Status</span>
+              </span>
+              <span id="activeSessionsBadge" style="font-size:10px; font-weight:800; background:rgba(16,185,129,0.15); color:#10B981; border:1px solid rgba(16,185,129,0.3); padding:2px 8px; border-radius:6px;">VERIFIED</span>
+            </div>
+            <p id="activeSessionsDesc" style="font-size:12px; color:var(--text-muted); line-height:1.4; margin:0;">
+              Your API Key is verified. You can download the 1-click installer below to connect Claude Desktop.
+            </p>
+            <div id="activeSessionsList" style="margin-top:10px; display:flex; flex-direction:column; gap:6px;"></div>
+          </div>
+          <!-- Live Quota Status Card -->
+          <div class="quota-box" id="quotaBox" style="display:block; margin-top:0; margin-bottom:16px;">
+            <div class="quota-header">
+              <span style="font-size:13px; font-weight:700; color:#10B981;"><i class="fa-solid fa-circle-check"></i> Connected: <span id="bizName">My Business</span></span>
+              <span style="font-size:11px; color:#FBBF24; font-weight:700;" id="planName">PRO PLAN</span>
+            </div>
+            <div class="quota-grid">
+              <div class="quota-item">
+                <div class="quota-val" id="creditVal">--</div>
+                <div class="quota-lbl">Credits Left</div>
+              </div>
+              <div class="quota-item">
+                <div class="quota-val" id="tierVal">1K/day</div>
+                <div class="quota-lbl">Meta Tier</div>
+              </div>
+              <div class="quota-item">
+                <div class="quota-val" id="botsVal">--</div>
+                <div class="quota-lbl">Auto-Replies</div>
+              </div>
+            </div>
+          </div>
+          <!-- 1-Click Auto-Installer Download Buttons -->
+          <div style="background:rgba(16,185,129,0.08); border:1px solid rgba(16,185,129,0.25); border-radius:14px; padding:16px; margin-bottom:16px;">
+            <div style="display:flex; align-items:center; gap:8px; margin-bottom:10px;">
+              <i class="fa-solid fa-wand-magic-sparkles" style="color:#10B981; font-size:16px;"></i>
+              <span style="font-size:13px; font-weight:800; color:#fff;">1-Click Auto-Setup (No Terminal / No Coding)</span>
+            </div>
+            <!-- 1-Line Terminal Quick Paste -->
+            <div style="background:#020617; border:1px solid rgba(16,185,129,0.3); border-radius:10px; padding:10px 14px; margin-bottom:12px; display:flex; align-items:center; justify-content:space-between;">
+              <code id="curlCommand" style="font-family:var(--font-mono); font-size:11px; color:#10B981; word-break:break-all;">curl -fsSL https://mcp.messegy.com/install.sh | bash</code>
+              <button onclick="copyCurl()" style="background:rgba(16,185,129,0.2); border:1px solid #10B981; color:#fff; padding:4px 10px; border-radius:6px; font-size:11px; cursor:pointer; font-weight:700; margin-left:10px; white-space:nowrap;"><i class="fa-regular fa-copy"></i> Copy</button>
+            </div>
+            <p style="font-size:12px; color:var(--text-muted); margin-bottom:10px; line-height:1.4;">
+              Or download and run the installer file:
+            </p>
+            <div style="display:grid; grid-template-columns:1fr 1fr; gap:10px;">
+              <button onclick="downloadInstaller('mac')" style="background:rgba(255,255,255,0.08); border:1px solid rgba(255,255,255,0.2); color:#fff; padding:10px; border-radius:8px; font-size:12px; font-weight:700; cursor:pointer; display:flex; align-items:center; justify-content:center; gap:6px;">
+                <i class="fa-brands fa-apple"></i> Mac Installer (.command)
+              </button>
+              <button onclick="downloadInstaller('windows')" style="background:rgba(255,255,255,0.08); border:1px solid rgba(255,255,255,0.2); color:#fff; padding:10px; border-radius:8px; font-size:12px; font-weight:700; cursor:pointer; display:flex; align-items:center; justify-content:center; gap:6px;">
+                <i class="fa-brands fa-windows"></i> Windows Installer (.bat)
+              </button>
+            </div>
+            <p style="font-size:11px; color:#94A3B8; margin-top:8px; line-height:1.3;">
+              💡 <strong>Mac Tip:</strong> If double-clicking shows an Apple security prompt, right-click the downloaded file and select <strong>Open</strong>.
+            </p>
+          </div>
+          <!-- Generated JSON Code Box (For Developers) -->
+          <div style="margin-bottom:16px;">
+            <div style="display:flex; justify-content:space-between; align-items:center;">
+              <label class="input-label" style="margin-bottom:0;">Or Manual Config (For Claude Desktop)</label>
+            </div>
+            <div class="code-box">
+              <button class="btn-copy-code" onclick="copyConfig()"><i class="fa-regular fa-copy"></i> Copy</button>
+              <pre id="configSnippet">{\n  "mcpServers": {\n    "messegy": {\n      "command": "npx",\n      "args": ["-y", "@messegy/mcp"]\n    }\n  }\n}</pre>
+            </div>
+          </div>
+          <!-- Remote SSE URL -->
+          <div>
+            <label class="input-label">Cloud SSE Remote URL (For Cursor / Web Clients)</label>
+            <div class="code-box" style="padding:10px 14px; color:#10B981;" id="sseUrlSnippet">
+              https://mcp.messegy.com/sse
+            </div>
+          </div>
+        </div>
+      </div>
+      <!-- Card 2: Interactive In-Browser AI WhatsApp Sandbox -->
+      <div class="card">
+        <div class="card-header">
+          <div class="card-title">
+            <i class="fa-solid fa-comments card-icon"></i>
+            <span>Live WhatsApp AI Sandbox</span>
+          </div>
+          <span style="font-size:11px; color:var(--text-muted);"><i class="fa-solid fa-circle" style="color:#10B981; font-size:8px;"></i> Live Tester</span>
+        </div>
+        <div class="sandbox-chat">
+          <div class="chat-messages" id="chatMessages">
+            <div class="chat-msg bot">
+              👋 <strong>Welcome to Messegy MCP Sandbox!</strong><br>
+              You can test real WhatsApp tools directly in this browser playground.<br><br>
+              💡 <em>Try typing:</em><br>
+              • "Check my account health & plan credits"<br>
+              • "List active WhatsApp templates"<br>
+              • "List auto-reply rules"
+            </div>
+          </div>
+          <div class="chat-input-row">
+            <input type="text" id="chatInput" class="chat-input" placeholder="Type a command for Messegy WhatsApp AI..." onkeydown="if(event.key==='Enter') sendChat()">
+            <button class="btn-send" onclick="sendChat()"><i class="fa-solid fa-paper-plane"></i></button>
+          </div>
+        </div>
+      </div>
+    </div>
+    <!-- Available Tools Grid -->
+    <div class="tools-section">
+      <div class="section-title">
+        <i class="fa-solid fa-toolbox" style="color:var(--emerald);"></i>
+        <span>18+ Built-in WhatsApp AI Tools</span>
+      </div>
+      <div class="tools-grid">
+        <div class="tool-card">
+          <div class="tool-name">messegy_send_whatsapp_message</div>
+          <div class="tool-desc">Send direct text, image, video, PDF, or audio WhatsApp message to any customer phone.</div>
+        </div>
+        <div class="tool-card">
+          <div class="tool-name">messegy_send_interactive_buttons</div>
+          <div class="tool-desc">Send up to 3 clickable quick-reply interactive buttons.</div>
+        </div>
+        <div class="tool-card">
+          <div class="tool-name">messegy_send_list_menu</div>
+          <div class="tool-desc">Send structured dropdown list menu with selectable rows and sections.</div>
+        </div>
+        <div class="tool-card">
+          <div class="tool-name">messegy_list_templates</div>
+          <div class="tool-desc">List approved, pending, and rejected Meta WhatsApp templates.</div>
+        </div>
+        <div class="tool-card">
+          <div class="tool-name">messegy_send_template_message</div>
+          <div class="tool-desc">Send pre-approved templates with dynamic body parameters ({{1}}, {{2}}).</div>
+        </div>
+        <div class="tool-card">
+          <div class="tool-name">messegy_create_template</div>
+          <div class="tool-desc">Submit new template directly to Meta for instant review.</div>
+        </div>
+        <div class="tool-card">
+          <div class="tool-name">messegy_list_chats</div>
+          <div class="tool-desc">Retrieve active customer WhatsApp threads with unread indicators.</div>
+        </div>
+        <div class="tool-card">
+          <div class="tool-name">messegy_get_chat_history</div>
+          <div class="tool-desc">Fetch full chronological conversation message history.</div>
+        </div>
+        <div class="tool-card">
+          <div class="tool-name">messegy_create_broadcast</div>
+          <div class="tool-desc">Launch bulk marketing broadcast to segmented tags or recipient lists.</div>
+        </div>
+        <div class="tool-card">
+          <div class="tool-name">messegy_list_auto_replies</div>
+          <div class="tool-desc">List all keyword auto-responders and bot trigger rules.</div>
+        </div>
+        <div class="tool-card">
+          <div class="tool-name">messegy_create_auto_reply</div>
+          <div class="tool-desc">Create keyword-based auto-replies with text, buttons, or templates.</div>
+        </div>
+        <div class="tool-card">
+          <div class="tool-name">messegy_list_flows</div>
+          <div class="tool-desc">List all WhatsApp Flows (native interactive forms & surveys).</div>
+        </div>
+        <div class="tool-card">
+          <div class="tool-name">messegy_send_flow_message</div>
+          <div class="tool-desc">Send interactive flow message with native form button to customer.</div>
+        </div>
+        <div class="tool-card">
+          <div class="tool-name">messegy_get_flow_submissions</div>
+          <div class="tool-desc">Fetch submitted form responses, lead details, and survey answers.</div>
+        </div>
+        <div class="tool-card">
+          <div class="tool-name">messegy_get_plan_limits_and_usage</div>
+          <div class="tool-desc">Inspect active subscription plan quotas, message balance, and rule limits.</div>
+        </div>
+        <div class="tool-card">
+          <div class="tool-name">messegy_trigger_shopify_abandoned_cart</div>
+          <div class="tool-desc">Trigger abandoned checkout recovery messages with auto-applied discount links.</div>
+        </div>
+      </div>
+    </div>
+  </main>
+  <!-- Footer -->
+  <footer>
+    Messegy Model Context Protocol (MCP) Cloud Engine © 2026 Messegy Platform. All rights reserved.
+  </footer>
+  <script>
+    async function verifyAndGenerate() {
+      const apiKey = document.getElementById('apiKeyInput').value.trim();
+      const projectKey = document.getElementById('projectKeyInput').value.trim();
+      if (!apiKey) {
+        alert('Please enter your Messegy API Key');
+        return;
+      }
+      const btn = document.querySelector('.btn-connect');
+      btn.innerHTML = '<i class="fa-solid fa-spinner fa-spin"></i> Verifying...';
+      try {
+        const res = await fetch('/api/verify-key', {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({ apiKey, projectKey })
+        });
+        const data = await res.json();
+        if (data.success) {
+          // Reveal post-connect download and quota container
+          document.getElementById('postConnectSection').style.display = 'block';
+          // Update Active Sessions Banner
+          const count = data.activeConnectionsCount || 0;
+          if (count > 0) {
+            document.getElementById('activeSessionsTitle').innerHTML = '<i class="fa-solid fa-circle-check" style="color:#FBBF24;"></i> Active on ' + count + ' Device' + (count > 1 ? 's' : '');
+            document.getElementById('activeSessionsBadge').innerText = count + ' ACTIVE INSTANCE' + (count > 1 ? 'S' : '');
+            document.getElementById('activeSessionsBadge').style.background = 'rgba(251, 191, 36, 0.15)';
+            document.getElementById('activeSessionsBadge').style.color = '#FBBF24';
+            document.getElementById('activeSessionsBadge').style.borderColor = 'rgba(251, 191, 36, 0.3)';
+            document.getElementById('activeSessionsDesc').innerHTML = '⚠️ <strong>Already Connected:</strong> Your account is currently running on <strong>' + count + ' active Claude/Cursor session' + (count > 1 ? 's' : '') + '</strong>. You can still download & connect on another computer below (Multi-Instance Supported).';
+            // List connected instances
+            const listDiv = document.getElementById('activeSessionsList');
+            listDiv.innerHTML = '';
+            if (data.activeSessions && data.activeSessions.length > 0) {
+              data.activeSessions.forEach(function(s) {
+                listDiv.innerHTML += '<div style="font-size:11px; color:#38BDF8; font-family:var(--font-mono); background:rgba(2,6,23,0.5); padding:6px 10px; border-radius:6px; display:flex; justify-content:space-between;"><span>💻 ' + s.client + '</span><span>🕒 ' + s.connectedAt + '</span></div>';
+              });
+            }
+          } else {
+            document.getElementById('activeSessionsTitle').innerHTML = '<i class="fa-solid fa-circle-check" style="color:#10B981;"></i> Verified & Ready to Connect';
+            document.getElementById('activeSessionsBadge').innerText = '0 ACTIVE SESSIONS';
+            document.getElementById('activeSessionsDesc').innerText = 'Your API Key is verified. Download the 1-click installer below to connect Claude Desktop on your computer.';
+            document.getElementById('activeSessionsList').innerHTML = '';
+          }
+          document.getElementById('bizName').innerText = data.workspaceName || 'Active Workspace';
+          document.getElementById('planName').innerText = (data.planName || 'PRO PLAN').toUpperCase();
+          document.getElementById('creditVal').innerText = (data.creditsRemaining || 1000).toLocaleString();
+          document.getElementById('tierVal').innerText = data.tier || '1K/day';
+          document.getElementById('botsVal').innerText = (data.autoRepliesUsed || 0) + '/' + (data.maxAutoReplies || 10);
+          document.getElementById('conn-badge').innerText = 'CONNECTED';
+          document.getElementById('conn-badge').style.background = 'rgba(16,185,129,0.2)';
+          document.getElementById('conn-badge').style.color = '#10B981';
+          // Update Claude Config Snippet
+          const config = {
+            mcpServers: {
+              messegy: {
+                command: "npx",
+                args: ["-y", "@messegy/mcp"],
+                env: {
+                  MESSEGY_API_KEY: apiKey,
+                  ...(projectKey ? { MESSEGY_PROJECT_KEY: projectKey } : {})
+                }
+              }
+            }
+          };
+          document.getElementById('configSnippet').innerText = JSON.stringify(config, null, 2);
+          // Update 1-Line Curl Command
+          document.getElementById('curlCommand').innerText = 'curl -fsSL "https://mcp.messegy.com/install.sh?api_key=' + apiKey + '" | bash';
+          // Update SSE URL
+          const currentOrigin = window.location.origin;
+          document.getElementById('sseUrlSnippet').innerText = currentOrigin + '/sse?api_key=' + apiKey + (projectKey ? '&project_key=' + projectKey : '');
+        } else {
+          alert('Verification notice: ' + (data.message || 'Please check your API key.'));
+        }
+      } catch (err) {
+        alert('Could not verify with server: ' + err.message);
+      } finally {
+        btn.innerHTML = '<i class="fa-solid fa-link"></i> Re-verify / Refresh Status';
+      }
+    }
+    function copyCurl() {
+      const text = document.getElementById('curlCommand').innerText;
+      navigator.clipboard.writeText(text);
+      alert('1-Line Installer command copied! Just open Terminal and paste (Cmd + V) to connect instantly.');
+    }
+    function downloadInstaller(target) {
+      const apiKey = document.getElementById('apiKeyInput').value.trim();
+      const url = '/download/' + target + (apiKey ? '?api_key=' + encodeURIComponent(apiKey) : '');
+      window.location.href = url;
+    }
+    function copyConfig() {
+      const text = document.getElementById('configSnippet').innerText;
+      navigator.clipboard.writeText(text);
+      alert('Claude Desktop configuration copied to clipboard!');
+    }
+    async function sendChat() {
+      const input = document.getElementById('chatInput');
+      const text = input.value.trim();
+      if (!text) return;
+      const apiKey = document.getElementById('apiKeyInput').value.trim();
+      const projectKey = document.getElementById('projectKeyInput').value.trim();
+      const messagesDiv = document.getElementById('chatMessages');
+      messagesDiv.innerHTML += '<div class="chat-msg user">' + escapeHtml(text) + '</div>';
+      input.value = '';
+      messagesDiv.scrollTop = messagesDiv.scrollHeight;
+      // Loading bubble
+      const loadingId = 'loading-' + Date.now();
+      messagesDiv.innerHTML += '<div class="chat-msg bot" id="' + loadingId + '"><i class="fa-solid fa-spinner fa-spin"></i> Querying Messegy WhatsApp Engine...</div>';
+      messagesDiv.scrollTop = messagesDiv.scrollHeight;
+      try {
+        const res = await fetch('/api/test-tool', {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({ query: text, apiKey, projectKey })
+        });
+        const data = await res.json();
+        const loader = document.getElementById(loadingId);
+        if (loader) {
+          loader.innerHTML = '<strong>Messegy Response:</strong><br><pre style="white-space:pre-wrap; margin-top:6px; font-family:var(--font-mono); font-size:11px;">' + escapeHtml(data.reply || JSON.stringify(data, null, 2)) + '</pre>';
+        }
+      } catch (err) {
+        const loader = document.getElementById(loadingId);
+        if (loader) {
+          loader.innerHTML = '❌ Error: ' + err.message;
+        }
+      }
+      messagesDiv.scrollTop = messagesDiv.scrollHeight;
+    }
+    function escapeHtml(string) {
+      return String(string).replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;');
+    }
+  </script>
+</body>
+</html>`;
+}