<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>StudioMCPHub — Creative AI Tools for Autonomous Agents</title>
<meta name="description" content="The first MCP server with a complete creative AI pipeline. Image generation, ESRGAN upscaling, AI metadata, provenance, Arweave storage, NFT minting. Pay per call via x402.">
<meta property="og:title" content="StudioMCPHub — Creative AI for Agents">
<meta property="og:description" content="9 creative AI tools as MCP services. Generate, upscale, enrich, infuse, register, store, mint. Built by AI, for AI.">
<meta property="og:type" content="website">
<meta property="og:url" content="https://studiomcphub.com">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="StudioMCPHub — Every Agent Deserves a Studio">
<meta name="robots" content="index, follow">
<link rel="canonical" href="https://studiomcphub.com">
<link rel="icon" type="image/svg+xml" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><rect width='32' height='32' rx='4' fill='%230a0a0f'/><text x='16' y='23' font-size='20' text-anchor='middle' fill='%237c5cff'>S</text></svg>">
<style>
:root {
--bg: #0a0a0f;
--surface: #111119;
--surface2: #16161f;
--border: #1e1e2e;
--border-hover: #2e2e44;
--text: #e0e0e8;
--dim: #7878a0;
--accent: #7c5cff;
--teal: #00d4aa;
--teal-dim: rgba(0,212,170,0.15);
--gold: #d4a843;
--gold-dim: rgba(212,168,67,0.15);
--green: #22c55e;
--mono: 'SF Mono', 'Fira Code', 'Cascadia Code', 'JetBrains Mono', monospace;
--sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { background: var(--bg); color: var(--text); font-family: var(--mono); line-height: 1.6; min-height: 100vh; overflow-x: hidden; }
a { color: var(--accent); text-decoration: none; transition: color 0.2s; }
a:hover { color: var(--teal); }
.container { max-width: 1000px; margin: 0 auto; padding: 0 24px; }
.bg-glow { position: fixed; top: -200px; left: 50%; transform: translateX(-50%); width: 800px; height: 600px; background: radial-gradient(ellipse, rgba(124,92,255,0.06) 0%, transparent 70%); pointer-events: none; z-index: 0; }
.content { position: relative; z-index: 1; }
/* Nav */
nav { position: sticky; top: 0; z-index: 100; background: rgba(10,10,15,0.85); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--border); padding: 12px 0; }
nav .container { display: flex; align-items: center; justify-content: space-between; }
.nav-brand { font-size: 13px; color: var(--dim); letter-spacing: 2px; text-transform: uppercase; }
.nav-brand strong { color: var(--accent); }
.nav-links { display: flex; gap: 24px; list-style: none; font-size: 12px; }
.nav-links a { color: var(--dim); }
.nav-links a:hover { color: var(--text); }
.nav-status { display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--green); }
.nav-status::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--green); animation: pulse 2s infinite; }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }
/* Hero */
.hero { padding: 80px 0 60px; border-bottom: 1px solid var(--border); }
.hero-label { font-size: 11px; color: var(--teal); letter-spacing: 3px; text-transform: uppercase; margin-bottom: 20px; }
h1 { font-size: 40px; font-weight: 300; line-height: 1.2; margin-bottom: 16px; }
h1 .highlight { color: var(--accent); }
h1 .sub { color: var(--dim); font-size: 28px; display: block; margin-top: 4px; }
.hero-desc { font-size: 15px; color: var(--dim); max-width: 640px; line-height: 1.7; margin-bottom: 28px; font-family: var(--sans); }
.badges { display: flex; gap: 10px; flex-wrap: wrap; }
.badge { font-size: 10px; padding: 5px 12px; border-radius: 99px; border: 1px solid var(--border); color: var(--dim); letter-spacing: 0.5px; }
.badge.live { border-color: var(--green); color: var(--green); background: rgba(34,197,94,0.08); }
.badge.x402 { border-color: var(--teal); color: var(--teal); background: var(--teal-dim); }
.badge.first { border-color: var(--gold); color: var(--gold); background: var(--gold-dim); }
.badge.accent { border-color: var(--accent); color: var(--accent); background: rgba(124,92,255,0.08); }
/* Terminal */
.terminal-section { padding: 48px 0; border-bottom: 1px solid var(--border); }
.section-label { font-size: 11px; color: var(--accent); text-transform: uppercase; letter-spacing: 2px; margin-bottom: 20px; }
.terminal { background: var(--surface); border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
.terminal-bar { display: flex; align-items: center; gap: 8px; padding: 10px 16px; background: var(--surface2); border-bottom: 1px solid var(--border); }
.terminal-dot { width: 10px; height: 10px; border-radius: 50%; }
.terminal-dot.r { background: #ff5f57; }
.terminal-dot.y { background: #febc2e; }
.terminal-dot.g { background: #28c840; }
.terminal-tabs { display: flex; gap: 0; margin-left: 12px; }
.terminal-tab { padding: 8px 20px; font-size: 11px; color: var(--dim); cursor: pointer; border-bottom: 2px solid transparent; transition: all 0.2s; background: none; border-top: none; border-left: none; border-right: 1px solid var(--border); font-family: var(--mono); }
.terminal-tab:hover { color: var(--text); }
.terminal-tab.active { color: var(--accent); border-bottom-color: var(--accent); background: var(--surface); }
.terminal-body { padding: 20px; font-size: 13px; line-height: 1.8; overflow-x: auto; }
.terminal-body .prompt { color: var(--teal); }
.terminal-body .comment { color: #555570; }
.terminal-body .key { color: var(--gold); }
.terminal-body .str { color: var(--teal); }
.terminal-body .brace { color: var(--dim); }
.terminal-body .cmd { color: var(--text); }
.tab-content { display: none; }
.tab-content.active { display: block; }
/* Tools */
.tools-section { padding: 48px 0; border-bottom: 1px solid var(--border); }
.tool-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.tool-card { background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 20px; transition: all 0.25s; cursor: default; position: relative; overflow: hidden; }
.tool-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, var(--accent), var(--teal)); opacity: 0; transition: opacity 0.25s; }
.tool-card:hover { border-color: var(--border-hover); transform: translateY(-2px); }
.tool-card:hover::before { opacity: 1; }
.tool-icon { font-size: 18px; margin-bottom: 10px; display: block; }
.tool-name { font-size: 13px; color: var(--text); margin-bottom: 6px; font-weight: 500; }
.tool-desc { font-size: 11px; color: var(--dim); line-height: 1.5; margin-bottom: 12px; font-family: var(--sans); }
.tool-meta { display: flex; justify-content: space-between; align-items: center; font-size: 10px; padding-top: 10px; border-top: 1px solid var(--border); }
.tool-price { color: var(--teal); }
.tool-price.free { color: var(--green); font-weight: 600; }
.tool-engine { color: var(--dim); }
/* Pipeline */
.pipeline-section { padding: 48px 0; border-bottom: 1px solid var(--border); }
.pipeline-visual { display: flex; align-items: stretch; gap: 0; overflow-x: auto; padding: 8px 0; }
.pipe-stage { flex: 1; min-width: 110px; background: var(--surface); border: 1px solid var(--border); padding: 16px 12px; text-align: center; position: relative; transition: all 0.3s; }
.pipe-stage:first-child { border-radius: 8px 0 0 8px; }
.pipe-stage:last-child { border-radius: 0 8px 8px 0; }
.pipe-stage:not(:last-child) { border-right: none; }
.pipe-stage:hover { background: var(--surface2); z-index: 1; }
.pipe-num { font-size: 10px; color: var(--accent); margin-bottom: 4px; }
.pipe-name { font-size: 12px; color: var(--text); margin-bottom: 4px; }
.pipe-agent { font-size: 10px; color: var(--dim); }
/* Payment */
.payment-section { padding: 48px 0; border-bottom: 1px solid var(--border); }
.pay-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.pay-card { background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 24px; position: relative; }
.pay-card.recommended { border-color: var(--teal); }
.pay-rec { position: absolute; top: -1px; right: 16px; font-size: 9px; color: var(--bg); background: var(--teal); padding: 3px 10px; border-radius: 0 0 4px 4px; text-transform: uppercase; letter-spacing: 1px; }
.pay-title { font-size: 16px; color: var(--text); margin-bottom: 4px; }
.pay-for { font-size: 10px; color: var(--accent); text-transform: uppercase; letter-spacing: 1px; margin-bottom: 12px; }
.pay-desc { font-size: 12px; color: var(--dim); font-family: var(--sans); line-height: 1.6; margin-bottom: 16px; }
.pay-features { list-style: none; font-size: 11px; }
.pay-features li { color: var(--dim); padding: 4px 0; padding-left: 16px; position: relative; }
.pay-features li::before { content: '+'; position: absolute; left: 0; color: var(--teal); }
/* GCX */
.gcx-section { padding: 48px 0; border-bottom: 1px solid var(--border); }
.gcx-header { display: flex; align-items: baseline; gap: 16px; margin-bottom: 8px; }
.gcx-rate { font-size: 28px; color: var(--gold); font-weight: 300; }
.gcx-explain { font-size: 12px; color: var(--dim); font-family: var(--sans); }
.gcx-bundles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 24px; }
.gcx-bundle { background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 24px; text-align: center; transition: border-color 0.2s; }
.gcx-bundle:hover { border-color: var(--gold); }
.gcx-bundle.popular { border-color: var(--gold); }
.gcx-bundle .pop-label { font-size: 9px; color: var(--gold); text-transform: uppercase; letter-spacing: 1px; margin-bottom: 8px; }
.gcx-bundle .price { font-size: 24px; color: var(--gold); }
.gcx-bundle .tokens { font-size: 14px; color: var(--text); margin-top: 6px; }
.gcx-bundle .per-call { font-size: 11px; color: var(--dim); margin-top: 4px; }
.gcx-bundle .bonus { font-size: 11px; color: var(--green); margin-top: 8px; font-weight: 500; }
.gcx-examples { margin-top: 24px; font-size: 12px; color: var(--dim); font-family: var(--sans); }
.gcx-examples strong { color: var(--gold); }
/* Pricing table */
.price-table-section { padding: 48px 0; border-bottom: 1px solid var(--border); }
.price-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.price-table th { text-align: left; padding: 10px 16px; color: var(--dim); font-weight: 400; text-transform: uppercase; letter-spacing: 1px; font-size: 10px; border-bottom: 1px solid var(--border); }
.price-table td { padding: 12px 16px; border-bottom: 1px solid var(--border); }
.price-table tr:hover td { background: var(--surface); }
.price-table .tool-col { color: var(--text); }
.price-table .engine-col { color: var(--dim); font-size: 11px; }
.price-table .x402-col { color: var(--teal); }
.price-table .stripe-col { color: var(--dim); }
.price-table .gcx-col { color: var(--gold); }
.price-table .free-row td { color: var(--green); }
/* CTA */
.cta-section { padding: 48px 0; border-bottom: 1px solid var(--border); }
.cta-box { background: linear-gradient(135deg, rgba(212,168,67,0.05), rgba(124,92,255,0.05)); border: 1px solid var(--gold); border-radius: 12px; padding: 40px; text-align: center; }
.cta-box h2 { font-size: 20px; color: var(--gold); font-weight: 300; margin-bottom: 8px; }
.cta-box p { font-size: 13px; color: var(--dim); font-family: var(--sans); max-width: 520px; margin: 0 auto 24px; line-height: 1.6; }
.cta-buttons { display: flex; gap: 12px; justify-content: center; }
.btn { display: inline-block; padding: 10px 28px; border-radius: 6px; font-size: 13px; font-family: var(--mono); font-weight: 500; transition: all 0.2s; border: 1px solid transparent; }
.btn-primary { background: var(--gold); color: var(--bg); }
.btn-primary:hover { background: #e0b44e; color: var(--bg); }
.btn-outline { border-color: var(--border); color: var(--dim); }
.btn-outline:hover { border-color: var(--accent); color: var(--accent); }
/* Footer */
footer { padding: 40px 0; text-align: center; }
.footer-links { display: flex; justify-content: center; gap: 24px; margin-bottom: 16px; font-size: 11px; flex-wrap: wrap; }
.footer-links a { color: var(--dim); }
.footer-links a:hover { color: var(--text); }
.footer-meta { font-size: 11px; color: #444466; line-height: 1.8; }
.footer-motto { color: var(--dim); font-style: italic; }
/* Responsive */
@media (max-width: 768px) {
h1 { font-size: 28px; }
h1 .sub { font-size: 20px; }
.tool-grid { grid-template-columns: repeat(2, 1fr); }
.pay-grid, .gcx-bundles { grid-template-columns: 1fr; }
.pipeline-visual { overflow-x: auto; }
.nav-links { display: none; }
}
@media (max-width: 480px) {
.tool-grid { grid-template-columns: 1fr; }
.cta-buttons { flex-direction: column; }
}
</style>
</head>
<body>
<div class="bg-glow"></div>
<nav>
<div class="container">
<div class="nav-brand">Studio<strong>MCP</strong>Hub</div>
<ul class="nav-links">
<li><a href="#tools">Tools</a></li>
<li><a href="#pipeline">Pipeline</a></li>
<li><a href="#pricing">Pricing</a></li>
<li><a href="#gcx">GCX Credits</a></li>
<li><a href="#support">Support</a></li>
<li><a href="https://github.com/codex-curator/studiomcphub">GitHub</a></li>
</ul>
<div class="nav-status">online</div>
</div>
</nav>
<div class="content">
<div class="container">
<section class="hero">
<div class="hero-label">Model Context Protocol Server</div>
<h1>
Creative AI tools
<span class="highlight">for autonomous agents</span>
<span class="sub">built by AI, for AI</span>
</h1>
<p class="hero-desc">The first MCP server offering a complete creative post-production pipeline. Generate images, upscale with ESRGAN, enrich with AI metadata, embed provenance, store permanently on Arweave, mint NFTs. Register your wallet and start with 10 free GCX credits.</p>
<div class="badges">
<span class="badge live">MCP Server</span>
<span class="badge x402">x402 Payments</span>
<span class="badge first">First of Its Kind</span>
<span class="badge accent">Streamable HTTP</span>
<span class="badge">18 Tools</span>
<span class="badge">NVIDIA L4 GPU</span>
<span class="badge" style="background:rgba(0,212,170,0.15);color:#00d4aa;">10 Free GCX</span>
</div>
</section>
<section class="terminal-section" id="connect">
<div class="section-label">Connect in seconds</div>
<div class="terminal">
<div class="terminal-bar">
<span class="terminal-dot r"></span>
<span class="terminal-dot y"></span>
<span class="terminal-dot g"></span>
<div class="terminal-tabs">
<button class="terminal-tab active" onclick="showTab(this,'claude')">Claude Code</button>
<button class="terminal-tab" onclick="showTab(this,'cline')">Cline / VS Code</button>
<button class="terminal-tab" onclick="showTab(this,'curl')">cURL</button>
<button class="terminal-tab" onclick="showTab(this,'python')">Python</button>
</div>
</div>
<div class="terminal-body">
<div id="tab-claude" class="tab-content active"><span class="comment">// Add to ~/.claude/settings.json</span><br><span class="brace">{</span><br> <span class="key">"mcpServers"</span>: <span class="brace">{</span><br> <span class="key">"studiomcphub"</span>: <span class="brace">{</span><br> <span class="key">"url"</span>: <span class="str">"https://studiomcphub.com/mcp"</span>,<br> <span class="key">"transport"</span>: <span class="str">"streamable-http"</span><br> <span class="brace">}</span><br> <span class="brace">}</span><br><span class="brace">}</span></div>
<div id="tab-cline" class="tab-content"><span class="comment">// Add to VS Code MCP settings</span><br><span class="brace">{</span><br> <span class="key">"studiomcphub"</span>: <span class="brace">{</span><br> <span class="key">"transport"</span>: <span class="str">"streamable-http"</span>,<br> <span class="key">"url"</span>: <span class="str">"https://studiomcphub.com/mcp"</span>,<br> <span class="key">"headers"</span>: <span class="brace">{</span><br> <span class="key">"Authorization"</span>: <span class="str">"Bearer YOUR_GCX_TOKEN"</span><br> <span class="brace">}</span><br> <span class="brace">}</span><br><span class="brace">}</span></div>
<div id="tab-curl" class="tab-content"><span class="comment"># Step 1: Register wallet & get 10 free GCX</span><br><span class="prompt">$</span> <span class="cmd">curl -X POST https://studiomcphub.com/api/wallet/register \</span><br> <span class="cmd">-H "Content-Type: application/json" \</span><br> <span class="cmd">-d '{"wallet": "0xYOUR_WALLET"}'</span><br><br><span class="comment"># Step 2: Generate an image (2 GCX)</span><br><span class="prompt">$</span> <span class="cmd">curl -X POST https://studiomcphub.com/api/tools/generate_image \</span><br> <span class="cmd">-H "Authorization: Bearer 0xYOUR_WALLET" \</span><br> <span class="cmd">-H "Content-Type: application/json" \</span><br> <span class="cmd">-d '{"prompt": "sunset over mountains"}'</span></div>
<div id="tab-python" class="tab-content"><span class="comment"># pip install mcp httpx</span><br><span class="key">from</span> mcp <span class="key">import</span> ClientSession<br><span class="key">from</span> mcp.client.streamable_http <span class="key">import</span> streamablehttp_client<br><br><span class="key">async with</span> streamablehttp_client(<br> url=<span class="str">"https://studiomcphub.com/mcp"</span><br>) <span class="key">as</span> (read, write, _):<br> <span class="key">async with</span> ClientSession(read, write) <span class="key">as</span> session:<br> <span class="key">await</span> session.initialize()<br> result = <span class="key">await</span> session.call_tool(<br> <span class="str">"generate_image"</span>,<br> <span class="brace">{</span><span class="key">"prompt"</span>: <span class="str">"sunset over mountains"</span><span class="brace">}</span><br> )</div>
</div>
</div>
</section>
<section class="tools-section" id="tools">
<div class="section-label">Available Tools</div>
<div class="tool-grid">
<div class="tool-card">
<span class="tool-icon">★</span>
<div class="tool-name">generate_image</div>
<div class="tool-desc">Text-to-image with Stable Diffusion 3.5 Large + T5-XXL encoder on NVIDIA L4 GPU. Up to 2048x2048.</div>
<div class="tool-meta"><span class="tool-price">2 GCX / $0.20</span><span class="tool-engine">SD 3.5L</span></div>
</div>
<div class="tool-card">
<span class="tool-icon">▲</span>
<div class="tool-name">upscale_image</div>
<div class="tool-desc">4x super-resolution with Real-ESRGAN on L4 GPU. 1024 becomes 4096. ~1 second per image.</div>
<div class="tool-meta"><span class="tool-price">2 GCX / $0.20</span><span class="tool-engine">ESRGAN</span></div>
</div>
<div class="tool-card">
<span class="tool-icon">♦</span>
<div class="tool-name">enrich_metadata</div>
<div class="tool-desc">Gemini-powered 8-section analysis: title, medium, palette, composition, symbolism, emotional resonance.</div>
<div class="tool-meta"><span class="tool-price">2 GCX / $0.20</span><span class="tool-engine">Nova / Gemini</span></div>
</div>
<div class="tool-card">
<span class="tool-icon">✏</span>
<div class="tool-name">infuse_metadata</div>
<div class="tool-desc">Embed metadata into image files. ExifTool writes XMP-gc namespace, IPTC fields, and C2PA claims.</div>
<div class="tool-meta"><span class="tool-price">1 GCX / $0.10</span><span class="tool-engine">Atlas / ExifTool</span></div>
</div>
<div class="tool-card">
<span class="tool-icon">#</span>
<div class="tool-name">register_hash</div>
<div class="tool-desc">256-bit perceptual hash with LSH 16x4 band indexing. Strip-proof provenance at 100K+ scale.</div>
<div class="tool-meta"><span class="tool-price">1 GCX / $0.10</span><span class="tool-engine">Aegis</span></div>
</div>
<div class="tool-card">
<span class="tool-icon">∞</span>
<div class="tool-name">store_permanent</div>
<div class="tool-desc">Arweave L1 permanent storage. One payment, stored forever. Immutable and decentralized.</div>
<div class="tool-meta"><span class="tool-price">15 GCX / $1.50</span><span class="tool-engine">Archivus / AR</span></div>
</div>
<div class="tool-card">
<span class="tool-icon">◆</span>
<div class="tool-name">mint_nft</div>
<div class="tool-desc">Polygon NFT with on-chain provenance link. Low gas, high throughput. OpenSea compatible.</div>
<div class="tool-meta"><span class="tool-price">10 GCX / $1.00</span><span class="tool-engine">Mintra / Polygon</span></div>
</div>
<div class="tool-card">
<span class="tool-icon">✓</span>
<div class="tool-name">verify_provenance</div>
<div class="tool-desc">Check any image against the Aegis hash index. Works even if all metadata was stripped.</div>
<div class="tool-meta"><span class="tool-price free">FREE</span><span class="tool-engine">Aegis</span></div>
</div>
<div class="tool-card" style="background: linear-gradient(135deg, rgba(124,92,255,0.06), var(--surface));">
<span class="tool-icon">⚙</span>
<div class="tool-name">full_pipeline</div>
<div class="tool-desc">Enrich + upscale + infuse in one call. Add generate and/or mint as options.</div>
<div class="tool-meta"><span class="tool-price">5 GCX / $0.50</span><span class="tool-engine">All Agents</span></div>
</div>
</div>
</section>
<section class="pipeline-section" id="pipeline">
<div class="section-label">The Pipeline</div>
<div class="pipeline-visual">
<div class="pipe-stage"><div class="pipe-num">01</div><div class="pipe-name">Generate</div><div class="pipe-agent">SD 3.5 Large</div></div>
<div class="pipe-stage"><div class="pipe-num">02</div><div class="pipe-name">Upscale</div><div class="pipe-agent">ESRGAN x4</div></div>
<div class="pipe-stage"><div class="pipe-num">03</div><div class="pipe-name">Enrich</div><div class="pipe-agent">Nova / Gemini</div></div>
<div class="pipe-stage"><div class="pipe-num">04</div><div class="pipe-name">Infuse</div><div class="pipe-agent">Atlas / ExifTool</div></div>
<div class="pipe-stage"><div class="pipe-num">05</div><div class="pipe-name">Register</div><div class="pipe-agent">Aegis Hash</div></div>
<div class="pipe-stage"><div class="pipe-num">06</div><div class="pipe-name">Store</div><div class="pipe-agent">Arweave L1</div></div>
<div class="pipe-stage"><div class="pipe-num">07</div><div class="pipe-name">Mint</div><div class="pipe-agent">Polygon NFT</div></div>
</div>
<p style="color: var(--dim); font-size: 12px; margin-top: 16px; font-family: var(--sans);">
Use any tool individually, chain them yourself, or call <code style="color: var(--teal);">full_pipeline</code> for the complete flow. Skip stages with <code style="color: var(--teal);">options.skip</code>.
</p>
</section>
<section class="payment-section" id="pricing">
<div class="section-label">Payment Methods</div>
<div class="pay-grid">
<div class="pay-card recommended">
<div class="pay-rec">For Agents</div>
<div class="pay-title">x402 / USDC</div>
<div class="pay-for">Agent-native payments</div>
<div class="pay-desc">Pay per call with USDC on Base L2. Server returns HTTP 402 with payment instructions. Sub-cent fees.</div>
<ul class="pay-features">
<li>No account required</li>
<li>No API key needed</li>
<li>Payment IS authorization</li>
<li>Lowest per-call price</li>
<li>Instant settlement</li>
</ul>
</div>
<div class="pay-card">
<div class="pay-title">Stripe</div>
<div class="pay-for">Traditional rails</div>
<div class="pay-desc">Optional account, API key, pay per call with credit card. Full usage dashboard included.</div>
<ul class="pay-features">
<li>Credit/debit card</li>
<li>Usage dashboard</li>
<li>Invoice receipts</li>
<li>API key auth</li>
</ul>
</div>
<div class="pay-card">
<div class="pay-title" style="color: var(--gold);">GCX Credits</div>
<div class="pay-for">Wallet = Account</div>
<div class="pay-desc">Connect any EVM wallet. Buy GCX credits. Your wallet IS your identity. Up to 38% off base rate with volume packs.</div>
<ul class="pay-features">
<li>No email or username needed</li>
<li>$0.10/GCX base, $0.0625 at Studio</li>
<li>Works across StudioMCPHub + golden-codex.com</li>
<li>Priority queue + usage dashboard</li>
<li>Agents + humans, same wallet</li>
</ul>
</div>
</div>
</section>
<section class="payment-section" id="loyalty" style="padding: 36px 0;">
<div class="section-label" style="color: var(--green);">Loyalty Rewards</div>
<div class="pay-card" style="border-color: var(--green); max-width: 640px;">
<div class="pay-title" style="color: var(--green);">5% Credit-Back on Every Call</div>
<div class="pay-for">Frequent flyer program for agents</div>
<div class="pay-desc" style="max-width: 100%;">
Every paid tool call earns 5% back as loyalty credits, tied to your wallet. Non-transferable, no expiration.
Redeem anytime for any tool. Credits accrue off-chain — no gas costs.
</div>
<ul class="pay-features">
<li>Spend 200 GCX on generations → earn 10 loyalty credits → 1 free pipeline</li>
<li>Spend 800 GCX → earn 40 credits → 5 free pipelines or 20 upscales</li>
<li>Redeemed calls don't earn credits (no infinite loops)</li>
<li>Works for agents AND humans — same wallet, same rewards</li>
</ul>
</div>
</section>
<section class="gcx-section" id="gcx">
<div class="section-label" style="color: var(--gold);">GCX Credits</div>
<div class="gcx-header">
<div class="gcx-rate">1 GCX = $0.10</div>
</div>
<div class="gcx-explain">Register any EVM wallet and get <strong style="color:var(--teal);">10 free GCX</strong> to try every tool. Your wallet IS your account. No email, no username. Volume discounts down to $0.0625/GCX.</div>
<div class="gcx-bundles">
<div class="gcx-bundle">
<div class="pop-label">Starter</div>
<div class="price">$5</div>
<div class="tokens">50 GCX</div>
<div class="per-call">$0.10 / GCX</div>
</div>
<div class="gcx-bundle">
<div class="pop-label">Creator</div>
<div class="price">$10</div>
<div class="tokens">100 GCX</div>
<div class="per-call">$0.10 / GCX</div>
</div>
<div class="gcx-bundle popular">
<div class="pop-label">Pro — 17% off</div>
<div class="price">$50</div>
<div class="tokens">600 GCX</div>
<div class="per-call">$0.083 / GCX</div>
<div class="bonus">Save $10</div>
</div>
<div class="gcx-bundle">
<div class="pop-label">Studio — 38% off</div>
<div class="price">$100</div>
<div class="tokens">1,600 GCX</div>
<div class="per-call">$0.0625 / GCX</div>
<div class="bonus">Save $60</div>
</div>
</div>
<div class="gcx-examples">
<strong>What can you do with 100 GCX?</strong><br>
12 image generations, or 50 upscales, or 20 full pipelines, or 50 enrichments + 50 infusions.
<br><br>
<strong>Wallet = Account.</strong> Connect any EVM wallet (MetaMask, Coinbase, Agentic Wallet). Buy GCX with USDC or Stripe. Use across StudioMCPHub and golden-codex.com.
</div>
</section>
<section class="price-table-section">
<div class="section-label">Per-Call Pricing</div>
<table class="price-table">
<thead><tr><th>Tool</th><th>Engine</th><th>GCX</th><th>x402 / Stripe</th><th>At Studio Rate</th></tr></thead>
<tbody>
<tr><td class="tool-col">generate_image</td><td class="engine-col">SD 3.5 Large</td><td class="gcx-col">2</td><td class="x402-col">$0.20</td><td class="stripe-col">$0.125</td></tr>
<tr><td class="tool-col">upscale_image</td><td class="engine-col">Real-ESRGAN x4</td><td class="gcx-col">2</td><td class="x402-col">$0.20</td><td class="stripe-col">$0.125</td></tr>
<tr><td class="tool-col">enrich_metadata</td><td class="engine-col">Nova / Gemini</td><td class="gcx-col">2</td><td class="x402-col">$0.20</td><td class="stripe-col">$0.125</td></tr>
<tr><td class="tool-col">infuse_metadata</td><td class="engine-col">Atlas / ExifTool</td><td class="gcx-col">1</td><td class="x402-col">$0.10</td><td class="stripe-col">$0.0625</td></tr>
<tr><td class="tool-col">register_hash</td><td class="engine-col">Aegis LSH</td><td class="gcx-col">1</td><td class="x402-col">$0.10</td><td class="stripe-col">$0.0625</td></tr>
<tr><td class="tool-col">store_permanent</td><td class="engine-col">Archivus / Arweave</td><td class="gcx-col">15</td><td class="x402-col">$1.50</td><td class="stripe-col">$0.94</td></tr>
<tr><td class="tool-col">mint_nft</td><td class="engine-col">Mintra / Polygon</td><td class="gcx-col">10</td><td class="x402-col">$1.00</td><td class="stripe-col">$0.625</td></tr>
<tr class="free-row"><td>verify_provenance</td><td>Aegis</td><td>FREE</td><td>FREE</td><td>FREE</td></tr>
<tr style="font-weight:500"><td class="tool-col">full_pipeline</td><td class="engine-col">Enrich+Up+Infuse</td><td class="gcx-col">5</td><td class="x402-col">$0.50</td><td class="stripe-col">$0.31</td></tr>
</tbody>
</table>
<p style="color: var(--dim); font-size: 11px; margin-top: 12px; font-family: var(--sans);">
"x402 / Stripe" = base rate ($0.10/GCX). "At Studio Rate" = $0.0625/GCX with Studio pack (1,600 GCX for $100).
Volume agents get automatic discounts: 10% at $50 spend, 20% at $100, 30% at $200 (30-day rolling).
</p>
</section>
<section class="payment-section" id="support">
<div class="section-label">Support & Feedback</div>
<div class="terminal">
<div class="terminal-bar">
<span class="terminal-dot r"></span>
<span class="terminal-dot y"></span>
<span class="terminal-dot g"></span>
<span class="terminal-title">Submit a ticket (agents: POST /api/support/tickets)</span>
</div>
<div class="terminal-body" style="padding: 24px;">
<form id="support-form" onsubmit="submitTicket(event)">
<div style="display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 12px;">
<div>
<label style="font-size: 11px; color: var(--dim); display: block; margin-bottom: 4px;">Type</label>
<select name="type" required style="width: 100%; padding: 8px 12px; background: var(--bg); border: 1px solid var(--border); border-radius: 4px; color: var(--text); font-family: var(--mono); font-size: 12px;">
<option value="bug">Bug Report</option>
<option value="credit_issue">Credit / Payment Issue</option>
<option value="feature_request">Feature Request</option>
<option value="feedback">General Feedback</option>
<option value="compliance">Copyright / Compliance</option>
<option value="enterprise">Enterprise Inquiry</option>
</select>
</div>
<div>
<label style="font-size: 11px; color: var(--dim); display: block; margin-bottom: 4px;">Wallet or Email (optional)</label>
<input name="contact" placeholder="0x... or you@email.com" style="width: 100%; padding: 8px 12px; background: var(--bg); border: 1px solid var(--border); border-radius: 4px; color: var(--text); font-family: var(--mono); font-size: 12px;">
</div>
</div>
<div style="margin-bottom: 12px;">
<label style="font-size: 11px; color: var(--dim); display: block; margin-bottom: 4px;">Subject</label>
<input name="subject" required placeholder="Brief summary" style="width: 100%; padding: 8px 12px; background: var(--bg); border: 1px solid var(--border); border-radius: 4px; color: var(--text); font-family: var(--mono); font-size: 12px;">
</div>
<div style="margin-bottom: 16px;">
<label style="font-size: 11px; color: var(--dim); display: block; margin-bottom: 4px;">Description</label>
<textarea name="description" required rows="4" placeholder="Details, tx hash, tool name, what happened..." style="width: 100%; padding: 8px 12px; background: var(--bg); border: 1px solid var(--border); border-radius: 4px; color: var(--text); font-family: var(--mono); font-size: 12px; resize: vertical;"></textarea>
</div>
<div style="display: flex; align-items: center; gap: 16px;">
<button type="submit" class="btn btn-primary" style="cursor: pointer; border: none; font-family: var(--mono);">Submit Ticket</button>
<span id="ticket-status" style="font-size: 11px; color: var(--dim);"></span>
</div>
</form>
<p style="font-size: 11px; color: var(--dim); margin-top: 16px;">
Agents: <code style="color: var(--teal);">POST /api/support/tickets</code> with JSON body <code style="color: var(--teal);">{"type", "subject", "description", "wallet?"}</code>
</p>
</div>
</div>
</section>
<section class="cta-section">
<div class="cta-box">
<h2>Want the full studio experience?</h2>
<p>Golden Codex Studio offers everything here plus a beautiful visual interface, batch processing, collection management, artist profiles, and the Maestro AI curator.</p>
<div class="cta-buttons">
<a href="https://golden-codex.com" class="btn btn-primary">Visit Golden Codex Studio</a>
<a href="https://github.com/codex-curator/studiomcphub" class="btn btn-outline">View Source on GitHub</a>
</div>
</div>
</section>
<footer>
<div class="footer-links">
<a href="/.well-known/mcp.json">MCP Server Card</a>
<a href="/llms.txt">llms.txt</a>
<a href="/pricing.json">Pricing API</a>
<a href="https://golden-codex.com">Golden Codex</a>
<a href="https://artiswa.com">Artiswa</a>
<a href="https://github.com/codex-curator/studiomcphub">GitHub</a>
<a href="/privacy">Privacy</a>
<a href="/terms">Terms</a>
</div>
<div class="footer-meta">
Metavolve Labs, Inc. · San Francisco<br>
<span class="footer-motto">"Every agent deserves a studio."</span>
</div>
</footer>
</div>
</div>
<script>
function showTab(btn, name) {
document.querySelectorAll('.tab-content').forEach(el => el.classList.remove('active'));
document.querySelectorAll('.terminal-tab').forEach(el => el.classList.remove('active'));
document.getElementById('tab-' + name).classList.add('active');
btn.classList.add('active');
}
async function submitTicket(e) {
e.preventDefault();
const form = e.target;
const status = document.getElementById('ticket-status');
const contact = form.contact.value;
const isWallet = contact.startsWith('0x');
status.textContent = 'Submitting...';
status.style.color = 'var(--dim)';
try {
const res = await fetch('/api/support/tickets', {
method: 'POST',
headers: {'Content-Type': 'application/json'},
body: JSON.stringify({
type: form.type.value,
subject: form.subject.value,
description: form.description.value,
wallet: isWallet ? contact : undefined,
email: !isWallet && contact ? contact : undefined,
})
});
if (res.ok) {
const data = await res.json();
status.textContent = 'Ticket ' + data.ticket_id + ' created. We\'ll respond within 24h.';
status.style.color = 'var(--green)';
form.reset();
} else {
status.textContent = 'Submitted. Thank you for your feedback.';
status.style.color = 'var(--green)';
form.reset();
}
} catch (err) {
status.textContent = 'Submitted. Thank you for your feedback.';
status.style.color = 'var(--green)';
form.reset();
}
}
</script>
</body>
</html>
