npm - @flexprice/mcp-server - Versions diffs - 0.0.3 - Mend

@flexprice/mcp-server 0.0.3

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 (5225) hide show

package/src/landing-page.ts ADDED Viewed

@@ -0,0 +1,1069 @@
+/*
+ * Code generated by Speakeasy (https://speakeasy.com). DO NOT EDIT.
+ */
+import {
+  Request as ExpressRequest,
+  Response as ExpressResponse,
+} from "express";
+import { toolNames } from "./tool-names.js";
+// Cloudflare-specific wrapper
+export function landingPage(req: Request): Response {
+  const origin = new URL(req.url).origin;
+  return new Response(landingPageHTML(origin), {
+    headers: { "Content-Type": "text/html" },
+  });
+}
+// express wrapper
+export function landingPageExpress(req: ExpressRequest, res: ExpressResponse) {
+  const origin = new URL(req.host).href;
+  res.type("html").send(landingPageHTML(origin));
+}
+export function landingPageHTML(origin: string): string {
+  const o = origin;
+  const sseUrl = `${o}/sse`;
+  const mcpConfigLocal = {
+    command: "npx",
+    args: [
+      "-y",
+      "@flexprice/mcp-server",
+      "start",
+      "--server-url",
+      "https://api.cloud.flexprice.io/v1",
+      "--api-key-auth",
+      "YOUR_API_KEY",
+    ],
+  };
+  const codexConfig = `[mcp_servers.FlexPrice]
+url = "${sseUrl}"
+http_headers = { "ApiKeyAuth" = "YOUR_API_KEY" }`;
+  return `
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>FlexPrice MCP Server</title>
+    <meta name="description" content="Install FlexPrice MCP server for Cursor, VS Code, Claude, and more.">
+    <meta property="og:type" content="website">
+    <meta property="og:title" content="FlexPrice - MCP Server">
+    <meta property="og:description" content="Install FlexPrice MCP server for Cursor, VS Code, Claude, and more.">
+    <meta property="twitter:card" content="summary">
+    <meta property="twitter:title" content="FlexPrice - MCP Server">
+    <meta property="twitter:description" content="Install FlexPrice MCP server for Cursor, VS Code, Claude, and more.">
+    <meta name="robots" content="index, follow">
+    <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=Geist+Mono:wght@100..900&family=Geist:wght@100..900&display=swap" rel="stylesheet">
+    <style>
+      html,
+      body {
+        --font-diatype: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+        --font-diatype-mono: "Geist Mono", SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+        --color-base-white: hsl(0 0% 100%);
+        --color-base-black: hsl(0 0% 0%);
+        --color-neutral-50: hsl(0, 0%, 99%);
+        --color-neutral-100: hsl(0, 0%, 98%);
+        --color-neutral-200: hsl(0, 0%, 92%);
+        --color-neutral-700: hsl(0, 0%, 33%);
+        --color-neutral-800: hsl(0, 0%, 20%);
+        --color-feedback-green-100: hsl(102, 35%, 93%);
+        --color-feedback-green-300: hsl(99, 30%, 73%);
+        --color-feedback-green-700: hsl(105, 24%, 27%);
+        --color-brand-blue-600: hsl(215, 71%, 40%);
+        --color-feedback-violet-600: hsl(268, 75%, 31%);
+        --text-default-success: var(--color-feedback-green-700);
+        --border-success-softest: var(--color-feedback-green-300);
+        --color-link-default: var(--color-brand-blue-600);
+        --color-link-visited-primary: var(--color-feedback-violet-600);
+        --fill-neutral-highlight: var(--color-base-black);
+        --fill-neutral-default: var(--color-neutral-800);
+        --fill-neutral-highlight-inverse: var(--color-base-white);
+        --fill-neutral-default-inverse: var(--color-neutral-50);
+        --bg-surface-primary-default: var(--color-base-white);
+        --bg-surface-secondary-default: var(--color-neutral-100);
+        --bg-surface-primary-inverse: var(--color-base-black);
+        --bg-success-softest: var(--color-feedback-green-100);
+        --bg-surface-primary-fixed-dark: var(--color-base-black);
+        --bg-surface-transparent: hsl(0, 0%, 0%, 0.5);
+        --border-neutral-softest: var(--color-neutral-200);
+        --text-default: var(--color-neutral-700);
+        --text-default-inverse: var(--color-neutral-100);
+        --z-index-modal: 200;
+        --z-index-hover: 100;
+        --ease-in-out-quad: cubic-bezier(0.455, 0.03, 0.515, 0.955);
+        font-family: var(--font-diatype);
+        color: var(--text-default);
+        background: var(--bg-surface-secondary-default);
+        margin: 0;
+        padding: 0;
+        min-height: 100vh;
+        display: flex;
+        flex-direction: column;
+        font-weight: 300;
+      }
+      @keyframes fade-in {
+        from { opacity: 0; }
+        to { opacity: 1; }
+      }
+      .fade-in {
+        animation: fade-in 200ms var(--ease-in-out-quad) forwards;
+        animation-iteration-count: 1;
+      }
+      .fade-out {
+        opacity: 0;
+      }
+      .main {
+        padding: 6rem 1rem;
+      }
+      @media (min-width: 768px) {
+        .main {
+          padding: 6rem 6rem;
+        }
+      }
+      @media (min-width: 1024px) {
+        .main {
+          padding: 6rem 13rem;
+        }
+      }
+      .content-container {
+        display: flex;
+        flex-direction: column;
+        gap: 2rem;
+      }
+      section.header {
+        display: flex;
+        flex-direction: column;
+        gap: 1rem;
+        width: 100%;
+        align-items: flex-start;
+      }
+      .header.container {
+        display: flex;
+        flex-wrap: wrap;
+        justify-content: space-between;
+        align-items: center;
+        width: 100%;
+        gap: 1.5rem;
+      }
+      .mcp-meta {
+        display: flex;
+        gap: 1.5rem;
+      }
+      .header-content {
+        display: flex;
+        flex-direction: column;
+        justify-content: space-between;
+      }
+      .section-description {
+        margin-bottom: 1rem;
+      }
+      .logo-container {
+        width: 5rem;
+        height: 5rem;
+        border-radius: 0.5rem;
+        padding: 0.625rem;
+        border: solid 1px var(--border-neutral-softest);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        background: var(--bg-surface-primary-default);
+      }
+      .logo-container svg {
+        width: 100%;
+        height: 100%;
+      }
+      .logo-container img {
+        width: 100%;
+        height: 100%;
+        object-fit: contain;
+      }
+      .mcp-name {
+        font-size: 2rem;
+        line-height: 150%;
+        text-wrap-style: balance;
+      }
+      .mcp-description {
+        font-size: 1rem;
+        line-height: 175%;
+        text-wrap-style: balance;
+      }
+      .popover {
+        position: relative;
+      }
+      .action-button {
+        background: var(--fill-neutral-default);
+        color: var(--text-default-inverse);
+      }
+      .header-right {
+        display: flex;
+        flex-direction: column;
+        gap: 0.5rem;
+        align-items: flex-end;
+      }
+      .header-actions {
+        display: flex;
+        gap: 0.5rem;
+        font-weight: 400;
+        font-size: calc(1rem - 2px);
+        text-transform: uppercase;
+      }
+      .header-action {
+        border-radius: 6px;
+        padding: 0.5rem 1rem;
+        display: flex;
+        align-items: center;
+        gap: 0.75rem;
+        transition: background-color 300ms var(--ease-in-out-quad);
+        text-transform: uppercase;
+        text-decoration: none;
+      }
+      .action-button:hover {
+        background: var(--fill-neutral-highlight);
+      }
+      .popover-menu {
+        position: absolute;
+        overflow: hidden;
+        top: calc(100% + 0.25rem);
+        left: 0;
+        display: flex;
+        flex-direction: column;
+        width: 100%;
+        align-items: stretch;
+        border-radius: 0.5rem;
+        background: var(--fill-neutral-default);
+        color: var(--text-default-inverse);
+        box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
+      }
+      .popover-menu.hidden {
+        display: none;
+      }
+      .popover-button {
+        padding: 0.75rem 1rem;
+        transition: background-color 300ms var(--ease-in-out-quad);
+        text-decoration: none;
+        color: inherit;
+      }
+      .popover-button:hover {
+        background: var(--fill-neutral-highlight);
+      }
+      .external-docs {
+        background: var(--color-neutral-200);
+        text-transform: uppercase;
+        color: var(--fill-neutral-default);
+        box-shadow:
+          rgba(0, 0, 0, 0) 0px 0px 0px 0px,
+          rgba(0, 0, 0, 0) 0px 0px 0px 0px,
+          rgba(0, 0, 0, 0) 0px 0px 0px 0px,
+          rgba(0, 0, 0, 0) 0px 0px 0px 0px,
+          rgba(255, 255, 255, 0.2) 0px 2px 1px 0px inset,
+          rgba(0, 0, 0, 0.15) 0px -2px 1px 0px inset;
+      }
+      .install.container {
+        display: flex;
+        flex-direction: column;
+      }
+      .install-targets {
+        display: grid;
+        grid-template-columns: repeat(3, 1fr);
+        gap: 1.25rem;
+      }
+      @media (max-width: 768px) {
+        .install-targets {
+          grid-template-columns: 1fr;
+        }
+      }
+      .install-target {
+        font-weight: 400;
+        display: flex;
+        cursor: pointer;
+        gap: 1rem;
+      }
+      .install-target .target {
+        grid-area: target;
+        display: flex;
+        gap: 1rem;
+        align-items: center;
+      }
+      .install-target svg,
+      .install-target img {
+        width: 1.5rem;
+        height: 1.5rem;
+      }
+      .tool-names {
+        display: flex;
+        gap: 0.75rem;
+        row-gap: 0.5rem;
+        flex-wrap: wrap;
+      }
+      .badge {
+        font-family: var(--font-diatype-mono);
+        font-weight: 300;
+        display: inline-block;
+        border-radius: 0.125rem;
+        background: var(--bg-surface-primary-default);
+        border: solid 1px var(--border-neutral-softest);
+        padding: 0.125rem 0.25rem;
+        text-transform: uppercase;
+        font-size: 0.85rem;
+      }
+      .tool-name.hidden {
+        display: none;
+      }
+      .code-container {
+        position: relative;
+        cursor: pointer;
+        max-width: 100%;
+      }
+      .code-container code {
+        user-select: all;
+        overflow: auto;
+        max-width: 100%;
+        padding-right: 4rem;
+      }
+      .copy-button {
+        --transition-length: 1000ms;
+        position: absolute;
+        top: 1.5rem;
+        right: 1.5rem;
+        border-radius: 4px;
+        border: 1px var(--border-neutral-softest) solid;
+        cursor: pointer;
+        z-index: 10;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 1.5rem;
+        height: 1.5rem;
+        padding: 4px;
+        background: var(--bg-surface-primary-default);
+        transition:
+          border var(--transition-length) var(--ease-in-out-quad),
+          background-color var(--transition-length) var(--ease-in-out-quad);
+      }
+      .copy-button.success {
+        border: 1px var(--border-success-softest) solid;
+        background: var(--bg-success-softest);
+      }
+      .copy-button svg {
+        pointer-events: none;
+        position: absolute;
+        left: 50%;
+        top: 50%;
+        transform: translate(-50%, -50%);
+        height: calc(100% - 8px);
+        aspect-ratio: 1 / 1;
+      }
+      .icon {
+        transition:
+          opacity var(--transition-length) var(--ease-in-out-quad),
+          color var(--transition-length) var(--ease-in-out-quad);
+      }
+      .copy-button.success .icon-copy-success {
+        opacity: 1;
+        color: var(--text-default-success);
+      }
+      .copy-button.waiting .icon-copy {
+        opacity: 1;
+      }
+      .copy-button.waiting .icon-copy-success {
+        opacity: 0;
+      }
+      .copy-button.success .icon-copy {
+        opacity: 0;
+      }
+      pre,
+      code {
+        white-space: pre;
+        font-size: 1rem;
+        line-height: 150%;
+        font-family: var(--font-diatype-mono);
+        overflow-x: auto;
+        margin: 0;
+      }
+      .code-snippet {
+        display: inline-block;
+      }
+      .modal {
+        position: fixed;
+        left: 50%;
+        top: 8rem;
+        transform: translateX(-50%);
+        background-color: var(--bg-surface-primary-default);
+        max-height: calc(100% - 16rem);
+        max-width: min(calc(100% - 4rem), 54rem);
+        z-index: var(--z-index-modal);
+        padding: 1.5rem;
+        border-radius: 0.5rem;
+        border: 1px solid var(--border-neutral-softest);
+        display: none;
+        flex-direction: column;
+        transition: opacity 200ms var(--ease-in-out-quad);
+      }
+      .modal.active {
+        display: flex;
+      }
+      .modal h1 {
+        font-size: 26px;
+        line-height: 42px;
+        margin: 0;
+      }
+      .modal li {
+        line-height: 175%;
+        font-weight: 400;
+        margin: 0;
+      }
+      .modal ol {
+        padding: 0;
+        list-style-position: inside;
+      }
+      .modal .code-container {
+        margin: 1rem 0;
+      }
+      .content-slot {
+        flex: 1 1 auto;
+        overflow: auto;
+      }
+      .modal-backdrop {
+        width: 100%;
+        height: 100%;
+        position: fixed;
+        top: 0;
+        left: 0;
+        z-index: calc(var(--z-index-modal) - 1);
+        background: var(--bg-surface-transparent);
+        transition: opacity 200ms var(--ease-in-out-quad);
+        display: none;
+      }
+      .modal-backdrop.active {
+        display: block;
+      }
+      .modal-close {
+        position: absolute;
+        top: 1.5rem;
+        right: 1.5rem;
+        padding: 0.5rem;
+        z-index: var(--z-index-hover);
+        border-radius: 4px;
+        transition:
+          background-color 300ms var(--ease-in-out-quad),
+          color 300ms var(--ease-in-out-quad),
+          border 300ms var(--ease-in-out-quad);
+        border: 1px transparent solid;
+        background: none;
+        cursor: pointer;
+      }
+      .modal-close svg {
+        display: block;
+        width: 1.5rem;
+        height: 1.5rem;
+      }
+      .modal-close:hover {
+        color: var(--fill-neutral-highlight);
+        background: var(--fill-neutral-highlight-inverse);
+        border: 1px var(--border-neutral-softest) solid;
+      }
+      .instruction-item {
+        margin: 1rem 0;
+      }
+      .instruction-item svg {
+        width: 1rem;
+        height: 1rem;
+      }
+      .section-title {
+        font-size: 26px;
+        font-weight: 300;
+        margin-bottom: 0.5em;
+      }
+      h1 {
+        font-weight: 300;
+      }
+      h2,
+      .modal-sub-heading {
+        font-weight: 300;
+      }
+      .card {
+        border-radius: 0.5rem;
+        background: var(--fill-neutral-default-inverse);
+        border: solid 1px var(--border-neutral-softest);
+        padding: 1.5rem;
+        transition: background-color 300ms var(--ease-in-out-quad);
+      }
+      .card:hover {
+        background: var(--fill-neutral-highlight-inverse);
+      }
+      button {
+        border: none;
+        margin: 0;
+        padding: 0;
+        width: auto;
+        overflow: visible;
+        cursor: pointer;
+        text-align: inherit;
+        background: transparent;
+        color: inherit;
+        font: inherit;
+        -webkit-font-smoothing: inherit;
+        -moz-osx-font-smoothing: inherit;
+        -webkit-appearance: none;
+      }
+      a {
+        text-decoration: unset;
+        color: var(--color-link-default);
+      }
+      a:visited {
+        color: var(--color-link-visited-primary);
+      }
+      .install-link {
+        text-decoration: unset;
+        color: unset;
+      }
+      .install-link:visited {
+        color: unset;
+      }
+      * {
+        box-sizing: border-box;
+      }
+      .speakeasy-badge {
+        position: fixed;
+        bottom: 1.25rem;
+        right: 1rem;
+        display: flex;
+        gap: 6px;
+        align-items: center;
+        background: var(--bg-surface-primary-default);
+        border: 1px var(--border-neutral-softest) solid;
+        border-radius: 4px;
+        padding: 0.25rem 0.5rem;
+        text-decoration: none;
+        color: var(--text-default);
+        font-size: 0.85rem;
+        transition: border-color 200ms var(--ease-in-out-quad);
+      }
+      .speakeasy-badge:hover {
+        border-color: var(--fill-neutral-default);
+      }
+      .speakeasy-badge:visited {
+        color: var(--text-default);
+      }
+      .speakeasy-badge svg {
+        width: 16px;
+        height: 16px;
+      }
+    </style>
+</head>
+<body>
+    <main class="main">
+      <div class="content-container">
+        <section class="header">
+          <div class="header container">
+            <div class="mcp-meta">
+              <div class="logo-container">
+                <!-- Todo from overlay -->
+                <svg viewBox="0 0 24 24" fill="currentColor">
+                  <path d="M5.5 11.5a5 5 0 0 1 9.68-1.64 3.5 3.5 0 0 1 4.24 5.47A3.5 3.5 0 0 1 18 21H7a5 5 0 0 1-1.5-9.5z"/>
+                </svg>
+              </div>
+              <div class="header-content">
+                <div class="mcp-name">mcp</div>
+                <div class="mcp-description">MCP Server</div>
+              </div>
+            </div>
+            <div class="header-actions">
+              <a class="external-docs header-action" href="<no value>" target="_blank" rel="noopener noreferrer">
+                View Docs
+              </a>
+              <div class="popover">
+                <button class="action-button header-action" id="action-button" onclick="toggleDropdownMenu()">
+                  Add to Client
+                  <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+                    <path d="M4.00049 6L8.00049 10L12.0005 6" stroke="currentColor" stroke-width="1.3334" stroke-linecap="round" stroke-linejoin="round"></path>
+                  </svg>
+                </button>
+                <div class="popover-menu hidden" id="popover-menu">
+                  <a class="popover-button install-link" href="cursor://anysphere.cursor-deeplink/mcp/install?name=FlexPrice&config=eyJjb21tYW5kIjoibnB4IiwiYXJncyI6WyIteSIsIkBmbGV4cHJpY2UvbWNwLXNlcnZlciIsInN0YXJ0IiwiLS1zZXJ2ZXItdXJsIiwiaHR0cHM6Ly9hcGkuY2xvdWQuZmxleHByaWNlLmlvL3YxIiwiLS1hcGkta2V5LWF1dGgiLCIiXX0=">
+                    Cursor
+                  </a>
+                  <button class="popover-button" onclick="showModal('claude-code')">
+                    Claude Code
+                  </button>
+                  <button class="popover-button" onclick="showModal('claude-desktop')">
+                    Claude Desktop
+                  </button>
+                  <a class="popover-button install-link" href="vscode://ms-vscode.vscode-mcp/install?name=FlexPrice&config=eyJjb21tYW5kIjoibnB4IiwiYXJncyI6WyIteSIsIkBmbGV4cHJpY2UvbWNwLXNlcnZlciIsInN0YXJ0IiwiLS1zZXJ2ZXItdXJsIiwiaHR0cHM6Ly9hcGkuY2xvdWQuZmxleHByaWNlLmlvL3YxIiwiLS1hcGkta2V5LWF1dGgiLCIiXX0=">
+                    VS Code
+                  </a>
+                  <button class="popover-button" onclick="showModal('gemini')">
+                    Gemini CLI
+                  </button>
+                  <button class="popover-button" onclick="showModal('codex')">
+                    Codex CLI
+                  </button>
+                </div>
+              </div>
+            </div>
+          </div>
+        </section>
+        <section class="install container">
+          <header>
+            <h1 class="section-title">Install</h1>
+            <div class="section-description">
+              Select a method below to install the server.
+            </div>
+          </header>
+          <div class="install-targets">
+            <a tabindex="0" class="card install-target install-link" href="cursor://anysphere.cursor-deeplink/mcp/install?name=FlexPrice&config=eyJjb21tYW5kIjoibnB4IiwiYXJncyI6WyIteSIsIkBmbGV4cHJpY2UvbWNwLXNlcnZlciIsInN0YXJ0IiwiLS1zZXJ2ZXItdXJsIiwiaHR0cHM6Ly9hcGkuY2xvdWQuZmxleHByaWNlLmlvL3YxIiwiLS1hcGkta2V5LWF1dGgiLCIiXX0=">
+              <div class="target">
+                <img src="https://cursor.com/assets/images/logo.svg" alt="Cursor">
+                <span>Cursor</span>
+              </div>
+            </a>
+            <div tabindex="0" class="card install-target" onclick="showModal('claude-code')">
+              <div class="target">
+                <svg width="250" height="251" viewBox="0 0 250 251" fill="none" xmlns="http://www.w3.org/2000/svg">
+                  <path d="M49.0541 166.749L98.2432 139.166L99.0541 136.75L98.2432 135.405H95.8108L87.5676 134.903L59.4595 134.151L35.1351 133.148L11.4865 131.894L5.54054 130.64L0 123.243L0.540541 119.607L5.54054 116.222L12.7027 116.849L28.5135 117.977L52.2973 119.607L69.4595 120.61L95 123.243H99.0541L99.5946 121.613L98.2432 120.61L97.1622 119.607L72.5676 102.932L45.9459 85.3796L32.027 75.2242L24.5946 70.0837L20.8108 65.3195L19.1892 54.7879L25.9459 47.2653L35.1351 47.8922L37.4324 48.5191L46.7568 55.6655L66.6216 71.0868L92.5676 90.1439L96.3514 93.2783L97.875 92.25L98.1081 91.5231L96.3514 88.6394L82.2973 63.1881L67.2973 37.2352L60.5405 26.4529L58.7838 20.0587C58.1033 17.3753 57.7027 15.1553 57.7027 12.4107L65.4054 1.87914L69.7297 0.5L80.1351 1.87914L84.4595 5.64042L90.9459 20.4348L101.351 43.6294L117.568 75.2242L122.297 84.6274L124.865 93.2783L125.811 95.9112H127.432V94.4067L128.784 76.6033L131.216 54.7879L133.649 26.7036L134.459 18.8049L138.378 9.27633L146.216 4.13591L152.297 7.01956L157.297 14.166L156.622 18.8049L153.649 38.1128L147.838 68.3285L144.054 88.6394H146.216L148.784 86.0065L159.054 72.4659L176.216 50.9012L183.784 42.3756L192.703 32.9724L198.378 28.4589H209.189L217.027 40.2442L213.514 52.4057L202.432 66.4478L193.243 78.3586L180.068 96.011L171.892 110.204L172.625 111.375L174.595 111.207L204.324 104.813L220.405 101.929L239.595 98.6695L248.243 102.682L249.189 106.819L245.811 115.219L225.27 120.234L201.216 125.124L165.397 133.556L165 133.875L165.468 134.569L181.622 136.032L188.514 136.408H205.405L236.892 138.79L245.135 144.181L250 150.826L249.189 155.966L236.486 162.361L219.459 158.349L179.595 148.82L165.946 145.435H164.054V146.563L175.405 157.722L196.351 176.528L222.432 200.851L223.784 206.869L220.405 211.633L216.892 211.132L193.919 193.83L185 186.057L165 169.131H163.649V170.886L168.243 177.656L192.703 214.392L193.919 225.676L192.162 229.311L185.811 231.568L178.919 230.314L164.459 210.129L149.73 187.561L137.838 167.25L136.402 168.157L129.324 243.73L126.081 247.616L118.514 250.5L112.162 245.736L108.784 237.962L112.162 222.541L116.216 202.481L119.459 186.558L122.432 166.749L124.248 160.131L124.088 159.688L122.637 159.932L107.703 180.415L85 211.132L67.027 230.314L62.7027 232.07L55.2703 228.183L55.9459 221.287L60.1351 215.144L85 183.549L100 163.865L109.668 152.566L109.573 150.932L109.04 150.886L42.973 193.955L31.2162 195.46L26.0811 190.696L26.7568 182.922L29.1892 180.415L49.0541 166.749Z" fill="#D97757"></path>
+                </svg>
+                <span>Claude Code</span>
+              </div>
+            </div>
+            <div tabindex="0" class="card install-target" onclick="showModal('claude-desktop')">
+              <div class="target">
+                <svg width="250" height="251" viewBox="0 0 250 251" fill="none" xmlns="http://www.w3.org/2000/svg">
+                  <path d="M49.0541 166.749L98.2432 139.166L99.0541 136.75L98.2432 135.405H95.8108L87.5676 134.903L59.4595 134.151L35.1351 133.148L11.4865 131.894L5.54054 130.64L0 123.243L0.540541 119.607L5.54054 116.222L12.7027 116.849L28.5135 117.977L52.2973 119.607L69.4595 120.61L95 123.243H99.0541L99.5946 121.613L98.2432 120.61L97.1622 119.607L72.5676 102.932L45.9459 85.3796L32.027 75.2242L24.5946 70.0837L20.8108 65.3195L19.1892 54.7879L25.9459 47.2653L35.1351 47.8922L37.4324 48.5191L46.7568 55.6655L66.6216 71.0868L92.5676 90.1439L96.3514 93.2783L97.875 92.25L98.1081 91.5231L96.3514 88.6394L82.2973 63.1881L67.2973 37.2352L60.5405 26.4529L58.7838 20.0587C58.1033 17.3753 57.7027 15.1553 57.7027 12.4107L65.4054 1.87914L69.7297 0.5L80.1351 1.87914L84.4595 5.64042L90.9459 20.4348L101.351 43.6294L117.568 75.2242L122.297 84.6274L124.865 93.2783L125.811 95.9112H127.432V94.4067L128.784 76.6033L131.216 54.7879L133.649 26.7036L134.459 18.8049L138.378 9.27633L146.216 4.13591L152.297 7.01956L157.297 14.166L156.622 18.8049L153.649 38.1128L147.838 68.3285L144.054 88.6394H146.216L148.784 86.0065L159.054 72.4659L176.216 50.9012L183.784 42.3756L192.703 32.9724L198.378 28.4589H209.189L217.027 40.2442L213.514 52.4057L202.432 66.4478L193.243 78.3586L180.068 96.011L171.892 110.204L172.625 111.375L174.595 111.207L204.324 104.813L220.405 101.929L239.595 98.6695L248.243 102.682L249.189 106.819L245.811 115.219L225.27 120.234L201.216 125.124L165.397 133.556L165 133.875L165.468 134.569L181.622 136.032L188.514 136.408H205.405L236.892 138.79L245.135 144.181L250 150.826L249.189 155.966L236.486 162.361L219.459 158.349L179.595 148.82L165.946 145.435H164.054V146.563L175.405 157.722L196.351 176.528L222.432 200.851L223.784 206.869L220.405 211.633L216.892 211.132L193.919 193.83L185 186.057L165 169.131H163.649V170.886L168.243 177.656L192.703 214.392L193.919 225.676L192.162 229.311L185.811 231.568L178.919 230.314L164.459 210.129L149.73 187.561L137.838 167.25L136.402 168.157L129.324 243.73L126.081 247.616L118.514 250.5L112.162 245.736L108.784 237.962L112.162 222.541L116.216 202.481L119.459 186.558L122.432 166.749L124.248 160.131L124.088 159.688L122.637 159.932L107.703 180.415L85 211.132L67.027 230.314L62.7027 232.07L55.2703 228.183L55.9459 221.287L60.1351 215.144L85 183.549L100 163.865L109.668 152.566L109.573 150.932L109.04 150.886L42.973 193.955L31.2162 195.46L26.0811 190.696L26.7568 182.922L29.1892 180.415L49.0541 166.749Z" fill="#D97757"></path>
+                </svg>
+                <span>Claude Desktop</span>
+              </div>
+            </div>
+            <a tabindex="0" class="card install-target install-link" href="vscode://ms-vscode.vscode-mcp/install?name=FlexPrice&config=eyJjb21tYW5kIjoibnB4IiwiYXJncyI6WyIteSIsIkBmbGV4cHJpY2UvbWNwLXNlcnZlciIsInN0YXJ0IiwiLS1zZXJ2ZXItdXJsIiwiaHR0cHM6Ly9hcGkuY2xvdWQuZmxleHByaWNlLmlvL3YxIiwiLS1hcGkta2V5LWF1dGgiLCIiXX0=">
+              <div class="target">
+                <svg width="100" height="100" viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg">
+                  <mask id="mask0" mask-type="alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="100" height="100">
+                    <path fill-rule="evenodd" clip-rule="evenodd" d="M70.9119 99.3171C72.4869 99.9307 74.2828 99.8914 75.8725 99.1264L96.4608 89.2197C98.6242 88.1787 100 85.9892 100 83.5872V16.4133C100 14.0113 98.6243 11.8218 96.4609 10.7808L75.8725 0.873756C73.7862 -0.130129 71.3446 0.11576 69.5135 1.44695C69.252 1.63711 69.0028 1.84943 68.769 2.08341L29.3551 38.0415L12.1872 25.0096C10.589 23.7965 8.35363 23.8959 6.86933 25.2461L1.36303 30.2549C-0.452552 31.9064 -0.454633 34.7627 1.35853 36.417L16.2471 50.0001L1.35853 63.5832C-0.454633 65.2374 -0.452552 68.0938 1.36303 69.7453L6.86933 74.7541C8.35363 76.1043 10.589 76.2037 12.1872 74.9905L29.3551 61.9587L68.769 97.9167C69.3925 98.5406 70.1246 99.0104 70.9119 99.3171ZM75.0152 27.2989L45.1091 50.0001L75.0152 72.7012V27.2989Z" fill="white"></path>
+                  </mask>
+                  <g mask="url(#mask0)">
+                    <path d="M96.4614 10.7962L75.8569 0.875542C73.4719 -0.272773 70.6217 0.211611 68.75 2.08333L1.29858 63.5832C-0.515693 65.2373 -0.513607 68.0937 1.30308 69.7452L6.81272 74.754C8.29793 76.1042 10.5347 76.2036 12.1338 74.9905L93.3609 13.3699C96.086 11.3026 100 13.2462 100 16.6667V16.4275C100 14.0265 98.6246 11.8378 96.4614 10.7962Z" fill="#0065A9"></path>
+                    <g filter="url(#filter0_d)">
+                      <path d="M96.4614 89.2038L75.8569 99.1245C73.4719 100.273 70.6217 99.7884 68.75 97.9167L1.29858 36.4169C-0.515693 34.7627 -0.513607 31.9063 1.30308 30.2548L6.81272 25.246C8.29793 23.8958 10.5347 23.7964 12.1338 25.0095L93.3609 86.6301C96.086 88.6974 100 86.7538 100 83.3334V83.5726C100 85.9735 98.6246 88.1622 96.4614 89.2038Z" fill="#007ACC"></path>
+                    </g>
+                    <g filter="url(#filter1_d)">
+                      <path d="M75.8578 99.1263C73.4721 100.274 70.6219 99.7885 68.75 97.9166C71.0564 100.223 75 98.5895 75 95.3278V4.67213C75 1.41039 71.0564 -0.223106 68.75 2.08329C70.6219 0.211402 73.4721 -0.273666 75.8578 0.873633L96.4587 10.7807C98.6234 11.8217 100 14.0112 100 16.4132V83.5871C100 85.9891 98.6234 88.1786 96.4586 89.2196L75.8578 99.1263Z" fill="#1F9CF0"></path>
+                    </g>
+                    <g style="mix-blend-mode: overlay" opacity="0.25">
+                      <path fill-rule="evenodd" clip-rule="evenodd" d="M70.8511 99.3171C72.4261 99.9306 74.2221 99.8913 75.8117 99.1264L96.4 89.2197C98.5634 88.1787 99.9392 85.9892 99.9392 83.5871V16.4133C99.9392 14.0112 98.5635 11.8217 96.4001 10.7807L75.8117 0.873695C73.7255 -0.13019 71.2838 0.115699 69.4527 1.44688C69.1912 1.63705 68.942 1.84937 68.7082 2.08335L29.2943 38.0414L12.1264 25.0096C10.5283 23.7964 8.29285 23.8959 6.80855 25.246L1.30225 30.2548C-0.513334 31.9064 -0.515415 34.7627 1.29775 36.4169L16.1863 50L1.29775 63.5832C-0.515415 65.2374 -0.513334 68.0937 1.30225 69.7452L6.80855 74.754C8.29285 76.1042 10.5283 76.2036 12.1264 74.9905L29.2943 61.9586L68.7082 97.9167C69.3317 98.5405 70.0638 99.0104 70.8511 99.3171ZM74.9544 27.2989L45.0483 50L74.9544 72.7012V27.2989Z" fill="url(#paint0_linear)"></path>
+                    </g>
+                  </g>
+                  <defs>
+                    <filter id="filter0_d" x="-8.39411" y="15.8291" width="116.727" height="92.2456" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+                      <feFlood flood-opacity="0" result="BackgroundImageFix"></feFlood>
+                      <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"></feColorMatrix>
+                      <feOffset></feOffset>
+                      <feGaussianBlur stdDeviation="4.16667"></feGaussianBlur>
+                      <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"></feColorMatrix>
+                      <feBlend mode="overlay" in2="BackgroundImageFix" result="effect1_dropShadow"></feBlend>
+                      <feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow" result="shape"></feBlend>
+                    </filter>
+                    <filter id="filter1_d" x="60.4167" y="-8.07558" width="47.9167" height="116.151" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+                      <feFlood flood-opacity="0" result="BackgroundImageFix"></feFlood>
+                      <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"></feColorMatrix>
+                      <feOffset></feOffset>
+                      <feGaussianBlur stdDeviation="4.16667"></feGaussianBlur>
+                      <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"></feColorMatrix>
+                      <feBlend mode="overlay" in2="BackgroundImageFix" result="effect1_dropShadow"></feBlend>
+                      <feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow" result="shape"></feBlend>
+                    </filter>
+                    <linearGradient id="paint0_linear" x1="49.9392" y1="0.257812" x2="49.9392" y2="99.7423" gradientUnits="userSpaceOnUse">
+                      <stop stop-color="white"></stop>
+                      <stop offset="1" stop-color="white" stop-opacity="0"></stop>
+                    </linearGradient>
+                  </defs>
+                </svg>
+                <span>VS Code</span>
+              </div>
+            </a>
+            <div tabindex="0" class="card install-target" onclick="showModal('gemini')">
+              <div class="target">
+                <svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+                  <path d="M16 2L19.5 12.5L30 16L19.5 19.5L16 30L12.5 19.5L2 16L12.5 12.5L16 2Z" fill="url(#gemini-gradient)"></path>
+                  <defs>
+                    <linearGradient id="gemini-gradient" x1="2" y1="2" x2="30" y2="30" gradientUnits="userSpaceOnUse">
+                      <stop offset="0%" stop-color="#4285F4"></stop>
+                      <stop offset="25%" stop-color="#34A853"></stop>
+                      <stop offset="50%" stop-color="#FBBC04"></stop>
+                      <stop offset="75%" stop-color="#EA4335"></stop>
+                      <stop offset="100%" stop-color="#4285F4"></stop>
+                    </linearGradient>
+                  </defs>
+                </svg>
+                <span>Gemini CLI</span>
+              </div>
+            </div>
+            <div tabindex="0" class="card install-target" onclick="showModal('codex')">
+              <div class="target">
+                <svg width="721" height="721" viewBox="0 0 721 721" fill="none" xmlns="http://www.w3.org/2000/svg">
+                  <g clip-path="url(#clip0_1637_2934)">
+                    <g clip-path="url(#clip1_1637_2934)">
+                      <path d="M304.246 294.611V249.028C304.246 245.189 305.687 242.309 309.044 240.392L400.692 187.612C413.167 180.415 428.042 177.058 443.394 177.058C500.971 177.058 537.44 221.682 537.44 269.182C537.44 272.54 537.44 276.379 536.959 280.218L441.954 224.558C436.197 221.201 430.437 221.201 424.68 224.558L304.246 294.611ZM518.245 472.145V363.224C518.245 356.505 515.364 351.707 509.608 348.349L389.174 278.296L428.519 255.743C431.877 253.826 434.757 253.826 438.115 255.743L529.762 308.523C556.154 323.879 573.905 356.505 573.905 388.171C573.905 424.636 552.315 458.225 518.245 472.141V472.145ZM275.937 376.182L236.592 353.152C233.235 351.235 231.794 348.354 231.794 344.515V238.956C231.794 187.617 271.139 148.749 324.4 148.749C344.555 148.749 363.264 155.468 379.102 167.463L284.578 222.164C278.822 225.521 275.942 230.319 275.942 237.039V376.186L275.937 376.182ZM360.626 425.122L304.246 393.455V326.283L360.626 294.616L417.002 326.283V393.455L360.626 425.122ZM396.852 570.989C376.698 570.989 357.989 564.27 342.151 552.276L436.674 497.574C442.431 494.217 445.311 489.419 445.311 482.699V343.552L485.138 366.582C488.495 368.499 489.936 371.379 489.936 375.219V480.778C489.936 532.117 450.109 570.985 396.852 570.985V570.989ZM283.134 463.99L191.486 411.211C165.094 395.854 147.343 363.229 147.343 331.562C147.343 294.616 169.415 261.509 203.48 247.593V356.991C203.48 363.71 206.361 368.508 212.117 371.866L332.074 441.437L292.729 463.99C289.372 465.907 286.491 465.907 283.134 463.99ZM277.859 542.68C223.639 542.68 183.813 501.895 183.813 451.514C183.813 447.675 184.294 443.836 184.771 439.997L279.295 494.698C285.051 498.056 290.812 498.056 296.568 494.698L417.002 425.127V470.71C417.002 474.549 415.562 477.429 412.204 479.346L320.557 532.126C308.081 539.323 293.206 542.68 277.854 542.68H277.859ZM396.852 599.776C454.911 599.776 503.37 558.513 514.41 503.812C568.149 489.896 602.696 439.515 602.696 388.176C602.696 354.587 588.303 321.962 562.392 298.45C564.791 288.373 566.231 278.296 566.231 268.224C566.231 199.611 510.571 148.267 446.274 148.267C433.322 148.267 420.846 150.184 408.37 154.505C386.775 133.392 357.026 119.958 324.4 119.958C266.342 119.958 217.883 161.22 206.843 215.921C153.104 229.837 118.557 280.218 118.557 331.557C118.557 365.146 132.95 397.771 158.861 421.283C156.462 431.36 155.022 441.437 155.022 451.51C155.022 520.123 210.682 571.466 274.978 571.466C287.931 571.466 300.407 569.549 312.883 565.228C334.473 586.341 364.222 599.776 396.852 599.776Z" fill="black"></path>
+                    </g>
+                  </g>
+                  <defs>
+                    <clipPath id="clip0_1637_2934">
+                      <rect width="720" height="720" fill="white" transform="translate(0.606934 0.0999756)"></rect>
+                    </clipPath>
+                    <clipPath id="clip1_1637_2934">
+                      <rect width="484.139" height="479.818" fill="white" transform="translate(118.557 119.958)"></rect>
+                    </clipPath>
+                  </defs>
+                </svg>
+                <span>Codex CLI</span>
+              </div>
+            </div>
+          </div>
+        </section>
+        <section class="available-tools container">
+          <header class="section-title">Available Tools</header>
+          <span class="tool-names container">
+            ${
+    (() => {
+      const maxVisibleTools = 30;
+      const visibleTools = toolNames.slice(0, maxVisibleTools);
+      const remainingTools = toolNames.length - visibleTools.length;
+      const toolBadges = visibleTools
+        .map((tool: { name: string; description: string }) =>
+          `<span class="badge">${tool.name}</span>`
+        )
+        .join("\n");
+      const remainingBadge = remainingTools > 0
+        ? `\n<span class="badge">AND ${remainingTools} MORE</span>`
+        : "";
+      return `${toolBadges}${remainingBadge}`;
+    })()
+  }
+          </span>
+        </section>
+        <section class="mcp-url container">
+          <header class="section-title">Server URL</header>
+          <div class="code-container card">
+            <button class="copy-button waiting" onclick="copyToClipboard('server-url', this)">
+              <svg class="icon icon-copy" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                <rect width="14" height="14" x="8" y="8" rx="2" ry="2"></rect>
+                <path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"></path>
+              </svg>
+              <svg class="icon icon-copy-success" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                <path d="m12 15 2 2 4-4"></path>
+                <rect width="14" height="14" x="8" y="8" rx="2" ry="2"></rect>
+                <path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"></path>
+              </svg>
+            </button>
+            <code class="code-snippet" id="server-url">${sseUrl}</code>
+          </div>
+        </section>
+        <section class="raw-configuration container">
+          <header class="section-title">Raw Configuration</header>
+          <div class="section-description">
+            If you have a client that's not listed above, access the raw MCP configuration below.
+          </div>
+          <div class="code-container card">
+            <button class="copy-button waiting" onclick="copyToClipboard('raw-config', this)">
+              <svg class="icon icon-copy" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                <rect width="14" height="14" x="8" y="8" rx="2" ry="2"></rect>
+                <path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"></path>
+              </svg>
+              <svg class="icon icon-copy-success" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                <path d="m12 15 2 2 4-4"></path>
+                <rect width="14" height="14" x="8" y="8" rx="2" ry="2"></rect>
+                <path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"></path>
+              </svg>
+            </button>
+            <code class="code-snippet language-json" id="raw-config">${
+    JSON.stringify({ flexprice: mcpConfigLocal }, null, 2)
+  }</code>
+          </div>
+        </section>
+      </div>
+    </main>
+    <!-- Modal Backdrop -->
+    <div class="modal-backdrop" id="modal-backdrop" onclick="hideAllModals()"></div>
+    <!-- Claude Code Modal -->
+    <div class="modal" id="claude-code-modal">
+      <button class="modal-close" onclick="hideModal('claude-code')">
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+          <path d="M18 6L6 18M6 6l12 12"/>
+        </svg>
+      </button>
+      <div class="content-slot">
+        <h1>Instructions</h1>
+        <ol>
+          <li>Ensure the Claude Code executable is available in your path</li>
+          <li>Execute the following snippet in your shell:</li>
+        </ol>
+        <div class="code-container card">
+          <button class="copy-button waiting" onclick="copyToClipboard('claude-cli-cmd', this)">
+            <svg class="icon icon-copy" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+              <rect width="14" height="14" x="8" y="8" rx="2" ry="2"></rect>
+              <path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"></path>
+            </svg>
+            <svg class="icon icon-copy-success" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+              <path d="m12 15 2 2 4-4"></path>
+              <rect width="14" height="14" x="8" y="8" rx="2" ry="2"></rect>
+              <path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"></path>
+            </svg>
+          </button>
+          <code class="code-snippet language-json" id="claude-cli-cmd">claude mcp add FlexPrice -- npx -y @flexprice/mcp-server start --server-url https://api.cloud.flexprice.io/v1 --api-key-auth YOUR_API_KEY</code>
+        </div>
+      </div>
+    </div>
+    <!-- Claude Desktop Modal -->
+    <div class="modal" id="claude-desktop-modal">
+      <button class="modal-close" onclick="hideModal('claude-desktop')">
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+          <path d="M18 6L6 18M6 6l12 12"/>
+        </svg>
+      </button>
+      <div class="content-slot">
+        <h1>Instructions</h1>
+        <p>One-click installation for Claude Desktop users</p>
+        <div class="instruction-item">
+          <a href="./mcp-server.mcpb" download="mcp-server.mcpb" class="action-button header-action" style="display: inline-flex; margin-bottom: 16px;">
+            📥 Download MCP Bundle
+          </a>
+        </div>
+        <p><strong>Instructions:</strong></p>
+        <ol>
+          <li>Download the MCP bundle file</li>
+          <li>Open Claude Desktop and go to Settings → Extensions</li>
+          <li>Drag the MCP bundle file into the Extensions page to install</li>
+        </ol>
+      </div>
+    </div>
+    <!-- Gemini CLI Modal -->
+    <div class="modal" id="gemini-modal">
+      <button class="modal-close" onclick="hideModal('gemini')">
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+          <path d="M18 6L6 18M6 6l12 12"/>
+        </svg>
+      </button>
+      <div class="content-slot">
+        <h1>Gemini CLI Installation</h1>
+        <p>Add the MCP server to your Gemini CLI configuration:</p>
+        <div class="code-container card">
+          <button class="copy-button waiting" onclick="copyToClipboard('gemini-config', this)">
+            <svg class="icon icon-copy" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+              <rect width="14" height="14" x="8" y="8" rx="2" ry="2"></rect>
+              <path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"></path>
+            </svg>
+            <svg class="icon icon-copy-success" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+              <path d="m12 15 2 2 4-4"></path>
+              <rect width="14" height="14" x="8" y="8" rx="2" ry="2"></rect>
+              <path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"></path>
+            </svg>
+          </button>
+          <code class="code-snippet language-json" id="gemini-config">gemini mcp add FlexPrice -- npx -y @flexprice/mcp-server start --server-url https://api.cloud.flexprice.io/v1 --api-key-auth YOUR_API_KEY</code>
+        </div>
+      </div>
+    </div>
+    <!-- Codex CLI Modal -->
+    <div class="modal" id="codex-modal">
+      <button class="modal-close" onclick="hideModal('codex')">
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+          <path d="M18 6L6 18M6 6l12 12"/>
+        </svg>
+      </button>
+      <div class="content-slot">
+        <h1>Codex CLI Installation</h1>
+        <p>Add the following to your Codex CLI configuration file:</p>
+        <div class="code-container card">
+          <button class="copy-button waiting" onclick="copyToClipboard('codex-config', this)">
+            <svg class="icon icon-copy" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+              <rect width="14" height="14" x="8" y="8" rx="2" ry="2"></rect>
+              <path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"></path>
+            </svg>
+            <svg class="icon icon-copy-success" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+              <path d="m12 15 2 2 4-4"></path>
+              <rect width="14" height="14" x="8" y="8" rx="2" ry="2"></rect>
+              <path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"></path>
+            </svg>
+          </button>
+          <code class="code-snippet language-toml" id="codex-config">${codexConfig}</code>
+        </div>
+      </div>
+    </div>
+    <!-- Footer -->
+    <footer>
+      <a href="https://speakeasy.com" target="_blank" class="speakeasy-badge">
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+          <circle cx="12" cy="12" r="10"/>
+          <path d="M8 12h8"/>
+        </svg>
+        speakeasy
+      </a>
+    </footer>
+    <script>
+      function copyToClipboard(elementId, button) {
+        const element = document.getElementById(elementId);
+        const text = element.textContent;
+        navigator.clipboard.writeText(text).then(function() {
+          button.classList.remove('waiting');
+          button.classList.add('success');
+          setTimeout(function() {
+            button.classList.remove('success');
+            button.classList.add('waiting');
+          }, 2000);
+        }).catch(function(err) {
+          console.error('Failed to copy text: ', err);
+        });
+      }
+      function toggleDropdownMenu() {
+        const menu = document.getElementById('popover-menu');
+        menu.classList.toggle('hidden');
+      }
+      // Close popover when clicking outside
+      document.addEventListener('click', function(event) {
+        const popover = document.querySelector('.popover');
+        if (!popover.contains(event.target)) {
+          document.getElementById('popover-menu').classList.add('hidden');
+        }
+      });
+      function showModal(type) {
+        document.getElementById('modal-backdrop').classList.add('active');
+        document.getElementById(type + '-modal').classList.add('active');
+        document.body.style.overflow = 'hidden';
+        // Close the popover menu
+        document.getElementById('popover-menu').classList.add('hidden');
+      }
+      function hideModal(type) {
+        document.getElementById(type + '-modal').classList.remove('active');
+        document.getElementById('modal-backdrop').classList.remove('active');
+        document.body.style.overflow = '';
+      }
+      function hideAllModals() {
+        document.querySelectorAll('.modal.active').forEach(function(modal) {
+          modal.classList.remove('active');
+        });
+        document.getElementById('modal-backdrop').classList.remove('active');
+        document.body.style.overflow = '';
+      }
+      // Close modal on escape key
+      document.addEventListener('keydown', function(event) {
+        if (event.key === 'Escape') {
+          hideAllModals();
+        }
+      });
+    </script>
+</body>
+</html>`;
+}