install.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta name="description" content="Generate per-client MCP config snippets for awesome-coolify-mcp — 19 tools, six prompts, multi-instance + Coolify Cloud. Client-side only." />
  <title>Install — awesome-coolify-mcp</title>
  <link rel="stylesheet" href="shared.css" />
</head>
<body>
  <div class="page-shell">
    <header class="mesh-hero">
      <img class="mesh-hero__visual" src="assets/install-configurator-hero.png" alt="" aria-hidden="true" />
      <div class="mesh-hero__scrim" aria-hidden="true"></div>
      <div class="mesh-hero__inner">
        <nav class="nav-bar">
          <a href="index.html">← Landing</a>
          <a href="https://github.com/clezcoding/awesome-coolify/blob/main/README.md">README</a>
          <a href="mcp.example.json">mcp.example.json</a>
        </nav>
        <p class="eyebrow">Install configurator</p>
        <h1 class="display-title">awesome-coolify-mcp</h1>
        <p class="lead">Generate per-client MCP config snippets for awesome-coolify-mcp (19 tools · six prompts). Everything runs in your browser — no backend, no token logging.</p>
      </div>
    </header>

    <main class="container">
      <div class="notice">
        <strong>Security:</strong> All generation happens locally in your browser. Your URL and token never leave this page.
        Deeplinks default to placeholder credentials — use &ldquo;Generate deeplink with my values&rdquo; only when opening locally, not for sharing.
      </div>

      <div class="notice">
        <strong>Coolify Cloud:</strong> Use a team-scoped token from <a href="https://app.coolify.io">app.coolify.io</a>. See <a href="en/cloud.md">docs/en/cloud.md</a> for registry setup and known limits.
      </div>

      <section id="skills" class="skills-command glass-elevated">
        <h2 class="section-title">IDE skills (Cursor, Claude Code, Codex)</h2>
        <p class="hint">Install workflow playbooks after the MCP server is connected. Optional: <code>npx skills add clezcoding/awesome-coolify --all</code></p>
        <pre><code id="skills-install-cmd">npx skills add clezcoding/awesome-coolify -a cursor -a claude-code -a codex</code></pre>
        <div class="btn-row">
          <button type="button" class="btn" id="copy-skills-btn">Copy install command</button>
          <a class="btn btn-secondary" href="en/setup.md">Open setup guide</a>
        </div>
      </section>

      <form id="config-form" class="glass-elevated" novalidate>
        <label for="coolify-url">COOLIFY_URL</label>
        <p class="hint">Your Coolify base URL (e.g. https://coolify.example.com, no trailing slash)</p>
        <input type="text" id="coolify-url" name="coolify-url" placeholder="https://coolify.example.com" autocomplete="off" />

        <label for="coolify-token">COOLIFY_TOKEN</label>
        <p class="hint">Coolify UI → Keys &amp; Tokens → create an API token</p>
        <input type="password" id="coolify-token" name="coolify-token" placeholder="YOUR_COOLIFY_API_TOKEN" autocomplete="off" />

        <label for="client">MCP client</label>
        <select id="client" name="client">
          <option value="cursor">Cursor</option>
          <option value="vscode">VS Code / GitHub Copilot</option>
          <option value="claude-desktop">Claude Desktop</option>
          <option value="claude-code">Claude Code</option>
          <option value="windsurf">Windsurf</option>
          <option value="opencode">OpenCode</option>
          <option value="codex">Codex CLI</option>
          <option value="gemini">Gemini CLI</option>
          <option value="antigravity">Google Antigravity</option>
          <option value="openclaw">OpenClaw</option>
          <option value="hermes">Hermes Agent</option>
          <option value="kimi">Kimi Code</option>
          <option value="kilo">Kilo Code</option>
          <option value="cline">Cline</option>
          <option value="goose">Goose</option>
          <option value="lmstudio">LM Studio</option>
        </select>
        <p class="hint" id="client-note"></p>

        <div class="field-row">
          <input type="checkbox" id="verify-ssl" checked />
          <label for="verify-ssl">COOLIFY_VERIFY_SSL (default true)</label>
        </div>

        <label for="log-level">COOLIFY_MCP_LOG</label>
        <select id="log-level">
          <option value="info" selected>info</option>
          <option value="debug">debug</option>
          <option value="error">error</option>
        </select>

        <button type="submit" class="btn">Generate config</button>
      </form>

      <section class="output-section glass-elevated" id="output-section" hidden>
        <h2 class="section-title">Config snippet</h2>
        <pre><code id="config-output"></code></pre>
        <button type="button" class="btn" id="copy-btn">Copy to clipboard</button>

        <div class="deeplink-box">
          <h2 class="section-title">One-click deeplinks</h2>
          <p class="hint">Placeholder env by default. Fill the form above for real credentials.</p>
          <div class="btn-row">
            <a class="btn" id="cursor-deeplink" href="#">Add to Cursor</a>
            <a class="btn btn-secondary" id="vscode-deeplink" href="#">Install in VS Code</a>
            <button type="button" class="btn btn-secondary" id="deeplink-with-values">Generate deeplink with my values</button>
          </div>
        </div>
      </section>
    </main>

    <footer class="site-footer">
      <p>Primary command: <code>npx -y awesome-coolify-mcp</code></p>
      <p style="margin-top:0.5rem;">
        <a href="https://github.com/clezcoding/awesome-coolify">GitHub</a> ·
        <a href="https://www.npmjs.com/package/awesome-coolify-mcp">npm</a> ·
        MIT License
      </p>
    </footer>
  </div>

  <script>
    const SERVER_NAME = 'awesome-coolify-mcp';
    const PLACEHOLDER_URL = 'https://coolify.example.com';
    const PLACEHOLDER_TOKEN = 'YOUR_COOLIFY_API_TOKEN';

    const CLIENT_NOTES = {
      'claude-desktop': 'D-18: No Claude Desktop mcpb packaging in Phase 7 — Claude Desktop = manual JSON paste or Pages configurator output only.',
    };

    function getEnvVars(useForm) {
      const urlEl = document.getElementById('coolify-url');
      const tokenEl = document.getElementById('coolify-token');
      const sslEl = document.getElementById('verify-ssl');
      const logEl = document.getElementById('log-level');
      return {
        COOLIFY_URL: useForm && urlEl.value.trim() ? urlEl.value.trim() : PLACEHOLDER_URL,
        COOLIFY_TOKEN: useForm && tokenEl.value.trim() ? tokenEl.value.trim() : PLACEHOLDER_TOKEN,
        COOLIFY_VERIFY_SSL: sslEl.checked ? 'true' : 'false',
        COOLIFY_MCP_LOG: logEl.value,
      };
    }

    function buildMcpServersJson(env) {
      const cursorConfig = {
        mcpServers: {
          [SERVER_NAME]: {
            command: 'npx',
            args: ['-y', 'awesome-coolify-mcp'],
            env: env,
          },
        },
      };
      return cursorConfig;
    }

    function generateCursorSnippet(env) {
      return JSON.stringify(buildMcpServersJson(env), null, 2);
    }

    function generateClaudeCodeSnippet(env) {
      const cfg = {
        mcpServers: {
          [SERVER_NAME]: {
            type: 'stdio',
            command: 'npx',
            args: ['-y', 'awesome-coolify-mcp'],
            env: env,
          },
        },
      };
      return JSON.stringify(cfg, null, 2);
    }

    // D-22 VS Code adapter: "inputs" array with ${input:coolify_url} / ${input:coolify_token}
    function generateVsCodeSnippet(env) {
      const cfg = {
        inputs: [
          {
            type: 'promptString',
            id: 'coolify_url',
            description: 'Your Coolify instance URL (e.g., https://coolify.example.com)',
            password: false,
          },
          {
            type: 'promptString',
            id: 'coolify_token',
            description: 'Your Coolify API Token',
            password: true,
          },
        ],
        servers: {
          [SERVER_NAME]: {
            command: 'npx',
            args: ['-y', 'awesome-coolify-mcp'],
            env: {
              COOLIFY_URL: '${input:coolify_url}',
              COOLIFY_TOKEN: '${input:coolify_token}',
              COOLIFY_VERIFY_SSL: env.COOLIFY_VERIFY_SSL,
              COOLIFY_MCP_LOG: env.COOLIFY_MCP_LOG,
            },
          },
        },
      };
      return JSON.stringify(cfg, null, 2);
    }

    // D-22 OpenCode/Kilo adapter: "type": "local" with command array
    function generateOpenCodeSnippet(env) {
      const cfg = {
        mcp: {
          [SERVER_NAME]: {
            type: 'local',
            command: ['npx', '-y', 'awesome-coolify-mcp'],
            enabled: true,
            environment: env,
          },
        },
      };
      return JSON.stringify(cfg, null, 2);
    }

    function generateCodexSnippet(env) {
      const lines = [
        '[mcp_servers.awesome-coolify-mcp]',
        'command = "npx"',
        'args = ["-y", "awesome-coolify-mcp"]',
        'enabled = true',
        '',
        '[mcp_servers.awesome-coolify-mcp.env]',
        `COOLIFY_URL = "${env.COOLIFY_URL}"`,
        `COOLIFY_TOKEN = "${env.COOLIFY_TOKEN}"`,
        `COOLIFY_VERIFY_SSL = "${env.COOLIFY_VERIFY_SSL}"`,
        `COOLIFY_MCP_LOG = "${env.COOLIFY_MCP_LOG}"`,
      ];
      return lines.join('\n');
    }

    function generateHermesSnippet(env) {
      const yaml = [
        'mcp_servers:',
        `  ${SERVER_NAME}:`,
        '    command: "npx"',
        '    args: ["-y", "awesome-coolify-mcp"]',
        '    env:',
        `      COOLIFY_URL: "${env.COOLIFY_URL}"`,
        `      COOLIFY_TOKEN: "${env.COOLIFY_TOKEN}"`,
        `      COOLIFY_VERIFY_SSL: "${env.COOLIFY_VERIFY_SSL}"`,
        `      COOLIFY_MCP_LOG: "${env.COOLIFY_MCP_LOG}"`,
      ];
      return yaml.join('\n');
    }

    function generateGooseSnippet(env) {
      const yaml = [
        'mcpServers:',
        `  ${SERVER_NAME}:`,
        '    command: "npx"',
        '    args: ["-y", "awesome-coolify-mcp"]',
        '    env:',
        `      COOLIFY_URL: "${env.COOLIFY_URL}"`,
        `      COOLIFY_TOKEN: "${env.COOLIFY_TOKEN}"`,
        `      COOLIFY_VERIFY_SSL: "${env.COOLIFY_VERIFY_SSL}"`,
        `      COOLIFY_MCP_LOG: "${env.COOLIFY_MCP_LOG}"`,
      ];
      return yaml.join('\n');
    }

    function generateOpenClawSnippet(env) {
      const jsonPart = JSON.stringify(
        {
          mcp: {
            servers: {
              [SERVER_NAME]: {
                command: ['npx', '-y', 'awesome-coolify-mcp'],
                environment: env,
              },
            },
          },
        },
        null,
        2,
      );
      const cliAlt = `openclaw mcp set ${SERVER_NAME} --command npx --args "-y" --args "awesome-coolify-mcp"`;
      return jsonPart + '\n\n# Alternative CLI:\n# ' + cliAlt + '\n# mcp.servers shape in ~/.openclaw/openclaw.json';
    }

    const ADAPTERS = {
      cursor: generateCursorSnippet,
      vscode: generateVsCodeSnippet,
      'claude-desktop': generateCursorSnippet,
      'claude-code': generateClaudeCodeSnippet,
      windsurf: generateCursorSnippet,
      opencode: generateOpenCodeSnippet,
      codex: generateCodexSnippet,
      gemini: generateCursorSnippet,
      antigravity: generateCursorSnippet,
      openclaw: generateOpenClawSnippet,
      hermes: generateHermesSnippet,
      kimi: generateCursorSnippet,
      kilo: generateOpenCodeSnippet,
      cline: generateCursorSnippet,
      goose: generateGooseSnippet,
      lmstudio: generateCursorSnippet,
    };

    function generateCursorDeeplink(env) {
      const config = {
        [SERVER_NAME]: {
          command: 'npx',
          args: ['-y', 'awesome-coolify-mcp'],
          env: env,
        },
      };
      const b64 = btoa(JSON.stringify(config));
      return `cursor://anysphere.cursor-deeplink/mcp/install?name=${encodeURIComponent(SERVER_NAME)}&config=${b64}`;
    }

    function generateVsCodeDeeplink(env) {
      const payload = {
        inputs: [
          { type: 'promptString', id: 'coolify_url', description: 'Coolify URL', password: false },
          { type: 'promptString', id: 'coolify_token', description: 'Coolify API Token', password: true },
        ],
        servers: {
          [SERVER_NAME]: {
            command: 'npx',
            args: ['-y', 'awesome-coolify-mcp'],
            env: {
              COOLIFY_URL: env.COOLIFY_URL.includes('example') ? '${input:coolify_url}' : env.COOLIFY_URL,
              COOLIFY_TOKEN: env.COOLIFY_TOKEN.includes('YOUR_') ? '${input:coolify_token}' : env.COOLIFY_TOKEN,
              COOLIFY_VERIFY_SSL: env.COOLIFY_VERIFY_SSL,
              COOLIFY_MCP_LOG: env.COOLIFY_MCP_LOG,
            },
          },
        },
      };
      return `vscode:mcp/install?config=${encodeURIComponent(JSON.stringify(payload))}`;
    }

    function updateDeeplinks(useForm) {
      const env = getEnvVars(useForm);
      document.getElementById('cursor-deeplink').href = generateCursorDeeplink(env);
      document.getElementById('vscode-deeplink').href = generateVsCodeDeeplink(env);
    }

    function applyClientFromHash() {
      const hash = window.location.hash.slice(1);
      if (!hash.startsWith('client=')) return;
      const slug = hash.slice('client='.length);
      const select = document.getElementById('client');
      if ([...select.options].some((o) => o.value === slug)) {
        select.value = slug;
        updateClientNote();
      }
    }

    function updateClientNote() {
      const client = document.getElementById('client').value;
      const note = document.getElementById('client-note');
      note.textContent = CLIENT_NOTES[client] || '';
    }

    document.getElementById('client').addEventListener('change', updateClientNote);

    document.getElementById('config-form').addEventListener('submit', (e) => {
      e.preventDefault();
      const client = document.getElementById('client').value;
      const env = getEnvVars(true);
      const adapter = ADAPTERS[client] || generateCursorSnippet;
      const snippet = adapter(env);
      document.getElementById('config-output').textContent = snippet;
      document.getElementById('output-section').hidden = false;
      updateDeeplinks(false);
    });

    document.getElementById('copy-btn').addEventListener('click', () => {
      const text = document.getElementById('config-output').textContent;
      navigator.clipboard.writeText(text).catch(() => {
        const ta = document.createElement('textarea');
        ta.value = text;
        document.body.appendChild(ta);
        ta.select();
        document.execCommand('copy');
        document.body.removeChild(ta);
      });
    });

    document.getElementById('copy-skills-btn').addEventListener('click', () => {
      const text = document.getElementById('skills-install-cmd').textContent;
      navigator.clipboard.writeText(text).then(() => {
        const btn = document.getElementById('copy-skills-btn');
        const prev = btn.textContent;
        btn.textContent = 'Copied';
        setTimeout(() => { btn.textContent = prev; }, 1600);
      }).catch(() => {
        alert('Could not copy — select the command and copy manually.');
      });
    });

    document.getElementById('deeplink-with-values').addEventListener('click', () => {
      updateDeeplinks(true);
    });

    applyClientFromHash();
    updateClientNote();
  </script>
</body>
</html>