Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1"> | |
| <title>Modelflare Blog | Modelflare Blog</title> | |
| <meta name="description" content="Engineering notes and setup guides for Modelflare and Castaly."><meta property="og:image" content="images/cover.jpg"> | |
| <style> | |
| :root{--bg:#0b1020;--card:#121a2f;--text:#e8ecf7;--muted:#9aa6c2;--accent:#8b5cf6;--accent2:#ec4899;--border:rgba(255,255,255,.08)} | |
| *{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.65} | |
| .wrap{max-width:860px;margin:0 auto;padding:28px 18px 64px} | |
| header.top{display:flex;flex-wrap:wrap;gap:14px;align-items:center;justify-content:space-between;margin-bottom:28px;font-size:14px} | |
| header.top a{color:var(--muted);text-decoration:none}header.top a:hover{color:#fff} | |
| header.top .brand{color:#fff;font-weight:700;font-size:16px} | |
| header.top nav{display:flex;flex-wrap:wrap;gap:14px} | |
| h1{font-size:clamp(26px,4.6vw,38px);line-height:1.2;margin:0 0 12px} | |
| h2{font-size:22px;margin:36px 0 10px}h3{font-size:17px;margin:24px 0 8px;color:#d6c7ff} | |
| p,li{color:#cfd6e8}a{color:#c4b5fd} | |
| .lead{color:var(--muted);font-size:17px} | |
| article img{max-width:100%;height:auto;border-radius:12px;border:1px solid var(--border);display:block;margin:18px auto 6px} | |
| article p em:only-child{display:block;text-align:center;color:var(--muted);font-size:14px} | |
| pre{background:#070b16;border:1px solid var(--border);border-radius:12px;padding:0;overflow-x:auto} | |
| pre code.hljs{background:transparent;padding:14px 16px;font-size:13.5px;line-height:1.55} | |
| code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.92em} | |
| p code,li code,td code{background:rgba(139,92,246,.14);padding:1px 5px;border-radius:5px} | |
| table{border-collapse:collapse;width:100%;font-size:14px;margin:14px 0;display:block;overflow-x:auto} | |
| th,td{border:1px solid var(--border);padding:8px 10px;text-align:left;vertical-align:top}th{background:var(--card)} | |
| hr{border:0;border-top:1px solid var(--border);margin:32px 0} | |
| .list{display:grid;gap:14px} | |
| .card{display:flex;gap:16px;background:var(--card);border:1px solid var(--border);border-radius:16px;padding:18px;text-decoration:none;color:inherit} | |
| .card:hover{border-color:rgba(139,92,246,.5)} | |
| .card img{width:200px;height:105px;object-fit:cover;border-radius:10px;flex-shrink:0} | |
| .card h2{font-size:18px;margin:0 0 6px;color:#fff}.card p{margin:0;color:var(--muted);font-size:14px} | |
| footer{margin-top:48px;padding-top:18px;border-top:1px solid var(--border);color:var(--muted);font-size:13px} | |
| footer a{color:var(--muted)} | |
| @media(max-width:600px){.card{flex-direction:column}.card img{width:100%;height:auto;aspect-ratio:1200/630}} | |
| </style> | |
| <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@highlightjs/cdn-assets@11.9.0/styles/github-dark.min.css"><script src="https://cdn.jsdelivr.net/npm/@highlightjs/cdn-assets@11.9.0/highlight.min.js"></script><script>document.addEventListener("DOMContentLoaded",()=>hljs.highlightAll());</script> | |
| </head> | |
| <body><div class="wrap"><header class="top"><a class="brand" href="index.html">Modelflare Blog</a><nav><a href="https://modelflare.dev/?utm_source=huggingface&utm_medium=space&utm_campaign=blog">modelflare.dev</a><a href="https://docs.modelflare.dev/?utm_source=huggingface&utm_medium=space&utm_campaign=blog">Docs</a><a href="https://castaly.modelflare.dev/?utm_source=huggingface&utm_medium=space&utm_campaign=blog">Castaly</a><a href="https://huggingface.co/Modelflare" target="_top">Hugging Face org</a></nav></header> | |
| <h1>Modelflare Blog</h1><p class="lead">Engineering notes and setup guides for Modelflare, the API gateway for text, image, and video models, and for Castaly, the studio built on it.</p><div class="list"><a class="card" href="introducing-modelflare.html"><img src="images/introducing-modelflare-cover.jpg" alt="Diagram: one entry point routed to several model backends"><div><h2>Introducing Modelflare: one API key for text, image, and video models</h2><p>Modelflare is an API gateway that serves text, image, and video models behind one key, with OpenAI-compatible, Anthropic, and Gemini endpoints and per-request cost records.</p></div></a><a class="card" href="openai-sdk-one-line.html"><img src="images/openai-sdk-one-line-cover.jpg" alt="Diagram: a request passing through a compatible interface"><div><h2>Switching the OpenAI SDK to Modelflare (Python, JavaScript, curl)</h2><p>Existing OpenAI SDK code works with Modelflare after changing the base URL to <code>https://modelflare.dev/v1</code> and supplying a Modelflare key.</p></div></a><a class="card" href="coding-agents-modelflare.html"><img src="images/coding-agents-modelflare-cover.jpg" alt="Diagram: a coding agent connected through a gateway to several services"><div><h2>Configuring coding agents with Modelflare: Claude Code, Codex, OpenCode, Gemini CLI, CC-Switch, and Grok Build</h2><p>Claude Code connects through Anthropic Messages at <code>https://modelflare.dev</code>, Codex, OpenCode, and Grok Build through <code>https://modelflare.dev/v1</code>, and Gemini CLI through <code>GOOGLE_GEMINI_BASE_URL</code>. All of them use the same Modelflare key.</p></div></a><a class="card" href="api-recipes-streaming-fallback.html"><img src="images/api-recipes-streaming-fallback-cover.jpg" alt="Diagram: parallel routes converging with fallback paths"><div><h2>Modelflare API recipes: streaming, routing fallback, images, and async video</h2><p>Request examples for streaming chat, gateway-side fallback with group failover and Smart API Keys, client-side model fallback, image generation, and the asynchronous video task flow.</p></div></a><a class="card" href="smart-api-key.html"><img src="images/smart-api-key-cover.jpg" alt="Illustration: a key module feeding a single route"><div><h2>Smart API Keys: one key for every model your account can use</h2><p>A Smart API Key is bound to <code>auto</code> instead of a fixed routing group. It resolves a group on each request and orders candidates by a routing strategy that you choose.</p></div></a><a class="card" href="model-groups-and-failover.html"><img src="images/model-groups-and-failover-cover.jpg" alt="Illustration: parallel routes converging on one output"><div><h2>Model groups and failover: how Modelflare routes a request</h2><p>Every request depends on two identifiers: the exact model ID in the body and the routing group on the key. Ordinary keys add ordered fallback groups that take over when a route cannot serve the request.</p></div></a><a class="card" href="usage-and-cost-records.html"><img src="images/usage-and-cost-records-cover.jpg" alt="Illustration: a balance weighing request units"><div><h2>Usage and cost records: reading what each request cost</h2><p>Modelflare records token usage and cost for every request. This guide covers where those records live, how billing units differ between text, image, and video, the cache hit guarantee, and how long logs are kept.</p></div></a><a class="card" href="media-skill-for-agents.html"><img src="images/media-skill-for-agents-cover.jpg" alt="Illustration: media inputs feeding a processing unit and a film strip"><div><h2>The Modelflare Media Skill: image and video generation from coding agents</h2><p>The Media Skill is an installable SKILL.md package. With it, Claude Code, Codex, and other skill-aware agents can choose a Modelflare image or video model, quote its price, send the request, and save the result.</p></div></a><a class="card" href="castaly-image-video-studio.html"><img src="images/cover.jpg" alt="Castaly cover: orbital ring city"><div><h2>Castaly: an AI video and image studio built on Modelflare</h2><p>Castaly is a browser studio for AI image and video generation. Models are compared by specification and price, generations are paid from a wallet shared with Modelflare, and every model is also available through the Modelflare API.</p></div></a></div> | |
| <footer>Modelflare on Hugging Face: <a href="https://huggingface.co/spaces/Modelflare/start" target="_top">start</a> 路 <a href="https://huggingface.co/spaces/Modelflare/openai-sdk" target="_top">openai-sdk</a> 路 <a href="https://huggingface.co/spaces/Modelflare/coding-agents" target="_top">coding-agents</a> 路 <a href="https://huggingface.co/spaces/Modelflare/api-recipes" target="_top">api-recipes</a> 路 <a href="https://huggingface.co/datasets/Modelflare/api-examples" target="_top">api-examples dataset</a><br>Business: <a href="mailto:business@modelflare.dev">business@modelflare.dev</a></footer></div></body> | |
| </html> | |