index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Coding Agents → Modelflare</title>
  <meta name="description" content="Connect Codex, Claude Code, and Gemini CLI to Modelflare. Short steps, env snippets, deep links to official docs." />
  <style>
    :root {
      --bg:#0b1020; --card:#121a2f; --text:#e8ecf7; --muted:#9aa6c2;
      --accent:#8b5cf6; --accent2:#ec4899; --border:rgba(255,255,255,.08); --ok:#34d399; --warn:#fbbf24;
    }
    *{box-sizing:border-box}
    body{
      margin:0;font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
      background:radial-gradient(1200px 600px at 10% -10%,#2a1850 0%,transparent 50%),
                 radial-gradient(900px 500px at 100% 0%,#3b0f2e 0%,transparent 45%),var(--bg);
      color:var(--text);min-height:100vh;line-height:1.55;
    }
    .wrap{max-width:880px;margin:0 auto;padding:40px 18px 64px}
    .lang{display:flex;gap:8px;margin-bottom:16px}
    .lang button{background:transparent;border:1px solid var(--border);color:var(--muted);border-radius:999px;padding:6px 12px;cursor:pointer}
    .lang button.on{color:#fff;border-color:rgba(139,92,246,.5);background:rgba(139,92,246,.2)}
    .badge{display:inline-flex;gap:8px;align-items:center;padding:6px 12px;border-radius:999px;background:rgba(139,92,246,.15);border:1px solid rgba(139,92,246,.35);color:#d6c7ff;font-size:13px;margin-bottom:18px}
    h1{font-size:clamp(28px,5vw,40px);line-height:1.15;margin:0 0 12px}
    .lead{color:var(--muted);font-size:17px;margin:0 0 24px;max-width:680px}
    .cta{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:28px}
    a.btn{display:inline-flex;align-items:center;padding:12px 16px;border-radius:12px;text-decoration:none;font-weight:600}
    a.primary{background:linear-gradient(135deg,var(--accent),var(--accent2));color:#fff}
    a.ghost{border:1px solid var(--border);color:var(--text)}
    .grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px;margin-bottom:28px}
    .card{background:var(--card);border:1px solid var(--border);border-radius:16px;padding:18px}
    .card h3{margin:0 0 8px;font-size:16px}
    .card p{margin:0;color:var(--muted);font-size:14px}
    h2{font-size:18px;margin:28px 0 10px}
    h3.sec{font-size:15px;margin:18px 0 8px;color:#d6c7ff}
    ol,ul{color:var(--muted);padding-left:1.2em}
    ol li,ul li{margin:6px 0}
    pre{background:#070b16;border:1px solid var(--border);border-radius:14px;padding:14px 16px;overflow:auto;font-size:12.5px;color:#d7def0;position:relative}
    .copy{position:absolute;top:8px;right:8px;font-size:11px;border:1px solid var(--border);background:#121a2f;color:var(--muted);border-radius:8px;padding:4px 8px;cursor:pointer}
    .foot{margin-top:24px;color:var(--muted);font-size:13px}
    .note{background:var(--card);border:1px solid var(--border);border-radius:14px;padding:14px 16px;color:var(--muted);font-size:14px;margin-top:16px}
    .note strong{color:var(--ok)}
    .tip{border-left:3px solid var(--warn);padding-left:12px;margin:12px 0;color:var(--muted);font-size:14px}
    table{width:100%;border-collapse:collapse;font-size:13px;margin:12px 0 20px}
    th,td{border:1px solid var(--border);padding:10px 12px;text-align:left;vertical-align:top}
    th{background:rgba(139,92,246,.12);color:#d6c7ff;font-weight:600}
    td{color:var(--muted)}
    code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
    .hidden{display:none}
    a{color:#c4b5fd}

  </style>
</head>
<body>
  <div class="wrap">

    <section id="en">
      <div class="badge">Coding Agents × Modelflare</div>
      <h1>Codex / Claude Code / Gemini CLI → Modelflare</h1>
      <p class="lead">One API key, pick the right base URL per client. Short steps and env snippets below; full installers and troubleshooting live in the official docs.</p>
      <div class="cta">
        <a class="btn primary" href="https://modelflare.dev/?utm_source=huggingface&utm_medium=space&utm_campaign=coding_agents" target="_blank" rel="noopener">Open Console → Get Key</a>
        <a class="btn ghost" href="https://docs.modelflare.dev/guides/endpoints/?utm_source=huggingface&utm_medium=space&utm_campaign=coding_agents" target="_blank" rel="noopener">Endpoint picker</a>
        <a class="btn ghost" href="https://huggingface.co/spaces/Modelflare/openai-sdk" target="_blank" rel="noopener">OpenAI SDK guide</a>
        <a class="btn ghost" href="https://huggingface.co/spaces/Modelflare/start" target="_blank" rel="noopener">Start landing</a>
        <a class="btn ghost" href="https://huggingface.co/spaces/Modelflare/blog" target="_blank" rel="noopener">Blog</a>
        <a class="btn ghost" href="https://huggingface.co/spaces/Modelflare/api-recipes" target="_blank" rel="noopener">API Recipes</a>
      </div>
      <div class="tip"><strong>Important:</strong> model ids must be enabled on the key’s <strong>group</strong>. Otherwise you get <code>model_not_found</code> / unauthorized. The live catalog is the console — do not assume sample ids below are enabled for your account.</div>

      <h2>1) Codex (Responses API)</h2>
      <ol>
        <li>Create a key whose group can access <code>gpt-5.6-sol</code> (or another Responses model on your group).</li>
        <li>Installer: <code>curl -fsSL https://modelflare.dev/install/codex.sh | sh</code>; or write <code>~/.codex/config.toml</code> + <code>auth.json</code> by hand.</li>
        <li><code>base_url</code> must be <code>https://modelflare.dev/v1</code> with <code>wire_api = "responses"</code>.</li>
      </ol>
      <h3 class="sec">~/.codex/config.toml</h3>
      <pre><button class="copy" type="button">Copy</button><code>cli_auth_credentials_store = &quot;file&quot;
model_provider = &quot;modelflare&quot;
model = &quot;gpt-5.6-sol&quot;
model_reasoning_effort = &quot;xhigh&quot;
disable_response_storage = true
model_supports_reasoning_summaries = true

[model_providers.modelflare]
name = &quot;Modelflare&quot;
base_url = &quot;https://modelflare.dev/v1&quot;
wire_api = &quot;responses&quot;
requires_openai_auth = true</code></pre>
      <p>and <code>~/.codex/auth.json</code>:</p>
      <pre><button class="copy" type="button">Copy</button><code>{
  &quot;auth_mode&quot;: &quot;apikey&quot;,
  &quot;OPENAI_API_KEY&quot;: &quot;YOUR_MODELFLARE_API_KEY&quot;
}</code></pre>
      <p class="foot">Full guide: <a href="https://docs.modelflare.dev/guides/clients/codex/?utm_source=huggingface&utm_medium=space&utm_campaign=coding_agents" target="_blank" rel="noopener">docs → Codex</a></p>

      <h2>2) Claude Code (Anthropic Messages)</h2>
      <ol>
        <li>Create a key with access to <code>claude-opus-4-8</code> / <code>claude-sonnet-5</code> (or Claude models on your group).</li>
        <li>Installer: <code>curl -fsSL https://modelflare.dev/install/claude.sh | sh</code>; or write <code>~/.claude/settings.json</code>.</li>
        <li><strong>Note:</strong> <code>ANTHROPIC_BASE_URL</code> is the site origin <code>https://modelflare.dev</code> (<strong>not</strong> <code>/v1</code>). The CLI appends the Messages path.</li>
      </ol>
      <pre><button class="copy" type="button">Copy</button><code>{
  &quot;env&quot;: {
    &quot;ANTHROPIC_BASE_URL&quot;: &quot;https://modelflare.dev&quot;,
    &quot;ANTHROPIC_AUTH_TOKEN&quot;: &quot;YOUR_MODELFLARE_API_KEY&quot;,
    &quot;ANTHROPIC_MODEL&quot;: &quot;claude-opus-4-8&quot;,
    &quot;ANTHROPIC_DEFAULT_OPUS_MODEL&quot;: &quot;claude-opus-4-8&quot;,
    &quot;ANTHROPIC_DEFAULT_SONNET_MODEL&quot;: &quot;claude-sonnet-5&quot;,
    &quot;ANTHROPIC_DEFAULT_HAIKU_MODEL&quot;: &quot;claude-sonnet-5&quot;
  }
}</code></pre>
      <p class="foot">Full guide: <a href="https://docs.modelflare.dev/guides/clients/claude-code/?utm_source=huggingface&utm_medium=space&utm_campaign=coding_agents" target="_blank" rel="noopener">docs → Claude Code</a></p>

      <h2>3) Gemini CLI (native Gemini)</h2>
      <ol>
        <li><code>npm install -g @google/gemini-cli@latest</code></li>
        <li>Set <code>GEMINI_API_KEY</code> + <code>GOOGLE_GEMINI_BASE_URL=https://modelflare.dev</code></li>
        <li><code>gemini --model YOUR_MODEL_ID</code> (pick an id from the console catalog)</li>
      </ol>
      <pre><button class="copy" type="button">Copy</button><code>export GEMINI_API_KEY="YOUR_MODELFLARE_API_KEY"
export GOOGLE_GEMINI_BASE_URL="https://modelflare.dev"
gemini --model YOUR_MODEL_ID</code></pre>
      <p class="foot">Full guide: <a href="https://docs.modelflare.dev/guides/clients/gemini-cli/?utm_source=huggingface&utm_medium=space&utm_campaign=coding_agents" target="_blank" rel="noopener">docs → Gemini CLI</a></p>

      <div class="note">
        <strong>Prefer the OpenAI SDK?</strong> See
        <a href="https://huggingface.co/spaces/Modelflare/openai-sdk">openai-sdk</a> and
        <a href="https://huggingface.co/spaces/Modelflare/api-recipes">api-recipes</a>.
        Gradio Chat Demo needs HF PRO (upcoming); use console + API for now.
      </div>
    </section>
  </div>

  <script>
    document.querySelectorAll('pre .copy').forEach(btn=>{
      btn.addEventListener('click',async()=>{
        const code=btn.parentElement.querySelector('code').innerText;
        try{await navigator.clipboard.writeText(code);const t=btn.textContent;btn.textContent='Copied';setTimeout(()=>btn.textContent=t,1200)}catch(_){}
      });
    });
  </script>

</body>
</html>