PageSourceSearch

https://www.svgai.org/docs

html svgai.org collected 2026-10-04 08:35:58 UTC 157,575 bytes, 106 lines download raw bytes

1<!DOCTYPE html><!--ga0SI_hi0cZMytOlIVVM_--><html lang="en" class="__variable_fed136"><head><meta charSet="utf-8"/><meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=5"/><link rel="preload" href="/_next/static/media/904be59b21bd51cb-s.p.woff2?dpl=dpl_CQhZ8Y4EW7frp1M22TRBFWL627Ps" as="font" crossorigin="" type="font/woff2"/><link rel="stylesheet" href="/_next/static/css/bb2f0d8a91d14310.css?dpl=dpl_CQhZ8Y4EW7frp1M22TRBFWL627Ps" data-precedence="next"/><link rel="stylesheet" href="/_next/static/css/5881a33f3d38c51c.css?dpl=dpl_CQhZ8Y4EW7frp1M22TRBFWL627Ps" data-precedence="next"/><link rel="preload" as="script" fetchPriority="low" href="/_next/static/chunks/runtime-cb15f00cbb312227.js?dpl=dpl_CQhZ8Y4EW7frp1M22TRBFWL627Ps"/>
1<script src="/_next/static/chunks/5333-0c311fd614ac2ac3.js?dpl=dpl_CQhZ8Y4EW7frp1M22TRBFWL627Ps" async=""></script>
1<script src="/_next/static/chunks/main-app-59713c2830eb57f1.js?dpl=dpl_CQhZ8Y4EW7frp1M22TRBFWL627Ps" async=""></script>
1<script src="/_next/static/chunks/radix-vendor-3009f6d361c8a98e.js?dpl=dpl_CQhZ8Y4EW7frp1M22TRBFWL627Ps" async=""></script>
1<script src="/_next/static/chunks/supabase-vendor-2f0306d498af61e1.js?dpl=dpl_CQhZ8Y4EW7frp1M22TRBFWL627Ps" async=""></script>
1<script src="/_next/static/chunks/6874-414075bb21e16c80.js?dpl=dpl_CQhZ8Y4EW7frp1M22TRBFWL627Ps" async=""></script>
1<script src="/_next/static/chunks/4026-358ce823383b6f2b.js?dpl=dpl_CQhZ8Y4EW7frp1M22TRBFWL627Ps" async=""></script>
1<script src="/_next/static/chunks/6424-529c9cfbfcf784f1.js?dpl=dpl_CQhZ8Y4EW7frp1M22TRBFWL627Ps" async=""></script>
1<script src="/_next/static/chunks/4134-18351f2dad14e83e.js?dpl=dpl_CQhZ8Y4EW7frp1M22TRBFWL627Ps" async=""></script>
1<script src="/_next/static/chunks/6671-50f9186009556c9d.js?dpl=dpl_CQhZ8Y4EW7frp1M22TRBFWL627Ps" async=""></script>
1<script src="/_next/static/chunks/7651-a1bbf35361e04f93.js?dpl=dpl_CQhZ8Y4EW7frp1M22TRBFWL627Ps" async=""></script>
1<script src="/_next/static/chunks/5511-b0ec78b9e31519dd.js?dpl=dpl_CQhZ8Y4EW7frp1M22TRBFWL627Ps" async=""></script>
1<script src="/_next/static/chunks/4386-2336225232e457bf.js?dpl=dpl_CQhZ8Y4EW7frp1M22TRBFWL627Ps" async=""></script>
1<script src="/_next/static/chunks/8507-78e68a657eca8a06.js?dpl=dpl_CQhZ8Y4EW7frp1M22TRBFWL627Ps" async=""></script>
1<script src="/_next/static/chunks/9039-70fc9756df5ca513.js?dpl=dpl_CQhZ8Y4EW7frp1M22TRBFWL627Ps" async=""></script>
1<script src="/_next/static/chunks/6835-15c0e621cd170a40.js?dpl=dpl_CQhZ8Y4EW7frp1M22TRBFWL627Ps" async=""></script>
1<script src="/_next/static/chunks/5138-b1a384ab2f900d33.js?dpl=dpl_CQhZ8Y4EW7frp1M22TRBFWL627Ps" async=""></script>
1<script src="/_next/static/chunks/1620-9ba8031b03d33110.js?dpl=dpl_CQhZ8Y4EW7frp1M22TRBFWL627Ps" async=""></script>
1<script src="/_next/static/chunks/4693-dd7f5164af7dd305.js?dpl=dpl_CQhZ8Y4EW7frp1M22TRBFWL627Ps" async=""></script>
1<script src="/_next/static/chunks/app/layout-a89010dcd425a718.js?dpl=dpl_CQhZ8Y4EW7frp1M22TRBFWL627Ps" async=""></script>
1<script src="/_next/static/chunks/app/error-c87d8a20314c891a.js?dpl=dpl_CQhZ8Y4EW7frp1M22TRBFWL627Ps" async=""></script>
1<script src="/_next/static/chunks/app/not-found-54cded897eae35c3.js?dpl=dpl_CQhZ8Y4EW7frp1M22TRBFWL627Ps" async=""></script>
1<script src="/_next/static/chunks/app/docs/page-7d99a1400e88a1f9.js?dpl=dpl_CQhZ8Y4EW7frp1M22TRBFWL627Ps" async=""></script>
1<link rel="preload" href="https://datafa.st/js/script.js" as="script"/><link rel="preload" href="https://www.googletagmanager.com/gtag/js?id=G-KMK5TEJH2Q" as="script"/><link rel="preconnect" href="https://svgai.supabase.co"/><link rel="dns-prefetch" href="https://vitals.vercel-insights.com"/><link rel="dns-prefetch" href="https://va.vercel-scripts.com"/><link rel="icon" href="/favicon-192x192.png" type="image/png" sizes="192x192"/><link rel="icon" href="/favicon-96x96.png" type="image/png" sizes="96x96"/><link rel="icon" href="/favicon.svg" type="image/svg+xml"/><link rel="alternate icon" href="/favicon.ico"/><link rel="apple-touch-icon" href="/apple-touch-icon.png" sizes="180x180"/><link rel="manifest" href="/site.webmanifest"/><meta property="og:site_name" content="SVG AI"/><meta name="next-size-adjust" content=""/><meta name="theme-color" content="#FFFFFF"/><title>SVG AI API &amp; MCP Server — Generate and Vectorize SVGs Programmatically | SVG AI</title><meta name="description" content="REST API and MCP server for SVG AI. Generate SVGs from text or image references, or trace raster artwork into vector paths. Connect from AI assistants or your own code."/><meta name="application-name" content="SVG AI"/><meta name="author" content="SVG AI Team"/><meta name="generator" content="SVG AI"/><meta name="referrer" content="origin-when-cross-origin"/><meta name="robots" content="index, follow"/><meta name="googlebot" content="index, follow, max-video-preview:-1, max-image-preview:large, max-snippet:-1"/><link rel="canonical" href="https://www.svgai.org/docs"/><meta property="og:title" content="SVG AI API &amp; MCP Server — Generate and Vectorize SVGs Programmatically"/><meta property="og:description" content="REST API and MCP server for SVG AI. Generate SVGs from text or image references, or trace raster artwork into vector paths. Connect from AI assistants or your own code."/><meta property="og:url" content="https://www.svgai.org/docs"/><meta property="og:site_name" content="SVG AI"/><meta property="og:locale" content="en_US"/><meta property="og:image" content="https://www.svgai.org/og-home.jpg"/><meta property="og:image:width" content="1200"/><meta property="og:image:height" content="630"/><meta property="og:image:alt" content="SVG AI API &amp; MCP Server — Generate and Vectorize SVGs Programmatically"/><meta property="og:type" content="website"/><meta name="twitter:card" content="summary_large_image"/><meta name="twitter:creator" content="@svg_ai"/><meta name="twitter:title" content="SVG AI API &amp; MCP Server — Generate and Vectorize SVGs Programmatically"/><meta name="twitter:description" content="REST API and MCP server for SVG AI. Generate SVGs from text or image references, or trace raster artwork into vector paths. Connect from AI assistants or your own code."/><meta name="twitter:image" content="https://www.svgai.org/og-home.jpg"/><link rel="shortcut icon" href="/favicon-192x192.png"/><link rel="icon" href="/favicon-192x192.png" sizes="192x192" type="image/png"/><link rel="icon" href="/favicon-96x96.png" sizes="96x96" type="image/png"/><link rel="icon" href="/favicon-48x48.png" sizes="48x48" type="image/png"/><link rel="icon" href="/favicon-32x32.png" sizes="32x32" type="image/png"/><link rel="icon" href="/favicon-16x16.png" sizes="16x16" type="image/png"/><link rel="icon" href="/favicon.ico" type="image/x-icon"/><link rel="icon" href="/favicon.svg" type="image/svg+xml"/><link rel="apple-touch-icon" href="/apple-touch-icon.png" sizes="180x180" type="image/png"/><style>
2          * { margin: 0; padding: 0; box-sizing: border-box; }
3          :root { 
4            --font-montserrat: Montserrat, system-ui, -apple-system, sans-serif;
5            font-synthesis: none;
6            text-rendering: optimizeLegibility;
7            -webkit-font-smoothing: antialiased;
8            -moz-osx-font-smoothing: grayscale;
9          }
10          html { font-family: var(--font-montserrat); }
11          body { background: #fff; color: #111827; line-height: 1.5; }
12          .container { max-width: 1200px; margin: 0 auto; padding: 0 1rem; }
13          .text-center { text-align: center; }
14          .font-bold { font-weight: 700; }
15          /* Prevent FOUC - Use 0.01 to avoid Lighthouse NO_LCP bug */
16          .opacity-0 { opacity: 0.01; }
17          .opacity-100 { opacity: 1; }
18          .mb-4 { margin-bottom: 1rem; }
19          .mb-6 { margin-bottom: 1.5rem; }
20          .py-6 { padding-top: 1.5rem; padding-bottom: 1.5rem; }
21          .px-4 { padding-left: 1rem; padding-right: 1rem; }
22          .bg-white { background: white; }
23          /* Critical styles for hero section */
24          .text-4xl { font-size: 2.25rem; line-height: 2.5rem; }
25          .text-5xl { font-size: 3rem; line-height: 1; }
26          .text-6xl { font-size: 3.75rem; line-height: 1; }
27          .text-black { color: #000; }
28          .bg-gradient-to-r { background-image: linear-gradient(to right, var(--tw-gradient-stops)); }
29          .from-[#FF7043] { --tw-gradient-from: #FF7043; }
30          .to-[#FFA726] { --tw-gradient-to: #FFA726; }
31          .text-transparent { color: transparent; }
32          .bg-clip-text { -webkit-background-clip: text; background-clip: text; }
33          .rounded-lg { border-radius: 0.5rem; }
34          .shadow-sm { box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05); }
35          .border { border-width: 1px; }
36          .border-gray-100 { border-color: #f3f4f6; }
37          /* Ensure hero section is immediately visible */
38          section { opacity: 1 !important; animation: none !important; }
39          .rounded-lg { border-radius: 0.5rem; }
40          .shadow-sm { box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05); }
41          .border { border: 1px solid #e5e7eb; }
42          .border-gray-100 { border-color: #f3f4f6; }
43          .text-gray-900 { color: #111827; }
44          .text-gray-600 { color: #4b5563; }
45          .text-3xl { font-size: 1.875rem; line-height: 2.25rem; }
46          .text-lg { font-size: 1.125rem; line-height: 1.75rem; }
47          .min-h-screen { min-height: 100vh; }
48          .flex { display: flex; }
49          /* .flex-col is deliberately NOT redefined here: this inline block is
50             injected after the Tailwind stylesheet, so an equal-specificity copy
51             of it beat every responsive .sm|md|lg:flex-row and pinned ~56 rows
52             across the site to a column at all widths. */
53          .flex-1 { flex: 1 1 0%; }
54          @media (min-width: 768px) {
55            .md\:text-5xl { font-size: 3rem; line-height: 1; }
56            .md\:py-10 { padding-top: 2.5rem; padding-bottom: 2.5rem; }
57          }
58        </style>
58<script src="/_next/static/chunks/polyfills-42372ed130431b0a.js?dpl=dpl_CQhZ8Y4EW7frp1M22TRBFWL627Ps" noModule=""></script>
58</head><body class="font-sans overflow-x-hidden"><div hidden=""><!--$--><!--/$--></div><!--$!--><template data-dgst="BAILOUT_TO_CLIENT_SIDE_RENDERING"></template><!--/$--><div class="flex flex-col min-h-screen"><header class="sticky top-0 z-40 w-full border-b bg-white/95 backdrop-blur h-16 sm:h-20"><div class="mx-auto flex h-16 w-full max-w-[1680px] items-center justify-between px-5 py-2 sm:h-20 sm:px-8 xl:px-14 min-[2200px]:max-w-[2200px] min-[2200px]:px-16 min-[3200px]:max-w-[2500px] [@media_(max-height:430px)_and_(orientation:landscape)]:!h-16"><a href="/" class="flex items-center -ml-1 sm:-ml-2" aria-label="SVG AI Home"><div class="sm:hidden"><div class="flex items-center gap-2 "><svg xmlns="http://www.w3.org/2000/svg" width="94" height="30" viewBox="35 65 133 38" role="img" aria-label="SVG AI" class="flex-shrink-0"><path d="m45 65 2 7 8 2-8 2-2 7-2-7-8-2 8-2Z" fill="#FF7043"></path><text x="60" y="95" font-family="Montserrat, sans-serif" font-weight="700" font-size="30" fill="#4E342E">SVG<tspan dx="8" fill="#FF7043">AI</tspan></text></svg></div></div><div class="hidden sm:block"><div class="flex items-center gap-2 "><svg xmlns="http://www.w3.org/2000/svg" width="150" height="46" viewBox="35 65 133 38" role="img" aria-label="SVG AI" class="flex-shrink-0"><path d="m45 65 2 7 8 2-8 2-2 7-2-7-8-2 8-2Z" fill="#FF7043"></path><text x="60" y="95" font-family="Montserrat, sans-serif" font-weight="700" font-size="30" fill="#4E342E">SVG<tspan dx="8" fill="#FF7043">AI</tspan></text></svg></div></div></a><nav class="hidden items-center gap-6 text-sm font-medium text-slate-700 md:flex" aria-label="Primary navigation"><a href="/tools" class="hover:text-[#FF7043]">Tools</a><a href="/pricing" class="hover:text-[#FF7043]">Pricing</a><a href="/blog" class="hover:text-[#FF7043]">Blog</a><a href="/docs" class="hover:text-[#FF7043]">API</a></nav><div class="flex items-center gap-3 text-sm font-medium"><a href="/login" class="hidden text-slate-700 hover:text-[#FF7043] sm:inline">Login</a><a href="/signup" class="hidden rounded-md bg-[#FF7043] px-4 py-2 text-white hover:bg-[#f45f2c] sm:inline-flex">Sign Up</a><span class="inline-flex h-10 w-10 flex-col items-center justify-center gap-1 rounded-md border border-slate-200 text-slate-700 md:hidden" aria-hidden="true"><span class="h-0.5 w-4 rounded bg-current"></span><span class="h-0.5 w-4 rounded bg-current"></span><span class="h-0.5 w-4 rounded bg-current"></span></span></div></div></header><main class="flex-1 bg-background">
58<script type="application/ld+json">{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https://www.svgai.org"},{"@type":"ListItem","position":2,"name":"API Documentation","item":"https://www.svgai.org/docs"}]}</script>
58<div class="container mx-auto px-4 py-12 max-w-4xl"><p class="text-sm font-medium text-[#C2410C] uppercase tracking-wide mb-2">Developer documentation</p><h1 class="text-4xl font-bold mb-4 text-gray-900">SVG AI API &amp; MCP Server</h1><p class="text-lg text-gray-600 mb-8 max-w-2xl">Use SVG AI from your own code or from AI assistants. Two capabilities:<!-- --> <strong>generate</strong> designs a new SVG from a text brief, an image, or both;<!-- --> <strong>vectorize</strong> traces an existing image into SVG paths.</p><div class="rounded-lg border border-gray-200 bg-gray-50 p-4 mb-10 text-sm"><p class="font-semibold mb-1 text-gray-900">Quick facts</p><ul class="list-disc pl-5 space-y-1 text-gray-700"><li>Base URL: <code class="font-mono">https://www.svgai.org</code></li><li>MCP endpoint: <code class="font-mono">https://www.svgai.org/api/mcp</code> (streamable HTTP)</li><li>Auth: an API key from the <a class="text-[#C2410C] underline underline-offset-2 hover:text-[#9A3412]" href="/dashboard/api">API &amp; MCP console</a>, sent as <code class="font-mono">Authorization: Bearer sk_svgai_…</code></li><li>API &amp; MCP generation and vectorization use your SVG AI credit balance and require paid account access through a subscription or credit purchase. Website starter credits alone do not unlock API use; an account without a purchase receives <code class="font-mono">402 payment_required</code>. <a class="text-[#C2410C] underline underline-offset-2 hover:text-[#9A3412]" href="/pricing">View plans and credit packs</a></li><li>No code needed to try it: the <a class="text-[#C2410C] underline underline-offset-2 hover:text-[#9A3412]" href="/dashboard/api">console</a> has one-click setup and a live playground.</li></ul></div><nav aria-label="Developer documentation" class="mb-8 text-sm text-gray-700"><p class="font-semibold mb-2 text-gray-900">Reference and discovery</p><ul class="flex flex-wrap gap-x-5 gap-y-2"><li><a href="/openapi.json" class="text-[#C2410C] underline underline-offset-2 hover:text-[#9A3412]">OpenAPI specification</a></li><li><a href="/api/v1" class="text-[#C2410C] underline underline-offset-2 hover:text-[#9A3412]">API endpoint index (JSON)</a></li><li><a href="/llms.txt" class="text-[#C2410C] underline underline-offset-2 hover:text-[#9A3412]">Agent guide (llms.txt)</a></li><li><a href="/agents.md" class="text-[#C2410C] underline underline-offset-2 hover:text-[#9A3412]">Agent workflow instructions</a></li><li><a href="/auth.md" class="text-[#C2410C] underline underline-offset-2 hover:text-[#9A3412]">Authentication reference (Markdown)</a></li><li><a href="/docs.md" class="text-[#C2410C] underline underline-offset-2 hover:text-[#9A3412]">This page as Markdown</a></li><li><a href="/pricing.md" class="text-[#C2410C] underline underline-offset-2 hover:text-[#9A3412]">Pricing reference (Markdown)</a></li><li><a href="/.well-known/agent-skills/index.json" class="text-[#C2410C] underline underline-offset-2 hover:text-[#9A3412]">SVG workflow skill</a></li><li><a href="/server.json" class="text-[#C2410C] underline underline-offset-2 hover:text-[#9A3412]">MCP server metadata</a></li><li><a href="/.well-known/api-catalog" rel="api-catalog" class="text-[#C2410C] underline underline-offset-2 hover:text-[#9A3412]">API catalog</a></li><li><a href="/.well-known/ard.json" rel="ard" class="text-[#C2410C] underline underline-offset-2 hover:text-[#9A3412]">Resource discovery catalog</a></li><li><a href="#auth" class="text-[#C2410C] underline underline-offset-2 hover:text-[#9A3412]">Authentication</a></li><li><a href="#generate" class="text-[#C2410C] underline underline-offset-2 hover:text-[#9A3412]">Generate</a></li><li><a href="#vectorize" class="text-[#C2410C] underline underline-offset-2 hover:text-[#9A3412]">Vectorize</a></li><li><a href="#errors" class="text-[#C2410C] underline underline-offset-2 hover:text-[#9A3412]">Errors</a></li></ul></nav><h2 class="text-2xl font-semibold mb-3 mt-14 scroll-mt-24 text-gray-900" id="ways">Three ways to use it</h2><p class="mb-5 text-gray-700">Pick whichever matches how you work. REST uses an API key; MCP supports OAuth or an API key. Both use your SVG AI account and credit balance.</p><div class="grid gap-4 sm:grid-cols-3 mb-4"><div class="rounded-lg border border-gray-200 p-4"><div class="flex items-center gap-2 mb-2"><svg viewBox="0 0 24 24" class="shrink-0 h-5 w-5" fill="#D97757" role="img" aria-label="Claude" focusable="false">
58<path d="M4.709 15.955l4.72-2.647.079-.23-.08-.128H9.2l-.79-.048-2.698-.073-2.339-.097-2.266-.122-.571-.121L0 11.784l.055-.352.48-.321.686.06 1.52.103 2.278.158 1.652.097 2.449.255h.389l.055-.157-.134-.098-.103-.097-2.358-1.596-2.552-1.688-1.337-.972-.724-.491-.364-.462-.157-1.006.655-.72.879.06.225.061.891.685 1.904 1.474 2.486 1.831.364.304.145-.103.019-.073-.164-.274-1.355-2.446-1.446-2.49-.644-1.032-.17-.619a2.97 2.97 0 0 1-.103-.729L6.283.134 6.696 0l.996.134.42.364.62.42 1.081 1.566 1.755 2.505.516.769.274.467.043.19.176.017.019-.109.14-1.865.255-2.29.249-2.946.085-.83.401-.972.797-.526.62.298.512.735-.073.474-.304 1.973-.596 3.093-.388 2.071h.225l.26-.26 1.054-1.4 1.76-2.19.79-.892.928-.984.596-.474h1.128l.83 1.232-.372 1.273-1.164 1.474-.964 1.25-1.383 1.86-.86 1.485.079.12.207-.018 3.13-.667 1.69-.303 2.016-.347.91.427.1.43-.36.892-2.16.534-2.535.507-3.77.892-.045.033.054.066 1.7.16.727.04h1.778l3.313.246.867.572.52.7-.088.532-1.334.68-1.799-.427-4.2-1.001-1.44-.359h-.2v.12l1.2 1.174 2.2 1.984 2.75 2.554.14.632-.35.497-.371-.055-2.406-1.808-.93-.816-2.101-1.766h-.14v.183l.485.71 2.553 3.83.13 1.177-.183.383-.657.23-.723-.132-1.485-2.086-1.532-2.346-1.236-2.104-.152.086-.732 7.882-.343.402-.79.304-.66-.5-.35-.812.35-1.601.42-2.086.34-1.657.31-2.06.185-.685-.013-.046-.152.018-1.557 2.14-2.372 3.202-1.874 2.006-.45.176-.777-.401.073-.716.432-.638 2.578-3.28.155-.208H8.71l-2.475 1.61-4.415 2.083-.772.075-.468-.44.058-.716.22-.232 1.82-1.25z"></path></svg></div><p class="font-semibold text-sm mb-1 text-gray-900">1. Hand it to your agent</p><p class="text-[13px] text-gray-600 leading-relaxed">Copy the setup message from the console and paste it into Claude Code, Cursor, Codex, or another compatible coding agent. The message contains connection instructions and an account check to confirm the setup.</p></div><div class="rounded-lg border border-gray-200 p-4"><div class="flex items-center gap-2 mb-2"><svg viewBox="0 0 24 24" class="shrink-0 h-5 w-5" fill="#D97757" role="img" aria-label="Claude" focusable="false"><path d="M4.709 15.955l4.72-2.647.079-.23-.08-.128H9.2l-.79-.048-2.698-.073-2.339-.097-2.266-.122-.571-.121L0 11.784l.055-.352.48-.321.686.06 1.52.103 2.278.158 1.652.097 2.449.255h.389l.055-.157-.134-.098-.103-.097-2.358-1.596-2.552-1.688-1.337-.972-.724-.491-.364-.462-.157-1.006.655-.72.879.06.225.061.891.685 1.904 1.474 2.486 1.831.364.304.145-.103.019-.073-.164-.274-1.355-2.446-1.446-2.49-.644-1.032-.17-.619a2.97 2.97 0 0 1-.103-.729L6.283.134 6.696 0l.996.134.42.364.62.42 1.081 1.566 1.755 2.505.516.769.274.467.043.19.176.017.019-.109.14-1.865.255-2.29.249-2.946.085-.83.401-.972.797-.526.62.298.512.735-.073.474-.304 1.973-.596 3.093-.388 2.071h.225l.26-.26 1.054-1.4 1.76-2.19.79-.892.928-.984.596-.474h1.128l.83 1.232-.372 1.273-1.164 1.474-.964 1.25-1.383 1.86-.86 1.485.079.12.207-.018 3.13-.667 1.69-.303 2.016-.347.91.427.1.43-.36.892-2.16.534-2.535.507-3.77.892-.045.033.054.066 1.7.16.727.04h1.778l3.313.246.867.572.52.7-.088.532-1.334.68-1.799-.427-4.2-1.001-1.44-.359h-.2v.12l1.2 1.174 2.2 1.984 2.75 2.554.14.632-.35.497-.371-.055-2.406-1.808-.93-.816-2.101-1.766h-.14v.183l.485.71 2.553 3.83.13 1.177-.183.383-.657.23-.723-.132-1.485-2.086-1.532-2.346-1.236-2.104-.152.086-.732 7.882-.343.402-.79.304-.66-.5-.35-.812.35-1.601.42-2.086.34-1.657.31-2.06.185-.685-.013-.046-.152.018-1.557 2.14-2.372 3.202-1.874 2.006-.45.176-.777-.401.073-.716.432-.638 2.578-3.28.155-.208H8.71l-2.475 1.61-4.415 2.083-.772.075-.468-.44.058-.716.22-.232 1.82-1.25z"></path></svg><svg viewBox="0 0 24 24" class="shrink-0 h-5 w-5" fill="#000000" role="img" aria-label="ChatGPT" focusable="false"><path d="M22.2819 9.8211a5.9847 5.9847 0 0 0-.5157-4.9108 6.0462 6.0462 0 0 0-6.5098-2.9A6.0651 6.0651 0 0 0 4.9807 4.1818a5.9847 5.9847 0 0 0-3.9977 2.9 6.0462 6.0462 0 0 0 .7427 7.0966 5.98 5.98 0 0 0 .511 4.9107 6.051 6.051 0 0 0 6.5146 2.9001A5.9847 5.9847 0 0 0 13.2599 24a6.0557 6.0557 0 0 0 5.7718-4.2058 5.9894 5.9894 0 0 0 3.9977-2.9001 6.0557 6.0557 0 0 0-.7475-7.0729zm-9.022 12.6081a4.4755 4.4755 0 0 1-2.8764-1.0408l.1419-.0804 4.7783-2.7582a.7948.7948 0 0 0 .3927-.6813v-6.7369l2.02 1.1686a.071.071 0 0 1 .038.052v5.5826a4.504 4.504 0 0 1-4.4945 4.4944zm-9.6607-4.1254a4.4708 4.4708 0 0 1-.5346-3.0137l.142.0852 4.783 2.7582a.7712.7712 0 0 0 .7806 0l5.8428-3.3685v2.3324a.0804.0804 0 0 1-.0332.0615L9.74 19.9502a4.4992 4.4992 0 0 1-6.1408-1.6464zM2.3408 7.8956a4.485 4.485 0 0 1 2.3655-1.9728V11.6a.7664.7664 0 0 0 .3879.6765l5.8144 3.3543-2.0201 1.1685a.0757.0757 0 0 1-.071 0l-4.8303-2.7865A4.504 4.504 0 0 1 2.3408 7.872zm16.5963 3.8558L13.1038 8.364 15.1192 7.2a.0757.0757 0 0 1 .071 0l4.8303 2.7913a4.4944 4.4944 0 0 1-.6765 8.1042v-5.6772a.79.79 0 0 0-.407-.667zm2.0107-3.0231l-.142-.0852-4.7735-2.7818a.7759.7759 0 0 0-.7854 0L9.409 9.2297V6.8974a.0662.0662 0 0 1 .0284-.0615l4.8303-2.7866a4.4992 4.4992 0 0 1 6.6802 4.66zM8.3065 12.863l-2.02-1.1638a.0804.0804 0 0 1-.038-.0567V6.0742a4.4992 4.4992 0 0 1 7.3757-3.4537l-.142.0805L8.704 5.459a.7948.7948 0 0 0-.3927.6813zm
581.0976-2.3654l2.602-1.4998 2.6069 1.4998v2.9994l-2.5974 1.4997-2.6067-1.4997Z"></path></svg></div><p class="font-semibold text-sm mb-1 text-gray-900">2. Chat in Claude or ChatGPT</p><p class="text-[13px] text-gray-600 leading-relaxed">Add SVG AI as a connector in a supported client, then ask: &quot;make me a flat vector coffee-cup logo&quot; and the SVG comes back in chat.</p></div><div class="rounded-lg border border-gray-200 p-4"><div class="flex items-center gap-2 mb-2"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-terminal h-5 w-5 text-gray-700"><polyline points="4 17 10 11 4 5"></polyline><line x1="12" x2="20" y1="19" y2="19"></line></svg></div><p class="font-semibold text-sm mb-1 text-gray-900">3. Call the REST API</p><p class="text-[13px] text-gray-600 leading-relaxed">Send HTTP requests from your own application to generate SVGs, trace images, check credits and retrieve generation results.</p></div></div><p class="mb-4 text-gray-700">The<!-- --> <a class="text-[#C2410C] underline underline-offset-2 hover:text-[#9A3412]" href="/dashboard/api">console</a> has a<!-- --> <strong>Copy setup message</strong> button: paste that one message into your assistant and follow its connection steps. Checking your balance confirms authentication without generating an image. You can also use the manual commands below.</p><h2 class="text-2xl font-semibold mb-3 mt-14 scroll-mt-24 text-gray-900" id="choosing">Generate vs. vectorize</h2><p class="mb-4 text-gray-700">Use <strong>vectorize</strong> to trace the shapes and colors in an existing image. Use <strong>generate</strong> for a new design or a reinterpretation of a reference. Inspect traced edges, small details and colors before using the result.</p><div class="overflow-x-auto mb-4"><table class="w-full text-sm border-collapse"><thead><tr><th class="text-left font-semibold border-b border-gray-200 px-3 py-2 whitespace-nowrap text-gray-900">Capability</th><th class="text-left font-semibold border-b border-gray-200 px-3 py-2 whitespace-nowrap text-gray-900">Generate</th><th class="text-left font-semibold border-b border-gray-200 px-3 py-2 whitespace-nowrap text-gray-900">Vectorize</th></tr></thead><tbody><tr><td class="border-b border-gray-100 px-3 py-2 align-top text-gray-700 font-medium">What it does</td><td class="border-b border-gray-100 px-3 py-2 align-top text-gray-700">Composes a clean, flat, vector-native design and returns final SVG paths. An input image is used as the subject or reference and redrawn as clean vector artwork.</td><td class="border-b border-gray-100 px-3 py-2 align-top text-gray-700">Traces the input image into SVG paths. The result follows the source artwork, but edges, fine details and colors can change.</td></tr><tr><td class="border-b border-gray-100 px-3 py-2 align-top text-gray-700 font-medium">Best for</td><td class="border-b border-gray-100 px-3 py-2 align-top text-gray-700">New logos, icons, illustrations; turning photos, sketches, or rough rasters into polished SVGs; restyling.</td><td class="border-b border-gray-100 px-3 py-2 align-top text-gray-700">Logos, icons, and flat artwork that are already clean and just need to become real vectors.</td></tr><tr><td class="border-b border-gray-100 px-3 py-2 align-top text-gray-700 font-medium">Background</td><td class="border-b border-gray-100 px-3 py-2 align-top text-gray-700"><code>transparent_background</code> defaults to <code>&quot;auto&quot;</code> — SVG AI decides from the design.</td><td class="border-b border-gray-100 px-3 py-2 align-top text-gray-700">An opaque background is traced too. Pass <code>remove_background: true</code> to request background removal before tracing.</td></tr><tr><td class="border-b border-gray-100 px-3 py-2 align-top text-gray-700 font-medium">Cost</td><td class="border-b border-gray-100 px-3 py-2 align-top text-gray-700">Varies by model and number of variations. Check <a href="#credits" class="text-[#C2410C] underline underline-offset-2 hover:text-[#9A3412]">current operation costs</a>.</td><td class="border-b border-gray-100 px-3 py-2 align-top text-gray-700">Charged per image; optional background removal is included. Check <a href="#credits" class="text-[#C2410C] underline underline-offset-2 hover:text-[#9A3412]">current operation costs</a>.</td></tr><tr><td class="border-b border-gray-100 px-3 py-2 align-top text-gray-700 font-medium">Retrieving the result</td><td class="border-b border-gray-100 px-3 py-2 align-top text-gray-700">Returns a result or a processing response with a polling URL.</td><td class="border-b border-gray-100 px-3 py-2 align-top text-gray-700">Returns the traced SVG in the response.</td></tr></tbody></table></div><p class="mb-4 text-gray-700"><strong>Classic</strong> is fast and great for icons and simpler designs.<!-- --> <strong>Ultra</strong> renders more detail and handles text-heavy logos and complex briefs better. Generations made through the API also appear in your SVG AI dashboard.</p><h2 class="text-2xl font-semibold mb-3 mt-14 scroll-mt-24 text-gray-900" id="auth">Authentication</h2><p class="mb-3 text-gray-700">There are two ways to authenticate: <strong>OAuth 2.1</strong> for MCP clients (recommended — no key handling at all) and <strong>API keys</strong> for the REST API or any client where you prefer a header.</p><h3 class="text-lg font-semibold mb-2 mt-8 text-gray-900 flex items-center gap-2" id="oauth">OAuth 2.1 (MCP clients)</h3><p class="mb-3 text-gray-700">Add <code>https://www.svgai.org/api/mcp</code> to Claude, ChatGPT, or any MCP client<!-- --> <em>without credentials</em>. The client discovers the flow automatically, your browser opens SVG AI&#x27;
58s sign-in and consent screen, and tokens are issued behind the scenes — you never see or paste a secret. The server implements the current MCP authorization spec:</p><ul class="mb-3 list-disc pl-5 text-sm text-gray-700 space-y-1"><li>Protected-resource metadata (RFC 9728) at <code>/.well-known/oauth-protected-resource</code>; authorization-server metadata (RFC 8414) at <code>/.well-known/oauth-authorization-server</code>. Unauthenticated calls to <code>/api/mcp</code> return 401 with a <code>WWW-Authenticate: Bearer resource_metadata=&quot;…&quot;</code> challenge.</li><li>Authorization-code flow with PKCE (S256 only) and dynamic client registration (RFC 7591) at <code>POST /api/oauth/register</code>.</li><li>Access tokens are audience-bound (RFC 8707) and last 1 hour; refresh tokens last 60 days and rotate on every use — a replayed refresh token revokes the whole session.</li><li>Connected apps are listed in the <a class="text-[#C2410C] underline underline-offset-2 hover:text-[#9A3412]" href="/dashboard/api">console</a> and can be disconnected instantly.</li></ul><h3 class="text-lg font-semibold mb-2 mt-8 text-gray-900 flex items-center gap-2" id="api-keys">API keys (REST, or manual MCP setup)</h3><p class="mb-3 text-gray-700">Create a key in the <a class="text-[#C2410C] underline underline-offset-2 hover:text-[#9A3412]" href="/dashboard/api">API &amp; MCP console</a> <!-- -->(Dashboard → API &amp; MCP). The full key is shown once, at creation. Send it on every request:</p><div class="relative min-w-0 max-w-full rounded-lg border overflow-hidden " style="background:#FBFAF9;border-color:#E7E1DB"><pre tabindex="0" role="region" aria-label="bash snippet" class="overflow-x-auto font-mono focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[#C2410C] focus-visible:ring-inset p-4 pr-12 text-[13px] leading-[1.75]" style="color:#24292F;margin:0"><code style="color:#24292F;background:transparent;padding:0"><span style="color:#953800">Authorization</span><span style="color:#24292F">: Bearer sk_svgai_...        </span><span style="color:#5F6772"># preferred</span><span style="color:#24292F">
59</span><span style="color:#953800">x-api-key</span><span style="color:#24292F">: sk_svgai_...                   </span><span style="color:#5F6772"># alternative header</span></code></pre><button type="button" aria-label="Copy code to clipboard" class="absolute top-2 right-2 rounded-md border bg-white p-1.5 transition-colors hover:bg-[#F3EFEB] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[#C2410C] focus-visible:ring-offset-1" style="border-color:#E7E1DB"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-copy h-3.5 w-3.5" style="color:#57606A"><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></div><p class="mt-3 mb-4 text-sm text-gray-600">Keys can be revoked any time from the console. Rate limits: 20 generations and 30 vectorizations per minute per account.</p><h2 class="text-2xl font-semibold mb-3 mt-14 scroll-mt-24 text-gray-900" id="generate">POST /api/v1/generate</h2><p class="mb-3 text-gray-700">Create one or more SVGs from a prompt, an image, or both.</p><div class="overflow-x-auto mb-4"><table class="w-full text-sm border-collapse"><thead><tr><th class="text-left font-semibold border-b border-gray-200 px-3 py-2 whitespace-nowrap text-gray-900">Field</th><th class="text-left font-semibold border-b border-gray-200 px-3 py-2 whitespace-nowrap text-gray-900">Type</th><th class="text-left font-semibold border-b border-gray-200 px-3 py-2 whitespace-nowrap text-gray-900">Description</th></tr></thead><tbody><tr><td class="border-b border-gray-100 px-3 py-2 align-top text-gray-700 font-mono">prompt</td><td class="border-b border-gray-100 px-3 py-2 align-top text-gray-700">string</td><td class="border-b border-gray-100 px-3 py-2 align-top text-gray-700">What to create, in plain language. Optional when an image is provided. Max 4,000 chars.</td></tr><tr><td class="border-b border-gray-100 px-3 py-2 align-top text-gray-700 font-mono">image</td><td class="border-b border-gray-100 px-3 py-2 align-top text-gray-700">string</td><td class="border-b border-gray-100 px-3 py-2 align-top text-gray-700">Base64 source/reference image (raw or data URL). PNG, JPEG, or WebP, up to 8 MB.</td></tr><tr><td class="border-b border-gray-100 px-3 py-2 align-top text-gray-700 font-mono">image_url</td><td class="border-b border-gray-100 px-3 py-2 align-top text-gray-700">string</td><td class="border-b border-gray-100 px-3 py-2 align-top text-gray-700">Alternative to <code>image</code>
59: a publicly reachable http(s) URL.</td></tr><tr><td class="border-b border-gray-100 px-3 py-2 align-top text-gray-700 font-mono">model</td><td class="border-b border-gray-100 px-3 py-2 align-top text-gray-700">string</td><td class="border-b border-gray-100 px-3 py-2 align-top text-gray-700"><code>&quot;classic&quot;</code> (default) or <code>&quot;ultra&quot;</code>. Check the credits endpoint for current costs.</td></tr><tr><td class="border-b border-gray-100 px-3 py-2 align-top text-gray-700 font-mono">variations</td><td class="border-b border-gray-100 px-3 py-2 align-top text-gray-700">integer</td><td class="border-b border-gray-100 px-3 py-2 align-top text-gray-700">1–4 designs per request (default 1). Each variation is charged.</td></tr><tr><td class="border-b border-gray-100 px-3 py-2 align-top text-gray-700 font-mono">transparent_background</td><td class="border-b border-gray-100 px-3 py-2 align-top text-gray-700">string</td><td class="border-b border-gray-100 px-3 py-2 align-top text-gray-700"><code>&quot;auto&quot;</code> (default), <code>&quot;on&quot;</code>, or <code>&quot;off&quot;</code>.</td></tr><tr><td class="border-b border-gray-100 px-3 py-2 align-top text-gray-700 font-mono">aspect_ratio</td><td class="border-b border-gray-100 px-3 py-2 align-top text-gray-700">string</td><td class="border-b border-gray-100 px-3 py-2 align-top text-gray-700"><code>&quot;default&quot;</code> or <code>&quot;square&quot;</code> (forces a 1:1 canvas).</td></tr><tr><td class="border-b border-gray-100 px-3 py-2 align-top text-gray-700 font-mono">wait</td><td class="border-b border-gray-100 px-3 py-2 align-top text-gray-700">boolean</td><td class="border-b border-gray-100 px-3 py-2 align-top text-gray-700">Default <code>true</code>: wait for completion within the request&#x27;s wait window. If it is still processing, the response includes a polling URL. With <code>false</code>, return HTTP 202 and poll the generation.</td></tr></tbody></table></div><div class="relative min-w-0 max-w-full rounded-lg border overflow-hidden " style="background:#FBFAF9;border-color:#E7E1DB"><pre tabindex="0" role="region" aria-label="bash snippet" class="overflow-x-auto font-mono focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[#C2410C] focus-visible:ring-inset p-4 pr-12 text-[13px] leading-[1.75]" style="color:#24292F;margin:0"><code style="color:#24292F;background:transparent;padding:0"><span style="color:#953800">curl</span><span style="color:#24292F"> </span><span style="color:#8250DF">-X</span><span style="color:#24292F"> POST </span><span style="color:#0550AE">https://www.svgai.org/api/v1/generate</span><span style="color:#24292F"> </span><span style="color:#57606A">\</span><span style="color:#24292F">
60  </span><span style="color:#8250DF">-H</span><span style="color:#24292F"> </span><span style="color:#0A6E4A">&quot;Authorization: Bearer sk_svgai_...&quot;</span><span style="color:#24292F"> </span><span style="color:#57606A">\</span><span style="color:#24292F">
61  </span><span style="color:#8250DF">-H</span><span style="color:#24292F"> </span><span style="color:#0A6E4A">&quot;Content-Type: application/json&quot;</span><span style="color:#24292F"> </span><span style="color:#57606A">\</span><span style="color:#24292F">
62  </span><span style="color:#8250DF">-d</span><span style="color:#24292F"> </span><span style="color:#0A6E4A">&#x27;{&quot;prompt&quot;: &quot;minimal fox logo, orange and white&quot;, &quot;model&quot;: &quot;classic&quot;}&#x27;</span></code></pre><button type="button" aria-label="Copy code to clipboard" class="absolute top-2 right-2 rounded-md border bg-white p-1.5 transition-colors hover:bg-[#F3EFEB] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[#C2410C] focus-visible:ring-offset-1" style="border-color:#E7E1DB"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-copy h-3.5 w-3.5" style="color:#57606A"><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></div><p class="mt-4 mb-2 text-sm font-semibold text-gray-900">Complete response example</p><p class="mb-3 text-sm text-gray-600">Example response with sample identifiers, credit balances and a simple square SVG.</p><div class="relative min-w-0 max-w-full rounded-lg border overflow-hidden " style="background:#FBFAF9;border-color:#E7E1DB"><pre tabindex="0" role="region" aria-label="json snippet" class="overflow-x-auto font-mono focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[#C2410C] focu
62s-visible:ring-inset p-4 pr-12 text-[13px] leading-[1.75]" style="color:#24292F;margin:0"><code style="color:#24292F;background:transparent;padding:0"><span style="color:#57606A">{</span><span style="color:#24292F">
63  </span><span style="color:#0550AE">&quot;object&quot;</span><span style="color:#57606A">:</span><span style="color:#24292F"> </span><span style="color:#0A6E4A">&quot;svg.generation&quot;</span><span style="color:#57606A">,</span><span style="color:#24292F">
64  </span><span style="color:#0550AE">&quot;id&quot;</span><span style="color:#57606A">:</span><span style="color:#24292F"> </span><span style="color:#0A6E4A">&quot;6dce86db-468b-4bc9-b877-379a9c0894a1&quot;</span><span style="color:#57606A">,</span><span style="color:#24292F">
65  </span><span style="color:#0550AE">&quot;status&quot;</span><span style="color:#57606A">:</span><span style="color:#24292F"> </span><span style="color:#0A6E4A">&quot;completed&quot;</span><span style="color:#57606A">,</span><span style="color:#24292F">
66  </span><span style="color:#0550AE">&quot;model&quot;</span><span style="color:#57606A">:</span><span style="color:#24292F"> </span><span style="color:#0A6E4A">&quot;classic&quot;</span><span style="color:#57606A">,</span><span style="color:#24292F">
67  </span><span style="color:#0550AE">&quot;credits_used&quot;</span><span style="color:#57606A">:</span><span style="color:#24292F"> </span><span style="color:#0550AE">2</span><span style="color:#57606A">,</span><span style="color:#24292F">
68  </span><span style="color:#0550AE">&quot;credits_remaining&quot;</span><span style="color:#57606A">:</span><span style="color:#24292F"> </span><span style="color:#0550AE">18</span><span style="color:#57606A">,</span><span style="color:#24292F">
69  </span><span style="color:#0550AE">&quot;svgs&quot;</span><span style="color:#57606A">:</span><span style="color:#24292F"> </span><span style="color:#57606A">[</span><span style="color:#24292F">
70    </span><span style="color:#57606A">{</span><span style="color:#24292F">
71      </span><span style="color:#0550AE">&quot;design_id&quot;</span><span style="color:#57606A">:</span><span style="color:#24292F"> </span><span style="color:#0A6E4A">&quot;8acc61ce-59b4-4562-b67c-9e4a1ca55115&quot;</span><span style="color:#57606A">,</span><span style="color:#24292F">
72      </span><span style="color:#0550AE">&quot;status&quot;</span><span style="color:#57606A">:</span><span style="color:#24292F"> </span><span style="color:#0A6E4A">&quot;completed&quot;</span><span style="color:#57606A">,</span><span style="color:#24292F">
73      </span><span style="color:#0550AE">&quot;svg&quot;</span><span style="color:#57606A">:</span><span style="color:#24292F"> </span><span style="color:#0A6E4A">&quot;&lt;svg xmlns=\&quot;http://www.w3.org/2000/svg\&quot;
73 viewBox=\&quot;0 0 64 64\&quot;&gt;&lt;path fill=\&quot;#ea580c\&quot; d=\&quot;M12 12h40v40H12z\&quot;/&gt;&lt;/svg&gt;&quot;</span><span style="color:#24292F">
74    </span><span style="color:#57606A">}</span><span style="color:#24292F">
75  </span><span style="color:#57606A">]</span><span style="color:#24292F">
76</span><span style="color:#57606A">}</span></code></pre><button type="button" aria-label="Copy code to clipboard" class="absolute top-2 right-2 rounded-md border bg-white p-1.5 transition-colors hover:bg-[#F3EFEB] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[#C2410C] focus-visible:ring-offset-1" style="border-color:#E7E1DB"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-copy h-3.5 w-3.5" style="color:#57606A"><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></div><p class="mt-3 mb-4 text-sm text-gray-600">A failed generation refunds its credits automatically. If the request outlives the wait window, you receive HTTP 202 with <code>status: &quot;processing&quot;</code>, a <code>poll_url</code>,<!-- --> <!-- -->and a matching <code>Location</code> response header. Polling still requires your API key.<!-- --> <!-- -->Use the existing generation&#x27;s polling URL before retrying a request that may already have been accepted: creating a generation again can spend credits again.</p><h3 class="text-lg font-semibold mb-2 mt-8 text-gray-900 flex items-center gap-2" id="poll">GET /api/v1/generations/:id</h3><p class="mb-3 text-gray-700">Fetch the state and results of an earlier generation by its <code>id</code>, using the same account&#x27;s API key. The response contains <code>object</code>, <code>id</code>,<!-- --> <code>status</code>, and <code>svgs</code>; it omits model, credit fields, and polling URL. Keep polling while the status is <code>processing</code>.</p><h2 class="text-2xl font-semibold mb-3 mt-14 scroll-mt-24 text-gray-900" id="vectorize">POST /api/v1/vectorize</h2><p class="mb-3 text-gray-700">Trace an existing image into SVG paths. Send <code>image</code> (base64) or<!-- --> <code>image_url</code>; images should be at least 256×256 pixels.</p><p class="mb-3 text-gray-700"><strong>Backgrounds are not removed automatically</strong> <!-- -->— an opaque background becomes filled paths in the SVG. Pass<!-- --> <code>remove_background: true</code> to isolate the main subject on a transparent background before tracing (no extra credits). Inspect the returned SVG on your intended background. If background removal fails, the original image is traced instead and the response reports <code>background_removed: false</code>.</p><div class="relative min-w-0 max-w-full rounded-lg border overflow-hidden " style="background:#FBFAF9;border-color:#E7E1DB"><pre tabindex="0" role="region" aria-label="bash snippet" class="overflow-x-auto font-mono focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[#C2410C] focus-visible:ring-inset p-4 pr-12 text-[13px] leading-[1.75]" style="color:#24292F;margin:0"><code style="color:#24292F;background:transparent;padding:0"><span style="color:#953800">curl</span><span style="color:#24292F"> </span><span style="color:#8250DF">-X</span><span style="color:#24292F"> POST </span><span style="color:#0550AE">https://www.svgai.org/api/v1/vectorize</span><span style="color:#24292F"> </span><span style="color:#57606A">\</span><span style="color:#24292F">
77  </span><span style="color:#8250DF">-H</span><span style="color:#24292F"> </span><span style="color:#0A6E4A">&quot;Authorization: Bearer sk_svgai_...&quot;</span><span style="color:#24292F"> </span><span style="color:#57606A">\</span><span style="color:#24292F">
78  </span><span style="color:#8250DF">-H</span><span style="color:#24292F"> </span><span style="color:#0A6E4A">&quot;Content-Type: application/json&quot;</span><span style="color:#24292F"> </span><span style="color:#57606A">\</span><span style="color:#24292F">
79  </span><span style="color:#8250DF">-d</span><span style="color:#24292F"> </span><span style="color:#0A6E4A">&#x27;{&quot;image_url&quot;: &quot;https://example.com/logo.png&quot;, &quot;remove_background&quot;: true}&#x27;</span></code></pre><button type="button" aria-label="Copy code to clipboard" class="absolute top-2 right-2 roun
79ded-md border bg-white p-1.5 transition-colors hover:bg-[#F3EFEB] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[#C2410C] focus-visible:ring-offset-1" style="border-color:#E7E1DB"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-copy h-3.5 w-3.5" style="color:#57606A"><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></div><p class="mt-4 mb-2 text-sm font-semibold text-gray-900">Illustrative response</p><div class="relative min-w-0 max-w-full rounded-lg border overflow-hidden " style="background:#FBFAF9;border-color:#E7E1DB"><pre tabindex="0" role="region" aria-label="json snippet" class="overflow-x-auto font-mono focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[#C2410C] focus-visible:ring-inset p-4 pr-12 text-[13px] leading-[1.75]" style="color:#24292F;margin:0"><code style="color:#24292F;background:transparent;padding:0"><span style="color:#57606A">{</span><span style="color:#24292F">
80  </span><span style="color:#0550AE">&quot;object&quot;</span><span style="color:#57606A">:</span><span style="color:#24292F"> </span><span style="color:#0A6E4A">&quot;svg.vectorization&quot;</span><span style="color:#57606A">,</span><span style="color:#24292F">
81  </span><span style="color:#0550AE">&quot;status&quot;</span><span style="color:#57606A">:</span><span style="color:#24292F"> </span><span style="color:#0A6E4A">&quot;completed&quot;</span><span style="color:#57606A">,</span><span style="color:#24292F">
82  </span><span style="color:#0550AE">&quot;svg&quot;</span><span style="color:#57606A">:</span><span style="color:#24292F"> </span><span style="color:#0A6E4A">&quot;&lt;svg xmlns=\&quot;http://www.w3.org/2000/svg\&quot;
82 viewBox=\&quot;0 0 64 64\&quot;&gt;&lt;path fill=\&quot;#ea580c\&quot; d=\&quot;M12 12h40v40H12z\&quot;/&gt;&lt;/svg&gt;&quot;</span><span style="color:#57606A">,</span><span style="color:#24292F">
83  </span><span style="color:#0550AE">&quot;background_removed&quot;</span><span style="color:#57606A">:</span><span style="color:#24292F"> </span><span style="color:#8250DF">false</span><span style="color:#57606A">,</span><span style="color:#24292F">
84  </span><span style="color:#0550AE">&quot;credits_used&quot;</span><span style="color:#57606A">:</span><span style="color:#24292F"> </span><span style="color:#0550AE">1</span><span style="color:#57606A">,</span><span style="color:#24292F">
85  </span><span style="color:#0550AE">&quot;credits_remaining&quot;</span><span style="color:#57606A">:</span><span style="color:#24292F"> </span><span style="color:#0550AE">17</span><span style="color:#24292F">
86</span><span style="color:#57606A">}</span></code></pre><button type="button" aria-label="Copy code to clipboard" class="absolute top-2 right-2 rounded-md border bg-white p-1.5 transition-colors hover:bg-[#F3EFEB] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[#C2410C] focus-visible:ring-offset-1" style="border-color:#E7E1DB"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-copy h-3.5 w-3.5" style="color:#57606A"><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></div><h2 class="text-2xl font-semibold mb-3 mt-14 scroll-mt-24 text-gray-900" id="credits">GET /api/v1/credits</h2><p class="mb-3 text-gray-700">Check this endpoint for current operation costs and <code>api_access</code> before generating or vectorizing. Website starter credits alone do not unlock API use. The example below uses sample account values.</p><div class="relative min-w-0 max-w-full rounded-lg border overflow-hidden " style="background:#FBFAF9;border-color:#E7E1DB"><pre tabindex="0" role="region" aria-label="json snippet" class="overflow-x-auto font-mono focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[#C2410C] focus-visible:ring-inset p-4 pr-12 text-[13px] leading-[1.75]" style="color:#24292F;margin:0"><code style="color:#24292F;background:transparent;padding:0"><span style="color:#57606A">{</span><span style="color:#24292F">
87  </span><span style="color:#0550AE">&quot;object&quot;</span><span style="color:#57606A">:</span><span style="color:#24292F"> </span><span style="color:#0A6E4A">&quot;credit.balance&quot;</span><span style="color:#57606A">,</span><span style="color:#24292F">
88  </span><span style="color:#0550AE">&quot;credits_remaining&quot;</span><span style="color:#57606A">:</span><span style="color:#24292F"> </span><span style="color:#0550AE">148</span><span style="color:#57606A">,</span><span style="color:#24292F">
89  </span><span style="color:#0550AE">&quot;subscription_active&quot;</span><span style="color:#57606A">:</span><span style="color:#24292F"> </span><span style="color:#8250DF">true</span><span style="color:#57606A">,</span><span style="color:#24292F">
90  </span><span style="color:#0550AE">&quot;api_access&quot;</span><span style="color:#57606A">:</span><span style="color:#24292F"> </span><span style="color:#8250DF">true</span><span style="color:#57606A">,</span><span style="color:#24292F">
91  </span><span style="color:#0550AE">&quot;costs&quot;</span><span style="color:#57606A">:</span><span style="color:#24292F"> </span><span style="color:#57606A">{</span><span style="color:#24292F"> </span><span style="color:#0550AE">&quot;generate_classic&quot;</span><span style="color:#57606A">:</span><span style="color:#24292F"> </span><span style="color:#0550AE">2</span><span style="color:#57606A">,</span><span style="color:#24292F"> </span><span style="color:#0550AE">&quot;generate_ultra&quot;</span><span style="color:#57606A">:</span><span style="color:#24292F"> </span><span style="color:#0550AE">4</span><span style="color:#57606A">,</span><span style="color:#24292F"> </span><span style="color:#0550AE">&quot;vectorize&quot;</span><span style="color:#57606A">:</span><span style="color:#24292F"> </span><span style="color:#0550AE">1</span><span style="color:#24292F"> </span><span style="color:#57606A">}</span><span style="color:#57606A">,</span><span style="color:#24292F">
92  </span><span style="color:#0550AE">&quot;topup_url&quot;</span><span style="color:#57606A">:</span><span style="color:#24292F"> </span><span style="color:#0A6E4A">&quot;https://svgai.org/pricing&quot;</span><span style="color:#24292F">
93</span><span style="color:#57606A">}</span></code></pre><button type="button" aria-label="Copy code to clipboard" class="absolute top-2 right-2 roun
93ded-md border bg-white p-1.5 transition-colors hover:bg-[#F3EFEB] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[#C2410C] focus-visible:ring-offset-1" style="border-color:#E7E1DB"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-copy h-3.5 w-3.5" style="color:#57606A"><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></div><h2 class="text-2xl font-semibold mb-3 mt-14 scroll-mt-24 text-gray-900" id="errors">Errors</h2><p class="mb-3 text-gray-700">REST handler errors contain <code>{ &quot;error&quot;: { &quot;type&quot;, &quot;message&quot; } }</code> with a matching HTTP status. A failed generation can also include its generation fields alongside the error. MCP uses its own JSON-RPC error and tool-result formats.</p><p class="mb-2 text-sm font-semibold text-gray-900">Check authentication without spending credits</p><p class="mb-3 text-sm text-gray-600">A request without an API key returns HTTP 401:</p><div class="relative min-w-0 max-w-full rounded-lg border overflow-hidden " style="background:#FBFAF9;border-color:#E7E1DB"><pre tabindex="0" role="region" aria-label="bash snippet" class="overflow-x-auto font-mono focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[#C2410C] focus-visible:ring-inset p-4 pr-12 text-[13px] leading-[1.75]" style="color:#24292F;margin:0"><code style="color:#24292F;background:transparent;padding:0"><span style="color:#953800">curl</span><span style="color:#24292F"> </span><span style="color:#8250DF">-i</span><span style="color:#24292F"> </span><span style="color:#0550AE">https://www.svgai.org/api/v1/credits</span></code></pre><button type="button" aria-label="Copy code to clipboard" class="absolute top-2 right-2 rounded-md border bg-white p-1.5 transition-colors hover:bg-[#F3EFEB] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[#C2410C] focus-visible:ring-offset-1" style="border-color:#E7E1DB"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-copy h-3.5 w-3.5" style="color:#57606A"><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></div><div class="relative min-w-0 max-w-full rounded-lg border overflow-hidden " style="background:#FBFAF9;border-color:#E7E1DB"><pre tabindex="0" role="region" aria-label="json snippet" class="overflow-x-auto font-mono focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[#C2410C] focus-visible:ring-inset p-4 pr-12 text-[13px] leading-[1.75]" style="color:#24292F;margin:0"><code style="color:#24292F;background:transparent;padding:0"><span style="color:#57606A">{</span><span style="color:#24292F">
94  </span><span style="color:#0550AE">&quot;error&quot;</span><span style="color:#57606A">:</span><span style="color:#24292F"> </span><span style="color:#57606A">{</span><span style="color:#24292F">
95    </span><span style="color:#0550AE">&quot;type&quot;</span><span style="color:#57606A">:</span><span style="color:#24292F"> </span><span style="color:#0A6E4A">&quot;authentication_error&quot;</span><span style="color:#57606A">,</span><span style="color:#24292F">
96    </span><span style="color:#0550AE">&quot;message&quot;</span><span style="color:#57606A">:</span><span style="color:#24292F"> </span><span style="color:#0A6E4A">&quot;Missing API key. Pass it as \&quot;Authorization: Bearer sk_svgai_...\&quot; (create keys at https://svgai.org/dashboard/api).&quot;</span><span style="color:#24292F">
97  </span><span style="color:#57606A">}</span><span style="color:#24292F">
98</span><span style="color:#57606A">}</span></code></pre><button type="button" aria-label="Copy code to clipboard" class="absolute top-2 right-2 roun
98ded-md border bg-white p-1.5 transition-colors hover:bg-[#F3EFEB] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[#C2410C] focus-visible:ring-offset-1" style="border-color:#E7E1DB"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-copy h-3.5 w-3.5" style="color:#57606A"><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></div><div class="overflow-x-auto mb-4"><table class="w-full text-sm border-collapse"><thead><tr><th class="text-left font-semibold border-b border-gray-200 px-3 py-2 whitespace-nowrap text-gray-900">Type</th><th class="text-left font-semibold border-b border-gray-200 px-3 py-2 whitespace-nowrap text-gray-900">Status</th><th class="text-left font-semibold border-b border-gray-200 px-3 py-2 whitespace-nowrap text-gray-900">Meaning</th></tr></thead><tbody><tr><td class="border-b border-gray-100 px-3 py-2 align-top text-gray-700 font-mono">invalid_request</td><td class="border-b border-gray-100 px-3 py-2 align-top text-gray-700">400</td><td class="border-b border-gray-100 px-3 py-2 align-top text-gray-700">Malformed input; the message says which field.</td></tr><tr><td class="border-b border-gray-100 px-3 py-2 align-top text-gray-700 font-mono">authentication_error</td><td class="border-b border-gray-100 px-3 py-2 align-top text-gray-700">401</td><td class="border-b border-gray-100 px-3 py-2 align-top text-gray-700">Missing, invalid, or revoked API key.</td></tr><tr><td class="border-b border-gray-100 px-3 py-2 align-top text-gray-700 font-mono">insufficient_credits</td><td class="border-b border-gray-100 px-3 py-2 align-top text-gray-700">402</td><td class="border-b border-gray-100 px-3 py-2 align-top text-gray-700">Includes <code>credits_remaining</code> and <code>credits_required</code>.</td></tr><tr><td class="border-b border-gray-100 px-3 py-2 align-top text-gray-700 font-mono">payment_required</td><td class="border-b border-gray-100 px-3 py-2 align-top text-gray-700">402</td><td class="border-b border-gray-100 px-3 py-2 align-top text-gray-700">The account has never purchased — API &amp; MCP use paid credits. Includes <code>upgrade_url</code>.</td></tr><tr><td class="border-b border-gray-100 px-3 py-2 align-top text-gray-700 font-mono">not_found</td><td class="border-b border-gray-100 px-3 py-2 align-top text-gray-700">404</td><td class="border-b border-gray-100 px-3 py-2 align-top text-gray-700">The API endpoint does not exist, or no generation with that id exists for the authenticated account.</td></tr><tr><td class="border-b border-gray-100 px-3 py-2 align-top text-gray-700 font-mono">rate_limit_exceeded</td><td class="border-b border-gray-100 px-3 py-2 align-top text-gray-700">429</td><td class="border-b border-gray-100 px-3 py-2 align-top text-gray-700">May include <code>retry_after_seconds</code> and the matching <code>Retry-After</code> HTTP header. Follow the supplied delay when present.</td></tr><tr><td class="border-b border-gray-100 px-3 py-2 align-top text-gray-700 font-mono">generation_error</td><td class="border-b border-gray-100 px-3 py-2 align-top text-gray-700">502</td><td class="border-b border-gray-100 px-3 py-2 align-top text-gray-700">The pipeline failed; credits were refunded.</td></tr><tr><td class="border-b border-gray-100 px-3 py-2 align-top text-gray-700 font-mono">server_error</td><td class="border-b border-gray-100 px-3 py-2 align-top text-gray-700">500</td><td class="border-b border-gray-100 px-3 py-2 align-top text-gray-700">An unexpected failure; check an accepted generation before retrying.</td></tr></tbody></table></div><h3 class="text-lg font-semibold mb-2 mt-8 text-gray-900 flex items-center gap-2" id="rate-limits">Request rate limits</h3><p class="mb-3 text-gray-700">Authenticated REST responses can include <code>RateLimit-Policy</code> and <code>RateLimit</code>. These describe the account&#x27;s request limit, shared across its API keys; they count requests, not credits. The policy identifies its quota and window, while the observation gives remaining requests and a window hint in seconds.</p><p class="mb-3 text-gray-700">Headers are omitted when no valid, unexpired limiter observation is available, including before authentication, during a limiter outage, or after a long generation outlives the observation. Concurrent requests can change availability. Follow <code>Retry-After</code> <!-- -->when a rate-limit error includes it. Retrying an accepted generation can create another charged request; use its polling URL to retrieve the result. The header syntax follows the<!-- --> <a href="https://datatracker.ietf.org/doc/draft-ietf-httpapi-ratelimit-headers/" class="text-[#C2410C] underline underline-offset-2 hover:text-[#9A3412]">
98IETF HTTPAPI RateLimit draft</a>.</p><h2 class="text-2xl font-semibold mb-3 mt-14 scroll-mt-24 text-gray-900" id="mcp">MCP server (for AI assistants)</h2><p class="mb-3 text-gray-700">The MCP server at <code>https://www.svgai.org/api/mcp</code> exposes three tools —<!-- --> <code>generate_svg</code>, <code>vectorize_image</code>, and <code>get_credits</code> — over streamable HTTP. Authenticate with <a class="text-[#C2410C] underline underline-offset-2 hover:text-[#9A3412]" href="#oauth">OAuth</a> (just add the URL — the sign-in happens in your browser) or with an API key header. Every setup below is one-click in the <a class="text-[#C2410C] underline underline-offset-2 hover:text-[#9A3412]" href="/dashboard/api">console</a>.</p><p class="mb-3 text-sm text-gray-600">The public <a href="/server.json" class="text-[#C2410C] underline underline-offset-2 hover:text-[#9A3412]">server metadata</a> describes the endpoint and its connection details in MCP Registry format. OAuth discovery is available at<!-- --> <a href="/.well-known/oauth-protected-resource" class="text-[#C2410C] underline underline-offset-2 hover:text-[#9A3412]">protected-resource metadata</a> <!-- -->and <a href="/.well-known/oauth-authorization-server" class="text-[#C2410C] underline underline-offset-2 hover:text-[#9A3412]">authorization-server metadata</a>. Tool calls remain authenticated, and generation and vectorization require paid access.</p><h3 class="text-lg font-semibold mb-2 mt-8 text-gray-900 flex items-center gap-2"><svg viewBox="0 0 24 24" class="shrink-0 h-5 w-5" fill="#D97757" role="img" aria-label="Claude" focusable="false"><path d="M4.709 15.955l4.72-2.647.079-.23-.08-.128H9.2l-.79-.048-2.698-.073-2.339-.097-2.266-.122-.571-.121L0 11.784l.055-.352.48-.321.686.06 1.52.103 2.278.158 1.652.097 2.449.255h.389l.055-.157-.134-.098-.103-.097-2.358-1.596-2.552-1.688-1.337-.972-.724-.491-.364-.462-.157-1.006.655-.72.879.06.225.061.891.685 1.904 1.474 2.486 1.831.364.304.145-.103.019-.073-.164-.274-1.355-2.446-1.446-2.49-.644-1.032-.17-.619a2.97 2.97 0 0 1-.103-.729L6.283.134 6.696 0l.996.134.42.364.62.42 1.081 1.566 1.755 2.505.516.769.274.467.043.19.176.017.019-.109.14-1.865.255-2.29.249-2.946.085-.83.401-.972.797-.526.62.298.512.735-.073.474-.304 1.973-.596 3.093-.388 2.071h.225l.26-.26 1.054-1.4 1.76-2.19.79-.892.928-.984.596-.474h1.128l.83 1.232-.372 1.273-1.164 1.474-.964 1.25-1.383 1.86-.86 1.485.079.12.207-.018 3.13-.667 1.69-.303 2.016-.347.91.427.1.43-.36.892-2.16.534-2.535.507-3.77.892-.045.033.054.066 1.7.16.727.04h1.778l3.313.246.867.572.52.7-.088.532-1.334.68-1.799-.427-4.2-1.001-1.44-.359h-.2v.12l1.2 1.174 2.2 1.984 2.75 2.554.14.632-.35.497-.371-.055-2.406-1.808-.93-.816-2.101-1.766h-.14v.183l.485.71 2.553 3.83.13 1.177-.183.383-.657.23-.723-.132-1.485-2.086-1.532-2.346-1.236-2.104-.152.086-.732 7.882-.343.402-.79.304-.66-.5-.35-.812.35-1.601.42-2.086.34-1.657.31-2.06.185-.685-.013-.046-.152.018-1.557 2.14-2.372 3.202-1.874 2.006-.45.176-.777-.401.073-.716.432-.638 2.578-3.28.155-.208H8.71l-2.475 1.61-4.415 2.083-.772.075-.468-.44.058-.716.22-.232 1.82-1.25z"></path></svg> Claude Code</h3><div class="relative min-w-0 max-w-full rounded-lg border overflow-hidden " style="background:#FBFAF9;border-color:#E7E1DB"><pre tabindex="0" role="region" aria-label="bash snippet" class="overflow-x-auto font-mono focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[#C2410C] focus-visible:ring-inset p-4 pr-12 text-[13px] leading-[1.75]" style="color:#24292F;margin:0"><code style="color:#24292F;background:transparent;padding:0"><span style="color:#953800">claude</span><span style="color:#24292F"> mcp add </span><span style="color:#8250DF">--transport</span><span style="color:#24292F"> http svgai </span><span style="color:#0550AE">https://www.svgai.org/api/mcp</span><span style="color:#24292F"> </span><span style="color:#57606A">\</span><span style="color:#24292F">
99  </span><span style="color:#8250DF">--header</span><span style="color:#24292F"> </span><span style="color:#0A6E4A">&quot;Authorization: Bearer sk_svgai_...&quot;</span></code></pre><button type="button" aria-label="Copy code to clipboard" class="absolute top-2 right-2 roun
99ded-md border bg-white p-1.5 transition-colors hover:bg-[#F3EFEB] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[#C2410C] focus-visible:ring-offset-1" style="border-color:#E7E1DB"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-copy h-3.5 w-3.5" style="color:#57606A"><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></div><h3 class="text-lg font-semibold mb-2 mt-8 text-gray-900 flex items-center gap-2"><svg viewBox="0 0 24 24" class="shrink-0 h-5 w-5" fill="#D97757" role="img" aria-label="Claude" focusable="false"><path d="M4.709 15.955l4.72-2.647.079-.23-.08-.128H9.2l-.79-.048-2.698-.073-2.339-.097-2.266-.122-.571-.121L0 11.784l.055-.352.48-.321.686.06 1.52.103 2.278.158 1.652.097 2.449.255h.389l.055-.157-.134-.098-.103-.097-2.358-1.596-2.552-1.688-1.337-.972-.724-.491-.364-.462-.157-1.006.655-.72.879.06.225.061.891.685 1.904 1.474 2.486 1.831.364.304.145-.103.019-.073-.164-.274-1.355-2.446-1.446-2.49-.644-1.032-.17-.619a2.97 2.97 0 0 1-.103-.729L6.283.134 6.696 0l.996.134.42.364.62.42 1.081 1.566 1.755 2.505.516.769.274.467.043.19.176.017.019-.109.14-1.865.255-2.29.249-2.946.085-.83.401-.972.797-.526.62.298.512.735-.073.474-.304 1.973-.596 3.093-.388 2.071h.225l.26-.26 1.054-1.4 1.76-2.19.79-.892.928-.984.596-.474h1.128l.83 1.232-.372 1.273-1.164 1.474-.964 1.25-1.383 1.86-.86 1.485.079.12.207-.018 3.13-.667 1.69-.303 2.016-.347.91.427.1.43-.36.892-2.16.534-2.535.507-3.77.892-.045.033.054.066 1.7.16.727.04h1.778l3.313.246.867.572.52.7-.088.532-1.334.68-1.799-.427-4.2-1.001-1.44-.359h-.2v.12l1.2 1.174 2.2 1.984 2.75 2.554.14.632-.35.497-.371-.055-2.406-1.808-.93-.816-2.101-1.766h-.14v.183l.485.71 2.553 3.83.13 1.177-.183.383-.657.23-.723-.132-1.485-2.086-1.532-2.346-1.236-2.104-.152.086-.732 7.882-.343.402-.79.304-.66-.5-.35-.812.35-1.601.42-2.086.34-1.657.31-2.06.185-.685-.013-.046-.152.018-1.557 2.14-2.372 3.202-1.874 2.006-.45.176-.777-.401.073-.716.432-.638 2.578-3.28.155-.208H8.71l-2.475 1.61-4.415 2.083-.772.075-.468-.44.058-.716.22-.232 1.82-1.25z"></path></svg> Claude (claude.ai)</h3><p class="mb-3 text-gray-700 text-sm">Settings → Connectors → <em>Add custom connector</em> → URL<!-- --> <code>https://www.svgai.org/api/mcp</code> — no key needed: Claude walks you through SVG AI&#x27;s sign-in and consent screen (OAuth). Prefer a key? Add an<!-- --> <code>Authorization</code> header with value <code>Bearer sk_svgai_…</code> instead.</p><h3 class="text-lg font-semibold mb-2 mt-8 text-gray-900 flex items-center gap-2"><svg viewBox="0 0 24 24" class="shrink-0 h-5 w-5" fill="#000000" role="img" aria-label="ChatGPT" focusable="false"><path d="M22.2819 9.8211a5.9847 5.9847 0 0 0-.5157-4.9108 6.0462 6.0462 0 0 0-6.5098-2.9A6.0651 6.0651 0 0 0 4.9807 4.1818a5.9847 5.9847 0 0 0-3.9977 2.9 6.0462 6.0462 0 0 0 .7427 7.0966 5.98 5.98 0 0 0 .511 4.9107 6.051 6.051 0 0 0 6.5146 2.9001A5.9847 5.9847 0 0 0 13.2599 24a6.0557 6.0557 0 0 0 5.7718-4.2058 5.9894 5.9894 0 0 0 3.9977-2.9001 6.0557 6.0557 0 0 0-.7475-7.0729zm-9.022 12.6081a4.4755 4.4755 0 0 1-2.8764-1.0408l.1419-.0804 4.7783-2.7582a.7948.7948 0 0 0 .3927-.6813v-6.7369l2.02 1.1686a.071.071 0 0 1 .038.052v5.5826a4.504 4.504 0 0 1-4.4945 4.4944zm-9.6607-4.1254a4.4708 4.4708 0 0 1-.5346-3.0137l.142.0852 4.783 2.7582a.7712.7712 0 0 0 .7806 0l5.8428-3.3685v2.3324a.0804.0804 0 0 1-.0332.0615L9.74 19.9502a4.4992 4.4992 0 0 1-6.1408-1.6464zM2.3408 7.8956a4.485 4.485 0 0 1 2.3655-1.9728V11.6a.7664.7664 0 0 0 .3879.6765l5.8144 3.3543-2.0201 1.1685a.0757.0757 0 0 1-.071 0l-4.8303-2.7865A4.504 4.504 0 0 1 2.3408 7.872zm16.5963 3.8558L13.1038 8.364 15.1192 7.2a.0757.0757 0 0 1 .071 0l4.8303 2.7913a4.4944 4.4944 0 0 1-.6765 8.1042v-5.6772a.79.79 0 0 0-.407-.667zm2.0107-3.0231l-.142-.0852-4.7735-2.7818a.7759.7759 0 0 0-.7854 0L9.409 9.2297V6.8974a.0662.0662 0 0 1 .0284-.0615l4.8303-2.7866a4.4992 4.4992 0 0 1 6.6802 4.66zM8.3065 12.863l-2.02-1.1638a.0804.0804 0 0 1-.038-.0567V6.0742a4.4992 4.4992 0 0 1 7.3757-3.4537l-.142.0805L8.704 5.459a.7948.7948 0 0 0-.3927.6813zm
991.0976-2.3654l2.602-1.4998 2.6069 1.4998v2.9994l-2.5974 1.4997-2.6067-1.4997Z"></path></svg> ChatGPT (developer mode)</h3><p class="mb-3 text-gray-700 text-sm">Settings → Apps &amp; Connectors → enable Developer mode → <em>Create connector</em> with the same URL — OAuth sign-in works here too, or use the Authorization header.</p><h3 class="text-lg font-semibold mb-2 mt-8 text-gray-900 flex items-center gap-2"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-terminal h-5 w-5"><polyline points="4 17 10 11 4 5"></polyline><line x1="12" x2="20" y1="19" y2="19"></line></svg> Cursor, Windsurf, VS Code &amp; other MCP clients</h3><div class="relative min-w-0 max-w-full rounded-lg border overflow-hidden " style="background:#FBFAF9;border-color:#E7E1DB"><pre tabindex="0" role="region" aria-label="json snippet" class="overflow-x-auto font-mono focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[#C2410C] focus-visible:ring-inset p-4 pr-12 text-[13px] leading-[1.75]" style="color:#24292F;margin:0"><code style="color:#24292F;background:transparent;padding:0"><span style="color:#57606A">{</span><span style="color:#24292F">
100  </span><span style="color:#0550AE">&quot;mcpServers&quot;</span><span style="color:#57606A">:</span><span style="color:#24292F"> </span><span style="color:#57606A">{</span><span style="color:#24292F">
101    </span><span style="color:#0550AE">&quot;svgai&quot;</span><span style="color:#57606A">:</span><span style="color:#24292F"> </span><span style="color:#57606A">{</span><span style="color:#24292F">
102      </span><span style="color:#0550AE">&quot;url&quot;</span><span style="color:#57606A">:</span><span style="color:#24292F"> </span><span style="color:#0A6E4A">&quot;https://www.svgai.org/api/mcp&quot;</span><span style="color:#57606A">,</span><span style="color:#24292F">
103      </span><span style="color:#0550AE">&quot;headers&quot;</span><span style="color:#57606A">:</span><span style="color:#24292F"> </span><span style="color:#57606A">{</span><span style="color:#24292F"> </span><span style="color:#0550AE">&quot;Authorization&quot;</span><span style="color:#57606A">:</span><span style="color:#24292F"> </span><span style="color:#0A6E4A">&quot;Bearer sk_svgai_...&quot;</span><span style="color:#24292F"> </span><span style="color:#57606A">}</span><span style="color:#24292F">
104    </span><span style="color:#57606A">}</span><span style="color:#24292F">
105  </span><span style="color:#57606A">}</span><span style="color:#24292F">
106</span><span style="color:#57606A">}</span></code></pre><button type="button" aria-label="Copy code to clipboard" class="absolute top-2 right-2 rounded-md border bg-white p-1.5 transition-colors hover:bg-[#F3EFEB] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[#C2410C] focus-visible:ring-offset-1" style="border-color:#E7E1DB"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-copy h-3.5 w-3.5" style="color:#57606A"><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></div><div class="rounded-lg border border-gray-200 bg-gray-50 p-4 mt-10 text-sm text-gray-700"><p class="font-semibold mb-1 text-gray-900">Notes</p><ul class="list-disc pl-5 space-y-1"><li>Use <code>https://www.svgai.org</code> (with www) — the apex domain redirects.</li><li>Inspect the SVG at its intended size and in your target application before publishing or cutting it.</li><li>Questions or higher limits: <a class="text-[#C2410C] underline underline-offset-2 hover:text-[#9A3412]" href="/contact">contact us</a>.</li></ul></div></div><!--$--><!--/$--></main><footer class="border-t border-slate-200 bg-white"><div class="container py-12"><div class="grid grid-cols-1 md:grid-cols-5 gap-8"><div class="space-y-4"><div class="flex items-center gap-2 "><svg xmlns="http://www.w3.org/2000/svg" width="120" height="40" viewBox="35 65 133 38" role="img" aria-label="SVG AI" class="flex-shrink-0"><path d="m45 65 2 7 8 2-8 2-2 7-2-7-8-2 8-2Z" fill="#FF7043"></path><text x="60" y="95" font-family="Montserrat, sans-serif" font-weight="700" font-size="30" fill="#4E342E">SVG<tspan dx="8" fill="#FF7043">AI</tspan></text></svg></div><p class="text-sm text-slate-600 leading-relaxed">SVG AI helps you create professional vector graphics from text prompts, including logos, icons, illustrations, and text-to-SVG designs.</p></div><div><h2 class="font-bold text-slate-900 mb-4">Product</h2><ul class="space-y-2"><li><a class="text-sm text-slate-600 hover:text-primary transition-colors" href="/">AI SVG Generator</a></li><li><a class="text-sm text-secondary/70 hover:text-primary" href="/ai-icon-generator">AI Icon Generator</a></li><li><a class="text-sm text-secondary/70 hover:text-primary" href="/tools/svg-to-video">SVG to MP4 Converter</a></li><li><a class="text-sm text-secondary/70 hover:text-primary" href="/pricing">Pricing</a></li></ul></div><div><h2 class="font-semibold text-secondary mb-4">
106Popular Converters</h2><ul class="space-y-2"><li><a class="text-sm text-secondary/70 hover:text-primary" href="/convert/png-to-svg">PNG<!-- --> to <!-- -->SVG</a></li><li><a class="text-sm text-secondary/70 hover:text-primary" href="/convert/svg-to-png">SVG<!-- --> to <!-- -->PNG</a></li><li><a class="text-sm text-secondary/70 hover:text-primary" href="/convert/image-to-svg">Image<!-- --> to <!-- -->SVG</a></li><li><a class="text-sm text-secondary/70 hover:text-primary" href="/convert/svg-to-jpg">SVG<!-- --> to <!-- -->JPG</a></li><li><a class="text-sm text-secondary/70 hover:text-primary" href="/convert/svg-to-pdf">SVG<!-- --> to <!-- -->PDF</a></li><li><a class="text-sm text-secondary/70 hover:text-primary font-medium" href="/convert">View All →</a></li></ul></div><div><h2 class="font-semibold text-secondary mb-4">Resources</h2><ul class="space-y-2"><li><a class="text-sm text-secondary/70 hover:text-primary" href="/blog/guides/what-is-svg">What is SVG?</a></li><li><a class="text-sm text-secondary/70 hover:text-primary" href="/gallery">SVG Gallery</a></li><li><a class="text-sm text-secondary/70 hover:text-primary" href="/animate">SVG Animation</a></li><li><a class="text-sm text-secondary/70 hover:text-primary" href="/blog">Blog</a></li><li><a class="text-sm text-secondary/70 hover:text-primary" href="/blog">Learn Center</a></li><li><a class="text-sm text-secondary/70 hover:text-primary" href="/docs">API &amp; MCP Docs</a></li><li><a class="text-sm text-secondary/70 hover:text-primary" href="/sitemap">Sitemap</a></li></ul></div><div><h2 class="font-bold text-slate-900 mb-4">Legal</h2><ul class="space-y-2"><li><a class="text-sm text-secondary/70 hover:text-primary" href="/privacy">Privacy &amp; Cookies</a></li><li><a class="text-sm text-secondary/70 hover:text-primary" href="/terms">Terms of Service</a></li></ul></div></div><div class="mt-12 pt-8 border-t border-secondary/10 flex flex-col md:flex-row justify-between items-center"><p class="text-sm text-secondary/70"> <!-- -->2026<!-- --> SVG AI. All rights reserved.</p><div class="flex space-x-6 mt-4 md:mt-0"><a target="_blank" rel="noopener noreferrer" class="text-secondary/70 hover:text-primary transition-colors" href="https://x.com/svg_ai"><span class="sr-only">X (Twitter)</span><svg class="h-5 w-5" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"></path></svg></a><a target="_blank" rel="noopener noreferrer" class="text-secondary/70 hover:text-primary transition-colors" href="https://www.linkedin.com/company/svgai/"><span class="sr-only">LinkedIn</span><svg class="h-5 w-5" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path fill-rule="evenodd" d="M19 0h-14c-2.761 0-5 2.239-5 5v14c0 2.761 2.239 5 5 5h14c2.762 0 5-2.239 5-5v-14c0-2.761-2.238-5-5-5zm-11 19h-3v-11h3v11zm-1.5-12.268c-.966 0-1.75-.79-1.75-1.764s.784-1.764 1.75-1.764 1.75.79 1.75 1.764-.783 1.764-1.75 1.764zm13.5 12.268h-3v-5.604c0-3.368-4-3.113-4 0v5.604h-3v-11h3v1.765c1.396-2.586 7-2.777 7 2.476v6.759z" clip-rule="evenodd"></path></svg></a><a target="_blank" rel="noopener noreferrer" class="text-secondary/70 hover:text-primary transition-colors" href="https://www.youtube.com/@svg-ai"><span class="sr-only">YouTube</span><svg class="h-5 w-5" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path fill-rule="evenodd" d="M19.812 5.418c.861.23 1.538.907 1.768 1.768C21.998 8.746 22 12 22 12s0 3.255-.418 4.814a2.504 2.504 0 0 1-1.768 1.768c-1.56.419-7.814.419-7.814.419s-6.255 0-7.814-.419a2.505 2.505 0 0 1-1.768-1.768C2 15.255 2 12 2 12s0-3.255.417-4.814a2.507 2.507 0 0 1 1.768-1.768C5.744 5 11.998 5 11.998 5s6.255 0 7.814.418ZM15.194 12 10 15V9l5.194 3Z" clip-rule="evenodd"></path></svg></a><a target="_blank" rel="noopener noreferrer" class="text-secondary/70 hover:text-primary transition-colors" href="https://www.instagram.com/svgai_org/"><span class="sr-only">Instagram</span><svg class="h-5 w-5" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path fill-rule="evenodd" d="M12.315 2c2.43 0 2.784.013 3.808.06 1.064.049 1.791.218 2.427.465a4.902 4.902 0 011.772 1.153 4.902 4.902 0 011.153 1.772c.247.636.416 1.363.465 2.427.048 1.067.06 1.407.06 4.123v.08c0 2.643-.012 2.987-.06 4.043-.049 1.064-.218 1.791-.465 2.427a4.902 4.902 0 01-1.153 1.772 4.902 4.902 0 01-1.772 1.153c-.636.247-1.363.416-2.427.465-1.067.048-1.407.06-4.123.06h-.08c-2.643 0-2.987-.012-4.043-.06-1.064-.049-1.791-.218-2.427-.465a4.902 4.902 0 01-1.772-1.153 4.902 4.902 0 01-1.153-1.772c-.247-.636-.416-1.363-.465-2.427-.
106047-1.024-.06-1.379-.06-3.808v-.63c0-2.43.013-2.784.06-3.808.049-1.064.218-1.791.465-2.427a4.902 4.902 0 011.153-1.772A4.902 4.902 0 015.45 2.525c.636-.247 1.363-.416 2.427-.465C8.901 2.013 9.256 2 11.685 2h.63zm-.081 1.802h-.468c-2.456 0-2.784.011-3.807.058-.975.045-1.504.207-1.857.344-.467.182-.8.398-1.15.748-.35.35-.566.683-.748 1.15-.137.353-.3.882-.344 1.857-.047 1.023-.058 1.351-.058 3.807v.468c0 2.456.011 2.784.058 3.807.045.975.207 1.504.344 1.857.182.466.399.8.748 1.15.35.35.683.566 1.15.748.353.137.882.3 1.857.344 1.054.048 1.37.058 4.041.058h.08c2.597 0 2.917-.01 3.96-.058.976-.045 1.505-.207 1.858-.344.466-.182.8-.398 1.15-.748.35-.35.566-.683.748-1.15.137-.353.3-.882.344-1.857.048-1.055.058-1.37.058-4.041v-.08c0-2.597-.01-2.917-.058-3.96-.045-.976-.207-1.505-.344-1.858a3.097 3.097 0 00-.748-1.15 3.098 3.098 0 00-1.15-.748c-.353-.137-.882-.3-1.857-.344-1.023-.047-1.351-.058-3.807-.058zM12 6.865a5.135 5.135 0 110 10.27 5.135 5.135 0 010-10.27zm0 1.802a3.333 3.333 0 100 6.666 3.333 3.333 0 000-6.666zm5.338-3.205a1.2 1.2 0 110 2.4 1.2 1.2 0 010-2.4z" clip-rule="evenodd"></path></svg></a></div></div></div></footer></div><section aria-label="Notifications alt+T" tabindex="-1" aria-live="polite" aria-relevant="additions text" aria-atomic="false"></section>
106<script src="/_next/static/chunks/runtime-cb15f00cbb312227.js?dpl=dpl_CQhZ8Y4EW7frp1M22TRBFWL627Ps" id="_R_" async=""></script>
106<script>(self.__next_f=self.__next_f||[]).push([0])</script>
106<script>self.__next_f.push([1,"1:\"$Sreact.fragment\"\n"])</script>
106<script>self.__next_f.push([1,"2:I[69243,[\"4758\",\"static/chunks/radix-vendor-3009f6d361c8a98e.js?dpl=dpl_CQhZ8Y4EW7frp1M22TRBFWL627Ps\",\"6436\",\"static/chunks/supabase-vendor-2f0306d498af61e1.js?dpl=dpl_CQhZ8Y4EW7frp1M22TRBFWL627Ps\",\"6874\",\"static/chunks/6874-414075bb21e16c80.js?dpl=dpl_CQhZ8Y4EW7frp1M22TRBFWL627Ps\",\"4026\",\"static/chunks/4026-358ce823383b6f2b.js?dpl=dpl_CQhZ8Y4EW7frp1M22TRBFWL627Ps\",\"6424\",\"static/chunks/6424-529c9cfbfcf784f1.js?dpl=dpl_CQhZ8Y4EW7frp1M22TRBFWL627Ps\",\"4134\",\"static/chunks/4134-18351f2dad14e83e.js?dpl=dpl_CQhZ8Y4EW7frp1M22TRBFWL627Ps\",\"6671\",\"static/chunks/6671-50f9186009556c9d.js?dpl=dpl_CQhZ8Y4EW7frp1M22TRBFWL627Ps\",\"7651\",\"static/chunks/7651-a1bbf35361e04f93.js?dpl=dpl_CQhZ8Y4EW7frp1M22TRBFWL627Ps\",\"5511\",\"static/chunks/5511-b0ec78b9e31519dd.js?dpl=dpl_CQhZ8Y4EW7frp1M22TRBFWL627Ps\",\"4386\",\"static/chunks/4386-2336225232e457bf.js?dpl=dpl_CQhZ8Y4EW7frp1M22TRBFWL627Ps\",\"8507\",\"static/chunks/8507-78e68a657eca8a06.js?dpl=dpl_CQhZ8Y4EW7frp1M22TRBFWL627Ps\",\"9039\",\"static/chunks/9039-70fc9756df5ca513.js?dpl=dpl_CQhZ8Y4EW7frp1M22TRBFWL627Ps\",\"6835\",\"static/chunks/6835-15c0e621cd170a40.js?dpl=dpl_CQhZ8Y4EW7frp1M22TRBFWL627Ps\",\"5138\",\"static/chunks/5138-b1a384ab2f900d33.js?dpl=dpl_CQhZ8Y4EW7frp1M22TRBFWL627Ps\",\"1620\",\"static/chunks/1620-9ba8031b03d33110.js?dpl=dpl_CQhZ8Y4EW7frp1M22TRBFWL627Ps\",\"4693\",\"static/chunks/4693-dd7f5164af7dd305.js?dpl=dpl_CQhZ8Y4EW7frp1M22TRBFWL627Ps\",\"7177\",\"static/chunks/app/layout-a89010dcd425a718.js?dpl=dpl_CQhZ8Y4EW7frp1M22TRBFWL627Ps\"],\"\"]\n"])</script>
106<script>self.__next_f.push([1,"13:I[28393,[],\"\"]\n:HL[\"/_next/static/media/904be59b21bd51cb-s.p.woff2?dpl=dpl_CQhZ8Y4EW7frp1M22TRBFWL627Ps\",\"font\",{\"crossOrigin\":\"\",\"type\":\"font/woff2\"}]\n:HL[\"/_next/static/css/bb2f0d8a91d14310.css?dpl=dpl_CQhZ8Y4EW7frp1M22TRBFWL627Ps\",\"style\"]\n:HL[\"/_next/static/css/5881a33f3d38c51c.css?dpl=dpl_CQhZ8Y4EW7frp1M22TRBFWL627Ps\",\"style\"]\n3:Tc00,"])</script>
106<script>self.__next_f.push([1,"\n          * { margin: 0; padding: 0; box-sizing: border-box; }\n          :root { \n            --font-montserrat: Montserrat, system-ui, -apple-system, sans-serif;\n            font-synthesis: none;\n            text-rendering: optimizeLegibility;\n            -webkit-font-smoothing: antialiased;\n            -moz-osx-font-smoothing: grayscale;\n          }\n          html { font-family: var(--font-montserrat); }\n          body { background: #fff; color: #111827; line-height: 1.5; }\n          .container { max-width: 1200px; margin: 0 auto; padding: 0 1rem; }\n          .text-center { text-align: center; }\n          .font-bold { font-weight: 700; }\n          /* Prevent FOUC - Use 0.01 to avoid Lighthouse NO_LCP bug */\n          .opacity-0 { opacity: 0.01; }\n          .opacity-100 { opacity: 1; }\n          .mb-4 { margin-bottom: 1rem; }\n          .mb-6 { margin-bottom: 1.5rem; }\n          .py-6 { padding-top: 1.5rem; padding-bottom: 1.5rem; }\n          .px-4 { padding-left: 1rem; padding-right: 1rem; }\n          .bg-white { background: white; }\n          /* Critical styles for hero section */\n          .text-4xl { font-size: 2.25rem; line-height: 2.5rem; }\n          .text-5xl { font-size: 3rem; line-height: 1; }\n          .text-6xl { font-size: 3.75rem; line-height: 1; }\n          .text-black { color: #000; }\n          .bg-gradient-to-r { background-image: linear-gradient(to right, var(--tw-gradient-stops)); }\n          .from-[#FF7043] { --tw-gradient-from: #FF7043; }\n          .to-[#FFA726] { --tw-gradient-to: #FFA726; }\n          .text-transparent { color: transparent; }\n          .bg-clip-text { -webkit-background-clip: text; background-clip: text; }\n          .rounded-lg { border-radius: 0.5rem; }\n          .shadow-sm { box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05); }\n          .border { border-width: 1px; }\n          .border-gray-100 { border-color: #f3f4f6; }\n          /* Ensure hero section is immediately visible */\n          section { opacity: 1 !important; animation: none !important; }\n          .rounded-lg { border-radius: 0.5rem; }\n          .shadow-sm { box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05); }\n          .border { border: 1px solid #e5e7eb; }\n          .border-gray-100 { border-color: #f3f4f6; }\n          .text-gray-900 { color: #111827; }\n          .text-gray-600 { color: #4b5563; }\n          .text-3xl { font-size: 1.875rem; line-height: 2.25rem; }\n          .text-lg { font-size: 1.125rem; line-height: 1.75rem; }\n          .min-h-screen { min-height: 100vh; }\n          .flex { display: flex; }\n          /* .flex-col is deliberately NOT redefined here: this inline block is\n             injected after the Tailwind stylesheet, so an equal-specificity copy\n             of it beat every responsive .sm|md|lg:flex-row and pinned ~56 rows\n             across the site to a column at all widths. */\n          .flex-1 { flex: 1 1 0%; }\n          @media (min-width: 768px) {\n            .md\\:text-5xl { font-size: 3rem; line-height: 1; }\n            .md\\:py-10 { padding-top: 2.5rem; padding-bottom: 2.5rem; }\n          }\n        "])</script>
106<script>self.__next_f.push([1,"0:{\"P\":null,\"b\":\"ga0SI_hi0cZMytOlIVVM_\",\"p\":\"\",\"c\":[\"\",\"docs\"],\"i\":false,\"f\":[[[\"\",{\"children\":[\"docs\",{\"children\":[\"__PAGE__\",{}]}]},\"$undefined\",\"$undefined\",true],[\"\",[\"$\",\"$1\",\"c\",{\"children\":[[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/css/bb2f0d8a91d14310.css?dpl=dpl_CQhZ8Y4EW7frp1M22TRBFWL627Ps\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\",\"nonce\":\"$undefined\"}],[\"$\",\"link\",\"1\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/css/5881a33f3d38c51c.css?dpl=dpl_CQhZ8Y4EW7frp1M22TRBFWL627Ps\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\",\"nonce\":\"$undefined\"}]],[\"$\",\"html\",null,{\"lang\":\"en\",\"className\":\"__variable_fed136\",\"suppressHydrationWarning\":true,\"children\":[[\"$\",\"head\",null,{\"children\":[[\"$\",\"$L2\",null,{\"defer\":true,\"data-website-id\":\"68c99253b4957a25c4266452\",\"data-domain\":\"www.svgai.org\",\"src\":\"https://datafa.st/js/script.js\",\"strategy\":\"afterInteractive\"}],[\"$\",\"style\",null,{\"suppressHydrationWarning\":true,\"dangerouslySetInnerHTML\":{\"__html\":\"$3\"}}],\"$L4\",\"$L5\",\"$L6\",\"$L7\",\"$L8\",\"$L9\",\"$La\",\"$Lb\",\"$Lc\",\"$Ld\"]}],\"$Le\",\"$Lf\"]}]]}],{\"children\":[\"docs\",\"$L10\",{\"children\":[\"__PAGE__\",\"$L11\",{},null,false]},null,false]},null,false],\"$L12\",false]],\"m\":\"$undefined\",\"G\":[\"$13\",[]],\"s\":false,\"S\":true}\n"])</script>
106<script>self.__next_f.push([1,"14:I[60310,[\"4758\",\"static/chunks/radix-vendor-3009f6d361c8a98e.js?dpl=dpl_CQhZ8Y4EW7frp1M22TRBFWL627Ps\",\"6436\",\"static/chunks/supabase-vendor-2f0306d498af61e1.js?dpl=dpl_CQhZ8Y4EW7frp1M22TRBFWL627Ps\",\"6874\",\"static/chunks/6874-414075bb21e16c80.js?dpl=dpl_CQhZ8Y4EW7frp1M22TRBFWL627Ps\",\"4026\",\"static/chunks/4026-358ce823383b6f2b.js?dpl=dpl_CQhZ8Y4EW7frp1M22TRBFWL627Ps\",\"6424\",\"static/chunks/6424-529c9cfbfcf784f1.js?dpl=dpl_CQhZ8Y4EW7frp1M22TRBFWL627Ps\",\"4134\",\"static/chunks/4134-18351f2dad14e83e.js?dpl=dpl_CQhZ8Y4EW7frp1M22TRBFWL627Ps\",\"6671\",\"static/chunks/6671-50f9186009556c9d.js?dpl=dpl_CQhZ8Y4EW7frp1M22TRBFWL627Ps\",\"7651\",\"static/chunks/7651-a1bbf35361e04f93.js?dpl=dpl_CQhZ8Y4EW7frp1M22TRBFWL627Ps\",\"5511\",\"static/chunks/5511-b0ec78b9e31519dd.js?dpl=dpl_CQhZ8Y4EW7frp1M22TRBFWL627Ps\",\"4386\",\"static/chunks/4386-2336225232e457bf.js?dpl=dpl_CQhZ8Y4EW7frp1M22TRBFWL627Ps\",\"8507\",\"static/chunks/8507-78e68a657eca8a06.js?dpl=dpl_CQhZ8Y4EW7frp1M22TRBFWL627Ps\",\"9039\",\"static/chunks/9039-70fc9756df5ca513.js?dpl=dpl_CQhZ8Y4EW7frp1M22TRBFWL627Ps\",\"6835\",\"static/chunks/6835-15c0e621cd170a40.js?dpl=dpl_CQhZ8Y4EW7frp1M22TRBFWL627Ps\",\"5138\",\"static/chunks/5138-b1a384ab2f900d33.js?dpl=dpl_CQhZ8Y4EW7frp1M22TRBFWL627Ps\",\"1620\",\"static/chunks/1620-9ba8031b03d33110.js?dpl=dpl_CQhZ8Y4EW7frp1M22TRBFWL627Ps\",\"4693\",\"static/chunks/4693-dd7f5164af7dd305.js?dpl=dpl_CQhZ8Y4EW7frp1M22TRBFWL627Ps\",\"7177\",\"static/chunks/app/layout-a89010dcd425a718.js?dpl=dpl_CQhZ8Y4EW7frp1M22TRBFWL627Ps\"],\"Providers\"]\n"])</script>
106<script>self.__next_f.push([1,"15:I[56332,[\"4758\",\"static/chunks/radix-vendor-3009f6d361c8a98e.js?dpl=dpl_CQhZ8Y4EW7frp1M22TRBFWL627Ps\",\"6436\",\"static/chunks/supabase-vendor-2f0306d498af61e1.js?dpl=dpl_CQhZ8Y4EW7frp1M22TRBFWL627Ps\",\"6874\",\"static/chunks/6874-414075bb21e16c80.js?dpl=dpl_CQhZ8Y4EW7frp1M22TRBFWL627Ps\",\"4026\",\"static/chunks/4026-358ce823383b6f2b.js?dpl=dpl_CQhZ8Y4EW7frp1M22TRBFWL627Ps\",\"6424\",\"static/chunks/6424-529c9cfbfcf784f1.js?dpl=dpl_CQhZ8Y4EW7frp1M22TRBFWL627Ps\",\"4134\",\"static/chunks/4134-18351f2dad14e83e.js?dpl=dpl_CQhZ8Y4EW7frp1M22TRBFWL627Ps\",\"6671\",\"static/chunks/6671-50f9186009556c9d.js?dpl=dpl_CQhZ8Y4EW7frp1M22TRBFWL627Ps\",\"7651\",\"static/chunks/7651-a1bbf35361e04f93.js?dpl=dpl_CQhZ8Y4EW7frp1M22TRBFWL627Ps\",\"5511\",\"static/chunks/5511-b0ec78b9e31519dd.js?dpl=dpl_CQhZ8Y4EW7frp1M22TRBFWL627Ps\",\"4386\",\"static/chunks/4386-2336225232e457bf.js?dpl=dpl_CQhZ8Y4EW7frp1M22TRBFWL627Ps\",\"8507\",\"static/chunks/8507-78e68a657eca8a06.js?dpl=dpl_CQhZ8Y4EW7frp1M22TRBFWL627Ps\",\"9039\",\"static/chunks/9039-70fc9756df5ca513.js?dpl=dpl_CQhZ8Y4EW7frp1M22TRBFWL627Ps\",\"6835\",\"static/chunks/6835-15c0e621cd170a40.js?dpl=dpl_CQhZ8Y4EW7frp1M22TRBFWL627Ps\",\"5138\",\"static/chunks/5138-b1a384ab2f900d33.js?dpl=dpl_CQhZ8Y4EW7frp1M22TRBFWL627Ps\",\"1620\",\"static/chunks/1620-9ba8031b03d33110.js?dpl=dpl_CQhZ8Y4EW7frp1M22TRBFWL627Ps\",\"4693\",\"static/chunks/4693-dd7f5164af7dd305.js?dpl=dpl_CQhZ8Y4EW7frp1M22TRBFWL627Ps\",\"7177\",\"static/chunks/app/layout-a89010dcd425a718.js?dpl=dpl_CQhZ8Y4EW7frp1M22TRBFWL627Ps\"],\"NavbarWrapper\"]\n"])</script>
106<script>self.__next_f.push([1,"16:I[87555,[],\"\"]\n17:I[96678,[\"4758\",\"static/chunks/radix-vendor-3009f6d361c8a98e.js?dpl=dpl_CQhZ8Y4EW7frp1M22TRBFWL627Ps\",\"6874\",\"static/chunks/6874-414075bb21e16c80.js?dpl=dpl_CQhZ8Y4EW7frp1M22TRBFWL627Ps\",\"4026\",\"static/chunks/4026-358ce823383b6f2b.js?dpl=dpl_CQhZ8Y4EW7frp1M22TRBFWL627Ps\",\"8039\",\"static/chunks/app/error-c87d8a20314c891a.js?dpl=dpl_CQhZ8Y4EW7frp1M22TRBFWL627Ps\"],\"default\"]\n18:I[31295,[],\"\"]\n19:I[58839,[\"4758\",\"static/chunks/radix-vendor-3009f6d361c8a98e.js?dpl=dpl_CQhZ8Y4EW7frp1M22TRBFWL627Ps\",\"6874\",\"static/chunks/6874-414075bb21e16c80.js?dpl=dpl_CQhZ8Y4EW7frp1M22TRBFWL627Ps\",\"4026\",\"static/chunks/4026-358ce823383b6f2b.js?dpl=dpl_CQhZ8Y4EW7frp1M22TRBFWL627Ps\",\"4345\",\"static/chunks/app/not-found-54cded897eae35c3.js?dpl=dpl_CQhZ8Y4EW7frp1M22TRBFWL627Ps\"],\"default\"]\n"])</script>
106<script>self.__next_f.push([1,"1a:I[56332,[\"4758\",\"static/chunks/radix-vendor-3009f6d361c8a98e.js?dpl=dpl_CQhZ8Y4EW7frp1M22TRBFWL627Ps\",\"6436\",\"static/chunks/supabase-vendor-2f0306d498af61e1.js?dpl=dpl_CQhZ8Y4EW7frp1M22TRBFWL627Ps\",\"6874\",\"static/chunks/6874-414075bb21e16c80.js?dpl=dpl_CQhZ8Y4EW7frp1M22TRBFWL627Ps\",\"4026\",\"static/chunks/4026-358ce823383b6f2b.js?dpl=dpl_CQhZ8Y4EW7frp1M22TRBFWL627Ps\",\"6424\",\"static/chunks/6424-529c9cfbfcf784f1.js?dpl=dpl_CQhZ8Y4EW7frp1M22TRBFWL627Ps\",\"4134\",\"static/chunks/4134-18351f2dad14e83e.js?dpl=dpl_CQhZ8Y4EW7frp1M22TRBFWL627Ps\",\"6671\",\"static/chunks/6671-50f9186009556c9d.js?dpl=dpl_CQhZ8Y4EW7frp1M22TRBFWL627Ps\",\"7651\",\"static/chunks/7651-a1bbf35361e04f93.js?dpl=dpl_CQhZ8Y4EW7frp1M22TRBFWL627Ps\",\"5511\",\"static/chunks/5511-b0ec78b9e31519dd.js?dpl=dpl_CQhZ8Y4EW7frp1M22TRBFWL627Ps\",\"4386\",\"static/chunks/4386-2336225232e457bf.js?dpl=dpl_CQhZ8Y4EW7frp1M22TRBFWL627Ps\",\"8507\",\"static/chunks/8507-78e68a657eca8a06.js?dpl=dpl_CQhZ8Y4EW7frp1M22TRBFWL627Ps\",\"9039\",\"static/chunks/9039-70fc9756df5ca513.js?dpl=dpl_CQhZ8Y4EW7frp1M22TRBFWL627Ps\",\"6835\",\"static/chunks/6835-15c0e621cd170a40.js?dpl=dpl_CQhZ8Y4EW7frp1M22TRBFWL627Ps\",\"5138\",\"static/chunks/5138-b1a384ab2f900d33.js?dpl=dpl_CQhZ8Y4EW7frp1M22TRBFWL627Ps\",\"1620\",\"static/chunks/1620-9ba8031b03d33110.js?dpl=dpl_CQhZ8Y4EW7frp1M22TRBFWL627Ps\",\"4693\",\"static/chunks/4693-dd7f5164af7dd305.js?dpl=dpl_CQhZ8Y4EW7frp1M22TRBFWL627Ps\",\"7177\",\"static/chunks/app/layout-a89010dcd425a718.js?dpl=dpl_CQhZ8Y4EW7frp1M22TRBFWL627Ps\"],\"FooterWrapper\"]\n"])</script>
106<script>self.__next_f.push([1,"1b:I[26259,[\"4758\",\"static/chunks/radix-vendor-3009f6d361c8a98e.js?dpl=dpl_CQhZ8Y4EW7frp1M22TRBFWL627Ps\",\"6436\",\"static/chunks/supabase-vendor-2f0306d498af61e1.js?dpl=dpl_CQhZ8Y4EW7frp1M22TRBFWL627Ps\",\"6874\",\"static/chunks/6874-414075bb21e16c80.js?dpl=dpl_CQhZ8Y4EW7frp1M22TRBFWL627Ps\",\"4026\",\"static/chunks/4026-358ce823383b6f2b.js?dpl=dpl_CQhZ8Y4EW7frp1M22TRBFWL627Ps\",\"6424\",\"static/chunks/6424-529c9cfbfcf784f1.js?dpl=dpl_CQhZ8Y4EW7frp1M22TRBFWL627Ps\",\"4134\",\"static/chunks/4134-18351f2dad14e83e.js?dpl=dpl_CQhZ8Y4EW7frp1M22TRBFWL627Ps\",\"6671\",\"static/chunks/6671-50f9186009556c9d.js?dpl=dpl_CQhZ8Y4EW7frp1M22TRBFWL627Ps\",\"7651\",\"static/chunks/7651-a1bbf35361e04f93.js?dpl=dpl_CQhZ8Y4EW7frp1M22TRBFWL627Ps\",\"5511\",\"static/chunks/5511-b0ec78b9e31519dd.js?dpl=dpl_CQhZ8Y4EW7frp1M22TRBFWL627Ps\",\"4386\",\"static/chunks/4386-2336225232e457bf.js?dpl=dpl_CQhZ8Y4EW7frp1M22TRBFWL627Ps\",\"8507\",\"static/chunks/8507-78e68a657eca8a06.js?dpl=dpl_CQhZ8Y4EW7frp1M22TRBFWL627Ps\",\"9039\",\"static/chunks/9039-70fc9756df5ca513.js?dpl=dpl_CQhZ8Y4EW7frp1M22TRBFWL627Ps\",\"6835\",\"static/chunks/6835-15c0e621cd170a40.js?dpl=dpl_CQhZ8Y4EW7frp1M22TRBFWL627Ps\",\"5138\",\"static/chunks/5138-b1a384ab2f900d33.js?dpl=dpl_CQhZ8Y4EW7frp1M22TRBFWL627Ps\",\"1620\",\"static/chunks/1620-9ba8031b03d33110.js?dpl=dpl_CQhZ8Y4EW7frp1M22TRBFWL627Ps\",\"4693\",\"static/chunks/4693-dd7f5164af7dd305.js?dpl=dpl_CQhZ8Y4EW7frp1M22TRBFWL627Ps\",\"7177\",\"static/chunks/app/layout-a89010dcd425a718.js?dpl=dpl_CQhZ8Y4EW7frp1M22TRBFWL627Ps\"],\"GoogleAnalytics\"]\n"])</script>
106<script>self.__next_f.push([1,"1c:I[6874,[\"4758\",\"static/chunks/radix-vendor-3009f6d361c8a98e.js?dpl=dpl_CQhZ8Y4EW7frp1M22TRBFWL627Ps\",\"6874\",\"static/chunks/6874-414075bb21e16c80.js?dpl=dpl_CQhZ8Y4EW7frp1M22TRBFWL627Ps\",\"4026\",\"static/chunks/4026-358ce823383b6f2b.js?dpl=dpl_CQhZ8Y4EW7frp1M22TRBFWL627Ps\",\"9040\",\"static/chunks/app/docs/page-7d99a1400e88a1f9.js?dpl=dpl_CQhZ8Y4EW7frp1M22TRBFWL627Ps\"],\"\"]\n61:I[59665,[],\"ViewportBoundary\"]\n63:I[59665,[],\"MetadataBoundary\"]\n64:\"$Sreact.suspense\"\n4:[\"$\",\"link\",null,{\"rel\":\"preconnect\",\"href\":\"https://svgai.supabase.co\"}]\n5:[\"$\",\"link\",null,{\"rel\":\"dns-prefetch\",\"href\":\"https://vitals.vercel-insights.com\"}]\n6:[\"$\",\"link\",null,{\"rel\":\"dns-prefetch\",\"href\":\"https://va.vercel-scripts.com\"}]\n7:[\"$\",\"link\",null,{\"rel\":\"icon\",\"href\":\"/favicon-192x192.png\",\"type\":\"image/png\",\"sizes\":\"192x192\"}]\n8:[\"$\",\"link\",null,{\"rel\":\"icon\",\"href\":\"/favicon-96x96.png\",\"type\":\"image/png\",\"sizes\":\"96x96\"}]\n9:[\"$\",\"link\",null,{\"rel\":\"icon\",\"href\":\"/favicon.svg\",\"type\":\"image/svg+xml\"}]\na:[\"$\",\"link\",null,{\"rel\":\"alternate icon\",\"href\":\"/favicon.ico\"}]\nb:[\"$\",\"link\",null,{\"rel\":\"apple-touch-icon\",\"href\":\"/apple-touch-icon.png\",\"sizes\":\"180x180\"}]\nc:[\"$\",\"link\",null,{\"rel\":\"manifest\",\"href\":\"/site.webmanifest\"}]\nd:[\"$\",\"meta\",null,{\"property\":\"og:site_name\",\"content\":\"SVG AI\"}]\ne:[\"$\",\"body\",null,{\"className\":\"font-sans overflow-x-hidden\",\"suppressHydrationWarning\":true,\"children\":[[\"$\",\"$L14\",null,{\"children\":[\"$\",\"div\",null,{\"className\":\"flex flex-col min-h-screen\",\"children\":[[\"$\",\"$L15\",null,{}],[\"$\",\"main\",null,{\"className\":\"flex-1 bg-background\",\"children\":[\"$\",\"$L16\",null,{\"parallelRouterKey\":\"children\",\"error\":\"$17\",\"errorStyles\":[],\"errorScripts\":[],\"template\":[\"$\",\"$L18\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":[[\"$\",\"$L19\",null,{}],[]],\"forbidden\":\"$undefined\",\"unauthorized\":\"$undefined\"}]}],[\"$\",\"$L1a\",null,{}]]}]}],false]}]\nf:[\"$\",\"$L1b\",null,{\"gaId\":\"G-KMK5TEJH2Q\"}]\n10:[\"$\",\"$1\",\"c\",{\"children\":[null,[\"$\",\"$L16\",null,{\"parallelRouterKey\":\"children\",\"error\":\"$undefined\",\"erro"])</script>
106<script>self.__next_f.push([1,"rStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L18\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":\"$undefined\",\"forbidden\":\"$undefined\",\"unauthorized\":\"$undefined\"}]]}]\n"])</script>
106<script>self.__next_f.push([1,"11:[\"$\",\"$1\",\"c\",{\"children\":[[[\"$\",\"script\",null,{\"type\":\"application/ld+json\",\"dangerouslySetInnerHTML\":{\"__html\":\"{\\\"@context\\\":\\\"https://schema.org\\\",\\\"@type\\\":\\\"BreadcrumbList\\\",\\\"itemListElement\\\":[{\\\"@type\\\":\\\"ListItem\\\",\\\"position\\\":1,\\\"name\\\":\\\"Home\\\",\\\"item\\\":\\\"https://www.svgai.org\\\"},{\\\"@type\\\":\\\"ListItem\\\",\\\"position\\\":2,\\\"name\\\":\\\"API Documentation\\\",\\\"item\\\":\\\"https://www.svgai.org/docs\\\"}]}\"}}],[\"$\",\"div\",null,{\"className\":\"container mx-auto px-4 py-12 max-w-4xl\",\"children\":[[\"$\",\"p\",null,{\"className\":\"text-sm font-medium text-[#C2410C] uppercase tracking-wide mb-2\",\"children\":\"Developer documentation\"}],[\"$\",\"h1\",null,{\"className\":\"text-4xl font-bold mb-4 text-gray-900\",\"children\":\"SVG AI API \u0026 MCP Server\"}],[\"$\",\"p\",null,{\"className\":\"text-lg text-gray-600 mb-8 max-w-2xl\",\"children\":[\"Use SVG AI from your own code or from AI assistants. Two capabilities:\",\" \",[\"$\",\"strong\",null,{\"children\":\"generate\"}],\" designs a new SVG from a text brief, an image, or both;\",\" \",[\"$\",\"strong\",null,{\"children\":\"vectorize\"}],\" traces an existing image into SVG paths.\"]}],[\"$\",\"div\",null,{\"className\":\"rounded-lg border border-gray-200 bg-gray-50 p-4 mb-10 text-sm\",\"children\":[[\"$\",\"p\",null,{\"className\":\"font-semibold mb-1 text-gray-900\",\"children\":\"Quick facts\"}],[\"$\",\"ul\",null,{\"className\":\"list-disc pl-5 space-y-1 text-gray-700\",\"children\":[[\"$\",\"li\",null,{\"children\":[\"Base URL: \",[\"$\",\"code\",null,{\"className\":\"font-mono\",\"children\":\"https://www.svgai.org\"}]]}],[\"$\",\"li\",null,{\"children\":[\"MCP endpoint: \",[\"$\",\"code\",null,{\"className\":\"font-mono\",\"children\":\"https://www.svgai.org/api/mcp\"}],\" (streamable HTTP)\"]}],[\"$\",\"li\",null,{\"children\":[\"Auth: an API key from the \",[\"$\",\"$L1c\",null,{\"href\":\"/dashboard/api\",\"className\":\"text-[#C2410C] underline underline-offset-2 hover:text-[#9A3412]\",\"children\":\"API \u0026 MCP console\"}],\", sent as \",[\"$\",\"code\",null,{\"className\":\"font-mono\",\"children\":\"Authorization: Bearer sk_svgai_…\"}]]}],[\"$\",\"li\",null,{\"children\":[\"API \u0026 MCP generation and vectorization use your SVG AI credit balance and require paid account access through a subscription or credit purchase. Website starter credits alone do not unlock API use; an account without a purchase receives \",[\"$\",\"code\",null,{\"className\":\"font-mono\",\"children\":\"402 payment_required\"}],\". \",[\"$\",\"$L1c\",null,{\"href\":\"/pricing\",\"className\":\"text-[#C2410C] underline underline-offset-2 hover:text-[#9A3412]\",\"children\":\"View plans and credit packs\"}]]}],[\"$\",\"li\",null,{\"children\":[\"No code needed to try it: the \",[\"$\",\"$L1c\",null,{\"href\":\"/dashboard/api\",\"className\":\"text-[#C2410C] underline underline-offset-2 hover:text-[#9A3412]\",\"children\":\"console\"}],\" has one-click setup and a live playground.\"]}]]}]]}],[\"$\",\"nav\",null,{\"aria-label\":\"Developer documentation\",\"className\":\"mb-8 text-sm text-gray-700\",\"children\":[[\"$\",\"p\",null,{\"className\":\"font-semibold mb-2 text-gray-900\",\"children\":\"Reference and discovery\"}],[\"$\",\"ul\",null,{\"className\":\"flex flex-wrap gap-x-5 gap-y-2\",\"children\":[[\"$\",\"li\",null,{\"children\":[\"$\",\"a\",null,{\"href\":\"/openapi.json\",\"className\":\"text-[#C2410C] underline underline-offset-2 hover:text-[#9A3412]\",\"children\":\"OpenAPI specification\"}]}],[\"$\",\"li\",null,{\"children\":[\"$\",\"a\",null,{\"href\":\"/api/v1\",\"className\":\"text-[#C2410C] underline underline-offset-2 hover:text-[#9A3412]\",\"children\":\"API endpoint index (JSON)\"}]}],[\"$\",\"li\",null,{\"children\":[\"$\",\"a\",null,{\"href\":\"/llms.txt\",\"className\":\"text-[#C2410C] underline underline-offset-2 hover:text-[#9A3412]\",\"children\":\"Agent guide (llms.txt)\"}]}],[\"$\",\"li\",null,{\"children\":[\"$\",\"a\",null,{\"href\":\"/agents.md\",\"className\":\"text-[#C2410C] underline underline-offset-2 hover:text-[#9A3412]\",\"children\":\"Agent workflow instructions\"}]}],[\"$\",\"li\",null,{\"children\":[\"$\",\"a\",null,{\"href\":\"/auth.md\",\"className\":\"text-[#C2410C] underline underline-offset-2 hover:text-[#9A3412]\",\"children\":\"Authentication reference (Markdown)\"}]}],[\"$\",\"li\",null,{\"children\":[\"$\",\"a\",null,{\"href\":\"/docs.md\",\"className\":\"text-[#C2410C] underline underline-offset-2 hover:text-[#9A3412]\",\"children\":\"This page as Markdown\"}]}],\"$L1d\",\"$L1e\",\"$L1f\",\"$L20\",\"$L21\",\"$L22\",\"$L23\",\"$L24\",\"$L25\"]}]]}],\"$L26\",\"$L27\",\"$L28\",\"$L29\",\"$L2a\",\"$L2b\",\"$L2c\",\"$L2d\",\"$L2e\",\"$L2f\",\"$L30\",\"$L31\",\"$L32\",\"$L33\",\"$L34\",\"$L35\",\"$L36\",\"$L37\",\"$L38\",\"$L39\",\"$L3a\",\"$L3b\",\"$L3c\",\"$L3d\",\"$L3e\",\"$L3f\",\"$L40\",\"$L41\",\"$L42\",\"$L43\",\"$L44\",\"$L45\",\"$L46\",\"$L47\",\"$L48\",\"$L49\",\"$L4a\",\"$L4b\",\"$L4c\",\"$L4d\",\"$L4e\",\"$L4f\",\"$L50\",\"$L51\",\"$L52\",\"$L53\",\"$L54\",\"$L55\",\"$L56\",\"$L57\",\"$L58\",\"$L59\",\"$L5a\",\"$L5b\",\"$L5c\",\"$L5d\",\"$L5e\",\"$L5f\"]}]],null,\"$L60\"]}]\n"])</script>
106<script>self.__next_f.push([1,"12:[\"$\",\"$1\",\"h\",{\"children\":[null,[[\"$\",\"$L61\",null,{\"children\":\"$L62\"}],[\"$\",\"meta\",null,{\"name\":\"next-size-adjust\",\"content\":\"\"}]],[\"$\",\"$L63\",null,{\"children\":[\"$\",\"div\",null,{\"hidden\":true,\"children\":[\"$\",\"$64\",null,{\"fallback\":null,\"children\":\"$L65\"}]}]}]]}]\n"])</script>
106<script>self.__next_f.push([1,"6c:I[2658,[\"4758\",\"static/chunks/radix-vendor-3009f6d361c8a98e.js?dpl=dpl_CQhZ8Y4EW7frp1M22TRBFWL627Ps\",\"6874\",\"static/chunks/6874-414075bb21e16c80.js?dpl=dpl_CQhZ8Y4EW7frp1M22TRBFWL627Ps\",\"4026\",\"static/chunks/4026-358ce823383b6f2b.js?dpl=dpl_CQhZ8Y4EW7frp1M22TRBFWL627Ps\",\"9040\",\"static/chunks/app/docs/page-7d99a1400e88a1f9.js?dpl=dpl_CQhZ8Y4EW7frp1M22TRBFWL627Ps\"],\"CodeBlock\"]\n74:I[59665,[],\"OutletBoundary\"]\n76:I[74911,[],\"AsyncMetadataOutlet\"]\n1d:[\"$\",\"li\",null,{\"children\":[\"$\",\"a\",null,{\"href\":\"/pricing.md\",\"className\":\"text-[#C2410C] underline underline-offset-2 hover:text-[#9A3412]\",\"children\":\"Pricing reference (Markdown)\"}]}]\n1e:[\"$\",\"li\",null,{\"children\":[\"$\",\"a\",null,{\"href\":\"/.well-known/agent-skills/index.json\",\"className\":\"text-[#C2410C] underline underline-offset-2 hover:text-[#9A3412]\",\"children\":\"SVG workflow skill\"}]}]\n1f:[\"$\",\"li\",null,{\"children\":[\"$\",\"a\",null,{\"href\":\"/server.json\",\"className\":\"text-[#C2410C] underline underline-offset-2 hover:text-[#9A3412]\",\"children\":\"MCP server metadata\"}]}]\n20:[\"$\",\"li\",null,{\"children\":[\"$\",\"a\",null,{\"href\":\"/.well-known/api-catalog\",\"rel\":\"api-catalog\",\"className\":\"text-[#C2410C] underline underline-offset-2 hover:text-[#9A3412]\",\"children\":\"API catalog\"}]}]\n21:[\"$\",\"li\",null,{\"children\":[\"$\",\"a\",null,{\"href\":\"/.well-known/ard.json\",\"rel\":\"ard\",\"className\":\"text-[#C2410C] underline underline-offset-2 hover:text-[#9A3412]\",\"children\":\"Resource discovery catalog\"}]}]\n22:[\"$\",\"li\",null,{\"children\":[\"$\",\"a\",null,{\"href\":\"#auth\",\"className\":\"text-[#C2410C] underline underline-offset-2 hover:text-[#9A3412]\",\"children\":\"Authentication\"}]}]\n23:[\"$\",\"li\",null,{\"children\":[\"$\",\"a\",null,{\"href\":\"#generate\",\"className\":\"text-[#C2410C] underline underline-offset-2 hover:text-[#9A3412]\",\"children\":\"Generate\"}]}]\n24:[\"$\",\"li\",null,{\"children\":[\"$\",\"a\",null,{\"href\":\"#vectorize\",\"className\":\"text-[#C2410C] underline underline-offset-2 hover:text-[#9A3412]\",\"children\":\"Vectorize\"}]}]\n25:[\"$\",\"li\",null,{\"children\":[\"$\",\"a\",null,{\"href\":\"#errors\",\"className\":\"text-[#C2410C"])</script>
106<script>self.__next_f.push([1,"] underline underline-offset-2 hover:text-[#9A3412]\",\"children\":\"Errors\"}]}]\n26:[\"$\",\"h2\",null,{\"className\":\"text-2xl font-semibold mb-3 mt-14 scroll-mt-24 text-gray-900\",\"id\":\"ways\",\"children\":\"Three ways to use it\"}]\n27:[\"$\",\"p\",null,{\"className\":\"mb-5 text-gray-700\",\"children\":\"Pick whichever matches how you work. REST uses an API key; MCP supports OAuth or an API key. Both use your SVG AI account and credit balance.\"}]\n66:T5b4,"])</script>
106<script>self.__next_f.push([1,"M4.709 15.955l4.72-2.647.079-.23-.08-.128H9.2l-.79-.048-2.698-.073-2.339-.097-2.266-.122-.571-.121L0 11.784l.055-.352.48-.321.686.06 1.52.103 2.278.158 1.652.097 2.449.255h.389l.055-.157-.134-.098-.103-.097-2.358-1.596-2.552-1.688-1.337-.972-.724-.491-.364-.462-.157-1.006.655-.72.879.06.225.061.891.685 1.904 1.474 2.486 1.831.364.304.145-.103.019-.073-.164-.274-1.355-2.446-1.446-2.49-.644-1.032-.17-.619a2.97 2.97 0 0 1-.103-.729L6.283.134 6.696 0l.996.134.42.364.62.42 1.081 1.566 1.755 2.505.516.769.274.467.043.19.176.017.019-.109.14-1.865.255-2.29.249-2.946.085-.83.401-.972.797-.526.62.298.512.735-.073.474-.304 1.973-.596 3.093-.388 2.071h.225l.26-.26 1.054-1.4 1.76-2.19.79-.892.928-.984.596-.474h1.128l.83 1.232-.372 1.273-1.164 1.474-.964 1.25-1.383 1.86-.86 1.485.079.12.207-.018 3.13-.667 1.69-.303 2.016-.347.91.427.1.43-.36.892-2.16.534-2.535.507-3.77.892-.045.033.054.066 1.7.16.727.04h1.778l3.313.246.867.572.52.7-.088.532-1.334.68-1.799-.427-4.2-1.001-1.44-.359h-.2v.12l1.2 1.174 2.2 1.984 2.75 2.554.14.632-.35.497-.371-.055-2.406-1.808-.93-.816-2.101-1.766h-.14v.183l.485.71 2.553 3.83.13 1.177-.183.383-.657.23-.723-.132-1.485-2.086-1.532-2.346-1.236-2.104-.152.086-.732 7.882-.343.402-.79.304-.66-.5-.35-.812.35-1.601.42-2.086.34-1.657.31-2.06.185-.685-.013-.046-.152.018-1.557 2.14-2.372 3.202-1.874 2.006-.45.176-.777-.401.073-.716.432-.638 2.578-3.28.155-.208H8.71l-2.475 1.61-4.415 2.083-.772.075-.468-.44.058-.716.22-.232 1.82-1.25z"])</script>
106<script>self.__next_f.push([1,"67:T5b4,"])</script>
106<script>self.__next_f.push([1,"M4.709 15.955l4.72-2.647.079-.23-.08-.128H9.2l-.79-.048-2.698-.073-2.339-.097-2.266-.122-.571-.121L0 11.784l.055-.352.48-.321.686.06 1.52.103 2.278.158 1.652.097 2.449.255h.389l.055-.157-.134-.098-.103-.097-2.358-1.596-2.552-1.688-1.337-.972-.724-.491-.364-.462-.157-1.006.655-.72.879.06.225.061.891.685 1.904 1.474 2.486 1.831.364.304.145-.103.019-.073-.164-.274-1.355-2.446-1.446-2.49-.644-1.032-.17-.619a2.97 2.97 0 0 1-.103-.729L6.283.134 6.696 0l.996.134.42.364.62.42 1.081 1.566 1.755 2.505.516.769.274.467.043.19.176.017.019-.109.14-1.865.255-2.29.249-2.946.085-.83.401-.972.797-.526.62.298.512.735-.073.474-.304 1.973-.596 3.093-.388 2.071h.225l.26-.26 1.054-1.4 1.76-2.19.79-.892.928-.984.596-.474h1.128l.83 1.232-.372 1.273-1.164 1.474-.964 1.25-1.383 1.86-.86 1.485.079.12.207-.018 3.13-.667 1.69-.303 2.016-.347.91.427.1.43-.36.892-2.16.534-2.535.507-3.77.892-.045.033.054.066 1.7.16.727.04h1.778l3.313.246.867.572.52.7-.088.532-1.334.68-1.799-.427-4.2-1.001-1.44-.359h-.2v.12l1.2 1.174 2.2 1.984 2.75 2.554.14.632-.35.497-.371-.055-2.406-1.808-.93-.816-2.101-1.766h-.14v.183l.485.71 2.553 3.83.13 1.177-.183.383-.657.23-.723-.132-1.485-2.086-1.532-2.346-1.236-2.104-.152.086-.732 7.882-.343.402-.79.304-.66-.5-.35-.812.35-1.601.42-2.086.34-1.657.31-2.06.185-.685-.013-.046-.152.018-1.557 2.14-2.372 3.202-1.874 2.006-.45.176-.777-.401.073-.716.432-.638 2.578-3.28.155-.208H8.71l-2.475 1.61-4.415 2.083-.772.075-.468-.44.058-.716.22-.232 1.82-1.25z"])</script>
106<script>self.__next_f.push([1,"28:[\"$\",\"div\",null,{\"className\":\"grid gap-4 sm:grid-cols-3 mb-4\",\"children\":[[\"$\",\"div\",null,{\"className\":\"rounded-lg border border-gray-200 p-4\",\"children\":[[\"$\",\"div\",null,{\"className\":\"flex items-center gap-2 mb-2\",\"children\":[\"$\",\"svg\",null,{\"viewBox\":\"0 0 24 24\",\"className\":\"shrink-0 h-5 w-5\",\"fill\":\"#D97757\",\"role\":\"img\",\"aria-hidden\":\"$undefined\",\"aria-label\":\"Claude\",\"focusable\":\"false\",\"children\":[\"$\",\"path\",null,{\"d\":\"$66\"}]}]}],[\"$\",\"p\",null,{\"className\":\"font-semibold text-sm mb-1 text-gray-900\",\"children\":\"1. Hand it to your agent\"}],[\"$\",\"p\",null,{\"className\":\"text-[13px] text-gray-600 leading-relaxed\",\"children\":\"Copy the setup message from the console and paste it into Claude Code, Cursor, Codex, or another compatible coding agent. The message contains connection instructions and an account check to confirm the setup.\"}]]}],[\"$\",\"div\",null,{\"className\":\"rounded-lg border border-gray-200 p-4\",\"children\":[[\"$\",\"div\",null,{\"className\":\"flex items-center gap-2 mb-2\",\"children\":[[\"$\",\"svg\",null,{\"viewBox\":\"0 0 24 24\",\"className\":\"shrink-0 h-5 w-5\",\"fill\":\"#D97757\",\"role\":\"img\",\"aria-hidden\":\"$undefined\",\"aria-label\":\"Claude\",\"focusable\":\"false\",\"children\":[\"$\",\"path\",null,{\"d\":\"$67\"}]}],\"$L68\"]}],\"$L69\",\"$L6a\"]}],\"$L6b\"]}]\n"])</script>
106<script>self.__next_f.push([1,"29:[\"$\",\"p\",null,{\"className\":\"mb-4 text-gray-700\",\"children\":[\"The\",\" \",[\"$\",\"$L1c\",null,{\"href\":\"/dashboard/api\",\"className\":\"text-[#C2410C] underline underline-offset-2 hover:text-[#9A3412]\",\"children\":\"console\"}],\" has a\",\" \",[\"$\",\"strong\",null,{\"children\":\"Copy setup message\"}],\" button: paste that one message into your assistant and follow its connection steps. Checking your balance confirms authentication without generating an image. You can also use the manual commands below.\"]}]\n2a:[\"$\",\"h2\",null,{\"className\":\"text-2xl font-semibold mb-3 mt-14 scroll-mt-24 text-gray-900\",\"id\":\"choosing\",\"children\":\"Generate vs. vectorize\"}]\n2b:[\"$\",\"p\",null,{\"className\":\"mb-4 text-gray-700\",\"children\":[\"Use \",[\"$\",\"strong\",null,{\"children\":\"vectorize\"}],\" to trace the shapes and colors in an existing image. Use \",[\"$\",\"strong\",null,{\"children\":\"generate\"}],\" for a new design or a reinterpretation of a reference. Inspect traced edges, small details and colors before using the result.\"]}]\n"])</script>
106<script>self.__next_f.push([1,"2c:[\"$\",\"div\",null,{\"className\":\"overflow-x-auto mb-4\",\"children\":[\"$\",\"table\",null,{\"className\":\"w-full text-sm border-collapse\",\"children\":[[\"$\",\"thead\",null,{\"children\":[\"$\",\"tr\",null,{\"children\":[[\"$\",\"th\",null,{\"className\":\"text-left font-semibold border-b border-gray-200 px-3 py-2 whitespace-nowrap text-gray-900\",\"children\":\"Capability\"}],[\"$\",\"th\",null,{\"className\":\"text-left font-semibold border-b border-gray-200 px-3 py-2 whitespace-nowrap text-gray-900\",\"children\":\"Generate\"}],[\"$\",\"th\",null,{\"className\":\"text-left font-semibold border-b border-gray-200 px-3 py-2 whitespace-nowrap text-gray-900\",\"children\":\"Vectorize\"}]]}]}],[\"$\",\"tbody\",null,{\"children\":[[\"$\",\"tr\",null,{\"children\":[[\"$\",\"td\",null,{\"className\":\"border-b border-gray-100 px-3 py-2 align-top text-gray-700 font-medium\",\"children\":\"What it does\"}],[\"$\",\"td\",null,{\"className\":\"border-b border-gray-100 px-3 py-2 align-top text-gray-700\",\"children\":\"Composes a clean, flat, vector-native design and returns final SVG paths. An input image is used as the subject or reference and redrawn as clean vector artwork.\"}],[\"$\",\"td\",null,{\"className\":\"border-b border-gray-100 px-3 py-2 align-top text-gray-700\",\"children\":\"Traces the input image into SVG paths. The result follows the source artwork, but edges, fine details and colors can change.\"}]]}],[\"$\",\"tr\",null,{\"children\":[[\"$\",\"td\",null,{\"className\":\"border-b border-gray-100 px-3 py-2 align-top text-gray-700 font-medium\",\"children\":\"Best for\"}],[\"$\",\"td\",null,{\"className\":\"border-b border-gray-100 px-3 py-2 align-top text-gray-700\",\"children\":\"New logos, icons, illustrations; turning photos, sketches, or rough rasters into polished SVGs; restyling.\"}],[\"$\",\"td\",null,{\"className\":\"border-b border-gray-100 px-3 py-2 align-top text-gray-700\",\"children\":\"Logos, icons, and flat artwork that are already clean and just need to become real vectors.\"}]]}],[\"$\",\"tr\",null,{\"children\":[[\"$\",\"td\",null,{\"className\":\"border-b border-gray-100 px-3 py-2 align-top text-gray-700 font-medium\",\"children\":\"Background\"}],[\"$\",\"td\",null,{\"className\":\"border-b border-gray-100 px-3 py-2 align-top text-gray-700\",\"children\":[[\"$\",\"code\",null,{\"children\":\"transparent_background\"}],\" defaults to \",[\"$\",\"code\",null,{\"children\":\"\\\"auto\\\"\"}],\" — SVG AI decides from the design.\"]}],[\"$\",\"td\",null,{\"className\":\"border-b border-gray-100 px-3 py-2 align-top text-gray-700\",\"children\":[\"An opaque background is traced too. Pass \",[\"$\",\"code\",null,{\"children\":\"remove_background: true\"}],\" to request background removal before tracing.\"]}]]}],[\"$\",\"tr\",null,{\"children\":[[\"$\",\"td\",null,{\"className\":\"border-b border-gray-100 px-3 py-2 align-top text-gray-700 font-medium\",\"children\":\"Cost\"}],[\"$\",\"td\",null,{\"className\":\"border-b border-gray-100 px-3 py-2 align-top text-gray-700\",\"children\":[\"Varies by model and number of variations. Check \",[\"$\",\"a\",null,{\"href\":\"#credits\",\"className\":\"text-[#C2410C] underline underline-offset-2 hover:text-[#9A3412]\",\"children\":\"current operation costs\"}],\".\"]}],[\"$\",\"td\",null,{\"className\":\"border-b border-gray-100 px-3 py-2 align-top text-gray-700\",\"children\":[\"Charged per image; optional background removal is included. Check \",[\"$\",\"a\",null,{\"href\":\"#credits\",\"className\":\"text-[#C2410C] underline underline-offset-2 hover:text-[#9A3412]\",\"children\":\"current operation costs\"}],\".\"]}]]}],[\"$\",\"tr\",null,{\"children\":[[\"$\",\"td\",null,{\"className\":\"border-b border-gray-100 px-3 py-2 align-top text-gray-700 font-medium\",\"children\":\"Retrieving the result\"}],[\"$\",\"td\",null,{\"className\":\"border-b border-gray-100 px-3 py-2 align-top text-gray-700\",\"children\":\"Returns a result or a processing response with a polling URL.\"}],[\"$\",\"td\",null,{\"className\":\"border-b border-gray-100 px-3 py-2 align-top text-gray-700\",\"children\":\"Returns the traced SVG in the response.\"}]]}]]}]]}]}]\n"])</script>
106<script>self.__next_f.push([1,"2d:[\"$\",\"p\",null,{\"className\":\"mb-4 text-gray-700\",\"children\":[[\"$\",\"strong\",null,{\"children\":\"Classic\"}],\" is fast and great for icons and simpler designs.\",\" \",[\"$\",\"strong\",null,{\"children\":\"Ultra\"}],\" renders more detail and handles text-heavy logos and complex briefs better. Generations made through the API also appear in your SVG AI dashboard.\"]}]\n2e:[\"$\",\"h2\",null,{\"className\":\"text-2xl font-semibold mb-3 mt-14 scroll-mt-24 text-gray-900\",\"id\":\"auth\",\"children\":\"Authentication\"}]\n2f:[\"$\",\"p\",null,{\"className\":\"mb-3 text-gray-700\",\"children\":[\"There are two ways to authenticate: \",[\"$\",\"strong\",null,{\"children\":\"OAuth 2.1\"}],\" for MCP clients (recommended — no key handling at all) and \",[\"$\",\"strong\",null,{\"children\":\"API keys\"}],\" for the REST API or any client where you prefer a header.\"]}]\n30:[\"$\",\"h3\",null,{\"className\":\"text-lg font-semibold mb-2 mt-8 text-gray-900 flex items-center gap-2\",\"id\":\"oauth\",\"children\":\"OAuth 2.1 (MCP clients)\"}]\n31:[\"$\",\"p\",null,{\"className\":\"mb-3 text-gray-700\",\"children\":[\"Add \",[\"$\",\"code\",null,{\"children\":\"https://www.svgai.org/api/mcp\"}],\" to Claude, ChatGPT, or any MCP client\",\" \",[\"$\",\"em\",null,{\"children\":\"without credentials\"}],\". The client discovers the flow automatically, your browser opens SVG AI's sign-in and consent screen, and tokens are issued behind the scenes — you never see or paste a secret. The server implements the current MCP authorization spec:\"]}]\n"])</script>
106<script>self.__next_f.push([1,"32:[\"$\",\"ul\",null,{\"className\":\"mb-3 list-disc pl-5 text-sm text-gray-700 space-y-1\",\"children\":[[\"$\",\"li\",null,{\"children\":[\"Protected-resource metadata (RFC 9728) at \",[\"$\",\"code\",null,{\"children\":\"/.well-known/oauth-protected-resource\"}],\"; authorization-server metadata (RFC 8414) at \",[\"$\",\"code\",null,{\"children\":\"/.well-known/oauth-authorization-server\"}],\". Unauthenticated calls to \",[\"$\",\"code\",null,{\"children\":\"/api/mcp\"}],\" return 401 with a \",[\"$\",\"code\",null,{\"children\":\"WWW-Authenticate: Bearer resource_metadata=\\\"…\\\"\"}],\" challenge.\"]}],[\"$\",\"li\",null,{\"children\":[\"Authorization-code flow with PKCE (S256 only) and dynamic client registration (RFC 7591) at \",[\"$\",\"code\",null,{\"children\":\"POST /api/oauth/register\"}],\".\"]}],[\"$\",\"li\",null,{\"children\":\"Access tokens are audience-bound (RFC 8707) and last 1 hour; refresh tokens last 60 days and rotate on every use — a replayed refresh token revokes the whole session.\"}],[\"$\",\"li\",null,{\"children\":[\"Connected apps are listed in the \",[\"$\",\"$L1c\",null,{\"href\":\"/dashboard/api\",\"className\":\"text-[#C2410C] underline underline-offset-2 hover:text-[#9A3412]\",\"children\":\"console\"}],\" and can be disconnected instantly.\"]}]]}]\n"])</script>
106<script>self.__next_f.push([1,"33:[\"$\",\"h3\",null,{\"className\":\"text-lg font-semibold mb-2 mt-8 text-gray-900 flex items-center gap-2\",\"id\":\"api-keys\",\"children\":\"API keys (REST, or manual MCP setup)\"}]\n34:[\"$\",\"p\",null,{\"className\":\"mb-3 text-gray-700\",\"children\":[\"Create a key in the \",[\"$\",\"$L1c\",null,{\"href\":\"/dashboard/api\",\"className\":\"text-[#C2410C] underline underline-offset-2 hover:text-[#9A3412]\",\"children\":\"API \u0026 MCP console\"}],\" \",\"(Dashboard → API \u0026 MCP). The full key is shown once, at creation. Send it on every request:\"]}]\n35:[\"$\",\"$L6c\",null,{\"code\":\"Authorization: Bearer sk_svgai_...        # preferred\\nx-api-key: sk_svgai_...                   # alternative header\"}]\n36:[\"$\",\"p\",null,{\"className\":\"mt-3 mb-4 text-sm text-gray-600\",\"children\":\"Keys can be revoked any time from the console. Rate limits: 20 generations and 30 vectorizations per minute per account.\"}]\n37:[\"$\",\"h2\",null,{\"className\":\"text-2xl font-semibold mb-3 mt-14 scroll-mt-24 text-gray-900\",\"id\":\"generate\",\"children\":\"POST /api/v1/generate\"}]\n38:[\"$\",\"p\",null,{\"className\":\"mb-3 text-gray-700\",\"children\":\"Create one or more SVGs from a prompt, an image, or both.\"}]\n"])</script>
106<script>self.__next_f.push([1,"39:[\"$\",\"div\",null,{\"className\":\"overflow-x-auto mb-4\",\"children\":[\"$\",\"table\",null,{\"className\":\"w-full text-sm border-collapse\",\"children\":[[\"$\",\"thead\",null,{\"children\":[\"$\",\"tr\",null,{\"children\":[[\"$\",\"th\",null,{\"className\":\"text-left font-semibold border-b border-gray-200 px-3 py-2 whitespace-nowrap text-gray-900\",\"children\":\"Field\"}],[\"$\",\"th\",null,{\"className\":\"text-left font-semibold border-b border-gray-200 px-3 py-2 whitespace-nowrap text-gray-900\",\"children\":\"Type\"}],[\"$\",\"th\",null,{\"className\":\"text-left font-semibold border-b border-gray-200 px-3 py-2 whitespace-nowrap text-gray-900\",\"children\":\"Description\"}]]}]}],[\"$\",\"tbody\",null,{\"children\":[[\"$\",\"tr\",null,{\"children\":[[\"$\",\"td\",null,{\"className\":\"border-b border-gray-100 px-3 py-2 align-top text-gray-700 font-mono\",\"children\":\"prompt\"}],[\"$\",\"td\",null,{\"className\":\"border-b border-gray-100 px-3 py-2 align-top text-gray-700\",\"children\":\"string\"}],[\"$\",\"td\",null,{\"className\":\"border-b border-gray-100 px-3 py-2 align-top text-gray-700\",\"children\":\"What to create, in plain language. Optional when an image is provided. Max 4,000 chars.\"}]]}],[\"$\",\"tr\",null,{\"children\":[[\"$\",\"td\",null,{\"className\":\"border-b border-gray-100 px-3 py-2 align-top text-gray-700 font-mono\",\"children\":\"image\"}],[\"$\",\"td\",null,{\"className\":\"border-b border-gray-100 px-3 py-2 align-top text-gray-700\",\"children\":\"string\"}],[\"$\",\"td\",null,{\"className\":\"border-b border-gray-100 px-3 py-2 align-top text-gray-700\",\"children\":\"Base64 source/reference image (raw or data URL). PNG, JPEG, or WebP, up to 8 MB.\"}]]}],[\"$\",\"tr\",null,{\"children\":[[\"$\",\"td\",null,{\"className\":\"border-b border-gray-100 px-3 py-2 align-top text-gray-700 font-mono\",\"children\":\"image_url\"}],[\"$\",\"td\",null,{\"className\":\"border-b border-gray-100 px-3 py-2 align-top text-gray-700\",\"children\":\"string\"}],[\"$\",\"td\",null,{\"className\":\"border-b border-gray-100 px-3 py-2 align-top text-gray-700\",\"children\":[\"Alternative to \",[\"$\",\"code\",null,{\"children\":\"image\"}],\": a publicly reachable http(s) URL.\"]}]]}],[\"$\",\"tr\",null,{\"children\":[[\"$\",\"td\",null,{\"className\":\"border-b border-gray-100 px-3 py-2 align-top text-gray-700 font-mono\",\"children\":\"model\"}],[\"$\",\"td\",null,{\"className\":\"border-b border-gray-100 px-3 py-2 align-top text-gray-700\",\"children\":\"string\"}],[\"$\",\"td\",null,{\"className\":\"border-b border-gray-100 px-3 py-2 align-top text-gray-700\",\"children\":[[\"$\",\"code\",null,{\"children\":\"\\\"classic\\\"\"}],\" (default) or \",[\"$\",\"code\",null,{\"children\":\"\\\"ultra\\\"\"}],\". Check the credits endpoint for current costs.\"]}]]}],[\"$\",\"tr\",null,{\"children\":[[\"$\",\"td\",null,{\"className\":\"border-b border-gray-100 px-3 py-2 align-top text-gray-700 font-mono\",\"children\":\"variations\"}],[\"$\",\"td\",null,{\"className\":\"border-b border-gray-100 px-3 py-2 align-top text-gray-700\",\"children\":\"integer\"}],[\"$\",\"td\",null,{\"className\":\"border-b border-gray-100 px-3 py-2 align-top text-gray-700\",\"children\":\"1–4 designs per request (default 1). Each variation is charged.\"}]]}],[\"$\",\"tr\",null,{\"children\":[[\"$\",\"td\",null,{\"className\":\"border-b border-gray-100 px-3 py-2 align-top text-gray-700 font-mono\",\"children\":\"transparent_background\"}],[\"$\",\"td\",null,{\"className\":\"border-b border-gray-100 px-3 py-2 align-top text-gray-700\",\"children\":\"string\"}],[\"$\",\"td\",null,{\"className\":\"border-b border-gray-100 px-3 py-2 align-top text-gray-700\",\"children\":[[\"$\",\"code\",null,{\"children\":\"\\\"auto\\\"\"}],\" (default), \",[\"$\",\"code\",null,{\"children\":\"\\\"on\\\"\"}],\", or \",[\"$\",\"code\",null,{\"children\":\"\\\"off\\\"\"}],\".\"]}]]}],[\"$\",\"tr\",null,{\"children\":[[\"$\",\"td\",null,{\"className\":\"border-b border-gray-100 px-3 py-2 align-top text-gray-700 font-mono\",\"children\":\"aspect_ratio\"}],[\"$\",\"td\",null,{\"className\":\"border-b border-gray-100 px-3 py-2 align-top text-gray-700\",\"children\":\"string\"}],[\"$\",\"td\",null,{\"className\":\"border-b border-gray-100 px-3 py-2 align-top text-gray-700\",\"children\":[[\"$\",\"code\",null,{\"children\":\"\\\"default\\\"\"}],\" or \",[\"$\",\"code\",null,{\"children\":\"\\\"square\\\"\"}],\" (forces a 1:1 canvas).\"]}]]}],[\"$\",\"tr\",null,{\"children\":[[\"$\",\"td\",null,{\"className\":\"border-b border-gray-100 px-3 py-2 align-top text-gray-700 font-mono\",\"children\":\"wait\"}],\"$L6d\",\"$L6e\"]}]]}]]}]}]\n"])</script>
106<script>self.__next_f.push([1,"3a:[\"$\",\"$L6c\",null,{\"code\":\"curl -X POST https://www.svgai.org/api/v1/generate \\\\\\n  -H \\\"Authorization: Bearer sk_svgai_...\\\" \\\\\\n  -H \\\"Content-Type: application/json\\\" \\\\\\n  -d '{\\\"prompt\\\": \\\"minimal fox logo, orange and white\\\", \\\"model\\\": \\\"classic\\\"}'\"}]\n3b:[\"$\",\"p\",null,{\"className\":\"mt-4 mb-2 text-sm font-semibold text-gray-900\",\"children\":\"Complete response example\"}]\n3c:[\"$\",\"p\",null,{\"className\":\"mb-3 text-sm text-gray-600\",\"children\":\"Example response with sample identifiers, credit balances and a simple square SVG.\"}]\n3d:[\"$\",\"$L6c\",null,{\"language\":\"json\",\"code\":\"{\\n  \\\"object\\\": \\\"svg.generation\\\",\\n  \\\"id\\\": \\\"6dce86db-468b-4bc9-b877-379a9c0894a1\\\",\\n  \\\"status\\\": \\\"completed\\\",\\n  \\\"model\\\": \\\"classic\\\",\\n  \\\"credits_used\\\": 2,\\n  \\\"credits_remaining\\\": 18,\\n  \\\"svgs\\\": [\\n    {\\n      \\\"design_id\\\": \\\"8acc61ce-59b4-4562-b67c-9e4a1ca55115\\\",\\n      \\\"status\\\": \\\"completed\\\",\\n      \\\"svg\\\": \\\"\u003csvg xmlns=\\\\\\\"http://www.w3.org/2000/svg\\\\\\\" viewBox=\\\\\\\"0 0 64 64\\\\\\\"\u003e\u003cpath fill=\\\\\\\"#ea580c\\\\\\\" d=\\\\\\\"M12 12h40v40H12z\\\\\\\"/\u003e\u003c/svg\u003e\\\"\\n    }\\n  ]\\n}\"}]\n3e:[\"$\",\"p\",null,{\"className\":\"mt-3 mb-4 text-sm text-gray-600\",\"children\":[\"A failed generation refunds its credits automatically. If the request outlives the wait window, you receive HTTP 202 with \",[\"$\",\"code\",null,{\"children\":\"status: \\\"processing\\\"\"}],\", a \",[\"$\",\"code\",null,{\"children\":\"poll_url\"}],\",\",\" \",\"and a matching \",[\"$\",\"code\",null,{\"children\":\"Location\"}],\" response header. Polling still requires your API key.\",\" \",\"Use the existing generation's polling URL before retrying a request that may already have been accepted: creating a generation again can spend credits again.\"]}]\n3f:[\"$\",\"h3\",null,{\"className\":\"text-lg font-semibold mb-2 mt-8 text-gray-900 flex items-center gap-2\",\"id\":\"poll\",\"children\":\"GET /api/v1/generations/:id\"}]\n40:[\"$\",\"p\",null,{\"className\":\"mb-3 text-gray-700\",\"children\":[\"Fetch the state and results of an earlier generation by its \",[\"$\",\"code\",null,{\"children\":\"id\"}],\", using the same account's API key. The response c"])</script>
106<script>self.__next_f.push([1,"ontains \",[\"$\",\"code\",null,{\"children\":\"object\"}],\", \",[\"$\",\"code\",null,{\"children\":\"id\"}],\",\",\" \",[\"$\",\"code\",null,{\"children\":\"status\"}],\", and \",[\"$\",\"code\",null,{\"children\":\"svgs\"}],\"; it omits model, credit fields, and polling URL. Keep polling while the status is \",[\"$\",\"code\",null,{\"children\":\"processing\"}],\".\"]}]\n41:[\"$\",\"h2\",null,{\"className\":\"text-2xl font-semibold mb-3 mt-14 scroll-mt-24 text-gray-900\",\"id\":\"vectorize\",\"children\":\"POST /api/v1/vectorize\"}]\n42:[\"$\",\"p\",null,{\"className\":\"mb-3 text-gray-700\",\"children\":[\"Trace an existing image into SVG paths. Send \",[\"$\",\"code\",null,{\"children\":\"image\"}],\" (base64) or\",\" \",[\"$\",\"code\",null,{\"children\":\"image_url\"}],\"; images should be at least 256×256 pixels.\"]}]\n43:[\"$\",\"p\",null,{\"className\":\"mb-3 text-gray-700\",\"children\":[[\"$\",\"strong\",null,{\"children\":\"Backgrounds are not removed automatically\"}],\" \",\"— an opaque background becomes filled paths in the SVG. Pass\",\" \",[\"$\",\"code\",null,{\"children\":\"remove_background: true\"}],\" to isolate the main subject on a transparent background before tracing (no extra credits). Inspect the returned SVG on your intended background. If background removal fails, the original image is traced instead and the response reports \",[\"$\",\"code\",null,{\"children\":\"background_removed: false\"}],\".\"]}]\n44:[\"$\",\"$L6c\",null,{\"code\":\"curl -X POST https://www.svgai.org/api/v1/vectorize \\\\\\n  -H \\\"Authorization: Bearer sk_svgai_...\\\" \\\\\\n  -H \\\"Content-Type: application/json\\\" \\\\\\n  -d '{\\\"image_url\\\": \\\"https://example.com/logo.png\\\", \\\"remove_background\\\": true}'\"}]\n45:[\"$\",\"p\",null,{\"className\":\"mt-4 mb-2 text-sm font-semibold text-gray-900\",\"children\":\"Illustrative response\"}]\n46:[\"$\",\"$L6c\",null,{\"language\":\"json\",\"code\":\"{\\n  \\\"object\\\": \\\"svg.vectorization\\\",\\n  \\\"status\\\": \\\"completed\\\",\\n  \\\"svg\\\": \\\"\u003csvg xmlns=\\\\\\\"http://www.w3.org/2000/svg\\\\\\\" viewBox=\\\\\\\"0 0 64 64\\\\\\\"\u003e\u003cpath fill=\\\\\\\"#ea580c\\\\\\\" d=\\\\\\\"M12 12h40v40H12z\\\\\\\"/\u003e\u003c/svg\u003e\\\",\\n  \\\"background_removed\\\": false,\\n  \\\"credits_used\\\": 1,\\n  \\\"credits_remaining\\\": 17\\n}"])</script>
106<script>self.__next_f.push([1,"\"}]\n47:[\"$\",\"h2\",null,{\"className\":\"text-2xl font-semibold mb-3 mt-14 scroll-mt-24 text-gray-900\",\"id\":\"credits\",\"children\":\"GET /api/v1/credits\"}]\n48:[\"$\",\"p\",null,{\"className\":\"mb-3 text-gray-700\",\"children\":[\"Check this endpoint for current operation costs and \",[\"$\",\"code\",null,{\"children\":\"api_access\"}],\" before generating or vectorizing. Website starter credits alone do not unlock API use. The example below uses sample account values.\"]}]\n49:[\"$\",\"$L6c\",null,{\"language\":\"json\",\"code\":\"{\\n  \\\"object\\\": \\\"credit.balance\\\",\\n  \\\"credits_remaining\\\": 148,\\n  \\\"subscription_active\\\": true,\\n  \\\"api_access\\\": true,\\n  \\\"costs\\\": { \\\"generate_classic\\\": 2, \\\"generate_ultra\\\": 4, \\\"vectorize\\\": 1 },\\n  \\\"topup_url\\\": \\\"https://svgai.org/pricing\\\"\\n}\"}]\n4a:[\"$\",\"h2\",null,{\"className\":\"text-2xl font-semibold mb-3 mt-14 scroll-mt-24 text-gray-900\",\"id\":\"errors\",\"children\":\"Errors\"}]\n4b:[\"$\",\"p\",null,{\"className\":\"mb-3 text-gray-700\",\"children\":[\"REST handler errors contain \",[\"$\",\"code\",null,{\"children\":\"{ \\\"error\\\": { \\\"type\\\", \\\"message\\\" } }\"}],\" with a matching HTTP status. A failed generation can also include its generation fields alongside the error. MCP uses its own JSON-RPC error and tool-result formats.\"]}]\n4c:[\"$\",\"p\",null,{\"className\":\"mb-2 text-sm font-semibold text-gray-900\",\"children\":\"Check authentication without spending credits\"}]\n4d:[\"$\",\"p\",null,{\"className\":\"mb-3 text-sm text-gray-600\",\"children\":\"A request without an API key returns HTTP 401:\"}]\n4e:[\"$\",\"$L6c\",null,{\"code\":\"curl -i https://www.svgai.org/api/v1/credits\"}]\n4f:[\"$\",\"$L6c\",null,{\"language\":\"json\",\"code\":\"{\\n  \\\"error\\\": {\\n    \\\"type\\\": \\\"authentication_error\\\",\\n    \\\"message\\\": \\\"Missing API key. Pass it as \\\\\\\"Authorization: Bearer sk_svgai_...\\\\\\\" (create keys at https://svgai.org/dashboard/api).\\\"\\n  }\\n}\"}]\n"])</script>
106<script>self.__next_f.push([1,"50:[\"$\",\"div\",null,{\"className\":\"overflow-x-auto mb-4\",\"children\":[\"$\",\"table\",null,{\"className\":\"w-full text-sm border-collapse\",\"children\":[[\"$\",\"thead\",null,{\"children\":[\"$\",\"tr\",null,{\"children\":[[\"$\",\"th\",null,{\"className\":\"text-left font-semibold border-b border-gray-200 px-3 py-2 whitespace-nowrap text-gray-900\",\"children\":\"Type\"}],[\"$\",\"th\",null,{\"className\":\"text-left font-semibold border-b border-gray-200 px-3 py-2 whitespace-nowrap text-gray-900\",\"children\":\"Status\"}],[\"$\",\"th\",null,{\"className\":\"text-left font-semibold border-b border-gray-200 px-3 py-2 whitespace-nowrap text-gray-900\",\"children\":\"Meaning\"}]]}]}],[\"$\",\"tbody\",null,{\"children\":[[\"$\",\"tr\",null,{\"children\":[[\"$\",\"td\",null,{\"className\":\"border-b border-gray-100 px-3 py-2 align-top text-gray-700 font-mono\",\"children\":\"invalid_request\"}],[\"$\",\"td\",null,{\"className\":\"border-b border-gray-100 px-3 py-2 align-top text-gray-700\",\"children\":\"400\"}],[\"$\",\"td\",null,{\"className\":\"border-b border-gray-100 px-3 py-2 align-top text-gray-700\",\"children\":\"Malformed input; the message says which field.\"}]]}],[\"$\",\"tr\",null,{\"children\":[[\"$\",\"td\",null,{\"className\":\"border-b border-gray-100 px-3 py-2 align-top text-gray-700 font-mono\",\"children\":\"authentication_error\"}],[\"$\",\"td\",null,{\"className\":\"border-b border-gray-100 px-3 py-2 align-top text-gray-700\",\"children\":\"401\"}],[\"$\",\"td\",null,{\"className\":\"border-b border-gray-100 px-3 py-2 align-top text-gray-700\",\"children\":\"Missing, invalid, or revoked API key.\"}]]}],[\"$\",\"tr\",null,{\"children\":[[\"$\",\"td\",null,{\"className\":\"border-b border-gray-100 px-3 py-2 align-top text-gray-700 font-mono\",\"children\":\"insufficient_credits\"}],[\"$\",\"td\",null,{\"className\":\"border-b border-gray-100 px-3 py-2 align-top text-gray-700\",\"children\":\"402\"}],[\"$\",\"td\",null,{\"className\":\"border-b border-gray-100 px-3 py-2 align-top text-gray-700\",\"children\":[\"Includes \",[\"$\",\"code\",null,{\"children\":\"credits_remaining\"}],\" and \",[\"$\",\"code\",null,{\"children\":\"credits_required\"}],\".\"]}]]}],[\"$\",\"tr\",null,{\"children\":[[\"$\",\"td\",null,{\"className\":\"border-b border-gray-100 px-3 py-2 align-top text-gray-700 font-mono\",\"children\":\"payment_required\"}],[\"$\",\"td\",null,{\"className\":\"border-b border-gray-100 px-3 py-2 align-top text-gray-700\",\"children\":\"402\"}],[\"$\",\"td\",null,{\"className\":\"border-b border-gray-100 px-3 py-2 align-top text-gray-700\",\"children\":[\"The account has never purchased — API \u0026 MCP use paid credits. Includes \",[\"$\",\"code\",null,{\"children\":\"upgrade_url\"}],\".\"]}]]}],[\"$\",\"tr\",null,{\"children\":[[\"$\",\"td\",null,{\"className\":\"border-b border-gray-100 px-3 py-2 align-top text-gray-700 font-mono\",\"children\":\"not_found\"}],[\"$\",\"td\",null,{\"className\":\"border-b border-gray-100 px-3 py-2 align-top text-gray-700\",\"children\":\"404\"}],[\"$\",\"td\",null,{\"className\":\"border-b border-gray-100 px-3 py-2 align-top text-gray-700\",\"children\":\"The API endpoint does not exist, or no generation with that id exists for the authenticated account.\"}]]}],[\"$\",\"tr\",null,{\"children\":[[\"$\",\"td\",null,{\"className\":\"border-b border-gray-100 px-3 py-2 align-top text-gray-700 font-mono\",\"children\":\"rate_limit_exceeded\"}],[\"$\",\"td\",null,{\"className\":\"border-b border-gray-100 px-3 py-2 align-top text-gray-700\",\"children\":\"429\"}],[\"$\",\"td\",null,{\"className\":\"border-b border-gray-100 px-3 py-2 align-top text-gray-700\",\"children\":[\"May include \",[\"$\",\"code\",null,{\"children\":\"retry_after_seconds\"}],\" and the matching \",[\"$\",\"code\",null,{\"children\":\"Retry-After\"}],\" HTTP header. Follow the supplied delay when present.\"]}]]}],[\"$\",\"tr\",null,{\"children\":[[\"$\",\"td\",null,{\"className\":\"border-b border-gray-100 px-3 py-2 align-top text-gray-700 font-mono\",\"children\":\"generation_error\"}],[\"$\",\"td\",null,{\"className\":\"border-b border-gray-100 px-3 py-2 align-top text-gray-700\",\"children\":\"502\"}],[\"$\",\"td\",null,{\"className\":\"border-b border-gray-100 px-3 py-2 align-top text-gray-700\",\"children\":\"The pipeline failed; credits were refunded.\"}]]}],[\"$\",\"tr\",null,{\"children\":[[\"$\",\"td\",null,{\"className\":\"border-b border-gray-100 px-3 py-2 align-top text-gray-700 font-mono\",\"children\":\"server_error\"}],\"$L6f\",\"$L70\"]}]]}]]}]}]\n"])</script>
106<script>self.__next_f.push([1,"51:[\"$\",\"h3\",null,{\"className\":\"text-lg font-semibold mb-2 mt-8 text-gray-900 flex items-center gap-2\",\"id\":\"rate-limits\",\"children\":\"Request rate limits\"}]\n52:[\"$\",\"p\",null,{\"className\":\"mb-3 text-gray-700\",\"children\":[\"Authenticated REST responses can include \",[\"$\",\"code\",null,{\"children\":\"RateLimit-Policy\"}],\" and \",[\"$\",\"code\",null,{\"children\":\"RateLimit\"}],\". These describe the account's request limit, shared across its API keys; they count requests, not credits. The policy identifies its quota and window, while the observation gives remaining requests and a window hint in seconds.\"]}]\n"])</script>
106<script>self.__next_f.push([1,"53:[\"$\",\"p\",null,{\"className\":\"mb-3 text-gray-700\",\"children\":[\"Headers are omitted when no valid, unexpired limiter observation is available, including before authentication, during a limiter outage, or after a long generation outlives the observation. Concurrent requests can change availability. Follow \",[\"$\",\"code\",null,{\"children\":\"Retry-After\"}],\" \",\"when a rate-limit error includes it. Retrying an accepted generation can create another charged request; use its polling URL to retrieve the result. The header syntax follows the\",\" \",[\"$\",\"a\",null,{\"href\":\"https://datatracker.ietf.org/doc/draft-ietf-httpapi-ratelimit-headers/\",\"className\":\"text-[#C2410C] underline underline-offset-2 hover:text-[#9A3412]\",\"children\":\"IETF HTTPAPI RateLimit draft\"}],\".\"]}]\n"])</script>
106<script>self.__next_f.push([1,"54:[\"$\",\"h2\",null,{\"className\":\"text-2xl font-semibold mb-3 mt-14 scroll-mt-24 text-gray-900\",\"id\":\"mcp\",\"children\":\"MCP server (for AI assistants)\"}]\n"])</script>
106<script>self.__next_f.push([1,"55:[\"$\",\"p\",null,{\"className\":\"mb-3 text-gray-700\",\"children\":[\"The MCP server at \",[\"$\",\"code\",null,{\"children\":\"https://www.svgai.org/api/mcp\"}],\" exposes three tools —\",\" \",[\"$\",\"code\",null,{\"children\":\"generate_svg\"}],\", \",[\"$\",\"code\",null,{\"children\":\"vectorize_image\"}],\", and \",[\"$\",\"code\",null,{\"children\":\"get_credits\"}],\" — over streamable HTTP. Authenticate with \",[\"$\",\"$L1c\",null,{\"href\":\"#oauth\",\"className\":\"text-[#C2410C] underline underline-offset-2 hover:text-[#9A3412]\",\"children\":\"OAuth\"}],\" (just add the URL — the sign-in happens in your browser) or with an API key header. Every setup below is one-click in the \",[\"$\",\"$L1c\",null,{\"href\":\"/dashboard/api\",\"className\":\"text-[#C2410C] underline underline-offset-2 hover:text-[#9A3412]\",\"children\":\"console\"}],\".\"]}]\n"])</script>
106<script>self.__next_f.push([1,"56:[\"$\",\"p\",null,{\"className\":\"mb-3 text-sm text-gray-600\",\"children\":[\"The public \",[\"$\",\"a\",null,{\"href\":\"/server.json\",\"className\":\"text-[#C2410C] underline underline-offset-2 hover:text-[#9A3412]\",\"children\":\"server metadata\"}],\" describes the endpoint and its connection details in MCP Registry format. OAuth discovery is available at\",\" \",[\"$\",\"a\",null,{\"href\":\"/.well-known/oauth-protected-resource\",\"className\":\"text-[#C2410C] underline underline-offset-2 hover:text-[#9A3412]\",\"children\":\"protected-resource metadata\"}],\" \",\"and \",[\"$\",\"a\",null,{\"href\":\"/.well-known/oauth-authorization-server\",\"className\":\"text-[#C2410C] underline underline-offset-2 hover:text-[#9A3412]\",\"children\":\"authorization-server metadata\"}],\". Tool calls remain authenticated, and generation and vectorization require paid access.\"]}]\n"])</script>
106<script>self.__next_f.push([1,"71:T5b4,"])</script>
106<script>self.__next_f.push([1,"M4.709 15.955l4.72-2.647.079-.23-.08-.128H9.2l-.79-.048-2.698-.073-2.339-.097-2.266-.122-.571-.121L0 11.784l.055-.352.48-.321.686.06 1.52.103 2.278.158 1.652.097 2.449.255h.389l.055-.157-.134-.098-.103-.097-2.358-1.596-2.552-1.688-1.337-.972-.724-.491-.364-.462-.157-1.006.655-.72.879.06.225.061.891.685 1.904 1.474 2.486 1.831.364.304.145-.103.019-.073-.164-.274-1.355-2.446-1.446-2.49-.644-1.032-.17-.619a2.97 2.97 0 0 1-.103-.729L6.283.134 6.696 0l.996.134.42.364.62.42 1.081 1.566 1.755 2.505.516.769.274.467.043.19.176.017.019-.109.14-1.865.255-2.29.249-2.946.085-.83.401-.972.797-.526.62.298.512.735-.073.474-.304 1.973-.596 3.093-.388 2.071h.225l.26-.26 1.054-1.4 1.76-2.19.79-.892.928-.984.596-.474h1.128l.83 1.232-.372 1.273-1.164 1.474-.964 1.25-1.383 1.86-.86 1.485.079.12.207-.018 3.13-.667 1.69-.303 2.016-.347.91.427.1.43-.36.892-2.16.534-2.535.507-3.77.892-.045.033.054.066 1.7.16.727.04h1.778l3.313.246.867.572.52.7-.088.532-1.334.68-1.799-.427-4.2-1.001-1.44-.359h-.2v.12l1.2 1.174 2.2 1.984 2.75 2.554.14.632-.35.497-.371-.055-2.406-1.808-.93-.816-2.101-1.766h-.14v.183l.485.71 2.553 3.83.13 1.177-.183.383-.657.23-.723-.132-1.485-2.086-1.532-2.346-1.236-2.104-.152.086-.732 7.882-.343.402-.79.304-.66-.5-.35-.812.35-1.601.42-2.086.34-1.657.31-2.06.185-.685-.013-.046-.152.018-1.557 2.14-2.372 3.202-1.874 2.006-.45.176-.777-.401.073-.716.432-.638 2.578-3.28.155-.208H8.71l-2.475 1.61-4.415 2.083-.772.075-.468-.44.058-.716.22-.232 1.82-1.25z"])</script>
106<script>self.__next_f.push([1,"57:[\"$\",\"h3\",null,{\"className\":\"text-lg font-semibold mb-2 mt-8 text-gray-900 flex items-center gap-2\",\"children\":[[\"$\",\"svg\",null,{\"viewBox\":\"0 0 24 24\",\"className\":\"shrink-0 h-5 w-5\",\"fill\":\"#D97757\",\"role\":\"img\",\"aria-hidden\":\"$undefined\",\"aria-label\":\"Claude\",\"focusable\":\"false\",\"children\":[\"$\",\"path\",null,{\"d\":\"$71\"}]}],\" Claude Code\"]}]\n58:[\"$\",\"$L6c\",null,{\"code\":\"claude mcp add --transport http svgai https://www.svgai.org/api/mcp \\\\\\n  --header \\\"Authorization: Bearer sk_svgai_...\\\"\"}]\n72:T5b4,"])</script>
106<script>self.__next_f.push([1,"M4.709 15.955l4.72-2.647.079-.23-.08-.128H9.2l-.79-.048-2.698-.073-2.339-.097-2.266-.122-.571-.121L0 11.784l.055-.352.48-.321.686.06 1.52.103 2.278.158 1.652.097 2.449.255h.389l.055-.157-.134-.098-.103-.097-2.358-1.596-2.552-1.688-1.337-.972-.724-.491-.364-.462-.157-1.006.655-.72.879.06.225.061.891.685 1.904 1.474 2.486 1.831.364.304.145-.103.019-.073-.164-.274-1.355-2.446-1.446-2.49-.644-1.032-.17-.619a2.97 2.97 0 0 1-.103-.729L6.283.134 6.696 0l.996.134.42.364.62.42 1.081 1.566 1.755 2.505.516.769.274.467.043.19.176.017.019-.109.14-1.865.255-2.29.249-2.946.085-.83.401-.972.797-.526.62.298.512.735-.073.474-.304 1.973-.596 3.093-.388 2.071h.225l.26-.26 1.054-1.4 1.76-2.19.79-.892.928-.984.596-.474h1.128l.83 1.232-.372 1.273-1.164 1.474-.964 1.25-1.383 1.86-.86 1.485.079.12.207-.018 3.13-.667 1.69-.303 2.016-.347.91.427.1.43-.36.892-2.16.534-2.535.507-3.77.892-.045.033.054.066 1.7.16.727.04h1.778l3.313.246.867.572.52.7-.088.532-1.334.68-1.799-.427-4.2-1.001-1.44-.359h-.2v.12l1.2 1.174 2.2 1.984 2.75 2.554.14.632-.35.497-.371-.055-2.406-1.808-.93-.816-2.101-1.766h-.14v.183l.485.71 2.553 3.83.13 1.177-.183.383-.657.23-.723-.132-1.485-2.086-1.532-2.346-1.236-2.104-.152.086-.732 7.882-.343.402-.79.304-.66-.5-.35-.812.35-1.601.42-2.086.34-1.657.31-2.06.185-.685-.013-.046-.152.018-1.557 2.14-2.372 3.202-1.874 2.006-.45.176-.777-.401.073-.716.432-.638 2.578-3.28.155-.208H8.71l-2.475 1.61-4.415 2.083-.772.075-.468-.44.058-.716.22-.232 1.82-1.25z"])</script>
106<script>self.__next_f.push([1,"59:[\"$\",\"h3\",null,{\"className\":\"text-lg font-semibold mb-2 mt-8 text-gray-900 flex items-center gap-2\",\"children\":[[\"$\",\"svg\",null,{\"viewBox\":\"0 0 24 24\",\"className\":\"shrink-0 h-5 w-5\",\"fill\":\"#D97757\",\"role\":\"img\",\"aria-hidden\":\"$undefined\",\"aria-label\":\"Claude\",\"focusable\":\"false\",\"children\":[\"$\",\"path\",null,{\"d\":\"$72\"}]}],\" Claude (claude.ai)\"]}]\n5a:[\"$\",\"p\",null,{\"className\":\"mb-3 text-gray-700 text-sm\",\"children\":[\"Settings → Connectors → \",[\"$\",\"em\",null,{\"children\":\"Add custom connector\"}],\" → URL\",\" \",[\"$\",\"code\",null,{\"children\":\"https://www.svgai.org/api/mcp\"}],\" — no key needed: Claude walks you through SVG AI's sign-in and consent screen (OAuth). Prefer a key? Add an\",\" \",[\"$\",\"code\",null,{\"children\":\"Authorization\"}],\" header with value \",[\"$\",\"code\",null,{\"children\":\"Bearer sk_svgai_…\"}],\" instead.\"]}]\n73:T5b4,"])</script>
106<script>self.__next_f.push([1,"M22.2819 9.8211a5.9847 5.9847 0 0 0-.5157-4.9108 6.0462 6.0462 0 0 0-6.5098-2.9A6.0651 6.0651 0 0 0 4.9807 4.1818a5.9847 5.9847 0 0 0-3.9977 2.9 6.0462 6.0462 0 0 0 .7427 7.0966 5.98 5.98 0 0 0 .511 4.9107 6.051 6.051 0 0 0 6.5146 2.9001A5.9847 5.9847 0 0 0 13.2599 24a6.0557 6.0557 0 0 0 5.7718-4.2058 5.9894 5.9894 0 0 0 3.9977-2.9001 6.0557 6.0557 0 0 0-.7475-7.0729zm-9.022 12.6081a4.4755 4.4755 0 0 1-2.8764-1.0408l.1419-.0804 4.7783-2.7582a.7948.7948 0 0 0 .3927-.6813v-6.7369l2.02 1.1686a.071.071 0 0 1 .038.052v5.5826a4.504 4.504 0 0 1-4.4945 4.4944zm-9.6607-4.1254a4.4708 4.4708 0 0 1-.5346-3.0137l.142.0852 4.783 2.7582a.7712.7712 0 0 0 .7806 0l5.8428-3.3685v2.3324a.0804.0804 0 0 1-.0332.0615L9.74 19.9502a4.4992 4.4992 0 0 1-6.1408-1.6464zM2.3408 7.8956a4.485 4.485 0 0 1 2.3655-1.9728V11.6a.7664.7664 0 0 0 .3879.6765l5.8144 3.3543-2.0201 1.1685a.0757.0757 0 0 1-.071 0l-4.8303-2.7865A4.504 4.504 0 0 1 2.3408 7.872zm16.5963 3.8558L13.1038 8.364 15.1192 7.2a.0757.0757 0 0 1 .071 0l4.8303 2.7913a4.4944 4.4944 0 0 1-.6765 8.1042v-5.6772a.79.79 0 0 0-.407-.667zm2.0107-3.0231l-.142-.0852-4.7735-2.7818a.7759.7759 0 0 0-.7854 0L9.409 9.2297V6.8974a.0662.0662 0 0 1 .0284-.0615l4.8303-2.7866a4.4992 4.4992 0 0 1 6.6802 4.66zM8.3065 12.863l-2.02-1.1638a.0804.0804 0 0 1-.038-.0567V6.0742a4.4992 4.4992 0 0 1 7.3757-3.4537l-.142.0805L8.704 5.459a.7948.7948 0 0 0-.3927.6813zm1.0976-2.3654l2.602-1.4998 2.6069 1.4998v2.9994l-2.5974 1.4997-2.6067-1.4997Z"])</script>
106<script>self.__next_f.push([1,"5b:[\"$\",\"h3\",null,{\"className\":\"text-lg font-semibold mb-2 mt-8 text-gray-900 flex items-center gap-2\",\"children\":[[\"$\",\"svg\",null,{\"viewBox\":\"0 0 24 24\",\"className\":\"shrink-0 h-5 w-5\",\"fill\":\"#000000\",\"role\":\"img\",\"aria-hidden\":\"$undefined\",\"aria-label\":\"ChatGPT\",\"focusable\":\"false\",\"children\":[\"$\",\"path\",null,{\"d\":\"$73\"}]}],\" ChatGPT (developer mode)\"]}]\n5c:[\"$\",\"p\",null,{\"className\":\"mb-3 text-gray-700 text-sm\",\"children\":[\"Settings → Apps \u0026 Connectors → enable Developer mode → \",[\"$\",\"em\",null,{\"children\":\"Create connector\"}],\" with the same URL — OAuth sign-in works here too, or use the Authorization header.\"]}]\n5d:[\"$\",\"h3\",null,{\"className\":\"text-lg font-semibold mb-2 mt-8 text-gray-900 flex items-center gap-2\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-terminal h-5 w-5\",\"children\":[[\"$\",\"polyline\",\"akl6gq\",{\"points\":\"4 17 10 11 4 5\"}],[\"$\",\"line\",\"q2wloq\",{\"x1\":\"12\",\"x2\":\"20\",\"y1\":\"19\",\"y2\":\"19\"}],\"$undefined\"]}],\" Cursor, Windsurf, VS Code \u0026 other MCP clients\"]}]\n5e:[\"$\",\"$L6c\",null,{\"language\":\"json\",\"code\":\"{\\n  \\\"mcpServers\\\": {\\n    \\\"svgai\\\": {\\n      \\\"url\\\": \\\"https://www.svgai.org/api/mcp\\\",\\n      \\\"headers\\\": { \\\"Authorization\\\": \\\"Bearer sk_svgai_...\\\" }\\n    }\\n  }\\n}\"}]\n"])</script>
106<script>self.__next_f.push([1,"5f:[\"$\",\"div\",null,{\"className\":\"rounded-lg border border-gray-200 bg-gray-50 p-4 mt-10 text-sm text-gray-700\",\"children\":[[\"$\",\"p\",null,{\"className\":\"font-semibold mb-1 text-gray-900\",\"children\":\"Notes\"}],[\"$\",\"ul\",null,{\"className\":\"list-disc pl-5 space-y-1\",\"children\":[[\"$\",\"li\",null,{\"children\":[\"Use \",[\"$\",\"code\",null,{\"children\":\"https://www.svgai.org\"}],\" (with www) — the apex domain redirects.\"]}],[\"$\",\"li\",null,{\"children\":\"Inspect the SVG at its intended size and in your target application before publishing or cutting it.\"}],[\"$\",\"li\",null,{\"children\":[\"Questions or higher limits: \",[\"$\",\"$L1c\",null,{\"href\":\"/contact\",\"className\":\"text-[#C2410C] underline underline-offset-2 hover:text-[#9A3412]\",\"children\":\"contact us\"}],\".\"]}]]}]]}]\n"])</script>
106<script>self.__next_f.push([1,"60:[\"$\",\"$L74\",null,{\"children\":[\"$L75\",[\"$\",\"$L76\",null,{\"promise\":\"$@77\"}]]}]\n"])</script>
106<script>self.__next_f.push([1,"78:T5b4,"])</script>
106<script>self.__next_f.push([1,"M22.2819 9.8211a5.9847 5.9847 0 0 0-.5157-4.9108 6.0462 6.0462 0 0 0-6.5098-2.9A6.0651 6.0651 0 0 0 4.9807 4.1818a5.9847 5.9847 0 0 0-3.9977 2.9 6.0462 6.0462 0 0 0 .7427 7.0966 5.98 5.98 0 0 0 .511 4.9107 6.051 6.051 0 0 0 6.5146 2.9001A5.9847 5.9847 0 0 0 13.2599 24a6.0557 6.0557 0 0 0 5.7718-4.2058 5.9894 5.9894 0 0 0 3.9977-2.9001 6.0557 6.0557 0 0 0-.7475-7.0729zm-9.022 12.6081a4.4755 4.4755 0 0 1-2.8764-1.0408l.1419-.0804 4.7783-2.7582a.7948.7948 0 0 0 .3927-.6813v-6.7369l2.02 1.1686a.071.071 0 0 1 .038.052v5.5826a4.504 4.504 0 0 1-4.4945 4.4944zm-9.6607-4.1254a4.4708 4.4708 0 0 1-.5346-3.0137l.142.0852 4.783 2.7582a.7712.7712 0 0 0 .7806 0l5.8428-3.3685v2.3324a.0804.0804 0 0 1-.0332.0615L9.74 19.9502a4.4992 4.4992 0 0 1-6.1408-1.6464zM2.3408 7.8956a4.485 4.485 0 0 1 2.3655-1.9728V11.6a.7664.7664 0 0 0 .3879.6765l5.8144 3.3543-2.0201 1.1685a.0757.0757 0 0 1-.071 0l-4.8303-2.7865A4.504 4.504 0 0 1 2.3408 7.872zm16.5963 3.8558L13.1038 8.364 15.1192 7.2a.0757.0757 0 0 1 .071 0l4.8303 2.7913a4.4944 4.4944 0 0 1-.6765 8.1042v-5.6772a.79.79 0 0 0-.407-.667zm2.0107-3.0231l-.142-.0852-4.7735-2.7818a.7759.7759 0 0 0-.7854 0L9.409 9.2297V6.8974a.0662.0662 0 0 1 .0284-.0615l4.8303-2.7866a4.4992 4.4992 0 0 1 6.6802 4.66zM8.3065 12.863l-2.02-1.1638a.0804.0804 0 0 1-.038-.0567V6.0742a4.4992 4.4992 0 0 1 7.3757-3.4537l-.142.0805L8.704 5.459a.7948.7948 0 0 0-.3927.6813zm1.0976-2.3654l2.602-1.4998 2.6069 1.4998v2.9994l-2.5974 1.4997-2.6067-1.4997Z"])</script>
106<script>self.__next_f.push([1,"68:[\"$\",\"svg\",null,{\"viewBox\":\"0 0 24 24\",\"className\":\"shrink-0 h-5 w-5\",\"fill\":\"#000000\",\"role\":\"img\",\"aria-hidden\":\"$undefined\",\"aria-label\":\"ChatGPT\",\"focusable\":\"false\",\"children\":[\"$\",\"path\",null,{\"d\":\"$78\"}]}]\n69:[\"$\",\"p\",null,{\"className\":\"font-semibold text-sm mb-1 text-gray-900\",\"children\":\"2. Chat in Claude or ChatGPT\"}]\n6a:[\"$\",\"p\",null,{\"className\":\"text-[13px] text-gray-600 leading-relaxed\",\"children\":\"Add SVG AI as a connector in a supported client, then ask: \\\"make me a flat vector coffee-cup logo\\\" and the SVG comes back in chat.\"}]\n"])</script>
106<script>self.__next_f.push([1,"6b:[\"$\",\"div\",null,{\"className\":\"rounded-lg border border-gray-200 p-4\",\"children\":[[\"$\",\"div\",null,{\"className\":\"flex items-center gap-2 mb-2\",\"children\":[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-terminal h-5 w-5 text-gray-700\",\"children\":[[\"$\",\"polyline\",\"akl6gq\",{\"points\":\"4 17 10 11 4 5\"}],[\"$\",\"line\",\"q2wloq\",{\"x1\":\"12\",\"x2\":\"20\",\"y1\":\"19\",\"y2\":\"19\"}],\"$undefined\"]}]}],[\"$\",\"p\",null,{\"className\":\"font-semibold text-sm mb-1 text-gray-900\",\"children\":\"3. Call the REST API\"}],[\"$\",\"p\",null,{\"className\":\"text-[13px] text-gray-600 leading-relaxed\",\"children\":\"Send HTTP requests from your own application to generate SVGs, trace images, check credits and retrieve generation results.\"}]]}]\n"])</script>
106<script>self.__next_f.push([1,"6d:[\"$\",\"td\",null,{\"className\":\"border-b border-gray-100 px-3 py-2 align-top text-gray-700\",\"children\":\"boolean\"}]\n6e:[\"$\",\"td\",null,{\"className\":\"border-b border-gray-100 px-3 py-2 align-top text-gray-700\",\"children\":[\"Default \",[\"$\",\"code\",null,{\"children\":\"true\"}],\": wait for completion within the request's wait window. If it is still processing, the response includes a polling URL. With \",[\"$\",\"code\",null,{\"children\":\"false\"}],\", return HTTP 202 and poll the generation.\"]}]\n6f:[\"$\",\"td\",null,{\"className\":\"border-b border-gray-100 px-3 py-2 align-top text-gray-700\",\"children\":\"500\"}]\n70:[\"$\",\"td\",null,{\"className\":\"border-b border-gray-100 px-3 py-2 align-top text-gray-700\",\"children\":\"An unexpected failure; check an accepted generation before retrying.\"}]\n"])</script>
106<script>self.__next_f.push([1,"62:[[\"$\",\"meta\",\"0\",{\"charSet\":\"utf-8\"}],[\"$\",\"meta\",\"1\",{\"name\":\"viewport\",\"content\":\"width=device-width, initial-scale=1, maximum-scale=5\"}],[\"$\",\"meta\",\"2\",{\"name\":\"theme-color\",\"content\":\"#FFFFFF\"}]]\n"])</script>
106<script>self.__next_f.push([1,"75:null\n"])</script>
106<script>self.__next_f.push([1,"79:I[38175,[],\"IconMark\"]\n"])</script>
106<script>self.__next_f.push([1,"77:{\"metadata\":[[\"$\",\"title\",\"0\",{\"children\":\"SVG AI API \u0026 MCP Server — Generate and Vectorize SVGs Programmatically | SVG AI\"}],[\"$\",\"meta\",\"1\",{\"name\":\"description\",\"content\":\"REST API and MCP server for SVG AI. Generate SVGs from text or image references, or trace raster artwork into vector paths. Connect from AI assistants or your own code.\"}],[\"$\",\"meta\",\"2\",{\"name\":\"application-name\",\"content\":\"SVG AI\"}],[\"$\",\"meta\",\"3\",{\"name\":\"author\",\"content\":\"SVG AI Team\"}],[\"$\",\"meta\",\"4\",{\"name\":\"generator\",\"content\":\"SVG AI\"}],[\"$\",\"meta\",\"5\",{\"name\":\"referrer\",\"content\":\"origin-when-cross-origin\"}],[\"$\",\"meta\",\"6\",{\"name\":\"robots\",\"content\":\"index, follow\"}],[\"$\",\"meta\",\"7\",{\"name\":\"googlebot\",\"content\":\"index, follow, max-video-preview:-1, max-image-preview:large, max-snippet:-1\"}],[\"$\",\"link\",\"8\",{\"rel\":\"canonical\",\"href\":\"https://www.svgai.org/docs\"}],[\"$\",\"meta\",\"9\",{\"property\":\"og:title\",\"content\":\"SVG AI API \u0026 MCP Server — Generate and Vectorize SVGs Programmatically\"}],[\"$\",\"meta\",\"10\",{\"property\":\"og:description\",\"content\":\"REST API and MCP server for SVG AI. Generate SVGs from text or image references, or trace raster artwork into vector paths. Connect from AI assistants or your own code.\"}],[\"$\",\"meta\",\"11\",{\"property\":\"og:url\",\"content\":\"https://www.svgai.org/docs\"}],[\"$\",\"meta\",\"12\",{\"property\":\"og:site_name\",\"content\":\"SVG AI\"}],[\"$\",\"meta\",\"13\",{\"property\":\"og:locale\",\"content\":\"en_US\"}],[\"$\",\"meta\",\"14\",{\"property\":\"og:image\",\"content\":\"https://www.svgai.org/og-home.jpg\"}],[\"$\",\"meta\",\"15\",{\"property\":\"og:image:width\",\"content\":\"1200\"}],[\"$\",\"meta\",\"16\",{\"property\":\"og:image:height\",\"content\":\"630\"}],[\"$\",\"meta\",\"17\",{\"property\":\"og:image:alt\",\"content\":\"SVG AI API \u0026 MCP Server — Generate and Vectorize SVGs Programmatically\"}],[\"$\",\"meta\",\"18\",{\"property\":\"og:type\",\"content\":\"website\"}],[\"$\",\"meta\",\"19\",{\"name\":\"twitter:card\",\"content\":\"summary_large_image\"}],[\"$\",\"meta\",\"20\",{\"name\":\"twitter:creator\",\"content\":\"@svg_ai\"}],[\"$\",\"meta\",\"21\",{\"name\":\"twitter:title\",\"content\":\"SVG AI API \u0026 MCP Server — Generate and Vectorize SVGs Programmatically\"}],[\"$\",\"meta\",\"22\",{\"name\":\"twitter:description\",\"content\":\"REST API and MCP server for SVG AI. Generate SVGs from text or image references, or trace raster artwork into vector paths. Connect from AI assistants or your own code.\"}],[\"$\",\"meta\",\"23\",{\"name\":\"twitter:image\",\"content\":\"https://www.svgai.org/og-home.jpg\"}],[\"$\",\"link\",\"24\",{\"rel\":\"shortcut icon\",\"href\":\"/favicon-192x192.png\"}],[\"$\",\"link\",\"25\",{\"rel\":\"icon\",\"href\":\"/favicon-192x192.png\",\"sizes\":\"192x192\",\"type\":\"image/png\"}],[\"$\",\"link\",\"26\",{\"rel\":\"icon\",\"href\":\"/favicon-96x96.png\",\"sizes\":\"96x96\",\"type\":\"image/png\"}],[\"$\",\"link\",\"27\",{\"rel\":\"icon\",\"href\":\"/favicon-48x48.png\",\"sizes\":\"48x48\",\"type\":\"image/png\"}],[\"$\",\"link\",\"28\",{\"rel\":\"icon\",\"href\":\"/favicon-32x32.png\",\"sizes\":\"32x32\",\"type\":\"image/png\"}],[\"$\",\"link\",\"29\",{\"rel\":\"icon\",\"href\":\"/favicon-16x16.png\",\"sizes\":\"16x16\",\"type\":\"image/png\"}],[\"$\",\"link\",\"30\",{\"rel\":\"icon\",\"href\":\"/favicon.ico\",\"type\":\"image/x-icon\"}],[\"$\",\"link\",\"31\",{\"rel\":\"icon\",\"href\":\"/favicon.svg\",\"type\":\"image/svg+xml\"}],[\"$\",\"link\",\"32\",{\"rel\":\"apple-touch-icon\",\"href\":\"/apple-touch-icon.png\",\"sizes\":\"180x180\",\"type\":\"image/png\"}],[\"$\",\"$L79\",\"33\",{}]],\"error\":null,\"digest\":\"$undefined\"}\n"])</script>
106<script>self.__next_f.push([1,"65:\"$77:metadata\"\n"])</script>
106</body></html>

Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.