1<!doctype html> 2<html lang="en"> 3<head> 4 <meta charset="utf-8"> 5 <!-- Meta Pixel Code --> 6
6<script>
vendor: 435 bytes, lines 6-15
6 7 !function(f,b,e,v,n,t,s) 8 {if(f.fbq)return;n=f.fbq=function(){n.callMethod? 9 n.callMethod.apply(n,arguments):n.queue.push(arguments)}; 10 if(!f._fbq)f._fbq=n;n.push=n;n.loaded=!0;n.version='2.0'; 11 n.queue=[];t=b.createElement(e);t.async=!0; 12 t.src=v;s=b.getElementsByTagName(e)[0]; 13 s.parentNode.insertBefore(t,s)}(window, document,'script', 14 'https://connect.facebook.net/en_US/fbevents.js'); 15 fbq('init', '
15107056183303487
vendor: 36 bytes, lines 15-17
15'); 16 fbq('track', 'PageView'); 17
17</script>
17 18 <!-- End Meta Pixel Code --> 19 <meta name="viewport" content="width=device-width, initial-scale=1"> 20 <meta name="theme-color" content="#ffffff"> 21 <title>SuperPowers AI | Super, the AI Assistant with Her Own Apps</title> 22 <meta name="description" content="Text Super to order food, book rides, build websites, browse the web, and finish cloud tasks from iMessage or Meta Display glasses."> 23 <meta name="keywords" content="Super AI assistant, AI with apps, iMessage AI assistant, Meta Display AI, AI agent, ChatGPT alternative, Poke alternative, Comet alternative, voice-first AI assistant, personal AI assistant, order food with AI, schedule rides with AI, build websites with AI"> 24 <meta name="author" content="SuperPowers AI"> 25 <meta name="robots" content="index, follow, max-image-preview:large, max-snippet:-1, max-video-preview:-1"> 26 <meta name="application-name" content="Super"> 27 <meta name="apple-mobile-web-app-title" content="Super"> 28 <link rel="canonical" href="https://getsupers.com/"> 29 <link rel="sitemap" type="application/xml" href="https://getsupers.com/sitemap.xml"> 30 <link rel="alternate" type="text/markdown" href="https://getsupers.com/index.md" title="SuperPowers AI homepage in Markdown"> 31 <link rel="alternate" type="application/json" href="https://getsupers.com/openapi.json" title="Super API OpenAPI specification"> 32 <link rel="api-catalog" type="application/linkset+json" href="https://getsupers.com/.well-known/api-catalog"> 33 <link rel="service-desc" type="application/vnd.oai.openapi+json" href="https://getsupers.com/openapi.json"> 34 <link rel="service-doc" type="text/html" href="https://getsupers.com/developers/"> 35 <link rel="ai-catalog" type="application/ai-catalog+json" href="https://getsupers.com/.well-known/ai-catalog.json"> 36 <link rel="alternate" type="application/mcp-server-card+json" href="https://getsupers.com/.well-known/mcp/server-card.json" title="Super hosted MCP Server Card"> 37 <meta property="og:type" content="website"> 38 <meta property="og:locale" content="en_US"> 39 <meta property="og:site_name" content="SuperPowers AI"> 40 <meta property="og:title" content="Text Super. She handles the apps."> 41 <meta property="og:description" content="Text Super to order food, book rides, build websites, browse the web, and finish cloud tasks from iMessage or Meta Display glasses."> 42 <meta property="og:url" content="https://getsupers.com/"> 43 <meta property="og:image" content="https://getsupers.com/hero-demo-poster.jpg"> 44 <meta property="og:image:alt" content="Super product demo showing an AI assistant controlling real-world apps"> 45 <meta property="og:image:width" content="1280"> 46 <meta property="og:image:height" content="720"> 47 <meta property="og:video" content="https://storage.googleapis.com/cheatlayer/landing/hero-0607-2-3.mp4"> 48 <meta property="og:video:type" content="video/mp4"> 49 <meta name="twitter:card" content="summary_large_image"> 50 <meta name="twitter:title" content="Text Super. She handles the apps."> 51 <meta name="twitter:description" content="Text Super to order food, book rides, build websites, browse the web, and finish cloud tasks from iMessage or Meta Display glasses."> 52 <meta name="twitter:image" content="https://getsupers.com/hero-demo-poster.jpg"> 53 <meta name="twitter:image:alt" content="Super product demo showing an AI assistant controlling real-world apps"> 54 <meta name="twitter:site" content="@Super_Powers_AI"> 55 <meta name="twitter:creator" content="@Super_Powers_AI"> 56 <link rel="icon" type="image/png" sizes="512x512" href="https://storage.googleapis.com/cheatlayer/landing/icon-transparent-512.png"> 57 <link rel="icon" type="image/png" sizes="192x192" href="https://storage.googleapis.com/cheatlayer/landing/icon-transparent-192.png"> 58 <link rel="apple-touch-icon" sizes="180x180" href="https://storage.googleapis.com/cheatlayer/landing/icon-transparent-180.png"> 59 <link rel="preload" as="image" href="/hero-demo-poster.jpg" fetchpriority="high"> 60 <link rel="preconnect" href="https://storage.googleapis.com"> 61 <link rel="preconnect" href="https://unavatar.io">
62 <link rel="preconnect" href="https://api.fontshare.com"> 63 <noscript><style>.intro-loading .nav,.intro-loading .hero-subheading,.intro-loading .hero-actions,.intro-loading .hero-video-frame,.intro-loading .page>section:not(.hero),.intro-loading .footer{opacity:1!important;transform:none!important;pointer-events:auto!important}.intro-loading .hero h1{opacity:1!important}.intro-loading .hero-word{opacity:1!important;transform:none!important}</style></noscript> 64 <link rel="stylesheet" href="https://api.fontshare.com/v2/css?f[]=cabinet-grotesk@400,500,700,800,900&display=swap"> 65
65<script type="application/ld+json"> 66 { 67 "@context": "https://schema.org", 68 "@graph": [ 69 { 70 "@type": "Organization", 71 "@id": "https://getsupers.com/#organization", 72 "name": "SuperPowers AI", 73 "alternateName": [ 74 "Super", 75 "Super AI Assistant", 76 "Super by SuperPowers AI" 77 ], 78 "url": "https://getsupers.com/", 79 "description": "SuperPowers AI builds Super, an action-oriented AI assistant with apps, browsers, cloud sandboxes, APIs, hosted MCP servers, and connected-device clients.", 80 "email": "[email protected]", 81 "address": { 82 "@type": "PostalAddress", 83 "addressLocality": "San Francisco", 84 "addressRegion": "CA", 85 "addressCountry": "US" 86 }, 87 "contactPoint": [ 88 { 89 "@type": "ContactPoint", 90 "contactType": "customer support", 91 "email": "[email protected]", 92 "url": "https://getsupers.com/contact", 93 "availableLanguage": ["English"] 94 }, 95 { 96 "@type": "ContactPoint", 97 "contactType": "Super assistant SMS", 98 "telephone": "+1-424-303-9212", 99 "url": "https://getsupers.com/contact", 100 "availableLanguage": ["English"] 101 } 102 ], 103 "logo": { 104 "@type": "ImageObject", 105 "url": "https://storage.googleapis.com/cheatlayer/landing/icon-transparent-512.png", 106 "width": 512, 107 "height": 512, 108 "caption": "Super AI assistant app logo" 109 }, 110 "sameAs": [ 111 "https://x.com/Super_Powers_AI", 112 "https://github.com/rohanarun/phoneclaw", 113 "https://discord.gg/supers", 114 "https://apps.apple.com/us/app/super-real-time-ai-assistant/id6758969961", 115 "https://chromewebstore.google.com/detail/superpowers-ai/oolmdenpaebkcokkccakmlmhcpnogalc", 116 "https://www.npmjs.com/package/superpowers-ai" 117 ] 118 }, 119 { 120 "@type": "WebSite", 121 "@id": "https://getsupers.com/#website", 122 "url": "https://getsupers.com/", 123 "name": "SuperPowers AI", 124 "alternateName": "Super", 125 "description": "Text Super to order food, book rides, build websites, browse the web, and finish cloud tasks from iMessage or Meta Display glasses.", 126 "publisher": { 127 "@id": "https://getsupers.com/#organization" 128 }, 129 "inLanguage": "en-US" 130 }, 131 { 132 "@type": "ItemList", 133 "@id": "https://getsupers.com/#comparison-pages", 134 "name": "Super AI assistant comparison pages", 135 "itemListElement": [ 136 { 137 "@type": "ListItem", 138 "position": 1, 139 "name": "Super vs ChatGPT", 140 "url": "https://getsupers.com/vs/chatgpt/" 141 }, 142 { 143 "@type": "ListItem", 144 "position": 2, 145 "name": "Super vs Poke", 146 "url": "https://getsupers.com/vs/poke/" 147 }, 148 { 149 "@type": "ListItem", 150 "position": 3, 151 "name": "Super vs Comet", 152 "url": "https://getsupers.com/vs/comet/" 153 } 154 ] 155 }, 156 { 157 "@type": "SoftwareApplication", 158 "@id": "https://getsupers.com/#super-app", 159 "name": "Super by SuperPowers AI", 160 "alternateName": "Super", 161 "applicationCategory": "ProductivityApplication", 162 "operatingSystem": "iOS, Android, macOS, Windows, Web, Meta Display", 163 "url": "https://getsupers.com/", 164 "downloadUrl": "https://apps.apple.com/us/app/super-real-time-ai-assistant/id6758969961", 165 "description": "Super is an AI assistant with her own cloud apps, email, phone, browser, and sandboxes so users can schedule rides, order food, build websites, browse the web, and automate real-world tasks from chat.", 166 "image": "https://storage.googleapis.com/cheatlayer/landing/icon-transparent-512.png", 167 "publisher": { 168 "@id": "https://getsupers.com/#organization" 169 }, 170 "offers": { 171 "@type": "Offer", 172 "price": 0, 173 "priceCurrency": "USD", 174 "description": "Start free, then top up Super's wallet and pay as you go." 175 }, 176 "aggregateRating": { 177 "@type": "AggregateRating", 178 "ratingValue": 4.6, 179 "bestRating": 5, 180 "worstRating": 1, 181 "ratingCount": 57 182 } 183 }, 184 { 185 "@type": "WebAPI", 186 "@id": "https://getsupers.com/#super-api", 187 "name": "SuperPowers AI Super API", 188 "alternateName": "Super API", 189 "description": "OpenAI-compatible model discovery and completion API with self-serve keys, OAuth, typed OpenAPI schemas, and standard rate-limit response fields.", 190 "url": "https://getsupers.com/developers/", 191 "documentation": "https://getsupers.com/openapi.json", 192 "serviceUrl": "https://app.getsupers.com/v1", 193 "provider": { 194 "@id": "https://getsupers.com/#organization" 195 } 196 }, 197 { 198 "@type": "SoftwareApplication", 199 "@id": "https://getsupers.com/#super-cli", 200 "name": "SuperPowers AI CLI", 201 "alternateName": "superpowers-ai", 202 "applicationCategory": "DeveloperApplication", 203 "operatingSystem": "macOS, Windows, Linux", 204 "url": "https://getsupers.com/developers/cli", 205 "downloadUrl": "https://www.npmjs.com/package/superpowers-ai", 206 "publisher": { 207 "@id": "https://getsupers.com/#organization" 208 }, 209 "offers": { 210 "@type": "Offer", 211 "price": 0, 212 "priceCurrency": "USD" 213 } 214 }, 215 { 216 "@type": "VideoObject", 217 "@id": "https://getsupers.com/#hero-video", 218 "name": "Build a live interactive tool with Super", 219 "description": "A product demo showing Super automating tasks like rides, food, website building, and cloud app control from iMessage and Meta Display glasses.", 220 "thumbnailUrl": [ 221 "https://getsupers.com/hero-demo-poster.jpg" 222 ], 223 "contentUrl": "https://storage.googleapis.com/cheatlayer/landing/hero-0607-2-3.mp4", 224 "uploadDate": "2026-06-07", 225 "publisher": { 226 "@id": "https://getsupers.com/#organization" 227 }, 228 "duration": "PT2M5S", 229 "transcript": "Transcript summary: Super receives requests from text and Meta Display glasses, then uses her own cloud apps, browser, phone, email, and sandboxes to order food, book rides, build websites, browse the web, and finish practical tasks end to end." 230 }, 231 { 232 "@type": "FAQPage", 233 "@id": "https://getsupers.com/#faq-schema", 234 "mainEntity": [ 235 { 236 "@type": "Question", 237 "name": "How does the agent wallet work?",
238 "acceptedAnswer": { 239 "@type": "Answer", 240 "text": "You top up your Super wallet and pay as you go. Wallet funds are used by Super to purchase products, services, and optional premium models." 241 } 242 }, 243 { 244 "@type": "Question", 245 "name": "Is there a subscription?", 246 "acceptedAnswer": { 247 "@type": "Answer", 248 "text": "Super can be used free with pay-as-you-go wallet top-ups. Optional fleet subscriptions cost $199 per month for 10 devices or $999 per month for 100 devices and include private agents, live onboarding, and forward-deployed engineering for custom agents." 249 } 250 }, 251 { 252 "@type": "Question", 253 "name": "Does computer-use spend wallet funds?", 254 "acceptedAnswer": { 255 "@type": "Answer", 256 "text": "No. Computer-use work does not spend wallet funds. Super's computer-use cache allows cloud app automation at zero computer-use cost for customers." 257 } 258 }, 259 { 260 "@type": "Question", 261 "name": "Can Super use different models?", 262 "acceptedAnswer": { 263 "@type": "Answer", 264 "text": "Yes. Super can use frontier, cheap, or free model modes depending on the task and the user's budget." 265 } 266 }, 267 { 268 "@type": "Question", 269 "name": "What can Super actually do?", 270 "acceptedAnswer": { 271 "@type": "Answer", 272 "text": "Super can schedule Uber rides, order groceries, order Starbucks, run arbitrary cloud code, build websites, help with downloads or file work, and thousands more tasks." 273 } 274 }, 275 { 276 "@type": "Question", 277 "name": "Do you have an API?", 278 "acceptedAnswer": { 279 "@type": "Answer", 280 "text": "Yes. Developers can build similar experiences using the Super API dashboard at https://app.getsupers.com/developer/api-dashboard." 281 } 282 } 283 ] 284 } 285 ] 286 } 287 </script>
287 288
288<script> 289 (function () { 290 try { 291 var params = new URLSearchParams(window.location.search || ''); 292 var shouldStayOnWeb = params.get('no_app_redirect') === '1' || params.get('web') === '1' || params.get('stay') === '1'; 293 var standalone = (window.matchMedia && window.matchMedia('(display-mode: standalone)').matches) || window.navigator.standalone === true; 294 var messageHandlers = window.webkit && window.webkit.messageHandlers; 295 var nativeBridge = !!( 296 window.ReactNativeWebView || 297 (messageHandlers && (messageHandlers.iosPowerRunner || messageHandlers.webrtcEvent || messageHandlers.voiceAction)) 298 ); 299 var userAgent = navigator.userAgent || navigator.vendor || ''; 300 var isIPhone = /iPhone|iPod/i.test(userAgent); 301 302 if (!isIPhone || shouldStayOnWeb || standalone || nativeBridge) return; 303 document.documentElement.classList.add('is-iphone-browser'); 304 } catch (_error) { 305 // Keep the landing page available if browser detection fails. 306 } 307 })(); 308 </script>
308 309 <link rel="stylesheet" href="/landing.0544356615.min.css"> 310 <style> 311 body.nav-at-tool .nav,body.nav-at-tool.intro-loading .nav{opacity:0;visibility:hidden;transform:translate(-50%,-30px);pointer-events:none} 312 body.nav-below-tool .nav,body.nav-below-tool.intro-loading .nav{opacity:1;visibility:visible;transform:translate(-50%,0);pointer-events:auto} 313 .hero{min-height:auto;padding:0 0 118px} 314 .hero-inner{width:100%;max-width:none;gap:clamp(28px,5vw,72px)} 315 .tool-generator{width:100%;min-height:100svh;display:grid;grid-template-rows:minmax(0,0fr) auto auto auto auto;gap:14px;align-content:center;padding:clamp(22px,4vw,54px);text-align:left;background:#fff;border-bottom:1px solid rgba(0,0,0,.12);isolation:isolate;overflow-anchor:none;transition:grid-template-rows 680ms var(--ease),min-height 680ms var(--ease)} 316 .tool-generator.is-active{box-sizing:border-box;height:130svh;min-height:130svh;max-height:130svh;grid-template-rows:minmax(0,1fr) auto auto auto auto;align-content:stretch;overflow:hidden} 317 body.intro-loading .tool-generator{opacity:1;transform:none;pointer-events:auto} 318 .tool-generator-preview{display:grid;grid-template-rows:minmax(0,1fr);position:relative;overflow:hidden;width:100%;height:100%;min-height:0;border:1px solid rgba(10,10,10,.13);border-radius:34px;background:#fff;box-shadow:0 28px 84px rgba(27,25,20,.16);isolation:isolate;visibility:hidden;opacity:0} 319 .tool-generator.is-active .tool-generator-preview{visibility:visible;opacity:1;animation:tool-preview-arrive 520ms var(--ease) both} 320 .tool-generator-stage{position:relative;min-width:0;min-height:0;overflow:hidden;background:#fff} 321 .tool-generator-frame{position:absolute;inset:0;z-index:4;display:block;width:100%;height:100%;min-height:0;overflow:auto;border:0;background:#fff;color:#111;opacity:0;transition:opacity 420ms var(--ease)} 322 .tool-generator.has-output .tool-generator-frame{opacity:1} 323 .tool-generator-webgl{position:absolute;inset:0;z-index:3;width:100%;height:100%;background:transparent;opacity:0;transition:opacity 180ms var(--ease);pointer-events:none} 324 .tool-generator.has-stream.texture-ready:not(.has-output) .tool-generator-webgl{opacity:1} 325 .tool-generator.has-output .tool-generator-webgl{opacity:0} 326 .tool-generator-webgl.is-unavailable{display:none} 327 .tool-generator-texture-video{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none} 328 .tool-generator-stream-source{position:absolute;inset:0;z-index:2;width:100%;height:100%;overflow:hidden;border:0;opacity:0;pointer-events:none;background:#fff;transition:opacity 180ms var(--ease)} 329 .tool-generator-loading{position:absolute;inset:0;z-index:5;display:grid;place-items:center;pointer-events:none;transition:opacity 260ms var(--ease),visibility 260ms var(--ease)} 330 .tool-generator.has-stream .tool-generator-loading,.tool-generator.has-output .tool-generator-loading{opacity:0;visibility:hidden} 331 .tool-generator-loading-copy{display:grid;gap:11px;justify-items:center;padding:14px 18px;border:1px solid rgba(10,10,10,.1);border-radius:18px;background:rgba(255,255,255,.72);box-shadow:0 14px 44px rgba(27,25,20,.12);backdrop-filter:blur(16px);color:var(--muted);font-size:14px;font-weight:800} 332 .tool-generator-pulse{width:12px;height:12px;border-radius:3px;background:var(--ink);box-shadow:-18px 0 rgba(10,10,10,.22),18px 0 rgba(10,10,10,.38);animation:tool-generator-grid-pulse 1.1s ease-in-out infinite} 333 .tool-generator-share{display:flex;align-items:center;gap:10px;min-width:0;padding:0 8px;white-space:nowrap} 334 .tool-generator-share[hidden]{display:none} 335 .tool-generator-share-button{flex:0 0 auto;min-height:40px;padding:0 16px;border:1px solid var(--ink);border-radius:999px;background:var(--ink);color:#fff;font:900 13px/1 'Cabinet Grotesk',sans-serif;cursor:pointer;transition:transform 180ms var(--ease),background 180ms var(--ease),color 180ms var(--ease)} 336 .tool-generator-share-button:hover,.tool-generator-share-button:focus-visible{transform:translateY(-2px);background:#fff;color:var(--ink);outline:0} 337 .tool-generator-site-link{min-width:0;overflow:hidden;color:var(--muted);font-size:12px;font-weight:800;text-decoration:underline;text-overflow:ellipsis;text-underline-offset:3px;white-space:nowrap} 338 .tool-generator-launcher{display:grid;gap:10px;justify-self:center;width:100%;max-width:800px;min-width:0;transition:max-width 680ms var(--ease),transform 680ms var(--ease)} 339 .tool-generator.is-composer-expanded .tool-generator-launcher{max-width:1600px} 340 .tool-generator-prompts{display:flex;gap:8px;align-items:center;justify-content:center;width:100%;overflow-x:auto;scrollbar-width:none;padding:1px 2px 2px} 341 .tool-generator-prompts::-webkit-scrollbar{display:none} 342 .tool-generator-prompt{flex:0 0 auto;min-height:38px;padding:0 15px;border:1px solid rgba(10,10,10,.13);border-radius:999px;background:rgba(255,255,255,.72);color:var(--ink);font:800 13px/1 'Cabinet Grotesk',sans-serif;cursor:pointer;backdrop-filter:blur(14px);transition:transform 180ms var(--ease),background 180ms var(--ease),border-color 180ms var(--ease)} 343 .tool-generator-prompt:hover,.tool-generator-prompt:focus-visible{transform:translateY(-2px);background:#fff;border-color:rgba(10,10,10,.28);outline:0} 344 .tool-generator-composer{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;align-items:end;justify-self:center;width:78%;min-width:560px;padding:10px 10px 10px 22px;border:1px solid rgba(10,10,10,.14);border-radius:28px;background:rgba(255,255,255,.86);box-shadow:0 18px 60px rgba(27,25,20,.11);backdrop-filter:blur(22px);transition:width 680ms var(--ease),min-width 680ms var(--ease),box-shadow 680ms var(--ease)} 345 .tool-generator.is-composer-expanded .tool-generator-composer{width:100%;min-width:0;box-shadow:0 24px 72px rgba(27,25,20,.14)} 346 .tool-generator-input{width:100%;min-height:48px;max-height:148px;resize:none;overflow-y:auto;border:0;outline:0;background:transparent;color:var(--ink);font:600 clamp(1rem,1.8vw,1.2rem)/1.4 'Cabinet Grotesk',sans-serif;letter-spacing:-.008em;padding:11px 0 8px} 347 .tool-generator-input::placeholder{color:rgba(10,10,10,.46)} 348 .tool-generator-submit{width:54px;height:54px;display:grid;place-items:center;border:1px solid var(--ink);border-radius:20px;background:var(--ink);color:#fff;cursor:pointer;transition:transform 180ms var(--ease),background 180ms var(--ease),color 180ms var(--ease)} 349 .tool-generator-submit:hover{transform:translateY(-2px);background:#fff;color:var(--ink)} 350 .tool-generator-submit:disabled{cursor:wait;opacity:.55;transform:none} 351 .tool-generator-submit svg{width:23px;height:23px} 352 .tool-generator-recents{display:grid;gap:8px;min-width:0;padding:0 2px;opacity:0;visibility:hidden;transform:translateY(18px);pointer-events:none;transition:opacity 520ms var(--ease),transform 520ms var(--ease),visibility 520ms var(--ease)} 353 .tool-generator-recents.is-visible{opacity:1;visibility:visible;transform:none;pointer-events:auto} 354 .tool-generator-recents[hidden]{display:none} 355 .tool-generator-recents-head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:0 6px;color:var(--muted);font-size:11px;font-weight:900;letter-spacing:.08em;text-transform:uppercase} 356 .tool-generator-recents-signal{display:inline-flex;align-items:center;justify-content:flex-end;
356gap:8px;white-space:nowrap} 357 .tool-generator-recents-live{display:inline-flex;align-items:center;gap:6px;color:var(--ink)} 358 .tool-generator-recents-live::before{content:"";width:6px;height:6px;border-radius:50%;background:#000;animation:tool-recents-live 1.8s ease-in-out infinite} 359 .tool-generator-recents-metric{color:var(--ink);font-variant-numeric:tabular-nums;letter-spacing:.02em;text-transform:none} 360 .tool-generator-recents-metric::before{content:"·";margin-right:8px;color:var(--quiet)} 361 .tool-generator-recents-metric[hidden]{display:none} 362 .tool-generator-recent-list{display:flex;gap:8px;min-width:0;overflow-x:auto;padding:1px 2px 3px;scrollbar-width:none} 363 .tool-generator-recent-list::-webkit-scrollbar{display:none} 364 .tool-generator-recent{flex:0 0 clamp(224px,28vw,330px);display:grid;gap:5px;min-width:0;padding:11px 13px;border:1px solid #dedede;border-radius:16px;background:#fff;color:#000;transition:transform 180ms var(--ease),border-color 180ms var(--ease)} 365 .tool-generator-recent:hover,.tool-generator-recent:focus-visible{transform:translateY(-2px);border-color:#000;outline:0} 366 .tool-generator-recent-question{overflow:hidden;font-size:13px;font-weight:850;line-height:1.25;text-overflow:ellipsis;white-space:nowrap} 367 .tool-generator-recent-title{overflow:hidden;color:var(--muted);font-size:11px;font-weight:750;line-height:1.2;text-overflow:ellipsis;white-space:nowrap} 368 .tool-generator-recent-meta{display:flex;align-items:center;gap:5px;color:var(--quiet);font-size:10px;font-weight:750;line-height:1.2} 369 .tool-generator-recent-impressions{color:var(--ink);font-variant-numeric:tabular-nums;font-weight:900} 370 .tool-generator-recent-meta time{color:var(--ink);font-weight:900} 371 .tool-generator-meta{min-height:20px;display:flex;justify-content:space-between;gap:16px;padding:0 8px;color:var(--quiet);font-size:13px;font-weight:800;letter-spacing:0} 372 .tool-generator-status[data-tone="error"]{color:#a42b23} 373 .tool-nav-sentinel{width:100%;height:1px;margin-top:-1px;pointer-events:none} 374 .ios-app-suggestion{display:none;position:fixed;z-index:80;left:50%;bottom:max(14px,env(safe-area-inset-bottom));width:min(calc(100% - 24px),520px);transform:translateX(-50%);grid-template-columns:auto minmax(0,1fr) auto auto;gap:12px;align-items:center;padding:12px;border:1px solid rgba(10,10,10,.14);border-radius:22px;background:rgba(255,255,255,.94);box-shadow:0 24px 72px rgba(27,25,20,.24);backdrop-filter:blur(24px)} 375 .is-iphone-browser .ios-app-suggestion.is-visible{display:grid;animation:tool-ios-arrive 420ms var(--ease) both} 376 .ios-app-suggestion img{width:44px;height:44px;border-radius:13px} 377 .ios-app-suggestion-copy{display:grid;gap:2px;color:var(--ink);font-size:14px;line-height:1.18} 378 .ios-app-suggestion-copy strong{font-size:15px} 379 .ios-app-suggestion-link{min-height:40px;display:inline-flex;align-items:center;padding:0 14px;border-radius:14px;background:var(--ink);color:#fff;font-size:13px;font-weight:900} 380 .ios-app-suggestion-close{width:40px;height:40px;border:0;background:transparent;color:var(--ink);font-size:24px;line-height:1;cursor:pointer} 381 @keyframes tool-generator-grid-pulse{0%,100%{transform:scale(.7);opacity:.45}50%{transform:scale(1.1);opacity:1}} 382 @keyframes tool-recents-live{0%,100%{opacity:.35;transform:scale(.72)}50%{opacity:1;transform:scale(1)}} 383 @keyframes tool-preview-arrive{from{opacity:0;transform:translateY(18px) scale(.985)}to{opacity:1;transform:none}} 384 @keyframes tool-ios-arrive{from{opacity:0;transform:translate(-50%,18px)}to{opacity:1;transform:translate(-50%,0)}} 385 :root{--paper:#fff;--ink:#000;--muted:#5f5f5f;--quiet:#7a7a7a;--white:#fff;--line:#e5e5e5;--shadow-soft:0 24px 70px rgba(0,0,0,.09);--shadow-hard:0 26px 80px rgba(0,0,0,.16)} 386 html,body{background:#fff!important;color:#000} 387 .paper-noise{display:none} 388 .nav,.proof-strip,.service-icon,.compare-card,.review-card,.review-card.featured,.price-card,details,.footer-panel,.tool-generator-prompt,.tool-generator-composer,.tool-generator-loading-copy,.ios-app-suggestion{background:#fff} 389 .tool-generator,.compare,.wall,.pricing,.footer{background:#fff} 390 .pricing-tier-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:28px} 391 .price-card.pricing-tier-card{display:flex;flex-direction:column;gap:22px;min-height:100%;padding:clamp(24px,3vw,36px)} 392 .pricing-tier-card .price-summary,.pricing-tier-card .price-included{width:100%;max-width:none} 393 .pricing-tier-card .price-summary{position:static;top:auto} 394 .pricing-tier-card .price-included{margin-top:auto} 395 .pricing-tier-card .price-features{display:grid;gap:11px} 396 .pricing-tier-card[data-tier="devices_100"]{border-color:#111;box-shadow:0 26px 70px rgba(0,0,0,.11)} 397 @media (max-width:980px){.pricing-tier-grid{grid-template-columns:1fr}.price-card.pricing-tier-card{min-height:0}} 398 .feature-video-shell,.review-avatar{background:#f2f2f2} 399 .feature-list li{color:#222} 400 .nav,.proof-strip,.service-icon,.compare-card,.review-card,.review-card.featured,.price-card,details,.footer-panel,.tool-generator-preview,.tool-generator-prompt,.tool-generator-composer,.tool-generator-loading-copy,.ios-app-suggestion{border-color:#dedede} 401 @media (max-width:760px){.hero{padding:0 0 78px}.hero-inner{gap:34px}.tool-generator{min-height:100svh;gap:9px;padding:18px 12px max(18px,env(safe-area-inset-bottom))}.tool-generator-preview{min-height:0;border-radius:24px}.tool-generator-frame{height:100%;min-height:0}.tool-generator-launcher{max-width:100%}.tool-generator-prompts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;overflow:visible;margin-inline:0}.tool-generator-prompt{width:100%;min-height:48px;padding:6px 7px;font-size:11px;line-height:1.12;white-space:normal}.tool-generator-composer{width:min(88%,560px);min-width:0;padding:8px 8px 8px 17px;border-radius:23px}.tool-generator.is-composer-expanded .tool-generator-composer{width:100%;min-width:0}.tool-generator-submit{width:50px;height:50px;border-radius:17px}.tool-generator-meta{font-size:12px}.ios-app-suggestion{grid-template-columns:auto minmax(0,1fr) auto}.ios-app-suggestion-close{display:none}} 402 @media (prefers-reduced-motion:reduce){.tool-generator,.tool-generator-launcher,.tool-generator-composer{transition:none}.tool-generator-pulse{animation:none}.tool-generator.is-active .tool-generator-preview,.is-iphone-browser .ios-app-suggestion.is-visible{animation:none}.tool-generator-recents{transition:none}} 403 .launch-news{padding:clamp(80px,10vw,144px) 0;background:#fff} 404 .launch-news h2{margin:0;font-size:clamp(36px,5vw,64px);letter-spacing:-.04em} 405 .launch-news-intro{max-width:720px;margin:20px 0 48px;color:var(--muted);font-size:20px;line-height:1.5} 406 .launch-news-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-flow:dense;gap:clamp(28px,5vw,72px)} 407 .launch-news-story{min-width:0;border-top:1px solid rgba(10,10,10,.18);padding-top:24px} 408 .launch-news-story h3{margin:14px 0 24px;font-size:clamp(26px,2.8vw,36px);line-height:1.15;letter-spacing:-.025em} 409 .launch-news-story p{font-size:17px;line-height:1.65;color:var(--muted)} 410 .launch-news-story .launch-news-date{font-size:14px;color:var(--ink);font-weight:700} 411 .launch-news-video{display:block;width:100%;aspect-ratio:16/9;object-fit:contain;border-radius:18px;background:#111;margin-bottom:24px} 412 .launch-news-links{display:flex;flex-wrap:wrap;gap:16px 24px;margin-top:28px} 413 .launch-news-links a{color:var(--ink);font-weight:800;text-decoration:underline;text-underline-offset:5px} 414 .launch-news-links a:hover{opacity:.7} 415 @media(max-width:760px){.launch-news-grid{grid-template-columns:1fr;gap:48px}} 416 .developer-code-grid{display:block} 417 .developer-code-tabs{display:flex;gap:8px;padding:12px 16px;border-bottom:1px solid #dcdedb;background:#f5f6f3} 418 .developer-code-tabs button{padding:12px 18px;border:0;border-radius:10px;background:transparent;color:#454b48;font:inherit;font-weight:700;cursor:pointer} 419 .developer-code-tabs button[aria-selected="true"]{background:#171c19;color:#fff} 420 .developer-code-tabs button:focus-visible{outline:3px solid #4f8b64;outline-offset:2px} 421 .developer-code-panel[hidden]{display:none} 422 .developer-code-panel>a{margin:0 24px;font-weight:800;text-decoration:underline;text-underline-offset:4px} 423 .developer-code-card{min-width:0;overflow:hidden;background:#fff;border:1px solid #dcdedb;border-radius:20px;padding-bottom:24px} 424 .developer-code-bar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 24px;border-bottom:1px solid #dcdedb} 425 .developer-code-bar h3{margin:0;font-size:20px} 426 .developer-code-bar button{border:1px solid #454b48;border-radius:8px;background:#171c19;color:#fff;padding:8px 14px;font:700 14px inherit;cursor:pointer} 427 .developer-code-bar button:hover{background:#354139} 428 .developer-code-card pre{margin:0;padding:24px;min-height:210px;overflow-x:auto;background:#171c19;color:#e8f1eb;font:14px/1.7 ui-monospace,SFMono-Regular,Consolas,monospace;tab-size:2} 429 .developer-code-card pre code{font:inherit} 430 .developer-code-card p{margin:20px 24px 16px;font-size:16px;line-height:1.55;color:var(--muted)} 431 .developer-code-card>a{margin:0 24px;font-weight:800;text-decoration:underline;text-underline-offset:4px} 432 .developer-code-footer{display:flex;flex-wrap:wrap;gap:20px;margin-top:24px;font-size:16px} 433 .developer-code-footer a{text-decoration:underline;text-underline-offset:4px} 434 .developer-code-bar button:focus-visible,.developer-code-card pre:focus-visible{outline:3px solid #4f8b64;outline-offset:3px} 435 @media(max-width:760px){.developer-code-grid{grid-template-columns:1fr}.developer-code-card pre{min-height:0}} 436 .nav-compare{position:relative} 437 #nav-compare-toggle{display:flex;align-items:center;gap:6px;border:0;background:transparent;color:inherit;font:inherit;font-weight:700;padding:10px 14px;cursor:pointer;border-radius:18px} 438 #nav-compare-toggle:hover,#nav-compare-toggle[aria-expanded="true"]{background:rgba(0,0,0,.06)} 439 #nav-compare-toggle:focus-visible{outline:2px solid currentColor;outline-offset:2px} 440 #nav-compare-links{position:absolute;top:calc(100% + 10px);left:0;min-width:210px;padding:8px;border:1px solid #ddd;border-radius:16px;background:#fff;color:#111;box-shadow:0 16px 40px rgba(0,0,0,.14);z-index:100} 441 #nav-compare-links:not([hidden]){display:grid} 442 #nav-compare-links a{display:block;white-space:nowrap;padding:12px 14px;border-radius:10px} 443 #nav-compare-links a:hover,#nav-compare-links a:focus-visible{background:#f0f2ef} 444 @media(max-width:760px){.nav-links{overflow:visible;flex-wrap:wrap}#nav-compare-toggle{padding:8px 11px;font-size:inherit}} 445 .app-download-actions{flex-wrap:wrap;scroll-margin-top:110px} 446 .app-download-actions a{white-space:nowrap} 447 @media(max-width:600px){.app-download-actions{display:grid;grid-template-columns:1fr;width:100%}.app-download-actions a{width:100%;justify-content:center;text-align:center}} 448 .page{overflow-x:clip} 449 .features{overflow:clip} 450 @media(min-width:1021px){.feature-visuals,.feature-visuals.is-gsap-pinned{position:sticky;top:clamp(84px,17svh,172px);align-self:start;transform:none!important}} 451 .app-download-actions a{display:flex;align-items:center;justify-content:center;gap:10px} 452 .download-platform-icon{width:22px;height:22px;flex:0 0 22px;display:block} 453 .download-label{display:flex;flex-direction:column;align-items:center;gap:4px;line-height:1.2} 454 .download-label small{display:block;font-size:12px;font-weight:500;line-height:1.3;letter-spacing:0;opacity:.75} 455 .app-download-actions{align-items:stretch} 456 </style> 457
457<script> 458 document.addEventListener('DOMContentLoaded', () => { 459 const visuals = document.querySelector('.feature-visuals'); 460 // Native sticky tracks layout changes without stale fixed-position pin coordinates. 461 if (visuals && window.ScrollTrigger) { 462 ScrollTrigger.getAll().filter(trigger => trigger.pin === visuals).forEach(trigger => trigger.kill(true)); 463 visuals.classList.remove('is-gsap-pinned'); 464 } 465 const features = document.querySelector('.features'); 466 if (features) { 467 const syncPlayback = () => { 468 const bounds = features.getBoundingClientRect(); 469 const visible = bounds.top < innerHeight && bounds.bottom > 0; 470 features.querySelectorAll('video').forEach(video => { 471 if (visible && video.closest('.feature-video').classList.contains('is-active')) { 472 if (video.paused) video.play().catch(() => {}); 473 } else video.pause(); 474 }); 475 }; 476 new IntersectionObserver(syncPlayback).observe(features); 477 syncPlayback(); 478 } 479 }, {once:true}); 480 </script>
480 481
481<script> 482 !function(t,e){var o,n,p,r;e.__SV||(window.posthog=e,e._i=[],e.init=function(i,s,a){function g(t,e){var o=e.split(".");2==o.length&&(t=t[o[0]],e=o[1]),t[e]=function(){t.push([e].concat(Array.prototype.slice.call(arguments,0)))}}(p=t.createElement("script")).type="text/javascript",p.async=!0,p.src=s.api_host.replace(".i.posthog.com","-assets.i.posthog.com")+"/static/array.js",(r=t.getElementsByTagName("script")[0]).parentNode.insertBefore(p,r);var u=e;for(void 0!==a?u=e[a]=[]:a="posthog",u.people=u.people||[],u.toString=function(t){var e="posthog";return"posthog"!==a&&(e+="."+a),t||(e+=" (stub)"),e},u.people.toString=function(){return u.toString(1)+".people (stub)"},o="init capture register register_once register_for_session unregister opt_out_capturing has_opted_out_capturing opt_in_capturing reset isFeatureEnabled getFeatureFlag getFeatureFlagPayload reloadFeatureFlags group identify setPersonProperties setPersonPropertiesForFlags resetPersonPropertiesForFlags resetGroups onFeatureFlags addFeatureFlagsHandler onSessionId getSurveys getActiveMatchingSurveys renderSurvey canRenderSurvey getNextSurveyStep".split(" "),n=0;n<o.length;n++)g(u,o[n]);e._i.push([i,s,a])},e.__SV=1)}(document,window.posthog||[]); 483 posthog.init('phc_b0JgSM1YLRCR1Jv4nS9DufukjhTYntC2O1XQLlUsoGn', { 484 api_host: 'https://us.i.posthog.com', 485 defaults: '2026-01-30' 486 }) 487 </script>
487 488<!-- personal-ai-agent-directory-style:start --> 489<!-- personal-ai-agent-directory-style:end --> 490<!-- personal-ai-agent-directory-script:start --> 491<!-- personal-ai-agent-directory-script:end --> 492 <link rel="stylesheet" href="/landing-typography.css?v=20260920">
493<script async data-super-google-tag src="https://app.getsupers.com/assets/google-tag.js"></script>
493</head> 494<body class="nav-at-tool"> 495 <noscript><img height="1" width="1" style="display:none" alt="" 496 src="https://www.facebook.com/tr?id=107056183303487&ev=PageView&noscript=1" 497 ></noscript> 498 <div class="paper-noise" aria-hidden="true"></div> 499 500 <nav class="nav" aria-label="Main navigation"> 501 <a class="brand" href="#top" aria-label="Super home"> 502 <img class="brand-mark" src="https://storage.googleapis.com/cheatlayer/landing/icon-transparent-512.png" alt="Super AI assistant app logo" width="30" height="30"> 503 <span>Super</span> 504 </a> 505 <div class="nav-links" aria-label="Page sections"> 506 <a href="#features">Features</a> 507<!-- personal-ai-agent-directory-nav:start --> 508<!-- personal-ai-agent-directory-nav:end --> 509 <a href="#reviews">Reviews</a> 510 <a href="#pricing">Pricing</a> 511 <a href="#faq">FAQ</a> 512 <a href="/developers/">Developers</a> 513 <a href="/about">About</a> 514 </div> 515 <a class="nav-cta" href="#downloads">Download Super</a> 516 </nav> 517 518 <main class="page" id="top"> 519 <section class="hero" aria-labelledby="hero-title"> 520 <div class="shell hero-inner"> 521 <h1 class="sr-only" id="hero-title">Build a live interactive tool with Super</h1> 522 <div class="tool-generator" data-tool-generator data-tailwind-runtime="https://getsupers.com/assets/tailwind-browser-3.4.17.js"> 523 <div class="tool-generator-preview" data-tool-preview> 524 <div class="tool-generator-stage" data-tool-stage> 525 <canvas class="tool-generator-webgl" data-tool-webgl aria-hidden="true"></canvas> 526 <video class="tool-generator-texture-video" data-tool-texture-video muted autoplay playsinline aria-hidden="true"></video> 527 <div class="tool-generator-stream-source" data-tool-stream-source aria-hidden="true"></div> 528 <div class="tool-generator-loading" data-tool-loading> 529 <div class="tool-generator-loading-copy"> 530 <span class="tool-generator-pulse" aria-hidden="true"></span> 531 <span>Building your live tool</span> 532 </div> 533 </div> 534 <iframe class="tool-generator-frame" data-tool-frame title="Generated interactive tool" sandbox="allow-scripts allow-forms allow-modals allow-downloads allow-popups"></iframe> 535 </div> 536 </div> 537 <div class="tool-generator-launcher" data-tool-launcher> 538 <div class="tool-generator-prompts" data-tool-prompts aria-label="Quick questions" aria-live="polite"> 539 <button class="tool-generator-prompt" type="button" data-tool-question="How do transformers work?">How do transformers work?</button> 540 <button class="tool-generator-prompt" type="button" data-tool-question="Why do neural networks hallucinate?">Why do neural networks hallucinate?</button> 541 <button class="tool-generator-prompt" type="button" data-tool-question="Visualize how an eclipse happens">Visualize an eclipse</button> 542 </div> 543 <form class="tool-generator-composer" data-tool-form> 544 <label class="sr-only" for="tool-generator-input">Describe a question or tool for Super</label> 545 <textarea class="tool-generator-input" id="tool-generator-input" data-tool-input rows="1" maxlength="2000" placeholder="Ask a question. Super will build a tool to answer it." required></textarea> 546 <button class="tool-generator-submit" data-tool-submit type="submit" aria-label="Generate a live tool"> 547 <svg viewBox="0 0 24 24" fill="none" aria-hidden="true"><path d="M12 19V5m0 0-6 6m6-6 6 6" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"/></svg> 548 </button> 549 </form> 550 </div> 551 <section class="tool-generator-recents" data-tool-recents aria-label="Recently generated tools" hidden> 552 <div class="tool-generator-recents-head"> 553 <span>What people are building now</span> 554 <span class="tool-generator-recents-signal">
555 <span class="tool-generator-recents-live">Live</span> 556 <span class="tool-generator-recents-metric" data-tool-total-sites hidden></span> 557 </span> 558 </div> 559 <div class="tool-generator-recent-list" data-tool-recent-list role="list" aria-live="polite"></div> 560 </section> 561 <div class="tool-generator-meta"> 562 <span class="tool-generator-status" data-tool-status aria-live="polite"></span> 563 </div> 564 <div class="tool-generator-share" data-tool-share hidden> 565 <button class="tool-generator-share-button" data-tool-share-button type="button">Share tool</button> 566 <a class="tool-generator-site-link" data-tool-site-link target="_blank" rel="noopener noreferrer"></a> 567 </div> 568 </div> 569 <div class="tool-nav-sentinel" data-tool-nav-sentinel aria-hidden="true"></div> 570 <div class="hero-video-frame" role="button" tabindex="0" aria-label="Play Super product video from the beginning with audio once"> 571 <video class="hero-video" src="https://storage.googleapis.com/cheatlayer/landing/hero-0607-2-3.mp4" poster="/hero-demo-poster.jpg" autoplay muted loop playsinline controls preload="metadata" title="Super AI assistant product demo" aria-describedby="hero-video-description hero-video-transcript"></video> 572 <p class="sr-only" id="hero-video-description">Product demo of Super, an AI assistant with her own apps, automating tasks from iMessage and Meta Display glasses.</p> 573 <p class="sr-only" id="hero-video-transcript">Transcript summary: Super receives requests from text and Meta Display glasses, then uses her own cloud apps, browser, phone, email, and sandboxes to order food, book rides, build websites, browse the web, and finish practical tasks end to end.</p> 574 <div class="video-note"> 575 <span>Click once for sound</span> 576 </div> 577 </div> 578 <div class="hero-actions app-download-actions" id="downloads" aria-label="Download Super"> 579 <a class="hero-primary" href="https://storage.googleapis.com/cheatlayer/SuperPowersMac.dmg"><svg class="download-platform-icon" viewBox="0 0 24 24" fill="none" aria-hidden="true"><rect x="2" y="3" width="20" height="14" rx="2" stroke="currentColor" stroke-width="1.8"/><path d="M8 21h8m-4-4v4" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"/></svg>Download for Mac</a> 580 <a class="hero-secondary" href="https://chromewebstore.google.com/detail/superpowers-ai/oolmdenpaebkcokkccakmlmhcpnogalc" target="_blank" rel="noopener noreferrer"><svg class="download-platform-icon" viewBox="0 0 24 24" aria-hidden="true"><path fill="#EA4335" d="M12 2a10 10 0 0 1 8.66 5H12a5 5 0 0 0-4.33 2.5L4.2 3.9A10 10 0 0 1 12 2Z"/><path fill="#FBBC05" d="M20.66 7A10 10 0 0 1 12 22l4.33-7.5A5 5 0 0 0 12 7Z"/><path fill="#34A853" d="M12 22A10 10 0 0 1 4.2 3.9l3.47 5.6A5 5 0 0 0 16.33 14.5Z"/><circle cx="12" cy="12" r="4.5" fill="#4285F4" stroke="#fff" stroke-width="1"/></svg><span class="download-label">Get Chrome extension<small>8,000+ users · 4.6 stars</small></span></a> 581 <a class="hero-secondary" href="https://apps.apple.com/us/app/super-real-time-ai-assistant/id6758969961" target="_blank" rel="noopener noreferrer"><svg class="download-platform-icon" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M17.1 12.4c0-2.2 1.8-3.3 1.9-3.4-1.1-1.6-2.8-1.8-3.4-1.8-1.5-.2-2.9.9-3.7.9-.7 0-1.9-.9-3.1-.9-1.6 0-3.1 1-3.9 2.4-1.7 2.9-.4 7.3 1.2 9.6.8 1.1 1.7 2.3 2.9 2.2 1.2 0 1.6-.7 3.1-.7s1.9.7 3.2.7c1.3 0 2.1-1.1 2.9-2.2.9-1.3 1.3-2.6 1.3-2.7-.1 0-2.4-.9-2.4-4.1ZM14.7 5.7c.6-.8 1.1-1.9 1-3-1 .1-2.2.7-2.9 1.5-.6.7-1.2 1.8-1 2.9 1.1.1 2.2-.6 2.9-1.4Z"/></svg><span class="download-label">Download for iPhone<small>3,000 users · 4.9 stars</small></span></a> 582 </div> 583 </div> 584 </section> 585 586 <section class="features" id="features" aria-labelledby="features-title"> 587 <h2 class="sr-only" id="features-title">What Super can do</h2> 588 <div class="shell"> 589 <div class="feature-showcase"> 590 <div class="feature-visuals"> 591 <div class="feature-video-shell" aria-live="polite"> 592 <article class="feature-video is-active" data-feature-video="0"> 593 <div class="feature-screen has-video"> 594 <video class="feature-screen-video" src="https://storage.googleapis.com/cheatlayer/landing/feature-no-integrations-0607.mp4" autoplay muted loop playsinline preload="none" title="Super automates cloud apps without integrations" aria-label="Video showing Super using cloud apps to automate rides, food, and real-world tasks without integrations"></video> 595 </div> 596 </article> 597 <article class="feature-video" data-feature-video="1"> 598 <div class="feature-screen has-video"> 599 <video class="feature-screen-video" src="https://storage.googleapis.com/cheatlayer/landing/feature-no-subscriptions-0607.mp4" autoplay muted loop playsinline preload="none" title="Super agent wallet pay as you go demo" aria-label="Video showing Super wallet top-ups and pay-as-you-go agent spending for products and services"></video> 600 </div> 601 </article> 602 <article class="feature-video" data-feature-video="2"> 603 <div class="feature-screen has-video"> 604 <video class="feature-screen-video" src="https://storage.googleapis.com/cheatlayer/landing/feature-openclaw-normies-0607.mp4" autoplay muted loop playsinline preload="none" title="Super cloud sandbox and browser automation demo" aria-label="Video showing Super using cloud sandboxes, browsers, and apps to solve everyday tasks for non-technical users"></video> 605 </div> 606 </article> 607 <article class="feature-video" data-feature-video="3"> 608 <div class="feature-screen has-video"> 609 <video class="feature-screen-video" src="https://storage.googleapis.com/cheatlayer/landing/feature-computer-use-cache-impossible-agents.mp4" autoplay muted loop playsinline preload="none" title="Computer-Use Cache for repeatable agent tasks" aria-label="Video showing Computer-Use Cache reducing repeatable cloud automation costs for agents"></video> 610 </div> 611 </article> 612 <article class="feature-video" data-feature-video="4"> 613 <div class="feature-screen has-video"> 614 <video class="feature-screen-video" src="/feature-super-mac-auto-building-agents-0911.mp4" autoplay muted loop playsinline preload="none" title="Super Mac for auto-building agents" aria-label="Super Mac for auto-building agents"></video> 615 </div> 616 </article> 617 </div> 618 </div> 619 620 <div class="feature-copy-stack"> 621 <article class="feature-panel" data-feature-panel="0"> 622 <h3>No integrations necessary.</h3> 623 <p>We solved reliable computer-use at $0 using our computer-use-cache, so Super automates her own apps
623in the cloud and works out of the box.</p> 624 <div class="service-icons" aria-label="Example apps Super can use"> 625 <span class="service-icon"><img class="service-mark" src="https://storage.googleapis.com/cheatlayer/landing/uber-favicon.ico" alt="Uber app logo" width="30" height="30" loading="lazy">Uber</span> 626 <span class="service-icon"><img class="service-mark doordash" src="https://storage.googleapis.com/cheatlayer/landing/doordash-favicon.ico" alt="DoorDash app logo" width="30" height="30" loading="lazy">DoorDash</span> 627 <span class="service-icon"><img class="service-mark starbucks" src="https://storage.googleapis.com/cheatlayer/landing/starbucks-favicon.ico" alt="Starbucks app logo" width="30" height="30" loading="lazy">Starbucks</span> 628 </div> 629 <ul class="feature-list"> 630 <li>Order rides, food, and groceries without setup</li> 631 <li>Automate tasks other personal assistants cannot touch</li> 632 <li>Super has her own email, phone, and apps,<br>so you don't have to grant access to your private email or calendar.</li> 633 </ul> 634 </article> 635 636 <article class="feature-panel" data-feature-panel="1"> 637 <h3>No required subscription.</h3> 638 <p>Top up Super's wallet and pay as you go, or choose the optional $199 monthly Pro plan when you need higher device and computer-use limits.</p> 639 <ul class="feature-list"> 640 <li>Start without a monthly plan</li> 641 <li>Optional Pro through UCP, MPP, or x402</li> 642 <li>No extra cards to track</li> 643 </ul> 644 </article> 645 646 <article class="feature-panel" data-feature-panel="2"> 647 <h3>AI for normies.</h3> 648 <p>Super has access to full cloud sandboxes, her own mobile apps, browsers, and 1000+ integrations so she can solve practical tasks end to end.</p> 649 <ul class="feature-list"> 650 <li>Automated research and daily reports</li> 651 <li>Generate interactive websites: try a <a href="https://app.getsupers.com/sites/carrier-pigeon-message-simulator/">
651carrier pigeon simulator</a> or <a href="https://app.getsupers.com/sites/festival-setlist-sequencer-31/">festival setlist sequencer</a></li> 652 <li>Automate socials and connected apps</li> 653 </ul> 654 </article> 655 656 <article class="feature-panel" data-feature-panel="3"> 657 <h3>Computer-Use Cache For Impossible Agents.</h3> 658 <p>We solved $0 computer-use for repeatable tasks using a model trained on actions, so Super can automate her own apps in the cloud without limits.</p> 659 <ul class="feature-list"> 660 <li>Replay reliable app actions without paying per click</li> 661 <li>Train repeatable workflows from successful automations</li> 662 <li>Give agents durable cloud app control at launch scale</li> 663 </ul> 664 </article> 665 <article class="feature-panel" data-feature-panel="4"> 666 <h3>Super Mac for auto-building agents</h3> 667 <p>Connect Codex, Claude, and Hermes agent to Super Mac to generate deterministic scripts that improve over time and reduce your repeated costs to $0 with our built-in computer-use cache</p> 668 </article> 669 </div> 670 </div> 671 </div> 672 </section> 673 674 <section class="wall" id="reviews" aria-labelledby="reviews-title"> 675 <div class="shell"> 676 <div class="wall-layout"> 677 <div class="wall-header"> 678 <h2 id="reviews-title">What people say about us</h2> 679 </div> 680 681 <div class="review-grid"> 682 <article class="review-card featured"> 683 <blockquote class="review-quote">"This goes way further than Apple showed."</blockquote> 684 <div class="review-footer"> 685 <div class="review-person"> 686 <img class="review-avatar" src="/generated/robert-scoble-avatar.jpg" alt="Robert Scoble X profile photo" width="54" height="54" loading="lazy"> 687 <div> 688 <span class="review-name">Robert Scoble</span> 689 <span class="review-handle">@Scobleizer <span class="review-followers">588.8K followers</span></span> 690 </div> 691 </div> 692 <a class="review-link" href="https://x.com/Scobleizer/status/2064055367320154204" target="_blank" rel="noopener noreferrer">Read on X</a> 693 </div> 694 </article> 695 696 <article class="review-card featured"> 697 <blockquote class="review-quote">"Probably the most forward looking demo is an AI agent called Super, which can place Uber and Doordash orders using nothing but voice."</blockquote> 698 <div class="review-footer"> 699 <div class="review-person"> 700 <img class="review-avatar" src="https://i.ytimg.com/vi/wGPNqPd1flE/hqdefault.jpg" alt="The Mysticle YouTube video thumbnail discussing Super AI agent demo" width="54" height="54" loading="lazy"> 701 <div> 702 <span class="review-name">The Mysticle</span> 703 <span class="review-handle">@TheMysticle <span class="review-followers">223K subscribers</span></span> 704 </div> 705 </div> 706 <a class="review-link" href="https://www.youtube.com/watch?v=wGPNqPd1flE&t=710s" target="_blank" rel="noopener noreferrer">Watch on YouTube</a> 707 </div> 708 </article> 709 710 <article class="review-card"> 711 <blockquote class="review-quote">"Super does something different: it actually completes the task."</blockquote> 712 <div class="review-footer"> 713 <div class="review-person"> 714 <img class="review-avatar" src="https://unavatar.io/x/anujcodes_21" alt="Anuj X profile photo" width="54" height="54" loading="lazy"> 715 <div> 716 <span class="review-name">Anuj</span> 717 <span class="review-handle">@anujcodes_21 <span class="review-followers">21K followers</span></span> 718 </div> 719 </div> 720 <a class="review-link" href="https://x.com/anujcodes_21/status/2064030957871780348" target="_blank" rel="noopener noreferrer">Read on X</a> 721 </div> 722 </article> 723 724 <article class="review-card"> 725 <blockquote class="review-quote">"The unlock here for me is that it's not another LLM."</blockquote> 726 <div class="review-footer"> 727 <div class="review-person"> 728 <img class="review-avatar" src="https://unavatar.io/x/thisiskp_" alt="KP X profile photo" width="54" height="54" loading="lazy"> 729 <div>
730 <span class="review-name">KP</span> 731 <span class="review-handle">@thisiskp_ <span class="review-followers">70.4K followers</span></span> 732 </div> 733 </div> 734 <a class="review-link" href="https://x.com/thisiskp_/status/2064044881992147306" target="_blank" rel="noopener noreferrer">Read on X</a> 735 </div> 736 </article> 737 738 <article class="review-card"> 739 <blockquote class="review-quote">"Your assistant can finally leave the chat box."</blockquote> 740 <div class="review-footer"> 741 <div class="review-person"> 742 <img class="review-avatar" src="https://unavatar.io/x/FutureStacked" alt="Future Stacked X profile photo" width="54" height="54" loading="lazy"> 743 <div> 744 <span class="review-name">Future Stacked</span> 745 <span class="review-handle">@FutureStacked <span class="review-followers">283.1K followers</span></span> 746 </div> 747 </div> 748 <a class="review-link" href="https://x.com/FutureStacked/status/2064030172228038759" target="_blank" rel="noopener noreferrer">Read on X</a> 749 </div> 750 </article> 751 752 <article class="review-card"> 753 <blockquote class="review-quote">"Every AI assistant tells you how to do things. Super actually does them."</blockquote> 754 <div class="review-footer"> 755 <div class="review-person"> 756 <img class="review-avatar" src="https://unavatar.io/x/socialwithaayan" alt="Muhammad Ayan X profile photo" width="54" height="54" loading="lazy"> 757 <div> 758 <span class="review-name">Muhammad Ayan</span> 759 <span class="review-handle">@socialwithaayan <span class="review-followers">69.3K followers</span></span> 760 </div> 761 </div> 762 <a class="review-link" href="https://x.com/socialwithaayan/status/2064045078960865595" target="_blank" rel="noopener noreferrer">Read on X</a> 763 </div> 764 </article> 765 </div> 766 767 </div> 768 </div> 769 </section> 770 771 772 <section class="pricing" id="pricing" aria-labelledby="pricing-title"> 773 <div class="shell"> 774 <div class="pricing-layout"> 775 <h2 id="pricing-title">Pricing</h2> 776 <p>Start free, then add a managed device fleet when you need private agents, onboarding, and custom implementation support.</p> 777 778 <div class="pricing-tier-grid"> 779 <article class="price-card pricing-tier-card"> 780 <div class="price-summary"> 781 <h3>Free</h3> 782 <div class="price-amount">$0 <span>to start</span></div> 783 <p class="price-card-copy">Pay as you go with an agent wallet for chat, browser work, cloud code, website previews, orders, and real-world tasks.</p> 784 <a class="pricing-cta" data-signup href="https://app.getsupers.com/general?login=1&open_login=1">Text Super Now</a> 785 </div> 786 <div class="price-included"> 787 <ul class="price-features"> 788 <li><span>Pay-as-you-go wallet</span></li> 789 <li><span>Web, SMS, and app access</span></li> 790 <li><span>Optional integrations</span></li> 791 </ul> 792 </div> 793 </article> 794 795 <article class="price-card pricing-tier-card" data-tier="devices_10"> 796 <div class="price-summary"> 797 <h3>10 Devices</h3> 798 <p class="price-card-copy">Automate 10 cloud sandboxes or your private devices</p> 799 <div class="price-amount">$199 <span>/ month</span></div> 800 <p class="price-card-copy">A managed fleet for teams starting with private agents and hands-on implementation.</p> 801 <a class="pricing-cta" data-tier-checkout="devices_10" href="#pricing" aria-disabled="true">Choose 10 Devices</a> 802 </div> 803 <div class="price-included"> 804 <ul class="price-features"> 805 <li><span><strong>10 swappable devices</strong></span></li> 806 <li><span>Access to private agents</span></li> 807 <li><span>Live onboarding</span></li> 808 <li><span>Forward-deployed engineering to build custom agents</span></li> 809 </ul> 810 </div> 811 </article> 812 813 <article class="price-card pricing-tier-card" data-tier="devices_100"> 814 <div class="price-summary"> 815 <h3>100 Devices</h3> 816 <p class="price-card-copy">Automate 100 cloud sandboxes or your private devices</p> 817 <div class="price-amount">$999 <span>/ month</span></div> 818 <p class="price-card-copy">Scale agents across a larger fleet with the same private agent, onboarding, and FDE access.</p> 819 <a class="pricing-cta" data-tier-checkout="devices_100" href="#pricing" aria-disabled="true">Choose 100 Devices</a> 820 </div> 821 <div class="price-included"> 822 <ul class="price-features"> 823 <li><span><strong>100 swappable devices</strong></span></li> 824 <li><span>Access to private agents</span></li> 825 <li><span>Live onboarding</span></li> 826 <li><span>Forward-deployed engineering to build custom agents</span></li> 827 </ul> 828 </div> 829 </article> 830 </div> 831 </div> 832 </div> 833 </section> 834 835 <section class="compare" id="developers" aria-labelledby="developers-title"> 836 <div class="shell"> 837 <div class="compare-header"> 838 <h2 id="developers-title">Connect your agent to Super.</h2> 839 <p>Add Super to your MCP client, or bring your own computer online with the CLI.</p> 840 </div> 841 <div class="developer-code-grid developer-code-card"> 842 <div class="developer-code-tabs" role="tablist" aria-label="Connection method"> 843 <button type="button" id="super-mcp-tab" role="tab" aria-selected="true" aria-controls="super-mcp-panel">Hosted MCP</button> 844 <button type="button" id="super-cli-tab" role="tab" aria-selected="false" aria-controls="super-cli-panel" tabindex="-1">Desktop CLI</button> 845 </div> 846 <div class="developer-code-panel" id="super-mcp-panel" role="tabpanel" aria-labelledby="super-mcp-tab"> 847 <div class="developer-code-bar"><h3>Hosted MCP</h3><button type="button" data-copy-code="super-mcp-code" aria-label="Copy MCP configuration">Copy</button></div> 848 <pre tabindex="0" aria-label="MCP configuration"><code id="super-mcp-code">{ 849 "mcpServers": { 850 "super": { 851 "url": "https://app.getsupers.com/mcp" 852 } 853 } 854}</code></pre> 855 <p>For clients supporting remote HTTP MCP and this JSON configuration format. Complete Super sign-in through your client's OAuth flow.</p> 856 <a href="/developers/mcp">
856MCP setup guide</a> 857 </div> 858 <div class="developer-code-panel" id="super-cli-panel" role="tabpanel" aria-labelledby="super-cli-tab" hidden> 859 <div class="developer-code-bar"><h3>Desktop CLI</h3><button type="button" data-copy-code="super-cli-code" aria-label="Copy CLI commands">Copy</button></div> 860 <pre tabindex="0" aria-label="CLI commands"><code id="super-cli-code">npm install -g superpowers-ai 861superpowers login</code></pre> 862 <p>Requires Node.js and npm. Sign in with your email or phone, then open the private control link. Use <code>superpowers start</code> to start again later.</p> 863 <a href="/developers/cli">CLI setup guide</a> 864 </div> 865 </div> 866 <p class="developer-code-footer"><a href="/developers/">Explore the developer portal</a><span id="developer-copy-status" role="status" aria-live="polite"></span></p> 867 </div> 868 </section> 869 870 <section class="launch-news" id="news" aria-labelledby="news-title"> 871 <div class="shell"> 872 <h2 id="news-title">News</h2> 873 <div class="launch-news-grid"> 874 <article class="launch-news-story" id="news-computer-use-cache"> 875 <p class="launch-news-date">Open-source launch · <time datetime="2026-06-08">June 8, 2026</time></p> 876 <h3>SuperPowers AI open-sources Computer-Use Cache</h3> 877 <video class="launch-news-video" controls playsinline preload="none" poster="/news-cache-poster.jpg" aria-label="SuperPowers AI Computer-Use Cache second launch video"> 878 <source src="https://storage.googleapis.com/cheatlayer/landing/hero-0607-2-3.mp4" type="video/mp4"> 879 <a href="https://storage.googleapis.com/cheatlayer/landing/hero-0607-2-3.mp4">Watch the second launch video</a> 880 </video> 881 <p>SuperPowers AI has released Computer-Use Cache, an MIT-licensed, OpenAI-compatible proxy designed to reduce the model cost of repeated agent workflows.</p> 882 <p>Instead of sending the same request to a model again, the cache stores successful responses and replays exact repeated requests. Cache misses still go to the upstream provider. Developers can use it for repeated browser, coding, and tool workflows, with setup options for Codex, Claude Code, Cursor, OpenClaw, and Hermes.</p> 883 <p>The release makes a practical idea available to developers: pay for new reasoning when it is needed, and reuse work when the request repeats. Cache hits avoid another upstream model call; other execution and infrastructure costs may still apply.</p> 884 <p>Interest in reliable, lower-cost automation is growing across the industry. In a separate announcement on June 10, 2026, Poetic reported a $50 million Series A for enterprise process automation. Its focus on software that combines AI learning with code-like execution reflects a related ambition, not evidence of identical technology.</p> 885 <div class="launch-news-links"> 886 <a href="https://x.com/RohanArun/status/2064014542997459109">Read our launch announcement on X</a> 887 </div> 888 </article> 889 <article class="launch-news-story" id="news-first-launch"> 890 <p class="launch-news-date">Product Hunt launch · March 6, 2026</p> 891 <h3>SuperPowers AI earns #2 Product of the Day</h3> 892 <video class="launch-news-video" controls playsinline preload="none" poster="/news-launch-poster.jpg" aria-label="SuperPowers AI first launch video"> 893 <source src="/superpowers-launch-faststart.mp4" type="video/mp4"> 894 <a href="https://app.getsupers.com/growth/superpowers-ai-open-claw-wearables.mp4">Watch the launch video</a> 895 </video> 896 <p>SuperPowers AI launched with a vision for real-time visual agents on phones and wearables, earning #2 Product of the Day on Product Hunt on March 6, 2026.</p> 897 <p>The launch introduced a different way to interact with AI: bring an agent into the context of what you are doing, rather than stopping to de
897scribe everything in a chat box. The original launch video shows that vision in action.</p> 898 <p>The first launch established the product direction. Computer-Use Cache extends it by addressing the cost of repeating work, giving developers an open-source building block for reusable agent workflows.</p> 899 <div class="launch-news-links"> 900 <a href="https://www.producthunt.com/products/superpowers-ai-2">View the Product Hunt launch</a> 901 </div> 902 </article> 903 </div> 904 </div> 905 </section> 906 907 <section class="faq" id="faq" aria-labelledby="faq-title"> 908 <div class="shell"> 909 <div class="faq-grid"> 910 <div class="faq-title"> 911 <h2 id="faq-title">FAQ</h2> 912 </div> 913 <div class="faq-list" data-faq-list></div> 914 </div> 915 </div> 916 </section> 917 </main> 918 919 <footer class="footer"> 920 <div class="shell"> 921 <div class="footer-panel"> 922 <div class="footer-top"> 923 <div class="footer-columns" aria-label="Footer links"> 924 <div class="footer-column"> 925 <a href="https://app.getsupers.com/general?login=1&open_login=1">Sign up</a> 926 <a href="#pricing">Pricing</a> 927 <a href="/vs/chatgpt/">
927Super vs ChatGPT</a> 928 <a href="/vs/poke/">Super vs Poke</a> 929 <a href="/vs/comet/">Super vs Comet</a> 930 <a href="https://app.getsupers.com/humans">Jobs</a> 931 <a href="/developers/">Developer portal</a> 932 <a href="/developers/api-lifecycle">API lifecycle</a> 933 <a href="https://app.getsupers.com/docs">Product docs</a> 934 <a class="footer-app-link" href="https://apps.apple.com/us/app/super-real-time-ai-assistant/id6758969961" target="_blank" rel="noopener noreferrer"><span class="footer-app-icon" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none"><path d="M9 3.5h6A2.5 2.5 0 0 1 17.5 6v12a2.5 2.5 0 0 1-2.5 2.5H9A2.5 2.5 0 0 1 6.5 18V6A2.5 2.5 0 0 1 9 3.5Z" stroke="currentColor" stroke-width="1.8"/><path d="M10.5 6h3" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"/><path d="M11.5 18h1" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"/></svg></span>iOS app <span class="footer-app-count">2,000+ users</span></a> 935 <a class="footer-app-link" href="https://chromewebstore.google.com/detail/superpowers-ai/oolmdenpaebkcokkccakmlmhcpnogalc" target="_blank" rel="noopener noreferrer"><span class="footer-app-icon" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none"><path d="M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" stroke="currentColor" stroke-width="1.8"/><path d="M12 21 8.1 12M20 8H10.2M4 8h6.2L12 12" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/><path d="M15.2 12a3.2 3.2 0 1 1-6.4 0 3.2 3.2 0 0 1 6.4 0Z" stroke="currentColor" stroke-width="1.8"/></svg></span>Chrome extension <span class="footer-app-count">8,000+ users</span></a> 936 <a class="footer-app-link" href="https://storage.googleapis.com/cheatlayer/SuperPowersMac.dmg" target="_blank" rel="noopener noreferrer"><span class="footer-app-icon" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none"><path d="M5 5.5h14A1.5 1.5 0 0 1 20.5 7v8A1.5 1.5 0 0 1 19 16.5H5A1.5 1.5 0 0 1 3.5 15V7A1.5 1.5 0 0 1 5 5.5Z" stroke="currentColor" stroke-width="1.8"/><path d="M8 20h8M10 16.5 9.2 20M14 16.5l.8 3.5" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"/></svg></span>Mac app</a> 937 <a class="footer-app-link" href="/meta-display/"><span class="footer-app-icon" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none"><path d="M4 12.5c.7-2.7 2.1-4 4.2-4h1.3c1.1 0 1.9.4 2.5 1.2.6-.8 1.4-1.2 2.5-1.2h1.3c2.1 0 3.5 1.3 4.2 4l.5 2.1c.3 1.3-.7 2.4-2 2.4h-2.7c-1.2 0-2.2-.8-2.5-1.9l-.4-1.5h-1.8l-.4 1.5c-.3 1.1-1.3 1.9-2.5 1.9H5.5c-1.3 0-2.3-1.1-2-2.4l.5-2.1Z" stroke="currentColor" stroke-width="1.6" stroke-linejoin="round"/><path d="M10.9 13.6h2.2" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"/></svg></span>Meta Display</a> 938 </div> 939 <div class="footer-column"> 940 <a href="/about">About SuperPowers AI</a> 941 <a href="/contact">Contact</a> 942 <a href="#faq">FAQ</a> 943 <a href="/privacy">Privacy policy</a> 944 <a href="https://app.getsupers.com/terms">Terms of service</a> 945 </div> 946 <div class="footer-column"> 947 <a href="https://x.com/Super_Powers_AI">X <span class="social-count">4,053 members</span></a> 948 <a href="https://github.com/rohanarun/phoneclaw" target="_blank" rel="noopener noreferrer">GitHub <span class="github-stars" data-github-stars>537 stars</span></a> 949 <a href="https://discord.gg/supers">Discord <span class="social-count">2,070 members</span></a> 950 </div> 951 </div> 952 <div class="footer-brand">Super</div> 953 </div> 954 <div class="footer-bottom"> 955 <span>© 2026 SuperPowers AI</span> 956 <span>Made with â¤ï¸ in San Francisco</span> 957 <span class="footer-signoff">Apps are a vestige of the mobile era.</span> 958 </div> 959 </div> 960 </div> 961 </footer> 962 963 <aside class="ios-app-suggestion" data-ios-app-suggestion aria-label="Super iPhone app"> 964 <img src="https://storage.googleapis.com/cheatlayer/landing/icon-transparent-180.png" alt="Super app icon" width="44" height="44"> 965 <span class="ios-app-suggestion-copy"><strong>Take Super with you</strong><span>The iPhone app adds voice and mobile actions.</span></span> 966 <a class="ios-app-suggestion-link" href="https://apps.apple.com/us/app/super-real-time-ai-assistant/id6758969961" target="_blank" rel="noopener noreferrer">View app</a> 967 <button class="ios-app-suggestion-close" data-ios-app-close type="button" aria-label="Dismiss app suggestion">×</button> 968 </aside> 969 970
970<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/gsap.min.js"></script>
970 971
971<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/ScrollTrigger.min.js"></script>
971 972
972<script src="/html2canvas.1.4.1.min.js"></script>
972 973
973<script src="/webmcp.js" defer></script>
973 974
974<script> 975 (function () { 976 var tabs = Array.from(document.querySelectorAll('.developer-code-tabs [role="tab"]')); 977 function activate(tab) { 978 tabs.forEach(function (item) { 979 var selected = item === tab; 980 item.setAttribute('aria-selected', String(selected)); 981 item.tabIndex = selected ? 0 : -1; 982 document.getElementById(item.getAttribute('aria-controls')).hidden = !selected; 983 }); 984 document.getElementById('developer-copy-status').textContent = ''; 985 } 986 tabs.forEach(function (tab, index) { 987 tab.addEventListener('click', function () { activate(tab); }); 988 tab.addEventListener('keydown', function (event) { 989 var next; 990 if (event.key === 'ArrowRight') next = (index + 1) % tabs.length; 991 else if (event.key === 'ArrowLeft') next = (index + tabs.length - 1) % tabs.length; 992 else if (event.key === 'Home') next = 0; 993 else if (event.key === 'End') next = tabs.length - 1; 994 else return; 995 event.preventDefault(); 996 activate(tabs[next]); 997 tabs[next].focus(); 998 }); 999 }); 1000 })(); 1001 document.querySelectorAll('[data-copy-code]').forEach(function (button) { 1002 button.addEventListener('click', async function () { 1003 var code = document.getElementById(button.dataset.copyCode); 1004 var status = document.getElementById('developer-copy-status'); 1005 try { 1006 await navigator.clipboard.writeText(code.textContent); 1007 status.textContent = button.dataset.copyCode === 'super-mcp-code' ? 'MCP configuration copied.' : 'CLI commands copied.'; 1008 } catch (error) { 1009 var selection = window.getSelection(); 1010 var range = document.createRange(); 1011 range.selectNodeContents(code); 1012 selection.removeAllRanges(); 1013 selection.addRange(range); 1014 status.textContent = 'Select and copy the highlighted code.'; 1015 } 1016 }); 1017 }); 1018 </script>
1018 1019
1019<script src="/landing.920a3c36cc.min.js" defer></script>
1019 1020
1020<script> 1021 (function () { 1022 var generator = document.querySelector('[data-tool-generator]'); 1023 var form = document.querySelector('[data-tool-form]'); 1024 var input = document.querySelector('[data-tool-input]'); 1025 var submit = document.querySelector('[data-tool-submit]'); 1026 var frame = document.querySelector('[data-tool-frame]'); 1027 var preview = document.querySelector('[data-tool-preview]'); 1028 var toolStage = document.querySelector('[data-tool-stage]'); 1029 var webglCanvas = document.querySelector('[data-tool-webgl]'); 1030 var textureVideo = document.querySelector('[data-tool-texture-video]'); 1031 var sharePanel = document.querySelector('[data-tool-share]'); 1032 var shareButton = document.querySelector('[data-tool-share-button]'); 1033 var siteLink = document.querySelector('[data-tool-site-link]'); 1034 var recentPanel = document.querySelector('[data-tool-recents]'); 1035 var recentList = document.querySelector('[data-tool-recent-list]'); 1036 var totalSitesMetric = document.querySelector('[data-tool-total-sites]'); 1037 var quickPromptsContainer = document.querySelector('[data-tool-prompts]'); 1038 var quickPromptCount = quickPromptsContainer 1039 ? quickPromptsContainer.querySelectorAll('[data-tool-question]').length 1040 : 0; 1041 var status = document.querySelector('[data-tool-status]'); 1042 var iosSuggestion = document.querySelector('[data-ios-app-suggestion]'); 1043 var iosClose = document.querySelector('[data-ios-app-close]'); 1044 var navSentinel = document.querySelector('[data-tool-nav-sentinel]'); 1045 var activeController = null; 1046 var generationSequence = 0; 1047 var AUTHORITATIVEDATA = ''; 1048 var FINALDATA = ''; 1049 var publishedSiteUrl = ''; 1050 var publishedSiteTitle = ''; 1051 var authoritativeCaptureTimer = 0; 1052 var authoritativeCaptureRequested = false; 1053 var authoritativeCaptureInFlight = false; 1054 var authoritativePreviewTimer = 0; 1055 var authoritativePreviewHTML = ''; 1056 var authoritativePreviewRevision = 0; 1057 var authoritativePreviewLoad = Promise.resolve(); 1058 var navFrame = 0; 1059 var textureCanvas = document.createElement('canvas'); 1060 var authoritativeTextureCanvas = document.createElement('canvas'); 1061 var authoritativeTextureMirrorFrame = createTextureMirrorFrame('gemini'); 1062 var webglState = null; 1063 var lastWebGLFrame = 0; 1064 var textureProgress = 0; 1065 var targetTextureProgress = 0; 1066 var textureVersion = 0; 1067 var authoritativeTextureVersion = 0; 1068 var authoritativeTextureReady = false; 1069 var authoritativeTextureMix = 0; 1070 var targetAuthoritativeTextureMix = 0; 1071 var authoritativeDataProgress = 0; 1072 var authoritativeAssemblyStarted = false; 1073 var TILE_COUNT = 240000; 1074 var AUTHORITATIVE_TEXTURE_CHARACTER_TARGET = 30000; 1075 var TAILWIND_RUNTIME_URL = String(generator.getAttribute('data-tailwind-runtime') || '').trim(); 1076 1077 function compileShader(gl, type, source) { 1078 var shader = gl.createShader(type); 1079 gl.shaderSource(shader, source); 1080 gl.compileShader(shader); 1081 if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) { 1082 gl.deleteShader(shader); 1083 return null; 1084 } 1085 return shader; 1086 } 1087 1088 function initWebGL() { 1089 if (!webglCanvas) return; 1090 var gl = webglCanvas.getContext('webgl2', {alpha: true, antialias: false, powerPreference: 'high-performance'}); 1091 if (!gl) { 1092 webglCanvas.classList.add('is-unavailable'); 1093 return; 1094 } 1095 var vertexSource = [ 1096 '#version 300 es', 1097 'precision highp float;', 1098 'uniform vec2 uGrid;', 1099 'uniform vec2 uViewport;', 1100 'uniform float uProgress;', 1101 'uniform float uTime;', 1102 'uniform float uLoadingMode;', 1103 'uniform float uLoadingCount;', 1104 'out vec2 vUv;', 1105 'out float vAlpha;', 1106 'out float vShade;', 1107 'out float vSettled;', 1108 'out float vLoading;', 1109 'uint hashBits(uint value){value^=value>>16;value*=0x7feb352du;value^=value>>15;value*=0x846ca68bu;value^=value>>16;return value;}', 1110 'float hash(uint value){return float(hashBits(value))/4294967295.0;}', 1111 'void main(){', 1112 ' uint particleId=uint(gl_VertexID);', 1113 ' if(uLoadingMode>0.5){', 1114 ' float loadingIndex=float(particleId);', 1115 ' float count=max(uLoadingCount,1.0);', 1116 ' float unit=loadingIndex/count;', 1117 ' float turn=unit*18.8495559-uTime*2.35;', 1118 ' float wave=sin(unit*37.6991118+uTime*3.1);', 1119 ' float radius=0.062+wave*0.010;', 1120 ' float aspect=uViewport.y/max(uViewport.x,1.0);', 1121 ' vec2 orbit=vec2(cos(turn)*radius*aspect,sin(turn)*radius);', 1122 ' gl_Position=vec4(orbit,0.0,1.0);', 1123 ' gl_PointSize=max(1.5,min(uViewport.x,uViewport.y)*mix(0.0022,0.0042,0.5+0.5*wave));', 1124 ' vUv=vec2(0.5);', 1125 ' vAlpha=0.28+0.72*pow(0.5+0.5*sin(turn+uTime*1.7),2.0);', 1126 ' vShade=unit;', 1127 ' vSettled=1.0;', 1128 ' vLoading=1.0;', 1129 ' return;', 1130 ' }', 1131 ' float tileId=float(particleId);', 1132 ' float column=mod(tileId,uGrid.x);', 1133 ' float row=floor(tileId/uGrid.x);', 1134 ' vec2 cell=vec2(column,row);', 1135 ' vec2 finalCenter=vec2(((column+0.5)/uGrid.x)*2.0-1.0,1.0-((row+0.5)/uGrid.y)*2.0);', 1136 ' float seed=hash(particleId+1u);', 1137 ' float verticalSeed=hash(particleId+317u);', 1138 ' float motionSeed=hash(particleId+1907u);', 1139 ' float motionVerticalSeed=hash(particleId+4099u);',
1140 ' float order=mix(row/max(uGrid.y-1.0,1.0),seed,0.34);', 1141 ' float startAt=order*0.72;', 1142 ' float pathProgress=smoothstep(startAt,min(1.0,startAt+0.28),uProgress);', 1143 ' float startY=min(1.05,finalCenter.y+mix(0.18,1.10,verticalSeed));', 1144 ' vec2 randomCenter=vec2(mix(-1.08,1.08,seed),startY);', 1145 ' vec2 randomMotion=vec2(sin(uTime*(0.55+motionSeed)+motionSeed*31.0),cos(uTime*(0.42+motionVerticalSeed)+motionVerticalSeed*29.0))*0.055;', 1146 ' randomCenter+=randomMotion*(1.0-pathProgress);', 1147 ' vec2 center=mix(randomCenter,finalCenter,pathProgress);', 1148 ' center.x+=sin(seed*12.0+pathProgress*9.0)*(1.0-pathProgress)*0.10;', 1149 ' gl_Position=vec4(center,0.0,1.0);', 1150 ' vec2 cellPixels=uViewport/max(uGrid,vec2(1.0));', 1151 ' float settledPointSize=sqrt(max(cellPixels.x*cellPixels.y,1.0));', 1152 ' float floatingPointSize=max(1.0,settledPointSize*0.34);', 1153 ' gl_PointSize=mix(floatingPointSize,settledPointSize,pathProgress);', 1154 ' vUv=(cell+vec2(0.5))/uGrid;', 1155 ' vAlpha=mix(0.24,1.0,smoothstep(0.0,0.08,pathProgress));', 1156 ' float rightSideDarken=smoothstep(0.50,1.0,seed)*0.16;', 1157 ' vShade=clamp(hash(particleId+911u)-rightSideDarken,0.0,1.0);', 1158 ' vSettled=pathProgress;', 1159 ' vLoading=0.0;', 1160 '}' 1161 ].join('\n'); 1162 var fragmentSource = [ 1163 '#version 300 es', 1164 'precision mediump float;', 1165 'uniform sampler2D uTexture;', 1166 'uniform sampler2D uAuthoritativeTexture;', 1167 'uniform float uTextureMix;', 1168 'in vec2 vUv;', 1169 'in float vAlpha;', 1170 'in float vShade;', 1171 'in float vSettled;', 1172 'in float vLoading;', 1173 'out vec4 outColor;', 1174 'void main(){', 1175 ' if(vLoading>0.5){', 1176 ' vec2 particleCoord=gl_PointCoord-vec2(0.5);', 1177 ' float particleDistance=dot(particleCoord,particleCoord);', 1178 ' if(particleDistance>0.25) discard;', 1179 ' float particleEdge=1.0-smoothstep(0.13,0.25,particleDistance);', 1180 ' vec3 loadingColor=vec3(mix(0.08,0.34,vShade));', 1181 ' outColor=vec4(loadingColor,vAlpha*particleEdge);', 1182 ' return;', 1183 ' }', 1184 ' vec3 fastSample=texture(uTexture,clamp(vUv,0.0,1.0)).rgb;', 1185 ' vec3 authoritativeSample=texture(uAuthoritativeTexture,clamp(vUv,0.0,1.0)).rgb;', 1186 ' float textureBlend=uTextureMix*uTextureMix*(3.0-2.0*uTextureMix);', 1187 ' vec3 sampled=mix(fastSample,authoritativeSample,textureBlend);', 1188 ' float particleShade=mix(0.22+vShade*0.28,0.98+vShade*0.02,vSettled);', 1189 ' outColor=vec4(sampled*particleShade,vAlpha);', 1190 '}' 1191 ].join('\n'); 1192 var vertex = compileShader(gl, gl.VERTEX_SHADER, vertexSource); 1193 var fragment = compileShader(gl, gl.FRAGMENT_SHADER, fragmentSource); 1194 if (!vertex || !fragment) { 1195 webglCanvas.classList.add('is-unavailable'); 1196 return; 1197 } 1198 var program = gl.createProgram(); 1199 gl.attachShader(program, vertex); 1200 gl.attachShader(program, fragment); 1201 gl.linkProgram(program); 1202 if (!gl.getProgramParameter(program, gl.LINK_STATUS)) { 1203 webglCanvas.classList.add('is-unavailable'); 1204 return; 1205 } 1206 gl.useProgram(program); 1207 var vertexArray = gl.createVertexArray(); 1208 gl.bindVertexArray(vertexArray); 1209 var texture = gl.createTexture(); 1210 gl.activeTexture(gl.TEXTURE0); 1211 gl.bindTexture(gl.TEXTURE_2D, texture); 1212 gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR); 1213 gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR); 1214 gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE); 1215 gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE); 1216 gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, 1, 1, 0, gl.RGBA, gl.UNSIGNED_BYTE, new Uint8Array([255,255,255,255])); 1217 gl.uniform1i(gl.getUniformLocation(program, 'uTexture'), 0); 1218 var authoritativeTexture = gl.createTexture(); 1219 gl.activeTexture(gl.TEXTURE1); 1220 gl.bindTexture(gl.TEXTURE_2D, authoritativeTexture); 1221 gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR); 1222 gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR); 1223 gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE); 1224 gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE); 1225 gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, 1, 1, 0, gl.RGBA, gl.UNSIGNED_BYTE, new Uint8Array([255,255,255,255])); 1226 gl.uniform1i(gl.getUniformLocation(program, 'uAuthoritativeTexture'), 1); 1227 gl.activeTexture(gl.TEXTURE0); 1228 gl.enable(gl.BLEND); 1229 gl.blendFuncSeparate(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA, gl.ONE, gl.ONE_MINUS_SRC_ALPHA); 1230 webglState = { 1231 gl: gl, 1232 vertexArray: vertexArray, 1233 texture: texture, 1234 authoritativeTexture: authoritativeTexture, 1235 grid: gl.getUniformLocation(program, 'uGrid'), 1236 viewport: gl.getUniformLocation(program, 'uViewport'), 1237 progress: gl.getUniformLocation(program, 'uProgress'), 1238 time: gl.getUniformLocation(program, 'uTime'), 1239 loadingMode: gl.getUniformLocation(program, 'uLoadingMode'), 1240 loadingCount: gl.getUniformLocation(program, 'uLoadingCount'), 1241 textureMix: gl.getUniformLocation(program, 'uTextureMix'), 1242 uploadedTextureVersion: -1, 1243 uploadedAuthoritativeTextureVersion: -1 1244 }; 1245 textureCanvas.width = 2; 1246 textureCanvas.height = 2; 1247 authoritativeTextureCanvas.width = 2; 1248 authoritativeTextureCanvas.height = 2; 1249 window.requestAnimationFrame(drawWebGL); 1250 } 1251 1252 function selectTileGrid(width, height) { 1253 var targetRatio = Math.max(width, 1) / Math.max(height, 1); 1254 var columns = Math.max(1, Math.round(Math.sqrt(TILE_COUNT * targetRatio))); 1255 var rows = Math.max(1, Math.ceil(TILE_COUNT / columns)); 1256 return [columns, rows]; 1257 } 1258 1259 function createTextureMirrorFrame(kind) { 1260 var mirrorFrame = document.createElement('iframe'); 1261 mirrorFrame.setAttribute('aria-hidden', 'true'); 1262 mirrorFrame.setAttribute('tabindex', '-1'); 1263 mirrorFrame.setAttribute('sandbox', 'allow-same-origin allow-scripts'); 1264 mirrorFrame.setAttribute('data-tool-texture-mirror', kind); 1265 mirrorFrame.srcdoc = '<!doctype html><html><head></head><body></body></html>'; 1266 mirrorFrame.style.cssText = 'position:fixed;left:-200vw;top:0;width:2px;height:2px;border:0;pointer-events:none;z-index:-1'; 1267 document.body.appendChild(mirrorFrame); 1268 return mirrorFrame; 1269 } 1270 1271 function ensureTextureMirrorTailwind(mirrorDocument, onReady) { 1272 if (!mirrorDocument || !mirrorDocument.head || !mirrorDocument.body) return null; 1273 var existingRuntime = mirrorDocument.head.querySelector('[data-tool-tailwind-runtime]'); 1274 if (existingRuntime) { 1275 if (existingRuntime.getAttribute('data-tool-tailwind-ready') === 'true') return existingRuntime; 1276 if (onReady && existingRuntime.getAttribute('data-tool-tailwind-waiting') !== 'true') { 1277 existingRuntime.setAttribute('data-tool-tailwind-waiting', 'true'); 1278 existingRuntime.addEventListener('load', function () { 1279 existingRuntime.removeAttribute('data-tool-tailwind-waiting'); 1280 existingRuntime.setAttribute('data-tool-tailwind-ready', 'true'); 1281 onReady(); 1282 }, {once: true}); 1283 } 1284 return existingRuntime; 1285 } 1286 var runtime = mirrorDocument.createElement('script'); 1287 runtime.setAttribute('data-tool-tailwind-runtime', ''); 1288 if (onReady) runtime.setAttribute('data-tool-tailwind-waiting', 'true'); 1289 runtime.src = TAILWIND_RUNTIME_URL; 1290 runtime.defer = true; 1291 runtime.addEventListener('load', function () { 1292 runtime.removeAttribute('data-tool-tailwind-waiting'); 1293 runtime.setAttribute('data-tool-tailwind-ready', 'true'); 1294 if (onReady) onReady(); 1295 }); 1296 mirrorDocument.head.appendChild(runtime); 1297 return runtime; 1298 } 1299 1300 function syncTextureMirror(mirrorFrame, source, width, height, onTailwindReady) { 1301 var mirrorDocument = mirrorFrame && mirrorFrame.contentDocument; 1302 if (!mirrorDocument || !mirrorDocument.head || !mirrorDocument.body) return null; 1303 var viewportWidth = Math.max(2, Math.round(width));
1304 var viewportHeight = Math.max(2, Math.round(height)); 1305 var parsed = new DOMParser().parseFromString(source || '<!doctype html><html><body></body></html>', 'text/html'); 1306 Array.prototype.slice.call(mirrorDocument.head.querySelectorAll('[data-tool-stream-style],[data-tool-mirror-guard]')).forEach(function (node) { 1307 node.remove(); 1308 }); 1309 Array.prototype.slice.call(parsed.querySelectorAll('style')).forEach(function (sourceStyle) { 1310 var clonedStyle = sourceStyle.cloneNode(true); 1311 clonedStyle.setAttribute('data-tool-stream-style', ''); 1312 mirrorDocument.head.appendChild(clonedStyle); 1313 }); 1314 var mirrorGuard = mirrorDocument.createElement('style'); 1315 mirrorGuard.setAttribute('data-tool-mirror-guard', ''); 1316 mirrorGuard.textContent = [ 1317 'html{box-sizing:border-box;width:100%!important;height:100%!important;overflow:hidden!important}', 1318 'body[data-tool-capture-body]{box-sizing:border-box!important;width:' + viewportWidth + 'px!important;height:' + viewportHeight + 'px!important;min-height:' + viewportHeight + 'px!important;max-height:' + viewportHeight + 'px!important;overflow-x:hidden!important;overflow-y:auto!important;overscroll-behavior:none!important;scrollbar-width:none!important}', 1319 'body[data-tool-capture-body]::-webkit-scrollbar{display:none!important}' 1320 ].join(''); 1321 mirrorDocument.head.appendChild(mirrorGuard); 1322 mirrorDocument.body.setAttribute('data-tool-capture-body', ''); 1323 Array.prototype.slice.call(parsed.body.querySelectorAll('script,iframe,object,embed')).forEach(function (node) { 1324 node.remove(); 1325 }); 1326 Array.prototype.slice.call(parsed.body.querySelectorAll('*')).forEach(function (node) { 1327 Array.prototype.slice.call(node.attributes || []).forEach(function (attribute) { 1328 if (/^on/i.test(attribute.name)) node.removeAttribute(attribute.name); 1329 }); 1330 }); 1331 mirrorDocument.body.innerHTML = parsed.body.innerHTML; 1332 var tailwindRuntime = ensureTextureMirrorTailwind(mirrorDocument, onTailwindReady); 1333 mirrorDocument.body.dataset.tailwindReady = String( 1334 !!tailwindRuntime && tailwindRuntime.getAttribute('data-tool-tailwind-ready') === 'true' 1335 ); 1336 mirrorFrame.style.width = viewportWidth + 'px'; 1337 mirrorFrame.style.height = viewportHeight + 'px'; 1338 mirrorDocument.documentElement.style.width = viewportWidth + 'px'; 1339 mirrorDocument.documentElement.style.height = viewportHeight + 'px'; 1340 mirrorDocument.body.getBoundingClientRect(); 1341 var bottomScrollTop = Math.max(0, mirrorDocument.body.scrollHeight - mirrorDocument.body.clientHeight); 1342 mirrorDocument.body.scrollTop = bottomScrollTop; 1343 mirrorDocument.body.dataset.captureScrollTop = String(mirrorDocument.body.scrollTop); 1344 mirrorDocument.body.dataset.captureScrollHeight = String(mirrorDocument.body.scrollHeight); 1345 mirrorDocument.body.dataset.captureClientHeight = String(mirrorDocument.body.clientHeight); 1346 return mirrorDocument.body; 1347 } 1348 1349 function hasRenderableStreamHTML(source) { 1350 var cleaned = cleanGeneratedHTML(source); 1351 if (!/<(?:body|main|section|article|div|canvas|svg|form|button|h1|h2|p|input|select|textarea)\b/i.test(cleaned)) return false; 1352 var parsed = new DOMParser().parseFromString(cleaned, 'text/html'); 1353 var body = parsed && parsed.body; 1354 if (!body) return false; 1355 if (String(body.textContent || '').trim()) return true; 1356 return !!body.querySelector('canvas,svg,img,video,input,button,select,textarea'); 1357 } 1358 1359 function drawWebGL(now) { 1360 if (!webglState || !webglCanvas || !preview) return; 1361 if (!generator.classList.contains('is-active') || (now || 0) - lastWebGLFrame < 33) { 1362 window.requestAnimationFrame(drawWebGL); 1363 return; 1364 } 1365 lastWebGLFrame = now || 0; 1366 var gl = webglState.gl; 1367 var bounds = (toolStage || preview).getBoundingClientRect(); 1368 var scale = Math.min(window.devicePixelRatio || 1, 1.5); 1369 var width = Math.max(2, Math.round(bounds.width * scale)); 1370 var height = Math.max(2, Math.round(bounds.height * scale)); 1371 if (webglCanvas.width !== width || webglCanvas.height !== height) { 1372 webglCanvas.width = width; 1373 webglCanvas.height = height; 1374 gl.viewport(0, 0, width, height); 1375 } 1376 textureProgress += (targetTextureProgress - textureProgress) * 0.12; 1377 if (Math.abs(targetTextureProgress - textureProgress) < 0.0001) textureProgress = targetTextureProgress; 1378 authoritativeTextureMix += (targetAuthoritativeTextureMix - authoritativeTextureMix) * 0.45; 1379 if (Math.abs(targetAuthoritativeTextureMix - authoritativeTextureMix) < 0.0001) authoritativeTextureMix = targetAuthoritativeTextureMix; 1380 webglCanvas.dataset.assemblyProgress = textureProgress.toFixed(4); 1381 webglCanvas.dataset.assemblyTarget = String(targetTextureProgress); 1382 webglCanvas.dataset.authoritativeBlend = authoritativeTextureMix.toFixed(4); 1383 webglCanvas.dataset.textureSource = authoritativeTextureMix >= 0.999 ? 'gemini-3.7' : (authoritativeTextureMix > 0 ? 'crossfade' : 'waiting'); 1384 var hasCapturedTexture = textureCanvas.width > 2 && textureCanvas.height > 2; 1385 if (hasCapturedTexture && webglState.uploadedTextureVersion !== textureVersion) { 1386 try { 1387 gl.activeTexture(gl.TEXTURE0); 1388 gl.bindTexture(gl.TEXTURE_2D, webglState.texture); 1389 gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, false); 1390 gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, textureCanvas); 1391 webglState.uploadedTextureVersion = textureVersion; 1392 webglCanvas.dataset.textureWidth = String(textureCanvas.width); 1393 webglCanvas.dataset.textureHeight = String(textureCanvas.height); 1394 webglCanvas.dataset.textureUploaded = 'true'; 1395 generator.classList.add('texture-ready'); 1396 } catch (_error) {
1397 webglCanvas.dataset.textureUploaded = 'false'; 1398 generator.classList.remove('texture-ready'); 1399 } 1400 } 1401 if (authoritativeTextureReady && webglState.uploadedAuthoritativeTextureVersion !== authoritativeTextureVersion) { 1402 try { 1403 gl.activeTexture(gl.TEXTURE1); 1404 gl.bindTexture(gl.TEXTURE_2D, webglState.authoritativeTexture); 1405 gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, false); 1406 gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, authoritativeTextureCanvas); 1407 webglState.uploadedAuthoritativeTextureVersion = authoritativeTextureVersion; 1408 webglCanvas.dataset.authoritativeTextureVersion = String(authoritativeTextureVersion); 1409 webglCanvas.dataset.authoritativeTextureUploaded = 'true'; 1410 generator.classList.add('texture-ready'); 1411 } catch (_error) { 1412 webglCanvas.dataset.authoritativeTextureUploaded = 'false'; 1413 } finally { 1414 gl.activeTexture(gl.TEXTURE0); 1415 } 1416 } 1417 var grid = selectTileGrid(width, height); 1418 gl.clearColor(0, 0, 0, 0); 1419 gl.clear(gl.COLOR_BUFFER_BIT); 1420 gl.bindVertexArray(webglState.vertexArray); 1421 gl.uniform2f(webglState.grid, grid[0], grid[1]); 1422 gl.uniform2f(webglState.viewport, width, height); 1423 gl.uniform1f(webglState.progress, textureProgress); 1424 gl.uniform1f(webglState.time, (now || 0) / 1000); 1425 gl.uniform1f(webglState.textureMix, authoritativeTextureMix); 1426 gl.uniform1f(webglState.loadingMode, 0); 1427 gl.drawArrays(gl.POINTS, 0, TILE_COUNT); 1428 var loadingActive = generator.getAttribute('aria-busy') === 'true' && !generator.classList.contains('has-output'); 1429 if (loadingActive) { 1430 var loadingParticleCount = Math.max(96, Math.min(320, Math.round(Math.min(width, height) * 0.18))); 1431 gl.uniform1f(webglState.loadingMode, 1); 1432 gl.uniform1f(webglState.loadingCount, loadingParticleCount); 1433 gl.drawArrays(gl.POINTS, 0, loadingParticleCount); 1434 gl.uniform1f(webglState.loadingMode, 0); 1435 webglCanvas.dataset.loadingOverlay = 'swirl'; 1436 } else { 1437 webglCanvas.dataset.loadingOverlay = 'off'; 1438 } 1439 window.requestAnimationFrame(drawWebGL); 1440 } 1441 1442 function captureAuthoritativeTexture() { 1443 authoritativeCaptureRequested = true; 1444 if (authoritativeCaptureTimer || authoritativeCaptureInFlight) return; 1445 authoritativeCaptureTimer = window.requestAnimationFrame(function () { 1446 authoritativeCaptureTimer = 0; 1447 if (!authoritativeCaptureRequested || authoritativeCaptureInFlight) return; 1448 authoritativeCaptureRequested = false; 1449 if (!preview || !AUTHORITATIVEDATA || !window.html2canvas) return; 1450 var bounds = (toolStage || preview).getBoundingClientRect(); 1451 if (bounds.width < 2 || bounds.height < 2) return; 1452 var captureTarget = syncTextureMirror( 1453 authoritativeTextureMirrorFrame, 1454 AUTHORITATIVEDATA, 1455 bounds.width, 1456 bounds.height, 1457 captureAuthoritativeTexture 1458 ); 1459 if (!captureTarget || captureTarget.dataset.tailwindReady !== 'true') return; 1460 var hasVisibleContent = String(captureTarget.textContent || '').trim().length > 0 || !!captureTarget.querySelector('canvas,svg,img,video,input,button,select,textarea'); 1461 if (!hasVisibleContent) return; 1462 authoritativeCaptureInFlight = true; 1463 var deviceCaptureScale = Math.min(window.devicePixelRatio || 1, 1.25); 1464 var particleCaptureScale = Math.sqrt( 1465 TILE_COUNT / Math.max(bounds.width * bounds.height, 1) 1466 ); 1467 var captureScale = authoritativeTextureReady 1468 ? deviceCaptureScale 1469 : Math.min(deviceCaptureScale, Math.max(0.5, particleCaptureScale)); 1470 if (webglCanvas) webglCanvas.dataset.authoritativeCaptureScale = captureScale.toFixed(3); 1471 window.html2canvas(captureTarget, { 1472 backgroundColor: '#ffffff', 1473 logging: false, 1474 scale: captureScale, 1475 useCORS: true, 1476 width: Math.round(bounds.width), 1477 height: Math.round(bounds.height), 1478 windowWidth: Math.round(bounds.width), 1479 windowHeight: Math.round(bounds.height) 1480 }).then(function (capturedCanvas) { 1481 if (!capturedCanvas || capturedCanvas.width < 3 || capturedCanvas.height < 3) return; 1482 authoritativeTextureCanvas = capturedCanvas; 1483 authoritativeTextureVersion += 1; 1484 authoritativeTextureReady = true; 1485 targetAuthoritativeTextureMix = 1; 1486 webglCanvas.dataset.authoritativeStreamLength = String(AUTHORITATIVEDATA.length); 1487 webglCanvas.dataset.authoritativeTextureMode = 'html'; 1488 }).catch(function () {}).finally(function () { 1489 authoritativeCaptureInFlight = false;
1490 if (authoritativeCaptureRequested) captureAuthoritativeTexture(); 1491 }); 1492 }); 1493 } 1494 1495 function streamAuthoritativeInParallel() { 1496 if (!authoritativeAssemblyStarted) { 1497 authoritativeAssemblyStarted = true; 1498 authoritativeDataProgress = 0; 1499 authoritativeTextureMix = 0; 1500 targetAuthoritativeTextureMix = 0; 1501 textureProgress = 0; 1502 targetTextureProgress = 0; 1503 if (webglCanvas) webglCanvas.dataset.assemblyPhase = 'gemini'; 1504 } 1505 authoritativeDataProgress = Math.max( 1506 authoritativeDataProgress, 1507 Math.min(1, AUTHORITATIVEDATA.length / AUTHORITATIVE_TEXTURE_CHARACTER_TARGET) 1508 ); 1509 targetTextureProgress = authoritativeDataProgress; 1510 if (authoritativeTextureReady) targetAuthoritativeTextureMix = 1; 1511 if (webglCanvas) { 1512 webglCanvas.dataset.authoritativeStreamProgress = authoritativeDataProgress.toFixed(4); 1513 webglCanvas.dataset.authoritativeStreamTargetCharacters = String( 1514 AUTHORITATIVE_TEXTURE_CHARACTER_TARGET 1515 ); 1516 } 1517 if (!hasRenderableStreamHTML(AUTHORITATIVEDATA)) return; 1518 captureAuthoritativeTexture(); 1519 } 1520 1521 function prewarmAuthoritativeTextureRenderer() { 1522 var mirrorDocument = authoritativeTextureMirrorFrame && authoritativeTextureMirrorFrame.contentDocument; 1523 if (!mirrorDocument || !mirrorDocument.head || !mirrorDocument.body) { 1524 if (authoritativeTextureMirrorFrame) { 1525 authoritativeTextureMirrorFrame.addEventListener('load', prewarmAuthoritativeTextureRenderer, {once: true}); 1526 } 1527 return; 1528 } 1529 ensureTextureMirrorTailwind(mirrorDocument); 1530 } 1531 1532 prewarmAuthoritativeTextureRenderer(); 1533 initWebGL(); 1534 1535 function syncNavVisibility() { 1536 navFrame = 0; 1537 var belowTool = !!navSentinel && navSentinel.getBoundingClientRect().top <= 0; 1538 document.body.classList.toggle('nav-below-tool', belowTool); 1539 document.body.classList.toggle('nav-at-tool', !belowTool); 1540 } 1541 1542 function requestNavSync() { 1543 if (navFrame) return; 1544 navFrame = window.requestAnimationFrame(syncNavVisibility); 1545 } 1546 1547 window.addEventListener('scroll', requestNavSync, { passive: true }); 1548 window.addEventListener('resize', requestNavSync, { passive: true }); 1549 syncNavVisibility(); 1550 1551 function setStatus(message, tone) { 1552 if (!status) return; 1553 status.textContent = message; 1554 status.setAttribute('data-tone', tone || 'neutral'); 1555 } 1556 1557 function setGeneratorBusy(isBusy) { 1558 if (generator) generator.setAttribute('aria-busy', String(!!isBusy)); 1559 if (submit) { 1560 submit.disabled = false; 1561 submit.setAttribute('aria-busy', String(!!isBusy)); 1562 } 1563 } 1564 1565 function resizeInput() { 1566 if (!input) return; 1567 input.style.height = 'auto'; 1568 input.style.height = Math.min(input.scrollHeight, 148) + 'px'; 1569 } 1570 1571 function expandComposer() { 1572 if (!generator || generator.classList.contains('is-composer-expanded')) return; 1573 generator.classList.add('is-composer-expanded'); 1574 } 1575 1576 function cleanGeneratedHTML(source) { 1577 var cleaned = String(source || '').replace(/^\s*```(?:html)?\s*/i, ''); 1578 cleaned = cleaned.replace(/\s*```\s*$/i, ''); 1579 var documentStart = cleaned.search(/<!doctype\s+html|<html\b/i); 1580 if (documentStart > 0) cleaned = cleaned.slice(documentStart); 1581 return cleaned; 1582 } 1583 1584 function compiledTailwindCSS(mirrorFrame) { 1585 var mirrorDocument = mirrorFrame && mirrorFrame.contentDocument; 1586 if (!mirrorDocument || !mirrorDocument.head) return ''; 1587 return Array.prototype.slice.call(mirrorDocument.head.querySelectorAll('style')).filter(function (styleNode) { 1588 return !styleNode.hasAttribute('data-tool-mirror-guard') 1589 && !styleNode.hasAttribute('data-tool-stream-style'); 1590 }).map(function (styleNode) { 1591 return String(styleNode.textContent || '').trim(); 1592 }
1592).filter(Boolean).join('\n'); 1593 } 1594 1595 function embedCompiledTailwind(source, compiledCSS) { 1596 var parsed = new DOMParser().parseFromString(source, 'text/html'); 1597 if (!parsed || !parsed.documentElement || !parsed.head || !compiledCSS) return ''; 1598 Array.prototype.slice.call(parsed.head.querySelectorAll('script[src]')).forEach(function (scriptNode) { 1599 var scriptSource = String(scriptNode.getAttribute('src') || ''); 1600 if (scriptSource === TAILWIND_RUNTIME_URL || /tailwindcss/i.test(scriptSource)) scriptNode.remove(); 1601 }); 1602 var compiledStyle = parsed.createElement('style'); 1603 compiledStyle.setAttribute('data-tool-compiled-tailwind', ''); 1604 compiledStyle.textContent = compiledCSS; 1605 parsed.head.insertBefore(compiledStyle, parsed.head.firstChild); 1606 return '<!doctype html>\n' + parsed.documentElement.outerHTML; 1607 } 1608 1609 function prepareStyledPreview(source, mirrorFrame) { 1610 var cleaned = cleanGeneratedHTML(source); 1611 if (!cleaned || !mirrorFrame || !preview) return Promise.resolve(''); 1612 var bounds = (toolStage || preview).getBoundingClientRect(); 1613 syncTextureMirror( 1614 mirrorFrame, 1615 cleaned, 1616 Math.max(320, bounds.width || 960), 1617 Math.max(240, bounds.height || 640) 1618 ); 1619 return new Promise(function (resolve) { 1620 var attempt = 0; 1621 function finishCompiledPreview() { 1622 attempt += 1; 1623 var compiledCSS = compiledTailwindCSS(mirrorFrame); 1624 if (compiledCSS.length > 1000 && attempt >= 3) { 1625 resolve(embedCompiledTailwind(cleaned, compiledCSS)); 1626 return; 1627 } 1628 if (attempt < 50) { 1629 window.setTimeout(finishCompiledPreview, 25); 1630 return; 1631 } 1632 resolve(''); 1633 } 1634 window.requestAnimationFrame(function () { 1635 window.requestAnimationFrame(finishCompiledPreview); 1636 }); 1637 }); 1638 } 1639 1640 function writeAuthoritativePreview(source, mirrorFrame) { 1641 var cleaned = cleanGeneratedHTML(source); 1642 if (!frame || !cleaned) return Promise.resolve(false); 1643 if (cleaned === authoritativePreviewHTML) return authoritativePreviewLoad; 1644 authoritativePreviewHTML = cleaned; 1645 authoritativePreviewRevision += 1; 1646 var previewRevision = authoritativePreviewRevision; 1647 authoritativePreviewLoad = prepareStyledPreview( 1648 cleaned, 1649 mirrorFrame || authoritativeTextureMirrorFrame 1650 ).then(function (styledDocument) { 1651 if (previewRevision !== authoritativePreviewRevision) return false; 1652 if (!styledDocument) { 1653 authoritativePreviewHTML = ''; 1654 return false; 1655 } 1656 return new Promise(function (resolve) { 1657 var settled = false; 1658 function finishPreviewLoad() { 1659 if (settled) return; 1660 settled = true; 1661 window.requestAnimationFrame(function () { 1662 window.requestAnimationFrame(function () { resolve(true); }); 1663 }); 1664 } 1665 frame.addEventListener('load', finishPreviewLoad, {once: true}); 1666 frame.srcdoc = styledDocument; 1667 window.setTimeout(function () { 1668 finishPreviewLoad(); 1669 }, 6000); 1670 }); 1671 }); 1672 return authoritativePreviewLoad; 1673 } 1674 1675 function stageAuthoritativePreview(force) { 1676 if (!frame || !AUTHORITATIVEDATA || !hasRenderableStreamHTML(AUTHORITATIVEDATA)) { 1677 return Promise.resolve(false); 1678 } 1679 if (force) { 1680 if (authoritativePreviewTimer) window.clearTimeout(authoritativePreviewTimer); 1681 authoritativePreviewTimer = 0; 1682 return writeAuthoritativePreview(AUTHORITATIVEDATA, authoritativeTextureMirrorFrame); 1683 } 1684 if (authoritativePreviewTimer) return authoritativePreviewLoad; 1685 authoritativePreviewTimer = window.setTimeout(function () { 1686 authoritativePreviewTimer = 0; 1687 writeAuthoritativePreview(AUTHORITATIVEDATA, authoritativeTextureMirrorFrame); 1688 }, 180); 1689 return authoritativePreviewLoad; 1690 } 1691 1692 function prepareFinalPreview(source) { 1693 FINALDATA = cleanGeneratedHTML(source); 1694 if (!FINALDATA) return Promise.resolve(false); 1695 AUTHORITATIVEDATA = FINALDATA; 1696 return stageAuthoritativePreview(true); 1697 } 1698 1699 function completePreview() { 1700 var cleaned = FINALDATA || cleanGeneratedHTML(AUTHORITATIVEDATA); 1701 if (frame && cleaned && authoritativePreviewHTML !== cleaned) { 1702 writeAuthoritativePreview(cleaned, authoritativeTextureMirrorFrame); 1703 } 1704 generator.classList.add('has-output'); 1705 } 1706 1707 function showPublishedSite(url, title) { 1708 publishedSiteUrl = String(url || '').trim(); 1709 publishedSiteTitle = String(title || 'Interactive tool').trim();
1710 if (!publishedSiteUrl || !sharePanel || !siteLink) return; 1711 siteLink.href = publishedSiteUrl; 1712 siteLink.textContent = publishedSiteUrl; 1713 siteLink.setAttribute('aria-label', 'Open ' + publishedSiteTitle); 1714 sharePanel.hidden = false; 1715 } 1716 1717 function recentToolAge(value) { 1718 var generatedAt = Date.parse(String(value || '')); 1719 if (!Number.isFinite(generatedAt)) return 'recently'; 1720 var seconds = Math.max(0, Math.floor((Date.now() - generatedAt) / 1000)); 1721 if (seconds < 45) return 'just now'; 1722 if (seconds < 3600) return Math.max(1, Math.floor(seconds / 60)) + 'm ago'; 1723 if (seconds < 86400) return Math.max(1, Math.floor(seconds / 3600)) + 'h ago'; 1724 return Math.max(1, Math.floor(seconds / 86400)) + 'd ago'; 1725 } 1726 1727 function safeRecentToolUrl(value) { 1728 try { 1729 var parsed = new URL(String(value || '')); 1730 var hostname = parsed.hostname.toLowerCase(); 1731 if (parsed.protocol !== 'https:' || !(hostname === 'getsupers.com' || hostname.endsWith('.getsupers.com'))) return ''; 1732 return parsed.href; 1733 } catch (_error) { 1734 return ''; 1735 } 1736 } 1737 1738 var recentToolsRendered = 0; 1739 var toolMetricsVisible = false; 1740 var toolGenerationStarted = false; 1741 var recentPanelRevealFrame = 0; 1742 1743 function syncRecentPanelVisibility() { 1744 if (!recentPanel) return; 1745 var shouldReveal = toolGenerationStarted && (recentToolsRendered > 0 || toolMetricsVisible); 1746 if (!shouldReveal) { 1747 if (recentPanelRevealFrame) { 1748 window.cancelAnimationFrame(recentPanelRevealFrame); 1749 recentPanelRevealFrame = 0; 1750 } 1751 recentPanel.classList.remove('is-visible'); 1752 recentPanel.hidden = true; 1753 return; 1754 } 1755 if (!recentPanel.hidden && recentPanel.classList.contains('is-visible')) return; 1756 recentPanel.hidden = false; 1757 recentPanel.classList.remove('is-visible'); 1758 if (recentPanelRevealFrame) window.cancelAnimationFrame(recentPanelRevealFrame); 1759 recentPanelRevealFrame = window.requestAnimationFrame(function () { 1760 recentPanelRevealFrame = 0; 1761 recentPanel.classList.add('is-visible'); 1762 }); 1763 } 1764 1765 function renderRecentTools(items) { 1766 if (!recentPanel || !recentList) return; 1767 while (recentList.firstChild) recentList.removeChild(recentList.firstChild); 1768 var rendered = 0; 1769 var seenQuestions = Object.create(null); 1770 (Array.isArray(items) ? items : []).some(function (item) { 1771 var siteUrl = safeRecentToolUrl(item && item.site_url); 1772 var question = String(item && item.question || '').trim(); 1773 if (!siteUrl || !question || siteUrl === publishedSiteUrl) return false; 1774 var questionKey = question.toLocaleLowerCase().replace(/\s+/g, ' ').trim(); 1775 if (seenQuestions[questionKey]) return false; 1776 seenQuestions[questionKey] = true; 1777 var link = document.createElement('a'); 1778 link.className = 'tool-generator-recent'; 1779 link.href = siteUrl; 1780 link.target = '_blank'; 1781 link.rel = 'noopener noreferrer'; 1782 link.setAttribute('role', 'listitem'); 1783 1784 var questionNode = document.createElement('span'); 1785 questionNode.className = 'tool-generator-recent-question'; 1786 questionNode.textContent = question; 1787 link.appendChild(questionNode); 1788 1789 var titleNode = document.createElement('span'); 1790 titleNode.className = 'tool-generator-recent-title'; 1791 titleNode.textContent = String(item && item.site_title || 'Interactive tool'); 1792 link.appendChild(titleNode); 1793 1794 var metaNode = document.createElement('span'); 1795 metaNode.className = 'tool-generator-recent-meta'; 1796 var impressions = Number(item && item.impressions); 1797 if (item && item.impressions_available && Number.isFinite(impressions)) { 1798 var impressionNode = document.createElement('span'); 1799 impressionNode.className = 'tool-generator-recent-impressions'; 1800 impressionNode.textContent = formatToolMetric(impressions) + (impressions === 1 ? ' impression' : ' impressions'); 1801 metaNode.appendChild(impressionNode); 1802 metaNode.appendChild(document.createTextNode(' · ')); 1803 } 1804 metaNode.appendChild(document.createTextNode('Recently generated by another user · ')); 1805 var timeNode = document.createElement('time'); 1806 timeNode.dateTime = String(item && item.generated_at || ''); 1807 timeNode.textContent = recentToolAge(timeNode.dateTime); 1808 metaNode.appendChild(timeNode); 1809 link.appendChild(metaNode); 1810
1811 recentList.appendChild(link); 1812 rendered += 1; 1813 return rendered >= 10; 1814 }); 1815 recentToolsRendered = rendered; 1816 syncRecentPanelVisibility(); 1817 } 1818 1819 function formatToolMetric(value) { 1820 var count = Math.max(0, Math.floor(Number(value) || 0)); 1821 try { return new Intl.NumberFormat().format(count); } catch (_error) { return String(count); } 1822 } 1823 1824 function renderToolMetrics(payload) { 1825 var sitesAvailable = !!(payload && payload.site_registry_available) && Number.isFinite(Number(payload.total_sites_generated)); 1826 if (totalSitesMetric) { 1827 totalSitesMetric.hidden = !sitesAvailable; 1828 totalSitesMetric.textContent = sitesAvailable ? formatToolMetric(payload.total_sites_generated) + ' sites generated' : ''; 1829 if (sitesAvailable) totalSitesMetric.setAttribute('aria-label', formatToolMetric(payload.total_sites_generated) + ' total sites generated'); 1830 else totalSitesMetric.removeAttribute('aria-label'); 1831 } 1832 toolMetricsVisible = sitesAvailable; 1833 syncRecentPanelVisibility(); 1834 } 1835 1836 var recentToolsRequestInFlight = false; 1837 async function refreshRecentTools() { 1838 if (recentToolsRequestInFlight) return; 1839 recentToolsRequestInFlight = true; 1840 try { 1841 var response = await fetch('https://app.getsupers.com/api/public/tool-generator/recent?limit=12', { 1842 method: 'GET', 1843 headers: {'Accept': 'application/json'}, 1844 cache: 'no-store', 1845 credentials: 'omit' 1846 }); 1847 if (!response.ok) return; 1848 var payload = await response.json(); 1849 renderRecentTools(payload && payload.items); 1850 } catch (_error) { 1851 // The generator remains usable if the public activity feed is temporarily unavailable. 1852 } finally { 1853 recentToolsRequestInFlight = false; 1854 } 1855 } 1856 1857 var toolMetricsRequestInFlight = false; 1858 async function refreshToolMetrics() { 1859 if (toolMetricsRequestInFlight) return; 1860 toolMetricsRequestInFlight = true; 1861 try { 1862 var response = await fetch('https://app.getsupers.com/api/public/tool-generator/metrics', { 1863 method: 'GET', 1864 headers: {'Accept': 'application/json'}, 1865 cache: 'no-store', 1866 credentials: 'omit' 1867 }); 1868 if (!response.ok) return; 1869 renderToolMetrics(await response.json()); 1870 } catch (_error) { 1871 // Live counters are optional and must never interrupt the generator or activity feed. 1872 } finally { 1873 toolMetricsRequestInFlight = false; 1874 } 1875 } 1876 1877 function parseSSEBlock(block) { 1878 var data = block.split('\n').filter(function (line) { 1879 return line.indexOf('data:') === 0; 1880 }).map(function (line) { 1881 return line.slice(5).trim(); 1882 }).join('\n'); 1883 if (!data) return null; 1884 try { return JSON.parse(data); } catch (_error) { return null; } 1885 } 1886 1887 async function consumeToolEventStream(responsePromise, onEvent) { 1888 var response = await responsePromise; 1889 if (!response.ok) { 1890 var failure = {}; 1891 try { failure = await response.json(); } catch (_error) {} 1892 throw new Error(failure.error || 'The tool could not be generated.'); 1893 } 1894 if (!response.body) throw new Error('Streaming is unavailable in this browser.'); 1895 var reader = response.body.getReader(); 1896 var decoder = new TextDecoder(); 1897 var buffer = ''; 1898 while (true) { 1899 var result = await reader.read(); 1900 buffer += decoder.decode(result.value || new Uint8Array(), {stream: !result.done}); 1901 var blocks = buffer.split(/\r?\n\r?\n/); 1902 buffer = blocks.pop() || ''; 1903 for (var blockIndex = 0; blockIndex < blocks.length; blockIndex += 1) { 1904 var event = parseSSEBlock(blocks[blockIndex]); 1905 if (event) await onEvent(event); 1906 } 1907 if (result.done) break; 1908 } 1909 } 1910 1911 function renderQuickQuestions(questions) { 1912 if (!quickPromptsContainer || !quickPromptCount || !Array.isArray(questions)) return; 1913 var unique = []; 1914 var seen = Object.create(null); 1915 questions.forEach(function (question) {
1916 var value = String(question || '').replace(/\s+/g, ' ').trim(); 1917 var key = value.toLowerCase(); 1918 if (!value || seen[key] || unique.length >= quickPromptCount) return; 1919 seen[key] = true; 1920 unique.push(value); 1921 }); 1922 if (unique.length !== quickPromptCount) return; 1923 var buttons = Array.prototype.slice.call( 1924 quickPromptsContainer.querySelectorAll('[data-tool-question]') 1925 ); 1926 unique.forEach(function (question, index) { 1927 var button = buttons[index]; 1928 if (!button) { 1929 button = document.createElement('button'); 1930 button.className = 'tool-generator-prompt'; 1931 button.type = 'button'; 1932 quickPromptsContainer.appendChild(button); 1933 } 1934 if (button.getAttribute('data-tool-question') === question && button.textContent === question) return; 1935 button.setAttribute('data-tool-question', question); 1936 button.textContent = question; 1937 }); 1938 } 1939 1940 async function generateTool(question) { 1941 var generationId = ++generationSequence; 1942 if (activeController) activeController.abort(); 1943 expandComposer(); 1944 var authoritativeController = new AbortController(); 1945 var controller = { 1946 generationId: generationId, 1947 abort: function () { 1948 authoritativeController.abort(); 1949 } 1950 }; 1951 activeController = controller; 1952 function isCurrentGeneration() { 1953 return activeController === controller && generationSequence === generationId; 1954 } 1955 AUTHORITATIVEDATA = ''; 1956 FINALDATA = ''; 1957 if (authoritativePreviewTimer) window.clearTimeout(authoritativePreviewTimer); 1958 authoritativePreviewTimer = 0; 1959 authoritativePreviewHTML = ''; 1960 authoritativePreviewRevision += 1; 1961 authoritativePreviewLoad = Promise.resolve(); 1962 publishedSiteUrl = ''; 1963 publishedSiteTitle = ''; 1964 if (sharePanel) sharePanel.hidden = true; 1965 if (siteLink) { 1966 siteLink.removeAttribute('href'); 1967 siteLink.textContent = ''; 1968 } 1969 var authoritativeMirrorDocument = authoritativeTextureMirrorFrame && authoritativeTextureMirrorFrame.contentDocument; 1970 if (authoritativeMirrorDocument && authoritativeMirrorDocument.body) authoritativeMirrorDocument.body.innerHTML = ''; 1971 generator.classList.add('is-active'); 1972 generator.classList.remove('has-stream', 'has-output', 'texture-ready'); 1973 if (frame) { 1974 frame.srcdoc = '<!doctype html><html><head></head><body></body></html>'; 1975 delete frame.dataset.previewModel; 1976 } 1977 if (webglState) webglState.uploadedTextureVersion = -1; 1978 if (webglState) webglState.uploadedAuthoritativeTextureVersion = -1; 1979 if (webglCanvas) { 1980 delete webglCanvas.dataset.textureWidth; 1981 delete webglCanvas.dataset.textureHeight; 1982 delete webglCanvas.dataset.textureUploaded; 1983 delete webglCanvas.dataset.textureMode; 1984 delete webglCanvas.dataset.assemblyProgress; 1985 delete webglCanvas.dataset.assemblyTarget; 1986 delete webglCanvas.dataset.assemblyPhase; 1987 delete webglCanvas.dataset.authoritativeBlend; 1988 delete webglCanvas.dataset.authoritativeStreamLength; 1989 delete webglCanvas.dataset.authoritativeStreamProgress; 1990 delete webglCanvas.dataset.authoritativeStreamTargetCharacters; 1991 delete webglCanvas.dataset.authoritativeTextureMode; 1992 delete webglCanvas.dataset.authoritativeTextureUploaded; 1993 delete webglCanvas.dataset.authoritativeTextureVersion; 1994 delete webglCanvas.dataset.authoritativeCaptureScale; 1995 delete webglCanvas.dataset.textureSource; 1996 } 1997 textureProgress = 0; 1998 targetTextureProgress = 0; 1999 authoritativeTextureReady = false; 2000 authoritativeTextureMix = 0; 2001 targetAuthoritativeTextureMix = 0; 2002 authoritativeDataProgress = 0; 2003 authoritativeAssemblyStarted = false; 2004 authoritativeTextureVersion = 0; 2005 generator.classList.add('has-stream', 'texture-ready'); 2006 if (webglCanvas) webglCanvas.dataset.textureMode = 'waiting-html'; 2007 toolGenerationStarted = true; 2008 syncRecentPanelVisibility(); 2009 setGeneratorBusy(true); 2010 setStatus('Waiting for the first streamed tokens...'); 2011 if (window.posthog && typeof window.posthog.capture === 'function') { 2012 window.posthog.capture('homepage_tool_generation_started'); 2013 } 2014 2015 try { 2016 var authoritativeRequest = fetch('https://app.getsupers.com/api/public/tool-generator', { 2017 method: 'POST', 2018 headers: {'Accept': 'text/event-stream', 'Content-Type': 'application/json'}, 2019 body: JSON.stringify({question: question, lane: 'authoritative'}), 2020 signal: authoritativeController.signal 2021 }); 2022 2023 var authoritativeTask = consumeToolEventStream(authoritativeRequest, async function (event) { 2024 if (!isCurrentGeneration()) return; 2025 if (event.type === 'html_delta' || event.type === 'html_background_delta') { 2026 AUTHORITATIVEDATA += String(event.html || ''); 2027 streamAuthoritativeInParallel(); 2028 } else if (event.type === 'final_html') { 2029 AUTHORITATIVEDATA = String(event.html || AUTHORITATIVEDATA || ''); 2030 streamAuthoritativeInParallel(); 2031 await prepareFinalPreview(AUTHORITATIVEDATA); 2032 frame.dataset.previewModel = 'gemini-3.7-flash'; 2033 } else if (event.type === 'status') { 2034 setStatus(event.message || 'Building the live experience...'); 2035 } else if (event.type === 'error') { 2036 throw new Error(event.message || 'The tool could not be generated.'); 2037 } else if (event.type === 'preview_ready') { 2038 await authoritativePreviewLoad; 2039 if (!isCurrentGeneration()) return; 2040 completePreview(); 2041 setStatus(event.message || 'Your tool is ready. Publishing its permanent share link...'); 2042 if (window.posthog && typeof window.posthog.capture === 'function') { 2043 window.posthog.capture('homepage_tool_preview_ready'); 2044 } 2045 } else if (event.type === 'next_questions') { 2046 renderQuickQuestions(event.questions); 2047 if (window.posthog && typeof window.posthog.capture === 'function') { 2048 window.posthog.capture('homepage_tool_next_questions_ready'); 2049 } 2050 } else if (event.type === 'publish_error') { 2051 completePreview(); 2052 setStatus(event.message || 'Your tool is ready, but its permanent share link could not be published.'); 2053 } else if (event.type === 'done') { 2054 completePreview(); 2055 showPublishedSite(event.site_url, event.site_title); 2056 refreshRecentTools(); 2057 setStatus('Open the permanent link below to share your tool.'); 2058 if (window.posthog && typeof window.posthog.capture === 'function') { 2059 window.posthog.capture('homepage_tool_generation_completed'); 2060 } 2061 } 2062 }); 2063 2064 await authoritativeTask; 2065 if (isCurrentGeneration()) completePreview(); 2066 } catch (error) {
2067 if (error && error.name === 'AbortError') return; 2068 if (!isCurrentGeneration()) return; 2069 setStatus((error && error.message) || 'The tool could not be generated. Please try again.', 'error'); 2070 if (window.posthog && typeof window.posthog.capture === 'function') { 2071 window.posthog.capture('homepage_tool_generation_failed'); 2072 } 2073 } finally { 2074 if (activeController === controller) { 2075 setGeneratorBusy(false); 2076 activeController = null; 2077 } 2078 } 2079 } 2080 2081 if (shareButton) { 2082 shareButton.addEventListener('click', async function () { 2083 if (!publishedSiteUrl) return; 2084 try { 2085 if (navigator.share) { 2086 await navigator.share({ 2087 title: publishedSiteTitle || 'Interactive tool', 2088 text: 'Try this interactive tool', 2089 url: publishedSiteUrl 2090 }); 2091 return; 2092 } 2093 if (navigator.clipboard && navigator.clipboard.writeText) { 2094 await navigator.clipboard.writeText(publishedSiteUrl); 2095 setStatus('Share link copied.'); 2096 return; 2097 } 2098 window.open(publishedSiteUrl, '_blank', 'noopener'); 2099 } catch (error) { 2100 if (error && error.name === 'AbortError') return; 2101 setStatus('Open the permanent link below to share your tool.', 'error'); 2102 } 2103 }); 2104 } 2105 2106 if (input) { 2107 input.addEventListener('input', function () { 2108 resizeInput(); 2109 if (String(input.value || '').trim()) expandComposer(); 2110 }); 2111 input.addEventListener('keydown', function (event) { 2112 if (event.key === 'Enter' && !event.shiftKey) { 2113 event.preventDefault(); 2114 if (form.requestSubmit) form.requestSubmit(); 2115 else submit.click(); 2116 } 2117 }); 2118 } 2119 if (form) { 2120 form.addEventListener('submit', function (event) { 2121 event.preventDefault(); 2122 var question = String(input.value || '').trim(); 2123 if (!question) return; 2124 generateTool(question); 2125 }); 2126 } 2127 if (quickPromptsContainer) { 2128 quickPromptsContainer.addEventListener('click', function (event) { 2129 var target = event.target; 2130 var button = target && target.closest ? target.closest('[data-tool-question]') : null; 2131 if (!button || !quickPromptsContainer.contains(button) || !input) return; 2132 expandComposer(); 2133 input.value = String(button.getAttribute('data-tool-question') || '').trim(); 2134 resizeInput(); 2135 if (form && form.requestSubmit) form.requestSubmit(); 2136 else if (submit) submit.click(); 2137 }); 2138 } 2139 refreshRecentTools(); 2140 refreshToolMetrics(); 2141 window.setInterval(refreshRecentTools, 10000); 2142 window.setInterval(refreshToolMetrics, 10000); 2143 2144 if (iosSuggestion && document.documentElement.classList.contains('is-iphone-browser')) { 2145 var dismissed = false; 2146 try { dismissed = window.sessionStorage.getItem('super_ios_suggestion_dismissed') === '1'; } catch (_error) {} 2147 if (!dismissed) window.setTimeout(function () { 2148 iosSuggestion.classList.add('is-visible'); 2149 var appLink = iosSuggestion.querySelector('.ios-app-suggestion-link'); 2150 if (!appLink || document.visibilityState === 'hidden') return; 2151 try { 2152 if (window.sessionStorage.getItem('super_ios_app_auto_opened') === '1') return; 2153 window.sessionStorage.setItem('super_ios_app_auto_opened', '1'); 2154 } catch (_error) { 2155 // Keep the manual link when we cannot persist loop protection. 2156 return; 2157 } 2158 window.location.assign(appLink.href); 2159 }, 1100); 2160 } 2161 if (iosClose) { 2162 iosClose.addEventListener('click', function () { 2163 iosSuggestion.classList.remove('is-visible'); 2164 try { window.sessionStorage.setItem('super_ios_suggestion_dismissed', '1'); } catch (_error) {} 2165 }); 2166 } 2167 })(); 2168 </script>
2168 2169
2169<script> 2170 (function () { 2171 var links = Array.from(document.querySelectorAll('[data-tier-checkout]')); 2172 if (!links.length) return; 2173 fetch('https://app.getsupers.com/platform/subscription-plans', { credentials: 'omit' }) 2174 .then(function (response) { 2175 if (!response.ok) throw new Error('Subscription plans unavailable'); 2176 return response.json(); 2177 }) 2178 .then(function (payload) { 2179 var tiers = Array.isArray(payload && payload.tiers) ? payload.tiers : []; 2180 links.forEach(function (link) { 2181 var tierId = String(link.getAttribute('data-tier-checkout') || ''); 2182 var tier = tiers.find(function (candidate) { return String(candidate && candidate.id || '') === tierId; }); 2183 if (!tier || !tier.checkout_url) return; 2184 link.href = String(tier.checkout_url); 2185 link.target = '_blank'; 2186 link.rel = 'noopener'; 2187 link.removeAttribute('aria-disabled'); 2188 }); 2189 }) 2190 .catch(function () { 2191 links.forEach(function (link) { link.setAttribute('aria-disabled', 'true'); }); 2192 }); 2193 })(); 2194 </script>
vendor: 1 bytes, line 2194
2194
2195<script type="module" src="https://static.cloudflareinsights.com/beacon.min.js/v31edd6df95cf4e85bb4c19e7a9bdbcba1788362987495" integrity="sha512-iIg7k2xntmwu6/uSb5tpc/hySgZc4eoL31yB29W6tJFo2akwjPWcEqnCEdJvGexCL0KEQwVYv5BlowfhVz26hg==" data-cf-beacon='{"version":"2024.11.0","token":"dc74461fe2b14d1a9885faa777d4bb96","r":1,"spa":2}' crossorigin="anonymous"></script>
2195 2196</body> 2197</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.