1import{b as t,j as e,X as ue,be as we,_ as xe,r as Te,aA as Le,ab as Ee,bB as De,M as Me,z as Ne,e as qe,U as Fe,bS as Re,k as Ge,D as je,bT as Be,a4 as re,b7 as pe,a8 as We,bU as Ve,G as Oe,bV as _e,s as Ue,q as me,aS as Ke,a1 as m,F as he,bp as ge,L as be,Y as fe,aF as He,aH as ne,E as se,al as ve,ao as $e,b1 as Qe,b2 as Ze,a_ as Ye,a$ as Je,b0 as Xe,b4 as ea,b5 as aa,bW as ia,b6 as ta,aG as na,b8 as oa,bX as ra,l as sa,i as la,aI as da,bY as ca,bm as ua}from"./ui.052bf7f7.js";import{r as g,b as ee}from"./react-vendor.edf7d6ed.js";import{u as pa}from"./state.f05e9c2e.js";import{b as ke,L as oe,a as ma,N as ha}from"./router.0147466c.js";import{e as ye,d as J,C as y,Y as M,Z as V}from"./index.8cd13127.js";import{L as ga}from"./LanguageSwitcher.6172f4a3.js";import{a as Se,l as Ae,e as ba}from"./public-manifest.578df284.js";import{S as le,o as de,a as ce}from"./one-light.b30fcb94.js";import{M as fa}from"./index.40ec4192.js";import{r as va}from"./index.323725fd.js";import{r as ka}from"./index.9e97355c.js";import{u as ya}from"./useSEO.b7f15107.js";import"./vite-runtime.db40d06e.js";import"./content-alternates.beb0bc6c.js";function Sa(){const{language:a,setLanguage:n}=ye(),i=g.useCallback(s=>{n(s)},[n]);return[a,i]}function O(a,n){if(a)return a[n]??a.en??a.it??Object.values(a)[0]}const Pe={search:{it:"Cerca nella documentazione...",en:"Search documentation...",es:"Buscar en la documentación...",fr:"Rechercher dans la documentation...",de:"Dokumentation durchsuchen...",zh:"æç´¢ææ¡£..."},onThisPage:{it:"In questa pagina",en:"On this page",es:"En esta página",fr:"Sur cette page",de:"Auf dieser Seite",zh:"æ¬é¡µå
容"}},I="w-4 h-4",$={it:"Nuovo",en:"New",es:"Nuevo",fr:"Nouveau",de:"Neu",zh:"æ°"},Ie=[{id:"introduction",label:{it:"Introduzione",en:"Introduction",es:"Introducción",fr:"Introduction",de:"Einführung",zh:"ç®ä»"},icon:e(Ee,{className:I}),items:[{slug:"welcome",label:{it:"Benvenuto",en:"Welcome",es:"Bienvenido",fr:"Bienvenue",de:"Willkommen",zh:"欢è¿"}},{slug:"getting-started",label:{it:"Guida Rapida",en:"Getting Started",es:"GuÃa rápida",fr:"Démarrage",de:"Erste Schritte",zh:"å¿«éå¼å§"}}]},{id:"project-types",label:{it:"Tipi di Progetto",en:"Project Types",es:"Tipos de proyecto",fr:"Types de projet",de:"Projekttypen",zh:"项ç®ç±»å"},icon:e(De,{className:I}),items:[{slug:"project-types",label:{it:"Web app vs Web Platform",en:"Web app vs Web Platform",es:"Web app vs Web Platform",fr:"Web app vs Web Platform",de:"Web app vs Web Platform",zh:"Web app å¯¹æ¯ Web Platform"},badge:$}]},{id:"ai-chat",label:{it:"AI Chat",en:"AI Chat",es:"Chat IA",fr:"Chat IA",de:"KI-Chat",zh:"AI è天"},icon:e(Me,{className:I}),items:[{slug:"prompting",label:{it:"Prompting",en:"Prompting",es:"Prompting",fr:"Prompting",de:"Prompting",zh:"æ示æå·§"}},{slug:"modes",label:{it:"Selettore del modello",en:"Model picker",es:"Selector de modelo",fr:"Sélecteur de modèle",de:"Modellauswahl",zh:"模åéæ©å¨"}},{slug:"abort-queue",label:{it:"Coda & Annulla",en:"Abort & Queue",es:"Cola y cancelar",fr:"File & Annuler",de:"Warteschlange & Abbruch",zh:"éåä¸ä¸æ¢"}}]},{id:"models",label:{it:"Modelli",en:"Models",es:"Modelos",fr:"Modèles",de:"Modelle",zh:"模å"},icon:e(Ne,{className:I}),items:[{slug:"models",label:{it:"Modelli disponibili",en:"Available models",es:"Modelos disponibles",fr:"Modèles disponibles",de:"Verfügbare Modelle",zh:"å¯ç¨æ¨¡å"},badge:$}]},{id:"ai-agents",label:{it:"AI Agents",en:"AI Agents",es:"Agentes IA",fr:"Agents IA",de:"KI-Agenten",zh:"AI æºè½ä½"},icon:e(qe,{className:I}),items:[{slug:"ai-agents",label:{it:"AI Agents del progetto",en:"Project AI Agents",es:"Agentes IA del proyecto",fr:"Agents IA du projet",de:"KI-Agenten des Projekts",zh:"é¡¹ç® AI æºè½ä½"},badge:$},{slug:"ai-knowledge-base",label:{it:"Knowledge base (RAG)",en:"Knowledge base (RAG)",es:"Base de conocimiento (RAG)",fr:"Base de connaissances (RAG)",de:"Wissensdatenbank (RAG)",zh:"ç¥è¯åº (RAG)"},badge:$}]},{id:"team-office",label:{it:"Team & Ufficio 3D",en:"Team & 3D Office",es:"Equipo y oficina 3D",fr:"Ãquipe & bureau 3D",de:"Team & 3D-Büro",zh:"å¢éä¸ 3D åå
¬å®¤"},icon:e(Fe,{className:I}),items:[{slug:"team-office",label:{it:"Ufficio 3D & AI Agents",en:"3D Office & AI Agents",es:"Oficina 3D y agentes IA",fr:"Bureau 3D & agents IA",de:"3D-Büro & KI-Agenten",zh:"3D åå
¬å®¤ä¸ AI æºè½ä½"},badge:$}]},{id:"templates",label:{it:"Templates",en:"Templates",es:"Plantillas",fr:"Templates",de:"Vorlagen",zh:"模æ¿"},icon:e(Re,{className:I}),items:[{slug:"product-templates",label:{it:"Template Prodotto",en:"Product Templates",es:"Plantillas de producto",fr:"Templates produit",de:"Produktvorlagen",zh:"产å模æ¿"}},{slug:"feature-templates",label:{it:"Template Feature",en:"Feature Templates",es:"Plantillas de función",fr:"Templates de fonctionnalité",de:"Funktionsvorlagen",zh:"åè½æ¨¡æ¿"}}]},{id:"preview-deploy",label:{it:"Preview & Deploy",en:"Preview & Deploy",es:"Vista previa y deploy",fr:"Aperçu & déploiement",de:"Vorschau & Deploy",zh:"é¢è§ä¸é¨ç½²"},icon:e(Ge,{className:I}),items:[{slug:"preview",label:{it:"Anteprima",en:"Preview",es:"Vista previa",fr:"Aperçu",de:"Vorschau",zh:"é¢è§"}},{slug:"production",label:{it:"Produzione",en:"Production",es:"Producción",fr:"Production",de:"Produktion",zh:"ç产ç¯å¢"}},{slug:"hot-reload",label:{it:"Hot Reload",en:"Hot Reload",es:"Hot Reload",fr:"Hot Reload",de:"Hot Reload",zh:"çéè½½"}}]},{id:"database",label:{it:"Database",en:"Database",es:"Base de datos",fr:"Base de données",de:"Datenbank",zh:"æ°æ®åº"},icon:e(je,{className:I}),items:[{slug:"neondb",label:{it:"NeonDB",en:"NeonDB",es:"NeonDB",fr:"NeonDB",de:"NeonDB",zh:"NeonDB"}}
1,{slug:"sql-queries",label:{it:"Query SQL",en:"SQL Queries",es:"Consultas SQL",fr:"Requêtes SQL",de:"SQL-Abfragen",zh:"SQL æ¥è¯¢"}}]},{id:"env-vars",label:{it:"Variabili d'Ambiente",en:"Environment Variables",es:"Variables de entorno",fr:"Variables d'environnement",de:"Umgebungsvariablen",zh:"ç¯å¢åé"},icon:e(Be,{className:I}),items:[{slug:"env-vars",label:{it:"Variabili",en:"Variables",es:"Variables",fr:"Variables",de:"Variablen",zh:"åé"}},{slug:"secrets",label:{it:"Secrets",en:"Secrets",es:"Secretos",fr:"Secrets",de:"Secrets",zh:"å¯é¥"}}]},{id:"payments",label:{it:"Pagamenti",en:"Payments",es:"Pagos",fr:"Paiements",de:"Zahlungen",zh:"æ¯ä»"},icon:e(re,{className:I}),items:[{slug:"payments",label:{it:"Accettare Pagamenti",en:"Accept Payments",es:"Aceptar pagos",fr:"Accepter les paiements",de:"Zahlungen annehmen",zh:"æ¥åæ¯ä»"}},{slug:"payments-golive",label:{it:"Andare Live",en:"Going Live",es:"Pasar a producción",fr:"Passer en live",de:"Live gehen",zh:"æ£å¼ä¸çº¿"}}]},{id:"image-upload",label:{it:"Upload Immagini",en:"Image Upload",es:"Subir imágenes",fr:"Upload d'images",de:"Bild-Upload",zh:"å¾çä¸ä¼ "},icon:e(pe,{className:I}),items:[{slug:"image-upload",label:{it:"Upload Immagini",en:"Image Upload",es:"Subir imágenes",fr:"Upload d'images",de:"Bild-Upload",zh:"å¾çä¸ä¼ "}},{slug:"media",label:{it:"Media",en:"Media",es:"Media",fr:"Média",de:"Medien",zh:"åªä½"}}]},{id:"email",label:{it:"Email (Resend)",en:"Email (Resend)",es:"Email (Resend)",fr:"E-mail (Resend)",de:"E-Mail (Resend)",zh:"é®ä»¶ (Resend)"},icon:e(We,{className:I}),items:[{slug:"email-integration",label:{it:"Integrazione Email",en:"Email Integration",es:"Integración de email",fr:"Intégration e-mail",de:"E-Mail-Integration",zh:"é®ä»¶éæ"}}]},{id:"payments-stripe",label:{it:"Pagamenti (Stripe)",en:"Payments (Stripe)",es:"Pagos (Stripe)",fr:"Paiements (Stripe)",de:"Zahlungen (Stripe)",zh:"æ¯ä» (Stripe)"},icon:e(re,{className:I}),items:[{slug:"stripe-integration",label:{it:"Integrazione Stripe",en:"Stripe Integration",es:"Integración de Stripe",fr:"Intégration Stripe",de:"Stripe-Integration",zh:"Stripe éæ"}}]},{id:"github",label:{it:"GitHub",en:"GitHub",es:"GitHub",fr:"GitHub",de:"GitHub",zh:"GitHub"},icon:e(Ve,{className:I}),items:[{slug:"github-integration",label:{it:"Integrazione GitHub",en:"GitHub Integration",es:"Integración de GitHub",fr:"Intégration GitHub",de:"GitHub-Integration",zh:"GitHub éæ"}}]},{id:"custom-domains",label:{it:"Domini Personalizzati",en:"Custom Domains",es:"Dominios personalizados",fr:"Domaines personnalisés",de:"Eigene Domains",zh:"èªå®ä¹åå"},icon:e(Oe,{className:I}),items:[{slug:"custom-domains",label:{it:"Domini Personalizzati",en:"Custom Domains",es:"Dominios personalizados",fr:"Domaines personnalisés",de:"Eigene Domains",zh:"èªå®ä¹åå"}}]},{id:"billing",label:{it:"Abbonamenti & Crediti",en:"Billing & Credits",es:"Facturación y créditos",fr:"Facturation & crédits",de:"Abrechnung & Credits",zh:"è´¦åä¸ç§¯å"},icon:e(_e,{className:I}),items:[{slug:"billing",label:{it:"Fatturazione",en:"Billing",es:"Facturación",fr:"Facturation",de:"Abrechnung",zh:"è´¦å"}},{slug:"credits",label:{it:"Crediti",en:"Credits",es:"Créditos",fr:"Crédits",de:"Credits",zh:"积å"}},{slug:"plans",label:{it:"Piani",en:"Plans",es:"Planes",fr:"Offres",de:"Pläne",zh:"å¥é¤"}}]},{id:"changelog",label:{it:"Changelog",en:"Changelog",es:"Changelog",fr:"Changelog",de:"Changelog",zh:"æ´æ°æ¥å¿"},icon:e(Ue,{className:I}),items:[{slug:"changelog",label:{it:"Changelog",en:"Changelog",es:"Changelog",fr:"Changelog",de:"Changelog",zh:"æ´æ°æ¥å¿"}}]}];function Aa(){return Ie.flatMap(a=>a.items.map(n=>n.slug))}const Pa=({section:a,lang:n,currentSlug:i,onNavigate:s})=>{const o=a.items.some(f=>f.slug===i),[r,c]=g.useState(o),{pathname:h}=ke(),v=g.useCallback(()=>c(f=>!f),[]);return t("div",{className:"mb-1",children:[t("button",{onClick:v,className:` 2 flex items-center gap-2.5 w-full px-3 py-2 rounded-lg text-sm font-medium transition-colors 3 ${o?"text-gray-900 dark:text-white bg-gray-100 dark:bg-zinc-800/60":"text-gray-500 dark:text-zinc-400 hover:text-gray-700 dark:hover:text-zinc-200 hover:bg-gray-100 dark:hover:bg-zinc-800/40"} 4 `,children:[e("span",{className:o?"text-blue-500 dark:text-blue-400":"text-gray-400 dark:text-zinc-500",children:a.icon}),e("span",{className:"flex-1 text-left truncate",children:O(a.label,n)}),r?e(me,{className:"w-3.5 h-3.5 text-gray-400 dark:text-zinc-500"}):e(Ke,{className:"w-3.5 h-3.5 text-gray-400 dark:text-zinc-500"})]}),r&&e("div",{className:"ml-5 pl-3 border-l border-gray-200 dark:border-zinc-800 mt-1 space-y-0.5",children:a.items.map(f=>{const C=f.slug===i;return t(oe,{to:Se(ba(f.slug),Ae(h)),onClick:s,className:` 5 flex items-center gap-2 px-3 py-1.5 rounded-md text-[13px] transition-colors
6 ${C?"text-blue-600 dark:text-blue-400 bg-blue-50 dark:bg-blue-500/10 font-medium":"text-gray-500 dark:text-zinc-400 hover:text-gray-700 dark:hover:text-zinc-200 hover:bg-gray-100 dark:hover:bg-zinc-800/40"} 7 `,children:[e("span",{className:"flex-1 truncate",children:O(f.label,n)}),f.badge&&e("span",{className:"flex-shrink-0 rounded-full bg-emerald-100 px-1.5 py-[1px] text-[9px] font-semibold uppercase tracking-wide text-emerald-700 dark:bg-emerald-500/15 dark:text-emerald-300",children:O(f.badge,n)})]},f.slug)})})]})},Ia=({items:a,lang:n})=>a.length===0?null:t("nav",{className:"hidden xl:block w-56 flex-shrink-0 sticky top-20 self-start max-h-[calc(100vh-6rem)] overflow-y-auto scrollbar-thin",children:[e("p",{className:"text-xs font-semibold text-gray-400 dark:text-zinc-500 uppercase tracking-wider mb-3 px-1",children:O(Pe.onThisPage,n)}),e("ul",{className:"space-y-1 text-[13px]",children:a.map(i=>e("li",{children:e("a",{href:`#${i.id}`,className:` 8 block py-1 transition-colors hover:text-gray-700 dark:hover:text-zinc-200 9 ${i.level===3?"pl-4 text-gray-400 dark:text-zinc-500 hover:text-gray-600 dark:hover:text-zinc-300":"pl-1 text-gray-500 dark:text-zinc-400"} 10 `,children:i.text})},i.id))})]}),Ca=({children:a,lang:n,currentSlug:i,toc:s=[]})=>{const[o,r]=g.useState(!1),c=ke(),h=g.useCallback(()=>r(!1),[]);return t("div",{className:"min-h-screen bg-white dark:bg-zinc-950 text-gray-900 dark:text-zinc-100 transition-colors",children:[t("header",{className:"sticky top-0 z-50 h-14 bg-white/80 dark:bg-zinc-950/80 backdrop-blur-md border-b border-gray-200 dark:border-zinc-800/60 flex items-center px-4 lg:px-6 gap-4",children:[e("button",{onClick:()=>r(v=>!v),className:"lg:hidden text-gray-500 dark:text-zinc-400 hover:text-gray-900 dark:hover:text-white transition-colors","aria-label":"Toggle menu",children:o?e(ue,{className:"w-5 h-5"}):e(we,{className:"w-5 h-5"})}),t(oe,{to:Se("/docs",Ae(c.pathname)),className:"flex items-center gap-2.5 flex-shrink-0",children:[e("div",{className:"w-7 h-7 rounded-lg bg-gradient-to-br from-blue-500 to-violet-600 flex items-center justify-center",children:e("span",{className:"text-white font-bold text-xs",children:"CB"})}),e("span",{className:"text-sm font-semibold text-gray-900 dark:text-white hidden sm:inline",children:"Coderblock"}),e("span",{className:"text-xs text-gray-400 dark:text-zinc-500 hidden sm:inline",children:"Docs"})]}),e("div",{className:"hidden md:flex flex-1 max-w-md mx-auto",children:t("div",{className:"flex items-center gap-2 w-full px-3 py-1.5 rounded-lg bg-gray-50 dark:bg-zinc-900 border border-gray-200 dark:border-zinc-800 text-gray-400 dark:text-zinc-500 text-sm cursor-not-allowed",children:[e(xe,{className:"w-3.5 h-3.5"}),e("span",{children:O(Pe.search,n)}),e("kbd",{className:"ml-auto text-[10px] bg-gray-100 dark:bg-zinc-800 border border-gray-300 dark:border-zinc-700 px-1.5 py-0.5 rounded font-mono text-gray-400 dark:text-zinc-500",children:"âK"})]})}),t("div",{className:"flex items-center gap-2 ml-auto",children:[e(ga,{variant:"flag"}),t(oe,{to:"/apps",className:"hidden sm:flex items-center gap-1.5 text-xs text-gray-500 dark:text-zinc-400 hover:text-gray-700 dark:hover:text-zinc-200 transition-colors px-2 py-1 rounded-lg hover:bg-gray-100 dark:hover:bg-zinc-800/60",children:[e(Te,{className:"w-3.5 h-3.5"}),"App"]}),t("a",{href:"https://coderblock.ai",target:"_blank",rel:"noopener noreferrer",className:"hidden sm:flex items-center gap-1 text-xs text-gray-400 dark:text-zinc-500 hover:text-gray-600 dark:hover:text-zinc-300 transition-colors",children:["coderblock.ai",e(Le,{className:"w-3 h-3"})]})]})]}),t("div",{className:"flex",children:[o&&e("div",{className:"fixed inset-0 z-40 bg-black/60 lg:hidden",onClick:h}),e("aside",{className:` 11 fixed lg:sticky top-14 z-40 h-[calc(100vh-3.5rem)] w-72 bg-white dark:bg-zinc-950 border-r border-gray-200 dark:border-zinc-800/60 12 overflow-y-auto scrollbar-thin transition-transform duration-200 13 lg:translate-x-0 lg:flex-shrink-0 14 ${o?"translate-x-0":"-translate-x-full"} 15 `,children:e("div",{className:"px-3 py-4 space-y-0.5",children:Ie.map(v=>e(Pa,{section:v,lang:n,currentSlug:i,onNavigate:h},v.id))})}),e("main",{className:"flex-1 min-w-0 px-4 sm:px-8 lg:px-12 py-8 lg:py-10",children:t("div",{className:"flex gap-10 max-w-5xl mx-auto",children:[e("article",{className:"flex-1 min-w-0",children:a}),e(Ia,{items:s,lang:n})]})})]})]})};function A(){const{language:a}=ye();return n=>
15n[a]??n.en??n.it??Object.values(n)[0]??""}const za="[--bg:#f8fafc] [--card:#ffffff] [--line:#d8dee9] [--ink:#0f172a] [--muted:#64748b] [--blue:#2563eb] [--violet:#7c3aed] [--green:#16a34a] [--amber:#d97706] [--pink:#db2777] [--red:#dc2626]",wa="dark:[--bg:#0d1220] dark:[--card:#151b2c] dark:[--line:#28324b] dark:[--ink:#e6edff] dark:[--muted:#93a2c4] dark:[--blue:#60a5fa] dark:[--violet:#a78bfa] dark:[--green:#34d399] dark:[--amber:#fbbf24] dark:[--pink:#f472b6] dark:[--red:#f87171]",P=({caption:a,viewBox:n="0 0 880 300",children:i})=>t("figure",{className:`my-6 ${za} ${wa}`,children:[e("div",{className:"rounded-xl border border-gray-200 dark:border-zinc-800 bg-white dark:bg-zinc-900/40 overflow-hidden",children:t("svg",{viewBox:n,className:"block w-full h-auto",style:{fontFamily:'system-ui, -apple-system, "Segoe UI", Roboto, sans-serif'},children:[e("rect",{x:"0",y:"0",width:"100%",height:"100%",fill:"var(--bg)"}),i]})}),a?e("figcaption",{className:"block text-center text-xs text-gray-500 dark:text-zinc-400 mt-2.5 italic px-4",children:a}):null]}),S=({x:a,y:n,w:i,h:s,accent:o,delay:r=0,children:c})=>t(m.g,{initial:{opacity:0,y:8},animate:{opacity:1,y:0},transition:{duration:.5,delay:r,ease:"easeOut"},children:[e("rect",{x:a,y:n,width:i,height:s,rx:14,fill:"var(--card)",stroke:o??"var(--line)",strokeWidth:o?2:1.5}),c]}),E=({d:a,color:n="var(--blue)",dur:i=1})=>e(m.path,{d:a,stroke:n,strokeWidth:2.5,fill:"none",strokeDasharray:"6 10",animate:{strokeDashoffset:[0,-32]},transition:{repeat:1/0,duration:i,ease:"linear"}}),Y=({cx:a,cy:n,r:i=6,color:s="var(--blue)"})=>e(m.circle,{cx:a,cy:n,r:i,fill:s,animate:{opacity:[.5,1,.5],scale:[.9,1.15,.9]},transition:{repeat:1/0,duration:2.2,ease:"easeInOut"},style:{transformOrigin:`${a}px ${n}px`}}),l="var(--ink)",p="var(--muted)",d="var(--blue)",z="var(--violet)",u="var(--green)",w="var(--amber)",xa="var(--pink)",Ta=()=>{const a=A(),n=[a({it:"Descrivi",en:"Describe",es:"Describe",fr:"Décris",de:"Beschreiben",zh:"æè¿°"}),a({it:"L'AI genera",en:"AI builds",es:"La IA crea",fr:"L'IA génère",de:"KI baut",zh:"AI çæ"}),a({it:"Anteprima",en:"Live preview",es:"Vista previa",fr:"Aperçu",de:"Vorschau",zh:"å®æ¶é¢è§"}),a({it:"Itera",en:"Iterate",es:"Itera",fr:"Itère",de:"Iterieren",zh:"è¿ä»£"}),a({it:"Pubblica",en:"Publish",es:"Publica",fr:"Publie",de:"Publizieren",zh:"åå¸"})],i=[30,220,410,600,762],s=[120,120,120,120,90];return t(P,{caption:a({it:"Il ciclo di Coderblock: descrivi, l'AI genera, vedi l'anteprima dal vivo, iteri e pubblichi.",en:"The Coderblock loop: describe, the AI builds, you see a live preview, iterate and publish.",es:"El ciclo de Coderblock: describe, la IA crea, ves una vista previa en vivo, iteras y publicas.",fr:"La boucle Coderblock : décris, l'IA génère, tu vois un aperçu en direct, itère et publie.",de:"Der Coderblock-Zyklus: beschreiben, die KI baut, Live-Vorschau, iterieren und publizieren.",zh:"Coderblock 循ç¯ï¼æè¿°ãAI çæãå®æ¶é¢è§ãè¿ä»£å¹¶åå¸ã"}),children:[e(E,{d:"M150 120 H210 M340 120 H400 M530 120 H590"}),e("path",{d:"M665 175 C665 245, 85 245, 85 175",stroke:"var(--line)",strokeWidth:2.5,fill:"none",strokeDasharray:"7 9"}),n.map((o,r)=>t(S,{x:i[r],y:70,w:s[r],h:100,delay:.1+r*.35,accent:r===4?u:void 0,children:[e("circle",{cx:i[r]+s[r]/2,cy:110,r:16,fill:[d,z,d,d,u][r],opacity:.18}),e("circle",{cx:i[r]+s[r]/2,cy:110,r:7,fill:[d,z,d,d,u][r]}),e("text",{x:i[r]+s[r]/2,y:192,fontSize:13,fontWeight:700,fill:l,textAnchor:"middle",children:o})]},r)),e(Y,{cx:180,cy:120})]})},La=()=>{const a=A(),n=[a({it:"Prodotto",en:"Product",es:"Producto",fr:"Produit",de:"Produkt",zh:"åå"}),a({it:"Carrello",en:"Cart",es:"Carrito",fr:"Panier",de:"Warenkorb",zh:"è´ç©è½¦"}),a({it:"Checkout sicuro",en:"Secure checkout",es:"Pago seguro",fr:"Paiement sécurisé",de:"Sicherer Checkout",zh:"å®å
¨ç»è´¦"}),a({it:"Pagato",en:"Paid",es:"Pagado",fr:"Payé",de:"Bezahlt",zh:"å·²æ¯ä»"})],i=[40,252,492,702];return t(P,{caption:a({it:"Il percorso di un pagamento: dal prodotto al carrello, al checkout sicuro con Stripe, fino al pagamento riuscito.",en:"A payment's journey: from product to cart, to a secure Stripe checkout, to a successful payment.",es:"El recorrido de un pago: del producto al carrito, al pago seguro con Stripe, hasta el pago exitoso.",fr:"Le parcours d'un paiement : du produit au panier, au paiement sécurisé Stripe, jusqu'au paiement réussi.",de:"Der Weg einer Zahlung: vom Produkt zum Warenkorb, zum sicheren Stripe-Checkout, bis zur erfolgreichen Zahlung.",zh:"ä¸æ¬¡æ¯ä»çæ
ç¨ï¼ä»ååå°è´ç©è½¦ï¼å° Stripe å®å
¨ç»è´¦ï¼ç´è³æ¯ä»æåã"}),children:[e(E,{d:"M190 130 H250 M430 130 H490 M670 130 H700"}),n.map((s,o)=>e(S,{x:i[o],y:80,w:o===3?138:150,h:100,delay:.15+o*.4,accent:o===3?u:void 0,children:e("text",{x:i[o]+(o===3?69:75),y:200,fontSize:13,fontWeight:700,fill:l,textAnchor:"middle",children:s})},o)),e("g",{transform:"translate(115,130)",children:e("rect",{x:-24,y:-26,width:48,height:30,rx:6,fill:d,opacity:.7})}),e("text",{x:567,y:120,fontSize:14,fontWeight:700,fill:"#fff",textAnchor:"middle",children:e("tspan",{children:"Stripe"})}),e("rect",{x:516,y:102,width:102,height:30,rx:6,fill:z,opacity:.9}),e("text",{x:567,y:122,fontSize:13,fontWeight:700,fill:"#fff",textAnchor:"middle",children:"Stripe"}),t(m.g,{initial:{pathLength:0},animate:{pathLength:1},transition:{duration:.6,delay:1.9},children:[e("circle",{cx:771,cy:122,r:26,fill:u,opacity:.15}),e(m.path,{d:"M759 122 l9 9 16 -18",fill:"none",stroke:u,strokeWidth:4,strokeLinecap:"round",strokeLinejoin:"round",initial:{pathLength:0},animate:{pathLength:1},transition:{duration:.5,delay:1.9}})]})]})},Ea=()=>{const a=A();
15return t(P,{viewBox:"0 0 880 320",caption:a({it:"Provi in privato sull'Anteprima (coderblock.dev), poi pubblichi con un click in Produzione (coderblock.app).",en:"You test privately on the Preview (coderblock.dev), then publish to Production (coderblock.app) in one click.",es:"Pruebas en privado en la Vista previa (coderblock.dev) y publicas en Producción (coderblock.app) con un clic.",fr:"Tu testes en privé sur l'Aperçu (coderblock.dev), puis tu publies en Production (coderblock.app) en un clic.",de:"Du testest privat in der Vorschau (coderblock.dev) und veröffentlichst mit einem Klick in Produktion (coderblock.app).",zh:"ä½ å¨é¢è§ç¯å¢ï¼coderblock.devï¼ç§ä¸æµè¯ï¼ç¶åä¸é®åå¸å°ç产ç¯å¢ï¼coderblock.appï¼ã"}),children:[t(S,{x:40,y:50,w:330,h:200,delay:.2,children:[e("rect",{x:40,y:50,width:330,height:40,rx:16,fill:d,opacity:.12}),e("circle",{cx:66,cy:70,r:5,fill:d}),e("text",{x:86,y:75,fontSize:15,fontWeight:700,fill:l,children:a({it:"Anteprima",en:"Preview",es:"Vista previa",fr:"Aperçu",de:"Vorschau",zh:"é¢è§"})}),e("text",{x:350,y:75,fontSize:12,fill:p,textAnchor:"end",children:a({it:"solo tu",en:"just you",es:"solo tú",fr:"toi seul",de:"nur du",zh:"ä»
ä½ "})}),e("rect",{x:70,y:140,width:270,height:86,rx:8,fill:d,opacity:.1}),e("text",{x:205,y:122,fontSize:12,fill:p,textAnchor:"middle",children:"tuo-progetto.coderblock.dev"})]}),e(E,{d:"M375 150 H505",color:u}),e("text",{x:440,y:138,fontSize:13,fontWeight:700,fill:u,textAnchor:"middle",children:"Deploy"}),t(S,{x:510,y:50,w:330,h:200,delay:.7,children:[e("rect",{x:510,y:50,width:330,height:40,rx:16,fill:u,opacity:.14}),e(Y,{cx:536,cy:70,r:5,color:u}),e("text",{x:556,y:75,fontSize:15,fontWeight:700,fill:l,children:a({it:"Produzione",en:"Production",es:"Producción",fr:"Production",de:"Produktion",zh:"ç产ç¯å¢"})}),e("text",{x:820,y:75,fontSize:12,fill:p,textAnchor:"end",children:a({it:"tutti",en:"everyone",es:"todos",fr:"tout le monde",de:"alle",zh:"ææ人"})}),e("rect",{x:540,y:140,width:270,height:86,rx:8,fill:u,opacity:.1}),e("text",{x:675,y:122,fontSize:12,fill:p,textAnchor:"middle",children:"tuo-progetto.coderblock.app"})]})]})},Da=()=>{const a=A();return t(P,{viewBox:"0 0 880 300",caption:a({it:"Due tipi di progetto: Web app con backend gestito (consigliata) e Web Platform con Python e FastAPI (avanzata).",en:"Two project types: Web app with a managed backend (recommended) and Web Platform with Python + FastAPI (advanced).",es:"Dos tipos de proyecto: Web app con backend gestionado (recomendada) y Web Platform con Python + FastAPI (avanzada).",fr:"Deux types de projet : Web app avec backend géré (recommandée) et Web Platform avec Python + FastAPI (avancée).",de:"Zwei Projekttypen: Web app mit verwaltetem Backend (empfohlen) und Web Platform mit Python + FastAPI (fortgeschritten).",zh:"两ç§é¡¹ç®ç±»åï¼æ管å端ç Web appï¼æ¨èï¼åä½¿ç¨ Python + FastAPI ç Web Platformï¼è¿é¶ï¼ã"}),children:[t(S,{x:40,y:40,w:360,h:220,delay:.15,accent:d,children:[e("text",{x:72,y:82,fontSize:17,fontWeight:700,fill:l,children:"Web app"}),e("text",{x:72,y:104,fontSize:12,fill:p,children:a({it:"consigliata",en:"recommended",es:"recomendada",fr:"recommandée",de:"empfohlen",zh:"æ¨è"})}),t("text",{x:64,y:150,fontSize:13,fontWeight:700,fill:l,children:["â ",a({it:"Backend incluso e gestito",en:"Backend included & managed",es:"Backend incluido y gestionado",fr:"Backend inclus et géré",de:"Backend inklusive & verwaltet",zh:"å端已å
å«å¹¶æ管"})]}),t("text",{x:64,y:182,fontSize:13,fontWeight:700,fill:l,children:["â ",a({it:"Database, login e pagamenti",en:"Database, login & payments",es:"Base de datos, login y pagos",fr:"Base de données, connexion et paiements",de:"Datenbank, Login & Zahlungen",zh:"æ°æ®åºãç»å½ä¸æ¯ä»"})]}),t("text",{x:64,y:214,fontSize:13,fontWeight:700,fill:l,children:["â ",a({it:"Nessuna configurazione server",en:"No server setup",es:"Sin configurar servidores",fr:"Aucune config serveur",de:"Keine Server-Einrichtung",zh:"æ éæå¡å¨é
ç½®"})]})]}),t(S,{x:480,y:40,w:360,h:220,delay:.5,children:[e("text",{x:512,y:82,fontSize:17,fontWeight:700,fill:l,children:"Web Platform"}),e("text",{x:512,y:104,fontSize:12,fill:p,children:a({it:"avanzata",en:"advanced",es:"avanzada",fr:"avancée",de:"fortgeschritten",zh:"è¿é¶"})}),t("text",{x:504,y:150,fontSize:13,fontWeight:700,fill:l,children:["â ",a({it:"Backend Python + FastAPI tuo",en:"Your own Python + FastAPI",es:"Tu backend Python + FastAPI",fr:"Ton backend Python + FastAPI",de:"Eigenes Python + FastAPI",zh:"ä½ èªå·±ç Python + FastAPI"})]}),t("text",{x:504,y:182,fontSize:13,fontWeight:700,fill:l,children:["â ",a({it:"Logica server su misura",en:"Custom server logic",es:"Lógica de servidor a medida",fr:"Logique serveur sur mesure",de:"Eigene Server-Logik",zh:"èªå®ä¹æå¡å¨é»è¾"})]}),t("text",{x:504,y:214,fontSize:13,fontWeight:700,fill:l,children:["â ",a({it:"Massima flessibilità ",en:"Maximum flexibility",es:"Máxima flexibilidad",fr:"Flexibilité maximale",de:"Maximale Flexibilität",zh:"æ大çµæ´»æ§"})]})]})]})},Ma=()=>{const a=A(),n=[{name:"GLM 5.3 Flash",c:u,x:60},{name:"Claude Sonnet 5.5",c:d,x:242},{name:"Claude Opus 5.5",c:z,x:486},{name:"Claude Fable 5",c:w,x:670}];return t(P,{caption:a({it:"I modelli: dal più veloce ed economico al più curato e potente. Scegli quello adatto al task.",en:"The models: from faster and cheaper to more refined and powerful. Pick the one that fits the task.",es:"Los modelos: del más rápido y barato al más refinado y potente. Elige el que encaje con la tarea.",fr:"Les modèles : du plus rapide et économique au plus raffiné et puissant. Choisis celui qui convient à la tâche.",de:"Die Modelle: von schneller und günstiger bis feiner und leistungsstärker. Wähle das passende für die Aufgabe.",zh:"模åï¼ä»æ´å¿«æ´çå°æ´ç²¾ç»æ´å¼ºå¤§ï¼æä»»å¡éæ©åéç模åã"}),children:[t("text",{x:60,y:60,fontSize:13,fill:p,children:["â ",a({it:"più veloce ed economico",en:"faster & cheaper",es:"más rápido y barato",fr:"plus rapide et économique",de:"schneller & günstiger",zh:"æ´å¿«æ´ç"})]}),t("text",{x:820,y:60,fontSize:13,fill:p,textAnchor:"end",children:[a({it:"più curato e potente",en:"more refined & powerful",es:"más refinado y potente",fr:"plus raffiné et puissant",de:"feiner & leistungsstärker",zh:"æ´ç²¾ç»æ´å¼ºå¤§"})," â"]}),e("rect",{x:60,y:80,width:760,height:8,rx:4,fill:"var(--line)"}),t(m.g,{animate:{x:[0,200,430,620,0]},transition:{repeat:1/0,duration:6,ease:"easeInOut"},children:[e("circle",{cx:70,cy:84,r:13,fill:d}),e("circle",{cx:70,cy:84,r:5,fill:"var(--card)"})]}),n.map((i,s)=>t(S,{x:i.x,y:140,w:150,h:100,delay:.15+s*.25,children:[e("circle",{cx:i.x+20,cy:172,r:8,fill:i.c}),e("text",{x:i.x+34,y:177,fontSize:12,fontWeight:700,fill:l,children:i.name})]},s))]})},Na=()=>{const a=A();
15return t(P,{viewBox:"0 0 880 280",caption:a({it:"Hot reload: l'AI modifica un file, la modifica arriva in 2â5 secondi e l'anteprima si aggiorna da sola.",en:"Hot reload: the AI edits a file, the change lands in 2â5 seconds and the preview updates on its own.",es:"Hot reload: la IA edita un archivo, el cambio llega en 2â5 segundos y la vista previa se actualiza sola.",fr:"Hot reload : l'IA modifie un fichier, le changement arrive en 2â5 s et l'aperçu se met à jour tout seul.",de:"Hot reload: die KI ändert eine Datei, die Ãnderung ist in 2â5 Sekunden da und die Vorschau aktualisiert sich selbst.",zh:"çéè½½ï¼AI ä¿®æ¹æ件ï¼2â5 ç§åæ´æ¹çæï¼é¢è§èªå¨å·æ°ã"}),children:[e(E,{d:"M250 130 H360 M520 130 H600",dur:.9}),t(S,{x:60,y:80,w:190,h:100,children:[e("rect",{x:86,y:104,width:120,height:10,rx:5,fill:z,opacity:.8}),e("rect",{x:86,y:124,width:90,height:8,rx:4,fill:p,opacity:.45}),e("text",{x:155,y:205,fontSize:13,fontWeight:700,fill:l,textAnchor:"middle",children:a({it:"L'AI modifica un file",en:"The AI edits a file",es:"La IA edita un archivo",fr:"L'IA modifie un fichier",de:"KI ändert eine Datei",zh:"AI ä¿®æ¹æ件"})})]}),e(m.path,{d:"M420 100 l-16 30 h12 l-6 22 20 -34 h-12 z",fill:d,animate:{opacity:[.4,1,.4]},transition:{repeat:1/0,duration:2.4}}),e("text",{x:440,y:205,fontSize:13,fill:p,textAnchor:"middle",children:"2â5s"}),t(S,{x:610,y:70,w:210,h:120,children:[e("rect",{x:632,y:108,width:80,height:60,rx:6,fill:d,opacity:.1}),t(m.g,{style:{transformOrigin:"735px 122px"},animate:{rotate:[0,0,360]},transition:{repeat:1/0,duration:2.4,times:[0,.55,1]},children:[e("path",{d:"M742 122 a12 12 0 1 0 4 -9",fill:"none",stroke:u,strokeWidth:3}),e("polygon",{points:"742,108 730,112 740,120",fill:u})]}),e("text",{x:715,y:215,fontSize:13,fontWeight:700,fill:l,textAnchor:"middle",children:a({it:"L'anteprima si aggiorna",en:"Preview auto-updates",es:"La vista se actualiza",fr:"L'aperçu se met à jour",de:"Vorschau aktualisiert",zh:"é¢è§èªå¨æ´æ°"})})]})]})},qa=()=>{const a=A(),n=[{emoji:"ð¨",c:xa,cx:180,cy:90,label:a({it:"Design",en:"Design",es:"Diseño",fr:"Design",de:"Design",zh:"设计"}),ly:140},{emoji:"ð»",c:d,cx:700,cy:90,label:"Frontend",ly:140},{emoji:"âï¸",c:z,cx:150,cy:240,label:"Backend",ly:288},{emoji:"ð¡ï¸",c:u,cx:730,cy:240,label:a({it:"Sicurezza",en:"Security",es:"Seguridad",fr:"Sécurité",de:"Sicherheit",zh:"å®å
¨"}),ly:288},{emoji:"ð£",c:w,cx:440,cy:270,label:"Marketing",ly:314}];return t(P,{viewBox:"0 0 880 320",caption:a({it:"Un team di agenti AI specializzati (design, frontend, backend, sicurezza, marketing) coordinati da un capo-progetto.",en:"A team of specialized AI agents (design, frontend, backend, security, marketing) coordinated by a project lead.",es:"Un equipo de agentes de IA especializados (diseño, frontend, backend, seguridad, marketing) coordinados por un lÃder.",fr:"Une équipe d'agents IA spécialisés (design, frontend, backend, sécurité, marketing) coordonnés par un chef de projet.",de:"Ein Team spezialisierter KI-Agenten (Design, Frontend, Backend, Sicherheit, Marketing), koordiniert von einem Projektleiter.",zh:"ä¸æ¯ç±é¡¹ç®è´è´£äººåè°çä¸ä¸ AI æºè½ä½å¢éï¼è®¾è®¡ãå端ãå端ãå®å
¨ãè¥éï¼ã"}),children:[n.map((i,s)=>e("path",{d:`M440 160 L${i.cx} ${i.cy}`,stroke:"var(--line)",strokeWidth:2,strokeDasharray:"5 7",fill:"none"},"l"+s)),t(m.g,{animate:{opacity:[.85,1,.85]},transition:{repeat:1/0,duration:2.4},children:[e("circle",{cx:440,cy:160,r:46,fill:d,opacity:.16}),e("circle",{cx:440,cy:160,r:30,fill:d}),e("path",{d:"M440 145 l4 9 9 4 -9 4 -4 9 -4 -9 -9 -4 9 -4 z",fill:"#fff"})]}),e("text",{x:440,y:128,fontSize:12,fontWeight:700,fill:l,textAnchor:"middle",children:a({it:"Coordinatore",en:"Coordinator",es:"Coordinador",fr:"Coordinateur",de:"Koordinator",zh:"åè°è
"})}),n.map((i,s)=>t(m.g,{initial:{opacity:0,scale:.8},animate:{opacity:1,scale:1},transition:{delay:.2+s*.2},style:{transformOrigin:`${i.cx}px ${i.cy}px`},children:[e("circle",{cx:i.cx,cy:i.cy,r:26,fill:i.c,opacity:.9}),e("text",{x:i.cx,y:i.cy+6,fontSize:18,textAnchor:"middle",children:i.emoji}),e("text",{x:i.cx,y:i.ly,fontSize:12,fontWeight:700,fill:l,textAnchor:"middle",children:i.label})]},s))]})},Fa=()=>{const a=A();return t(P,{caption:a({it:"Carichi i tuoi documenti (listini, FAQ, manuali), l'AI li impara e risponde ai clienti con le tue informazioni.",en:"Upload your documents (price lists, FAQs, manuals), the AI learns them and answers customers with your info.",es:"Subes tus documentos (tarifas, FAQ, manuales), la IA los aprende y responde a los clientes con tu información.",fr:"Tu téléverses tes documents (tarifs, FAQ, manuels), l'IA les apprend et répond aux clients avec tes infos.",de:"Du lädst deine Dokumente hoch (Preislisten, FAQs, Handbücher), die KI lernt sie und antwortet Kunden mit deinen Infos.",zh:"ä¸ä¼ ä½ çææ¡£ï¼ä»·ç®è¡¨ã常è§é®é¢ãæåï¼ï¼AI å¦ä¹ åç¨ä½ çä¿¡æ¯åç客æ·ã"}),children:[e("text",{x:140,y:52,fontSize:13,fontWeight:700,fill:l,textAnchor:"middle",children:a({it:"I tuoi documenti",en:"Your documents",es:"Tus documentos",fr:"Tes documents",de:"Deine Dokumente",zh:"ä½ çææ¡£"})}),[0,1,2].map(n=>
15t(m.g,{animate:{opacity:[0,1,1,0],y:[10,0,0,-6]},transition:{repeat:1/0,duration:3,delay:n*.5},children:[e("rect",{x:70+n*40,y:70+n*20,width:60,height:76,rx:8,fill:"var(--card)",stroke:"var(--line)",strokeWidth:1.5}),e("rect",{x:80+n*40,y:84+n*20,width:40,height:7,rx:3.5,fill:p,opacity:.5})]},n)),e(E,{d:"M230 130 H330",color:z}),e("circle",{cx:400,cy:130,r:52,fill:z,opacity:.14}),e("text",{x:400,y:146,fontSize:46,textAnchor:"middle",children:"ð§ "}),e("text",{x:400,y:210,fontSize:13,fontWeight:700,fill:l,textAnchor:"middle",children:a({it:"L'AI impara",en:"AI learns",es:"La IA aprende",fr:"L'IA apprend",de:"KI lernt",zh:"AI å¦ä¹ "})}),e(E,{d:"M470 130 H560",color:z}),t(S,{x:580,y:60,w:240,h:150,children:[e("rect",{x:600,y:80,width:150,height:26,rx:13,fill:d,opacity:.14}),e("rect",{x:640,y:120,width:160,height:70,rx:13,fill:u,opacity:.16}),e("circle",{cx:620,cy:176,r:8,fill:u}),e("text",{x:620,y:180,fontSize:10,textAnchor:"middle",fill:"#fff",children:"AI"}),e("text",{x:700,y:240,fontSize:12,fill:p,textAnchor:"middle",children:a({it:"Risponde con le TUE info",en:"Answers with YOUR info",es:"Responde con TU info",fr:"Répond avec TES infos",de:"Antwortet mit DEINEN Infos",zh:"ç¨ä½ çä¿¡æ¯åç"})})]})]})},Ra=()=>{const a=A();return t(P,{caption:a({it:"Un prompt vago dà risultati generici; un prompt chiaro e specifico dà risultati mirati.",en:"A vague prompt gives generic results; a clear, specific prompt gives targeted ones.",es:"Un prompt vago da resultados genéricos; uno claro y especÃfico da resultados precisos.",fr:"Un prompt vague donne des résultats génériques ; un prompt clair et précis donne des résultats ciblés.",de:"Ein vager Prompt liefert generische Ergebnisse; ein klarer, konkreter liefert gezielte.",zh:"模ç³çæ示ç»åºæ³æ³çç»æï¼æ¸
æ°å
·ä½çæ示ç»åºç²¾åçç»æã"}),children:[t(m.g,{initial:{opacity:0,y:8},animate:{opacity:1,y:0},transition:{delay:.2},children:[e("rect",{x:40,y:60,width:380,height:80,rx:14,fill:"var(--card)",stroke:"var(--red)",strokeWidth:1.5}),e("text",{x:70,y:98,fontSize:20,children:"ð"}),e("text",{x:104,y:92,fontSize:12,fill:p,children:a({it:"prompt vago",en:"vague prompt",es:"prompt vago",fr:"prompt vague",de:"vager Prompt",zh:"模ç³æ示"})}),t("text",{x:104,y:114,fontSize:15,fontWeight:700,fill:l,children:['"',a({it:"fammi un sito",en:"make me a site",es:"hazme un sitio",fr:"fais-moi un site",de:"mach mir eine Seite",zh:"ç»æå个ç½ç«"}),'"']})]}),t(m.g,{initial:{opacity:0,y:8},animate:{opacity:1,y:0},transition:{delay:.7},children:[e("rect",{x:40,y:170,width:380,height:90,rx:14,fill:"var(--card)",stroke:"var(--green)",strokeWidth:1.5}),e(m.text,{x:70,y:210,fontSize:20,animate:{opacity:[.5,1,.5]},transition:{repeat:1/0,duration:1.8},children:"â¨"}),e("text",{x:104,y:200,fontSize:12,fill:p,children:a({it:"prompt chiaro",en:"clear prompt",es:"prompt claro",fr:"prompt clair",de:"klarer Prompt",zh:"æ¸
æ°æ示"})}),t("text",{x:104,y:222,fontSize:12,fontWeight:700,fill:l,children:['"',a({it:"Landing per ristorante con hero, menù e prenotazione",en:"Restaurant landing with hero, menu and booking",es:"Landing de restaurante con hero, menú y reserva",fr:"Landing resto avec hero, menu et réservation",de:"Restaurant-Landing mit Hero, Menü und Buchung",zh:"é¤å
è½å°é¡µï¼ä¸»è§è§ãèåä¸é¢è®¢"}),'"']})]}),e("text",{x:620,y:150,fontSize:30,textAnchor:"middle",children:"â¡ï¸"}),t(m.g,{initial:{opacity:0}
15,animate:{opacity:1},transition:{delay:1},children:[e("rect",{x:520,y:90,width:320,height:120,rx:14,fill:u,opacity:.12}),e("rect",{x:545,y:110,width:270,height:16,rx:5,fill:u,opacity:.8}),e("rect",{x:545,y:140,width:130,height:50,rx:6,fill:d,opacity:.3}),e("rect",{x:685,y:140,width:130,height:50,rx:6,fill:d,opacity:.2})]})]})},Ga=()=>{const a=A(),n=[{c:d,x:50,y:66,label:a({it:"Negozio",en:"Store",es:"Tienda",fr:"Boutique",de:"Shop",zh:"ååº"})},{c:u,x:196,y:66,label:a({it:"Prenotazioni",en:"Booking",es:"Reservas",fr:"Réservation",de:"Buchung",zh:"é¢è®¢"})},{c:z,x:50,y:160,label:"Dashboard"},{c:w,x:196,y:160,label:a({it:"Gioco/3D",en:"Game/3D",es:"Juego/3D",fr:"Jeu/3D",de:"Spiel/3D",zh:"游æ/3D"})}];return t(P,{caption:a({it:"Scegli un template pronto e in pochi secondi ottieni un'app completa da personalizzare con la chat.",en:"Pick a ready-made template and in seconds you get a complete app to customize through chat.",es:"Elige una plantilla lista y en segundos tienes una app completa para personalizar con el chat.",fr:"Choisis un template prêt et en quelques secondes tu as une app complète à personnaliser via le chat.",de:"Wähle eine fertige Vorlage und in Sekunden hast du eine komplette App, die du per Chat anpasst.",zh:"éæ©ä¸ä¸ªç°æ模æ¿ï¼å ç§éå°±è½å¾å°ä¸ä¸ªå¯éè¿è天å®å¶çå®æ´åºç¨ã"}),children:[e("text",{x:200,y:46,fontSize:13,fontWeight:700,fill:l,textAnchor:"middle",children:a({it:"32 template pronti",en:"32 ready templates",es:"32 plantillas listas",fr:"32 templates prêts",de:"32 fertige Vorlagen",zh:"32 个ç°æ模æ¿"})}),n.map((i,s)=>t(m.g,{initial:{opacity:0,scale:.9},animate:{opacity:1,scale:1},transition:{delay:.15+s*.15},children:[e("rect",{x:i.x,y:i.y,width:130,height:80,rx:12,fill:"var(--card)",stroke:s===0?d:"var(--line)",strokeWidth:s===0?3:1.5}),e("rect",{x:i.x+16,y:i.y+16,width:98,height:30,rx:6,fill:i.c,opacity:.3}),e("text",{x:i.x+16,y:i.y+66,fontSize:11,fill:p,children:i.label})]},s)),e(E,{d:"M350 150 H470"}),t(m.g,{initial:{opacity:0}
15,animate:{opacity:[0,0,1]},transition:{repeat:1/0,duration:3,times:[0,.45,.6]},children:[e("rect",{x:500,y:60,width:330,height:180,rx:16,fill:"var(--card)",stroke:"var(--line)",strokeWidth:1.5}),e("rect",{x:500,y:60,width:330,height:34,rx:16,fill:d,opacity:.12}),e("rect",{x:524,y:112,width:130,height:18,rx:5,fill:l,opacity:.8}),e("rect",{x:524,y:140,width:282,height:60,rx:8,fill:d,opacity:.14}),e("rect",{x:524,y:210,width:90,height:16,rx:8,fill:u})]})]})},ja=()=>{const a=A(),n=[{y:46,c:u,label:"ð¤ "+a({it:"Utenti",en:"Users",es:"Usuarios",fr:"Utilisateurs",de:"Nutzer",zh:"ç¨æ·"})},{y:116,c:d,label:"ð¦ "+a({it:"Ordini",en:"Orders",es:"Pedidos",fr:"Commandes",de:"Bestellungen",zh:"订å"})},{y:186,c:z,label:"ð·ï¸ "+a({it:"Prodotti",en:"Products",es:"Productos",fr:"Produits",de:"Produkte",zh:"åå"})}];return t(P,{viewBox:"0 0 880 280",caption:a({it:"Il database salva i dati della tua app (utenti, ordini, prodotti) in tabelle collegate tra loro.",en:"The database stores your app's data (users, orders, products) in tables linked to each other.",es:"La base de datos guarda los datos de tu app (usuarios, pedidos, productos) en tablas relacionadas.",fr:"La base de données stocke les données de ton app (utilisateurs, commandes, produits) dans des tables reliées.",de:"Die Datenbank speichert die Daten deiner App (Nutzer, Bestellungen, Produkte) in verknüpften Tabellen.",zh:"æ°æ®åºå°ä½ åºç¨çæ°æ®ï¼ç¨æ·ã订åãååï¼åå¨å¨ç¸äºå
³èç表ä¸ã"}),children:[e("ellipse",{cx:130,cy:70,rx:70,ry:20,fill:d,opacity:.9}),e("path",{d:"M60 70 v120 a70 20 0 0 0 140 0 v-120",fill:d,opacity:.25}),e("path",{d:"M60 70 v120 a70 20 0 0 0 140 0 v-120",fill:"none",stroke:d,strokeWidth:2}),e("ellipse",{cx:130,cy:70,rx:70,ry:20,fill:"none",stroke:d,strokeWidth:2}),e(Y,{cx:130,cy:130,r:7,color:u}),e("text",{x:130,y:240,fontSize:14,fontWeight:700,fill:l,textAnchor:"middle",children:a({it:"Il tuo database",en:"Your database",es:"Tu base de datos",fr:"Ta base de données",de:"Deine Datenbank",zh:"ä½ çæ°æ®åº"})}),n.map((i,s)=>t(m.g,{initial:{opacity:0,x:-6},animate:{opacity:1,x:0},transition:{delay:.3+s*.2},children:[e("rect",{x:330,y:i.y,width:200,height:58,rx:10,fill:"var(--card)",stroke:"var(--line)",strokeWidth:1.5}),e("rect",{x:330,y:i.y,width:200,height:24,rx:10,fill:i.c,opacity:.18}),e("text",{x:346,y:i.y+17,fontSize:12,fontWeight:700,fill:l,children:i.label}),e("rect",{x:346,y:i.y+34,width:80,height:7,rx:3.5,fill:p,opacity:.4})]},s)),e("path",{d:"M545 75 C620 90, 620 130, 545 145",stroke:z,strokeWidth:2,fill:"none",strokeDasharray:"5 6"}),e("path",{d:"M545 145 C620 160, 620 200, 545 215",stroke:z,strokeWidth:2,fill:"none",strokeDasharray:"5 6"}),e("text",{x:660,y:150,fontSize:12,fill:p,children:a({it:"tabelle collegate",en:"linked tables",es:"tablas enlazadas",fr:"tables reliées",de:"verknüpfte Tabellen",zh:"å
³è表"})}),e(E,{d:"M205 130 H320",color:z})]})},Ba=()=>{const a=A();return t(P,{viewBox:"0 0 880 260",caption:a({it:"Le chiavi segrete restano in una cassaforte: l'app le usa ma non sono mai visibili nel codice o al pubblico.",en:"Secret keys stay in a vault: your app uses them but they are never visible in the code or to the public.",es:"Las claves secretas quedan en una caja fuerte: la app las usa pero nunca son visibles en el código ni al público.",fr:"Les clés secrètes restent dans un coffre : l'app les utilise mais elles ne sont jamais visibles dans le code ni au public.",de:"Geheime Schlüssel bleiben im Tresor: die App nutzt sie, aber sie sind nie im Code oder öffentlich sichtbar.",zh:"å¯é¥ä¿åå¨ä¿é©åºä¸ï¼åºç¨ä½¿ç¨å®ä»¬ï¼ä½ç»ä¸ä¼åºç°å¨ä»£ç éæ对å¤å¯è§ã"}),children:[e("rect",{x:70,y:60,width:220,height:150,rx:16,fill:"var(--card)",stroke:w,strokeWidth:2}),e(m.path,{d:"M160 92 v-8 a20 20 0 0 1 40 0 v8",fill:"none",stroke:w,strokeWidth:7,strokeLinecap:"round",animate:{y:[-6,-6,0]},transition:{repeat:1/0,duration:3,times:[0,.4,.55]}}),e("rect",{x:150,y:92,width:60,height:52,rx:8,fill:w}),e("circle",{cx:180,cy:116,r:7,fill:"var(--card)"}),e("text",{x:180,y:180,fontSize:13,fontWeight:700,fill:l,textAnchor:"middle",children:a({it:"Cassaforte segreti",en:"Secrets vault",es:"Caja fuerte",fr:"Coffre à secrets",de:"Geheimnis-Tresor",zh:"å¯é¥ä¿é©åº"})}),e(E,{d:"M300 135 H430",color:u}),t(S,{x:450,y:70,w:200,h:130,children:[e("rect",{x:450,y:70,width:200,height:30,rx:14,fill:d,opacity:.12}),e("text",{x:470,y:90,fontSize:12,fontWeight:700,fill:l,children:a({it:"La tua app",en:"Your app",es:"Tu app",fr:"Ton app",de:"Deine App",zh:"ä½ çåºç¨"})}),e(Y,{cx:480,cy:140,r:6,color:w}),e("rect",{x:496,y:135,width:130,height:10,rx:5,fill:p,opacity:.4})]}),t("g",{transform:"translate(720,135)",children:[e("text",{x:0,y:6,fontSize:30,textAnchor:"middle",children:"ðï¸"}),e("line",{x1:-22,y1:-18,x2:22,y2:20,stroke:"var(--red)",strokeWidth:4,strokeLinecap:"round"}),e("text",{x:0,y:48,fontSize:11,fill:p,textAnchor:"middle",children:a({it:"mai pubbliche",en:"never public",es:"nunca públicas",fr:"jamais publiques",de:"nie öffentlich",zh:"ç»ä¸å
¬å¼"})})]})]})},Wa=()=>{const a=A();
15return t(P,{viewBox:"0 0 880 260",caption:a({it:"Collega il tuo dominio: aggiungi due record DNS, aspetti la verifica e la tua app va online sul tuo indirizzo, con HTTPS.",en:"Connect your domain: add two DNS records, wait for verification and your app goes live on your address, with HTTPS.",es:"Conecta tu dominio: añade dos registros DNS, espera la verificación y tu app queda en lÃnea en tu dirección, con HTTPS.",fr:"Connecte ton domaine : ajoute deux enregistrements DNS, attends la vérification et ton app est en ligne sur ton adresse, avec HTTPS.",de:"Verbinde deine Domain: zwei DNS-Einträge hinzufügen, Verifizierung abwarten und deine App ist unter deiner Adresse live, mit HTTPS.",zh:"è¿æ¥ä½ çååï¼æ·»å ä¸¤æ¡ DNS è®°å½ï¼çå¾
éªè¯ï¼ä½ çåºç¨ä¾¿ä»¥ä½ çå°åä¸çº¿ï¼å¹¶å¯ç¨ HTTPSã"}),children:[e(E,{d:"M270 130 H330 M560 130 H620"}),t(S,{x:40,y:70,w:230,h:120,delay:.2,children:[t("text",{x:60,y:98,fontSize:13,fontWeight:700,fill:l,children:["1 · ",a({it:"Aggiungi 2 record DNS",en:"Add 2 DNS records",es:"Añade 2 registros DNS",fr:"Ajoute 2 enreg. DNS",de:"2 DNS-Einträge",zh:"æ·»å 2 æ¡ DNS è®°å½"})]}),e("rect",{x:60,y:112,width:190,height:26,rx:6,fill:"var(--bg)",stroke:"var(--line)"}),e("text",{x:72,y:129,fontSize:11,fontFamily:"monospace",fill:p,children:"CNAME â coderblock.app"}),e("rect",{x:60,y:146,width:190,height:26,rx:6,fill:"var(--bg)",stroke:"var(--line)"}),e("text",{x:72,y:163,fontSize:11,fontFamily:"monospace",fill:p,children:"A â ..."})]}),t(S,{x:332,y:70,w:226,h:120,delay:.6,children:[t("text",{x:352,y:98,fontSize:13,fontWeight:700,fill:l,children:["2 · ",a({it:"Verifica automatica",en:"Auto verification",es:"Verificación auto.",fr:"Vérification auto",de:"Auto-Verifizierung",zh:"èªå¨éªè¯"})]}),e("circle",{cx:445,cy:140,r:30,fill:w,opacity:.16}),e(m.path,{d:"M445 122 v18 l12 8",fill:"none",stroke:w,strokeWidth:3.5,strokeLinecap:"round",style:{transformOrigin:"445px 140px"},animate:{rotate:360},transition:{repeat:1/0,duration:4,ease:"linear"}})]}),t(S,{x:620,y:70,w:220,h:120,delay:1,accent:u,children:[t("text",{x:640,y:98,fontSize:13,fontWeight:700,fill:l,children:["3 · ",a({it:"Online sul tuo dominio",en:"Live on your domain",es:"En vivo en tu dominio",fr:"En ligne sur ton domaine",de:"Live auf deiner Domain",zh:"å¨ä½ çååä¸çº¿"})]}),e("rect",{x:640,y:112,width:180,height:30,rx:15,fill:u,opacity:.14}),e("text",{x:676,y:132,fontSize:12,fontWeight:700,fill:l,children:"ð www.tuosito.com"}),e(m.path,{d:"M666 165 l8 8 16 -18",fill:"none",stroke:u,strokeWidth:4,strokeLinecap:"round",strokeLinejoin:"round",initial:{pathLength:0},animate:{pathLength:1},transition:{delay:1.5,duration:.5}}),e("text",{x:720,y:184,fontSize:11,fill:p,children:"HTTPS"})]})]})},Va=()=>{const a=A();return t(P,{viewBox:"0 0 880 240",caption:a({it:"La tua app invia email automatiche: conferme, ricevute e notifiche arrivano nella casella del cliente.",en:"Your app sends automatic emails: confirmations, receipts and notifications land in the customer inbox.",es:"Tu app envÃa correos automáticos: confirmaciones, recibos y avisos llegan al buzón del cliente.",fr:"Ton app envoie des e-mails automatiques : confirmations, reçus et notifications arrivent dans la boîte du client.",de:"Deine App sendet automatische E-Mails: Bestätigungen, Belege und Benachrichtigungen landen im Postfach des Kunden.",zh:"ä½ çåºç¨èªå¨åéé®ä»¶ï¼ç¡®è®¤ãæ¶æ®åéç¥ä¼é达客æ·æ¶ä»¶ç®±ã"}),children:[t(S,{x:60,y:70,w:190,h:110,children:[e("rect",{x:60,y:70,width:190,height:30,rx:14,fill:d,opacity:.12}),e("text",{x:80,y:90,fontSize:12,fontWeight:700,fill:l,children:a({it:"La tua app",en:"Your app",es:"Tu app",fr:"Ton app",de:"Deine App",zh:"ä½ çåºç¨"})}),e("text",{x:100,y:150,fontSize:34,children:"âï¸"}),e("text",{x:155,y:150,fontSize:12,fill:p,children:a({it:"nuovo ordine",en:"new order",es:"nuevo pedido",fr:"nouvelle commande",de:"neue Bestellung",zh:"æ°è®¢å"})})]}),e("path",{d:"M250 120 C400 60, 500 60, 630 120",fill:"none",stroke:"var(--line)",strokeWidth:2,strokeDasharray:"4 7"}),t(m.g,{animate:{offsetDistance:["0%","100%"],opacity:[0,1,1,0]},transition:{repeat:1/0,duration:3,ease:"easeInOut"},style:{offsetPath:"path('M250 120 C400 60, 500 60, 630 120')"},children:[e("rect",{x:-18,y:-13,width:36,height:26,rx:4,fill:d}),e("path",{d:"M-18 -13 L0 2 L18 -13",fill:"none",stroke:"#fff",strokeWidth:2})]}),t(S,{x:630,y:60,w:200,h:130,children:[t("text",{x:650,y:86,fontSize:12,fontWeight:700,fill:l,children:["ð¬ ",a({it:"Casella cliente",en:"Customer inbox",es:"Buzón del cliente",fr:"Boîte du client",de:"Kunden-Postfach",zh:"客æ·æ¶ä»¶ç®±"})]}
15),t(m.g,{animate:{opacity:[0,0,1]},transition:{repeat:1/0,duration:3,times:[0,.8,.9]},children:[e("rect",{x:650,y:98,width:160,height:28,rx:6,fill:u,opacity:.16}),e("text",{x:680,y:116,fontSize:11,fontWeight:700,fill:l,children:a({it:"Conferma ordine â",en:"Order confirmed â",es:"Pedido confirmado â",fr:"Commande confirmée â",de:"Bestellung bestätigt â",zh:"订å已确认 â"})})]}),e("rect",{x:650,y:132,width:160,height:22,rx:5,fill:p,opacity:.18})]})]})},Oa=()=>{const a=A(),n=[{cy:88,label:a({it:"aggiunto carrello",en:"added cart",es:"añadido carrito",fr:"panier ajouté",de:"Warenkorb ergänzt",zh:"æ·»å è´ç©è½¦"}),delay:1.3},{cy:126,label:a({it:"pagina prodotti",en:"products page",es:"página productos",fr:"page produits",de:"Produktseite",zh:"åå页é¢"}),delay:.8},{cy:164,label:a({it:"setup iniziale",en:"initial setup",es:"configuración inicial",fr:"config initiale",de:"Erst-Setup",zh:"åå§è®¾ç½®"}),delay:.3}];return t(P,{viewBox:"0 0 880 240",caption:a({it:"Colleghi GitHub e ogni modifica del progetto viene salvata in un repository, con lo storico di tutte le versioni.",en:"Connect GitHub and every change to your project is saved to a repository, with the full history of every version.",es:"Conectas GitHub y cada cambio del proyecto se guarda en un repositorio, con el historial de todas las versiones.",fr:"Tu connectes GitHub et chaque changement du projet est enregistré dans un dépôt, avec tout lâhistorique des versions.",de:"Du verbindest GitHub und jede Ãnderung wird in einem Repository gespeichert, mit der vollständigen Versionshistorie.",zh:"è¿æ¥ GitHubï¼é¡¹ç®çæ¯æ¬¡æ´æ¹é½ä¼ä¿åå°ä»åºä¸ï¼å¹¶ä¿çææçæ¬çåå²è®°å½ã"}),children:[t(S,{x:60,y:70,w:180,h:100,children:[e("rect",{x:60,y:70,width:180,height:30,rx:14,fill:d,opacity:.12}),e("text",{x:80,y:90,fontSize:12,fontWeight:700,fill:l,children:a({it:"Il tuo progetto",en:"Your project",es:"Tu proyecto",fr:"Ton projet",de:"Dein Projekt",zh:"ä½ ç项ç®"})}),e("rect",{x:84,y:116,width:132,height:9,rx:4.5,fill:p,opacity:.5})]}),e(E,{d:"M245 120 H330",color:u}),e("circle",{cx:400,cy:120,r:42,fill:l}),e("text",{x:400,y:134,fontSize:40,textAnchor:"middle",children:"ð"}),e("text",{x:400,y:192,fontSize:13,fontWeight:700,fill:l,textAnchor:"middle",children:"GitHub"}),e(E,{d:"M448 120 H520",color:u}),e("line",{x1:560,y1:70,x2:560,y2:180,stroke:"var(--line)",strokeWidth:2}),n.map((i,s)=>t(m.g,{initial:{opacity:0,x:-4},animate:{opacity:1,x:0},transition:{delay:i.delay},children:[e("circle",{cx:560,cy:i.cy,r:7,fill:u}),e("rect",{x:580,y:i.cy-8,width:230,height:18,rx:6,fill:"var(--card)",stroke:"var(--line)"}),e("text",{x:592,y:i.cy+5,fontSize:11,fill:p,children:i.label})]},s))]})},_a=()=>{const a=A();return t(P,{viewBox:"0 0 880 240",caption:a({it:"I crediti sono il carburante: ogni messaggio all'AI ne consuma un po', si ricaricano ogni mese o li acquisti quando servono.",en:"Credits are the fuel: every message to the AI uses some, they refill each month or you buy more when needed.",es:"Los créditos son el combustible: cada mensaje a la IA consume algunos, se recargan cada mes o compras más cuando hace falta.",fr:"Les crédits sont le carburant : chaque message à l'IA en consomme, ils se rechargent chaque mois ou tu en achètes au besoin.",de:"Credits sind der Treibstoff: jede Nachricht an die KI verbraucht etwas, sie füllen sich monatlich auf oder du kaufst nach.",zh:"积åå°±æ¯çæï¼æ¯æ¡åç» AI çæ¶æ¯é½ä¼æ¶èä¸äºï¼æ¯æèªå¨è¡¥å
ï¼ä¹å¯æéè´ä¹°ã"}),children:[t(m.g,{style:{transformOrigin:"120px 120px"},animate:{scale:[1,1.12,1]},transition:{repeat:1/0,duration:3},children:[e("circle",{cx:120,cy:120,r:46,fill:w,opacity:.2}),e("circle",{cx:120,cy:120,r:34,fill:w}),e("text",{x:120,y:132,fontSize:30,textAnchor:"middle",children:"â¡"})]}),e("text",{x:120,y:196,fontSize:13,fontWeight:700,fill:l,textAnchor:"middle",children:a({it:"Crediti = carburante",en:"Credits = fuel",es:"Créditos = combustible",fr:"Crédits = carburant",de:"Credits = Treibstoff",zh:"积å = çæ"})}),e("rect",{x:260,y:66,width:320,height:30,rx:15,fill:"var(--card)",stroke:"var(--line)"}),e(m.rect,{x:260,y:66,height:30,rx:15,fill:u,opacity:.55,animate:{width:[300,120,300]},transition:{repeat:1/0,duration:5,ease:"easeInOut"}}),e("text",{x:260,y:122,fontSize:12,fill:p,children:a({it:"ogni messaggio consuma un po' di crediti",en:"each message uses a bit of credits",es:"cada mensaje consume algo de créditos",fr:"chaque message consomme un peu de crédits",de:"jede Nachricht verbraucht etwas Credits",zh:"æ¯æ¡æ¶æ¯æ¶èå°é积å"})}),t(S,{x:620,y:70,w:220,h:120,children:[e("text",{x:640,y:98,fontSize:13,fontWeight:700,fill:l,children:a({it:"Come si ricaricano",en:"How they refill",es:"Cómo se recargan",fr:"Comment ils se rechargent",de:"Wie sie sich füllen",zh:"å¦ä½è¡¥å
"})}),t("text",{x:640,y:126,fontSize:12,fill:p,children:["ð ",a({it:"ogni mese col tuo piano",en:"monthly with your plan",es:"cada mes con tu plan",fr:"chaque mois avec ton offre",de:"monatlich mit deinem Plan",zh:"æ¯æéå¥é¤è¡¥å
"})]}),t("text",{x:640,y:152,fontSize:12,fill:p,children:["â ",a({it:"acquisti extra quando servono",en:"buy extra when needed",es:"compra extra cuando haga falta",fr:"achète-en au besoin",de:"bei Bedarf nac
15hkaufen",zh:"æéè´ä¹°é¢å¤ç§¯å"})]})]})]})},Ua=()=>{const a=A();return t(P,{viewBox:"0 0 880 280",caption:a({it:"I piani a confronto: Community gratis per iniziare, Pro e Business con più crediti e funzionalità man mano che cresci.",en:"The plans side by side: Community free to start, Pro and Business with more credits and features as you grow.",es:"Los planes comparados: Community gratis para empezar, Pro y Business con más créditos y funciones al crecer.",fr:"Les offres comparées : Community gratuit pour démarrer, Pro et Business avec plus de crédits et de fonctions.",de:"Die Pläne im Vergleich: Community gratis zum Start, Pro und Business mit mehr Credits und Funktionen.",zh:"å¥é¤å¯¹æ¯ï¼Community å
费起æ¥ï¼Pro å Business éæé¿æä¾æ´å¤ç§¯åä¸åè½ã"}),children:[e("text",{x:440,y:40,fontSize:13,fill:p,textAnchor:"middle",children:a({it:"Cresci quando vuoi: cambi piano in ogni momento",en:"Grow anytime: switch plans whenever you like",es:"Crece cuando quieras: cambia de plan en cualquier momento",fr:"Ãvolue quand tu veux : change dâoffre à tout moment",de:"Wachse jederzeit: wechsle den Plan wann du willst",zh:"éæ¶æé¿ï¼ä»»ä½æ¶åé½å¯æ´æ¢å¥é¤"})}),t(S,{x:50,y:90,w:230,h:150,delay:.15,children:[e("text",{x:70,y:122,fontSize:16,fontWeight:700,fill:l,children:"Community"}),e("text",{x:70,y:150,fontSize:22,fontWeight:700,fill:u,children:a({it:"Gratis",en:"Free",es:"Gratis",fr:"Gratuit",de:"Gratis",zh:"å
è´¹"})}),t("text",{x:70,y:186,fontSize:12,fill:p,children:["â ",a({it:"Crea e provi le tue app",en:"Build & test your apps",es:"Crea y prueba tus apps",fr:"Crée et teste tes apps",de:"Apps bauen & testen",zh:"å建并æµè¯åºç¨"})]})]}),e(m.g,{animate:{y:[0,-4,0]},transition:{repeat:1/0,duration:2.4},children:t(S,{x:300,y:70,w:240,h:170,delay:.4,accent:d,children:[e("rect",{x:300,y:70,width:240,height:30,rx:16,fill:d}),e("text",{x:420,y:90,fontSize:12,fontWeight:700,fill:"#fff",textAnchor:"middle",children:a({it:"PIà SCELTO",en:"MOST POPULAR",es:"MÃS ELEGIDO",fr:"LE PLUS CHOISI",de:"BELIEBT",zh:"æå欢è¿"})}),e("text",{x:320,y:132,fontSize:16,fontWeight:700,fill:l,children:"Pro"}),e("text",{x:320,y:160,fontSize:20,fontWeight:700,fill:d,children:a({it:"più crediti",en:"more credits",es:"más créditos",fr:"plus de crédits",de:"mehr Credits",zh:"æ´å¤ç§¯å"})}),t("text",{x:320,y:190,fontSize:12,fill:p,children:["â ",a({it:"Tutti i modelli + progetti illimitati",en:"All models + unlimited projects",es:"Todos los modelos + proyectos ilimitados",fr:"Tous les modèles + projets illimités",de:"Alle Modelle + unbegrenzte Projekte",zh:"å
¨é¨æ¨¡å + æ é项ç®"})]})]})}),t(S,{x:560,y:90,w:230,h:150,delay:.65,children:[e("text",{x:580,y:122,fontSize:16,fontWeight:700,fill:l,children:"Business"}),e("text",{x:580,y:150,fontSize:22,fontWeight:700,fill:z,children:a({it:"massimo",en:"maximum",es:"máximo",fr:"maximum",de:"Maximum",zh:"æé«"})}),t("text",{x:580,y:186,fontSize:12,fill:p,children:["â ",a({it:"Team, priorità e supporto",en:"Team, priority & support",es:"Equipo, prioridad y soporte",fr:"Ãquipe, priorité et support",de:"Team, Priorität & Support",zh:"å¢éãä¼å
级ä¸æ¯æ"})]})]})]})},Ka=()=>{const a=A();return t(P,{viewBox:"0 0 880 240",caption:a({it:"Trascini un'immagine nella chat: viene caricata in modo sicuro e usata subito nella tua app.",en:"Drag an image into the chat: it is uploaded securely and used in your app right away.",es:"Arrastras una imagen al chat: se sube de forma segura y se usa en tu app al instante.",fr:"Tu glisses une image dans le chat : elle est envoyée en toute sécurité et utilisée aussitôt dans ton app.",de:"Zieh ein Bild in den Chat: es wird sicher hochgeladen und sofort in deiner App verwendet.",zh:"æå¾çæè¿è天ï¼å®ä¼è¢«å®å
¨ä¸ä¼ 并ç«å³ç¨äºä½ çåºç¨ã"}),children:[e("rect",{x:60,y:60,width:240,height:130,rx:14,fill:d,opacity:.08,stroke:d,strokeWidth:2,strokeDasharray:"8 6"}),t(m.g,{animate:{y:[-30,0,0,0],opacity:[0,1,1,0]},transition:{repeat:1/0,duration:3,times:[0,.2,.6,.75]},children:[e("rect",{x:140,y:86,width:80,height:60,rx:8,fill:"var(--card)",stroke:"var(--line)"}),e("circle",{cx:162,cy:106,r:8,fill:d,opacity:.7}),e("path",{d:"M148 138 l20 -20 16 14 12 -8 16 14 z",fill:u,opacity:.7})]}),e("text",{x:180,y:176,fontSize:12,fill:p,textAnchor:"middle",children:a({it:"trascina qui",en:"drop here",es:"suelta aquÃ",fr:"dépose ici",de:"hier ablegen",zh:"ææ¾å°æ¤"})}),e("rect",{x:365,y:112,width:150,height:12,rx:6,fill:"var(--card)",stroke:"var(--line)"}),e(m.rect,{x:365,y:112,height:12,rx:6,fill:u,animate:{width:[0,150,150]},transition:{repeat:1/0,duration:3,times:[0,.6,1]}}),e("text",{x:440,y:100,fontSize:12,fontWeight:700,fill:l,textAnchor:"middle",children:a({it:"Upload sicuro",en:"Secure upload",es:"Subida segura",fr:"Envoi sécurisé",de:"Sicherer Upload",zh:"å®å
¨ä¸ä¼ "})}),t(S,{x:580,y:60,w:240,h:130,children:[e("rect",{x:580,y:60,width:240,height:30,rx:14,fill:d,opacity:.12}),e("text",{x:600,y:80,fontSize:12,fontWeight:700,fill:l,children:a({it:"La tua app",en:"Your app",es:"Tu app",fr:"Ton app",de:"Deine App",zh:"ä½ çåºç¨"})}
15),t(m.g,{animate:{opacity:[0,0,1]},transition:{repeat:1/0,duration:3,times:[0,.7,.85]},children:[e("rect",{x:600,y:104,width:90,height:66,rx:8,fill:d,opacity:.2}),e("path",{d:"M606 162 l16 -16 12 10 10 -8 12 14 z",fill:u,opacity:.7})]})]})]})},Ha=()=>{const a=A(),n=[a({it:"aggiungi una galleria foto",en:"add a photo gallery",es:"añade una galerÃa",fr:"ajoute une galerie",de:"Fotogalerie hinzufügen",zh:"æ·»å ç
§çç»å»"}),a({it:'crea la pagina "chi siamo"',en:'create the "about" page',es:'crea la página "acerca de"',fr:"crée la page « à propos »",de:"Ãber-uns-Seite erstellen",zh:"å建âå
³äºâ页é¢"}),a({it:"imposta i colori del brand",en:"set the brand colors",es:"define los colores de marca",fr:"définis les couleurs de marque",de:"Markenfarben festlegen",zh:"设置åçé
è²"})];return t(P,{viewBox:"0 0 880 240",caption:a({it:"Metti in coda più richieste che partono da sole una dopo l'altra, e fermi l'AI quando vuoi con Stop.",en:"Queue up several requests that run on their own one after another, and stop the AI whenever you want.",es:"Pon en cola varias peticiones que se ejecutan solas una tras otra, y detén la IA cuando quieras.",fr:"Mets en file plusieurs demandes qui s'exécutent seules l'une après l'autre, et arrête l'IA quand tu veux.",de:"Reihe mehrere Anfragen ein, die nacheinander von selbst laufen, und stoppe die KI, wann du willst.",zh:"å°å¤ä¸ªè¯·æ±æéï¼å®ä»¬ä¼ä¾æ¬¡èªå¨æ§è¡ï¼ä½ ä¹å¯ä»¥éæ¶ç¹å»åæ¢ã"}),children:[e(m.g,{animate:{opacity:[.6,1,.6]},transition:{repeat:1/0,duration:2.4},children:e("rect",{x:60,y:70,width:180,height:100,rx:14,fill:"var(--card)",stroke:d,strokeWidth:2})}),e(m.g,{style:{transformOrigin:"150px 120px"},animate:{rotate:360},transition:{repeat:1/0,duration:1.5,ease:"linear"},children:e("path",{d:"M150 100 a20 20 0 1 0 14 6",fill:"none",stroke:d,strokeWidth:4,strokeLinecap:"round"})}),e("text",{x:150,y:188,fontSize:12,fontWeight:700,fill:l,textAnchor:"middle",children:a({it:"in esecuzioneâ¦",en:"runningâ¦",es:"en ejecuciónâ¦",fr:"en coursâ¦",de:"läuftâ¦",zh:"æ§è¡ä¸â¦"})}),e("text",{x:270,y:60,fontSize:13,fontWeight:700,fill:l,children:a({it:"In coda (partono da sole)",en:"Queued (run on their own)",es:"En cola (se ejecutan solas)",fr:"En file (auto)",de:"In Warteschlange (auto)",zh:"æéä¸ï¼èªå¨æ§è¡ï¼"})}),n.map((i,s)=>t("g",{children:[e("rect",{x:270,y:72+s*38,width:330,height:30,rx:8,fill:"var(--card)",stroke:"var(--line)"}),e("circle",{cx:290,cy:87+s*38,r:6,fill:p,opacity:.5-s*.1}),e("text",{x:306,y:91+s*38,fontSize:11,fill:p,children:i})]},s)),t(m.g,{style:{transformOrigin:"720px 120px"},animate:{scale:[1,1.08,1]},transition:{repeat:1/0,duration:2.4},children:[e("circle",{cx:720,cy:115,r:42,fill:"var(--red)",opacity:.16}),e("circle",{cx:720,cy:115,r:30,fill:"var(--red)"}),e("rect",{x:708,y:103,width:24,height:24,rx:4,fill:"#fff"})]}),e("text",{x:720,y:184,fontSize:13,fontWeight:700,fill:l,textAnchor:"middle",children:"Stop"})]})},$a=()=>{const a=A(),n=[{n:"1",label:a({it:"Dashboard",en:"Dashboard",es:"Panel",fr:"Tableau",de:"Dashboard",zh:"仪表ç"}),x:30,w:165},{n:"2",label:a({it:"Scegli base",en:"Pick a base",es:"Elige base",fr:"Choisis une base",de:"Basis wählen",zh:"éæ©åºç¡"}),x:240,w:165},{n:"3",label:a({it:"Dai un nome",en:"Name it",es:"Ponle nombre",fr:"Nomme-le",de:"Benennen",zh:"å½å"}),x:450,w:165},{n:"4",label:a({it:"Chatta con l'AI",en:"Chat with the AI",es:"Chatea con la IA",fr:"Discute avec l'IA",de:"Mit der KI chatten",zh:"ä¸ AI è天"}),x:660,w:185}];return t(P,{viewBox:"0 0 880 260",caption:a({it:"Dai primi passi al primo messaggio: apri la dashboard, scegli una base, dai un nome e inizia a chattare con lâAI.",en:"From zero to your first message: open the dashboard, pick a base, name it and start chatting with the AI.",es:"De cero a tu primer mensaje: abre el panel, elige una base, ponle nombre y empieza a chatear con la IA.",fr:"De zéro à ton premier message : ouvre le tableau de bord, choisis une base, nomme-le et discute avec l'IA.",de:"Von null zur ersten Nachricht: Dashboard öffnen, Basis wählen, benennen und mit der K
15I chatten.",zh:"ä»é¶å°ç¬¬ä¸æ¡æ¶æ¯ï¼æå¼ä»ªè¡¨çãéæ©åºç¡ãå½å并å¼å§ä¸ AI è天ã"}),children:[e(E,{d:"M195 130 H225 M405 130 H435 M615 130 H645"}),n.map((i,s)=>t(S,{x:i.x,y:80,w:i.w,h:100,delay:.15+s*.4,accent:s===3?u:void 0,children:[e("circle",{cx:i.x+30,cy:122,r:16,fill:s===3?u:d,opacity:.18}),e("text",{x:i.x+30,y:128,fontSize:15,fontWeight:700,fill:s===3?u:d,textAnchor:"middle",children:i.n}),e("text",{x:i.x+i.w/2+14,y:128,fontSize:13,fontWeight:700,fill:l,textAnchor:"middle",children:i.label})]},s))]})},Qa=()=>{const a=A();return t(P,{viewBox:"0 0 880 240",caption:a({it:"Prima provi i pagamenti in modalità Test con carte finte, poi passi a Live per incassare soldi veri.",en:"First you test payments in Test mode with fake cards, then you switch to Live to collect real money.",es:"Primero pruebas los pagos en modo Test con tarjetas falsas, luego pasas a Live para cobrar dinero real.",fr:"Dâabord tu testes les paiements en mode Test avec de fausses cartes, puis tu passes en Live pour encaisser vraiment.",de:"Zuerst testest du Zahlungen im Test-Modus mit Testkarten, dann wechselst du zu Live für echtes Geld.",zh:"å
å¨æµè¯æ¨¡å¼ç¨æµè¯å¡éªè¯æ¯ä»ï¼ç¶ååæ¢å° Live æ¶åçå®æ¬¾é¡¹ã"}),children:[e("text",{x:440,y:52,fontSize:13,fill:p,textAnchor:"middle",children:a({it:"Un interruttore: Test â Live",en:"One switch: Test â Live",es:"Un interruptor: Test â Live",fr:"Un interrupteur : Test â Live",de:"Ein Schalter: Test â Live",zh:"ä¸ä¸ªå¼å
³ï¼æµè¯ â ä¸çº¿"})}),e(m.rect,{x:392,y:70,width:96,height:40,rx:20,animate:{fill:[w,w,u]},transition:{repeat:1/0,duration:4,times:[0,.4,.6]},opacity:.85}),e(m.circle,{cy:90,r:15,fill:"#fff",animate:{cx:[412,412,464]},transition:{repeat:1/0,duration:4,times:[0,.4,.6]}}),t(m.g,{animate:{opacity:[1,1,.25]},transition:{repeat:1/0,duration:4,times:[0,.5,.65]},children:[e("rect",{x:60,y:130,width:330,height:80,rx:14,fill:"var(--card)",stroke:w,strokeWidth:1.5}),t("text",{x:82,y:160,fontSize:14,fontWeight:700,fill:w,children:["𧪠",a({it:"Modalità Test",en:"Test mode",es:"Modo Test",fr:"Mode Test",de:"Test-Modus",zh:"æµè¯æ¨¡å¼"})]}),e("text",{x:82,y:186,fontSize:12,fill:p,children:a({it:"carte finte · nessun soldo reale",en:"fake cards · no real money",es:"tarjetas falsas · sin dinero real",fr:"fausses cartes · pas dâargent réel",de:"Testkarten · kein echtes Geld",zh:"æµè¯å¡ · æ çå®èµé"})})]}),t(m.g,{animate:{opacity:[0,0,1]},transition:{repeat:1/0,duration:4,times:[0,.5,.65]},children:[e("rect",{x:490,y:130,width:330,height:80,rx:14,fill:"var(--card)",stroke:u,strokeWidth:2}),t("text",{x:512,y:160,fontSize:14,fontWeight:700,fill:u,children:["ð³ ",a({it:"Modalità Live",en:"Live mode",es:"Modo Live",fr:"Mode Live",de:"Live-Modus",zh:"ä¸çº¿æ¨¡å¼"})]}),e("text",{x:512,y:186,fontSize:12,fill:p,children:a({it:"carte vere · incassi reali",en:"real cards · real income",es:"tarjetas reales · ingresos reales",fr:"vraies cartes · vrais revenus",de:"echte Karten · echte Einnahmen",zh:"çå®å¡ · çå®æ¶å
¥"})})]})]})},Za=()=>{const a=A(),n=[{cx:150,c:d,top:!0,title:"v1",sub:a({it:"creazione app",en:"build apps",es:"crear apps",fr:"créer des apps",de:"Apps bauen",zh:"å建åºç¨"})},{cx:360,c:z,top:!1,title:"v2",sub:a({it:"pagamenti",en:"payments",es:"pagos",fr:"paiements",de:"Zahlungen",zh:"æ¯ä»"})},{cx:570,c:u,top:!0,title:"v3",sub:a({it:"team AI",en:"AI team",es:"equipo IA",fr:"équipe IA",de:"KI-Team",zh:"AI å¢é"})},{cx:760,c:d,top:!1,title:a({it:"oggi",en:"today",es:"hoy",fr:"aujourd'hui",de:"heute",zh:"ä»å¤©"}),sub:a({it:"novità â¨",en:"new â¨",es:"novedades â¨",fr:"nouveautés â¨",de:"Neues â¨",zh:"æ°åè½ â¨"}),pulse:!0}];return t(P,{viewBox:"0 0 880 220",caption:a({it:"Il changelog è la linea del tempo delle novità : ogni versione porta nuove funzionalità e miglioramenti.",en:"The changelog is the timeline of what's new: every version brings fresh features and improvements.",es:"El changelog es la lÃnea de tiempo de novedades: cada versión trae nuevas funciones y mejoras.",fr:"Le changelog est la frise des nouveautés : chaque version apporte de nouvelles fonctions et améliorations.",de:"Das Changelog ist die Zeitleiste der Neuerungen: jede Version bringt neue Funktionen und Verbesserungen.",zh:"æ´æ°æ¥å¿æ¯æ°åè½çæ¶é´çº¿ï¼æ¯ä¸ªçæ¬é½å¸¦æ¥æ°åè½åæ¹è¿ã"}),children:[e(m.line,{x1:70,y1:110,x2:810,y2:110,stroke:"var(--line)",strokeWidth:3,initial:{pathLength:0},animate:{pathLength:1},transition:{duration:1.4}}),n.map((i,s)=>t(m.g,{initial:{opacity:0,scale:.8}
15,animate:{opacity:1,scale:1},transition:{delay:.2+s*.3},style:{transformOrigin:`${i.cx}px 110px`},children:[i.pulse?e(Y,{cx:i.cx,cy:110,r:12,color:i.c}):e("circle",{cx:i.cx,cy:110,r:10,fill:i.c}),e("rect",{x:i.cx-60,y:i.top?40:130,width:140,height:46,rx:10,fill:"var(--card)",stroke:i.pulse?d:"var(--line)",strokeWidth:i.pulse?2:1.5}),e("text",{x:i.cx-46,y:i.top?60:150,fontSize:12,fontWeight:700,fill:l,children:i.title}),e("text",{x:i.cx-46,y:i.top?77:167,fontSize:11,fill:p,children:i.sub})]},s))]})},Ya={"build-loop":Ta,"payment-funnel":La,"preview-vs-production":Ea,"project-types":Da,modes:Ma,"hot-reload":Na,"agents-team":qa,"knowledge-base":Fa,prompting:Ra,templates:Ga,database:ja,secrets:Ba,"custom-domain":Wa,email:Va,github:Oa,credits:_a,plans:Ua,media:Ka,queue:Ha,"create-project":$a,golive:Qa,changelog:Za},Ja=({name:a})=>{const n=Ya[a.trim()];return n?e(n,{}):null};function Q(a){return a.toLowerCase().replace(/[^a-z0-9\s-]/g,"").replace(/\s+/g,"-").replace(/-+/g,"-").trim()}function Xa(a){const n=[],i=a.split(` 16`);for(const s of i){const o=s.match(/^## (.+)/),r=s.match(/^### (.+)/);o?n.push({id:Q(o[1]),text:o[1],level:2}):r&&n.push({id:Q(r[1]),text:r[1],level:3})}return n}const ei={info:{icon:e(ge,{className:"w-4 h-4"}),border:"border-blue-500/40",bg:"bg-blue-50 dark:bg-blue-500/10",iconColor:"text-blue-500 dark:text-blue-400",titleColor:"text-blue-600 dark:text-blue-300"},tip:{icon:e(be,{className:"w-4 h-4"}),border:"border-emerald-500/40",bg:"bg-emerald-50 dark:bg-emerald-500/10",iconColor:"text-emerald-500 dark:text-emerald-400",titleColor:"text-emerald-600 dark:text-emerald-300"},warning:{icon:e(fe,{className:"w-4 h-4"}),border:"border-amber-500/40",bg:"bg-amber-50 dark:bg-amber-500/10",iconColor:"text-amber-500 dark:text-amber-400",titleColor:"text-amber-600 dark:text-amber-300"},danger:{icon:e(He,{className:"w-4 h-4"}),border:"border-red-500/40",bg:"bg-red-50 dark:bg-red-500/10",iconColor:"text-red-500 dark:text-red-400",titleColor:"text-red-600 dark:text-red-300"}},ai={info:"Info",tip:"Tip",warning:"Warning",danger:"Danger"};function ii(a){const n=ee.Children.toArray(a)[0];if(!n||typeof n!="object"||!("props"in n))return null;const i=n.props?.children;if(typeof i!="string"&&!Array.isArray(i))return null;const s=typeof i=="string"?i:String(i[0]??""),o=[[/^\[!TIP\]/i,"tip"],[/^\[!INFO\]/i,"info"],[/^\[!WARNING\]/i,"warning"],[/^\[!DANGER\]/i,"danger"],[/^ð¡\s?/i,"tip"],[/^â¹ï¸\s?/i,"info"],[/^â ï¸\s?/i,"warning"],[/^ð¨\s?/i,"danger"]];for(const[r,c]of o)if(r.test(s)){const h=typeof i=="string"?i.replace(r,"").trim():[String(i[0]).replace(r,"").trim(),...i.slice(1)],v=ee.Children.toArray(a).slice(1);return{type:c,content:t(he,{children:[(Array.isArray(h),h),v]})}}return null}function ti(){const[a,n]=ee.useState(()=>typeof document<"u"&&document.documentElement.classList.contains("dark"));return ee.useEffect(()=>{const i=new MutationObserver(()=>{n(document.documentElement.classList.contains("dark"))});return i.observe(document.documentElement,{attributes:!0,attributeFilter:["class"]}),()=>i.disconnect()},[]),a}const Ce=({content:a,className:n=""})=>{const i=ti(),s=g.useMemo(()=>({h1:({children:o,...r})=>{const c=String(o),h=Q(c);return e("h1",{id:h,className:"text-3xl sm:text-4xl font-bold text-gray-900 dark:text-white mt-0 mb-6 pb-3 border-b border-gray-200 dark:border-zinc-800",...r,children:o})},h2:({children:o,...r})=>{const c=String(o),h=Q(c);return e("h2",{id:h,className:"text-2xl font-semibold text-gray-900 dark:text-white mt-10 mb-4 scroll-mt-20",...r,children:o})},h3:({children:o,...r})=>{const c=String(o),h=Q(c);return e("h3",{id:h,className:"text-xl font-semibold text-gray-800 dark:text-zinc-100 mt-8 mb-3 scroll-mt-20",...r,children:o})},h4:({children:o,...r})=>e("h4",{className:"text-lg font-medium text-gray-700 dark:text-zinc-200 mt-6 mb-2",...r,children:o}),p:({children:o,...r})=>e("p",{className:"text-gray-600 dark:text-zinc-300 leading-7 mb-4",...r,children:o}),a:({children:o,href:r,...c})=>e("a",{href:r,className:"text-blue-600 dark:text-blue-400 hover:text-blue-500 dark:hover:text-blue-300 underline underline-offset-2 decoration-blue-600/30 dark:decoration-blue-400/30 hover:decoration-blue-500/60 dark:hover:decoration-blue-300/60 transition-colors",target:r?.startsWith("http")?"_blank":void 0,rel:r?.startsWith("http")?"noopener noreferrer":void 0,...c,children:o}),ul:({children:o,...r})=>e("ul",{className:"list-disc list-outside ml-5 mb-4 space-y-1.5 text-gray-600 dark:text-zinc-300 marker:text-gray-400 dark:marker:text-zinc-500",...r,children:o}),ol:({children:o,...r})=>e("ol",{className:"list-decimal list-outside ml-5 mb-4 space-y-1.5 text-gray-600 dark:text-zinc-300 marker:text-gray-400 dark:marker:text-zinc-500",...r,children:o}),li:({children:o,...r})=>e("li",{className:"leading-7 pl-1",...r,children:o}),blockquote:({children:o,...r})=>{const c=ii(o);if(c){const h=ei[c.type];return t("div",{className:`${h.bg} ${h.border} border-l-4 rounded-r-lg px-4 py-3 my-4`,...r,children:[t("div",{className:`flex items-center gap-2 ${h.iconColor} font-medium text-sm mb-1`,children:[h.icon,e("span",{className:h.titleColor,children:ai[c.type]})]}),e("div",{className:"text-gray-600 dark:text-zinc-300 text-sm leading-relaxed [&>p]:mb-0",children:c.content})]})}return e("blockquote",{className:"border-l-4 border-gray-300 dark:border-zinc-700 pl-4 my-4 text-gray-500 dark:text-zinc-400 italic",...r,children:o})},pre:({children:o})=>e(he,{children:o}),code({node:o,inline:r,className:c,children:h,...v}){const f=/language-(\w+)/.exec(c||"");return!r&&f&&f[1]==="anim"?e(Ja,{name:String(h).replace(/\n$/,"").trim()}
16):!r&&f?t("div",{className:"relative group my-4 rounded-lg overflow-hidden border border-gray-200 dark:border-zinc-800",children:[e("div",{className:"flex items-center justify-between px-4 py-2 bg-gray-50 dark:bg-zinc-800/80 border-b border-gray-200 dark:border-zinc-700/50",children:e("span",{className:"text-xs font-mono text-gray-500 dark:text-zinc-400",children:f[1]})}),e(le,{style:i?de:ce,language:f[1],PreTag:"div",customStyle:{margin:0,borderRadius:0,fontSize:"0.85em",background:i?"rgb(24, 24, 27)":"rgb(250, 250, 250)",padding:"1rem"},...v,children:String(h).replace(/\n$/,"")})]}):!r&&!f?e("div",{className:"my-4 rounded-lg overflow-hidden border border-gray-200 dark:border-zinc-800",children:e(le,{style:i?de:ce,language:"text",PreTag:"div",customStyle:{margin:0,borderRadius:0,fontSize:"0.85em",background:i?"rgb(24, 24, 27)":"rgb(250, 250, 250)",padding:"1rem"},...v,children:String(h).replace(/\n$/,"")})}):e("code",{className:"bg-gray-100 dark:bg-zinc-800 text-blue-600 dark:text-blue-300 px-1.5 py-0.5 rounded text-[0.85em] font-mono",...v,children:h})},table:({children:o,...r})=>e("div",{className:"my-4 overflow-x-auto rounded-lg border border-gray-200 dark:border-zinc-800",children:e("table",{className:"min-w-full text-sm",...r,children:o})}),thead:({children:o,...r})=>e("thead",{className:"bg-gray-50 dark:bg-zinc-800/60",...r,children:o}),th:({children:o,...r})=>e("th",{className:"px-4 py-2.5 text-left text-xs font-semibold text-gray-600 dark:text-zinc-300 uppercase tracking-wider",...r,children:o}),td:({children:o,...r})=>e("td",{className:"px-4 py-2.5 text-gray-600 dark:text-zinc-300 border-t border-gray-100 dark:border-zinc-800/60",...r,children:o}),hr:o=>e("hr",{className:"border-gray-200 dark:border-zinc-800 my-8",...o}),img:({alt:o,src:r,...c})=>t("span",{className:"block my-6",children:[e("img",{alt:o,src:r,className:"block w-full mx-auto rounded-xl border border-gray-200 dark:border-zinc-800 shadow-sm bg-white dark:bg-zinc-900/40",loading:"lazy",...c}),o?e("span",{className:"block text-center text-xs text-gray-500 dark:text-zinc-400 mt-2.5 italic px-4",children:o}):null]}),strong:({children:o,...r})=>e("strong",{className:"text-gray-900 dark:text-white font-semibold",...r,children:o}),em:({children:o,...r})=>e("em",{className:"text-gray-600 dark:text-zinc-300 italic",...r,children:o})}),[i]);return e("div",{className:`docs-markdown max-w-none ${n}`,children:e(fa,{remarkPlugins:[va,ka],components:s,children:a})})},ni=[{icon:Qe,label:"Bold",before:"**",after:"**"},{icon:Ze,label:"Italic",before:"_",after:"_"},{icon:ne,label:"Inline code",before:"`",after:"`"},{divider:!0},{icon:Ye,label:"H1",before:"# ",after:"",line:!0},{icon:Je,label:"H2",before:"## ",after:"",line:!0},{icon:Xe,label:"H3",before:"### ",after:"",line:!0},{divider:!0},{icon:ea,label:"Bullet list",before:"- ",after:"",line:!0},{icon:aa,label:"Numbered list",before:"1. ",after:"",line:!0},{icon:ia,label:"Checklist",before:"- [ ] ",after:"",line:!0},{divider:!0},{icon:ta,label:"Link",before:"[",after:"](url)"},{icon:pe,label:"Image",before:"![alt](",after:")"},{icon:na,label:"Blockquote",before:"> ",after:"",line:!0},{icon:oa,label:"Horizontal rule",before:` 17--- 18`,after:"",line:!0},{icon:ra,label:"Table",before:` 19| Column 1 | Column 2 | 20|----------|----------| 21| Cell | Cell | 22`,after:"",line:!0},{divider:!0},{icon:be,label:"Tip callout",before:"> [!TIP] ",after:"",line:!0},{icon:ge,label:"Info callout",before:"> [!INFO] ",after:"",line:!0},{icon:fe,label:"Warning callout",before:"> [!WARNING] ",after:"",line:!0}],oi=({initialContent:a,initialTitle:n,slug:i,lang:s,onSave:o,onCancel:r})=>{const[c,h]=g.useState(a),[v,f]=g.useState(n),[C,G]=g.useState("split"),[R,D]=g.useState(!1),[x,T]=g.useState(!1),q=g.useRef(null);g.useEffect(()=>{T(c!==a||v!==n)},[c,v,a,n]);const N=g.useCallback((b,j,U)=>{const k=q.current;if(!k)return;const L=k.selectionStart,F=k.selectionEnd,B=c.substring(L,F);let K,W;if(U){const H=c.lastIndexOf(` 23`,L-1)+1;K=c.substring(0,H)+b+c.substring(H),W=L+b.length}else K=c.substring(0,L)+b+B+j+c.substring(F),W=B?L+b.length+B.length+j.length:L+b.length;h(K),requestAnimationFrame(()=>{k.focus(),k.setSelectionRange(W,W)})},[c]),_=g.useCallback(async()=>{D(!0);try{await o(c,v)}finally{D(!1)}},[c,v,o]),ie=g.useCallback(b=>{(b.metaKey||b.ctrlKey)&&b.key==="s"&&(b.preventDefault(),_())},[_]);return t("div",{className:"fixed inset-0 z-50 bg-white dark:bg-zinc-950 flex flex-col",onKeyDown:ie,children:[t("div",{className:"flex items-center justify-between px-4 h-14 border-b border-gray-200 dark:border-zinc-800 shrink-0",children:[t("div",{className:"flex items-center gap-3",children:[e("button",{onClick:r,className:"p-1.5 text-gray-500 dark:text-zinc-400 hover:text-gray-900 dark:hover:text-white rounded hover:bg-gray-100 dark:hover:bg-zinc-800",children:e(ue,{className:"w-5 h-5"})}),t("div",{className:"flex items-center gap-2 text-sm text-gray-500 dark:text-zinc-400",children:[e("span",{className:"text-gray-400 dark:text-zinc-500",children:"docs"}),e("span",{className:"text-gray-300 dark:text-zinc-600",children:"/"}),e("span",{className:"text-gray-700 dark:text-zinc-300",children:i}),e("span",{className:"text-gray-300 dark:text-zinc-600",children:"/"}),e("span",{className:"uppercase text-xs font-medium px-1.5 py-0.5 rounded bg-gray-100 dark:bg-zinc-800 text-gray-500 dark:text-zinc-400",children:s})]}
23),x&&e("span",{className:"text-xs text-amber-600 dark:text-amber-500 ml-2",children:"Unsaved changes"})]}),t("div",{className:"flex items-center gap-2",children:[e("div",{className:"flex items-center bg-gray-100 dark:bg-zinc-800 rounded-lg p-0.5",children:["edit","split","preview"].map(b=>e("button",{onClick:()=>G(b),className:`px-3 py-1 text-xs font-medium rounded-md transition-colors ${C===b?"bg-white dark:bg-zinc-700 text-gray-900 dark:text-white shadow-sm":"text-gray-500 dark:text-zinc-400 hover:text-gray-700 dark:hover:text-zinc-300"}`,children:b==="edit"?e(ne,{className:"w-3.5 h-3.5"}):b==="preview"?e(se,{className:"w-3.5 h-3.5"}):t("span",{className:"flex gap-1",children:[e(ne,{className:"w-3.5 h-3.5"}),e(se,{className:"w-3.5 h-3.5"})]})},b))}),t("button",{onClick:_,disabled:R||!x,className:"flex items-center gap-2 px-4 py-1.5 text-sm font-medium rounded-lg bg-indigo-600 hover:bg-indigo-500 text-white disabled:opacity-40 disabled:cursor-not-allowed transition-colors",children:[R?e(ve,{className:"w-4 h-4 animate-spin"}):e($e,{className:"w-4 h-4"}),R?"Savingâ¦":"Save"]})]})]}),C!=="preview"&&e("div",{className:"flex items-center gap-0.5 px-4 h-10 border-b border-gray-100 dark:border-zinc-800/50 bg-gray-50/50 dark:bg-zinc-900/50 shrink-0 overflow-x-auto",children:ni.map((b,j)=>{if("divider"in b)return e("div",{className:"w-px h-5 bg-gray-200 dark:bg-zinc-700 mx-1"},`d${j}`);const U=b.icon;return e("button",{title:b.label,onClick:()=>N(b.before,b.after,"line"in b?b.line:!1),className:"p-1.5 text-gray-400 dark:text-zinc-500 hover:text-gray-700 dark:hover:text-zinc-300 hover:bg-gray-100 dark:hover:bg-zinc-800 rounded transition-colors",children:e(U,{className:"w-4 h-4"})},b.label)})}),e("div",{className:"px-4 py-2 border-b border-gray-100 dark:border-zinc-800/30 shrink-0",children:e("input",{type:"text",value:v,onChange:b=>f(b.target.value),placeholder:"Page title...",className:"w-full bg-transparent text-lg font-semibold text-gray-900 dark:text-white outline-none placeholder:text-gray-300 dark:placeholder:text-zinc-600"})}),t("div",{className:"flex-1 flex min-h-0",children:[C!=="preview"&&e("div",{className:`flex flex-col ${C==="split"?"w-1/2 border-r border-gray-200 dark:border-zinc-800":"w-full"}`,children:e("textarea",{ref:q,value:c,onChange:b=>h(b.target.value),spellCheck:!1,className:"flex-1 w-full p-4 bg-white dark:bg-zinc-950 text-gray-700 dark:text-zinc-300 text-sm font-mono leading-relaxed resize-none outline-none placeholder:text-gray-300 dark:placeholder:text-zinc-700",placeholder:"Write markdown content here..."})}),C!=="edit"&&e("div",{className:`overflow-y-auto ${C==="split"?"w-1/2":"w-full"}`,children:e("div",{className:"max-w-3xl mx-auto p-6",children:e(Ce,{content:c})})})]})]})},ri=a=>`Explain this page of the Coderblock documentation: ${a}`,si=({className:a})=>e("svg",{viewBox:"0 0 24 24",fill:"currentColor","aria-hidden":!0,className:a,children:e("path",{d:"M22.2819 9.8211a5.9847 5.9847 0 0 0-.5157-4.9108 6.0462 6.0462 0 0 0-6.5098-2.9A6.0651 6.0651 0 0 0 4.9807 4.1818a5.9847 5.9847 0 0 0-3.9977 2.9 6.0462 6.0462 0 0 0 .7427 7.0966 5.98 5.98 0 0 0 .511 4.9107 6.051 6.051 0 0 0 6.5146 2.9001A5.9847 5.9847 0 0 0 13.2599 24a6.0557 6.0557 0 0 0 5.7718-4.2058 5.9894 5.9894 0 0 0 3.9977-2.9001 6.0557 6.0557 0 0 0-.7475-7.0729zm-9.022 12.6081a4.4755 4.4755 0 0 1-2.8764-1.0408l.1419-.0804 4.7783-2.7582a.7948.7948 0 0 0 .3927-.6813v-6.7369l2.02 1.1686a.071.071 0 0 1 .038.052v5.5826a4.504 4.504 0 0 1-4.4945 4.4944zm-9.6607-4.1254a4.4708 4.4708 0 0 1-.5346-3.0137l.142.0852 4.783 2.7582a.7712.7712 0 0 0 .7806 0l5.8428-3.3685v2.3324a.0804.0804 0 0 1-.0332.0615L9.74 19.9502a4.4992 4.4992 0 0 1-6.1408-1.6464zM2.3408 7.8956a4.485 4.485 0 0 1 2.3655-1.9728V11.6a.7664.7664 0 0 0 .3879.6765l5.8144 3.3543-2.0201 1.1685a.0757.0757 0 0 1-.071 0l-4.8303-2.7865A4.504 4.504 0 0 1 2.3408 7.872zm16.5963 3.8558L13.1038 8.364 15.1192 7.2a.0757.0757 0 0 1 .071 0l4.8303 2.7913a4.4944 4.4944 0 0 1-.6765 8.1042v-5.6772a.79.79 0 0 0-.407-.667zm2.0107-3.0231l-.142-.0852-4.7735-2.7818a.7759.7759 0 0 0-.7854 0L9.409 9.2297V6.8974a.0662.0662 0 0 1 .0284-.0615l4.8303-2.7866a4.4992 4.4992 0 0 1 6.6802 4.66zM8.3065 12.863l-2.02-1.1638a.0804.0804 0 0 1-.038-.0567V6.0742a4.4992 4.4992 0 0 1 7.3757-3.4537l-.142.0805L8.704 5.459a.7948.7948 0 0 0-.3927.6813zm
231.0976-2.3654l2.602-1.4998 2.6069 1.4998v2.9994l-2.5974 1.4997-2.6067-1.4997Z"})}),li=({className:a})=>e("svg",{viewBox:"0 0 24 24",fill:"currentColor","aria-hidden":!0,className:a,children:e("path",{d:"M17.3041 3.541h-3.6718l6.696 16.918H24Zm-10.6082 0L0 20.459h3.7442l1.3693-3.5527h7.0052l1.3693 3.5528h3.7442L10.5363 3.541Zm-.3712 10.2232 2.2914-5.9456 2.2914 5.9456Z"})}),te="flex w-full items-center gap-2.5 px-3 py-2 text-[13px] text-gray-600 dark:text-zinc-300 hover:bg-gray-100 dark:hover:bg-zinc-800/70 hover:text-gray-900 dark:hover:text-white transition-colors focus:outline-none focus-visible:bg-gray-100 dark:focus-visible:bg-zinc-800/70",di=({markdown:a,slug:n,lang:i})=>{const[s,o]=g.useState(!1),[r,c]=g.useState(!1),h=g.useRef(null),v=g.useMemo(()=>`${typeof window<"u"?window.location.origin:"https://coderblock.ai"}/docs/${n}`,[n]),f=g.useMemo(()=>encodeURIComponent(ri(v)),[v]),C=`https://chatgpt.com/?q=${f}`,G=`https://claude.ai/new?q=${f}`;g.useEffect(()=>{if(!s)return;const x=q=>{h.current&&!h.current.contains(q.target)&&o(!1)},T=q=>{q.key==="Escape"&&o(!1)};return document.addEventListener("mousedown",x),document.addEventListener("keydown",T),()=>{document.removeEventListener("mousedown",x),document.removeEventListener("keydown",T)}},[s]);const R=g.useCallback(async()=>{const x=()=>{c(!0),o(!1),setTimeout(()=>c(!1),2e3)};try{await navigator.clipboard.writeText(a),x()}catch{const T=document.createElement("textarea");T.value=a,T.style.position="fixed",T.style.opacity="0",document.body.appendChild(T),T.select();try{document.execCommand("copy"),x()}catch{}document.body.removeChild(T)}},[a]),D={trigger:i==="it"?"Azioni pagina":"Page actions",chatgpt:i==="it"?"Descrivi su ChatGPT":"Describe on ChatGPT",claude:i==="it"?"Descrivi su Claude":"Describe on Claude",copy:i==="it"?"Copia come Markdown":"Copy as Markdown",copied:i==="it"?"Copiato!":"Copied!"};return t("div",{ref:h,className:"relative flex items-center justify-end",children:[t("button",{type:"button",onClick:()=>o(x=>!x),className:"flex items-center gap-1.5 rounded-lg border border-gray-200 dark:border-zinc-800 bg-white dark:bg-zinc-900 px-2.5 py-1.5 text-gray-500 dark:text-zinc-400 hover:text-gray-900 dark:hover:text-white hover:bg-gray-50 dark:hover:bg-zinc-800/70 transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500/50",title:D.trigger,"aria-label":D.trigger,"aria-haspopup":"menu","aria-expanded":s,children:[r?e(sa,{className:"h-4 w-4 text-emerald-500"}):e(la,{className:"h-4 w-4"}),e(me,{className:`h-3.5 w-3.5 transition-transform ${s?"rotate-180":""}`})]}),s&&t("div",{role:"menu",className:"absolute right-0 top-full z-50 mt-1.5 w-56 overflow-hidden rounded-xl border border-gray-200 dark:border-zinc-800 bg-white dark:bg-zinc-900 py-1 shadow-lg shadow-black/5 dark:shadow-black/40",children:[t("a",{href:C,target:"_blank",rel:"noopener noreferrer",role:"menuitem",className:te,onClick:()=>o(!1),children:[e(si,{className:"h-4 w-4 flex-shrink-0"}),e("span",{className:"flex-1",children:D.chatgpt})]}),t("a",{href:G,target:"_blank",rel:"noopener noreferrer",role:"menuitem",className:te,onClick:()=>o(!1),children:[e(li,{className:"h-4 w-4 flex-shrink-0"}),e("span",{className:"flex-1",children:D.claude})]}),e("div",{className:"my-1 h-px bg-gray-100 dark:bg-zinc-800"}),t("button",{type:"button",role:"menuitem",onClick:R,className:te,children:[e(da,{className:"h-4 w-4 flex-shrink-0"}),e("span",{className:"flex-1 text-left",children:D.copy})]})]})]})},X={async list(a){const n=a?`?lang=${a}`:"",{data:i}=await J.get(`/docs/content${n}`);return i},async get(a,n){const{data:i}=await J.get(`/docs/content/${a}/${n}`);return i},async update(a,n,i){const{data:s}=await J.put(`/docs/content/${a}/${n}`,i);return s},async seed(a){const{data:n}=await J.post("/docs/content/seed",a);return n}},ci={welcome:{es:`# Bienvenido a Coderblock 24 25\`\`\`anim 26build-loop 27\`\`\` 28 29Coderblock es una plataforma de **vibe coding** que te permite crear aplicaciones web fullstack (frontend, backend y base de datos) simplemente describiendo lo que quieres en lenguaje natural. No necesitas experiencia en programación: nuestro agente de IA se encarga de todo, desde la estructura de las páginas hasta la lógica del servidor y el despliegue en producción. 30 31## ¿Qué es el Vibe Coding? 32
33El **vibe coding** es un nuevo paradigma de desarrollo de software en el que describes tu idea y la inteligencia artificial escribe el código por ti. A diferencia de los creadores de webs tradicionales de arrastrar y soltar, con Coderblock obtienes código real y limpio (React, TypeScript, Tailwind CSS para el frontend, Python y FastAPI para el backend) que puedes exportar, modificar y controlar por completo. 34 35## Cómo funciona 36 371. **Describe** lo que quieres construir en lenguaje natural (español, inglés o italiano) 382. El **agente de IA** analiza tu petición, planifica los cambios y genera código en tiempo real 393. **Vista previa en vivo**: ve los cambios al instante en el navegador en \`*.coderblock.dev\` 404. **Itera**: sigue chateando para añadir funciones, corregir errores o refinar el diseño 415. **Publica** con un clic en un dominio \`.coderblock.app\` o en tu propio dominio 42 43## Qué puedes construir 44 45Coderblock está pensado para crear aplicaciones web completas. Algunos ejemplos: 46 47- **E-commerce**: catálogo de productos, carrito, pago con Stripe 48- **Plataformas de reservas**: calendarios, disponibilidad, pagos 49- **Paneles analÃticos**: gráficos, métricas, exportación de datos 50- **Blogs y CMS**: gestión de contenidos, categorÃas, SEO 51- **SaaS**: autenticación, panel de usuario, suscripciones 52- **Portfolios y landing pages**: diseño responsive, animaciones, formularios de contacto 53- **Juegos de navegador**: con Phaser.js o Three.js para experiencias 3D 54 55## El stack tecnológico 56 57| Componente | TecnologÃa | 58|-----------|------------| 59| Frontend | React 18 + TypeScript + Vite + Tailwind CSS | 60| Backend | Python + FastAPI | 61| Base de datos | NeonDB (PostgreSQL serverless) | 62| Almacenamiento | AWS S3 | 63| Vista previa | VM Fly.io con Vite HMR | 64| Producción | Contenedor Docker en Fly.io | 65| Pagos | Stripe | 66| Email | Resend | 67| Autenticación | Login social (Google, GitHub) | 68 69> [!INFO] Coderblock ofrece dos tipos de proyecto: **Web app** (backend gestionado, recomendado) y **Web Platform** (Python + FastAPI). La tabla anterior refleja Web Platform; con Web app el backend está incluido y gestionado por ti. Más información en [Web app vs Web Platform](/docs/project-types). 70 71## Primeros pasos 72 73\`\`\`anim 74create-project 75\`\`\` 76 77- Crea un nuevo proyecto desde el [panel](/apps) 78- Elige una **plantilla de producto** (32 apps listas para usar) o un **proyecto en blanco** 79- Empieza a chatear con la IA para construir tu app 80- Usa la **vista previa en vivo** para ver los resultados en tiempo real 81- Cuando estés satisfecho, haz clic en **Deploy** para publicar 82 83> [!TIP] Usa prompts claros y especÃficos para obtener los mejores resultados. En lugar de "hazme una web", prueba "Crea una landing para un restaurante con sección hero, menú y formulario de reserva". 84 85## Recursos 86 87| Recurso | Enlace | 88|----------|------| 89| Panel | [coderblock.ai/apps](/apps) | 90| Precios | [coderblock.ai/pricing](/pricing) | 91| Estado | [status.coderblock.ai](https://status.coderblock.ai) | 92`,fr:`# Bienvenue sur Coderblock 93 94\`\`\`anim 95build-loop 96\`\`\` 97 98Coderblock est une plateforme de **vibe coding** qui te permet de créer des applications web fullstack (frontend, backend et base de données) simplement en décrivant ce que tu veux en langage naturel. Aucune expérience en programmation requise : notre agent IA s'occupe de tout, de la structure des pages à la logique serveur jusqu'au déploiement en production. 99 100## Qu'est-ce que le Vibe Coding ? 101 102Le **vibe coding** est un nouveau paradigme de développement logiciel où tu décris ton idée et l'intelligence artificielle écrit le code pour toi. Contrairement aux créateurs de sites classiques en glisser-déposer, avec Coderblock tu obtiens du vrai code propre (React, TypeScript, Tailwind CSS pour le frontend, Python et FastAPI pour le backend) que tu peux exporter, modifier et contrôler entièrement. 103 104## Comment ça marche 105 1061. **Décris** ce que tu veux construire en langage naturel (français, anglais ou italien) 1072. L'**agent IA** analyse ta demande, planifie les changements et génère le code en temps réel 1083. **Aperçu en direct** : vois les changements instantanément dans le navigateur sur \`*.coderblock.dev\` 1094. **Itère** : continue de discuter pour ajouter des fonctions, corriger des bugs ou affiner le design 1105. **Publie** en un clic sur un domaine \`.coderblock.app\` ou ton propre domaine 111 112## Ce que tu peux construire 113
114Coderblock est conçu pour créer des applications web complètes. Quelques exemples : 115 116- **E-commerce** : catalogue produits, panier, paiement Stripe 117- **Plateformes de réservation** : calendriers, disponibilités, paiements 118- **Tableaux de bord analytiques** : graphiques, métriques, export de données 119- **Blogs et CMS** : gestion de contenu, catégories, SEO 120- **SaaS** : authentification, espace utilisateur, abonnements 121- **Portfolios et landing pages** : design responsive, animations, formulaires de contact 122- **Jeux navigateur** : avec Phaser.js ou Three.js pour des expériences 3D 123 124## La stack technique 125 126| Composant | Technologie | 127|-----------|------------| 128| Frontend | React 18 + TypeScript + Vite + Tailwind CSS | 129| Backend | Python + FastAPI | 130| Base de données | NeonDB (PostgreSQL serverless) | 131| Stockage fichiers | AWS S3 | 132| Aperçu | VM Fly.io avec Vite HMR | 133| Production | Conteneur Docker sur Fly.io | 134| Paiements | Stripe | 135| E-mail | Resend | 136| Auth | Connexion sociale (Google, GitHub) | 137 138> [!INFO] Coderblock propose deux types de projet : **Web app** (backend géré, recommandé) et **Web Platform** (Python + FastAPI). Le tableau ci-dessus concerne Web Platform ; avec Web app le backend est inclus et géré pour toi. En savoir plus dans [Web app vs Web Platform](/docs/project-types). 139 140## Premiers pas 141 142\`\`\`anim 143create-project 144\`\`\` 145 146- Crée un nouveau projet depuis le [tableau de bord](/apps) 147- Choisis un **template produit** (32 apps prêtes à l'emploi) ou un **projet vierge** 148- Commence à discuter avec l'IA pour construire ton app 149- Utilise l'**aperçu en direct** pour voir les résultats en temps réel 150- Quand tu es satisfait, clique sur **Deploy** pour publier 151 152> [!TIP] Utilise des prompts clairs et précis pour de meilleurs résultats. Au lieu de « fais-moi un site », essaie « Crée une landing page pour un restaurant avec section hero, menu et formulaire de réservation ». 153 154## Ressources 155 156| Ressource | Lien | 157|----------|------| 158| Tableau de bord | [coderblock.ai/apps](/apps) | 159| Tarifs | [coderblock.ai/pricing](/pricing) | 160| Statut | [status.coderblock.ai](https://status.coderblock.ai) | 161`,de:`# Willkommen bei Coderblock 162 163\`\`\`anim 164build-loop 165\`\`\` 166 167Coderblock ist eine **Vibe-Coding**-Plattform, mit der du fullstack Web-Anwendungen (Frontend, Backend und Datenbank) erstellst, indem du einfach in natürlicher Sprache beschreibst, was du möchtest. Keine Programmiererfahrung nötig: Unser KI-Agent kümmert sich um alles â von der Seitenstruktur über die Server-Logik bis zum Produktions-Deployment. 168 169## Was ist Vibe Coding? 170 171**Vibe Coding** ist ein neues Software-Entwicklungsparadigma, bei dem du deine Idee beschreibst und die künstliche Intelligenz den Code für dich schreibt. Anders als klassische Drag-and-drop-Baukästen erhältst du mit Coderblock echten, sauberen Code (React, TypeScript, Tailwind CSS fürs Frontend, Python und FastAPI fürs Backend), den du exportieren, ändern und vollständig kontrollieren kannst. 172 173## So funktioniert es 174 1751. **Beschreibe**, was du bauen willst, in natürlicher Sprache (Deutsch, Englisch oder Italienisch) 1762. Der **KI-Agent** analysiert deine Anfrage, plant die Ãnderungen und generiert Code in Echtzeit 1773. **Live-Vorschau**: Sieh Ãnderungen sofort im Browser unter \`*.coderblock.dev\` 1784. **Iteriere**: Chatte weiter, um Funktionen hinzuzufügen, Fehler zu beheben oder das Design zu verfeinern 1795. **Veröffentliche** mit einem Klick auf einer \`.coderblock.app\`-Domain oder deiner eigenen Domain 180 181## Was du bauen kannst 182 183Coderblock ist für vollständige Web-Anwendungen gemacht. Einige Beispiele: 184 185- **E-Commerce**: Produktkatalog, Warenkorb, Stripe-Checkout 186- **Buchungsplattformen**: Kalender, Verfügbarkeit, Zahlungen 187- **Analyse-Dashboards**: Diagramme, Kennzahlen, Datenexport 188- **Blogs und CMS**: Content-Verwaltung, Kategorien, SEO 189- **SaaS**: Authentifizierung, Nutzer-Dashboard, Abonnements 190- **Portfolios und Landingpages**: responsives Design, Animationen, Kontaktformulare 191- **Browser-Spiele**: mit Phaser.js oder Three.js für 3D-Erlebnisse 192 193## Der Tech-Stack 194 195| Komponente | Technologie | 196|-----------|------------| 197| Frontend | React 18 + TypeScript + Vite + Tailwind CSS | 198| Backend | Python + FastAPI | 199| Datenbank | NeonDB (serverloses PostgreSQL) | 200| Dateispeicher | AWS S3 | 201| Vorschau | Fly.io-VM mit Vite HMR | 202| Produktion | Fly.io-Docker-Container | 203| Zahlungen | Stripe | 204| E-Mail | Resend | 205| Auth | Social Login (Google, GitHub) | 206 207> [!INFO] Coderblock bietet zwei Projekttypen: **Web app** (verwaltetes Backend, empfohlen) und **Web Platform** (Python + FastAPI). Die Tabelle oben bezieht sich auf Web Platform; bei Web app ist das Backend enthalten und wird für dich verwaltet. Mehr dazu unter [Web app vs Web Platform](/docs/project-types). 208 209## Erste Schritte 210 211\`\`\`anim 212create-project 213\`\`\` 214 215- Erstelle ein neues Projekt im [Dashboard](/apps) 216- Wähle eine **Produktvorlage** (32 einsatzbereite Apps) oder ein **leeres Projekt**
217- Beginne mit der KI zu chatten, um deine App zu bauen 218- Nutze die **Live-Vorschau**, um Ergebnisse in Echtzeit zu sehen 219- Wenn du zufrieden bist, klicke auf **Deploy**, um zu veröffentlichen 220 221> [!TIP] Nutze klare, konkrete Prompts für die besten Ergebnisse. Statt âbau mir eine Website" versuche âErstelle eine Landingpage für ein Restaurant mit Hero-Bereich, Menü und Reservierungsformular". 222 223## Ressourcen 224 225| Ressource | Link | 226|----------|------| 227| Dashboard | [coderblock.ai/apps](/apps) | 228| Preise | [coderblock.ai/pricing](/pricing) | 229| Status | [status.coderblock.ai](https://status.coderblock.ai) | 230`,zh:`# 欢è¿ä½¿ç¨ Coderblock 231 232\`\`\`anim 233build-loop 234\`\`\` 235 236Coderblock æ¯ä¸ä¸ª **vibe coding**ï¼æ°å´ç¼ç¨ï¼å¹³å°ï¼è®©ä½ åªéç¨èªç¶è¯è¨æè¿°éæ±ï¼å³å¯åå»ºå ¨æ Web åºç¨ï¼å端ãå端åæ°æ®åºï¼ãæ éç¼ç¨ç»éªï¼æ们ç AI æºè½ä½ä¼å¤çä¸åï¼ä»é¡µé¢ç»æå°æå¡å¨é»è¾ï¼ç´è³ç产ç¯å¢é¨ç½²ã 237 238## ä»ä¹æ¯ Vibe Codingï¼ 239 240**Vibe coding** æ¯ä¸ç§å ¨æ°ç软件å¼åèå¼ï¼ä½ æè¿°æ³æ³ï¼äººå·¥æºè½æ¿ä½ ç¼å代ç ãä¸ä¼ ç»çææ½å¼å»ºç«å·¥å ·ä¸åï¼ä½¿ç¨ Coderblock ä½ ä¼å¾å°çå®ãå¹²åç代ç ï¼åç«¯ç¨ ReactãTypeScriptãTailwind CSSï¼åç«¯ç¨ Python å FastAPIï¼ï¼ä½ å¯ä»¥å¯¼åºãä¿®æ¹å¹¶å®å ¨ææ§ã 241 242## å·¥ä½åç 243 2441. ç¨èªç¶è¯è¨ï¼ä¸æãè±æææ大å©æï¼**æè¿°**ä½ æ³æ建çå 容 2452. **AI æºè½ä½**åæä½ ç请æ±ãè§åæ¹å¨å¹¶å®æ¶çæ代ç 2463. **å®æ¶é¢è§**ï¼å¨æµè§å¨ä¸éè¿ \`*.coderblock.dev\` ç«å³çå°æ¹å¨ 2474. **è¿ä»£**ï¼ç»§ç»å¯¹è¯ä»¥æ·»å åè½ãä¿®å¤é®é¢æä¼å设计 2485. ä¸é®**åå¸**å° \`.coderblock.app\` ååæä½ èªå·±çèªå®ä¹åå 249 250## ä½ è½æ建ä»ä¹ 251 252Coderblock ä¸ä¸ºæ建å®æ´ç Web åºç¨è设计ãä¸äºç¤ºä¾ï¼ 253 254- **çµå**ï¼ååç®å½ãè´ç©è½¦ãStripe ç»è´¦ 255- **é¢è®¢å¹³å°**ï¼æ¥åãå¯ç¨æ§ãæ¯ä» 256- **æ°æ®çæ¿**ï¼å¾è¡¨ãææ ãæ°æ®å¯¼åº 257- **åå®¢ä¸ CMS**ï¼å 容管çãåç±»ãSEO 258- **SaaS**ï¼èº«ä»½éªè¯ãç¨æ·é¢æ¿ã订é 259- **ä½åéä¸è½å°é¡µ**ï¼ååºå¼è®¾è®¡ãå¨ç»ãè系表å 260- **æµè§å¨æ¸¸æ**ï¼ä½¿ç¨ Phaser.js æ Three.js æé 3D ä½éª 261 262## ææ¯æ 263 264| ç»ä»¶ | ææ¯ | 265|-----------|------------| 266| å端 | React 18 + TypeScript + Vite + Tailwind CSS | 267| å端 | Python + FastAPI | 268| æ°æ®åº | NeonDBï¼æ æå¡å¨ PostgreSQLï¼ | 269| æ件åå¨ | AWS S3 | 270| é¢è§ | 带 Vite HMR ç Fly.io èææº | 271| ç产 | Fly.io Docker å®¹å¨ | 272| æ¯ä» | Stripe | 273| é®ä»¶ | Resend | 274| è®¤è¯ | 社交ç»å½ï¼GoogleãGitHubï¼ | 275 276> [!INFO] Coderblock æä¾ä¸¤ç§é¡¹ç®ç±»åï¼**Web app**ï¼æ管å端ï¼æ¨èï¼å **Web Platform**ï¼Python + FastAPIï¼ãä¸è¡¨å¯¹åº Web Platformï¼ä½¿ç¨ Web app æ¶å端已å å«å¹¶ä¸ºä½ æ管ãè¯¦è§ [Web app å¯¹æ¯ Web Platform](/docs/project-types)ã 277 278## å¿«éå¼å§ 279 280\`\`\`anim 281create-project 282\`\`\` 283 284- å¨[仪表ç](/apps)ä¸å建æ°é¡¹ç® 285- éæ©ä¸ä¸ª**产å模æ¿**ï¼32 个å¼ç®±å³ç¨çåºç¨ï¼æä¸ä¸ª**空ç½é¡¹ç®** 286- å¼å§ä¸ AI è天æ¥æå»ºä½ çåºç¨ 287- 使ç¨**å®æ¶é¢è§**å³æ¶æ¥çç»æ 288- 满æåï¼ç¹å» **Deploy** åå¸ 289 290> [!TIP] 使ç¨æ¸ æ°ãå ·ä½çæ示以è·å¾æä½³ææãä¸å ¶è¯´âç»æå个ç½ç«âï¼ä¸å¦è¯è¯â为ä¸å®¶é¤å å建è½å°é¡µï¼å å«ä¸»è§è§åºãèååé¢è®¢è¡¨åâã 291 292## èµæº 293 294| èµæº | é¾æ¥ | 295|----------|------| 296| 仪表ç | [coderblock.ai/apps](/apps) | 297| ä»·æ ¼ | [coderblock.ai/pricing](/pricing) | 298| ç¶æ | [status.coderblock.ai](https://status.coderblock.ai) | 299`},"getting-started":{es:`# GuÃa rápida 300 301\`\`\`anim 302create-project 303\`\`\` 304 305Crea tu primera app en menos de 5 minutos. Esta guÃa te lleva desde el registro hasta la publicación. 306 307## 1. Crea una cuenta 308 309RegÃstrate en [coderblock.ai](/signup) con email o Google SSO. Todos los usuarios nuevos reciben **créditos gratis** para probar la plataforma. 310 311## 2. Crea un proyecto 312 313Desde el [panel](/apps), haz clic en **"Nuevo proyecto"** y elige: 314 315- **Plantilla de producto**: 32 apps completas listas para usar (e-commerce, reservas, panel, juegos, etc.). Se copian en 1-2 segundos. 316- **Proyecto en blanco**: empieza desde cero con React + Vite + TypeScript + Tailwind CSS 317 318Ponle un nombre al proyecto y, opcionalmente, una descripción de la app que quieres construir. 319 320## 3. La interfaz del editor 321 322El editor se divide en dos paneles: 323 324- **Izquierda**: Chat IA + gestor de archivos + editor de código 325- **Derecha**: vista previa en vivo de tu app 326 327En la parte inferior del chat encontrarás: 328- **Selector de modelo** (Auto, Frontier o un modelo concreto, ver [Modelos](/docs/models)) 329- **Botón de adjuntar** para subir imágenes de referencia 330- **Campo de texto** para las instrucciones a la IA 331 332## 4. Chatea con la IA 333 334Escribe en el chat lo que quieres construir. La IA analizará tu petición, generará el código y lo mostrará en la vista previa. Algunos ejemplos para empezar: 335 336\`\`\` 337Crea una landing con sección hero, funciones y precios 338\`\`\` 339 340\`\`\` 341Añade un formulario de contacto con validación de email y mensaje 342\`\`\` 343 344\`\`\` 345Crea una página "Sobre nosotros" con sección de equipo e historia de la empresa 346\`\`\` 347
348### Consejos para prompts efectivos 349 350- **Sé especÃfico**: "Crea un e-commerce de zapatillas con filtros de marca y talla" es mejor que "Hazme una web" 351- **Un paso a la vez**: primero la estructura, luego los detalles 352- **Da contexto**: puedes referenciar archivos, componentes o páginas existentes 353- **Sube capturas**: usa el adjunto para subir mockups o capturas de sitios que te gusten 354 355## 5. Vista previa en vivo 356 357La vista previa arranca automáticamente en un dominio \`*.coderblock.dev\`: 358- **Primer arranque**: ~60-90 segundos (la VM debe iniciarse) 359- **Cambios siguientes**: ~7-13 segundos (hot-reload dirigido) 360- **Navegación**: puedes hacer clic en enlaces y navegar por tu app directamente en la vista previa 361 362## 6. Itera y refina 363 364Sigue chateando con la IA para: 365- Añadir nuevas páginas y funciones 366- Modificar colores, tipografÃas y diseño 367- Integrar servicios externos (base de datos, pagos, email) 368- Corregir errores o problemas de diseño 369 370## 7. Publica 371 372Cuando estés satisfecho con el resultado: 3731. Haz clic en el botón **"Deploy"** de la barra superior 3742. En 60-90 segundos tu app estará en vivo en \`{id}.coderblock.app\` 3753. Opcionalmente, conecta un dominio personalizado 376 377> [!TIP] No tienes que esperar a que todo esté terminado para publicar. Puedes desplegar en cualquier momento y actualizar después. Las actualizaciones son mucho más rápidas que el primer deploy. 378`,fr:`# Démarrage 379 380\`\`\`anim 381create-project 382\`\`\` 383 384Crée ta première app en moins de 5 minutes. Ce guide t'emmène de l'inscription à la publication. 385 386## 1. Crée un compte 387 388Inscris-toi sur [coderblock.ai](/signup) avec e-mail ou Google SSO. Tous les nouveaux utilisateurs reçoivent des **crédits gratuits** pour tester la plateforme. 389 390## 2. Crée un projet 391 392Depuis le [tableau de bord](/apps), clique sur **« Nouveau projet »** et choisis : 393 394- **Template produit** : 32 apps complètes prêtes à l'emploi (e-commerce, réservation, tableau de bord, jeux, etc.). Copiées en 1-2 secondes. 395- **Projet vierge** : pars de zéro avec React + Vite + TypeScript + Tailwind CSS 396 397Donne un nom à ton projet et, en option, une description de l'app que tu veux construire. 398 399## 3. L'interface de l'éditeur 400 401L'éditeur est divisé en deux panneaux : 402 403- **Gauche** : Chat IA + gestionnaire de fichiers + éditeur de code 404- **Droite** : aperçu en direct de ton app 405 406En bas du chat, tu trouveras : 407- **Sélecteur de modèle** (Auto, Frontier ou un modèle précis, voir [Modèles](/docs/models)) 408- **Bouton de pièce jointe** pour envoyer des images de référence 409- **Champ de texte** pour les instructions à l'IA 410 411## 4. Discute avec l'IA 412 413Ãcris dans le chat ce que tu veux construire. L'IA analysera ta demande, générera le code et l'affichera dans l'aperçu. Quelques exemples pour commencer : 414 415\`\`\` 416Crée une landing page avec section hero, fonctionnalités et tarifs 417\`\`\` 418 419\`\`\` 420Ajoute un formulaire de contact avec validation de l'e-mail et du message 421\`\`\` 422 423\`\`\` 424Crée une page « à propos » avec section équipe et historique de l'entreprise 425\`\`\` 426 427### Conseils pour des prompts efficaces 428 429- **Sois précis** : « Crée un e-commerce de chaussures de sport avec filtres marque et taille » vaut mieux que « Fais-moi un site » 430- **Une étape à la fois** : d'abord la structure, puis les détails 431- **Donne du contexte** : tu peux référencer des fichiers, composants ou pages existants 432- **Envoie des captures** : utilise la pièce jointe pour envoyer des maquettes ou des captures de sites que tu aimes 433 434## 5. Aperçu en direct 435 436L'aperçu démarre automatiquement sur un domaine \`*.coderblock.dev\` : 437- **Premier démarrage** : ~60-90 secondes (la VM doit démarrer) 438- **Changements suivants** : ~7-13 secondes (hot-reload ciblé) 439- **Navigation** : tu peux cliquer sur les liens et naviguer dans ton app directement dans l'aperçu 440 441## 6. Itère et affine 442 443Continue de discuter avec l'IA pour : 444- Ajouter de nouvelles pages et fonctionnalités 445- Modifier couleurs, polices et mise en page 446- Intégrer des services externes (base de données, paiements, e-mail) 447- Corriger des bugs ou des problèmes de mise en page 448 449## 7. Publie 450 451Quand tu es satisfait du résultat : 4521. Clique sur le bouton **« Deploy »** dans la barre du haut 4532. En 60-90 secondes ton app sera en ligne sur \`{id}.coderblock.app\` 4543. En option, connecte un domaine personnalisé 455 456> [!TIP] Tu n'as pas à attendre que tout soit terminé pour publier. Tu peux déployer à tout moment et mettre à jour ensuite. Les mises à jour sont bien plus rapides que le premier déploiement. 457`,de:`# Erste Schritte 458 459\`\`\`anim 460create-project 461\`\`\` 462 463Baue deine erste App in unter 5 Minuten. Diese Anleitung führt dich von der Registrierung bis zur Veröffentlichung. 464 465## 1. Konto erstellen 466 467Registriere dich auf [coderblock.ai](/signup) mit E-Mail oder Google SSO. Alle neuen Nutzer erhalten **kostenlose Credits**, um die Plattform au
467szuprobieren. 468 469## 2. Projekt erstellen 470 471Klicke im [Dashboard](/apps) auf **âNeues Projekt"** und wähle: 472 473- **Produktvorlage**: 32 komplette, einsatzbereite Apps (E-Commerce, Buchung, Dashboard, Spiele usw.). In 1-2 Sekunden kopiert. 474- **Leeres Projekt**: starte von Grund auf mit React + Vite + TypeScript + Tailwind CSS 475 476Gib deinem Projekt einen Namen und optional eine Beschreibung der App, die du bauen willst. 477 478## 3. Die Editor-Oberfläche 479 480Der Editor ist in zwei Bereiche geteilt: 481 482- **Links**: KI-Chat + Dateimanager + Code-Editor 483- **Rechts**: Live-Vorschau deiner App 484 485Unten im Chat findest du: 486- **Modellauswahl** (Auto, Frontier oder ein bestimmtes Modell, siehe [Modelle](/docs/models)) 487- **Anhang-Button** zum Hochladen von Referenzbildern 488- **Textfeld** für die Anweisungen an die KI 489 490## 4. Mit der KI chatten 491 492Schreibe im Chat, was du bauen willst. Die KI analysiert deine Anfrage, generiert den Code und zeigt ihn in der Vorschau. Ein paar Beispiele für den Start: 493 494\`\`\` 495Erstelle eine Landingpage mit Hero-Bereich, Funktionen und Preisen 496\`\`\` 497 498\`\`\` 499Füge ein Kontaktformular mit E-Mail- und Nachrichtenvalidierung hinzu 500\`\`\` 501 502\`\`\` 503Erstelle eine âÃber uns"-Seite mit Team-Bereich und Firmenzeitleiste 504\`\`\` 505 506### Tipps für wirksame Prompts 507 508- **Sei konkret**: âErstelle einen Sportschuh-Shop mit Marken- und GröÃenfiltern" ist besser als âBau mir eine Website" 509- **Schritt für Schritt**: zuerst die Struktur, dann die Details 510- **Gib Kontext**: du kannst bestehende Dateien, Komponenten oder Seiten referenzieren 511- **Screenshots hochladen**: nutze den Anhang, um Mockups oder Screenshots von Seiten hochzuladen, die dir gefallen 512 513## 5. Live-Vorschau 514 515Die Vorschau startet automatisch auf einer \`*.coderblock.dev\`-Domain: 516- **Erster Start**: ~60-90 Sekunden (die VM muss booten) 517- **Weitere Ãnderungen**: ~7-13 Sekunden (gezieltes Hot-Reload) 518- **Navigation**: du kannst Links anklicken und deine App direkt in der Vorschau durchklicken 519 520## 6. Iterieren und verfeinern 521 522Chatte weiter mit der KI, um: 523- neue Seiten und Funktionen hinzuzufügen 524- Farben, Schriften und Layout zu ändern 525- externe Dienste einzubinden (Datenbank, Zahlungen, E-Mail) 526- Fehler oder Layout-Probleme zu beheben 527 528## 7. Veröffentlichen 529 530Wenn du mit dem Ergebnis zufrieden bist: 5311. Klicke auf **âDeploy"** in der oberen Leiste 5322. In 60-90 Sekunden ist deine App live unter \`{id}.coderblock.app\` 5333. Optional: verbinde eine eigene Domain 534 535> [!TIP] Du musst nicht warten, bis alles fertig ist, um zu veröffentlichen. Du kannst jederzeit deployen und später aktualisieren. Updates sind viel schneller als der erste Deploy. 536`,zh:`# å¿«éå¼å§ 537 538\`\`\`anim 539create-project 540\`\`\` 541 542å¨ 5 åéå æå»ºä½ ç第ä¸ä¸ªåºç¨ãæ¬æåå¸¦ä½ ä»æ³¨åå°åå¸ã 543 544## 1. åå»ºè´¦æ· 545 546å¨ [coderblock.ai](/signup) 使ç¨é®ç®±æ Google SSO 注åãæææ°ç¨æ·é½ä¼è·å¾**å 费积å**æ¥è¯ç¨å¹³å°ã 547 548## 2. åå»ºé¡¹ç® 549 550å¨[仪表ç](/apps)ä¸ç¹å» **âæ°å»ºé¡¹ç®â** 并éæ©ï¼ 551 552- **产å模æ¿**ï¼32 个å®æ´ãå¼ç®±å³ç¨çåºç¨ï¼çµåãé¢è®¢ãçæ¿ã游æçï¼ï¼1-2 ç§å³å¯å¤å¶ã 553- **空ç½é¡¹ç®**ï¼ä»é¶å¼å§ï¼ä½¿ç¨ React + Vite + TypeScript + Tailwind CSS 554 555为项ç®å½åï¼å¹¶å¯éå¡«åä½ æ³æ建çåºç¨æè¿°ã 556 557## 3. ç¼è¾å¨çé¢ 558 559ç¼è¾å¨å为两个é¢æ¿ï¼ 560 561- **左侧**ï¼AI è天 + æ件管çå¨ + 代ç ç¼è¾å¨ 562- **å³ä¾§**ï¼åºç¨çå®æ¶é¢è§ 563 564è天æ¡åºé¨ä½ ä¼çå°ï¼ 565- **模åéæ©å¨**ï¼AutoãFrontier ææå®æ¨¡åï¼åè§[模å](/docs/models)ï¼ 566- **é件æé®**ï¼ç¨äºä¸ä¼ åèå¾ç 567- **ææ¬è¾å ¥æ¡**ï¼ç¨äºå AI ä¸è¾¾æ令 568 569## 4. ä¸ AI è天 570 571å¨è天ä¸è¾å ¥ä½ æ³æ建çå 容ãAI ä¼åæä½ ç请æ±ãçæ代ç 并å¨é¢è§ä¸å±ç¤ºã以ä¸æ¯ä¸äºå ¥é¨ç¤ºä¾ï¼ 572 573\`\`\` 574å建ä¸ä¸ªå å«ä¸»è§è§åºãåè½åä»·æ ¼çè½å°é¡µ 575\`\`\` 576 577\`\`\` 578æ·»å ä¸ä¸ªå¸¦é®ç®±åçè¨æ ¡éªçè系表å 579\`\`\` 580 581\`\`\` 582å建ä¸ä¸ªâå ³äºæ们â页é¢ï¼å å«å¢éåºååå ¬å¸åç¨ 583\`\`\` 584 585### é«ææ示è¯çæå·§ 586 587- **å ·ä½æç¡®**ï¼âå建ä¸ä¸ªè¿å¨éçµåï¼å¸¦åçåå°ºç çéâæ¯âç»æå个ç½ç«âæ´å¥½ 588- **循åºæ¸è¿**ï¼å æç»æï¼ååç»è 589- **æä¾ä¸ä¸æ**ï¼ä½ å¯ä»¥å¼ç¨ç°æçæ件ãç»ä»¶æé¡µé¢ 590- **ä¸ä¼ æªå¾**ï¼ç¨é件ä¸ä¼ ä½ å欢ç½ç«çååå¾ææªå¾ 591 592## 5. å®æ¶é¢è§ 593 594é¢è§ä¼èªå¨å¨ \`*.coderblock.dev\` ååä¸å¯å¨ï¼ 595- **é¦æ¬¡å¯å¨**ï¼çº¦ 60-90 ç§ï¼èææºéè¦å¯å¨ï¼
596- **åç»æ´æ¹**ï¼çº¦ 7-13 ç§ï¼å®åçéè½½ï¼ 597- **导èª**ï¼ä½ å¯ä»¥ç¹å»é¾æ¥ï¼ç´æ¥å¨é¢è§ä¸æµè§ä½ çåºç¨ 598 599## 6. è¿ä»£ä¸ä¼å 600 601继ç»ä¸ AI è天æ¥ï¼ 602- æ·»å æ°é¡µé¢ååè½ 603- ä¿®æ¹é¢è²ãåä½åå¸å± 604- éæå¤é¨æå¡ï¼æ°æ®åºãæ¯ä»ãé®ä»¶ï¼ 605- ä¿®å¤ç¼ºé·æå¸å±é®é¢ 606 607## 7. åå¸ 608 609å½ä½ 对ç»æ满ææ¶ï¼ 6101. ç¹å»é¡¶æ ç **âDeployâ** æé® 6112. 60-90 ç§åï¼ä½ çåºç¨å°å¨ \`{id}.coderblock.app\` ä¸çº¿ 6123. å¯éï¼è¿æ¥èªå®ä¹åå 613 614> [!TIP] ä¸å¿ çå°ä¸åé½å®ææåå¸ãä½ å¯ä»¥éæ¶é¨ç½²å¹¶å¨ä¹åæ´æ°ãæ´æ°æ¯é¦æ¬¡é¨ç½²å¿«å¾å¤ã 615`},"project-types":{es:`# Web app vs Web Platform 616 617\`\`\`anim 618project-types 619\`\`\` 620 621Cuando creas un proyecto nuevo, Coderblock te pide elegir un **tipo de proyecto**. Es la primera decisión importante: define las tecnologÃas que la IA usará para construir tu app. No necesitas ser técnico: esta guÃa te ayuda a elegir en un minuto. 622 623## Las dos opciones de un vistazo 624 625| | Web app | Web Platform | 626|---|---|---| 627| Ideal para | SaaS, paneles, marketplaces, apps de IA | Integraciones B2B, proyectos ML/datos, equipos Python | 628| Tiempo para empezar | RapidÃsimo (vista previa en segundos) | Alto | 629| Backend | Incluido y gestionado automáticamente | Python + FastAPI | 630| Etiqueta | Recomendado | Estable | 631 632## Web app (recomendado) 633 634La opción **por defecto y recomendada** para la mayorÃa de proyectos. Obtienes una app web completa con todo el "detrás de escena" ya configurado y gestionado por Coderblock: 635 636- **Inicio de sesión y cuentas de usuario** seguros de serie (email/contraseña y login social) 637- **Base de datos y almacenamiento** integrados 638- **Actualizaciones en tiempo real** y **funciones de IA** incluidas 639- **Vista previa en vivo en segundos** 640 641No configuras nada técnico: describe la app y la IA la construye. Perfecto para lanzar un producto rápido, validar una idea o crear un SaaS. 642 643> [!TIP] Si tienes dudas, elige **Web app**. Cubre la gran mayorÃa de casos y es la forma más rápida de estar en lÃnea. 644 645## Web Platform 646 647Pensado para quien necesita un **backend Python a medida**. Es la opción correcta para: 648 649- **Integraciones B2B** complejas y APIs personalizadas 650- **Machine learning, análisis de datos** y lógica de cálculo 651- Equipos que ya trabajan en el ecosistema **Python** 652 653Usa **Python + FastAPI** con una base de datos PostgreSQL y se combina con las plantillas 3D (Three.js / React Three Fiber). 654 655> [!INFO] Las **plantillas de producto** (p. ej. plataforma de reservas, tienda online) están disponibles en **Web Platform**. Con **Web app** la IA construye todo desde cero según tu petición. 656 657## Comparación completa 658 659| Función | Web app | Web Platform | 660|---|---|---| 661| Frontend | React + TypeScript + Tailwind | React + TypeScript + Tailwind | 662| Backend | Gestionado (auth, BD, almacenamiento, IA) | Python + FastAPI | 663| Base de datos | Incluida | PostgreSQL | 664| Login de usuario | De serie | Configurable | 665| Funciones de IA | Incluidas (ver AI Agents) | Disponibles | 666| Plantillas de producto | Construcción a medida | 32 plantillas listas | 667| Ideal para | SaaS, apps de IA, MVP | B2B, ML, integraciones | 668 669## Cómo elegirlo y cambiarlo 670 671Elige el tipo de proyecto en la pantalla de **creación del proyecto**, usando las dos tarjetas. La elección determina las tecnologÃas y las sugerencias de la IA. 672 673> [!WARNING] El tipo de proyecto se define al crearlo. Si necesitas cambiarlo, lo más sencillo es crear un proyecto nuevo con el tipo correcto. 674 675## ¿Qué sigue? 676 677- ¿Elegiste **Web app**? Añade chat de IA e imágenes desde la sección [AI Agents](/docs/ai-agents). 678- ¿Quieres empezar desde una plantilla? Consulta [Plantillas de producto](/docs/product-templates). 679`,fr:`# Web app vs Web Platform 680 681\`\`\`anim 682project-types 683\`\`\` 684 685Quand tu crées un nouveau projet, Coderblock te demande de choisir un **type de projet**. C'est la première décision importante : elle définit les technologies que l'IA utilisera pour construire ton app. Pas besoin d'être technique : ce guide t'aide à choisir en une minute. 686 687## Les deux options en un coup d'Åil 688 689| | Web app | Web Platform | 690|---|---|---| 691| Idéal pour | SaaS, tableaux de bord, marketplaces, apps IA | Intégrations B2B, projets ML/données, équipes Python | 692| Temps pour démarrer | Le plus rapide (aperçu en secondes) | Ãlevé | 693| Backend | Inclus et géré automatiquement | Python + FastAPI | 694| Badge | Recommandé | Stable | 695 696## Web app (recommandé) 697 698Le choix **par défaut et recommandé** pour la plupart des projets. Tu obtiens une app web complète avec toutes les « coulisses » dé
698jà configurées et gérées par Coderblock : 699 700- **Connexion et comptes utilisateurs** sécurisés prêts à l'emploi (e-mail/mot de passe et login social) 701- **Base de données et stockage de fichiers** intégrés 702- **Mises à jour en temps réel** et **fonctions IA** incluses 703- **Aperçu en direct en quelques secondes** 704 705Tu ne configures rien de technique : décris l'app et l'IA la construit. Parfait pour lancer un produit vite, valider une idée ou créer un SaaS. 706 707> [!TIP] En cas de doute, choisis **Web app**. Il couvre la grande majorité des cas et c'est le moyen le plus rapide d'être en ligne. 708 709## Web Platform 710 711Conçu pour ceux qui ont besoin d'un **backend Python sur mesure**. C'est le bon choix pour : 712 713- **Intégrations B2B** complexes et APIs personnalisées 714- **Machine learning, analyse de données** et logique de calcul 715- Les équipes travaillant déjà dans l'écosystème **Python** 716 717Il utilise **Python + FastAPI** avec une base de données PostgreSQL et s'associe aux templates 3D (Three.js / React Three Fiber). 718 719> [!INFO] Les **templates produit** (p. ex. plateforme de réservation, boutique en ligne) sont disponibles sur **Web Platform**. Avec **Web app**, l'IA construit tout à partir de zéro selon ta demande. 720 721## Comparaison complète 722 723| Fonctionnalité | Web app | Web Platform | 724|---|---|---| 725| Frontend | React + TypeScript + Tailwind | React + TypeScript + Tailwind | 726| Backend | Géré (auth, BD, stockage, IA) | Python + FastAPI | 727| Base de données | Incluse | PostgreSQL | 728| Login utilisateur | Prêt à l'emploi | Configurable | 729| Fonctions IA | Incluses (voir AI Agents) | Disponibles | 730| Templates produit | Construction sur mesure | 32 templates prêts | 731| Idéal pour | SaaS, apps IA, MVP | B2B, ML, intégrations | 732 733## Comment le choisir et le changer 734 735Choisis le type de projet sur l'écran de **création du projet**, via les deux cartes. Le choix détermine les technologies et les suggestions de l'IA. 736 737> [!WARNING] Le type de projet est fixé à la création. Si tu dois le changer, le plus simple est de créer un nouveau projet avec le bon type. 738 739## Et ensuite ? 740 741- Tu as choisi **Web app** ? Ajoute le chat IA et les images depuis la section [AI Agents](/docs/ai-agents). 742- Envie de partir d'un template ? Voir [Templates produit](/docs/product-templates). 743`,de:`# Web app vs Web Platform 744 745\`\`\`anim 746project-types 747\`\`\` 748 749Wenn du ein neues Projekt erstellst, bittet dich Coderblock, einen **Projekttyp** zu wählen. Das ist die erste wichtige Entscheidung: Sie legt fest, welche Technologien die KI zum Bau deiner App verwendet. Du musst nicht technisch sein â dieser Leitfaden hilft dir, in einer Minute zu wählen. 750 751## Die zwei Optionen auf einen Blick 752 753| | Web app | Web Platform | 754|---|---|---| 755| Ideal für | SaaS, Dashboards, Marktplätze, KI-Apps | B2B-Integrationen, ML-/Daten-Projekte, Python-Teams | 756| Startzeit | Am schnellsten (Vorschau in Sekunden) | Hoch | 757| Backend | Enthalten und automatisch verwaltet | Python + FastAPI | 758| Badge | Empfohlen | Stabil | 759 760## Web app (empfohlen) 761 762Die **Standard- und empfohlene** Wahl für die meisten Projekte. Du erhältst eine komplette Web-App mit allem âhinter den Kulissen", bereits eingerichtet und von Coderblock verwaltet: 763 764- Sichere **Anmeldung & Nutzerkonten** von Haus aus (E-Mail/Passwort und Social Login) 765- Integrierte **Datenbank & Dateispeicherung** 766- **Echtzeit-Updates** und **KI-Funktionen** inklusive 767- **Live-Vorschau in Sekunden** 768 769Du konfigurierst nichts Technisches: Beschreibe die App und die KI baut sie. Perfekt, um schnell ein Produkt zu launchen, eine Idee zu validieren oder ein SaaS zu bauen. 770 771> [!TIP] Wenn du unsicher bist, wähle **Web app**. Es deckt die allermeisten Fälle ab und ist der schnellste Weg online. 772 773## Web Platform 774 775Gebaut für alle, die ein **eigenes Python-Backend** brauchen. Die richtige Wahl für: 776 777- Komplexe **B2B-Integrationen** und eigene APIs 778- **Machine Learning, Datenanalyse** und Rechenlogik 779- Teams, die bereits im **Python**-Ãkosystem arbeiten 780 781Es nutzt **Python + FastAPI** mit einer PostgreSQL-Datenbank und passt zu den 3D-Vorlagen (Three.js / React Three Fiber). 782 783> [!INFO] **Produktvorlagen** (z. B. Buchungsplattform, Online-Shop) sind auf **Web Platform** verfügbar. Bei **Web app** baut die KI alles von Grund auf nach deiner Anfrage. 784 785## Vollständiger Vergleich 786 787| Funktion | Web app | Web Platform | 788|---|---|---| 789| Frontend | React + TypeScript + Tailwind | React + TypeScript + Tailwind | 790| Backend | Verwaltet (Auth, DB, Speicher, KI) | Python + FastAPI | 791| Datenbank | Enthalten | PostgreSQL | 792| Nutzer-Login | Von Haus aus | Konfigurierbar | 793| KI-Funktionen | Enthalten (siehe AI Agents) | Verfügbar | 794| Produktvorlagen | MaÃgeschneiderter Bau | 32 fertige Vorlagen | 795| Ideal für | SaaS, KI-Apps, MVP | B2B, ML, Integrationen | 796 797## Wie du ihn wählst und änderst 798
799Wähle den Projekttyp auf dem **Projekterstellungs**-Bildschirm über die zwei Karten. Die Wahl bestimmt die Technologien und die Vorschläge der KI. 800 801> [!WARNING] Der Projekttyp wird bei der Erstellung festgelegt. Musst du ihn ändern, ist der einfachste Weg, ein neues Projekt mit dem richtigen Typ zu erstellen. 802 803## Wie geht's weiter? 804 805- **Web app** gewählt? Füge KI-Chat und Bilder über den Abschnitt [AI Agents](/docs/ai-agents) hinzu. 806- Von einer Vorlage starten? Siehe [Produktvorlagen](/docs/product-templates). 807`,zh:`# Web app å¯¹æ¯ Web Platform 808 809\`\`\`anim 810project-types 811\`\`\` 812 813å½ä½ å建æ°é¡¹ç®æ¶ï¼Coderblock ä¼è®©ä½ éæ©ä¸ä¸ª**项ç®ç±»å**ãè¿æ¯ç¬¬ä¸ä¸ªéè¦å³å®ï¼å®å³å®äº AI æ建åºç¨æç¨çææ¯ãä½ æ éæææ¯ââæ¬æåå¸®ä½ ä¸åéå ååºéæ©ã 814 815## 两ç§é项ä¸è§ 816 817| | Web app | Web Platform | 818|---|---|---| 819| éå | SaaSãçæ¿ãå¸åºå¹³å°ãAI åºç¨ | B2B éæãML/æ°æ®é¡¹ç®ãPython å¢é | 820| ä¸ææ¶é´ | æå¿«ï¼å ç§å³å¯é¢è§ï¼ | è¾é« | 821| å端 | å 置并èªå¨æ管 | Python + FastAPI | 822| æ ç¾ | æ¨è | ç¨³å® | 823 824## Web appï¼æ¨èï¼ 825 826大å¤æ°é¡¹ç®ç**é»è®¤ä¸æ¨è**éæ©ãä½ ä¼å¾å°ä¸ä¸ªå®æ´ç Web åºç¨ï¼ææâå¹åâé¨åé½å·²ç± Coderblock é 置并æç®¡ï¼ 827 828- å¼ç®±å³ç¨çå®å ¨**ç»å½ä¸ç¨æ·è´¦æ·**ï¼é®ç®±/å¯ç ä¸ç¤¾äº¤ç»å½ï¼ 829- å ç½®**æ°æ®åºä¸æ件åå¨** 830- å ç½®**å®æ¶æ´æ°**ä¸ **AI åè½** 831- **å ç§å³å¯å®æ¶é¢è§** 832 833ä½ æ éé 置任ä½ææ¯ç»èï¼æè¿°åºç¨ï¼AI å°±ä¼æ建å®ãé常éåå¿«éä¸çº¿äº§åãéªè¯æ³æ³ææ建 SaaSã 834 835> [!TIP] å¦ææ¿ä¸åï¼å°±é **Web app**ãå®è¦çäºç»å¤§å¤æ°åºæ¯ï¼æ¯æå¿«ä¸çº¿çæ¹å¼ã 836 837## Web Platform 838 839é¢åéè¦**èªå®ä¹ Python å端**çç¨æ·ãå®éåï¼ 840 841- å¤æç **B2B éæ**ä¸èªå®ä¹ API 842- **æºå¨å¦ä¹ ãæ°æ®åæ**ä¸è®¡ç®é»è¾ 843- å·²å¨ **Python** çæä¸å·¥ä½çå¢é 844 845å®ä½¿ç¨ **Python + FastAPI** æé PostgreSQL æ°æ®åºï¼å¹¶ä¸ 3D 模æ¿ï¼Three.js / React Three Fiberï¼é åã 846 847> [!INFO] **产å模æ¿**ï¼å¦é¢è®¢å¹³å°ãå¨çº¿ååºï¼å¨ **Web Platform** ä¸å¯ç¨ãä½¿ç¨ **Web app** æ¶ï¼AI ä¼æ ¹æ®ä½ ç请æ±ä»é¶æ建ä¸åã 848 849## å®æ´å¯¹æ¯ 850 851| åè½ | Web app | Web Platform | 852|---|---|---| 853| å端 | React + TypeScript + Tailwind | React + TypeScript + Tailwind | 854| å端 | æ管ï¼è®¤è¯ãæ°æ®åºãåå¨ãAIï¼ | Python + FastAPI | 855| æ°æ®åº | å ç½® | PostgreSQL | 856| ç¨æ·ç»å½ | å¼ç®±å³ç¨ | å¯é ç½® | 857| AI åè½ | å ç½®ï¼è§ AI Agentsï¼ | å¯ç¨ | 858| 产åæ¨¡æ¿ | å®å¶æ建 | 32 个ç°ææ¨¡æ¿ | 859| éå | SaaSãAI åºç¨ãMVP | B2BãMLãéæ | 860 861## å¦ä½éæ©ä¸æ´æ¹ 862 863å¨**项ç®å建**çé¢éè¿ä¸¤å¼ å¡çéæ©é¡¹ç®ç±»åã该éæ©å³å®äºææ¯æ ä¸ AI ç建议ã 864 865> [!WARNING] 项ç®ç±»åå¨å建æ¶ç¡®å®ãè¥éæ´æ¹ï¼æç®åçæ¹å¼æ¯ç¨æ£ç¡®çç±»åæ°å»ºä¸ä¸ªé¡¹ç®ã 866 867## æ¥ä¸æ¥ï¼ 868 869- éäº **Web app**ï¼å¨ [AI Agents](/docs/ai-agents) é¨åæ·»å AI è天ä¸å¾çã 870- æ³ä»æ¨¡æ¿å¼å§ï¼åè§[产å模æ¿](/docs/product-templates)ã 871`},prompting:{es:`# Prompting 872 873\`\`\`anim 874prompting 875\`\`\` 876 877Escrivir buenos prompts es la clave para obtener resultados excelentes de Coderblock. 878 879## Buenas prácticas 880 881### Sé especÃfico 882 883En lugar de escribir *"hazme una web"*, prueba: 884 885\`\`\` 886Crea una landing para un restaurante italiano con: 887- Sección hero con imagen de fondo 888- Menú con 3 categorÃas (entrantes, primeros, segundos) 889- Formulario de reserva de mesa 890- Pie de página con mapa y contactos 891\`\`\` 892 893### Da contexto 894 895La IA tiene acceso a todos los archivos del proyecto. Si quieres modificar algo concreto, menciónalo: 896 897\`\`\` 898En el componente Header.tsx, cambia el color del logo de azul a verde 899\`\`\` 900 901### Un paso a la vez 902 903Para proyectos complejos, ve por pasos: 904 9051. Primero la estructura de la página 9062. Luego los componentes de UI 9073. Por último la lógica y las APIs 908 909> [!WARNING] Evita prompts muy largos con muchas peticiones distintas. La IA funciona mejor con tareas enfocadas. 910 911## Ejemplos de prompts 912 913| Objetivo | Prompt | 914|------|--------| 915| Nueva página | *"Crea una página Acerca de con sección de equipo"* | 916| Cambio de estilo | *"Cambia el tema a modo oscuro"* | 917| Añadir función | *"Añade autenticación con email y contraseña"* | 918| Corregir error | *"El botón de envÃo no funciona, revisa el formulario"* | 919| Integración | *"Integra Stripe para los pagos"* | 920`,fr:`# Prompting 921 922\`\`\`anim 923prompting 924\`\`\` 925 926Ãcrire de bons prompts est la clé pour obtenir d'excellents résultats avec Coderblock. 927 928## Bonnes pratiques 929 930### Sois précis 931 932Au lieu d'écrire *« fais-moi un site »*, essaie : 933 934\`\`\` 935Crée une landing page pour un restaurant italien avec : 936- Section hero avec image de fond 937- Menu avec 3 catégories (entrées, plats, desserts) 938- Formulaire de réservation de table 939- Pied de page avec carte et contacts 940\`\`\` 941 942### Donne du contexte 943 944L'IA a accès à tous les fichiers du projet. Si tu veux modifier quelque chose de précis, mentionne-le : 945 946\`\`\` 947Dans le composant Header.tsx, change la couleur du logo de bleu à vert 948\`\`\` 949 950### Une étape à la fois 951 952Pour les projets complexes, procède par étapes : 953 9541. D'abord la structure de la page 9552. Puis les composants d'UI 9563. Enfin la logique et les APIs 957 958> [!WARNING] Ãvite les prompts très longs avec beaucoup de demandes différentes. L'IA fonctionne mieux avec des tâches ciblées. 959 960## Exemples de prompts 961 962| Objectif | Prompt | 963|------|--------| 964| Nouvelle page | *« Crée une page à propos avec une section équipe »* | 965| Changement de style | *« Passe le thème en mode sombre »* | 966| Ajouter une fonction | *« Ajoute l'authentification par e-mail et mot de passe »* |
967| Corriger un bug | *« Le bouton d'envoi ne marche pas, vérifie le formulaire »* | 968| Intégration | *« Intègre Stripe pour les paiements »* | 969`,de:`# Prompting 970 971\`\`\`anim 972prompting 973\`\`\` 974 975Gute Prompts zu schreiben ist der Schlüssel zu hervorragenden Ergebnissen mit Coderblock. 976 977## Best Practices 978 979### Sei konkret 980 981Statt *âbau mir eine Website"* versuche: 982 983\`\`\` 984Erstelle eine Landingpage für ein italienisches Restaurant mit: 985- Hero-Bereich mit Hintergrundbild 986- Menü mit 3 Kategorien (Vorspeisen, erste Gänge, Hauptgerichte) 987- Formular zur Tischreservierung 988- FuÃzeile mit Karte und Kontakten 989\`\`\` 990 991### Gib Kontext 992 993Die KI hat Zugriff auf alle Projektdateien. Willst du etwas Bestimmtes ändern, nenne es: 994 995\`\`\` 996Ãndere im Header.tsx-Komponente die Logo-Farbe von Blau auf Grün 997\`\`\` 998 999### Schritt für Schritt 1000 1001Bei komplexen Projekten gehe in Schritten vor: 1002 10031. Zuerst die Seitenstruktur 10042. Dann die UI-Komponenten 10053. Zuletzt Logik und APIs 1006 1007> [!WARNING] Vermeide sehr lange Prompts mit vielen verschiedenen Anfragen. Die KI arbeitet am besten mit fokussierten Aufgaben. 1008 1009## Beispiel-Prompts 1010 1011| Ziel | Prompt | 1012|------|--------| 1013| Neue Seite | *âErstelle eine Ãber-uns-Seite mit Team-Bereich"* | 1014| Stiländerung | *âStelle das Theme auf Dark Mode um"* | 1015| Funktion hinzufügen | *âFüge Authentifizierung mit E-Mail und Passwort hinzu"* | 1016| Fehler beheben | *âDer Absende-Button funktioniert nicht, prüfe das Formular"* | 1017| Integration | *âIntegriere Stripe für Zahlungen"* | 1018`,zh:`# Prompting 1019 1020\`\`\`anim 1021prompting 1022\`\`\` 1023 1024å好æ示è¯æ¯ä» Coderblock è·å¾ä¼ç§ç»æçå ³é®ã 1025 1026## æä½³å®è·µ 1027 1028### å ·ä½æç¡® 1029 1030ä¸å ¶å *âç»æå个ç½ç«â*ï¼ä¸å¦è¯è¯ï¼ 1031 1032\`\`\` 1033为ä¸å®¶æ大å©é¤å å建è½å°é¡µï¼å å«ï¼ 1034- 带èæ¯å¾ç主è§è§åº 1035- 3 个åç±»çèåï¼åèã第ä¸éã主èï¼ 1036- é¤æ¡é¢è®¢è¡¨å 1037- å«å°å¾åèç³»æ¹å¼ç页è 1038\`\`\` 1039 1040### æä¾ä¸ä¸æ 1041 1042AI å¯ä»¥è®¿é®é¡¹ç®çæææ件ãè¥æ³ä¿®æ¹æä¸ªå ·ä½å 容ï¼è¯·ææï¼ 1043 1044\`\`\` 1045å¨ Header.tsx ç»ä»¶ä¸ï¼æ Logo é¢è²ä»èè²æ¹ä¸ºç»¿è² 1046\`\`\` 1047 1048### 循åºæ¸è¿ 1049 1050对å¤æ项ç®ï¼åæ¥è¿è¡ï¼ 1051 10521. å å页é¢ç»æ 10532. åå UI ç»ä»¶ 10543. æååé»è¾å API 1055 1056> [!WARNING] é¿å å¨ä¸ä¸ªå¾é¿çæ示éå¡å ¥è®¸å¤ä¸åç请æ±ãAI 对èç¦çä»»å¡æææ好ã 1057 1058## æ示è¯ç¤ºä¾ 1059 1060| ç®æ | æç¤ºè¯ | 1061|------|--------| 1062| æ°é¡µé¢ | *âå建ä¸ä¸ªå å«å¢éåºåçå ³äºé¡µé¢â* | 1063| æ ·å¼ä¿®æ¹ | *âæ主é¢åæ¢ä¸ºæè²æ¨¡å¼â* | 1064| æ·»å åè½ | *âæ·»å é®ç®±åå¯ç 认è¯â* | 1065| ä¿®å¤ç¼ºé· | *âæ交æé®æ æï¼æ£æ¥ä¸ä¸è¡¨åâ* | 1066| éæ | *âéæ Stripe æ¯ä»â* | 1067`},modes:{es:`# Selector de modelo 1068 1069\`\`\`anim 1070modes 1071\`\`\` 1072 1073Eliges qué modelo de IA trabaja en tu proyecto desde el **selector de modelo**, en la parte inferior del chat. El mismo selector aparece al crear un proyecto nuevo, y puedes cambiar de modelo en cualquier momento: el proyecto y la conversación siguen siendo los mismos. 1074 1075## Las tres opciones 1076 1077- **Auto**: la plataforma elige un modelo para cada parte de la tarea según los niveles de calidad que definas. Funciona con modelos abiertos eficientes en coste. Disponible en todos los planes. 1078- **Frontier**: modelos frontier premium seleccionados por el equipo de Coderblock, para la máxima calidad. Consume más créditos. Solo en planes de pago. 1079- **Custom**: eliges tú un modelo concreto. Los modelos se agrupan por proveedor (**OpenAI**, **Anthropic**, **Open models**) y bajo cada nombre verás el proveedor y su rasgo principal. 1080 1081En qué destaca (y en qué no) cada modelo se explica en [Modelos](/docs/models). 1082 1083## Niveles de calidad (Auto y Frontier) 1084 1085La primera vez que eliges Auto o Frontier se abre una ventana con cuatro controles. Puedes volver a abrirla cuando quieras desde el icono de engranaje junto al selector. 1086 1087| Control | Qué controla | 1088|---------|--------------| 1089| **General AI Intelligence** | el modelo que planifica y coordina el trabajo | 1090| **Creativity & Design** | el modelo que construye la interfaz | 1091| **Functionality & Database** | el modelo que escribe la lógica y los datos | 1092| **Adaptability** | el modelo para investigar y leer | 1093 1094Cada control va de **Low** a **Ultra High**. Los niveles más altos usan modelos más potentes y más créditos. Para Auto (y para Frontier cuando está disponible) la ventana muestra una **estimación** de créditos por mensaje que se actualiza al mover los controles. Auto y Frontier guardan ajustes por separado. 1095 1096## Nivel de rendimiento (modelos Custom) 1097 1098Cuando eliges un modelo concreto, el icono de engranaje fija su **nivel de rendimiento**: un nivel más alto hace que el modelo razone más antes de responder, lo que suele ayudar en tareas difÃciles, pero es más lento y consume más créditos. Los niveles disponibles dependen del modelo: en Claude Opus 5.5, por ejemplo, el razonamiento no se puede desactivar. En algunos modelos también verás la opción **Automatic** (recomendada donde está disponible): la plataforma sube el nivel mientras planifica, lo baja mientras ejecuta y lo vuelve a subir si algo falla. 1099 1100## Conviene saber 1101 1102- Los modelos con candado están reservados a los planes de pago: actualiza tu plan para desbloquearlos. 1103- El editor recuerda en tu navegador el último modelo que usaste. 1104- La página de creación de proyectos parte siempre de **GLM 5.3 Flash**, para que c
1104ada proyecto nuevo empiece con una elección consciente: cámbialo antes de crear el proyecto si prefieres otro modelo. 1105- La lista de modelos puede cambiar con el tiempo: el selector del editor siempre muestra los que tienes disponibles. 1106 1107> [!TIP] ¿No sabes por dónde empezar? Construye con Auto o GLM 5.3 Flash y pasa a un modelo más potente como Claude Opus 5.5 para las páginas o los errores que requieren más cuidado. 1108`,fr:`# Sélecteur de modèle 1109 1110\`\`\`anim 1111modes 1112\`\`\` 1113 1114Tu choisis le modèle d'IA qui travaille sur ton projet depuis le **sélecteur de modèle**, en bas du chat. Le même sélecteur apparaît quand tu crées un nouveau projet, et tu peux changer de modèle à tout moment : le projet et la conversation restent les mêmes. 1115 1116## Les trois options 1117 1118- **Auto** : la plateforme choisit un modèle pour chaque partie de la tâche, selon les niveaux de qualité que tu fixes. Elle s'appuie sur des modèles ouverts économiques. Disponible dans toutes les offres. 1119- **Frontier** : des modèles frontier premium sélectionnés par l'équipe Coderblock, pour la meilleure qualité. Consomme plus de crédits. Offres payantes uniquement. 1120- **Custom** : tu choisis toi-même un modèle précis. Les modèles sont regroupés par fournisseur (**OpenAI**, **Anthropic**, **Open models**) et chacun affiche sous son nom le fournisseur et son point fort. 1121 1122Les forces et les limites de chaque modèle sont détaillées dans [Modèles](/docs/models). 1123 1124## Niveaux de qualité (Auto et Frontier) 1125 1126La première fois que tu sélectionnes Auto ou Frontier, une fenêtre s'ouvre avec quatre curseurs. Tu peux la rouvrir à tout moment via l'icône d'engrenage à côté du sélecteur. 1127 1128| Curseur | Ce qu'il contrôle | 1129|---------|-------------------| 1130| **General AI Intelligence** | le modèle qui planifie et coordonne le travail | 1131| **Creativity & Design** | le modèle qui construit l'interface | 1132| **Functionality & Database** | le modèle qui écrit la logique et les données | 1133| **Adaptability** | le modèle utilisé pour la recherche et la lecture | 1134 1135Chaque curseur va de **Low** à **Ultra High**. Les niveaux élevés utilisent des modèles plus puissants et plus de crédits. Pour Auto (et pour Frontier quand c'est disponible), la fenêtre affiche une **estimation** des crédits par message, mise à jour à chaque réglage. Auto et Frontier ont des réglages distincts. 1136 1137## Niveau de performance (modèles Custom) 1138 1139Quand tu choisis un modèle précis, l'icône d'engrenage règle son **niveau de performance** : un niveau plus élevé fait davantage réfléchir le modèle avant de répondre, ce qui aide souvent sur les tâches difficiles, mais c'est plus lent et consomme plus de crédits. Les niveaux proposés dépendent du modèle : sur Claude Opus 5.5, par exemple, le raisonnement ne peut pas être désactivé. Sur certains modèles, tu verras aussi l'option **Automatic** (recommandée quand elle existe) : la plateforme monte le niveau pendant la planification, le baisse pendant l'exécution et le remonte en cas d'échec. 1140 1141## Bon à savoir 1142 1143- Les modèles marqués d'un cadenas sont réservés aux offres payantes : passe à une offre payante pour les débloquer. 1144- L'éditeur mémorise dans ton navigateur le dernier modèle utilisé. 1145- La page de création de projet démarre toujours sur **GLM 5.3 Flash**, pour que chaque nouveau projet parte d'un choix délibéré : change-le avant de créer le projet si tu préfères un autre modèle. 1146- La liste des modèles peut évoluer : le sélecteur de l'éditeur montre toujours ceux qui te sont accessibles. 1147 1148> [!TIP] Tu ne sais pas par où commencer ? Construis avec Auto ou GLM 5.3 Flash, puis passe à un modèle plus puissant comme Claude Opus 5.5 pour les pages ou les bugs qui demandent plus de soin. 1149`,de:`# Modellauswahl 1150 1151\`\`\`anim 1152modes 1153\`\`\` 1154 1155Welches KI-Modell an deinem Projekt arbeitet, wählst du in der **Modellauswahl** unten im Chat. Dieselbe Auswahl erscheint beim Anlegen eines neuen Projekts, und du kannst das Modell jederzeit wechseln: Projekt und Unterhaltung bleiben dieselben. 1156 1157## Die drei Optionen 1158 1159- **Auto**: Die Plattform wählt für jeden Teil der Aufgabe ein Modell, passend zu den Qualitätsstufen, die du festlegst. Sie nutzt kosteneffiziente offene Modelle. In allen Plänen verfügbar. 1160- **Frontier**: Premium-Frontier-Modelle, ausgewählt vom Coderblock-Team, für höchste Qualität. Verbraucht mehr Credits. Nur in Bezahlplänen. 1161- **Custom**: Du wählst selbst ein bestimmtes Modell. Die Modelle sind nach Anbieter gruppiert (**OpenAI**, **Anthropic**, **Open models**), und unter jedem Namen stehen Anbieter und wichtigste Eigenschaft. 1162 1163Was jedes Modell gut (und weniger gut) kann, erklärt die Seite [Modelle](/docs/models). 1164 1165## Qualitätsstufen (Auto und Frontier) 1166 1167Wenn du Auto oder Frontier zum ersten Mal wählst, öffnet sich ein Fenster mit vier Reglern. Ãber das Zahnrad-Symbol neben der Auswahl kannst du es jederzeit wieder öffnen. 1168 1169| Regler | Was er steuert | 1170|--------|----------------| 1171| **General AI Intelligence** | das Modell, das die Arbeit plant und koordiniert | 1172| **Creativity & Design** | das Modell, das die Oberfläche baut | 1173| **Functionality & Database** | das Modell, das Logik und Daten schreibt | 1174| **Adaptability** | das Modell für Recherche und Lesen | 1175 1176Jeder Regler reicht von **Low** bis **Ultra High**. Höhere Stufen nutzen stärkere Modelle und mehr Credits. Für Auto (und für Frontier, wenn verfügbar) zeigt das Fenster eine **Schätzung** der Credits pro Nachricht, die sich beim Verschieben der Regler aktualisiert. Auto und Frontier speichern getrennte Einstellungen. 1177 1178## Leistungsstufe (Custom-Modelle) 1179 1180Wenn du ein bestimmtes Modell wählst, stellt das Zahnrad seine **Leistungsstufe** ein: Eine höhere Stufe lässt das Modell vor der Antwort länger nachdenken. Das hilft meist bei schwierigen Aufgaben, ist aber langsamer und verbraucht mehr Credits. Welche Stufen es gibt, hängt vom Modell ab: Bei Claude Opus 5.5 lässt sich das Nachdenken zum Beispiel nicht abschalten. Bei einigen Modellen siehst du auÃerdem die Option **Automatic** (empfohlen, wo verfügbar): Die Plattform erhöht die Stufe beim Planen, senkt sie beim Ausführen und erhöht sie wieder, wenn etw
1180as schiefgeht. 1181 1182## Gut zu wissen 1183 1184- Modelle mit Schloss-Symbol sind Bezahlplänen vorbehalten: Mit einem Upgrade schaltest du sie frei. 1185- Der Editor merkt sich in deinem Browser das zuletzt verwendete Modell. 1186- Die Seite zum Anlegen eines Projekts startet immer mit **GLM 5.3 Flash**, damit jedes neue Projekt mit einer bewussten Wahl beginnt: Wechsle das Modell vor dem Anlegen, wenn du ein anderes möchtest. 1187- Die Modellliste kann sich mit der Zeit ändern: Die Auswahl im Editor zeigt immer, was dir zur Verfügung steht. 1188 1189> [!TIP] Unsicher, womit du anfangen sollst? Baue mit Auto oder GLM 5.3 Flash und wechsle für Seiten oder Bugs, die mehr Sorgfalt brauchen, zu einem stärkeren Modell wie Claude Opus 5.5. 1190`,zh:`# 模åéæ©å¨ 1191 1192\`\`\`anim 1193modes 1194\`\`\` 1195 1196ä½ å¯ä»¥å¨è天æ¡åºé¨ç**模åéæ©å¨**ä¸ï¼éæ©ç±åªä¸ª AI 模åæ¥å¤çä½ ç项ç®ãå建æ°é¡¹ç®æ¶ä¹ä¼åºç°åä¸ä¸ªéæ©å¨ï¼èä¸ä½ å¯ä»¥éæ¶åæ¢æ¨¡åï¼é¡¹ç®å对è¯é½ä¿æä¸åã 1197 1198## ä¸ç§é项 1199 1200- **Auto**ï¼å¹³å°æ ¹æ®ä½ 设å®çè´¨éç级ï¼ä¸ºä»»å¡çæ¯ä¸ªé¨åæé模åãå®ä½¿ç¨é«æ§ä»·æ¯çå¼æ¾æ¨¡åãææå¥é¤åå¯ä½¿ç¨ã 1201- **Frontier**ï¼ç± Coderblock å¢éæéçé«çº§å沿模åï¼è¿½æ±æé«è´¨éãæ¶èæ´å¤ç§¯åãä» éä»è´¹å¥é¤ã 1202- **Custom**ï¼ç±ä½ èªå·±æå®æ个模åã模åææä¾ååç»ï¼**OpenAI**ã**Anthropic**ã**Open models**ï¼ï¼æ¯ä¸ªå称ä¸æ¹ä¼æ¾ç¤ºæä¾ååå ¶ä¸»è¦ç¹ç¹ã 1203 1204æ¯ä¸ªæ¨¡åæ é¿åä¸æ é¿çå°æ¹ï¼è¯·è§[模å](/docs/models)ã 1205 1206## è´¨éç级ï¼Auto ä¸ Frontierï¼ 1207 1208第ä¸æ¬¡éæ© Auto æ Frontier æ¶ï¼ä¼å¼¹åºä¸ä¸ªå å«å个è°è项ççªå£ãä¹åéæ¶å¯ä»¥éè¿éæ©å¨æç齿轮å¾æ éæ°æå¼ã 1209 1210| è°è项 | æ§å¶å 容 | 1211|--------|----------| 1212| **General AI Intelligence** | è´è´£è§åååè°å·¥ä½ç模å | 1213| **Creativity & Design** | è´è´£æ建çé¢ç模å | 1214| **Functionality & Database** | è´è´£ç¼åé»è¾åæ°æ®ç模å | 1215| **Adaptability** | ç¨äºè°ç åé 读ç模å | 1216 1217æ¯ä¸ªè°èé¡¹ä» **Low** å° **Ultra High**ãç级è¶é«ï¼ä½¿ç¨ç模åè¶å¼ºï¼æ¶èç积åä¹è¶å¤ãå¯¹äº Autoï¼ä»¥åå¯ç¨æ¶ç Frontierï¼ï¼çªå£ä¼æ¾ç¤ºæ¯æ¡æ¶æ¯ç**é¢ä¼°**积åï¼å¹¶éè°èå®æ¶æ´æ°ãAuto å Frontier ç设置彼æ¤ç¬ç«ã 1218 1219## æ§è½ç级ï¼Custom 模åï¼ 1220 1221éæ©å ·ä½æ¨¡åæ¶ï¼é½¿è½®å¾æ ç¨äºè®¾ç½®å ¶**æ§è½ç级**ï¼ç级è¶é«ï¼æ¨¡åå¨åçåæèå¾è¶å¤ï¼é常æå©äºå¤çå°é¾ä»»å¡ï¼ä½é度æ´æ ¢ã积åæ¶èæ´å¤ãå¯éç级åå³äºæ¨¡åï¼ä¾å¦å¨ Claude Opus 5.5 ä¸ï¼æ¨çæ æ³å ³éãé¨å模åè¿æä¾ **Automatic** é项ï¼å¨å¯ç¨æ¶æ¨è使ç¨ï¼ï¼å¹³å°å¨è§åæ¶æé«ç级ï¼å¨æ§è¡æ¶éä½ç级ï¼åºç°é®é¢æ¶åéæ°æé«ã 1222 1223## é¡»ç¥ 1224 1225- 带éå¾æ ç模åä» éä»è´¹å¥é¤ï¼å级å³å¯è§£éã 1226- ç¼è¾å¨ä¼å¨ä½ çæµè§å¨ä¸è®°ä½ä½ ä¸æ¬¡ä½¿ç¨ç模åã 1227- å建项ç®é¡µé¢æ»æ¯ä» **GLM 5.3 Flash** å¼å§ï¼è®©æ¯ä¸ªæ°é¡¹ç®é½æºäºä¸æ¬¡æç¡®çéæ©ï¼å¦æä½ æ´æ³ç¨å ¶ä»æ¨¡åï¼è¯·å¨å建项ç®ä¹åæ´æ¢ã 1228- 模åå表å¯è½ä¼éæ¶é´ååï¼ç¼è¾å¨ä¸çéæ©å¨å§ç»æ¾ç¤ºä½ å½åå¯ç¨ç模åã 1229 1230> [!TIP] ä¸ç¥éä»åªéå¼å§ï¼å ç¨ Auto æ GLM 5.3 Flash æ建ï¼åå¨éè¦æ ¼å¤ç¨å¿ç页é¢æ缺é·ä¸åæ¢å°æ´å¼ºç模åï¼æ¯å¦ Claude Opus 5.5ã 1231`},models:{es:`# Modelos 1232 1233\`\`\`anim 1234modes 1235\`\`\` 1236 1237En Coderblock eliges qué modelo de IA construye tu app. Cada modelo tiene su propio equilibrio entre calidad, velocidad y coste: en esta página encontrarás los modelos que puedes elegir hoy, en qué rinde mejor (y peor) cada uno en general y cómo decidir. 1238 1239> [!INFO] La lista refleja los modelos disponibles en el momento de escribirla. Los que ves en tu selector pueden variar: añadimos, actualizamos o pausamos temporalmente algunos modelos, y algunos están reservados a los planes de pago. El selector del editor es siempre la referencia. 1240 1241## Auto y Frontier 1242 1243Además de los modelos individuales, el selector ofrece dos opciones en las que la plataforma elige por ti (ver [Selector de modelo](/docs/modes)): 1244 1245- **Auto** divide el trabajo en cuatro áreas y usa modelos abiertos eficientes en coste, con los niveles de calida
1245d que definas. Disponible en todos los planes. 1246- **Frontier** funciona igual, pero usa modelos frontier premium seleccionados por nuestro equipo. Máxima calidad, más créditos. Solo en planes de pago. 1247 1248## Los modelos de un vistazo 1249 1250El coste relativo es orientativo: compara cuántos créditos suele consumir la misma tarea, de $ (el más barato) a $$$$$ (el más caro). El consumo real depende de la tarea, de cuánto razona el modelo y de tu plan. 1251 1252| Modelo | Proveedor | Coste relativo | Planes | 1253|--------|-----------|----------------|--------| 1254| Claude Sonnet 5.5 | Anthropic | $$$ | Planes de pago | 1255| Claude Opus 5.5 | Anthropic | $$$$ | Planes de pago | 1256| Claude Fable 5 | Anthropic | $$$$$ | Planes de pago | 1257| GPT-6.1 Sol | OpenAI | $$$ | Planes de pago | 1258| GPT-5.6 Terra | OpenAI | $$$ | Planes de pago | 1259| GPT-6 Luna | OpenAI | $ | Todos los planes | 1260| GLM 5.3 Flash | Z.ai | $ | Todos los planes | 1261| GLM 5.3 FlashX | Z.ai | $ | Todos los planes | 1262| GLM 5.2 | Z.ai | $$ | Todos los planes | 1263| DeepSeek V4 Pro | DeepSeek | $$ | Todos los planes | 1264| DeepSeek V4 Flash | DeepSeek | $ | Todos los planes | 1265| Kimi K2.6 | Moonshot AI | $$ | Todos los planes | 1266| MiMo 2.6 Pro | Xiaomi | $ | Todos los planes | 1267| MiMo 2.6 Flash | Xiaomi | $ | Todos los planes | 1268 1269## Anthropic 1270 1271### Claude Sonnet 5.5 1272 1273El modelo frontier rápido de Anthropic: genera código completo de frontend y backend y es muy bueno planificando y llevando a cabo trabajos de varios pasos. 1274 1275- **Puntos fuertes**: un todoterreno fiable para el desarrollo diario; rápido para ser un modelo frontier. 1276- **Puntos débiles**: consume bastantes más créditos que los modelos abiertos. 1277 1278### Claude Opus 5.5 1279 1280El modelo insignia de Anthropic para código y la opción más potente de esta lista para programación y trabajo agéntico. El razonamiento está siempre activo. 1281 1282- **Puntos fuertes**: máxima calidad en interfaces complejas, arquitectura y errores difÃciles; la mejor opción cuando importa acertar a la primera. 1283- **Puntos débiles**: más lento y con un precio por token aproximadamente el doble que Claude Sonnet 5.5, asà que consume más créditos. 1284 1285### Claude Fable 5 1286 1287El nivel premium de Anthropic: la referencia para los problemas de razonamiento más difÃciles. 1288 1289- **Puntos fuertes**: el razonamiento más profundo. 1290- **Puntos débiles**: el modelo que más créditos consume (el doble que Claude Opus 5.5). En programación y trabajo agéntico, los benchmarks publicados sitúan a Claude Opus 5.5 por delante por menos de la mitad del precio, asà que para la mayorÃa del trabajo de desarrollo Opus 5.5 compensa más. 1291 1292## OpenAI 1293 1294### GPT-6.1 Sol 1295 1296El modelo frontier de OpenAI, fuerte en programación y en trabajo agéntico de varios pasos. 1297 1298- **Puntos fuertes**: código y bugs difÃciles (mucho más fuerte que GPT-6 Sol con el mismo nivel de razonamiento), uso de herramientas y tareas largas. 1299- **Puntos débiles**: usa algo más de tokens por tarea que su predecesor; consumo de créditos en la misma franja que Claude Sonnet 5. 1300 1301### GPT-5.6 Terra 1302 1303El nivel intermedio equilibrado de OpenAI: buena calidad para el dÃa a dÃa a un precio por token más bajo que los modelos insignia. 1304 1305- **Puntos fuertes**: preguntas, análisis y tareas cortas. 1306- **Puntos débiles**: en pruebas de terceros con tareas de programación largas acertó menos veces y usó muchos más tokens por tarea, asà que una build larga puede costar más de lo previsto. No es la primera opción para generar una app completa. 1307 1308### GPT-6 Luna 1309 1310La opción de OpenAI más rápida y barata. 1311 1312- **Puntos fuertes**: tareas cortas y bien acotadas: leer código, cambios pequeños, arreglos rápidos. 1313- **Puntos débiles**: más flojo en tareas largas y complejas y al recordar detalles en conversaciones largas. No es adecuado para construir una app completa. 1314 1315## Modelos abiertos 1316 1317### GLM 5.3 Flash (Z.ai) 1318 1319Programación agéntica nativamente multimodal (puede leer capturas de pantalla) por una fracción del precio de los modelos frontier. Es el modelo preseleccionado al crear un proyecto nuevo. 1320 1321- **Puntos fuertes**: coste muy bajo, uso fiable de herramientas, lee imágenes. 1322- **Puntos débiles**: siempre razona antes de responder, lo que puede hacer más lentas algunas respuestas; su resistencia en ejecuciones muy largas está menos probada que la de GLM 5.2. 1323 1324### GLM 5.3 FlashX (Z.ai) 1325 1326El mismo modelo que GLM 5.3 Flash, servido por Z.ai en un nivel más rápido: mismas capacidades (imágenes, herramientas, niveles de razonamiento), con ejecuciones unas tres veces más rápidas en nuestras pruebas. 1327
1328- **Fortalezas**: velocidad; por lo demás idéntico a GLM 5.3 Flash. 1329- **Debilidades**: cuesta unas 2,5 veces GLM 5.3 Flash, aunque sigue entre los modelos más económicos. 1330 1331### GLM 5.2 (Z.ai) 1332 1333El mejor modelo abierto para programación agéntica autónoma en tareas largas, cerca de los modelos frontier en programación y orquestación de herramientas. 1334 1335- **Puntos fuertes**: tareas largas de varios pasos, refactorización, backend. 1336- **Puntos débiles**: interfaces menos pulidas que DeepSeek V4 Pro o Claude Opus (no puede revisar visualmente su propio trabajo); en las ejecuciones más largas sigue por detrás de los modelos de Anthropic; es el modelo abierto más caro. 1337 1338### DeepSeek V4 Pro 1339 1340La mejor relación calidad/precio entre los modelos abiertos y el modelo abierto más fuerte generando frontend. 1341 1342- **Puntos fuertes**: código de frontend y backend limpio a bajo coste. 1343- **Puntos débiles**: más flojo que GLM y que los modelos frontier en la ingenierÃa real más difÃcil y en tareas muy largas de varios pasos. 1344 1345### DeepSeek V4 Flash 1346 1347Barato y rápido, con una ventana de contexto muy amplia. 1348 1349- **Puntos fuertes**: leer código, preguntas y tareas pequeñas. 1350- **Puntos débiles**: calidad de interfaz inferior a DeepSeek V4 Pro; resistencia en ejecuciones largas menos probada. 1351 1352### Kimi K2.6 (Moonshot AI) 1353 1354Un modelo abierto fuerte en razonamiento e investigación, que aguanta bien sesiones largas con muchas herramientas. 1355 1356- **Puntos fuertes**: razonamiento, investigación, planificación. 1357- **Puntos débiles**: su salida es más cara que la de los otros modelos abiertos, asà que el trabajo con mucho código cuesta más que con DeepSeek V4 Pro o GLM; ventana de contexto más pequeña que la mayorÃa de los modelos de esta lista; más lento. 1358 1359### MiMo 2.6 Pro (Xiaomi) 1360 1361Experimental: el modelo abierto insignia de Xiaomi, lanzado en septiembre de 2026, con un gran salto en el trabajo agéntico respecto a la versión anterior. 1362 1363- **Puntos fuertes**: coding agéntico cercano a los modelos de frontera en los benchmarks públicos, bajo coste. 1364- **Puntos débiles**: generación lenta (un archivo grande puede tardar minutos); experimental. 1365 1366### MiMo 2.6 Flash (Xiaomi) 1367 1368Experimental: el modelo abierto económico de la misma familia, al precio de DeepSeek V4 Flash. 1369 1370- **Puntos fuertes**: coste muy bajo, buen coding agéntico. 1371- **Puntos débiles**: generación lenta; experimental. 1372 1373## ¿Qué modelo elijo? 1374 1375| Situación | Opción recomendada | 1376|-----------|--------------------| 1377| Para empezar, o con el plan Community | GLM 5.3 Flash o Auto | 1378| Desarrollo diario con un plan de pago | Claude Sonnet 5.5 | 1379| Interfaces complejas, arquitectura, errores difÃciles | Claude Opus 5.5 | 1380| Los problemas de razonamiento más difÃciles, el coste es secundario | Claude Fable 5 | 1381| Tareas largas, autónomas y de varios pasos | GLM 5.2, GPT-6.1 Sol o Claude Sonnet 5.5 | 1382| Un frontend cuidado con poco presupuesto | DeepSeek V4 Pro | 1383| Cambios rápidos de texto o estilo, preguntas sobre el código | GPT-6 Luna, DeepSeek V4 Flash o GLM 5.3 Flash | 1384| Prefieres no elegir | Auto (o Frontier con un plan de pago) | 1385 1386> [!TIP] Puedes cambiar de modelo cuando quieras. Un patrón habitual: construir con un modelo eficiente en coste y pasar a Claude Opus 5.5 para las páginas o los errores que requieren más cuidado. Antes de enviar, la estimación de la app (Auto y Frontier) y después tu historial de consumo muestran el coste real en créditos. 1387`,fr:`# Modèles 1388 1389\`\`\`anim 1390modes 1391\`\`\` 1392 1393Sur Coderblock, tu choisis le modèle d'IA qui construit ton app. Chaque modèle a son propre équilibre entre qualité, vitesse et coût : cette page présente les modèles disponibles aujourd'hui, ce que chacun fait bien (ou moins bien) en général, et comment choisir. 1394 1395> [!INFO] La liste reflète les modèles disponibles au moment de la rédaction. Ceux que tu vois dans ton sélecteur peuvent varier : nous ajoutons, mettons à jour ou suspendons temporairement certains modèles, et certains sont réservés aux offres payantes. Le sélecteur de l'éditeur fait toujours foi. 1396 1397## Auto et Frontier 1398
1399En plus des modèles individuels, le sélecteur propose deux options où la plateforme choisit pour toi (voir [Sélecteur de modèle](/docs/modes)) : 1400 1401- **Auto** répartit le travail en quatre domaines et utilise des modèles ouverts économiques, aux niveaux de qualité que tu fixes. Disponible dans toutes les offres. 1402- **Frontier** fonctionne de la même façon, mais avec des modèles frontier premium sélectionnés par notre équipe. Qualité maximale, plus de crédits. Offres payantes uniquement. 1403 1404## Les modèles en un coup d'Åil 1405 1406Le coût relatif est indicatif : il compare le nombre de crédits que consomme généralement une même tâche, de $ (le moins cher) à $$$$$ (le plus cher). La consommation réelle dépend de la tâche, du niveau de réflexion du modèle et de ton offre. 1407 1408| Modèle | Fournisseur | Coût relatif | Offres | 1409|--------|-------------|--------------|--------| 1410| Claude Sonnet 5.5 | Anthropic | $$$ | Offres payantes | 1411| Claude Opus 5.5 | Anthropic | $$$$ | Offres payantes | 1412| Claude Fable 5 | Anthropic | $$$$$ | Offres payantes | 1413| GPT-6.1 Sol | OpenAI | $$$ | Offres payantes | 1414| GPT-5.6 Terra | OpenAI | $$$ | Offres payantes | 1415| GPT-6 Luna | OpenAI | $ | Toutes les offres | 1416| GLM 5.3 Flash | Z.ai | $ | Toutes les offres | 1417| GLM 5.3 FlashX | Z.ai | $ | Toutes les offres | 1418| GLM 5.2 | Z.ai | $$ | Toutes les offres | 1419| DeepSeek V4 Pro | DeepSeek | $$ | Toutes les offres | 1420| DeepSeek V4 Flash | DeepSeek | $ | Toutes les offres | 1421| Kimi K2.6 | Moonshot AI | $$ | Toutes les offres | 1422| MiMo 2.6 Pro | Xiaomi | $ | Toutes les offres | 1423| MiMo 2.6 Flash | Xiaomi | $ | Toutes les offres | 1424 1425## Anthropic 1426 1427### Claude Sonnet 5.5 1428 1429Le modèle frontier rapide d'Anthropic : il génère du code complet côté frontend comme backend et excelle à planifier et mener des tâches en plusieurs étapes. 1430 1431- **Points forts** : un polyvalent fiable pour le développement au quotidien ; rapide pour un modèle frontier. 1432- **Points faibles** : consomme nettement plus de crédits que les modèles ouverts. 1433 1434### Claude Opus 5.5 1435 1436Le modèle phare d'Anthropic pour le code, et l'option la plus puissante de cette liste pour le développement et le travail agentique. Le raisonnement est toujours actif. 1437 1438- **Points forts** : qualité maximale sur les interfaces complexes, l'architecture et les bugs difficiles ; le meilleur choix quand il faut réussir du premier coup. 1439- **Points faibles** : plus lent, avec un prix par token environ deux fois plus élevé que Claude Sonnet 5.5, donc plus de crédits consommés. 1440 1441### Claude Fable 5 1442 1443Le niveau premium d'Anthropic : la référence pour les problèmes de raisonnement les plus difficiles. 1444 1445- **Points forts** : le raisonnement le plus poussé. 1446- **Points faibles** : le modèle le plus gourmand en crédits (deux fois plus que Claude Opus 5.5). Sur le code et le travail agentique, les benchmarks publiés placent Claude Opus 5.5 devant, pour moins de la moitié du prix : pour la plupart des développements, Opus 5.5 est le meilleur rapport qualité/prix. 1447 1448## OpenAI 1449 1450### GPT-6.1 Sol 1451 1452Le modèle frontier d'OpenAI, solide en code et sur le travail agentique en plusieurs étapes. 1453 1454- **Points forts** : code et bugs difficiles (bien plus fort que GPT-6 Sol au même niveau de raisonnement), utilisation d'outils et tâches longues. 1455- **Points faibles** : il utilise un peu plus de tokens par tâche que son prédécesseur ; consommation de crédits du même ordre que Claude Sonnet 5. 1456 1457### GPT-5.6 Terra 1458 1459Le niveau intermédiaire équilibré d'OpenAI : une bonne qualité au quotidien, à un prix par token inférieur aux modèles phares. 1460 1461- **Points forts** : questions, analyses et tâches courtes. 1462- **Points faibles** : dans des tests indépendants sur de longues tâches de code, il a moins souvent réussi et a utilisé beaucoup plus de tokens par tâche : un long build peut coûter plus que prévu. Ce n'est pas le premier choix pour générer une app entière. 1463 1464### GPT-6 Luna 1465 1466L'option OpenAI la plus rapide et la moins chère. 1467 1468- **Points forts** : tâches courtes et bien délimitées : lire du code, petites modifications, corrections rapides. 1469- **Points faibles** : moins bon sur les tâches longues et complexes et pour se souvenir des détails dans les longues conversations. Pas adapté pour construire une app entière. 1470 1471## Modèles ouverts 1472 1473### GLM 5.3 Flash (Z.ai) 1474 1475Du code agentique nativement multimodal (il sait lire les captures d'écran) pour une fraction du prix des modèles frontier. C'est le modèle présélectionné à la création d'un n
1475ouveau projet. 1476 1477- **Points forts** : coût très bas, utilisation fiable des outils, lit les images. 1478- **Points faibles** : il réfléchit toujours avant de répondre, ce qui peut ralentir certaines réponses ; son endurance sur les très longues exécutions est moins éprouvée que celle de GLM 5.2. 1479 1480### GLM 5.3 FlashX (Z.ai) 1481 1482Le même modèle que GLM 5.3 Flash, servi par Z.ai sur un niveau plus rapide : mêmes capacités (images, outils, niveaux de raisonnement), avec des exécutions environ trois fois plus rapides dans nos tests. 1483 1484- **Points forts** : la vitesse ; pour le reste identique à GLM 5.3 Flash. 1485- **Points faibles** : il coûte environ 2,5 fois GLM 5.3 Flash, tout en restant parmi les modèles les moins chers. 1486 1487### GLM 5.2 (Z.ai) 1488 1489Le meilleur modèle ouvert pour le code agentique autonome sur des tâches longues, proche des modèles frontier en code et en orchestration d'outils. 1490 1491- **Points forts** : tâches longues en plusieurs étapes, refactoring, backend. 1492- **Points faibles** : interfaces moins soignées que DeepSeek V4 Pro ou Claude Opus (il ne peut pas vérifier visuellement son travail) ; sur les exécutions les plus longues, il reste derrière les modèles d'Anthropic ; c'est le modèle ouvert le plus cher. 1493 1494### DeepSeek V4 Pro 1495 1496Le meilleur rapport qualité/prix parmi les modèles ouverts, et le modèle ouvert le plus fort pour générer du frontend. 1497 1498- **Points forts** : code frontend et backend propre à faible coût. 1499- **Points faibles** : moins bon que GLM et que les modèles frontier sur l'ingénierie réelle la plus difficile et les très longues tâches en plusieurs étapes. 1500 1501### DeepSeek V4 Flash 1502 1503Ãconomique et rapide, avec une très grande fenêtre de contexte. 1504 1505- **Points forts** : lecture de code, questions et petites tâches. 1506- **Points faibles** : qualité d'interface inférieure à DeepSeek V4 Pro ; endurance sur les longues exécutions moins éprouvée. 1507 1508### Kimi K2.6 (Moonshot AI) 1509 1510Un modèle ouvert solide en raisonnement et en recherche, qui tient bien les longues sessions avec de nombreux outils. 1511 1512- **Points forts** : raisonnement, recherche, planification. 1513- **Points faibles** : sa sortie coûte plus cher que celle des autres modèles ouverts, donc le travail riche en code revient plus cher qu'avec DeepSeek V4 Pro ou GLM ; fenêtre de contexte plus petite que la plupart des modèles de cette liste ; plus lent. 1514 1515### MiMo 2.6 Pro (Xiaomi) 1516 1517Expérimental : le modèle ouvert phare de Xiaomi, sorti en septembre 2026, avec un grand bond sur le travail agentique par rapport à la version précédente. 1518 1519- **Points forts** : coding agentique proche des modèles de pointe dans les benchmarks publics, coût bas. 1520- **Points faibles** : génération lente (un gros fichier peut prendre plusieurs minutes) ; expérimental. 1521 1522### MiMo 2.6 Flash (Xiaomi) 1523 1524Expérimental : le modèle ouvert économique de la même famille, au prix de DeepSeek V4 Flash. 1525 1526- **Points forts** : coût très bas, bon coding agentique. 1527- **Points faibles** : génération lente ; expérimental. 1528 1529## Quel modèle choisir ? 1530 1531| Situation | Choix conseillé | 1532|-----------|-----------------| 1533| Pour démarrer, ou avec l'offre Community | GLM 5.3 Flash ou Auto | 1534| Développement quotidien avec une offre payante | Claude Sonnet 5.5 | 1535| Interfaces complexes, architecture, bugs difficiles | Claude Opus 5.5 | 1536| Les problèmes de raisonnement les plus durs, le coût passe après | Claude Fable 5 | 1537| Tâches longues, autonomes, en plusieurs étapes | GLM 5.2, GPT-6.1 Sol ou Claude Sonnet 5.5 | 1538| Un frontend soigné avec un petit budget | DeepSeek V4 Pro | 1539| Petites retouches de texte ou de style, questions sur le code | GPT-6 Luna, DeepSeek V4 Flash ou GLM 5.3 Flash | 1540| Tu préfères ne pas choisir | Auto (ou Frontier avec une offre payante) | 1541 1542> [!TIP] Tu peux changer de modèle quand tu veux. Une approche courante : construire avec un modèle économique, puis passer à Claude Opus 5.5 pour les pages ou les bugs qui demandent plus de soin. Avant l'envoi, l'estimation dans l'app (Auto et Frontier), puis ton historique de consommation, indiquent le coût réel en crédits. 1543`,de:`# Modelle 1544 1545\`\`\`anim 1546modes 1547\`\`\` 1548 1549Bei Coderblock wählst du, welches KI-Modell deine App baut. Jedes Modell hat seine eigene Balance aus Qualität, Geschwindigkeit und Kosten: Diese Seite listet die Modelle, die du heute wählen kannst, zeigt, was jedes davon allgemein gut (und weniger gut) kann, und hilft dir bei der Wahl. 1550 1551> [!INFO] Die Liste gibt die Modelle zum Zeitpunkt der Erstellung wieder. Was du in deiner Modellauswahl siehst, k
1551ann abweichen: Wir fügen Modelle hinzu, aktualisieren sie oder pausieren sie vorübergehend, und manche sind Bezahlplänen vorbehalten. MaÃgeblich ist immer die Auswahl im Editor. 1552 1553## Auto und Frontier 1554 1555Neben den einzelnen Modellen bietet die Auswahl zwei Optionen, bei denen die Plattform für dich wählt (siehe [Modellauswahl](/docs/modes)): 1556 1557- **Auto** teilt die Arbeit in vier Bereiche und nutzt kosteneffiziente offene Modelle, auf den Qualitätsstufen, die du festlegst. In allen Plänen verfügbar. 1558- **Frontier** funktioniert genauso, nutzt aber Premium-Frontier-Modelle, die unser Team auswählt. Höchste Qualität, mehr Credits. Nur in Bezahlplänen. 1559 1560## Die Modelle im Ãberblick 1561 1562Die relativen Kosten sind ein Richtwert: Sie vergleichen, wie viele Credits dieselbe Aufgabe typischerweise verbraucht, von $ (am günstigsten) bis $$$$$ (am teuersten). Der tatsächliche Verbrauch hängt von der Aufgabe, davon, wie viel das Modell nachdenkt, und von deinem Plan ab. 1563 1564| Modell | Anbieter | Relative Kosten | Pläne | 1565|--------|----------|-----------------|-------| 1566| Claude Sonnet 5.5 | Anthropic | $$$ | Bezahlpläne | 1567| Claude Opus 5.5 | Anthropic | $$$$ | Bezahlpläne | 1568| Claude Fable 5 | Anthropic | $$$$$ | Bezahlpläne | 1569| GPT-6.1 Sol | OpenAI | $$$ | Bezahlpläne | 1570| GPT-5.6 Terra | OpenAI | $$$ | Bezahlpläne | 1571| GPT-6 Luna | OpenAI | $ | Alle Pläne | 1572| GLM 5.3 Flash | Z.ai | $ | Alle Pläne | 1573| GLM 5.3 FlashX | Z.ai | $ | Alle Pläne | 1574| GLM 5.2 | Z.ai | $$ | Alle Pläne | 1575| DeepSeek V4 Pro | DeepSeek | $$ | Alle Pläne | 1576| DeepSeek V4 Flash | DeepSeek | $ | Alle Pläne | 1577| Kimi K2.6 | Moonshot AI | $$ | Alle Pläne | 1578| MiMo 2.6 Pro | Xiaomi | $ | Alle Pläne | 1579| MiMo 2.6 Flash | Xiaomi | $ | Alle Pläne | 1580 1581## Anthropic 1582 1583### Claude Sonnet 5.5 1584 1585Das schnelle Frontier-Modell von Anthropic: erzeugt vollständigen Code für Frontend und Backend und plant und erledigt mehrstufige Aufgaben sehr gut. 1586 1587- **Stärken**: ein zuverlässiger Allrounder für die tägliche Entwicklung; schnell für ein Frontier-Modell. 1588- **Schwächen**: verbraucht deutlich mehr Credits als die offenen Modelle. 1589 1590### Claude Opus 5.5 1591 1592Das Spitzenmodell von Anthropic für Code und die stärkste Option in dieser Liste für Programmierung und agentisches Arbeiten. Das Nachdenken ist immer aktiv. 1593 1594- **Stärken**: höchste Qualität bei komplexen Oberflächen, Architektur und schwierigen Bugs; die beste Wahl, wenn es beim ersten Versuch sitzen muss. 1595- **Schwächen**: langsamer und mit etwa doppeltem Preis pro Token gegenüber Claude Sonnet 5.5, verbraucht also mehr Credits. 1596 1597### Claude Fable 5 1598 1599Die Premium-Stufe von Anthropic: die Referenz für die schwierigsten Denkaufgaben. 1600 1601- **Stärken**: das tiefste Nachdenken. 1602- **Schwächen**: das Modell mit dem höchsten Credit-Verbrauch (doppelt so viel wie Claude Opus 5.5). Bei Programmierung und agentischem Arbeiten sehen veröffentlichte Benchmarks Claude Opus 5.5 vorn, zu weniger als dem halben Preis. Für die meisten Entwicklungsaufgaben ist Opus 5.5 daher das bessere Preis-Leistungs-Verhältnis. 1603 1604## OpenAI 1605 1606### GPT-6.1 Sol 1607 1608Das Frontier-Modell von OpenAI, stark beim Programmieren und bei agentischen, mehrstufigen Aufgaben. 1609 1610- **Stärken**: Code und schwierige Bugs (deutlich stärker als GPT-6 Sol bei gleicher Denkstufe), Werkzeugnutzung und lange Aufgaben. 1611- **Schwächen**: braucht pro Aufgabe etwas mehr Tokens als sein Vorgänger; Credit-Verbrauch im selben Bereich wie Claude Sonnet 5. 1612 1613### GPT-5.6 Terra 1614 1615Die ausgewogene Mittelklasse von OpenAI: gute Alltagsqualität zu einem niedrigeren Preis pro Token als die Spitzenmodelle. 1616 1617- **Stärken**: Fragen, Analysen und kürzere Aufgaben. 1618- **Schwächen**: In unabhängigen Tests mit langen Programmieraufgaben war es seltener erfolgreich und brauchte deutlich mehr Tokens pro Aufgabe, sodass ein langer Build teurer werden kann als erwartet. Nicht die erste Wahl, um eine ganze App zu erzeugen. 1619 1620### GPT-6 Luna 1621 1622Die schnellste und günstigste Option von OpenAI. 1623 1624- **Stärken**: kurze, klar umrissene Aufgaben: Code lesen, kleine Ãnderungen, schnelle Fixes. 1625- **Schwächen**: schwächer bei langen, komplexen Aufgaben und beim Erinnern von Details in langen Unterhaltungen. Nicht geeignet, um eine ganze App zu bauen. 1626 1627## Offene Modelle 1628 1629### GLM 5.3 Flash (Z.ai) 1630 1631Nativ multimodales (es kann Screenshots lesen) agentisches Programmieren zu einem Bruchteil des Preises der Frontier-Modelle. Es ist vorausgewählt, wenn du ein neues Projekt anlegst. 1632 1633- **Stärken**: sehr niedrige Kosten, zuverlässige Werkzeugnutzung, liest Bilder. 1634- **Schwächen**: Es denkt vor jeder Antwort nach, was manche Antworten verlangsamen kann; seine Ausdauer bei sehr langen Läufen ist weniger erprobt als die von GLM 5.2. 1635 1636### GLM 5.3 FlashX (Z.ai) 1637 1638Dasselbe Modell wie GLM 5.3 Flash, von Z.ai auf einer schnelleren Stufe bereitgestellt: gleiche Fähigkeiten (Bilder, Tools, Denkstufen), in unseren Tests etwa dreimal schnellere Läufe. 1639 1640- **Stärken**: Geschwindigkeit; sonst identisch mit GLM 5.3 Flash. 1641- **Schwächen**: kostet etwa das 2,5-Fache von GLM 5.3 Flash, bleibt aber unter den günstigsten Modellen. 1642 1643### GLM 5.2 (Z.ai) 1644 1645Das beste offene Modell für autonomes, agentisches Programmieren bei langen Aufgaben, nah an den Frontier-Modellen bei Code und Werkzeug-Orchestrierung. 1646 1647- **Stärken**: lange mehrstufige Aufgaben, Refactoring, Backend. 1648- **Schwächen**: weniger ausgefeilte Oberflächen als DeepSeek V4 Pro oder Claude Opus (es kann seine Arbeit nicht visuell prüfen); bei den längsten Läufen noch hinter den Anthropic-Modellen; das teuerste offene Modell. 1649 1650### DeepSeek V4 Pro 1651 1652Das beste Preis-Leistungs-Verhältnis unter den offenen Modellen und das stärkste offene Modell für Frontend-Generierung. 1653 1654- **Stärken**: sauberer Frontend- und Backend-Code zu geringen Kosten. 1655- **Schwächen**: schwächer als GLM und die Frontier-Modelle bei der schwierigsten realen Softwareentwicklung und sehr langen mehrstufigen Aufgaben. 1656 1657### DeepSeek V4 Flash 1658 1659Günstig und schnell, mit einem sehr groÃen Kontextfenster. 1660 1661- **Stärken**: Code lesen, Fragen und kleine Aufgaben. 1662- **Schwächen**: Oberflächenqualität unter DeepSeek V4 Pro; Ausdauer bei langen Läufen weniger erprobt. 1663 1664### Kimi K2.6 (Moonshot AI) 1665 1666Ein offenes Modell, stark im Schlussfolgern und in der Recherche, das auch lange Sitzungen mit vielen Werkzeugen gut durchhält. 1667 1668- **Stärken**: Schlussfolgern, Recherche, Planung. 1669- **Schwächen**: Die Ausgabe ist teurer als bei den anderen offenen Modellen, codelastige Arbeit kostet daher mehr als mit DeepSeek V4 Pro oder GLM; kleineres Kontextfenster als die meisten Modelle hier; langsamer. 1670 1671### MiMo 2.6 Pro (Xiaomi) 1672 1673Experimentell: Xiaomis offenes Spitzenmodell, erschienen im September 2026, mit einem groÃen Sprung bei agentischer Arbeit gegenüber der Vorversion. 1674 1675- **Stärken**: agentisches Coding nahe an Frontier-Modellen in öffentlichen Benchmarks, niedrige Kosten. 1676- **Schwächen**: langsame Generierung (eine groÃe Datei kann Minuten dauern); experimentell. 1677 1678### MiMo 2.6 Flash (Xiaomi) 1679 1680Experimentell: das günstige offene Modell derselben Familie, zum Preis von DeepSeek V4 Flash. 1681 1682- **Stärken**: sehr niedrige Kosten, gutes agentisches Coding. 1683- **Schwächen**: langsame Generierung; experimentell. 1684 1685## Welches Modell soll ich wählen? 1686 1687| Situation | Empfehlung | 1688|-----------|------------| 1689| Zum Einstieg oder im Community-Plan | GLM 5.3 Flash oder Auto | 1690| Tägliche Entwicklung mit einem Bezahlplan | Claude Sonnet 5.5 | 1691| Komplexe Oberflächen, Architektur, schwierige Bugs | Claude Opus 5.5 | 1692| Die schwierigsten Denkaufgaben, Kosten zweitrangig | Claude Fable 5 | 1693| Lange, autonome, mehrstufige Aufgaben | GLM 5.2, GPT-6.1 Sol oder Claude Sonnet 5.5 | 1694| Ein ausgefeiltes Frontend mit kleinem Budget | DeepSeek V4 Pro | 1695| Schnelle Text- oder Stiländerungen, Fragen zum Code | GPT-6 Luna, DeepSeek V4 Flash oder GLM 5.3 Flash | 1696| Du willst lieber nicht wählen | Auto (oder Frontier mit einem Bezahlplan) | 1697 1698> [!TIP] Du kannst das Modell jederzeit wechseln. Ein bewährtes Vorgehen: mit einem kosteneffizienten Modell bauen und für Seiten oder Bugs, die mehr Sorgfalt brauchen, zu Claude Opus 5.5 wechseln. Vor dem Senden zeigt die Schätzung in der App (Auto und Frontier), danach dein Verbrauchsverlauf die tatsächlichen Credit-Kosten. 1699`,zh:`# 模å 1700 1701\`\`\`anim 1702modes 1703\`\`\` 1704 1705å¨ Coderblock ä¸ï¼ç±ä½ å³å®ç¨åªä¸ª AI 模åæ¥æå»ºä½ çåºç¨ãæ¯ä¸ªæ¨¡åå¨è´¨éãé度åææ¬ä¹é´åæåèï¼æ¬é¡µååºäºä½ ç°å¨å¯ä»¥éæ©ç模åãå®ä»¬æ»ä½ä¸æ é¿ä¸ä¸æ é¿çå°æ¹ï¼ä»¥åå¦ä½éæ©ã 1706 1707> [!INFO] æ¤å表åæ æ°åæ¶å¯ç¨ç模åãä½ å¨éæ©å¨ä¸çå°ç模åå¯è½ææä¸åï¼æ们ä¼æ°å¢ãæ´æ°æææ¶åç¨æäºæ¨¡åï¼é¨å模åä» éä»è´¹å¥é¤ãä¸å以ç¼è¾å¨ä¸çéæ©å¨ä¸ºåã 1708 1709## Auto ä¸ Frontier 1710 1711é¤äºå个模åï¼éæ©å¨è¿æä¾ä¸¤ç§ç±å¹³å°æ¿ä½ éæ©çé项ï¼åè§[模åéæ©å¨](/docs/modes)ï¼ï¼ 1712 1713- **Auto** å°å·¥ä½å为å个é¢åï¼æä½ è®¾å®çè´¨éç级使ç¨é«æ§ä»·æ¯çå¼æ¾æ¨¡åãææå¥é¤åå¯ä½¿ç¨ã 1714- **Frontier** çå·¥ä½æ¹å¼ç¸åï¼ä½ä½¿ç¨æ们å¢éæéçé«çº§å沿模åãè´¨éæé«ï¼ç§¯åæ¶èæ´å¤ãä» éä»è´¹å¥é¤ã 1715 1716## 模åä¸è§ 1717 1718ç¸å¯¹ææ¬ä» ä¾åèï¼å®æ¯è¾çæ¯åä¸ä»»å¡é常æ¶èå¤å°ç§¯åï¼ä» $ï¼æ便å®ï¼å° $$$$$ï¼æè´µï¼ãå®é æ¶èåå³äºä»»å¡æ¬èº«ã模åæèçå¤å°ä»¥åä½ çå¥é¤ã 1719 1720| 模å | æä¾å | ç¸å¯¹ææ¬ | å¥é¤ | 1721|------|--------|----------|------| 1722| Claude Sonnet 5.5 | Anthropic | $$$ | ä»è´¹å¥é¤ | 1723| Claude Opus 5.5 | Anthropic | $$$$ | ä»è´¹å¥é¤ | 1724| Claude Fable 5 | Anthropic | $$$$$ | ä»è´¹å¥é¤ | 1725| GPT-6.1 Sol | OpenAI | $$$ | ä»è´¹å¥é¤ | 1726| GPT-5.6 Terra | OpenAI | $$$ | ä»è´¹å¥é¤ | 1727| GPT-6 Luna | OpenAI | $ | ææå¥é¤ | 1728| GLM 5.3 Flash | Z.ai | $ | ææå¥é¤ | 1729| GLM 5.3 FlashX | Z.ai | $ | ææå¥é¤ | 1730| GLM 5.2 | Z.ai | $$ | ææå¥é¤ | 1731| DeepSeek V4 Pro | DeepSeek | $$ | ææå¥é¤ | 1732| DeepSeek V4 Flash | DeepSeek | $ | ææå¥é¤ | 1733| Kimi K2.6 | Moonshot AI | $$ | ææå¥é¤ | 1734| MiMo 2.6 Pro | Xiaomi | $ | ææå¥é¤ | 1735| MiMo 2.6 Flash | Xiaomi | $ | ææå¥é¤ | 1736 1737## Anthropic 1738 1739### Claude Sonnet 5.5 1740
1741Anthropic çå¿«éå沿模åï¼å¯å®æ´çæå端åå端代ç ï¼é常æ é¿è§å并å®æå¤æ¥éª¤å·¥ä½ã 1742 1743- **ä¼å¿**ï¼æ¥å¸¸å¼åä¸å¯é çå ¨è½éæï¼ä½ä¸ºå沿模åï¼ååºè¾å¿«ã 1744- **ä¸è¶³**ï¼ç§¯åæ¶èææ¾é«äºå¼æ¾æ¨¡åã 1745 1746### Claude Opus 5.5 1747 1748Anthropic é¢å代ç çæè°æ¨¡åï¼ä¹æ¯æ¬å表ä¸ç¼ç¨åæºè½ä½ä»»å¡æ强çéæ©ãæ¨çå§ç»å¼å¯ã 1749 1750- **ä¼å¿**ï¼å¨å¤æçé¢ãæ¶æåæ£æ缺é·ä¸è´¨é顶å°ï¼å½ä¸æ¬¡å对å¾éè¦æ¶æ¯æä½³éæ©ã 1751- **ä¸è¶³**ï¼é度è¾æ ¢ï¼æ¯ token ä»·æ ¼çº¦ä¸º Claude Sonnet 5.5 ç两åï¼å æ¤æ¶èæ´å¤ç§¯åã 1752 1753### Claude Fable 5 1754 1755Anthropic çé«çº§æ¡£ä½ï¼å¤çæå°é¾æ¨çé®é¢çæ æã 1756 1757- **ä¼å¿**ï¼ææ·±å ¥çæ¨çè½åã 1758- **ä¸è¶³**ï¼ç§¯åæ¶èæé«ç模åï¼æ¯ Claude Opus 5.5 ç两åï¼ãå¨ç¼ç¨åæºè½ä½ä»»å¡ä¸ï¼å ¬å¼çåºåæµè¯æ¾ç¤º Claude Opus 5.5 æ´èä¸ç¹ï¼èä»·æ ¼ä¸å°ä¸åï¼å æ¤å¯¹å¤§å¤æ°æ建工ä½æ¥è¯´ï¼Opus 5.5 æ´åç®ã 1759 1760## OpenAI 1761 1762### GPT-6.1 Sol 1763 1764OpenAI çå沿模åï¼æ é¿ç¼ç¨åå¤æ¥éª¤çæºè½ä½å·¥ä½ã 1765 1766- **ä¼å¿**ï¼ä»£ç åçé¾ bugï¼å¨ç¸åæ¨ç强度ä¸ææ¾å¼ºäº GPT-6 Solï¼ãå·¥å ·è°ç¨åé¿ä»»å¡ã 1767- **ä¸è¶³**ï¼æ¯ä¸ªä»»å¡ä½¿ç¨ç token æ¯å代ç¥å¤ï¼ç§¯åæ¶èä¸ Claude Sonnet 5.5 å¤äºåä¸åºé´ã 1768 1769### GPT-5.6 Terra 1770 1771OpenAI çåè¡¡ä¸æ¡£æ¨¡åï¼æ¥å¸¸è´¨éä¸éï¼æ¯ token ä»·æ ¼ä½äºæè°æ¨¡åã 1772 1773- **ä¼å¿**ï¼é®çãåæåè¾ççä»»å¡ã 1774- **ä¸è¶³**ï¼å¨ç¬¬ä¸æ¹çé¿ç¼ç¨ä»»å¡æµè¯ä¸ï¼æåçè¾ä½ä¸æ¯ä¸ªä»»å¡æ¶èç token å¤å¾å¤ï¼å æ¤è¾é¿çæ建å¯è½æ¯é¢ææ´è´µãä¸æ¯çææ´ä¸ªåºç¨çé¦éã 1775 1776### GPT-6 Luna 1777 1778OpenAI æå¿«ãæ便å®çé项ã 1779 1780- **ä¼å¿**ï¼ç®çãèå´æç¡®çä»»å¡ï¼é 读代ç ãå°ä¿®æ¹ãå¿«éä¿®å¤ã 1781- **ä¸è¶³**ï¼å¨é¿èå¤æçä»»å¡ä¸è¾å¼±ï¼å¨é¿å¯¹è¯ä¸è®°ä½ç»èçè½åä¹è¾å¼±ãä¸éåæ建æ´ä¸ªåºç¨ã 1782 1783## å¼æ¾æ¨¡å 1784 1785### GLM 5.3 Flashï¼Z.aiï¼ 1786 1787åçå¤æ¨¡æï¼å¯ä»¥è¯»åæªå¾ï¼çæºè½ä½ç¼ç¨æ¨¡åï¼ä»·æ ¼åªæ¯å沿模åçé¶å¤´ãå建æ°é¡¹ç®æ¶é»è®¤é¢éå®ã 1788 1789- **ä¼å¿**ï¼ææ¬æä½ï¼å·¥å ·è°ç¨å¯é ï¼è½è¯»åå¾çã 1790- **ä¸è¶³**ï¼åçåæ»ä¼å æèï¼æäºåå¤å¯è½å æ¤åæ ¢ï¼å¨è¶ é¿ä»»å¡ä¸çæä¹ è¡¨ç°ä¸å¦ GLM 5.2 ç»è¿å åéªè¯ã 1791 1792### GLM 5.3 FlashXï¼Z.aiï¼ 1793 1794ä¸ GLM 5.3 Flash æ¯åä¸ä¸ªæ¨¡åï¼ç± Z.ai 以æ´å¿«çæ¡£ä½æä¾ï¼è½åç¸åï¼å¾çãå·¥å ·ãæ¨ç级å«ï¼ï¼å¨æ们çæµè¯ä¸è¿è¡é度约快ä¸åã 1795 1796- **ä¼å¿**ï¼é度快ï¼å ¶ä½ä¸ GLM 5.3 Flash å®å ¨ç¸åã 1797- **ä¸è¶³**ï¼ä»·æ ¼çº¦ä¸º GLM 5.3 Flash ç 2.5 åï¼ä½ä»å±äºæ便å®ç模åä¹ä¸ã 1798 1799### GLM 5.2ï¼Z.aiï¼ 1800 1801é¢åé¿ç¨ãèªä¸»æºè½ä½ç¼ç¨ç顶级å¼æ¾æ¨¡åï¼å¨ç¼ç¨åå·¥å ·ç¼æä¸æ¥è¿å沿模åã 1802 1803- **ä¼å¿**ï¼é¿çå¤æ¥éª¤ä»»å¡ãéæãå端ã 1804- **ä¸è¶³**ï¼çé¢ä¸å¦ DeepSeek V4 Pro æ Claude Opus ç²¾è´ï¼å®æ æ³å¨è§è§ä¸æ£æ¥èªå·±çææï¼ï¼å¨æé¿çä»»å¡ä¸ä»è½åäº Anthropic ç模åï¼æ¯æè´µçå¼æ¾æ¨¡åã 1805 1806### DeepSeek V4 Pro 1807 1808å¼æ¾æ¨¡åä¸æ§ä»·æ¯æé«ï¼ä¹æ¯çæå端æ强çå¼æ¾æ¨¡åã 1809 1810- **ä¼å¿**ï¼ä»¥ä½ææ¬äº§åºæ´æ´çå端åå端代ç ã 1811- **ä¸è¶³**ï¼å¨æå°é¾ççå®å·¥ç¨ä»»å¡åè¶ é¿å¤æ¥éª¤ä»»å¡ä¸ï¼å¼±äº GLM åå沿模åã 1812 1813### DeepSeek V4 Flash 1814 1815便å®åå¿«éï¼æ¥æé常大çä¸ä¸æçªå£ã 1816 1817- **ä¼å¿**ï¼é 读代ç ãé®çåå°ä»»å¡ã 1818- **ä¸è¶³**ï¼çé¢è´¨éä½äº DeepSeek V4 Proï¼é¿ä»»å¡ä¸çæä¹ è¡¨ç°éªè¯è¾å°ã 1819 1820### Kimi K2.6ï¼Moonshot AIï¼ 1821 1822å¨æ¨çåè°ç æ¹é¢å¾å¼ºçå¼æ¾æ¨¡åï¼è½è¾å¥½å°æ¯æ使ç¨å¤§éå·¥å ·çé¿ä¼è¯ã 1823 1824- **ä¼å¿**ï¼æ¨çãè°ç ãè§åã 1825- **ä¸è¶³**ï¼è¾åºä»·æ ¼é«äºå ¶ä»å¼æ¾æ¨¡åï¼å æ¤ä»£ç é大çå·¥ä½æ¯ç¨ DeepSeek V4 Pro æ GLM æ´è´µï¼ä¸ä¸æçªå£å°äºæ¬å表ä¸ç大å¤æ°æ¨¡åï¼é度è¾æ ¢ã 1826 1827### MiMo 2.6 Proï¼Xiaomiï¼ 1828 1829å®éªæ§ï¼å°ç±³äº 2026 å¹´ 9 æåå¸çå¼æ¾æéæè°æ¨¡åï¼æºè½ä½ä»»å¡è½åè¾ä¸ä¸ä»£å¤§å¹ æåã 1830 1831- **ä¼å¿**ï¼å ¬å¼åºåä¸çæºè½ä½ç¼ç è½åæ¥è¿å沿模åï¼ææ¬ä½ã 1832- **ä¸è¶³**ï¼çæéåº¦æ ¢ï¼å¤§æ件å¯è½éè¦å åéï¼ï¼ä»å¤äºå®éªé¶æ®µã 1833 1834### MiMo 2.6 Flashï¼Xiaomiï¼ 1835 1836å®éªæ§ï¼åä¸ç³»åçä½ææ¬å¼æ¾æ¨¡åï¼ä»·æ ¼ä¸ DeepSeek V4 Flash ç¸åã 1837 1838- **ä¼å¿**ï¼ææ¬å¾ä½ï¼æºè½ä½ç¼ç è½åä¸éã 1839- **ä¸è¶³**ï¼çæéåº¦æ ¢ï¼ä»å¤äºå®éªé¶æ®µã 1840 1841## æ该éåªä¸ªæ¨¡åï¼ 1842 1843| åºæ¯ | æ¨èéæ© | 1844|------|----------| 1845| åå¼å§ä½¿ç¨ï¼æä½¿ç¨ Community å¥é¤ | GLM 5.3 Flash æ Auto | 1846| ä»è´¹å¥é¤ä¸çæ¥å¸¸å¼å | Claude Sonnet 5.5 | 1847| å¤æçé¢ãæ¶æãæ£æç¼ºé· | Claude Opus 5.5 | 1848| æå°é¾çæ¨çé®é¢ï¼ææ¬å ¶æ¬¡ | Claude Fable 5 | 1849| é¿æ¶é´ãèªä¸»çå¤æ¥éª¤ä»»å¡ | GLM 5.2ãGPT-6.1 Sol æ Claude Sonnet 5.5 | 1850| é¢ç®æéä½æ³è¦ç²¾è´çå端 | DeepSeek V4 Pro | 1851| å¿«éçææ¬ææ ·å¼ä¿®æ¹ãå ³äºä»£ç çæé® | GPT-6 LunaãDeepSeek V4 Flash æ GLM 5.3 Flash | 1852| ä¸æ³èªå·±é | Autoï¼ä»è´¹å¥é¤å¯ç¨ Frontierï¼ | 1853 1854> [!TIP] ä½ å¯ä»¥éæ¶åæ¢æ¨¡åã常è§åæ³ï¼å ç¨é«æ§ä»·æ¯ç模åæ建ï¼åå¨éè¦æ ¼å¤ç¨å¿ç页é¢æ缺é·ä¸åæ¢å° Claude Opus 5.5ãåéåï¼åºç¨å çé¢ä¼°ï¼Auto å Frontierï¼ä¼æ¾ç¤ºé¢è®¡ç§¯åï¼åéåï¼ä½¿ç¨è®°å½ä¼æ¾ç¤ºå®é æ¶èã 1855`},"abort-queue":{es:`# Cola y cancelar 1856 1857\`\`\`anim 1858queue 1859\`\`\` 1860
1861## Cancelar una petición 1862 1863Puedes cancelar una petición en curso pulsando el botón **"Stop"** que sustituye al botón "Enviar" durante la ejecución. El agente de IA se detendrá de forma limpia: 1864 1865- Los **archivos ya escritos** se conservan: los cambios completados quedan en el proyecto 1866- El **contenido ya generado** en el chat permanece visible 1867- Solo se cancelan las operaciones **aún no completadas** 1868- El chat mostrará un mensaje "Ejecución detenida" 1869 1870### Cuándo usar Stop 1871 1872- La IA va en la dirección equivocada 1873- Quieres cambiar de enfoque a mitad de la ejecución 1874- La operación tarda demasiado 1875- Has cambiado de idea sobre qué construir 1876 1877## Cola de mensajes 1878 1879Si envÃas un mensaje mientras la IA todavÃa procesa el anterior, el nuevo mensaje se pone en cola automáticamente, como en Cursor. 1880 1881### Cómo funciona 1882 18831. **Escribe durante la ejecución**: el campo del chat sigue activo 18842. El mensaje aparece como una **pastilla "en cola"** debajo del bloque en ejecución 18853. Cuando la ejecución actual termina, el mensaje en cola se **envÃa automáticamente** 18864. También puedes **forzar el envÃo inmediato** pulsando el icono de flecha hacia arriba. Esto interrumpe la ejecución actual y envÃa tu mensaje al instante 1887 1888### Indicadores visuales 1889 1890- **Insignia parpadeante** en la cola cuando hay mensajes esperando 1891- **Etiqueta** "Mensaje en cola: se enviará tras la ejecución actual" 1892- La cola se vacÃa al cancelar o cuando se han procesado todos los mensajes en cola 1893 1894> [!TIP] Puedes escribir instrucciones de corrección mientras la IA trabaja. Se enviarán en cuanto termine la ejecución actual, ahorrándote tiempo. 1895`,fr:`# File & Annuler 1896 1897\`\`\`anim 1898queue 1899\`\`\` 1900 1901## Annuler une requête 1902 1903Tu peux annuler une requête en cours en cliquant sur le bouton **« Stop »** qui remplace le bouton « Envoyer » pendant l'exécution. L'agent IA s'arrêtera proprement : 1904 1905- Les **fichiers déjà écrits** sont conservés : les modifications terminées restent dans le projet 1906- Le **contenu déjà généré** dans le chat reste visible 1907- Seules les opérations **pas encore terminées** sont annulées 1908- Le chat affichera un message « Exécution arrêtée » 1909 1910### Quand utiliser Stop 1911 1912- L'IA part dans la mauvaise direction 1913- Tu veux changer d'approche en cours d'exécution 1914- L'opération prend trop de temps 1915- Tu as changé d'avis sur ce que tu veux construire 1916 1917## File d'attente des messages 1918 1919Si tu envoies un message pendant que l'IA traite encore le précédent, le nouveau message est automatiquement mis en file, comme dans Cursor. 1920 1921### Comment ça marche 1922 19231. **Ãcris pendant l'exécution** : le champ du chat reste actif 19242. Le message apparaît comme une **pastille « en file »** sous le bloc en cours 19253. Quand l'exécution actuelle se termine, le message en file est **envoyé automatiquement** 19264. Tu peux aussi **forcer l'envoi immédiat** en cliquant sur l'icône flèche vers le haut. Cela interrompt l'exécution en cours et envoie ton message aussitôt 1927 1928### Indicateurs visuels 1929 1930- **Badge clignotant** sur la file quand des messages attendent 1931- **Libellé** « Message en file : sera envoyé après l'exécution en cours » 1932- La file se vide en cas d'annulation ou quand tous les messages en file ont été traités 1933 1934> [!TIP] Tu peux écrire des instructions de correction pendant que l'IA travaille. Elles seront envoyées dès la fin de l'exécution en cours, ce qui te fait gagner du temps. 1935`,de:`# Warteschlange & Abbruch 1936 1937\`\`\`anim 1938queue 1939\`\`\` 1940 1941## Eine Anfrage abbrechen 1942 1943Du kannst eine laufende Anfrage abbrechen, indem du auf **âStop"** klickst, das während der Ausführung den âSenden"-Button ersetzt. Der KI-Agent hält sauber an: 1944 1945- **Bereits geschriebene Dateien** bleiben erhalten: abgeschlossene Ãnderungen bleiben im Projekt 1946- **Bereits generierte Inhalte** im Chat bleiben sichtbar 1947- Nur **noch nicht abgeschlossene** Operationen werden abgebrochen 1948- Der Chat zeigt die Meldung âAusführung gestoppt" 1949 1950### Wann Stop nutzen 1951 1952- Die KI geht in die falsche Richtung 1953- Du willst mitten in der Ausführung den Ansatz ändern 1954- Die Operation dauert zu lange 1955- Du hast deine Meinung geändert, was gebaut werden soll 1956 1957## Nachrichten-Warteschlange 1958 1959Wenn du eine Nachricht sendest, während die KI die vorige noch verarbeitet, wird die neue automatisch in die Warteschlange gestellt â wie in Cursor. 1960 1961### So funktioniert es 1962 19631. **Schreibe während der Ausführung**: das Chat-Eingabefeld bleibt aktiv 19642. Die Nachricht erscheint als **âin Warteschlange"-Pille** unter dem laufenden Block 19653. Wenn die aktuelle Ausführung endet, wird die wartende Nachricht **automatisch gesendet** 19664. Du kannst das **sofortige Senden erzwingen**, indem du auf das Pfeil-nach-oben-Symbol klickst. Das unterbricht die aktuelle Ausführung und sendet deine Nachricht sofort 1967 1968### Visuelle Hinweise 1969 1970- **Pulsierendes Abzeichen** an der Warteschlange, wenn Nachrichten warten 1971- **Beschriftung** âNachricht in Warteschlange: wird nach der aktuellen Ausführung gesendet" 1972- Die Warteschlange wird beim Abbruch geleert oder wenn alle wartenden Nachrichten verarbeitet sind 1973 1974> [!TIP] Du kannst Korrekturanweisungen schreiben, während die KI arbeitet. Sie werden gesendet, sobald die aktuelle Ausführung endet â das spart Zeit. 1975`,zh:`# éåä¸ä¸æ¢ 1976 1977\`\`\`anim 1978queue 1979\`\`\` 1980 1981## åæ¶ä¸ä¸ªè¯·æ± 1982 1983ä½ å¯ä»¥å¨æ§è¡è¿ç¨ä¸ç¹å» **âStopâ** æé®ï¼æ§è¡æ¶å®ä¼å代âåéâæé®ï¼æ¥åæ¶è¿è¡ä¸ç请æ±ãAI æºè½ä½ä¼å¹²åå°åæ¢ï¼ 1984 1985- **å·²åå ¥çæ件**ä¼ä¿çï¼å·²å®æçæ´æ¹çå¨é¡¹ç®ä¸ 1986- è天ä¸**å·²çæçå 容**ä»ç¶å¯è§
1987- åªæ**å°æªå®æ**çæä½ä¼è¢«åæ¶ 1988- è天ä¼æ¾ç¤ºä¸æ¡âæ§è¡å·²åæ¢âçæ¶æ¯ 1989 1990### ä½æ¶ä½¿ç¨ Stop 1991 1992- AI èµ°åäºé误çæ¹å 1993- ä½ æ³å¨æ§è¡ä¸éæ´æ¢æè·¯ 1994- æä½èæ¶è¿é¿ 1995- ä½ æ¹åäºè¦æ建çå 容çæ³æ³ 1996 1997## æ¶æ¯éå 1998 1999å¦æå¨ AI ä»å¨å¤çä¸ä¸æ¡æ¶æ¯æ¶ä½ ååéäºä¸æ¡ï¼æ°æ¶æ¯ä¼åå¨ Cursor ä¸ä¸æ ·èªå¨è¿å ¥éåã 2000 2001### å·¥ä½åç 2002 20031. **å¨æ§è¡æé´è¾å ¥**ï¼è天è¾å ¥æ¡ä¿æå¯ç¨ 20042. æ¶æ¯ä¼ä½ä¸ºä¸ä¸ª**âæéä¸âçæ ç¾**æ¾ç¤ºå¨è¿è¡ä¸çåºåä¸æ¹ 20053. å½å½åæ§è¡å®æåï¼æéçæ¶æ¯ä¼**èªå¨åé** 20064. ä½ ä¹å¯ä»¥ç¹å»åä¸ç®å¤´å¾æ **强å¶ç«å³åé**ãè¿ä¼ä¸æå½åæ§è¡å¹¶ç«å»åéä½ çæ¶æ¯ 2007 2008### è§è§æ示 2009 2010- ææ¶æ¯çå¾ æ¶ï¼éåä¸ä¼æ**éªççå¾½æ ** 2011- **æ ç¾**âæ¶æ¯å·²æéï¼å°å¨å½åæ§è¡ååéâ 2012- ä¸æ¢æ¶ï¼ææææéæ¶æ¯å¤çå®æ¯åï¼éåä¼è¢«æ¸ 空 2013 2014> [!TIP] ä½ å¯ä»¥å¨ AI å·¥ä½æ¶å°±åä¸ä¿®æ£æ令ãå®ä»¬ä¼å¨å½åæ§è¡ç»æåç«å³åéï¼ä¸ºä½ èçæ¶é´ã 2015`},"ai-agents":{es:`# Agentes IA del proyecto 2016 2017\`\`\`anim 2018agents-team 2019\`\`\` 2020 2021Cada proyecto **Web app** tiene una pestaña **AI Agents** en el editor: es el panel de control de todas las funciones de IA de tu aplicación. Aquà ves qué agentes de IA están activos, cómo están conectados y los configuras â sin código y sin claves API. 2022 2023## Qué es la pestaña AI Agents 2024 2025Abre un proyecto y selecciona la pestaña **AI Agents** en la parte superior. Verás un **diagrama** que muestra, para cada función de IA: 2026 2027- la **página o componente** de tu app que la usa, 2028- el **endpoint** que la procesa, 2029- el **Coderblock AI Gateway**, el motor que habla con los modelos de IA, 2030- el **modelo** en uso (para chat o para imágenes). 2031 2032El diagrama se actualiza automáticamente cada vez que añades una nueva función de IA desde el Chat IA. 2033 2034## Los agentes que tienes de serie 2035 2036| Agente | Qué hace | 2037|---|---| 2038| **AI Chat** | Un chat que responde a tus usuarios en tiempo real | 2039| **AI Image** | Genera imágenes a partir de una descripción de texto | 2040 2041> [!INFO] Cada función de IA pasa por el **Coderblock AI Gateway**: nunca introduces claves API de OpenAI, Anthropic o Google. El uso se factura contra tus **créditos** de Coderblock. 2042 2043## Añadir un nuevo agente 2044 2045Para añadir una función de IA, basta con pedirla en el **Chat IA** del proyecto, en lenguaje natural. Ejemplos: 2046 2047- "Añade un chat de IA de soporte que responda a las preguntas de los visitantes" 2048- "Añade un generador de imágenes a partir de una descripción" 2049 2050Una vez creado, el agente aparece automáticamente en la pestaña **AI Agents**. 2051 2052## Configurar un agente 2053 2054Haz clic en **Configurar** arriba a la derecha para abrir el panel lateral. Para cada agente puedes: 2055 2056### Cambiar el modelo de IA 2057 2058En el desplegable **modelo de IA** elige el modelo a usar: 2059 2060- Para agentes de **chat**: modelos de conversación (p. ej. Claude Haiku/Sonnet, GPT-4o / GPT-4o mini) 2061- Para agentes de **imagen**: modelos de generación de imágenes (p. ej. Gemini 2.5 Flash Image) 2062 2063Al cambiar el modelo, Coderblock actualiza automáticamente el código de la función y la vuelve a desplegar: el nuevo modelo se activa al instante, sin trabajo técnico. 2064 2065> [!TIP] Los modelos más ligeros (Haiku, GPT-4o mini) son más rápidos y baratos; los más potentes (Sonnet, GPT-4o) dan respuestas más cuidadas. Cámbialos cuando quieras. 2066 2067### Base de conocimiento (RAG) 2068 2069Para agentes de chat puedes adjuntar documentos que la IA usará para responder. Consulta la guÃa dedicada: [Base de conocimiento (RAG)](/docs/ai-knowledge-base). 2070 2071## Créditos y coste 2072 2073Cada petición de IA consume créditos según el modelo elegido. Los detalles están en la sección [Créditos](/docs/credits). 2074`,fr:`# Agents IA du projet 2075 2076\`\`\`anim 2077agents-team 2078\`\`\` 2079 2080Chaque projet **Web app** possède un onglet **AI Agents** dans l'éditeur : c'est le panneau de contrôle de toutes les fonctions d'IA de ton application. Ici tu vois quels agents IA sont actifs, comment ils sont reliés, et tu les configures â sans code et sans clés API. 2081 2082## Ce qu'est l'onglet AI Agents 2083 2084Ouvre un projet et sélectionne l'onglet **AI Agents** en haut. Tu verras un **diagramme** qui montre, pour chaque fonction d'IA : 2085 2086- la **page ou le composant** de ton app qui l'utilise, 2087- l'**endpoint** qui la traite, 2088- le **Coderblock AI Gateway**, le moteur qui dialogue avec les modèles d'IA, 2089- le **modèle** utilisé (pour le chat ou pour les images). 2090 2091Le diagramme se met à jour automatiquement à chaque nouvelle fonction d'IA ajoutée via le Chat IA. 2092 2093## Les agents fournis d'office 2094 2095| Agent | Ce qu'il fait | 2096|---|---| 2097| **AI Chat** | Un chat qui répond à tes utilisateurs en temps réel | 2098| **AI Image** | Génère des images à partir d'une description textuelle | 2099 2100>
2100 [!INFO] Chaque fonction d'IA passe par le **Coderblock AI Gateway** : tu ne saisis jamais de clés API OpenAI, Anthropic ou Google. L'usage est facturé sur tes **crédits** Coderblock. 2101 2102## Ajouter un nouvel agent 2103 2104Pour ajouter une fonction d'IA, il suffit de la demander dans le **Chat IA** du projet, en langage naturel. Exemples : 2105 2106- « Ajoute un chat IA de support qui répond aux questions des visiteurs » 2107- « Ajoute un générateur d'images à partir d'une description » 2108 2109Une fois créé, l'agent apparaît automatiquement dans l'onglet **AI Agents**. 2110 2111## Configurer un agent 2112 2113Clique sur **Configurer** en haut à droite pour ouvrir le panneau latéral. Pour chaque agent tu peux : 2114 2115### Changer le modèle d'IA 2116 2117Dans le menu **modèle d'IA**, choisis le modèle à utiliser : 2118 2119- Pour les agents **chat** : modèles de conversation (p. ex. Claude Haiku/Sonnet, GPT-4o / GPT-4o mini) 2120- Pour les agents **image** : modèles de génération d'images (p. ex. Gemini 2.5 Flash Image) 2121 2122Quand tu changes de modèle, Coderblock met automatiquement à jour le code de la fonction et la redéploie : le nouveau modèle est actif immédiatement, sans travail technique. 2123 2124> [!TIP] Les modèles plus légers (Haiku, GPT-4o mini) sont plus rapides et économiques ; les plus puissants (Sonnet, GPT-4o) donnent des réponses plus soignées. Change-les quand tu veux. 2125 2126### Base de connaissances (RAG) 2127 2128Pour les agents chat, tu peux joindre des documents que l'IA utilisera pour répondre. Voir le guide dédié : [Base de connaissances (RAG)](/docs/ai-knowledge-base). 2129 2130## Crédits et coût 2131 2132Chaque requête d'IA consomme des crédits selon le modèle choisi. Les détails sont dans la section [Crédits](/docs/credits). 2133`,de:`# KI-Agenten des Projekts 2134 2135\`\`\`anim 2136agents-team 2137\`\`\` 2138 2139Jedes **Web app**-Projekt hat im Editor einen **AI Agents**-Tab: die Steuerzentrale für alle KI-Funktionen deiner Anwendung. Hier siehst du, welche KI-Agenten aktiv sind, wie sie verbunden sind, und konfigurierst sie â ohne Code und ohne API-Schlüssel. 2140 2141## Was der AI-Agents-Tab ist 2142 2143Ãffne ein Projekt und wähle oben den Tab **AI Agents**. Du siehst ein **Diagramm**, das für jede KI-Funktion zeigt: 2144 2145- die **Seite oder Komponente** deiner App, die sie nutzt, 2146- den **Endpoint**, der sie verarbeitet, 2147- das **Coderblock AI Gateway**, die Engine, die mit den KI-Modellen spricht, 2148- das verwendete **Modell** (für Chat oder Bilder). 2149 2150Das Diagramm aktualisiert sich automatisch, sobald du über den KI-Chat eine neue KI-Funktion hinzufügst. 2151 2152## Die Agenten von Haus aus 2153 2154| Agent | Was er tut | 2155|---|---| 2156| **AI Chat** | Ein Chat, der deinen Nutzern in Echtzeit antwortet | 2157| **AI Image** | Erzeugt Bilder aus einer Textbeschreibung | 2158 2159> [!INFO] Jede KI-Funktion läuft über das **Coderblock AI Gateway**: du gibst nie API-Schlüssel von OpenAI, Anthropic oder Google ein. Die Nutzung wird gegen deine Coderblock-**Credits** abgerechnet. 2160 2161## Einen neuen Agenten hinzufügen 2162 2163Um eine KI-Funktion hinzuzufügen, bitte einfach im **KI-Chat** des Projekts in natürlicher Sprache darum. Beispiele: 2164 2165- âFüge einen Support-KI-Chat hinzu, der Besucherfragen beantwortet" 2166- âFüge einen Bildgenerator aus einer Beschreibung hinzu" 2167 2168Nach dem Erstellen erscheint der Agent automatisch im **AI Agents**-Tab. 2169 2170## Einen Agenten konfigurieren 2171 2172Klicke oben rechts auf **Konfigurieren**, um das Seitenpanel zu öffnen. Für jeden Agenten kannst du: 2173 2174### Das KI-Modell wechseln 2175 2176Wähle im Dropdown **KI-Modell** das zu verwendende Modell: 2177 2178- Für **Chat**-Agenten: Konversationsmodelle (z. B. Claude Haiku/Sonnet, GPT-4o / GPT-4o mini) 2179- Für **Bild**-Agenten: Bildgenerierungsmodelle (z. B. Gemini 2.5 Flash Image) 2180 2181Beim Modellwechsel aktualisiert Coderblock automatisch den Funktionscode und deployt neu: das neue Modell ist sofort aktiv, ohne technischen Aufwand. 2182 2183> [!TIP] Leichtere Modelle (Haiku, GPT-4o mini) sind schneller und günstiger; stärkere (Sonnet, GPT-4o) liefern feinere Antworten. Wechsle sie jederzeit. 2184 2185### Wissensdatenbank (RAG) 2186 2187Für Chat-Agenten kannst du Dokumente anhängen, die die KI zum Antworten nutzt. Siehe den eigenen Leitfaden: [Wissensdatenbank (RAG)](/docs/ai-knowledge-base). 2188 2189## Credits und Kosten 2190
2191Jede KI-Anfrage verbraucht Credits je nach gewähltem Modell. Details im Abschnitt [Credits](/docs/credits). 2192`,zh:`# é¡¹ç® AI æºè½ä½ 2193 2194\`\`\`anim 2195agents-team 2196\`\`\` 2197 2198æ¯ä¸ª **Web app** 项ç®å¨ç¼è¾å¨ä¸é½æä¸ä¸ª **AI Agents** æ ç¾é¡µï¼å®æ¯ä½ åºç¨ä¸ææ AI åè½çæ§å¶å°ãå¨è¿éä½ å¯ä»¥çå°åªäº AI æºè½ä½å¤äºæ¿æ´»ç¶æãå®ä»¬å¦ä½è¿æ¥ï¼å¹¶è¿è¡é ç½®ââæ é代ç ï¼ä¹æ é API å¯é¥ã 2199 2200## AI Agents æ ç¾é¡µæ¯ä»ä¹ 2201 2202æå¼ä¸ä¸ªé¡¹ç®å¹¶éæ©é¡¶é¨ç **AI Agents** æ ç¾ãä½ ä¼çå°ä¸å¼ **å¾**ï¼ä¸ºæ¯ä¸ª AI åè½å±ç¤ºï¼ 2203 2204- 使ç¨å®çåºç¨**页é¢æç»ä»¶**ï¼ 2205- å¤çå®ç**端ç¹**ï¼ 2206- **Coderblock AI Gateway**ï¼å³ä¸ AI 模å对è¯çå¼æï¼ 2207- æ£å¨ä½¿ç¨ç**模å**ï¼ç¨äºè天æå¾çï¼ã 2208 2209æ¯å½ä½ éè¿ AI è天添å æ°ç AI åè½ï¼è¿å¼ å¾é½ä¼èªå¨æ´æ°ã 2210 2211## å¼ç®±å³ç¨çæºè½ä½ 2212 2213| æºè½ä½ | ä½ç¨ | 2214|---|---| 2215| **AI Chat** | å®æ¶åçç¨æ·çè天 | 2216| **AI Image** | æ ¹æ®æåæè¿°çæå¾ç | 2217 2218> [!INFO] æ¯ä¸ª AI åè½é½ç»è¿ **Coderblock AI Gateway**ï¼ä½ æ°¸è¿ä¸å¿ è¾å ¥ OpenAIãAnthropic æ Google ç API å¯é¥ãç¨éæä½ ç Coderblock **积å**计费ã 2219 2220## æ·»å æ°çæºè½ä½ 2221 2222è¦æ·»å ä¸ä¸ª AI åè½ï¼åªéå¨é¡¹ç®ç **AI è天**ä¸ç¨èªç¶è¯è¨æåºå³å¯ãä¾å¦ï¼ 2223 2224- âæ·»å ä¸ä¸ªå®¢æ AI è天ï¼åç访客çé®é¢â 2225- âæ·»å ä¸ä¸ªæ ¹æ®æè¿°çæå¾çççæå¨â 2226 2227å建åï¼è¯¥æºè½ä½ä¼èªå¨åºç°å¨ **AI Agents** æ ç¾é¡µä¸ã 2228 2229## é ç½®æºè½ä½ 2230 2231ç¹å»å³ä¸è§ç**é ç½®**æå¼ä¾§è¾¹é¢æ¿ã对æ¯ä¸ªæºè½ä½ä½ å¯ä»¥ï¼ 2232 2233### åæ¢ AI 模å 2234 2235å¨ **AI 模å**ä¸æèåä¸éæ©è¦ä½¿ç¨ç模åï¼ 2236 2237- 对äº**è天**æºè½ä½ï¼å¯¹è¯æ¨¡åï¼å¦ Claude Haiku/SonnetãGPT-4o / GPT-4o miniï¼ 2238- 对äº**å¾ç**æºè½ä½ï¼å¾ççæ模åï¼å¦ Gemini 2.5 Flash Imageï¼ 2239 2240åæ¢æ¨¡åæ¶ï¼Coderblock ä¼èªå¨æ´æ°è¯¥å½æ°ç代ç 并éæ°é¨ç½²ï¼æ°æ¨¡åç«å³çæï¼æ éä»»ä½ææ¯æä½ã 2241 2242> [!TIP] æ´è½»éç模åï¼HaikuãGPT-4o miniï¼æ´å¿«æ´çï¼æ´å¼ºç模åï¼SonnetãGPT-4oï¼åçæ´ç²¾è´ãä½ å¯ä»¥éæ¶æ´æ¢ã 2243 2244### ç¥è¯åº (RAG) 2245 2246对è天æºè½ä½ï¼ä½ å¯ä»¥éå ææ¡£ï¼ä¾ AI ç¨äºåçãåè§ä¸é¨çæåï¼[ç¥è¯åº (RAG)](/docs/ai-knowledge-base)ã 2247 2248## 积åä¸ææ¬ 2249 2250æ¯æ¬¡ AI 请æ±ä¼æ ¹æ®æé模åæ¶è积åã详æ è§[积å](/docs/credits)é¨åã 2251`},"ai-knowledge-base":{es:`# Base de conocimiento (RAG) 2252 2253\`\`\`anim 2254knowledge-base 2255\`\`\` 2256 2257La **base de conocimiento** te permite "entrenar" el chat de IA de tu app con **tus propios documentos**: la IA responderá a tus usuarios basándose en el contenido que subas (tarifas, FAQ, polÃticas, manuales, etc.). Esta técnica se llama **RAG** (Retrieval-Augmented Generation), pero lo único que tienes que hacer es subir los archivos â Coderblock se encarga del resto. 2258 2259## Para qué sirve 2260 2261Sin base de conocimiento, el chat responde con conocimiento general. Con base de conocimiento, **además** responde usando tu información especÃfica de negocio. Ejemplos: 2262 2263- Una FAQ de empresa para responder a los clientes 2264- Tu tarifa y tu polÃtica de devoluciones 2265- Un manual de producto o una guÃa interna 2266 2267## Cómo añadir documentos 2268 22691. Abre la pestaña **AI Agents** y haz clic en **Configurar** 22702. En el agente de chat, ve a la sección **Base de conocimiento (RAG)** 22713. Haz clic en **Subir archivo** (o **Texto** para pegar texto) 22724. El documento se procesa y queda disponible para la IA al instante 2273 2274Los archivos se dividen en pequeños fragmentos y se indexan, para que la IA siempre encuentre la parte más relevante a la pregunta del usuario. 2275 2276## Formatos admitidos 2277 2278| Formato | Admitido | 2279|---|---| 2280| Texto (.txt) | Sà | 2281| Markdown (.md) | Sà | 2282| CSV (.csv) | Sà | 2283| JSON (.json) | Sà | 2284| PDF / Word | TodavÃa no â pega el texto | 2285 2286> [!TIP] Para los PDF, por ahora copia y pega el contenido con el botón **Texto**. Documentos claros y bien redactados dan mejores respuestas. 2287 2288## Cómo usa la IA tus documentos 2289 2290Cuando un usuario hace una pregunta en el chat, la IA: 2291 22921. busca en tus documentos los pasajes más relevantes, 22932. los usa como contexto para redactar la respuesta, 22943. si la información no está, lo dice y responde con conocimiento general. 2295 2296Todo esto ocurre **en el servidor**, de forma segura, en cada mensaje. 2297 2298## Gestionar documentos 2299 2300En la misma sección ves la lista de documentos subidos, con el número de "fragmentos" indexad
2300os. Para eliminar uno, haz clic en el icono de la **papelera**: la IA deja de usarlo de inmediato. 2301 2302## Privacidad 2303 2304Los documentos se guardan en la base de datos de **tu** app y solo los usa tu chat de IA. Cada agente tiene su propia base de conocimiento separada. 2305 2306> [!INFO] La base de conocimiento está disponible para los agentes de **chat**. La generación de imágenes no usa documentos. 2307`,fr:`# Base de connaissances (RAG) 2308 2309\`\`\`anim 2310knowledge-base 2311\`\`\` 2312 2313La **base de connaissances** te permet d'« entraîner » le chat IA de ton app avec **tes propres documents** : l'IA répondra à tes utilisateurs à partir du contenu que tu téléverses (tarifs, FAQ, politiques, manuels, etc.). Cette technique s'appelle **RAG** (Retrieval-Augmented Generation), mais tu n'as qu'à téléverser les fichiers â Coderblock s'occupe du reste. 2314 2315## à quoi ça sert 2316 2317Sans base de connaissances, le chat répond avec des connaissances générales. Avec une base de connaissances, il répond **aussi** en utilisant tes informations métier spécifiques. Exemples : 2318 2319- Une FAQ d'entreprise pour répondre aux clients 2320- Ta grille tarifaire et ta politique de retour 2321- Un manuel produit ou un guide interne 2322 2323## Comment ajouter des documents 2324 23251. Ouvre l'onglet **AI Agents** et clique sur **Configurer** 23262. Sur l'agent de chat, va à la section **Base de connaissances (RAG)** 23273. Clique sur **Téléverser un fichier** (ou **Texte** pour coller du texte) 23284. Le document est traité et devient disponible pour l'IA immédiatement 2329 2330Les fichiers sont découpés en petits morceaux et indexés, pour que l'IA trouve toujours la partie la plus pertinente à la question de l'utilisateur. 2331 2332## Formats pris en charge 2333 2334| Format | Pris en charge | 2335|---|---| 2336| Texte (.txt) | Oui | 2337| Markdown (.md) | Oui | 2338| CSV (.csv) | Oui | 2339| JSON (.json) | Oui | 2340| PDF / Word | Pas encore â colle le texte | 2341 2342> [!TIP] Pour les PDF, pour l'instant copie-colle le contenu avec le bouton **Texte**. Des documents clairs et bien rédigés donnent de meilleures réponses. 2343 2344## Comment l'IA utilise tes documents 2345 2346Quand un utilisateur pose une question dans le chat, l'IA : 2347 23481. cherche dans tes documents les passages les plus pertinents, 23492. les utilise comme contexte pour rédiger la réponse, 23503. si l'information n'y est pas, elle le dit et répond avec des connaissances générales. 2351 2352Tout cela se passe **côté serveur**, en toute sécurité, à chaque message. 2353 2354## Gérer les documents 2355 2356Dans la même section, tu vois la liste des documents téléversés, avec le nombre de « morceaux » indexés. Pour en supprimer un, clique sur l'icône **corbeille** : l'IA cesse aussitôt de l'utiliser. 2357 2358## Confidentialité 2359 2360Les documents sont stockés dans la base de données de **ton** app et utilisés uniquement par ton chat IA. Chaque agent a sa propre base de connaissances distincte. 2361 2362> [!INFO] La base de connaissances est disponible pour les agents **chat**. La génération d'images n'utilise pas de documents. 2363`,de:`# Wissensdatenbank (RAG) 2364 2365\`\`\`anim 2366knowledge-base 2367\`\`\` 2368 2369Mit der **Wissensdatenbank** kannst du den KI-Chat deiner App mit **deinen eigenen Dokumenten** âtrainieren": Die KI antwortet deinen Nutzern auf Basis der Inhalte, die du hochlädst (Preislisten, FAQs, Richtlinien, Handbücher usw.). Diese Technik heiÃt **RAG** (Retrieval-Augmented Generation), aber du musst nur die Dateien hochladen â den Rest übernimmt Coderblock. 2370 2371## Wofür es gut ist 2372 2373Ohne Wissensdatenbank antwortet der Chat mit Allgemeinwissen. Mit Wissensdatenbank antwortet er **zusätzlich** anhand deiner geschäftsspezifischen Informationen. Beispiele: 2374 2375- Eine Firmen-FAQ zur Beantwortung von Kundenfragen 2376- Deine Preisliste und Rückgaberichtlinie 2377- Ein Produkthandbuch oder ein internes Handbuch 2378 2379## Dokumente hinzufügen 2380 23811. Ãffne den Tab **AI Agents** und klicke auf **Konfigurieren** 23822. Gehe beim Chat-Agenten zum Abschnitt **Wissensdatenbank (RAG)** 23833. Klicke auf **Datei hochladen** (oder **Text**, um Text einzufügen) 23844. Das Dokument wird verarbeitet und steht der KI sofort zur Verfügung 2385 2386Dateien werden in kleine Teile zerlegt und indiziert, damit die KI immer den zur Nutzerfrage passendsten Teil findet. 2387 2388## Unterstützte Formate 2389 2390| Format | Unterstützt | 2391|---|---| 2392| Text (.txt) | Ja | 2393| Markdown (.md) | Ja | 2394| CSV (.csv) | Ja | 2395| JSON (.json) | Ja |
2396| PDF / Word | Noch nicht â füge den Text ein | 2397 2398> [!TIP] Kopiere bei PDFs den Inhalt vorerst mit dem **Text**-Button. Klare, gut geschriebene Dokumente ergeben bessere Antworten. 2399 2400## Wie die KI deine Dokumente nutzt 2401 2402Wenn ein Nutzer im Chat eine Frage stellt, wird die KI: 2403 24041. in deinen Dokumenten nach den relevantesten Passagen suchen, 24052. sie als Kontext für die Antwort verwenden, 24063. falls die Information fehlt, das sagen und mit Allgemeinwissen antworten. 2407 2408All das passiert **serverseitig**, sicher, bei jeder Nachricht. 2409 2410## Dokumente verwalten 2411 2412Im selben Abschnitt siehst du die Liste der hochgeladenen Dokumente mit der Zahl der indizierten âTeile". Zum Entfernen klicke auf das **Papierkorb**-Symbol: die KI nutzt es sofort nicht mehr. 2413 2414## Datenschutz 2415 2416Dokumente werden in der Datenbank **deiner** App gespeichert und nur von deinem KI-Chat genutzt. Jeder Agent hat seine eigene, getrennte Wissensdatenbank. 2417 2418> [!INFO] Die Wissensdatenbank ist für **Chat**-Agenten verfügbar. Die Bildgenerierung nutzt keine Dokumente. 2419`,zh:`# ç¥è¯åº (RAG) 2420 2421\`\`\`anim 2422knowledge-base 2423\`\`\` 2424 2425**ç¥è¯åº**è®©ä½ ç¨**èªå·±çææ¡£**æ¥âè®ç»âåºç¨ç AI è天ï¼AI ä¼æ ¹æ®ä½ ä¸ä¼ çå 容ï¼ä»·ç®è¡¨ã常è§é®é¢ãæ¿çãæåçï¼åçç¨æ·ãè¿é¡¹ææ¯å« **RAG**ï¼æ£ç´¢å¢å¼ºçæï¼ï¼ä½ä½ è¦åçåªæ¯ä¸ä¼ æ件ââå ¶ä½äº¤ç» Coderblockã 2426 2427## æä»ä¹ç¨ 2428 2429没æç¥è¯åºæ¶ï¼è天ç¨éç¨ç¥è¯åçãæäºç¥è¯åºï¼å®**è¿ä¼**使ç¨ä½ ç¹å®çä¸å¡ä¿¡æ¯æ¥åçãä¾å¦ï¼ 2430 2431- ç¨äºåç客æ·çå ¬å¸å¸¸è§é®é¢ 2432- ä½ çä»·ç®è¡¨åéè´§æ¿ç 2433- 产åæåæå é¨æå 2434 2435## å¦ä½æ·»å ææ¡£ 2436 24371. æå¼ **AI Agents** æ ç¾å¹¶ç¹å»**é ç½®** 24382. å¨è天æºè½ä½ä¸ï¼è¿å ¥**ç¥è¯åº (RAG)**é¨å 24393. ç¹å»**ä¸ä¼ æ件**ï¼æ**ææ¬**以ç²è´´æåï¼ 24404. ææ¡£ä¼è¢«å¤çï¼å¹¶ç«å³å¯ä¾ AI ä½¿ç¨ 2441 2442æ件ä¼è¢«ååæå°å并建ç«ç´¢å¼ï¼è¿æ · AI æ»è½æ¾å°ä¸ç¨æ·é®é¢æç¸å ³çé¨åã 2443 2444## æ¯æçæ ¼å¼ 2445 2446| æ ¼å¼ | æ¯å¦æ¯æ | 2447|---|---| 2448| ææ¬ (.txt) | æ¯ | 2449| Markdown (.md) | æ¯ | 2450| CSV (.csv) | æ¯ | 2451| JSON (.json) | æ¯ | 2452| PDF / Word | æä¸æ¯æââ请ç²è´´ææ¬ | 2453 2454> [!TIP] å¯¹äº PDFï¼ç®å请ç¨**ææ¬**æé®å¤å¶ç²è´´å 容ãæ¸ æ°ãåå¾å¥½çææ¡£è½å¸¦æ¥æ´å¥½çåçã 2455 2456## AI å¦ä½ä½¿ç¨ä½ çææ¡£ 2457 2458å½ç¨æ·å¨è天ä¸æé®æ¶ï¼AI ä¼ï¼ 2459 24601. å¨ä½ çææ¡£ä¸æç´¢æç¸å ³ç段è½ï¼ 24612. å°å ¶ä½ä¸ºä¸ä¸ææ¥æ°ååçï¼ 24623. å¦æå ¶ä¸æ²¡æç¸å ³ä¿¡æ¯ï¼å°±ä¼è¯´æ并ç¨éç¨ç¥è¯åçã 2463 2464è¿ä¸åé½å¨**æå¡å¨ç«¯**å®å ¨å°è¿è¡ï¼æ¯æ¡æ¶æ¯é½æ¯å¦æ¤ã 2465 2466## 管çææ¡£ 2467 2468å¨åä¸é¨åä½ å¯ä»¥çå°å·²ä¸ä¼ ææ¡£çå表ï¼ä»¥å已索å¼âåâçæ°éãè¦å é¤æ个ææ¡£ï¼ç¹å»**åå¾æ¡¶**å¾æ ï¼AI ä¼ç«å³åæ¢ä½¿ç¨å®ã 2469 2470## éç§ 2471 2472ææ¡£ä¿åå¨**ä½ **åºç¨çæ°æ®åºä¸ï¼ä» ç±ä½ ç AI è天使ç¨ãæ¯ä¸ªæºè½ä½é½æåèªç¬ç«çç¥è¯åºã 2473 2474> [!INFO] ç¥è¯åºéç¨äº**è天**æºè½ä½ãå¾ççæä¸ä½¿ç¨ææ¡£ã 2475`},"team-office":{es:`# Oficina 3D y agentes IA 2476 2477\`\`\`anim 2478agents-team 2479\`\`\` 2480 2481Más allá de la IA que escribe código, Coderblock te da un **equipo de agentes de IA especializados** que colaboran en tu proyecto como lo harÃa un equipo real. Puedes conocerlos en una **oficina 3D** interactiva y configurarlos uno a uno. 2482 2483## El equipo de especialistas 2484 2485Cada proyecto puede tener un equipo con distintos roles, cada uno experto en su campo: 2486 2487| Rol | Se ocupa de | 2488|---|---| 2489| **UX Design** | Experiencia de usuario, interfaces, usabilidad | 2490| **Frontend** | La parte visible de la app | 2491| **Backend** | Lógica del servidor y manejo de datos | 2492| **Arquitectura** | Estructura técnica y decisiones clave | 2493| **Ciberseguridad** | Seguridad y vulnerabilidades | 2494| **Marketing** | Análisis de mercado, contenidos, SEO | 2495| **GTM** | Estrategia de salida al mercado | 2496| **Ventas** | Precios, conversiones, venta | 2497 2498## La oficina 3D 2499 2500La **oficina 3D** es un espacio interactivo donde ves a los miembros del equipo como personajes en un entorno tridimensional. Puedes acercarte a un agente para hablar con él, verlos "pensar" y colaborar entre sÃ. Es una forma inmediata y visual de gestionar tu equipo de IA. 2501 2502## Configurar un agente 2503 2504Cada agente es **personalizable**. Para cada uno puedes definir: 2505 2506- **Modelo de IA**: qué modelo usa para razonar
2507- **Personalidad** y **tono**: cómo se comunica 2508- **Instrucciones personalizadas**: pautas especÃficas de tu proyecto 2509- **Creatividad**: respuestas más predecibles o más creativas 2510- **Activo / inactivo**: enciende solo los especialistas que necesitas 2511 2512## Cómo colaboran 2513 2514Los agentes pueden: 2515 2516- **Analizar** tu proyecto y proponer mejoras 2517- Generar **propuestas** (sugerencias, preguntas, peticiones de colaboración, revisiones) 2518- Iniciar **debates de equipo** sobre un tema 2519 2520Cuando un agente propone una acción, la ves como una **tarjeta**: puedes **aceptarla** (la propuesta pasa al Chat IA, que la ejecuta) o ignorarla. 2521 2522> [!TIP] Usa el equipo para obtener perspectivas diversas: pide a Marketing un análisis de la competencia, a Ciberseguridad una revisión de seguridad, a UX una mejora de la interfaz. 2523 2524## Créditos 2525 2526Las conversaciones y análisis del equipo también consumen créditos, según el modelo configurado para cada agente. Ver [Créditos](/docs/credits). 2527`,fr:`# Bureau 3D & agents IA 2528 2529\`\`\`anim 2530agents-team 2531\`\`\` 2532 2533Au-delà de l'IA qui écrit du code, Coderblock te donne une **équipe d'agents IA spécialisés** qui collaborent sur ton projet comme le ferait une vraie équipe. Tu peux les rencontrer dans un **bureau 3D** interactif et les configurer un par un. 2534 2535## L'équipe de spécialistes 2536 2537Chaque projet peut avoir une équipe avec différents rôles, chacun expert dans son domaine : 2538 2539| Rôle | Se concentre sur | 2540|---|---| 2541| **UX Design** | Expérience utilisateur, interfaces, ergonomie | 2542| **Frontend** | La partie visible de l'app | 2543| **Backend** | Logique serveur et gestion des données | 2544| **Architecture** | Structure technique et décisions clés | 2545| **Cybersécurité** | Sécurité et vulnérabilités | 2546| **Marketing** | Analyse de marché, contenus, SEO | 2547| **GTM** | Stratégie de mise sur le marché | 2548| **Ventes** | Tarification, conversions, vente | 2549 2550## Le bureau 3D 2551 2552Le **bureau 3D** est un espace interactif où tu vois les membres de l'équipe comme des personnages dans un environnement en trois dimensions. Tu peux t'approcher d'un agent pour lui parler, les voir « réfléchir » et collaborer entre eux. C'est une façon immédiate et visuelle de gérer ton équipe d'IA. 2553 2554## Configurer un agent 2555 2556Chaque agent est **personnalisable**. Pour chacun tu peux définir : 2557 2558- **Modèle d'IA** : quel modèle il utilise pour raisonner 2559- **Personnalité** et **ton** : comment il communique 2560- **Instructions personnalisées** : consignes spécifiques à ton projet 2561- **Créativité** : des réponses plus prévisibles ou plus créatives 2562- **Actif / inactif** : n'active que les spécialistes dont tu as besoin 2563 2564## Comment ils collaborent 2565 2566Les agents peuvent : 2567 2568- **Analyser** ton projet et proposer des améliorations 2569- Générer des **propositions** (suggestions, questions, demandes de collaboration, revues) 2570- Lancer des **discussions d'équipe** sur un sujet 2571 2572Quand un agent propose une action, tu la vois sous forme de **carte** : tu peux **l'accepter** (la proposition est transmise au Chat IA, qui l'exécute) ou l'ignorer. 2573 2574> [!TIP] Utilise l'équipe pour des perspectives variées : demande à Marketing une analyse de la concurrence, à Cybersécurité une vérification de sécurité, à UX une amélioration d'interface. 2575 2576## Crédits 2577
2578Les conversations et analyses de l'équipe consomment aussi des crédits, selon le modèle configuré pour chaque agent. Voir [Crédits](/docs/credits). 2579`,de:`# 3D-Büro & KI-Agenten 2580 2581\`\`\`anim 2582agents-team 2583\`\`\` 2584 2585Ãber die KI hinaus, die Code schreibt, gibt dir Coderblock ein **Team spezialisierter KI-Agenten**, die an deinem Projekt zusammenarbeiten wie ein echtes Team. Du kannst sie in einem interaktiven **3D-Büro** treffen und einzeln konfigurieren. 2586 2587## Das Team der Spezialisten 2588 2589Jedes Projekt kann ein Team mit verschiedenen Rollen haben, jede Experte in ihrem Feld: 2590 2591| Rolle | Kümmert sich um | 2592|---|---| 2593| **UX Design** | Nutzererlebnis, Interfaces, Usability | 2594| **Frontend** | Den sichtbaren Teil der App | 2595| **Backend** | Server-Logik und Datenverarbeitung | 2596| **Architektur** | Technische Struktur und Schlüsselentscheidungen | 2597| **Cybersicherheit** | Sicherheit und Schwachstellen | 2598| **Marketing** | Marktanalyse, Inhalte, SEO | 2599| **GTM** | Go-to-Market-Strategie | 2600| **Vertrieb** | Preise, Conversions, Verkauf | 2601 2602## Das 3D-Büro 2603 2604Das **3D-Büro** ist ein interaktiver Raum, in dem du die Teammitglieder als Figuren in einer dreidimensionalen Umgebung siehst. Du kannst auf einen Agenten zugehen, um mit ihm zu sprechen, ihnen beim âDenken" und Zusammenarbeiten zusehen. Eine unmittelbare, visuelle Art, dein KI-Team zu steuern. 2605 2606## Einen Agenten konfigurieren 2607 2608Jeder Agent ist **anpassbar**. Für jeden kannst du festlegen: 2609 2610- **KI-Modell**: welches Modell er zum Denken nutzt 2611- **Persönlichkeit** und **Ton**: wie er kommuniziert 2612- **Eigene Anweisungen**: spezifische Vorgaben für dein Projekt 2613- **Kreativität**: vorhersehbarere oder kreativere Antworten 2614- **Aktiv / inaktiv**: aktiviere nur die Spezialisten, die du brauchst 2615 2616## Wie sie zusammenarbeiten 2617 2618Agenten können: 2619 2620- dein Projekt **analysieren** und Verbesserungen vorschlagen 2621- **Vorschläge** erzeugen (Anregungen, Fragen, Kooperationsanfragen, Reviews) 2622- **Team-Diskussionen** zu einem Thema starten 2623 2624Wenn ein Agent eine Aktion vorschlägt, siehst du sie als **Karte**: du kannst sie **annehmen** (der Vorschlag geht an den KI-Chat, der ihn ausführt) oder ignorieren. 2625 2626> [!TIP] Nutze das Team für vielfältige Perspektiven: bitte Marketing um eine Wettbewerbsanalyse, Cybersicherheit um einen Sicherheitscheck, UX um eine Interface-Verbesserung. 2627 2628## Credits 2629 2630Team-Gespräche und -Analysen verbrauchen ebenfalls Credits, je nach dem für jeden Agenten konfigurierten Modell. Siehe [Credits](/docs/credits). 2631`,zh:`# 3D åå ¬å®¤ä¸ AI æºè½ä½ 2632 2633\`\`\`anim 2634agents-team 2635\`\`\` 2636 2637é¤äºå代ç ç AIï¼Coderblock è¿ä¸ºä½ æä¾ä¸æ¯**ä¸ä¸ AI æºè½ä½å¢é**ï¼å®ä»¬åçæ£çå¢éä¸æ ·åä½æ¨è¿ä½ ç项ç®ãä½ å¯ä»¥å¨ä¸ä¸ªäº¤äºå¼ **3D åå ¬å®¤**éä¸å®ä»¬è§é¢ï¼å¹¶é个é ç½®ã 2638 2639## ä¸å®¶å¢é 2640 2641æ¯ä¸ªé¡¹ç®é½å¯ä»¥æ¥æä¸æ¯å ·å¤ä¸åè§è²çå¢éï¼åèªæ¯æå¨é¢åçä¸å®¶ï¼ 2642 2643| è§è² | å ³æ³¨ | 2644|---|---| 2645| **UX Design** | ç¨æ·ä½éªãçé¢ãå¯ç¨æ§ | 2646| **Frontend** | åºç¨çå¯è§é¨å | 2647| **Backend** | æå¡å¨é»è¾ä¸æ°æ®å¤ç | 2648| **æ¶æ** | ææ¯ç»æä¸å ³é®å³ç | 2649| **ç½ç»å®å ¨** | å®å ¨ä¸æ¼æ´ | 2650| **å¸åºè¥é** | å¸åºåæãå 容ãSEO | 2651| **GTM** | è¿å ¥å¸åºçç¥ | 2652| **éå®** | å®ä»·ã转åãéå® | 2653 2654## 3D åå ¬å®¤ 2655 2656**3D åå ¬å®¤**æ¯ä¸ä¸ªäº¤äºç©ºé´ï¼ä½ ä¼çå°å¢éæåå身为ä¸ç»´ç¯å¢ä¸çè§è²ãä½ å¯ä»¥èµ°è¿æ个æºè½ä½ä¸å®äº¤è°ï¼çå®ä»¬âæèâ并彼æ¤åä½ãè¿æ¯ä¸ç§ç´è§ãå¯è§åçæ¹å¼æ¥ç®¡çä½ ç AI å¢éã 2657 2658## é ç½®æºè½ä½ 2659 2660æ¯ä¸ªæºè½ä½é½**å¯å®å¶**ã对æ¯ä¸ªä½ é½å¯ä»¥è®¾ç½®ï¼ 2661 2662- **AI 模å**ï¼å®ç¨äºæ¨çç模å 2663- **æ§æ ¼**ä¸**è¯æ°**ï¼å®å¦ä½æ²é 2664- **èªå®ä¹æ令**ï¼éå¯¹ä½ é¡¹ç®çå ·ä½åå 2665- **åé å**ï¼æ´å¯é¢æµææ´æåæçåç 2666- **æ¿æ´» / åç¨**ï¼åªå¼å¯ä½ éè¦çä¸å®¶ 2667 2668## å®ä»¬å¦ä½åä½ 2669 2670æºè½ä½å¯ä»¥ï¼ 2671 2672- **åæ**ä½ ç项ç®å¹¶æåºæ¹è¿ 2673- çæ**ææ¡**ï¼å»ºè®®ãé®é¢ãåä½è¯·æ±ãè¯å®¡ï¼ 2674- å°±æ个主é¢åèµ·**å¢é讨论** 2675 2676å½æ个æºè½ä½æåºä¸ä¸ªè¡å¨æ¶ï¼ä½ ä¼çå°ä¸å¼ **å¡ç**ï¼ä½ å¯ä»¥**æ¥å**ï¼ææ¡ä¼äº¤ç» AI è天æ¥æ§è¡ï¼æ忽ç¥ã 2677 2678>
2678 [!TIP] ç¨å¢éè·åå¤å è§è§ï¼è®©å¸åºè¥éåç«ååæï¼è®©ç½ç»å®å ¨åå®å ¨æ£æ¥ï¼è®© UX åçé¢ä¼åã 2679 2680## 积å 2681 2682å¢éç对è¯ä¸åæä¹ä¼æ¶è积åï¼åå³äºä¸ºæ¯ä¸ªæºè½ä½é ç½®ç模åãåè§[积å](/docs/credits)ã 2683`},"product-templates":{es:`# Plantillas de producto 2684 2685\`\`\`anim 2686templates 2687\`\`\` 2688 2689Las plantillas de producto son **aplicaciones fullstack completas** listas para usar. Se copian a tu proyecto mediante copia S3 a S3 en solo **1-2 segundos**, incluyendo frontend React, backend FastAPI y esquema de base de datos donde sea necesario. 2690 2691## Plantillas disponibles (32) 2692 2693### Negocio y productividad 2694 2695| Plantilla | Descripción | 2696|----------|-------------| 2697| Business Dashboard | Panel analÃtico con gráficos, métricas y KPIs | 2698| Todo App | Gestor de tareas con proyectos, categorÃas y prioridades | 2699| Social Media Scheduler | Planificación y gestión de publicaciones en redes | 2700| Project Management | Gestión de proyectos con tablero kanban y timeline | 2701| CRM | Gestión de relaciones con clientes y embudo de ventas | 2702 2703### E-commerce y marketplace 2704 2705| Plantilla | Descripción | 2706|----------|-------------| 2707| Online Store | E-commerce completo con catálogo, carrito y pago con Stripe | 2708| Marketplace | Plataforma multivendedor con gestión de tiendas | 2709| Digital Products | Venta de productos digitales (cursos, ebooks, plantillas) | 2710 2711### Servicios y reservas 2712 2713| Plantilla | Descripción | 2714|----------|-------------| 2715| Booking Platform | Plataforma de reservas con calendario y pagos | 2716| Restaurant | Web de restaurante con menú, galerÃa y reserva de mesas | 2717| Wellness App | App de bienestar con seguimiento de actividad y programas | 2718 2719### Contenido y medios 2720 2721| Plantilla | Descripción | 2722|----------|-------------| 2723| Content Platform | Blog / CMS con editor, categorÃas y SEO | 2724| Portfolio | Portfolio personal/de agencia con galerÃa y casos | 2725| Entertainment | Plataforma de contenidos de streaming/medios | 2726 2727### Juegos 2728 2729| Plantilla | Descripción | 2730|----------|-------------| 2731| Phaser Game | Juego 2D de navegador con Phaser.js | 2732| 3D Product Configurator | Configurador de producto 3D con Three.js | 2733 2734Y muchas más: **32 plantillas** en total, incluyendo apps para inmobiliaria, salud, educación, fintech, eventos y más. 2735 2736## Cómo usar una plantilla 2737 27381. Crea un nuevo proyecto desde el [panel](/apps) 27392. Selecciona **"Usar plantilla"** y elige en la cuadrÃcula 27403. El proyecto se inicializa al instante (~1-2 segundos) 27414. La vista previa arranca automáticamente
27425. **Personaliza** todo desde el chat de IA: colores, diseño, contenido, funciones 2743 2744## Qué incluye cada plantilla 2745 2746Cada plantilla de producto incluye: 2747- **Frontend completo**: páginas, componentes, enrutado, estilos Tailwind 2748- **API backend**: endpoints FastAPI con modelos y validación 2749- **Esquema de base de datos**: tablas, relaciones, datos de ejemplo 2750- **Autenticación**: login social (Google + GitHub) preconfigurado 2751- **Diseño responsive**: optimizado para escritorio, tablet y móvil 2752 2753> [!TIP] Las plantillas son un punto de partida. Puedes modificar cualquier aspecto desde el chat de IA: añadir páginas, cambiar el diseño, integrar servicios externos. 2754`,fr:`# Templates produit 2755 2756\`\`\`anim 2757templates 2758\`\`\` 2759 2760Les templates produit sont des **applications fullstack complètes** prêtes à l'emploi. Ils sont copiés dans ton projet par copie S3 à S3 en seulement **1-2 secondes**, avec le frontend React, le backend FastAPI et le schéma de base de données si nécessaire. 2761 2762## Templates disponibles (32) 2763 2764### Business et productivité 2765 2766| Template | Description | 2767|----------|-------------| 2768| Business Dashboard | Tableau de bord analytique avec graphiques, métriques et KPI | 2769| Todo App | Gestionnaire de tâches avec projets, catégories et priorités | 2770| Social Media Scheduler | Planification et gestion des publications sur les réseaux | 2771| Project Management | Gestion de projet avec tableau kanban et timeline | 2772| CRM | Gestion de la relation client avec pipeline de vente | 2773 2774### E-commerce et marketplace 2775 2776| Template | Description | 2777|----------|-------------| 2778| Online Store | E-commerce complet avec catalogue, panier, paiement Stripe | 2779| Marketplace | Plateforme multi-vendeurs avec gestion des boutiques | 2780| Digital Products | Vente de produits numériques (cours, ebooks, templates) | 2781 2782### Services et réservations 2783 2784| Template | Description | 2785|----------|-------------| 2786| Booking Platform | Plateforme de réservation avec calendrier et paiements | 2787| Restaurant | Site de restaurant avec menu, galerie et réservation de tables | 2788| Wellness App | App bien-être avec suivi d'activité et programmes | 2789 2790### Contenu et médias 2791 2792| Template | Description | 2793|----------|-------------| 2794| Content Platform | Blog / CMS avec éditeur, catégories et SEO | 2795| Portfolio | Portfolio personnel/d'agence avec galerie et études de cas | 2796| Entertainment | Plateforme de contenus streaming/médias | 2797 2798### Jeux 2799 2800| Template | Description | 2801|----------|-------------| 2802| Phaser Game | Jeu 2D navigateur avec Phaser.js | 2803| 3D Product Configurator | Configurateur de produit 3D avec Three.js | 2804 2805Et bien plus : **32 templates** au total, dont des apps pour l'immobilier, la santé, l'éducation, la fintech, l'événementiel, etc. 2806 2807## Comment utiliser un template 2808 28091. Crée un nouveau projet depuis le [tableau de bord](/apps) 28102. Sélectionne **« Utiliser un template »** et choisis dans la grille 28113. Le projet est initialisé instantanément (~1-2 secondes) 28124. L'aperçu démarre automatiquement 28135. **Personnalise** tout via le chat IA : couleurs, mise en page, contenu, fonctions 2814 2815## Ce que chaque template inclut 2816 2817Chaque template produit inclut : 2818- **Frontend complet** : pages, composants, routage, styles Tailwind 2819- **API backend** : endpoints FastAPI avec modèles et validation 2820- **Schéma de base de données** : tables, relations, données d'exemple 2821- **Authentification** : login social (Google + GitHub) préconfiguré 2822- **Design responsive** : optimisé pour desktop, tablette et mobile 2823 2824> [!TIP] Les templates sont un point de départ. Tu peux modifier n'importe quel aspect via le chat IA : ajouter des pages, changer le design, intégrer des services externes. 2825`,de:`# Produktvorlagen 2826 2827\`\`\`anim 2828templates 2829\`\`\` 2830 2831Produktvorlagen sind **komplette Fullstack-Anwendungen**, einsatzbereit. Sie werden per S3-zu-S3-Kopie in nur **1-2 Sekunden** in dein Projekt kopiert â inklusive React-Frontend, FastAPI-Backend und Datenbankschema, wo nötig. 2832 2833## Verfügbare Vorlagen (32) 2834 2835### Business & Produktivität 2836 2837| Vorlage | Beschreibung | 2838|----------|-------------| 2839| Business Dashboard | Analyse-Dashboard mit Diagrammen, Kennzahlen und KPIs | 2840| Todo App | Aufgabenmanager mit Projekten, Kategorien und Prioritäten | 2841| Social Media Scheduler | Planung und Verwaltung von Social-Media-Beiträgen | 2842| Project Management | Projektmanagement mit Kanban-Board und Timeline | 2843| CRM | Kundenbeziehungsmanagement mit Sales-Pipeline | 2844 2845### E-Commerce & Marktplatz 2846 2847| Vorlage | Beschreibung | 2848|----------|-------------| 2849| Online Store | Komplettes E-Commerce mit Katalog, Warenkorb, Str
2849ipe-Checkout | 2850| Marketplace | Multi-Vendor-Plattform mit Shop-Verwaltung | 2851| Digital Products | Verkauf digitaler Produkte (Kurse, E-Books, Vorlagen) | 2852 2853### Dienstleistungen & Buchungen 2854 2855| Vorlage | Beschreibung | 2856|----------|-------------| 2857| Booking Platform | Buchungsplattform mit Kalender und Zahlungen | 2858| Restaurant | Restaurant-Website mit Menü, Galerie und Tischreservierung | 2859| Wellness App | Wellness-App mit Aktivitäts-Tracking und Programmen | 2860 2861### Inhalte & Medien 2862 2863| Vorlage | Beschreibung | 2864|----------|-------------| 2865| Content Platform | Blog / CMS mit Editor, Kategorien und SEO | 2866| Portfolio | Persönliches/Agentur-Portfolio mit Galerie und Fallstudien | 2867| Entertainment | Streaming-/Medien-Content-Plattform | 2868 2869### Gaming 2870 2871| Vorlage | Beschreibung | 2872|----------|-------------| 2873| Phaser Game | 2D-Browserspiel mit Phaser.js | 2874| 3D Product Configurator | 3D-Produktkonfigurator mit Three.js | 2875 2876Und viele mehr: insgesamt **32 Vorlagen**, darunter Apps für Immobilien, Gesundheit, Bildung, Fintech, Events und mehr. 2877 2878## Eine Vorlage verwenden 2879 28801. Erstelle ein neues Projekt im [Dashboard](/apps) 28812. Wähle **âVorlage verwenden"** und wähle aus dem Raster 28823. Das Projekt wird sofort initialisiert (~1-2 Sekunden) 28834. Die Vorschau startet automatisch 28845. **Passe** alles über den KI-Chat an: Farben, Layout, Inhalte, Funktionen 2885 2886## Was jede Vorlage enthält 2887 2888Jede Produktvorlage enthält: 2889- **Komplettes Frontend**: Seiten, Komponenten, Routing, Tailwind-Styles 2890- **Backend-API**: FastAPI-Endpoints mit Modellen und Validierung 2891- **Datenbankschema**: Tabellen, Beziehungen, Beispieldaten 2892- **Authentifizierung**: Social Login (Google + GitHub) vorkonfiguriert 2893- **Responsives Design**: optimiert für Desktop, Tablet und Mobil 2894 2895> [!TIP] Vorlagen sind ein Ausgangspunkt. Du kannst jeden Aspekt über den KI-Chat ändern: Seiten hinzufügen, das Design ändern, externe Dienste einbinden. 2896`,zh:`# 产åæ¨¡æ¿ 2897 2898\`\`\`anim 2899templates 2900\`\`\` 2901 2902产å模æ¿æ¯**å®æ´çå ¨æ åºç¨**ï¼å¼ç®±å³ç¨ãå®ä»¬éè¿ S3 å° S3 å¤å¶å¨**ä» 1-2 ç§**å 被å¤å¶å°ä½ ç项ç®ä¸ï¼å å« React å端ãFastAPI å端ï¼ä»¥åå¿ è¦æ¶çæ°æ®åºç»æã 2903 2904## å¯ç¨æ¨¡æ¿ï¼32 ä¸ªï¼ 2905 2906### åä¸ä¸ç产å 2907 2908| æ¨¡æ¿ | æè¿° | 2909|----------|-------------| 2910| Business Dashboard | 带å¾è¡¨ãææ å KPI çåæçæ¿ | 2911| Todo App | 带项ç®ãåç±»åä¼å 级çä»»å¡ç®¡çå¨ | 2912| Social Media Scheduler | 社交åªä½åå¸çè§åä¸ç®¡ç | 2913| Project Management | 带çæ¿ä¸æ¶é´çº¿ç项ç®ç®¡ç | 2914| CRM | 带éå®æ¼æç客æ·å ³ç³»ç®¡ç | 2915 2916### çµåä¸å¸åºå¹³å° 2917 2918| æ¨¡æ¿ | æè¿° | 2919|----------|-------------| 2920| Online Store | å®æ´çµåï¼ç®å½ãè´ç©è½¦ãStripe ç»è´¦ | 2921| Marketplace | 带åºéºç®¡ççå¤åå®¶å¹³å° | 2922| Digital Products | æ°å产åéå®ï¼è¯¾ç¨ãçµå书ã模æ¿ï¼ | 2923 2924### æå¡ä¸é¢è®¢ 2925 2926| æ¨¡æ¿ | æè¿° | 2927|----------|-------------| 2928| Booking Platform | 带æ¥åä¸æ¯ä»çé¢è®¢å¹³å° | 2929| Restaurant | 带èåãç¸ååé¤æ¡é¢è®¢çé¤å ç½ç« | 2930| Wellness App | 带活å¨è¿½è¸ªä¸è®¡åçå¥åº·åºç¨ | 2931 2932### å 容ä¸åªä½ 2933 2934| æ¨¡æ¿ | æè¿° | 2935|----------|-------------| 2936| Content Platform | 带ç¼è¾å¨ãåç±»å SEO çå客 / CMS | 2937| Portfolio | 带ä½åéä¸æ¡ä¾ç个人/æºæä½åé | 2938| Entertainment | æµåªä½/åªä½å å®¹å¹³å° | 2939 2940### 游æ 2941 2942| æ¨¡æ¿ | æè¿° | 2943|----------|-------------| 2944| Phaser Game | ä½¿ç¨ Phaser.js ç 2D æµè§å¨æ¸¸æ | 2945| 3D Product Configurator | ä½¿ç¨ Three.js ç 3D 产åé ç½®å¨ | 2946 2947è¿ææ´å¤ï¼å ± **32 个模æ¿**ï¼æ¶µçæ¿å°äº§ãå»çãæè²ãéèç§æãæ´»å¨çåºç¨ã 2948 2949## å¦ä½ä½¿ç¨æ¨¡æ¿ 2950 29511. å¨[仪表ç](/apps)ä¸å建æ°é¡¹ç® 29522. éæ©**â使ç¨æ¨¡æ¿â**并ä»ç½æ ¼ä¸æé 29533. 项ç®ä¼å³æ¶åå§åï¼çº¦ 1-2 ç§ï¼ 29544. é¢è§èªå¨å¯å¨ 29555. éè¿ AI è天**å®å¶**ä¸åï¼é¢è²ãå¸å±ãå 容ãåè½ 2956 2957## æ¯ä¸ªæ¨¡æ¿å å«ä»ä¹ 2958 2959æ¯ä¸ªäº§å模æ¿é½å å«ï¼ 2960- **å®æ´å端**ï¼é¡µé¢ãç»ä»¶ãè·¯ç±ãTailwind æ ·å¼ 2961- **å端 API**ï¼å¸¦æ¨¡åä¸æ ¡éªç FastAPI ç«¯ç¹ 2962- **æ°æ®åºç»æ**ï¼è¡¨ãå ³ç³»ã示ä¾æ°æ® 2963- **认è¯**ï¼é¢é ç½®ç社交ç»å½ï¼Google + GitHubï¼ 2964- **ååºå¼è®¾è®¡**ï¼ä¸ºæ¡é¢ãå¹³æ¿åææºä¼å 2965 2966> [!TIP] 模æ¿æ¯ä¸ä¸ªèµ·ç¹ãä½ å¯ä»¥éè¿ AI è天修æ¹ä»»ä½æ¹é¢ï¼æ·»å 页é¢ãæ´æ¹è®¾è®¡ãéæå¤é¨æå¡ã 2967`},"feature-templates":{es:`# Plantillas de función 2968 2969\`\`\`anim 2970templates 2971\`\`\` 2972 2973Las plantillas de función son **módulos reutilizables** que puedes añadir a cualquier proyecto. 2974
2975## Funciones disponibles 2976 2977- **Auth**: Autenticación con email/contraseña y login social 2978- **Admin Panel**: Panel de administración completo 2979- **Payments**: Integración de pagos con Stripe 2980- **Chat**: Chat en tiempo real 2981- **Notifications**: Sistema de notificaciones push e in-app 2982- **Search**: Búsqueda de texto completo con filtros 2983- **Dashboard**: Panel con widgets y gráficos 2984- **Cart**: Carrito de e-commerce 2985 2986Y más de **20 funciones adicionales**. 2987 2988> [!TIP] Puedes combinar varias plantillas de función en el mismo proyecto. Pide a la IA que las integre. 2989`,fr:`# Templates de fonctionnalité 2990 2991\`\`\`anim 2992templates 2993\`\`\` 2994 2995Les templates de fonctionnalité sont des **modules réutilisables** que tu peux ajouter à n'importe quel projet. 2996 2997## Fonctionnalités disponibles 2998 2999- **Auth** : Authentification par e-mail/mot de passe et login social 3000- **Admin Panel** : Panneau d'administration complet 3001- **Payments** : Intégration des paiements avec Stripe 3002- **Chat** : Chat en temps réel 3003- **Notifications** : Système de notifications push et in-app 3004- **Search** : Recherche plein texte avec filtres 3005- **Dashboard** : Tableau de bord avec widgets et graphiques 3006- **Cart** : Panier e-commerce 3007 3008Et plus de **20 fonctionnalités supplémentaires**. 3009 3010> [!TIP] Tu peux combiner plusieurs templates de fonctionnalité dans le même projet. Demande à l'IA de les intégrer. 3011`,de:`# Funktionsvorlagen 3012 3013\`\`\`anim 3014templates 3015\`\`\` 3016 3017Funktionsvorlagen sind **wiederverwendbare Module**, die du jedem Projekt hinzufügen kannst. 3018 3019## Verfügbare Funktionen 3020 3021- **Auth**: Authentifizierung mit E-Mail/Passwort und Social Login 3022- **Admin Panel**: Vollständiges Admin-Panel 3023- **Payments**: Zahlungsintegration mit Stripe 3024- **Chat**: Echtzeit-Chat 3025- **Notifications**: Push- und In-App-Benachrichtigungssystem 3026- **Search**: Volltextsuche mit Filtern 3027- **Dashboard**: Dashboard mit Widgets und Diagrammen 3028- **Cart**: E-Commerce-Warenkorb 3029 3030Und über **20 weitere Funktionen**. 3031 3032> [!TIP] Du kannst mehrere Funktionsvorlagen im selben Projekt kombinieren. Bitte die KI, sie zu integrieren. 3033`,zh:`# åè½æ¨¡æ¿ 3034 3035\`\`\`anim 3036templates 3037\`\`\` 3038 3039åè½æ¨¡æ¿æ¯å¯ä»¥æ·»å å°ä»»ä½é¡¹ç®ç**å¯å¤ç¨æ¨¡å**ã 3040 3041## å¯ç¨åè½ 3042 3043- **Auth**ï¼é®ç®±/å¯ç ä¸ç¤¾äº¤ç»å½è®¤è¯ 3044- **Admin Panel**ï¼å®æ´çåå°ç®¡çé¢æ¿ 3045- **Payments**ï¼Stripe æ¯ä»éæ 3046- **Chat**ï¼å®æ¶è天 3047- **Notifications**ï¼æ¨éä¸åºç¨å éç¥ç³»ç» 3048- **Search**ï¼å¸¦çéçå ¨ææç´¢ 3049- **Dashboard**ï¼å¸¦å°ç»ä»¶ä¸å¾è¡¨ççæ¿ 3050- **Cart**ï¼çµåè´ç©è½¦ 3051 3052以å **20 å¤ä¸ªé¢å¤åè½**ã 3053 3054> [!TIP] ä½ å¯ä»¥å¨åä¸ä¸ªé¡¹ç®ä¸ç»åå¤ä¸ªåè½æ¨¡æ¿ã让 AI å¸®ä½ éæå®ä»¬ã 3055`},preview:{es:`# Vista previa 3056 3057\`\`\`anim 3058hot-reload 3059\`\`\` 3060 3061Cada proyecto Coderblock tiene una vista previa en vivo y en tiempo real en un dominio \`*.coderblock.dev\`. No es una vista previa simulada: es un entorno de desarrollo real que ejecuta tu app en una máquina virtual dedicada. 3062 3063## Cómo funciona 3064 3065La vista previa está integrada directamente en el editor, en el panel a la derecha del chat: 3066 30671. La IA escribe los archivos del proyecto en **AWS S3** 30682. Se dispara una **sincronización dirigida** hacia la VM de vista previa (solo los archivos cambiados) 30693. **Vite HMR** (Hot Module Replacement) detecta los cambios y actualiza el navegador 30704. El **iframe** de la vista previa se refresca solo 3071 3072### Detalles técnicos 3073 3074- Cada proyecto tiene una **VM de Fly.io dedicada** con Node.js, Vite y todas las dependencias preinstaladas 3075- Las dependencias npm comunes (Radix UI, Tailwind, React Hook Form, Three.js, Phaser, etc.) están preinstaladas en la imagen base, y \`npm install\` verifica en ~5 segundos en lugar de ~60-120s 3076- Formato de URL: \`https://{id}.coderblock.dev\` 3077- La VM ejecuta un servidor de desarrollo Vite real con soporte HMR completo 3078 3079## Tiempos 3080 3081| Acción | Tiempo | 3082|--------|------| 3083| Primer arranque (cold start) | 60-90s | 3084| Despertar de suspensión | 5-10s | 3085| Recarga de página | 2-5s | 3086| Cambios de la IA (hot-reload) | ~7-13s | 3087| Añadir dependencia npm | 5-15s | 3088 3089## Navegación en la vista previa 3090 3091El panel de vista previa incluye: 3092- **Barra de direcciones** con la URL de la página actual 3093- **Botones atrás/adelante** para navegar el historial 3094- **Botón de recarga** para forzar una recarga completa 3095- **Botón "Abrir en nueva ventana"** para ver la app a pantalla completa 3096 3097La navegación es SPA (Single Page Application): las transiciones de página ocurren sin parpadeo blanco. 3098 3099## Pausa automática 3100 3101La vista previa se pausa automáticamente tras un perÃodo de inactividad para ahorrar recursos. En el siguiente acceso, la VM se despierta en 5-10 segundos. 3102 3103> [!TIP] Si la vista previa muestra errores de compilación, la IA los detecta automáticamente e intenta corregirlos con un bucle de auto-fix. 3104`,fr:`# Aperçu 3105 3106\`\`\`anim 3107hot-reload 3108\`\`\` 3109
3110Chaque projet Coderblock a un aperçu en direct et en temps réel sur un domaine \`*.coderblock.dev\`. Ce n'est pas un aperçu simulé : c'est un vrai environnement de développement qui exécute ton app sur une machine virtuelle dédiée. 3111 3112## Comment ça marche 3113 3114L'aperçu est intégré directement dans l'éditeur, dans le panneau à droite du chat : 3115 31161. L'IA écrit les fichiers du projet sur **AWS S3** 31172. Une **synchronisation ciblée** est déclenchée vers la VM d'aperçu (seulement les fichiers modifiés) 31183. **Vite HMR** (Hot Module Replacement) détecte les changements et met à jour le navigateur 31194. L'**iframe** de l'aperçu se rafraîchit tout seul 3120 3121### Détails techniques 3122 3123- Chaque projet a une **VM Fly.io dédiée** avec Node.js, Vite et toutes les dépendances préinstallées 3124- Les dépendances npm courantes (Radix UI, Tailwind, React Hook Form, Three.js, Phaser, etc.) sont préinstallées dans l'image de base, et \`npm install\` vérifie en ~5 secondes au lieu de ~60-120s 3125- Format d'URL : \`https://{id}.coderblock.dev\` 3126- La VM exécute un vrai serveur de dev Vite avec support HMR complet 3127 3128## Délais 3129 3130| Action | Temps | 3131|--------|------| 3132| Premier démarrage (cold start) | 60-90s | 3133| Réveil après mise en veille | 5-10s | 3134| Rafraîchissement de page | 2-5s | 3135| Changements de l'IA (hot-reload) | ~7-13s | 3136| Ajout de dépendance npm | 5-15s | 3137 3138## Navigation dans l'aperçu 3139 3140Le panneau d'aperçu inclut : 3141- **Barre d'adresse** avec l'URL de la page actuelle 3142- **Boutons précédent/suivant** pour naviguer dans l'historique 3143- **Bouton de rafraîchissement** pour forcer un rechargement complet 3144- **Bouton « Ouvrir dans une nouvelle fenêtre »** pour voir l'app en plein écran 3145 3146La navigation est SPA (Single Page Application) : les transitions de page se font sans flash blanc. 3147 3148## Pause automatique 3149 3150L'aperçu se met en pause automatiquement après une période d'inactivité pour économiser des ressources. Au prochain accès, la VM se réveille en 5-10 secondes. 3151 3152> [!TIP] Si l'aperçu affiche des erreurs de compilation, l'IA les détecte automatiquement et tente de les corriger avec une boucle d'auto-fix. 3153`,de:`# Vorschau 3154 3155\`\`\`anim 3156hot-reload 3157\`\`\` 3158 3159Jedes Coderblock-Projekt hat eine Echtzeit-Live-Vorschau auf einer \`*.coderblock.dev\`-Domain. Das ist keine simulierte Vorschau: es ist eine echte Entwicklungsumgebung, die deine App auf einer dedizierten virtuellen Maschine ausführt. 3160 3161## So funktioniert es 3162 3163Die Vorschau ist direkt im Editor integriert, im Panel rechts vom Chat: 3164 31651. Die KI schreibt die Projektdateien nach **AWS S3** 31662. Eine **gezielte Synchronisation** wird zur Vorschau-VM ausgelöst (nur geänderte Dateien) 31673. **Vite HMR** (Hot Module Replacement) erkennt Ãnderungen und aktualisiert den Browser 31684. Das Vorschau-**iframe** aktualisiert sich selbst 3169 3170### Technische Details 3171 3172- Jedes Projekt hat eine **dedizierte Fly.io-VM** mit Node.js, Vite und allen vorinstallierten Abhängigkeiten 3173- Häufige npm-Abhängigkeiten (Radix UI, Tailwind, React Hook Form, Three.js, Phaser usw.) sind im Basis-Image vorinstalliert, und \`npm install\` prüft in ~5 Sekunden statt ~60-120s 3174- URL-Format: \`https://{id}.coderblock.dev\` 3175- Die VM betreibt einen echten Vite-Dev-Server mit voller HMR-Unterstützung 3176 3177## Zeiten 3178 3179| Aktion | Zeit | 3180|--------|------| 3181| Erster Start (Cold Start) | 60-90s | 3182| Aufwachen aus dem Schlaf | 5-10s | 3183| Seiten-Neuladen | 2-5s | 3184| KI-Ãnderungen (Hot-Reload) | ~7-13s |
3185| npm-Abhängigkeit hinzufügen | 5-15s | 3186 3187## Navigation in der Vorschau 3188 3189Das Vorschau-Panel enthält: 3190- **Adressleiste** mit der aktuellen Seiten-URL 3191- **Zurück-/Vorwärts-Buttons** für die Verlaufsnavigation 3192- **Neuladen-Button**, um ein vollständiges Neuladen zu erzwingen 3193- **Button âIn neuem Fenster öffnen"**, um die App im Vollbild zu sehen 3194 3195Die Navigation ist SPA (Single Page Application): Seitenwechsel erfolgen ohne weiÃes Flackern. 3196 3197## Automatische Pause 3198 3199Die Vorschau pausiert nach einer Inaktivitätsphase automatisch, um Ressourcen zu sparen. Beim nächsten Zugriff wacht die VM in 5-10 Sekunden auf. 3200 3201> [!TIP] Zeigt die Vorschau Kompilierfehler, erkennt die KI sie automatisch und versucht, sie mit einer Auto-Fix-Schleife zu beheben. 3202`,zh:`# é¢è§ 3203 3204\`\`\`anim 3205hot-reload 3206\`\`\` 3207 3208æ¯ä¸ª Coderblock 项ç®é½å¨ \`*.coderblock.dev\` ååä¸æ¥æå®æ¶å¨çº¿é¢è§ãè¿ä¸æ¯æ¨¡æé¢è§ï¼èæ¯ä¸ä¸ªçå®çå¼åç¯å¢ï¼å¨ä¸ç¨èææºä¸è¿è¡ä½ çåºç¨ã 3209 3210## å·¥ä½åç 3211 3212é¢è§ç´æ¥éæå¨ç¼è¾å¨ä¸ï¼ä½äºè天å³ä¾§çé¢æ¿éï¼ 3213 32141. AI å°é¡¹ç®æ件åå ¥ **AWS S3** 32152. 触ååé¢è§èææºç**å®ååæ¥**ï¼ä» åæ¥å·²æ´æ¹çæä»¶ï¼ 32163. **Vite HMR**ï¼ç模åæ¿æ¢ï¼æ£æµæ´æ¹å¹¶æ´æ°æµè§å¨ 32174. é¢è§ **iframe** èªå¨å·æ° 3218 3219### ææ¯ç»è 3220 3221- æ¯ä¸ªé¡¹ç®é½æä¸å°**ä¸ç¨ç Fly.io èææº**ï¼é¢è£ äº Node.jsãVite åææä¾èµ 3222- 常è§ç npm ä¾èµï¼Radix UIãTailwindãReact Hook FormãThree.jsãPhaser çï¼å·²é¢è£ å¨åºç¡éåä¸ï¼\`npm install\` åªé约 5 ç§éªè¯ï¼èé约 60-120 ç§ 3223- URL æ ¼å¼ï¼\`https://{id}.coderblock.dev\` 3224- èææºè¿è¡çæ£ç Vite å¼åæå¡å¨ï¼å®æ´æ¯æ HMR 3225 3226## èæ¶ 3227 3228| æä½ | æ¶é´ | 3229|--------|------| 3230| é¦æ¬¡å¯å¨ï¼å·å¯å¨ï¼ | 60-90 ç§ | 3231| ä»ä¼ç å¤é | 5-10 ç§ | 3232| 页é¢å·æ° | 2-5 ç§ | 3233| AI æ´æ¹ï¼çéè½½ï¼ | 约 7-13 ç§ | 3234| æ·»å npm ä¾èµ | 5-15 ç§ | 3235 3236## é¢è§å¯¼èª 3237 3238é¢è§é¢æ¿å å«ï¼ 3239- æ¾ç¤ºå½åé¡µé¢ URL ç**å°åæ ** 3240- ç¨äºåå²å¯¼èªç**åè¿/åéæé®** 3241- ç¨äºå¼ºå¶å®æ´éè½½ç**å·æ°æé®** 3242- ç¨äºå ¨å±æ¥çåºç¨ç**âå¨æ°çªå£æå¼âæé®** 3243 3244导èªæ¯ SPAï¼å页åºç¨ï¼ï¼é¡µé¢åæ¢ä¸ä¼åºç°ç½å±éªçã 3245 3246## èªå¨æå 3247 3248为èçèµæºï¼é¢è§å¨ä¸æ®µæ¶é´æ æä½åä¼èªå¨æåãä¸æ¬¡è®¿é®æ¶ï¼èææºä¼å¨ 5-10 ç§å å¤éã 3249 3250> [!TIP] å¦æé¢è§åºç°ç¼è¯é误ï¼AI ä¼èªå¨æ£æµå¹¶å°è¯éè¿èªå¨ä¿®å¤å¾ªç¯æ¥è§£å³ã 3251`},production:{es:`# Producción 3252 3253\`\`\`anim 3254preview-vs-production 3255\`\`\` 3256 3257Publica tu app en un dominio \`*.coderblock.app\` con un clic. La app se despliega en un servidor cloud real con SSL automático, lista para recibir tráfico real. 3258 3259## Cómo funciona el despliegue 3260 32611. Haz clic en el botón **"Deploy"** en el editor 32622. El sistema crea un **contenedor Docker unificado** que incluye tanto el frontend (build estático de React servido por Caddy) como el backend (FastAPI con Uvicorn) 32633. El contenedor se despliega en **Fly.io** en una región cercana a tus usuarios 32644. El certificado **SSL** se genera automáticamente 32655. URL: \`https://{id}.coderblock.app\` 3266 3267## Tiempos de despliegue 3268 3269| Acción | Tiempo | 3270|--------|------| 3271| Despliegue completo (primera vez) | 60-90s | 3272| Hot-update del frontend | 15-30s | 3273| Hot-update del backend | 10-20s | 3274 3275## Actualizaciones posteriores 3276 3277Tras el primer despliegue, las actualizaciones son **mucho más rápidas** gracias a: 3278 3279- **Caché de dependencias**: los módulos npm y los paquetes pip se cachean 3280- **Hot-update dirigido**: solo se actualizan los archivos modificados 3281- **Capas de la imagen Docker**: las capas sin cambios se reutilizan 3282 3283## Variables de entorno en producción 3284 3285Las variables de entorno y los secretos configurados en el proyecto se inyectan automáticamente en el contenedor de producción en cada despliegue. No hace falta ninguna acción adicional. 3286 3287## Estado del despliegue 3288 3289En la barra superior del editor puedes ver: 3290- **Estado actual** del despliegue (en curso, completado, fallido) 3291- **URL** de la app en producción 3292- **Registros del despliegue** para depurar 3293 3294## Diferencias entre vista previa y producción 3295 3296| Aspecto | Vista previa (\`.coderblock.dev\`) | Producción (\`.coderblock.app\`) | 3297|--------|----------------------------|-------------------------------| 3298| Entorno | Servidor de dev Vite | Contenedor Docker optimizado | 3299| Build | No (modo desarrollo) | Sà (build de producción) |
3300| Rendimiento | Bueno (HMR) | Excelente (build optimizado) | 3301| SSL | Sà | Sà | 3302| Variables de entorno | Inyectadas | Inyectadas | 3303| Persistencia | Pausa automática por inactividad | Siempre activo | 3304 3305> [!TIP] Prueba siempre en la vista previa antes de desplegar a producción. La vista previa usa la misma configuración, asà que si funciona allÃ, funcionará también en producción. 3306`,fr:`# Production 3307 3308\`\`\`anim 3309preview-vs-production 3310\`\`\` 3311 3312Publie ton app sur un domaine \`*.coderblock.app\` en un clic. L'app est déployée sur un vrai serveur cloud avec SSL automatique, prête à recevoir du trafic réel. 3313 3314## Comment fonctionne le déploiement 3315 33161. Clique sur le bouton **« Deploy »** dans l'éditeur 33172. Le système crée un **conteneur Docker unifié** qui inclut à la fois le frontend (build statique React servi par Caddy) et le backend (FastAPI avec Uvicorn) 33183. Le conteneur est déployé sur **Fly.io** dans une région proche de tes utilisateurs 33194. Le certificat **SSL** est généré automatiquement 33205. URL : \`https://{id}.coderblock.app\` 3321 3322## Délais de déploiement 3323 3324| Action | Temps | 3325|--------|------| 3326| Déploiement complet (première fois) | 60-90s | 3327| Hot-update du frontend | 15-30s | 3328| Hot-update du backend | 10-20s | 3329 3330## Mises à jour suivantes 3331 3332Après le premier déploiement, les mises à jour sont **bien plus rapides** grâce à : 3333 3334- **Cache des dépendances** : les modules npm et les paquets pip sont mis en cache 3335- **Hot-update ciblé** : seuls les fichiers modifiés sont mis à jour 3336- **Couches de l'image Docker** : les couches inchangées sont réutilisées 3337 3338## Variables d'environnement en production 3339 3340Les variables d'environnement et les secrets configurés dans le projet sont automatiquement injectés dans le conteneur de production à chaque déploiement. Aucune action supplémentaire nécessaire. 3341 3342## Ãtat du déploiement 3343 3344Dans la barre du haut de l'éditeur, tu peux voir : 3345- **Ãtat actuel** du déploiement (en cours, terminé, échoué) 3346- **URL** de l'app en production 3347- **Logs de déploiement** pour le débogage 3348 3349## Différences entre aperçu et production 3350 3351| Aspect | Aperçu (\`.coderblock.dev\`) | Production (\`.coderblock.app\`) | 3352|--------|----------------------------|-------------------------------| 3353| Environnement | Serveur de dev Vite | Conteneur Docker optimisé | 3354| Build | Non (mode développement) | Oui (build de production) | 3355| Performance | Bonne (HMR) | Excellente (build optimisé) | 3356| SSL | Oui | Oui | 3357| Variables d'env | Injectées | Injectées | 3358| Persistance | Pause auto après inactivité | Toujours actif | 3359 3360> [!TIP] Teste toujours dans l'aperçu avant de déployer en production. L'aperçu utilise la même configuration, donc si ça marche là , ça marchera aussi en production. 3361`,de:`# Produktion 3362 3363\`\`\`anim 3364preview-vs-production 3365\`\`\` 3366 3367Veröffentliche deine App mit einem Klick auf einer \`*.coderblock.app\`-Domain. Die App wird auf einem echten Cloud-Server mit automatischem SSL bereitgestellt, bereit für echten Traffic. 3368 3369## Wie das Deployment funktioniert 3370 33711. Klicke im Editor auf den Button **âDeploy"** 33722. Das System erstellt einen **einheitlichen Docker-Container**, der sowohl das Frontend (statischer React-Build, ausgeliefert von Caddy) als auch das Backend (FastAPI mit Uvicorn) enthält 33733. Der Container wird auf **Fly.io** in einer Region nahe deinen Nutzern bereitgestellt 33744. Das **SSL**-Zertifikat wird automatisch generiert 33755. URL: \`https://{id}.coderblock.app\` 3376 3377## Deploy-Zeiten 3378 3379| Aktion | Zeit | 3380|--------|------| 3381| Vollständiges Deploy (erstes Mal) | 60-90s | 3382| Frontend-Hot-Update | 15-30s | 3383| Backend-Hot-Update | 10-20s | 3384 3385## Weitere Updates 3386 3387Nach dem ersten Deploy sind Updates **deutlich schneller** dank: 3388 3389- **Dependency-Caching**: npm-Module und pip-Pakete werden gecacht 3390- **Gezieltes Hot-Update**: nur geänderte Dateien werden aktualisiert 3391- **Docker-Image-Layer**: unveränderte Layer werden wiederverwendet 3392 3393## Umgebungsvariablen in der Produktion 3394 3395Im Projekt konfigurierte Umgebungsvariablen und Secrets werden bei jedem Deploy automatisch in den Produktions-Container injiziert. Keine weitere Aktion nötig. 3396 3397## Deploy-Status 3398 3399In der oberen Leiste des Editors siehst du: 3400- **Aktuellen Status** des Deploys (läuft, abgeschlossen, fehlgeschlagen) 3401- **URL** der Produktions-App 3402- **Deploy-Logs** zur Fehlersuche 3403 3404## Unterschiede zwischen Vorschau und Produktion 3405 3406| Aspekt | Vorschau (\`.coderblock.dev\`) | Produktion (\`.coderblock.app\`) | 3407|--------|----------------------------|-------------------------------| 3408| Umgebung | Vite-Dev-Server | Optimierter Docker-Container | 3409| Build | Nein (Entwicklungsmodus) | Ja (Produktions-Build) |
3410| Performance | Gut (HMR) | Exzellent (optimierter Build) | 3411| SSL | Ja | Ja | 3412| Umgebungsvariablen | Injiziert | Injiziert | 3413| Persistenz | Auto-Pause nach Inaktivität | Immer aktiv | 3414 3415> [!TIP] Teste immer in der Vorschau, bevor du in die Produktion deployst. Die Vorschau nutzt dieselbe Konfiguration â funktioniert es dort, funktioniert es auch in der Produktion. 3416`,zh:`# ç产ç¯å¢ 3417 3418\`\`\`anim 3419preview-vs-production 3420\`\`\` 3421 3422ä¸é®å°ä½ çåºç¨åå¸å° \`*.coderblock.app\` ååãåºç¨é¨ç½²å¨çå®çäºæå¡å¨ä¸ï¼èªå¨é ç½® SSLï¼å¯éæ¶æ¥æ¶çå®æµéã 3423 3424## é¨ç½²å¦ä½å·¥ä½ 3425 34261. å¨ç¼è¾å¨ä¸ç¹å» **âDeployâ** æé® 34272. ç³»ç»ä¼å建ä¸ä¸ª**ç»ä¸ç Docker 容å¨**ï¼åæ¶å å«å端ï¼ç± Caddy æä¾ç React éææ建ï¼åå端ï¼ä½¿ç¨ Uvicorn ç FastAPIï¼ 34283. 容å¨é¨ç½²å¨ **Fly.io** ä¸ãé è¿ä½ ç¨æ·çåºå 34294. **SSL** è¯ä¹¦èªå¨çæ 34305. URLï¼\`https://{id}.coderblock.app\` 3431 3432## é¨ç½²èæ¶ 3433 3434| æä½ | æ¶é´ | 3435|--------|------| 3436| å®æ´é¨ç½²ï¼é¦æ¬¡ï¼ | 60-90 ç§ | 3437| å端çæ´æ° | 15-30 ç§ | 3438| å端çæ´æ° | 10-20 ç§ | 3439 3440## åç»æ´æ° 3441 3442é¦æ¬¡é¨ç½²ä¹åï¼æ´æ°ä¼**å¿«å¾å¤**ï¼å¾çäºï¼ 3443 3444- **ä¾èµç¼å**ï¼npm 模åå pip å ä¼è¢«ç¼å 3445- **å®åçæ´æ°**ï¼åªæ´æ°å·²ä¿®æ¹çæ件 3446- **Docker éåå±**ï¼æªååçå±ä¼è¢«å¤ç¨ 3447 3448## ç产ç¯å¢ä¸çç¯å¢åé 3449 3450项ç®ä¸é ç½®çç¯å¢åéåå¯é¥ä¼å¨æ¯æ¬¡é¨ç½²æ¶èªå¨æ³¨å ¥ç产容å¨ï¼æ éä»»ä½é¢å¤æä½ã 3451 3452## é¨ç½²ç¶æ 3453 3454å¨ç¼è¾å¨é¡¶æ ä½ å¯ä»¥çå°ï¼ 3455- é¨ç½²ç**å½åç¶æ**ï¼è¿è¡ä¸ãå·²å®æãå¤±è´¥ï¼ 3456- ç产åºç¨ç **URL** 3457- ç¨äºè°è¯ç**é¨ç½²æ¥å¿** 3458 3459## é¢è§ä¸ç产çåºå« 3460 3461| æ¹é¢ | é¢è§ (\`.coderblock.dev\`) | ç产 (\`.coderblock.app\`) | 3462|--------|----------------------------|-------------------------------| 3463| ç¯å¢ | Vite å¼åæå¡å¨ | ä¼åç Docker å®¹å¨ | 3464| æ建 | å¦ï¼å¼å模å¼ï¼ | æ¯ï¼ç产æå»ºï¼ | 3465| æ§è½ | è¯å¥½ï¼HMRï¼ | ä¼ç§ï¼ä¼åæå»ºï¼ | 3466| SSL | æ¯ | æ¯ | 3467| ç¯å¢åé | å·²æ³¨å ¥ | å·²æ³¨å ¥ | 3468| æä¹ æ§ | æ æ´»å¨åèªå¨æå | å§ç»å¨çº¿ | 3469 3470> [!TIP] é¨ç½²å°ç产å请å¡å¿ å¨é¢è§ä¸æµè¯ãé¢è§ä½¿ç¨ç¸åçé ç½®ï¼å æ¤å¨é¢è§ä¸è½ç¨ï¼å¨ç产ä¸ä¹è½ç¨ã 3471`},"hot-reload":{es:`# Hot Reload 3472 3473\`\`\`anim 3474hot-reload 3475\`\`\` 3476 3477El sistema de hot-reload te permite ver los cambios en tiempo real en la vista previa. 3478 3479## Flujo 3480 34811. La IA escribe los archivos en **S3** 34822. Se dispara una **sincronización** hacia la VM de vista previa 34833. **Vite HMR** detecta los cambios y actualiza el navegador 34844. El iframe de la vista previa se refresca solo 3485 3486## Cuándo hace falta una recarga completa 3487 3488En algunos casos, es necesaria una recarga completa: 3489 3490- Añadir nuevas dependencias npm 3491- Cambios en la configuración de Vite 3492- Cambios en \`index.html\` 3493- Errores de compilación que rompen el HMR 3494 3495> [!INFO] Puedes forzar una recarga completa pulsando el botón de recarga en el panel de vista previa. 3496`,fr:`# Hot Reload 3497 3498\`\`\`anim 3499hot-reload 3500\`\`\` 3501 3502Le système de hot-reload te permet de voir les changements en temps réel dans l'aperçu. 3503 3504## Flux 3505 35061. L'IA écrit les fichiers sur **S3** 35072. Une **synchronisation** est déclenchée vers la VM d'aperçu 35083. **Vite HMR** détecte les changements et met à jour le navigateur 35094. L'iframe de l'aperçu se rafraîchit tout seul 3510 3511## Quand un rechargement complet est nécessaire 3512 3513Dans certains cas, un rechargement complet est nécessaire : 3514 3515- Ajout de nouvelles dépendances npm 3516- Changements dans la configuration de Vite 3517- Changements dans \`index.html\` 3518- Erreurs de compilation qui cassent le HMR 3519 3520> [!INFO] Tu peux forcer un rechargement complet en cliquant sur le bouton de rafraîchissement dans le panneau d'aperçu. 3521`,de:`# Hot Reload 3522 3523\`\`\`anim 3524hot-reload 3525\`\`\` 3526 3527Das Hot-Reload-System lässt dich Ãnderungen in Echtzeit in der Vorschau sehen. 3528 3529## Ablauf 3530 35311. Die KI schreibt die Dateien nach **S3** 35322. Eine **Synchronisation** wird zur Vorschau-VM ausgelöst 35333. **Vite HMR** erkennt Ãnderungen und aktualisiert den Browser 35344. Das Vorschau-iframe aktualisiert sich selbst 3535 3536## Wann ein vollständiges Neuladen nötig ist 3537 3538In manchen Fällen ist ein vollständiges Neuladen nötig: 3539 3540- Hinzufügen neuer npm-Abhängigkeiten 3541- Ãnderungen an der Vite-Konfiguration 3542- Ãnderungen an \`index.html\` 3543- Kompilierfehler, die HMR unterbrechen 3544 3545> [!INFO] Du kannst ein vollständiges Neuladen erzwingen, indem du im Vorschau-Panel auf den Neuladen-Button klickst. 3546`,zh:`# çéè½½ 3547 3548\`\`\`anim 3549hot-reload 3550\`\`\` 3551 3552çé载系ç»è®©ä½ å¨é¢è§ä¸å®æ¶çå°æ´æ¹ã 3553 3554## æµç¨ 3555 35561. AI å°æ件åå ¥ **S3** 35572. 触ååé¢è§èææºç**åæ¥** 35583. **Vite HMR** æ£æµæ´æ¹å¹¶æ´æ°æµè§å¨ 35594. é¢è§ iframe èªå¨å·æ° 3560 3561## ä½æ¶éè¦å®æ´éè½½ 3562 3563å¨æäºæ åµä¸ï¼éè¦å®æ´éè½½ï¼ 3564 3565- æ·»å æ°ç npm ä¾èµ 3566- ä¿®æ¹ Vite é ç½® 3567- ä¿®æ¹ \`index.html\`
3568- ç ´å HMR çç¼è¯é误 3569 3570> [!INFO] ä½ å¯ä»¥å¨é¢è§é¢æ¿ä¸ç¹å»å·æ°æé®æ¥å¼ºå¶å®æ´éè½½ã 3571`},neondb:{es:`# NeonDB 3572 3573\`\`\`anim 3574database 3575\`\`\` 3576 3577Coderblock usa **NeonDB** (PostgreSQL serverless) como base de datos de las apps generadas. NeonDB es un servicio PostgreSQL totalmente gestionado que escala automáticamente y ofrece funciones avanzadas como el branching de la base de datos. 3578 3579## CaracterÃsticas 3580 3581- **PostgreSQL completo**: soporte para todos los tipos de datos, Ãndices, triggers, funciones, JSON, arrays 3582- **Serverless** con scale-to-zero: sin coste cuando no se usa 3583- **Branching** para entornos de desarrollo aislados 3584- **Conexión automática** desde vista previa y producción 3585- **Connection pooling integrado** con PgBouncer para gestionar muchas conexiones concurrentes 3586- **Resiliencia**: pool_recycle, pool_pre_ping, manejo automático de errores de conexión 3587 3588## Configuración 3589 3590La base de datos se configura automáticamente cuando pides a la IA añadir funciones que requieren persistencia de datos (usuarios, productos, pedidos, etc.). Las credenciales se guardan como variables de entorno y se inyectan tanto en vista previa como en producción. 3591 3592\`\`\`bash 3593DATABASE_URL=postgresql://user:[email protected]/dbname 3594NEON_DATABASE_URL=postgresql://user:[email protected]/dbname 3595\`\`\` 3596 3597## Consultas SQL directas 3598 3599El agente de IA puede ejecutar consultas SQL directamente en la base de datos de tu proyecto, con capas de seguridad integradas: 3600 3601- **SELECT**: se ejecuta libremente para leer datos 3602- **INSERT/UPDATE**: se ejecuta con confirmación implÃcita 3603- **DELETE/DROP/ALTER**: requiere **confirmación explÃcita del usuario** (Human-in-the-Loop) 3604 3605### Ejemplo en el chat 3606 3607\`\`\` 3608Muéstrame todos los usuarios registrados en las últimas 24 horas 3609\`\`\` 3610 3611La IA ejecutará: 3612\`\`\`sql 3613SELECT * FROM users WHERE created_at > NOW() - INTERVAL '24 hours' ORDER BY created_at DESC; 3614\`\`\` 3615 3616## Migraciones 3617 3618La IA gestiona automáticamente las migraciones de esquema. Cuando pides añadir un campo o modificar una tabla, el agente: 3619 36201. Lee el esquema existente 36212. Genera el script SQL de migración 36223. Ejecuta la migración (con confirmación para operaciones destructivas) 3623 3624> [!WARNING] Nunca compartas las credenciales de la base de datos. Usa siempre variables de entorno. Coderblock las gestiona automáticamente. 3625`,fr:`# NeonDB 3626 3627\`\`\`anim 3628database 3629\`\`\` 3630 3631Coderblock utilise **NeonDB** (PostgreSQL serverless) comme base de données des apps générées. NeonDB est un service PostgreSQL entièrement géré qui scale automatiquement et offre des fonctions avancées comme le branching de la base de données. 3632 3633## Fonctionnalités 3634 3635- **PostgreSQL complet** : prise en charge de tous les types de données, index, triggers, fonctions, JSON, arrays 3636- **Serverless** avec scale-to-zero : aucun coût lorsqu'inutilisé 3637- **Branching** pour des environnements de développement isolés 3638- **Connexion automatique** depuis l'aperçu et la production 3639- **Connection pooling intégré** avec PgBouncer pour gérer de nombreuses connexions simultanées 3640- **Résilience** : pool_recycle, pool_pre_ping, gestion automatique des erreurs de connexion 3641 3642## Configuration 3643 3644La base de données est configurée automatiquement quand tu demandes à l'IA d'ajouter des fonctions nécessitant la persistance des données (utilisateurs, produits, commandes, etc.). Les identifiants sont enregistrés comme variables d'environnement et injectés en aperçu comme en production. 3645 3646\`\`\`bash 3647DATABASE_URL=postgresql://user:[email protected]/dbname 3648NEON_DATABASE_URL=postgresql://user:[email protected]/dbname 3649\`\`\` 3650 3651## Requêtes SQL directes 3652 3653L'agent IA peut exécuter des requêtes SQL directement sur la base de données de ton projet, avec des couches de sécurité intégrées : 3654 3655- **SELECT** : exécuté librement pour lire les données 3656- **INSERT/UPDATE** : exécuté avec confirmation implicite 3657- **DELETE/DROP/ALTER** : requiert une **confirmation explicite de l'utilisateur** (Human-in-the-Loop) 3658 3659### Exemple dans le chat 3660 3661\`\`\` 3662Montre-moi tous les utilisateurs inscrits ces dernières 24 heures 3663\`\`\` 3664 3665L'IA exécutera : 3666\`\`\`sql 3667SELECT * FROM users WHERE created_at > NOW() - INTERVAL '24 hours' ORDER BY created_at DESC; 3668\`\`\` 3669 3670## Migrations 3671 3672L'IA gère automatiquement les migrations de schéma. Quand tu demandes d'ajouter un champ ou de modifier une table, l'agent : 3673 36741. Lit le schéma existant 36752. Génère le script SQL de migration 36763. Exécute la migration (avec confirmation pour les opérations destructrices) 3677 3678> [!WARNING] Ne partage jamais les identifiants de la base de données. Utilise toujours des variables d'environnement. Coderblock les gère automatiquement. 3679`,de:`# NeonDB 3680 3681\`\`\`anim 3682database 3683\`\`\` 3684 3685Coderblock nutzt **NeonDB** (serverloses PostgreSQL) als Datenbank für generierte Apps. NeonDB ist ein voll verwalteter PostgreSQL-Dienst, der automatisch skaliert und fortgeschrittene Funktionen wie Datenbank-Branching bietet. 3686 3687## Funktionen 3688 3689- **Vollständiges PostgreSQL**: Unterstützung für alle Datentypen, Indizes, Trigger, Funktionen, JSON, Arrays 3690- **Serverless** mit Scale-to-Zero: keine Kosten bei Nichtnutzung 3691- **Branching** für isolierte Entwicklungsumgebungen 3692- **Automatische Verbindung** aus Vorschau und Produktion 3693- **Integriertes Connection Pooling** mit PgBouncer für viele gleichzeitige Verbindungen 3694- **Resilienz**: pool_recycle, pool_pre_ping, automatische Behandlung von Verbindungsfehlern 3695 3696## Konfiguration 3697 3698Die Datenbank wird automatisch konfiguriert, wenn du die KI bittest, Funktionen mit Datenpersistenz hinzuzufügen (Nutzer, Produkte, Bestellungen usw.). Die Zugangsdaten werden als Umgebungsvariablen gespeichert und sowohl in Vorschau als auch Produktion injiziert. 3699 3700\`\`\`bash 3701DATABASE_URL=postgresql://user:[email protected]/dbname 3702NEON_DATABASE_URL=postgresql://user:[email protected]/dbname 3703\`\`\` 3704 3705## Direkte SQL-Abfragen 3706 3707Der KI-Agent kann SQL-Abfragen direkt auf der Datenbank deines Projekts ausführen, mit integrierten Sicherheitsebenen: 3708 3709- **SELECT**: frei ausgeführt, um Daten zu lesen 3710- **INSERT/UPDATE**: mit impliziter Bestätigung ausgeführt 3711- **DELETE/DROP/ALTER**: erfordert **ausdrückliche Nutzerbestätigung** (Human-in-the-Loop) 3712 3713### Beispiel im Chat 3714 3715\`\`\` 3716Zeig mir alle in den letzten 24 Stunden registrierten Nutzer 3717\`\`\` 3718 3719Die KI führt aus: 3720\`\`\`sql 3721SELECT * FROM users WHERE created_at > NOW() - INTERVAL '24 hours' ORDER BY created_at DESC; 3722\`\`\` 3723 3724## Migrationen 3725 3726Die KI verwaltet Schema-Migrationen automatisch. Wenn du bittest, ein Feld hinzuzufügen oder eine Tabelle zu ändern, wird der Agent: 3727 37281. das bestehende Schema lesen 37292. das SQL-Migrationsskript generieren 37303. die Migration ausführen (mit Bestätigung bei destruktiven Operationen) 3731 3732> [!WARNING] Teile niemals Datenbank-Zugangsdaten. Nutze immer Umgebungsvariablen. Coderblock verwaltet sie automatisch. 3733`,zh:`# NeonDB 3734 3735\`\`\`anim 3736database 3737\`\`\` 3738 3739Coderblock ä½¿ç¨ **NeonDB**ï¼æ æå¡å¨ PostgreSQLï¼ä½ä¸ºæçæåºç¨çæ°æ®åºãNeonDB æ¯ä¸ä¸ªå®å ¨æ管ç PostgreSQL æå¡ï¼å¯èªå¨æ©ç¼©ï¼å¹¶æä¾æ°æ®åºåæ¯çé«çº§åè½ã 3740 3741## ç¹æ§ 3742 3743- **å®æ´ç PostgreSQL**ï¼æ¯ææææ°æ®ç±»åãç´¢å¼ã触åå¨ãå½æ°ãJSONãæ°ç» 3744- **æ æå¡å¨**ä¸å¯ç¼©å®¹å°é¶ï¼ä¸ä½¿ç¨æ¶æ ææ¬ 3745- **åæ¯**ç¨äºé离çå¼åç¯å¢ 3746- ä»é¢è§åç产ç¯å¢**èªå¨è¿æ¥** 3747- å ç½® **PgBouncer è¿æ¥æ± **ï¼å¤ç大é并åè¿æ¥ 3748- **é§æ§**ï¼pool_recycleãpool_pre_pingãèªå¨å¤çè¿æ¥é误 3749 3750## é ç½® 3751 3752å½ä½ 让 AI æ·»å éè¦æ°æ®æä¹ åçåè½ï¼ç¨æ·ãååã订åçï¼æ¶ï¼æ°æ®åºä¼èªå¨é ç½®ãåæ®ä¼ä¿å为ç¯å¢åéï¼å¹¶æ³¨å ¥å°é¢è§åç产ç¯å¢ã 3753 3754\`\`\`bash 3755DATABASE_URL=postgresql://user:[email protected]/dbname 3756NEON_DATABASE_URL=postgresql://user:[email protected]/dbname 3757\`\`\` 3758 3759## ç´æ¥ SQL æ¥è¯¢ 3760 3761AI æºè½ä½å¯ä»¥ç´æ¥å¨ä½ 项ç®çæ°æ®åºä¸æ§è¡ SQL æ¥è¯¢ï¼å¹¶å ç½®å®å ¨å±ï¼ 3762 3763- **SELECT**ï¼å¯èªç±æ§è¡ä»¥è¯»åæ°æ® 3764- **INSERT/UPDATE**ï¼ä»¥éå¼ç¡®è®¤æ§è¡ 3765- **DELETE/DROP/ALTER**ï¼éè¦**ç¨æ·æ¾å¼ç¡®è®¤**ï¼Human-in-the-Loopï¼ 3766 3767### èå¤©ç¤ºä¾ 3768 3769\`\`\` 3770æ¾ç¤ºè¿å» 24 å°æ¶å 注åçææç¨æ· 3771\`\`\` 3772 3773AI ä¼æ§è¡ï¼ 3774\`\`\`sql 3775SELECT * FROM users WHERE created_at > NOW() - INTERVAL '24 hours' ORDER BY created_at DESC; 3776\`\`\` 3777 3778## è¿ç§» 3779 3780AI ä¼èªå¨å¤çæ°æ®åºç»æè¿ç§»ãå½ä½ 请æ±æ·»å å段æä¿®æ¹è¡¨æ¶ï¼æºè½ä½ä¼ï¼ 3781 37821. 读åç°æç»æ 37832. çæ SQL è¿ç§»èæ¬ 37843. æ§è¡è¿ç§»ï¼ç ´åæ§æä½éç¡®è®¤ï¼ 3785 3786> [!WARNING] åå¿å享æ°æ®åºåæ®ãå§ç»ä½¿ç¨ç¯å¢åéãCoderblock ä¼èªå¨ç®¡çå®ä»¬ã 3787`},"sql-queries":{es:`# Consultas SQL 3788 3789\`\`\`anim 3790database 3791\`\`\` 3792 3793Puedes pedir a la IA que cree y modifique tablas, escriba consultas y gestione migraciones. 3794 3795## Ejemplos 3796 3797\`\`\`sql 3798-- Crear una tabla de usuarios 3799CREATE TABLE users ( 3800 id SERIAL PRIMARY KEY,
3801 email VARCHAR(255) UNIQUE NOT NULL, 3802 name VARCHAR(255), 3803 created_at TIMESTAMP DEFAULT NOW() 3804); 3805\`\`\` 3806 3807## Migraciones 3808 3809La IA puede generar scripts de migración para cambios de esquema: 3810 3811\`\`\` 3812Añade un campo "avatar_url" a la tabla users 3813\`\`\` 3814 3815> [!TIP] La IA lee el esquema existente antes de hacer cambios, garantizando la coherencia. 3816`,fr:`# Requêtes SQL 3817 3818\`\`\`anim 3819database 3820\`\`\` 3821 3822Tu peux demander à l'IA de créer et modifier des tables, d'écrire des requêtes et de gérer les migrations. 3823 3824## Exemples 3825 3826\`\`\`sql 3827-- Créer une table utilisateurs 3828CREATE TABLE users ( 3829 id SERIAL PRIMARY KEY, 3830 email VARCHAR(255) UNIQUE NOT NULL, 3831 name VARCHAR(255), 3832 created_at TIMESTAMP DEFAULT NOW() 3833); 3834\`\`\` 3835 3836## Migrations 3837 3838L'IA peut générer des scripts de migration pour les changements de schéma : 3839 3840\`\`\` 3841Ajoute un champ « avatar_url » à la table users 3842\`\`\` 3843 3844> [!TIP] L'IA lit le schéma existant avant d'apporter des changements, garantissant la cohérence. 3845`,de:`# SQL-Abfragen 3846 3847\`\`\`anim 3848database 3849\`\`\` 3850 3851Du kannst die KI bitten, Tabellen zu erstellen und zu ändern, Abfragen zu schreiben und Migrationen zu verwalten. 3852 3853## Beispiele 3854 3855\`\`\`sql 3856-- Eine Nutzer-Tabelle erstellen 3857CREATE TABLE users ( 3858 id SERIAL PRIMARY KEY, 3859 email VARCHAR(255) UNIQUE NOT NULL, 3860 name VARCHAR(255), 3861 created_at TIMESTAMP DEFAULT NOW() 3862); 3863\`\`\` 3864 3865## Migrationen 3866 3867Die KI kann Migrationsskripte für Schemaänderungen generieren: 3868 3869\`\`\` 3870Füge ein Feld âavatar_url" zur Tabelle users hinzu 3871\`\`\` 3872 3873> [!TIP] Die KI liest das bestehende Schema, bevor sie Ãnderungen vornimmt, und sorgt so für Konsistenz. 3874`,zh:`# SQL æ¥è¯¢ 3875 3876\`\`\`anim 3877database 3878\`\`\` 3879 3880ä½ å¯ä»¥è®© AI å建åä¿®æ¹è¡¨ãç¼åæ¥è¯¢ä»¥å管çè¿ç§»ã 3881 3882## ç¤ºä¾ 3883 3884\`\`\`sql 3885-- å建ä¸ä¸ªç¨æ·è¡¨ 3886CREATE TABLE users ( 3887 id SERIAL PRIMARY KEY, 3888 email VARCHAR(255) UNIQUE NOT NULL, 3889 name VARCHAR(255), 3890 created_at TIMESTAMP DEFAULT NOW() 3891); 3892\`\`\` 3893 3894## è¿ç§» 3895 3896AI å¯ä»¥ä¸ºç»ææ´æ¹çæè¿ç§»èæ¬ï¼ 3897 3898\`\`\` 3899ç» users 表添å ä¸ä¸ª "avatar_url" å段 3900\`\`\` 3901 3902> [!TIP] AI ä¼å¨æ´æ¹å读åç°æç»æï¼ç¡®ä¿ä¸è´æ§ã 3903`},"env-vars":{es:`# Variables de entorno 3904 3905\`\`\`anim 3906secrets 3907\`\`\` 3908 3909Las variables de entorno te permiten configurar tu app sin exponer credenciales en el código. 3910 3911## Cómo configurarlas 3912 39131. Ve a los **Ajustes** del proyecto 39142. Sección **"Variables de entorno"** 39153. Añade clave y valor 39164. Las variables están disponibles en vista previa y producción 3917 3918## Variables comunes 3919 3920| Variable | Uso | 3921|----------|-------| 3922| \`DATABASE_URL\` | Conexión a la base de datos | 3923| \`STRIPE_SECRET_KEY\` | Pagos con Stripe | 3924| \`RESEND_API_KEY\` | EnvÃo de emails | 3925| \`NEON_DATABASE_URL\` | Cadena de conexión de NeonDB | 3926 3927> [!DANGER] Nunca pongas claves API directamente en el código fuente. Usa siempre variables de entorno. 3928`,fr:`# Variables d'environnement 3929 3930\`\`\`anim 3931secrets 3932\`\`\` 3933 3934Les variables d'environnement te permettent de configurer ton app sans exposer d'identifiants dans le code. 3935 3936## Comment les configurer 3937 39381. Va dans les **Paramètres** du projet 39392. Section **« Variables d'environnement »** 39403. Ajoute une clé et une valeur 39414. Les variables sont disponibles en aperçu et en production 3942 3943## Variables courantes 3944 3945| Variable | Usage | 3946|----------|-------| 3947| \`DATABASE_URL\` | Connexion à la base de données | 3948| \`STRIPE_SECRET_KEY\` | Paiements Stripe | 3949| \`RESEND_API_KEY\` | Envoi d'e-mails | 3950| \`NEON_DATABASE_URL\` | Chaîne de connexion NeonDB | 3951 3952> [!DANGER] Ne mets jamais de clés API directement dans le code source. Utilise toujours des variables d'environnement. 3953`,de:`# Umgebungsvariablen 3954 3955\`\`\`anim 3956secrets 3957\`\`\` 3958 3959Umgebungsvariablen erlauben dir, deine App zu konfigurieren, ohne Zugangsdaten im Code offenzulegen. 3960 3961## So konfigurierst du sie 3962 39631. Gehe zu den **Einstellungen** des Projekts 39642. Abschnitt **âUmgebungsvariablen"** 39653. Füge Schlüssel und Wert hinzu 39664. Die Variablen sind in Vorschau und Produktion verfügbar 3967 3968## Häufige Variablen 3969 3970| Variable | Verwendung | 3971|----------|-------| 3972| \`DATABASE_URL\` | Datenbankverbindung | 3973| \`STRIPE_SECRET_KEY\` | Stripe-Zahlungen | 3974| \`RESEND_API_KEY\` | E-Mail-Versand | 3975| \`NEON_DATABASE_URL\` | NeonDB-Verbindungsstring | 3976 3977> [!DANGER] Setze API-Schlüssel niemals direkt in den Quellcode. Nutze immer Umgebungsvariablen. 3978`,zh:`# ç¯å¢åé 3979 3980\`\`\`anim 3981secrets 3982\`\`\` 3983 3984ç¯å¢åéè®©ä½ å¨ä¸å°åæ®æ´é²å¨ä»£ç ä¸çæ åµä¸é ç½®ä½ çåºç¨ã 3985 3986## å¦ä½é ç½® 3987 39881. è¿å ¥é¡¹ç®**设置** 39892. **âç¯å¢åéâ**é¨å 39903. æ·»å é®åå¼ 39914. åéå¨é¢è§åç产ç¯å¢ä¸åå¯ç¨
3992 3993## 常è§åé 3994 3995| åé | ç¨é | 3996|----------|-------| 3997| \`DATABASE_URL\` | æ°æ®åºè¿æ¥ | 3998| \`STRIPE_SECRET_KEY\` | Stripe æ¯ä» | 3999| \`RESEND_API_KEY\` | é®ä»¶åé | 4000| \`NEON_DATABASE_URL\` | NeonDB è¿æ¥å符串 | 4001 4002> [!DANGER] åå¿å° API å¯é¥ç´æ¥åå ¥æºä»£ç ãå§ç»ä½¿ç¨ç¯å¢åéã 4003`},secrets:{es:`# Secretos 4004 4005\`\`\`anim 4006secrets 4007\`\`\` 4008 4009Los secretos son variables de entorno sensibles con protección adicional. 4010 4011## Diferencia entre Variables y Secretos 4012 4013- **Variables**: visibles en los ajustes, para configuración genérica 4014- **Secretos**: enmascarados tras guardarlos, para claves API y credenciales 4015 4016## Buenas prácticas 4017 4018- Usa secretos para todas las claves API de terceros 4019- Rota las claves periódicamente 4020- Nunca registres (log) los valores de los secretos 4021 4022> [!WARNING] Los secretos no se pueden leer tras guardarlos. Si pierdes una clave, tendrás que regenerarla desde el proveedor. 4023`,fr:`# Secrets 4024 4025\`\`\`anim 4026secrets 4027\`\`\` 4028 4029Les secrets sont des variables d'environnement sensibles avec une protection supplémentaire. 4030 4031## Différence entre Variables et Secrets 4032 4033- **Variables** : visibles dans les paramètres, pour la configuration générique 4034- **Secrets** : masqués après enregistrement, pour les clés API et les identifiants 4035 4036## Bonnes pratiques 4037 4038- Utilise des secrets pour toutes les clés API tierces 4039- Effectue une rotation régulière des clés 4040- Ne journalise jamais les valeurs des secrets 4041 4042> [!WARNING] Les secrets ne peuvent pas être lus après enregistrement. Si tu perds une clé, tu devras la régénérer depuis le fournisseur. 4043`,de:`# Secrets 4044 4045\`\`\`anim 4046secrets 4047\`\`\` 4048 4049Secrets sind sensible Umgebungsvariablen mit zusätzlichem Schutz. 4050 4051## Unterschied zwischen Variablen und Secrets 4052 4053- **Variablen**: in den Einstellungen sichtbar, für generische Konfiguration 4054- **Secrets**: nach dem Speichern maskiert, für API-Schlüssel und Zugangsdaten 4055 4056## Best Practices 4057 4058- Nutze Secrets für alle Drittanbieter-API-Schlüssel 4059- Rotiere Schlüssel regelmäÃig 4060- Logge niemals Secret-Werte 4061 4062> [!WARNING] Secrets können nach dem Speichern nicht mehr gelesen werden. Verlierst du einen Schlüssel, musst du ihn beim Anbieter neu generieren. 4063`,zh:`# å¯é¥ 4064 4065\`\`\`anim 4066secrets 4067\`\`\` 4068 4069å¯é¥æ¯å¸¦æé¢å¤ä¿æ¤çææç¯å¢åéã 4070 4071## åéä¸å¯é¥çåºå« 4072 4073- **åé**ï¼å¨è®¾ç½®ä¸å¯è§ï¼ç¨äºéç¨é ç½® 4074- **å¯é¥**ï¼ä¿åå被é®ç½©ï¼ç¨äº API å¯é¥ååæ® 4075 4076## æä½³å®è·µ 4077 4078- 对ææ第ä¸æ¹ API å¯é¥ä½¿ç¨å¯é¥ 4079- å®æè½®æ¢å¯é¥ 4080- åå¿è®°å½ï¼logï¼å¯é¥çå¼ 4081 4082> [!WARNING] å¯é¥ä¿ååæ æ³å读åãå¦æä½ ä¸¢å¤±äºæ个å¯é¥ï¼éè¦ä»æä¾åå¤éæ°çæã 4083`},payments:{es:`# Aceptar pagos en tu app 4084 4085\`\`\`anim 4086payment-funnel 4087\`\`\` 4088 4089Con Coderblock puedes añadir pagos reales (únicos y suscripciones) a tu app solo pidiéndolo en el chat. La integración usa **Stripe**: en test funciona al instante sin configuración, y al pasar a producción los ingresos van directos a tu **propia cuenta dedicada** â Coderblock no añade comisiones extra. 4090 4091## Inicio rápido 4092 4093Dile al chat qué quieres vender, por ejemplo: 4094 4095\`\`\` 4096Añade una suscripción Premium a 9,90 â¬/mes y desbloquea la sección Informes solo para suscriptores 4097\`\`\` 4098 4099\`\`\` 4100Vende mi ebook por 19 ⬠con un botón "Comprar ahora" 4101\`\`\` 4102 4103La IA se encarga de todo: crea los productos y precios **reales** en Stripe, genera el checkout y las páginas de éxito/cancelación, prepara la base de datos para pedidos y suscripciones â y el webhook que confirma los pagos ya está activo, sin que tengas que hacer nada. 4104 4105## Cero configuración: en test no hace falta nada 4106 4107\`\`\`anim 4108golive 4109\`\`\` 4110 4111Literalmente nada: **sin cuenta de Stripe, sin claves, sin formularios, sin activación**. Pide los pagos en el chat y funcionan: productos, precios y checkout corren en un entorno de test de Stripe gestionado por Coderblock, aislado por proyecto. Los webhooks sencillamente no existen para ti: la plataforma los gestiona. 4112 4113**Tu** cuenta de Stripe dedicada nace solo cuando quieres cobrar tarjetas **reales**: desde **Backend â Payments** completas la activación guiada de Stripe (datos del negocio, cuenta bancaria) â el único paso que verás, necesario solo al pasar a producción. Los ingresos van directos a ti; Coderblock no añade comisiones. 4114 4115### Ya tengo una cuenta de Stripe â ¿puedo usar la mÃa? 4116 4117Sà (modo avanzado): dÃselo a la IA y te pedirá tu **Secret Key** mediante un formulario seguro en el chat (Stripe Dashboard â Developers â API keys; usa la \`sk_test_...\` mientras construyes). 4118 4119> [!WARNING] NUNCA pegues tu clave secreta como mensaje de chat. Trátala como las llaves de tu casa: solo el formulario seguro la guarda cifrada. 4120 4121En este modo también el **webhook** se registra automáticamente. 4122 4123## Probar los pagos 4124 4125Los pagos de test funcionan tanto en la **vista previa** como en la app **publicada**: 4126 4127- Tarjeta de test: \`4242 4242 4242 4242\`, cualquier caducidad futura, cualquier CVC 4128- Sin cargos reales 4129- Ve los productos y el estado en la pestaña **Backend â Payments** del editor; los pedidos y suscripciones llegan a la base de datos de tu app 4130 4131## Cómo funciona el mecanismo (siempre dos entornos) 4132
4133Tu app tiene **dos entornos de pago paralelos**, activos a la vez: 4134 4135| | Entorno TEST | Entorno LIVE | 4136|---|---|---| 4137| Dónde | Vista previa del editor (y la app publicada antes de producción) | App publicada, tras pasar a producción | 4138| Cuenta Stripe | Entorno gestionado por Coderblock, aislado por proyecto | **Tu** cuenta dedicada | 4139| Tarjetas | Solo de test (\`4242 4242 4242 4242\`) | Tarjetas reales | 4140| Configuración | Ninguna | Activación guiada única | 4141 4142Reglas importantes: 4143 4144- **La vista previa SIEMPRE paga en test**, incluso tras pasar a producción: puedes seguir probando cambios en el checkout para siempre, sin riesgo de cargos reales. Las tarjetas reales solo funcionan en la app publicada. 4145- Los pedidos/suscripciones de test y reales llegan a las **mismas tablas** de tu base de datos, pero cada fila lleva un campo \`livemode\`: \`false\` = pago de test, \`true\` = dinero real. Siempre puedes distinguirlos (y, si quieres, restringir contenido de producción solo a suscripciones reales â basta pedirlo en el chat). 4146- El **webhook** que confirma los pagos y escribe en tu base de datos es único y gestionado por la plataforma: cubre ambos entornos sin ninguna configuración por tu parte. 4147- Los **price id** en el código de tu app siguen siendo los de test incluso tras pasar a producción: la plataforma los traduce automáticamente a sus gemelos live en el momento del checkout. Cero cambios de código. 4148 4149## Dónde ver tus ingresos 4150 4151**Backend Manager â Payments** muestra: modo activo (TEST/LIVE), salud del webhook, productos y precios, pagos y suscripciones recientes â sin salir de Coderblock. 4152 4153## Problemas comunes 4154 4155| Error | Causa | Solución | 4156|---|---|---| 4157| \`PRICE_KEY_MODE_MISMATCH\` | El price id del código no existe en el entorno activo | Pide al chat: *"vuelve a crear el producto y actualiza el price id"* | 4158| Pago correcto pero ningún pedido registrado | Evento del webhook aún no procesado | Espera unos segundos y recarga; si persiste, repórtalo en el chat | 4159 4160¿Listo para cobrar tarjetas reales? Lee [Pasar a producción](/docs/payments-golive). 4161`,fr:`# Accepter les paiements dans ton app 4162 4163\`\`\`anim 4164payment-funnel 4165\`\`\` 4166 4167Avec Coderblock, tu peux ajouter de vrais paiements (uniques et abonnements) à ton app rien qu'en le demandant dans le chat. L'intégration utilise **Stripe** : en test ça marche tout de suite sans configuration, et au passage en production les revenus vont directement sur ton **propre compte dédié** â Coderblock n'ajoute aucune commission. 4168 4169## Démarrage rapide 4170 4171Dis au chat ce que tu veux vendre, par exemple : 4172 4173\`\`\` 4174Ajoute un abonnement Premium à 9,90 â¬/mois et débloque la section Rapports uniquement pour les abonnés 4175\`\`\` 4176 4177\`\`\` 4178Vends mon ebook à 19 ⬠avec un bouton « Acheter maintenant » 4179\`\`\` 4180 4181L'IA s'occupe de tout : elle crée les produits et prix **réels** sur Stripe, génère le checkout et les pages succès/annulation, prépare la base de données pour les commandes et abonnements â et le webhook qui confirme les paiements est déjà actif, sans rien à faire de ton côté. 4182 4183## Zéro configuration : rien à faire en test 4184 4185\`\`\`anim 4186golive 4187\`\`\` 4188 4189Littéralement rien : **pas de compte Stripe, pas de clés, pas de formulaires, pas d'activation**. Demande les paiements dans le chat et ils marchent : produits, prix et checkout tournent sur un environnement de test Stripe géré par Coderblock, isolé par projet. Les webhooks n'existent tout simplement pas pour toi : la plateforme les gère. 4190 4191**Ton** compte Stripe dédié ne naît que lorsque tu veux encaisser de **vraies** cartes : depuis **Backend â Payments** tu complètes l'activation guidée de Stripe (infos entreprise, compte bancaire) â la seule étape que tu verras, nécessaire seulement au passage en production. Les revenus vont directement à toi ; Coderblock n'ajoute pas de commission. 4192 4193### J'ai déjà un compte Stripe â puis-je utiliser le mien ? 4194 4195Oui (mode avancé) : dis-le à l'IA et elle te demandera ta **Secret Key** via un formulaire sécurisé dans le chat (Stripe Dashboard â Developers â API keys ;
4195 utilise la \`sk_test_...\` pendant le développement). 4196 4197> [!WARNING] Ne colle JAMAIS ta clé secrète comme message de chat. Traite-la comme les clés de ta maison : seul le formulaire sécurisé la stocke chiffrée. 4198 4199Dans ce mode aussi, le **webhook** est enregistré automatiquement. 4200 4201## Tester les paiements 4202 4203Les paiements de test fonctionnent aussi bien dans l'**aperçu** que sur l'app **publiée** : 4204 4205- Carte de test : \`4242 4242 4242 4242\`, n'importe quelle date future, n'importe quel CVC 4206- Aucun débit réel 4207- Vois les produits et le statut dans l'onglet **Backend â Payments** de l'éditeur ; les commandes et abonnements arrivent dans la base de données de ton app 4208 4209## Comment fonctionne le mécanisme (toujours deux environnements) 4210 4211Ton app a **deux environnements de paiement parallèles**, actifs en même temps : 4212 4213| | Environnement TEST | Environnement LIVE | 4214|---|---|---| 4215| Où | Aperçu de l'éditeur (et l'app publiée avant le passage en prod) | App publiée, après le passage en prod | 4216| Compte Stripe | Environnement géré par Coderblock, isolé par projet | **Ton** compte dédié | 4217| Cartes | Test uniquement (\`4242 4242 4242 4242\`) | Vraies cartes | 4218| Configuration | Aucune | Activation guidée unique | 4219 4220Règles importantes : 4221 4222- **L'aperçu paie TOUJOURS en test**, même après le passage en prod : tu peux continuer à tester les changements du checkout pour toujours, sans risque de débit réel. Les vraies cartes ne marchent que sur l'app publiée. 4223- Les commandes/abonnements de test et réels arrivent dans les **mêmes tables** de ta base de données, mais chaque ligne porte un champ \`livemode\` : \`false\` = paiement de test, \`true\` = argent réel. Tu peux toujours les distinguer (et, si tu veux, réserver le contenu de production aux seuls abonnements réels â demande-le dans le chat). 4224- Le **webhook** qui confirme les paiements et écrit dans ta base de données est unique et géré par la plateforme : il couvre les deux environnements sans aucune configuration de ta part. 4225- Les **price id** dans le code de ton app restent ceux de test même après le passage en prod : la plateforme les traduit automatiquement vers leurs jumeaux live au moment du checkout. Zéro changement de code. 4226 4227## Où voir tes revenus 4228 4229**Backend Manager â Payments** affiche : mode actif (TEST/LIVE), santé du webhook, produits et prix, paiements et abonnements récents â sans quitter Coderblock. 4230 4231## Problèmes courants 4232 4233| Erreur | Cause | Solution | 4234|---|---|---| 4235| \`PRICE_KEY_MODE_MISMATCH\` | Le price id du code n'existe pas dans l'environnement actif | Demande au chat : *« recrée le produit et mets à jour le price id »* | 4236| Paiement réussi mais aucune commande enregistrée | Ãvénement webhook pas encore traité | Attends quelques secondes et recharge ; si ça persiste, signale-le dans le chat | 4237 4238Prêt à encaisser de vraies cartes ? Lis [Passer en live](/docs/payments-golive). 4239`,de:`# Zahlungen in deiner App annehmen 4240 4241\`\`\`anim 4242payment-funnel 4243\`\`\` 4244 4245Mit Coderblock kannst du echte Zahlungen (Einmalzahlungen und Abos) zu deiner App hinzufügen, indem du einfach im Chat danach fragst. Die Integration nutzt **Stripe**: im Test funktioniert sie sofort ohne Konfiguration, und beim Go-Live gehen die Einnahmen direkt auf dein **eigenes dediziertes Konto** â Coderblock erhebt keine zusätzlichen Gebühren. 4246 4247## Schnellstart 4248 4249Sag dem Chat, was du verkaufen willst, zum Beispiel: 4250 4251\`\`\` 4252Füge ein Premium-Abo für 9,90 â¬/Monat hinzu und schalte den Berichte-Bereich nur für Abonnenten frei 4253\`\`\` 4254 4255\`\`\` 4256Verkaufe mein E-Book für 19 ⬠mit einem âJetzt kaufen"-Button 4257\`\`\` 4258 4259Die KI übernimmt alles: sie erstellt die **echten** Produkte und Preise in Stripe, generiert den Checkout und die Erfolg-/Abbruch-Seiten, bereitet die Datenbank für Bestellungen und Abos vor â und der Webhook, der Zahlungen bestätigt, ist bereits aktiv, ohne dass du etwas tun musst. 4260 4261## Null Einrichtung: im Test ist nichts nötig 4262 4263\`\`\`anim 4264golive 4265\`\`\` 4266 4267Buchstäblich nichts: **kein Stripe-Konto, keine Schlüssel, keine Formulare, keine Aktivierung**. Frag im Chat nach Zahlungen, und sie funktionieren: Produkte, Preise und Checkout laufen in einer von Coderblock verwalteten Stripe-Testumgebung, pro Projekt isoliert. Webhooks existieren für dich schlicht nicht: die Plattform kümmert sich darum. 4268 4269**Dein** dediziertes Stripe-Konto entsteht erst, wenn du **echte** Karten belasten willst: unter **Backend â Payments** durchläufst du Stripes geführte Aktivierung (Geschäftsdaten, Bankkonto) â der einzige Schritt, den du je siehst, nur beim Go-Live nötig. Die Einnahmen gehen direkt an dich; Coderblock erhebt keine Gebühren. 4270 4271### Ich habe schon ein Stripe-Konto â kann ich meins nutzen? 4272 4273Ja (fortgeschrittener Modus): sag es der KI, und sie fragt über ein sicheres Formular im Chat nach deinem **Secret Key** (Stripe Dashboard â Developers â API keys; nutze beim Bauen den \`sk_test_...\`). 4274 4275> [!WARNING] Füge deinen geheimen Schlüssel NIEMALS als Chatnac
4275hricht ein. Behandle ihn wie deine Haustürschlüssel: nur das sichere Formular speichert ihn verschlüsselt. 4276 4277Auch in diesem Modus wird der **Webhook** automatisch registriert. 4278 4279## Zahlungen testen 4280 4281Testzahlungen funktionieren sowohl in der **Vorschau** als auch in der **veröffentlichten** App: 4282 4283- Testkarte: \`4242 4242 4242 4242\`, beliebiges zukünftiges Ablaufdatum, beliebiger CVC 4284- Keine echten Belastungen 4285- Sieh Produkte und Status im Tab **Backend â Payments** des Editors; Bestellungen und Abos landen in der Datenbank deiner App 4286 4287## Wie der Mechanismus funktioniert (immer zwei Umgebungen) 4288 4289Deine App hat **zwei parallele Zahlungsumgebungen**, gleichzeitig aktiv: 4290 4291| | TEST-Umgebung | LIVE-Umgebung | 4292|---|---|---| 4293| Wo | Editor-Vorschau (und die veröffentlichte App vor dem Go-Live) | Veröffentlichte App, nach dem Go-Live | 4294| Stripe-Konto | Von Coderblock verwaltete Umgebung, pro Projekt isoliert | **Dein** dediziertes Konto | 4295| Karten | Nur Test (\`4242 4242 4242 4242\`) | Echte Karten | 4296| Einrichtung | Keine | Einmalige geführte Aktivierung | 4297 4298Wichtige Regeln: 4299 4300- **Die Vorschau zahlt IMMER im Test**, auch nach dem Go-Live: du kannst Checkout-Ãnderungen für immer risikofrei testen. Echte Karten funktionieren nur in der veröffentlichten App. 4301- Test- und echte Bestellungen/Abos landen in **denselben Tabellen** deiner Datenbank, aber jede Zeile trägt ein Feld \`livemode\`: \`false\` = Testzahlung, \`true\` = echtes Geld. Du kannst sie immer unterscheiden (und, wenn du willst, Produktionsinhalte nur echten Abos vorbehalten â frag einfach im Chat). 4302- Der **Webhook**, der Zahlungen bestätigt und in deine Datenbank schreibt, ist einzeln und plattformverwaltet: er deckt beide Umgebungen ab, ohne Konfiguration deinerseits. 4303- Die **price ids** im Code deiner App bleiben auch nach dem Go-Live die Test-ids: die Plattform übersetzt sie beim Checkout automatisch in ihre Live-Zwillinge. Null Codeänderungen. 4304 4305## Wo du deine Einnahmen siehst 4306 4307**Backend Manager â Payments** zeigt: aktiven Modus (TEST/LIVE), Webhook-Zustand, Produkte und Preise, kürzliche Zahlungen und Abos â ohne Coderblock zu verlassen. 4308 4309## Häufige Probleme 4310 4311| Fehler | Ursache | Lösung | 4312|---|---|---| 4313| \`PRICE_KEY_MODE_MISMATCH\` | Die price id im Code existiert in der aktiven Umgebung nicht | Frag den Chat: *âerstelle das Produkt neu und aktualisiere die price id"* | 4314| Zahlung erfolgreich, aber keine Bestellung erfasst | Webhook-Ereignis noch nicht verarbeitet | Warte ein paar Sekunden und lade neu; bleibt es bestehen, melde es im Chat | 4315 4316Bereit für echte Karten? Lies [Go-Live](/docs/payments-golive). 4317`,zh:`# å¨ä½ çåºç¨ä¸æ¥åæ¯ä» 4318 4319\`\`\`anim 4320payment-funnel 4321\`\`\` 4322 4323ä½¿ç¨ Coderblockï¼ä½ åªéå¨è天ä¸æåºï¼å°±è½ä¸ºåºç¨æ·»å çå®æ¯ä»ï¼ä¸æ¬¡æ§ä¸è®¢é ï¼ãéæä½¿ç¨ **Stripe**ï¼æµè¯æ¨¡å¼æ éé ç½®å³å¯ç«å³ä½¿ç¨ï¼æ£å¼ä¸çº¿åï¼æ¶å ¥ç´æ¥è¿å ¥ä½ **èªå·±çä¸å±è´¦æ·**ââCoderblock ä¸æ¶åé¢å¤è´¹ç¨ã 4324 4325## å¿«éå¼å§ 4326 4327åè¯èå¤©ä½ æ³åä»ä¹ï¼ä¾å¦ï¼ 4328 4329\`\`\` 4330æ·»å ä¸ä¸ªæ¯æ 9.90 ⬠ç Premium 订é ï¼å¹¶ä» 为订é è 解éâæ¥è¡¨âé¨å 4331\`\`\` 4332 4333\`\`\` 4334以 19 ⬠åºå®æççµå书ï¼é ä¸ä¸ªâç«å³è´ä¹°âæé® 4335\`\`\` 4336 4337AI ä¼å¤çä¸åï¼å¨ Stripe ä¸å建**çå®ç**产åä¸ä»·æ ¼ï¼çæç»è´¦é¡µä¸æå/åæ¶é¡µï¼ä¸ºè®¢åå订é åå¤å¥½æ°æ®åºââèä¸ç¡®è®¤æ¯ä»ç webhook å·²ç»å°±ç»ªï¼ä½ æ éä»»ä½æä½ã 4338 4339## é¶é ç½®ï¼æµè¯æ¨¡å¼æ éä»»ä½ä¸è¥¿ 4340 4341\`\`\`anim 4342golive 4343\`\`\` 4344 4345ççä»ä¹é½ä¸ç¨ï¼**æ é Stripe è´¦æ·ãæ éå¯é¥ãæ é表åãæ éæ¿æ´»**ãå¨è天ä¸è¯·æ±æ¯ä»å³å¯ä½¿ç¨ï¼äº§åãä»·æ ¼ä¸ç»è´¦è¿è¡å¨ç± Coderblock æ管ãæ项ç®é离ç Stripe æµè¯ç¯å¢ä¸ãå¯¹ä½ èè¨ webhook æ ¹æ¬ä¸åå¨ï¼ç±å¹³å°å¤çã 4346 4347åªæå½ä½ æ³æ¶å**çå®**å¡ä»æ¬¾æ¶ï¼**ä½ **çä¸å± Stripe è´¦æ·æä¼è¯çï¼å¨ **Backend â Payments** ä¸å®æ Stripe çå¼å¯¼å¼æ¿æ´»ï¼ä¼ä¸ä¿¡æ¯ãé¶è¡è´¦æ·ï¼ââè¿æ¯ä½ å¯ä¸ä¼çå°çæ¥éª¤ï¼ä» å¨ä¸çº¿æ¶éè¦ãæ¶å ¥ç´æ¥å½ä½ ï¼Coderblock ä¸æ¶åä»»ä½è´¹ç¨ã 4348
4349### æå·²ç»æ Stripe è´¦æ·ââè½ç¨æèªå·±çåï¼ 4350 4351å¯ä»¥ï¼é«çº§æ¨¡å¼ï¼ï¼åè¯ AIï¼å®ä¼éè¿è天ä¸çå®å ¨è¡¨ååä½ ç´¢å **Secret Key**ï¼Stripe Dashboard â Developers â API keysï¼å¼åæ¶ä½¿ç¨ \`sk_test_...\`ï¼ã 4352 4353> [!WARNING] åå¿æä½ çå¯é¥ä½ä¸ºè天æ¶æ¯ç²è´´ãæå®å½ä½ä½ 家çé¥åï¼åªæå®å ¨è¡¨åæä¼å å¯åå¨å®ã 4354 4355å¨è¿ç§æ¨¡å¼ä¸ï¼**webhook** åæ ·ä¼èªå¨æ³¨åã 4356 4357## æµè¯æ¯ä» 4358 4359æµè¯æ¯ä»å¨**é¢è§**å**å·²åå¸**çåºç¨ä¸é½å¯ç¨ï¼ 4360 4361- æµè¯å¡ï¼\`4242 4242 4242 4242\`ï¼ä»»æå°æ¥çæææï¼ä»»æ CVC 4362- ä¸äº§ççå®æ£æ¬¾ 4363- å¨ç¼è¾å¨ç **Backend â Payments** æ ç¾æ¥ç产åä¸ç¶æï¼è®¢åå订é ä¼è¿å ¥ä½ åºç¨çæ°æ®åº 4364 4365## æºå¶å¦ä½è¿ä½ï¼å§ç»ä¸¤ä¸ªç¯å¢ï¼ 4366 4367ä½ çåºç¨æ¥æ**两个并è¡çæ¯ä»ç¯å¢**ï¼åæ¶æ¿æ´»ï¼ 4368 4369| | TEST ç¯å¢ | LIVE ç¯å¢ | 4370|---|---|---| 4371| ä½ç½® | ç¼è¾å¨é¢è§ï¼ä»¥åä¸çº¿åå·²åå¸çåºç¨ï¼ | å·²åå¸çåºç¨ï¼ä¸çº¿ä¹å | 4372| Stripe è´¦æ· | ç± Coderblock æ管ãæ项ç®é离çç¯å¢ | **ä½ **çä¸å±è´¦æ· | 4373| å¡ | ä» æµè¯å¡ï¼\`4242 4242 4242 4242\`ï¼ | çå®å¡ | 4374| é ç½® | æ | ä¸æ¬¡æ§å¼å¯¼æ¿æ´» | 4375 4376éè¦è§åï¼ 4377 4378- **é¢è§å§ç»ä»¥æµè¯æ¹å¼æ¯ä»**ï¼å³ä½¿ä¸çº¿ä¹åä¹æ¯å¦æ¤ï¼ä½ å¯ä»¥æ°¸è¿æ é£é©å°æµè¯ç»è´¦æ´æ¹ãçå®å¡åªå¨å·²åå¸çåºç¨ä¸çæã 4379- æµè¯ä¸çå®ç订å/订é è¿å ¥ä½ æ°æ®åºç**åä¸æ¹è¡¨**ï¼ä½æ¯è¡é½å¸¦æ \`livemode\` å段ï¼\`false\` = æµè¯æ¯ä»ï¼\`true\` = çå®èµéãä½ å§ç»è½åºåå®ä»¬ï¼å¦ææ¿æï¼è¿å¯ä»¥åªå¯¹çå®è®¢é å¼æ¾ç产å 容ââå¨è天ä¸æåºå³å¯ï¼ã 4380- 确认æ¯ä»å¹¶åå ¥æ°æ®åºç **webhook** æ¯å¯ä¸çãç±å¹³å°æ管çï¼å®è¦ç两个ç¯å¢ï¼ä½ æ éä»»ä½é ç½®ã 4381- åºç¨ä»£ç ä¸ç **price id** å³ä½¿ä¸çº¿åä»æ¯æµè¯çï¼å¹³å°ä¼å¨ç»è´¦æ¶èªå¨å°å ¶è½¬æ¢ä¸ºå¯¹åºç live çæ¬ãé¶ä»£ç æ´æ¹ã 4382 4383## å¨åªéæ¥çä½ çæ¶å ¥ 4384 4385**Backend Manager â Payments** ä¼æ¾ç¤ºï¼å½å模å¼ï¼TEST/LIVEï¼ãwebhook å¥åº·ç¶åµã产åä¸ä»·æ ¼ãè¿ææ¯ä»ä¸è®¢é ââæ éç¦»å¼ Coderblockã 4386 4387## 常è§é®é¢ 4388 4389| é误 | åå | è§£å³ | 4390|---|---|---| 4391| \`PRICE_KEY_MODE_MISMATCH\` | 代ç ä¸ç price id å¨å½åç¯å¢ä¸ä¸åå¨ | 让è天ï¼*âéæ°å建产å并æ´æ° price idâ* | 4392| æ¯ä»æåä½æ²¡æè®°å½è®¢å | webhook äºä»¶å°æªå¤ç | çå ç§å¹¶å·æ°ï¼è¥ä»åå¨ï¼å¨è天ä¸åé¦ | 4393 4394åå¤å¥½æ¶åçå®å¡ä»æ¬¾äºåï¼é 读[æ£å¼ä¸çº¿](/docs/payments-golive)ã 4395`},"payments-golive":{es:`# Pasar a producción con los pagos 4396 4397\`\`\`anim 4398golive 4399\`\`\` 4400 4401Una vez que tu app funciona con pagos de test, pasar a ingresos reales lleva minutos. Es el único momento que necesita configuración â y es guiado. 4402 4403## Cómo funciona el paso a producción 4404 4405Al pasar a producción, Coderblock crea **tu propia cuenta de Stripe dedicada** (las pruebas corrÃan en un entorno gestionado por la plataforma): la cuenta es tuya, los ingresos llegan a tu cuenta bancaria y obtienes tu propio panel de Stripe. 4406 44071. **Inicia la activación** â en **Backend â Payments** haz clic en "Activar pagos reales": un breve formulario (email y paÃs) crea tu cuenta de Stripe dedicada. 44082. **Completa la verificación de Stripe** â se abre el flujo guiado oficial de Stripe: datos del negocio o personales, documento de identidad, cuenta bancaria. Es el KYC exigido legalmente a quien cobra tarjetas â se hace una vez. 44093. **Productos y precios: automático** â Coderblock copia por sà mismo tus productos y precios de test a la nueva cuenta y mapea los price id. **El código de tu app no camb
4409ia**: el checkout usa automáticamente los precios live. 44104. **Páginas legales** â Stripe exige que tu app publicada tenga polÃtica de privacidad, términos de servicio y polÃtica de reembolso. Pide al chat que las añada si faltan. 44115. **Prueba final con una tarjeta real** â haz una pequeña compra real (puedes reembolsarla enseguida desde tu panel de Stripe) y verifica: el pago en tu panel de Stripe, el pedido registrado en la app. 4412 4413## Impuestos y facturación: lo que debes saber 4414 4415Coderblock **no es el vendedor** de tus productos: cobras a los clientes directamente en tu propia cuenta de Stripe, asà que **el IVA/impuestos y las facturas son tu responsabilidad**, como para cualquier negocio. 4416 4417- **[Stripe Tax](https://stripe.com/tax)**: cálculo automático de IVA/impuestos por paÃs â actÃvalo desde el panel, recomendado si vendes internacionalmente 4418- **Facturas**: Stripe puede emitir recibos automáticos; la facturación electrónica de cada paÃs puede requerir herramientas dedicadas (pide al chat que integre una vÃa API) 4419- Ante la duda, habla con tu asesor antes de pasar a producción 4420 4421## ¿Cuándo cambia, exactamente? 4422 4423No hay un interruptor que accionar: cuando Stripe termina de verificar tu cuenta, avisa a Coderblock automáticamente y **desde ese momento los checkout de la app publicada corren en tu cuenta** â tarjetas reales, ingresos a tu banco. Puedes seguir el estado en **Backend â Payments**. 4424 4425## ¿Y los pagos de test? 4426 4427Siguen funcionando exactamente igual, en paralelo â para siempre: **la vista previa del editor siempre paga en test** con la tarjeta \`4242 4242 4242 4242\`, incluso tras pasar a producción, para que sigas experimentando sin riesgo. Las filas de test en tu base de datos se marcan \`livemode = false\`, las reales \`livemode = true\`. No hay nada que "cambiar". 4428`,fr:`# Passer en live avec les paiements 4429 4430\`\`\`anim 4431golive 4432\`\`\` 4433 4434Une fois que ton app fonctionne avec des paiements de test, passer aux revenus réels prend quelques minutes. C'est le seul moment qui nécessite une configuration â et c'est guidé. 4435 4436## Comment fonctionne le passage en live 4437 4438Au passage en live, Coderblock crée **ton propre compte Stripe dédié** (les tests tournaient sur un environnement géré par la plateforme) : le compte t'appartient, les revenus arrivent sur ton compte bancaire, et tu obtiens ton propre tableau de bord Stripe. 4439 44401. **Lance l'activation** â dans **Backend â Payments** clique sur « Activer les paiements réels » : un court formulaire (e-mail et pays) crée ton compte Stripe dédié. 44412. **Complète la vérification de Stripe** â le flux guidé officiel de Stripe s'ouvre : infos entreprise ou personnelles, pièce d'identité, compte bancaire. C'est le KYC légalement requis pour quiconque encaisse des cartes â fait une seule fois. 44423. **Produits et prix : automatique** â Coderblock copie lui-même tes produits et prix de test vers le nouveau compte et mappe les price id. **Le code de ton app ne change pas** : le checkout utilise automatiquement les prix live. 44434. **Pages légales** â Stripe exige que ton app publiée ait une politique de confidentialité, des conditions d'utilisation et une politique de remboursement. Demande au chat de les ajouter si elles manquent. 44445. **Test final avec une vraie carte** â fais un petit achat réel (tu peux le rembourser aussitôt depuis ton tableau de bord Stripe) et vérifie : le paiement dans ton tableau de bord Stripe, la commande enregistrée dans l'app. 4445 4446## Taxes et facturation : ce que tu dois savoir 4447 4448Coderblock **n'est pas le vendeur** de tes produits : tu encaisses directement les clients sur ton propre compte Stripe, donc **la TVA/taxes et les factures sont ta responsabilité**, comme pour toute entreprise. 4449 4450- **[Stripe Tax](https://stripe.com/tax)** : calcul automatique de la TVA/taxes par pays â active-le depuis le tableau de bord, recommandé si tu vends à l'international 4451- **Factures** : Stripe peut émettre des reçus automatiques ; la facturation électronique propre à chaque pays peut nécessiter des outils dédiés (demande au chat d'en intégrer un via API) 4452- En cas de doute, parle à ton comptable avant de passer en live 4453 4454## Quand ça bascule, exactement ? 4455 4456Il n'y a pas d'interrupteur à actionner : quand Stripe finit de vérifier ton compte, il prévient Coderblock automatiquement et **à partir de ce moment les checkouts de l'app publiée tournent sur ton compte** â vraies cartes, revenus vers ta banque. Tu peux suivre le statut dans **Backend â Payments**. 4457 4458## Et les paiements de test ? 4459 4460Ils continuent de fonctionner exactement comme avant, en parallèle â pour toujours : **l'aperçu de l'éditeur paie toujours en test** avec la carte \`4242 4242 4242 4242\`, même après le passage en live, pour que tu continues à expérimenter sans risque. Les lignes de test dans ta base de données sont marquées \`livemode = false\`, les vraies \`livemode = true\`. Il n'y a rien à « basculer ». 4461`,de:`# Mit Zahlungen live gehen 4462 4463\`\`\`anim 4464golive 4465\`\`\` 4466 4467Sobald deine App mit Testzahlungen funktioniert, dauert der Wechsel zu echten Einnahmen nur Minuten. Es ist der einzige Moment, der Konfiguration braucht â und er ist geführt. 4468 4469## Wie der Go-Live funktioniert 4470 4471Beim Go-Live erstellt Coderblock **dein eigenes dediziertes Stripe-Konto** (die Tests liefen auf einer plattformverwalteten Umgebung): das Konto gehört dir, die Einnahmen landen auf deinem Bankkonto, und du erhältst dein eigenes Stripe-Dashboard. 4472 44731. **Starte die Aktivierung** â klicke in **Backend â Payments** auf âEchte Zahlungen aktivieren": ein kurzes Formular (E-Mail und Land) erstellt dein dediziertes Stripe-Konto. 44742. **SchlieÃe Stripes Verifizierung ab** â der offizielle geführte Ablauf von Stripe öffnet sich: Geschäfts- oder persönliche Daten, Ausweisdokument, Bankkonto. Das ist das gesetzlich vorgeschriebene KYC für alle, die Karten belasten â einmalig. 44753. **Produkte und Preise: automatisch** â Coderblock kopiert deine Testprodukte und -preise selbst in das neue Konto und mappt die price ids. **Der Code deiner App ändert sich nicht**: der Checkout nutzt automatisch die Live-Preise. 44764. **Rechtliche Seiten** â Stripe verlangt, dass deine veröffentlichte App eine Datenschutzerklärung, Nutzungsbedingungen und eine Rückerstattungsrichtlinie hat. Bitte den Chat, sie zu ergänzen, falls sie fehlen. 44775. **Abschlusstest mit echter Karte** â mache einen kleinen echten Kauf (du kannst ihn sofort aus deinem Stripe-Dashboard erstatten) und prüfe: die Zahlung in deinem Stripe-Dashboard, die Bestellung in der App erfasst. 4478 4479## Steuern und Rechnungen: was du wissen musst 4480
4481Coderblock ist **nicht der Verkäufer** deiner Produkte: du belastest die Kunden direkt auf deinem eigenen Stripe-Konto, also **liegen MwSt./Steuern und Rechnungen in deiner Verantwortung**, wie bei jedem Unternehmen. 4482 4483- **[Stripe Tax](https://stripe.com/tax)**: automatische MwSt./Steuerberechnung pro Land â aktiviere es im Dashboard, empfohlen bei internationalem Verkauf 4484- **Rechnungen**: Stripe kann automatische Belege ausstellen; die länderspezifische E-Rechnung kann eigene Tools erfordern (bitte den Chat, eines per API zu integrieren) 4485- Im Zweifel sprich vor dem Go-Live mit deinem Steuerberater 4486 4487## Wann schaltet es genau um? 4488 4489Es gibt keinen Schalter: wenn Stripe die Verifizierung deines Kontos abschlieÃt, benachrichtigt es Coderblock automatisch, und **ab diesem Moment laufen die Checkouts der veröffentlichten App auf deinem Konto** â echte Karten, Einnahmen auf dein Bankkonto. Den Status verfolgst du unter **Backend â Payments**. 4490 4491## Und die Testzahlungen? 4492 4493Sie funktionieren weiter genau wie zuvor, parallel â für immer: **die Editor-Vorschau zahlt immer im Test** mit der Karte \`4242 4242 4242 4242\`, auch nach dem Go-Live, sodass du risikofrei weiter experimentieren kannst. Testzeilen in deiner Datenbank sind mit \`livemode = false\` markiert, echte mit \`livemode = true\`. Es gibt nichts âumzuschalten". 4494`,zh:`# 让æ¯ä»æ£å¼ä¸çº¿ 4495 4496\`\`\`anim 4497golive 4498\`\`\` 4499 4500ä¸æ¦ä½ çåºç¨å¨æµè¯æ¯ä»ä¸æ£å¸¸å·¥ä½ï¼åæ¢å°çå®æ¶å ¥åªéå åéãè¿æ¯å¯ä¸éè¦é ç½®çæ¶å»ââèä¸æå¼å¯¼ã 4501 4502## ä¸çº¿å¦ä½å·¥ä½ 4503 4504ä¸çº¿æ¶ï¼Coderblock ä¼å建**ä½ èªå·±çä¸å± Stripe è´¦æ·**ï¼æ¤åæµè¯è¿è¡å¨å¹³å°æ管çç¯å¢ä¸ï¼ï¼è´¦æ·å½ä½ ææï¼æ¶å ¥è¿å ¥ä½ çé¶è¡è´¦æ·ï¼ä½ ä¹ä¼æ¥æèªå·±ç Stripe 仪表çã 4505 45061. **å¼å§æ¿æ´»** ââ å¨ **Backend â Payments** ä¸ç¹å»âå¯ç¨çå®æ¯ä»âï¼ä¸ä¸ªç®çç表åï¼é®ç®±ä¸å½å®¶ï¼ä¼åå»ºä½ çä¸å± Stripe è´¦æ·ã 45072. **å®æ Stripe çéªè¯** ââ æå¼ Stripe å®æ¹å¼å¯¼æµç¨ï¼ä¼ä¸æ个人信æ¯ã身份è¯ä»¶ãé¶è¡è´¦æ·ãè¿æ¯å¯¹ä»»ä½æ¶å¡è ä¾æ³è¦æ±ç KYCââåªéä¸æ¬¡ã 45083. **产åä¸ä»·æ ¼ï¼èªå¨** ââ Coderblock ä¼èªè¡æä½ çæµè¯äº§åä¸ä»·æ ¼å¤å¶å°æ°è´¦æ·ï¼å¹¶æ å° price idã**ä½ åºç¨ç代ç ä¸ä¼æ¹å**ï¼ç»è´¦ä¼èªå¨ä½¿ç¨ live ä»·æ ¼ã 45094. **æ³å¾é¡µé¢** ââ Stripe è¦æ±ä½ å·²åå¸çåºç¨å ·å¤éç§æ¿çãæå¡æ¡æ¬¾åé款æ¿çãå¦ç¼ºå¤±ï¼è®©èå¤©å¸®ä½ æ·»å ã 45105. **ç¨çå®å¡åæç»æµè¯** ââ è¿è¡ä¸ç¬å°é¢çå®è´ä¹°ï¼å¯ç«å³å¨ Stripe 仪表çé款ï¼å¹¶æ ¸å®ï¼æ¯ä»åºç°å¨ä½ ç Stripe 仪表çï¼è®¢åè®°å½å¨åºç¨ä¸ã 4511 4512## ç¨å¡ä¸å¼ç¥¨ï¼ä½ éè¦ç¥éç 4513 4514Coderblock **ä¸æ¯**ä½ äº§åçéå®æ¹ï¼ä½ å¨èªå·±ç Stripe è´¦æ·ä¸ç´æ¥å客æ·æ¶æ¬¾ï¼å æ¤**å¢å¼ç¨/éå®ç¨ä¸å票ç±ä½ è´è´£**ï¼ä¸ä»»ä½ä¼ä¸ä¸æ ·ã 4515 4516- **[Stripe Tax](https://stripe.com/tax)**ï¼æå½å®¶èªå¨è®¡ç®å¢å¼ç¨/éå®ç¨ââå¨ä»ªè¡¨çä¸å¯ç¨ï¼è¥ä½ é¢åå½é éå®ï¼æ¨èä½¿ç¨ 4517- **å票**ï¼Stripe å¯å¼å ·èªå¨æ¶æ®ï¼åå½ç¹å®ççµåå票å¯è½éè¦ä¸é¨å·¥å ·ï¼è®©è天éè¿ API éæä¸ä¸ªï¼ 4518- è¥æçé®ï¼ä¸çº¿å请å¨è¯¢ä½ çä¼è®¡ 4519 4520## å°åºä»ä¹æ¶ååæ¢ï¼ 4521 4522没æéè¦æ¨å¨çå¼å ³ï¼å½ Stripe å®æå¯¹ä½ è´¦æ·çéªè¯åï¼ä¼èªå¨éç¥ Coderblockï¼**ä»é£ä¸å»èµ·ï¼å·²åå¸åºç¨çç»è´¦ä¾¿å¨ä½ çè´¦æ·ä¸è¿è¡**ââçå®å¡ï¼æ¶å ¥è¿å ¥ä½ çé¶è¡ãä½ å¯ä»¥å¨ **Backend â Payments** ä¸è·è¸ªç¶æã 4523 4524## é£æµè¯æ¯ä»å¢ï¼ 4525 4526å®ä»¬ä¼ä¸å¦æ¢å¾å°å¹¶è¡è¿è¡ââæ°¸è¿å¦æ¤ï¼**ç¼è¾å¨é¢è§å§ç»ä»¥æµè¯æ¹å¼æ¯ä»**ï¼ä½¿ç¨å¡ \`4242 4242 4242 4242\`ï¼å³ä½¿ä¸çº¿ä¹åä¹æ¯å¦æ¤ï¼è®©ä½ å¯ä»¥æ é£é©å°ç»§ç»è¯éªãæ°æ®åºä¸çæµè¯è¡æ 记为 \`livemode = false\`ï¼çå®è¡ä¸º \`livemode = true\`ã没æä»ä¹éè¦âåæ¢âã 4527`},"stripe-integration":{es:`# Integración de Stripe 4528 4529\`\`\`anim 4530payment-funnel 4531\`\`\` 4532 4533Acepta pagos en tu app con **Stripe**, el procesador de pagos más popular del mundo. Coderblock
4533incluye un flujo guiado por IA que crea automáticamente tus productos y precios en Stripe, generando código con IDs reales y funcionales. 4534 4535> [!NOTE] Para las **Web apps** (runtime Supabase) los pagos son aún más simples: cero configuración en test y una cuenta dedicada solo al pasar a producción â ver [Aceptar pagos](/docs/payments). Esta página sigue siendo la referencia para el modo avanzado "trae tu propia clave" (BYOK) y los runtimes Python/Node. 4536 4537## Cómo funciona 4538 4539Cuando pides a la IA añadir pagos, el sistema sigue un flujo automatizado: 4540 45411. **La IA pide tu Secret Key** â aparece un campo enmascarado en el chat 45422. **Pegas la clave** â se guarda como secreto del proyecto 45433. **La IA crea productos en Stripe** â productos, precios y payment links se crean directamente en tu cuenta de Stripe 45444. **El código generado usa IDs reales** â sin placeholders, todo funciona de inmediato 4545 4546> [!TIP] Esto significa que no necesitas ir manualmente al panel de Stripe a crear productos: la IA lo hace todo automáticamente. 4547 4548--- 4549 4550## Configuración 4551 4552### 1. Crea una cuenta de Stripe 4553 4554RegÃstrate en [stripe.com](https://stripe.com) si aún no tienes cuenta. Stripe ofrece un entorno de test completo donde puedes probarlo todo sin procesar pagos reales. 4555 4556### 2. Obtén las claves API 4557 4558Desde el [Stripe Dashboard â Developers â API Keys](https://dashboard.stripe.com/apikeys), copia: 4559 4560- **Secret key** (empieza por \`sk_test_...\`): la clave principal que necesita la IA 4561- **Publishable key** (empieza por \`pk_test_...\`): para el frontend 4562 4563> [!INFO] Usa siempre claves de **test** para el desarrollo. Cuando estés listo para producción, reemplázalas por claves **live**. 4564 4565### 3. Introduce las claves en Coderblock 4566 4567Tienes dos opciones: 4568 4569**Opción A (recomendada): vÃa Chat IA** 4570Simplemente pide a la IA que añada Stripe; aparecerá automáticamente un campo en el chat: 4571\`\`\` 4572Añade pagos con Stripe a mi proyecto 4573\`\`\` 4574 4575**Opción B: manualmente desde Ajustes** 4576Ve a **Ajustes â Secretos** de tu proyecto y añade: 4577- \`STRIPE_SECRET_KEY\` â \`sk_test_...\` 4578- \`STRIPE_PUBLISHABLE_KEY\` â \`pk_test_...\` 4579 4580--- 4581 4582## Qué puedes hacer 4583 4584### Pagos únicos 4585 4586Venta de un producto o servicio único. Ejemplo: 4587 4588\`\`\` 4589Crea una página de checkout para vender un curso online por 49 ⬠4590\`\`\` 4591 4592La IA creará: 4593- Un producto "Curso online" en Stripe 4594- Un precio de 49,00 ⬠(único) 4595- El código de checkout que redirige a Stripe 4596- Páginas de éxito y cancelación 4597 4598### Suscripciones recurrentes 4599 4600Planes con facturación mensual o anual. Ejemplo: 4601 4602\`\`\` 4603Añade suscripciones con 3 planes: Free, Pro a 19 â¬/mes, Business a 49 â¬/mes 4604\`\`\` 4605 4606La IA creará: 4607- 3 productos en Stripe (Free, Pro, Business) 4608- Precios recurrentes (mensuales) para cada plan 4609- Una página de precios con comparación de planes 4610- El backend para gestionar el estado de la suscripción 4611- Webhooks para actualizaciones en tiempo real 4612 4613### Payment Link (lo más simple) 4614 4615Si solo quieres un enlace de pago sin código personalizado: 4616 4617\`\`\` 4618Crea un Stripe Payment Link para un producto de 29 ⬠4619\`\`\` 4620 4621La IA creará el producto y el precio en Stripe, y devolverá una URL lista para usar (p. ej. \`https://buy.stripe.com/xxx\`) que puedes pegar donde quieras. 4622 4623### Stripe Checkout (alojado) 4624 4625La solución más rápida para un checkout completo: 4626 4627\`\`\` 4628Integra Stripe Checkout para mi e-commerce con carrito 4629\`\`\` 4630 4631Stripe Checkout es una página de pago alojada por Stripe: gestiona automáticamente tarjetas, Apple Pay, Google Pay y el cumplimiento PCI. 4632 4633--- 4634 4635## Webhooks 4636 4637Los webhooks te permiten recibir notificaciones en tiempo real de Stripe (pago completado, suscripción cancelada, etc.). 4638 4639### Configuración 4640 4641Después de que la IA genere el código del webhook, debes registrar la URL en el panel de Stripe: 4642 46431. Ve a [Stripe Dashboard â Developers â Webhooks](https://dashboard.stripe.com/webhooks) 46442. Haz clic en **"Add endpoint"** 46453. Introduce la URL de tu proyecto: \`https://{tu-id}.coderblock.app/api/payments/webhook\` 46464. Selecciona los eventos a recibir (recomendados: \`checkout.session.completed\`, \`invoice.payment_succeeded\`, \`customer.subscription.deleted\`) 46475. Copia el **Webhook Secret** y añádelo como secreto del proyecto: \`STRIPE_WEBHOOK_SECRET\` 4648 4649> [!WARNING] La URL del webhook debe ser la de **producción** (\`.coderblock.app\`), no la de vista previa (\`.coderblock.dev\`). Los webhooks no funcionan con la vista previa porque Stripe no puede alcanzar la URL de desarrollo. 4650 4651--- 4652 4653## Web app Supabase (Edge Functions) 4654 4655En los proyectos con runtime **Supabase**, los pagos se gestionan con dos Edge Functions de Deno en lugar de un servidor backend. Es el patrón validado (estilo Lovable), configurado automáticamente por la IA mediante la skill \`add-stripe-payments-supabase\`. 4656 4657- \`create-checkout\` (\`verify_jwt = true\`) â crea la Stripe Checkout Session y devuelve su URL. Funciona tanto para pagos **únicos** (\`mode: "payment"\`) como para **suscripciones** (\`mode: "subscription"\`). 4658- \`stripe-webhook\` (\`verify_jwt = false\`) â verifica la firma de Stripe y registra pedidos/suscripciones con el cliente service-role. **El webhook es la única fuente de verdad** de que el pago ocurrió â nunca lo confirmes en el lado del cliente. 4659 4660### Secretos necesarios (recogidos en el chat vÃa HIL) 4661 4662Cuando pides a la IA añadir pagos, aparecen campos seguros Human-in-the-Loop en el chat para pegar los secretos. Se guardan y propagan automáticamente como **secretos de Supabase Edge Function** (\`Deno.env.get\`): 4663 4664| Secreto | Dónde encontrarlo | 4665|--------|------------------| 4666| \`STRIPE_SECRET_KEY\` | Stripe Dashboard â Developers â API keys (\`sk_test_â¦\` en test) | 4667| \`STRIPE_WEBHOOK_SECRET\` | El signing secret de tu endpoint de webhook (\`whsec_â¦\`), ver abajo | 4668 46694. Stripe muestra un **Signing secret** (\`whsec_â¦\`): pégalo en el campo HIL \`STRIPE_WEBHOOK_SECRET\` del chat. 4670 4671> [!TIP] A diferencia del runtime Python, el webhook de Supabase es alcanzable por Stripe incluso antes del despliegue a producción, porque la función vive en tu proyecto Supabase. 4672 4673### Frontend 4674 4675\`\`\`ts 4676import { startCheckout, loadActiveSubscription } from "@/integrations/supabase/payments"; 4677 4678await startCheckout({ priceId: "price_oneTime" }); // único 4679await startCheckout({ priceId: "price_monthly", mode: "subscription" }); // suscripción 4680 4681const sub = await loadActiveSubscription();
4681 // null si no está suscrito â restringe funciones con sub?.status 4682\`\`\` 4683 4684Las tablas \`orders\` y \`subscriptions\` (migración \`0003_payments.sql\`) están protegidas con RLS: cada usuario lee solo sus propias filas, y solo el webhook (service-role) las escribe. 4685 4686--- 4687 4688## Ejemplos de prompts 4689 4690| Objetivo | Prompt | 4691|------|--------| 4692| Venta única | *"Crea un checkout para vender una camiseta por 25 â¬"* | 4693| Suscripción SaaS | *"Añade planes de suscripción Free/Pro/Enterprise con Stripe"* | 4694| Payment link | *"Genera un Payment Link para un producto de 99 â¬"* | 4695| Donación | *"Añade un botón de donación con importe personalizado"* | 4696| E-commerce | *"Integra Stripe Checkout para el carrito de mi tienda"* | 4697| Portal de cliente | *"Añade un portal donde los usuarios gestionen su suscripción"* | 4698 4699--- 4700 4701## Probar los pagos 4702 4703En modo test (\`sk_test_\`, \`pk_test_\`), usa estas tarjetas falsas: 4704 4705| Escenario | Número de tarjeta | 4706|----------|------------| 4707| Pago correcto | \`4242 4242 4242 4242\` | 4708| Pago rechazado | \`4000 0000 0000 0002\` | 4709| Autenticación 3D Secure | \`4000 0025 0000 3155\` | 4710| Fondos insuficientes | \`4000 0000 0000 9995\` | 4711| Tarjeta caducada | \`4000 0000 0000 0069\` | 4712 4713Usa cualquier fecha futura y cualquier CVC de 3 dÃgitos. 4714 4715--- 4716 4717## Claves API 4718 4719| Clave | Prefijo | Dónde se usa | Tipo | 4720|-----|--------|-----------|------| 4721| Secret Key | \`sk_test_\` / \`sk_live_\` | Backend | Secreta (nunca expuesta) | 4722| Publishable Key | \`pk_test_\` / \`pk_live_\` | Frontend | Pública (segura en el navegador) | 4723| Webhook Secret | \`whsec_\` | Backend | Secreta | 4724 4725> [!DANGER] Nunca compartas la **Secret Key** ni el **Webhook Secret**. Usa siempre variables de entorno, nunca escritas directamente en el código. 4726 4727--- 4728 4729## Preguntas frecuentes 4730 4731**¿Puedo usar PayPal en lugar de Stripe?** 4732Actualmente Coderblock solo admite Stripe como procesador de pagos. Stripe cubre más de 135 monedas y todos los métodos de pago principales. 4733 4734**¿Cuánto cuesta Stripe?** 4735Stripe cobra un 2,9% + 0,25 ⬠por transacción (estándar europeo). No hay costes fijos mensuales. 4736 4737**¿Puedo pasar de test a live?** 4738SÃ, basta con reemplazar las claves de test por las claves live en los Ajustes â Secretos del proyecto y volver a desplegar. 4739 4740**¿La IA puede gestionar reembolsos?** 4741La IA puede generar código para reembolsos vÃa la API de Stripe, pero también puedes procesar reembolsos directamente desde el panel de Stripe. 4742`,fr:`# Intégration Stripe 4743 4744\`\`\`anim 4745payment-funnel 4746\`\`\` 4747 4748Accepte les paiements dans ton app avec **Stripe**, le processeur de paiement le plus répandu au monde. Coderblock inclut un flux guidé par IA qui crée automatiquement tes produits et prix sur Stripe, en générant du code avec de vrais IDs fonctionnels. 4749 4750> [!NOTE] Pour les **Web apps** (runtime Supabase), les paiements sont encore plus simples : zéro configuration en test et un compte dédié seulement au passage en production â voir [Accepter les paiements](/docs/payments). Cette page reste la référence pour le mode avancé « apporte ta propre clé » (BYOK) et les runtimes Python/Node. 4751 4752## Comment ça marche 4753 4754Quand tu demandes à l'IA d'ajouter des paiements, le système suit un flux automatisé : 4755 47561. **L'IA demande ta Secret Key** â un champ masqué apparaît dans le chat 47572. **Tu colles la clé** â elle est enregistrée comme secret du projet 47583. **L'IA crée les produits sur Stripe** â produits, prix et payment links sont créés directement sur ton compte Stripe 47594. **Le code généré utilise de vrais IDs** â pas de placeholders, tout marche immédiatement 4760 4761> [!TIP] Cela signifie que tu n'as pas besoin d'aller manuellement dans le dashboard Stripe pour créer des produits : l'IA fait tout automatiquement. 4762 4763--- 4764 4765## Configuration 4766 4767### 1. Crée un compte Stripe 4768 4769Inscris-toi sur [stripe.com](https://stripe.com) si tu n'as pas encore de compte. Stripe offre un environnement de test complet où tu peux tout essayer sans traiter de vrais paiements. 4770 4771### 2. Récupère les clés API 4772 4773Depuis le [Stripe Dashboard â Developers â API Keys](https://dashboard.stripe.com/apikeys), copie : 4774 4775- **Secret key** (commence par \`sk_test_...\`) : la clé principale dont l'IA a besoin 4776- **Publishable key** (commence par \`pk_test_...\`) : pour le frontend 4777 4778> [!INFO] Utilise toujours des clés **test** pour le développement. Quand tu es prêt pour la production, remplace-les par des clés **live**. 4779 4780### 3. Saisis les clés dans Coderblock 4781 4782Tu as deux options : 4783 4784**Option A (recommandée) : via le Chat IA** 4785Demande simplement à l'IA d'ajouter Stripe ; un champ apparaîtra automatiquement dans le chat : 4786\`\`\` 4787Ajoute les paiements Stripe à mon projet 4788\`\`\` 4789 4790**Option B : manuellement depuis les Paramètres** 4791Va dans **Paramètres â Secrets** de ton projet et ajoute : 4792- \`STRIPE_SECRET_KEY\` â \`sk_test_...\` 4793- \`STRIPE_PUBLISHABLE_KEY\` â \`pk_test_...\` 4794 4795--- 4796 4797## Ce que tu peux faire 4798 4799### Paiements uniques 4800 4801Vente d'un produit ou service unique. Exemple : 4802 4803\`\`\` 4804Crée une page de checkout pour vendre un cours en ligne à 49 ⬠4805\`\`\` 4806 4807L'IA créera :
4808- Un produit « Cours en ligne » sur Stripe 4809- Un prix de 49,00 ⬠(unique) 4810- Le code de checkout qui redirige vers Stripe 4811- Des pages de succès et d'annulation 4812 4813### Abonnements récurrents 4814 4815Des offres avec facturation mensuelle ou annuelle. Exemple : 4816 4817\`\`\` 4818Ajoute des abonnements avec 3 offres : Free, Pro à 19 â¬/mois, Business à 49 â¬/mois 4819\`\`\` 4820 4821L'IA créera : 4822- 3 produits sur Stripe (Free, Pro, Business) 4823- Des prix récurrents (mensuels) pour chaque offre 4824- Une page de tarifs avec comparaison des offres 4825- Le backend pour gérer l'état de l'abonnement 4826- Des webhooks pour les mises à jour en temps réel 4827 4828### Payment Link (le plus simple) 4829 4830Si tu veux juste un lien de paiement sans code personnalisé : 4831 4832\`\`\` 4833Crée un Stripe Payment Link pour un produit à 29 ⬠4834\`\`\` 4835 4836L'IA créera le produit et le prix sur Stripe, et renverra une URL prête à l'emploi (p. ex. \`https://buy.stripe.com/xxx\`) que tu peux coller n'importe où. 4837 4838### Stripe Checkout (hébergé) 4839 4840La solution la plus rapide pour un checkout complet : 4841 4842\`\`\` 4843Intègre Stripe Checkout pour le panier de mon e-commerce 4844\`\`\` 4845 4846Stripe Checkout est une page de paiement hébergée par Stripe : elle gère automatiquement les cartes, Apple Pay, Google Pay et la conformité PCI. 4847 4848--- 4849 4850## Webhooks 4851 4852Les webhooks te permettent de recevoir des notifications en temps réel de Stripe (paiement effectué, abonnement annulé, etc.). 4853 4854### Configuration 4855 4856Après que l'IA a généré le code du webhook, tu dois enregistrer l'URL dans le dashboard Stripe : 4857 48581. Va sur [Stripe Dashboard â Developers â Webhooks](https://dashboard.stripe.com/webhooks) 48592. Clique sur **« Add endpoint »** 48603. Saisis l'URL de ton projet : \`https://{ton-id}.coderblock.app/api/payments/webhook\` 48614. Sélectionne les événements à recevoir (recommandés : \`checkout.session.completed\`, \`invoice.payment_succeeded\`, \`customer.subscription.deleted\`) 48625. Copie le **Webhook Secret** et ajoute-le comme secret du projet : \`STRIPE_WEBHOOK_SECRET\` 4863 4864> [!WARNING] L'URL du webhook doit être celle de **production** (\`.coderblock.app\`), pas celle d'aperçu (\`.coderblock.dev\`). Les webhooks ne marchent pas avec l'aperçu car Stripe ne peut pas atteindre l'URL de développement. 4865 4866--- 4867 4868## Web app Supabase (Edge Functions) 4869 4870Sur les projets au runtime **Supabase**, les paiements sont gérés par deux Edge Functions Deno au lieu d'un serveur backend. C'est le pattern validé (style Lovable), configuré automatiquement par l'IA via la skill \`add-stripe-payments-supabase\`. 4871 4872- \`create-checkout\` (\`verify_jwt = true\`) â crée la Stripe Checkout Session et renvoie son URL. Fonctionne pour les paiements **uniques** (\`mode: "payment"\`) comme pour les **abonnements** (\`mode: "subscription"\`). 4873- \`stripe-webhook\` (\`verify_jwt = false\`) â vérifie la signature de Stripe et enregistre les commandes/abonnements avec le client service-role. **Le webhook est la seule source de vérité** que le paiement a eu lieu â ne le confirme jamais côté client. 4874 4875### Secrets requis (collectés dans le chat via HIL) 4876 4877Quand tu demandes à l'IA d'ajouter des paiements, des champs sécurisés Human-in-the-Loop apparaissent dans le chat pour coller les secrets. Ils sont enregistrés et propagés automatiquement comme **secrets de Supabase Edge Function** (\`Deno.env.get\`) : 4878 4879| Secret | Où le trouver | 4880|--------|------------------| 4881| \`STRIPE_SECRET_KEY\` | Stripe Dashboard â Developers â API keys (\`sk_test_â¦\` en test) | 4882| \`STRIPE_WEBHOOK_SECRET\` | Le signing secret de ton endpoint webhook (\`whsec_â¦\`), voir ci-dessous | 4883 48844. Stripe affiche un **Signing secret** (\`whsec_â¦\`) : colle-le dans le champ HIL \`STRIPE_WEBHOOK_SECRET\` du chat. 4885 4886> [!TIP] Contrairement au runtime Python, le webhook Supabase est joignable par Stripe même avant le déploiement en production, car la fonction vit sur ton projet Supabase. 4887 4888### Frontend 4889 4890\`\`\`ts 4891import { startCheckout, loadActiveSubscription } from "@/integrations/supabase/payments"; 4892 4893await startCheckout({ priceId: "price_oneTime" }); // unique 4894await startCheckout({ priceId: "price_monthly", mode: "subscription" }); // abonnement 4895 4896const sub = await loadActiveSubscription(); // null si non abonné â conditionne les fonctions à sub?.status 4897\`\`\` 4898 4899Les tables \`orders\` et \`subscriptions\` (migration \`0003_payments.sql\`) sont protégées par RLS : chaque utilisateur ne lit que ses propres lignes, et seul le webhook (service-role) les écrit. 4900 4901--- 4902 4903## Exemples de prompts 4904 4905| Objectif | Prompt | 4906|------|--------| 4907| Vente unique | *« Crée un checkout pour vendre un t-shirt à 25 ⬠»* | 4908| Abonnement SaaS | *« Ajoute des offres d'abonnement Free/Pro/Enterprise avec Stripe »* | 4909| Payment link | *« Génère un Payment Link pour un produit à 99 ⬠»* | 4910| Don | *« Ajoute un bouton de don avec montant personnalisé »* |
4911| E-commerce | *« Intègre Stripe Checkout pour le panier de ma boutique »* | 4912| Portail client | *« Ajoute un portail où les utilisateurs gèrent leur abonnement »* | 4913 4914--- 4915 4916## Tester les paiements 4917 4918En mode test (\`sk_test_\`, \`pk_test_\`), utilise ces fausses cartes : 4919 4920| Scénario | Numéro de carte | 4921|----------|------------| 4922| Paiement réussi | \`4242 4242 4242 4242\` | 4923| Paiement refusé | \`4000 0000 0000 0002\` | 4924| Authentification 3D Secure | \`4000 0025 0000 3155\` | 4925| Fonds insuffisants | \`4000 0000 0000 9995\` | 4926| Carte expirée | \`4000 0000 0000 0069\` | 4927 4928Utilise n'importe quelle date future et n'importe quel CVC à 3 chiffres. 4929 4930--- 4931 4932## Clés API 4933 4934| Clé | Préfixe | Où utilisée | Type | 4935|-----|--------|-----------|------| 4936| Secret Key | \`sk_test_\` / \`sk_live_\` | Backend | Secrète (jamais exposée) | 4937| Publishable Key | \`pk_test_\` / \`pk_live_\` | Frontend | Publique (sûre dans le navigateur) | 4938| Webhook Secret | \`whsec_\` | Backend | Secrète | 4939 4940> [!DANGER] Ne partage jamais la **Secret Key** ni le **Webhook Secret**. Utilise toujours des variables d'environnement, jamais en dur dans le code. 4941 4942--- 4943 4944## FAQ 4945 4946**Puis-je utiliser PayPal au lieu de Stripe ?** 4947Actuellement, Coderblock ne prend en charge que Stripe comme processeur de paiement. Stripe couvre plus de 135 devises et tous les principaux moyens de paiement. 4948 4949**Combien coûte Stripe ?** 4950Stripe facture 2,9 % + 0,25 ⬠par transaction (standard européen). Il n'y a pas de coûts fixes mensuels. 4951 4952**Puis-je passer de test à live ?** 4953Oui, il suffit de remplacer les clés de test par les clés live dans Paramètres â Secrets du projet, puis de redéployer. 4954 4955**L'IA peut-elle gérer les remboursements ?** 4956L'IA peut générer du code pour les remboursements via l'API Stripe, mais tu peux aussi traiter les remboursements directement depuis le dashboard Stripe. 4957`,de:`# Stripe-Integration 4958 4959\`\`\`anim 4960payment-funnel 4961\`\`\` 4962 4963Nimm Zahlungen in deiner App mit **Stripe** an, dem weltweit verbreitetsten Zahlungsanbieter. Coderblock enthält einen KI-geführten Ablauf, der deine Produkte und Preise automatisch in Stripe anlegt und Code mit echten, funktionierenden IDs generiert. 4964 4965> [!NOTE] Für **Web apps** (Supabase-Runtime) sind Zahlungen noch einfacher: null Konfiguration im Test und ein dediziertes Konto erst beim Go-Live â siehe [Zahlungen annehmen](/docs/payments). Diese Seite bleibt die Referenz für den fortgeschrittenen âbring deinen eigenen Schlüssel"-Modus (BYOK) und die Python-/Node-Runtimes. 4966 4967## Wie es funktioniert 4968 4969Wenn du die KI bittest, Zahlungen hinzuzufügen, folgt das System einem automatisierten Ablauf: 4970 49711. **Die KI fragt nach deinem Secret Key** â ein maskiertes Eingabefeld erscheint im Chat 49722. **Du fügst den Schlüssel ein** â er wird als Projekt-Secret gespeichert 49733. **Die KI legt Produkte in Stripe an** â Produkte, Preise und Payment Links werden direkt auf deinem Stripe-Konto erstellt 49744. **Der generierte Code nutzt echte IDs** â keine Platzhalter, alles funktioniert sofort 4975 4976> [!TIP] Das bedeutet: du musst nicht manuell ins Stripe-Dashboard, um Produkte anzulegen â die KI macht alles automatisch. 4977 4978--- 4979 4980## Einrichtung 4981 4982### 1. Erstelle ein Stripe-Konto 4983 4984Registriere dich auf [stripe.com](https://stripe.com), falls du noch kein Konto hast. Stripe bietet eine komplette Testumgebung, in der du alles ausprobieren kannst, ohne echte Zahlungen zu verarbeiten. 4985 4986### 2. Hole die API-Schlüssel 4987 4988Kopiere im [Stripe Dashboard â Developers â API Keys](https://dashboard.stripe.com/apikeys): 4989 4990- **Secret key** (beginnt mit \`sk_test_...\`): der Hauptschlüssel, den die KI braucht 4991- **Publishable key** (beginnt mit \`pk_test_...\`): für das Frontend 4992 4993> [!INFO] Nutze für die Entwicklung immer **Test**-Schlüssel. Wenn du bereit für den Go-Live bist, ersetze sie durch **Live**-Schlüssel. 4994 4995### 3. Trage die Schlüssel in Coderblock ein 4996 4997Du hast zwei Möglichkeiten: 4998 4999**Option A (empfohlen): über den KI-Chat** 5000Bitte die KI einfach, Stripe hinzuzufügen; ein Eingabefeld erscheint automatisch im Chat: 5001\`\`\` 5002Füge Stripe-Zahlungen zu meinem Projekt hinzu 5003\`\`\` 5004 5005**Option B: manuell über die Einstellungen** 5006Gehe zu **Einstellungen â Secrets** deines Projekts und füge hinzu: 5007- \`STRIPE_SECRET_KEY\` â \`sk_test_...\` 5008- \`STRIPE_PUBLISHABLE_KEY\` â \`pk_test_...\` 5009 5010--- 5011 5012## Was du machen kannst 5013 5014### Einmalzahlungen 5015 5016Verkauf eines einzelnen Produkts oder Dienstes. Beispiel: 5017 5018\`\`\` 5019Erstelle eine Checkout-Seite, um einen Online-Kurs für 49 ⬠zu verkaufen 5020\`\`\` 5021 5022Die KI erstellt: 5023- Ein Produkt âOnline-Kurs" in Stripe 5024- Einen Preis von 49,00 ⬠(einmalig) 5025- Den Checkout-Code, der zu Stripe weiterleitet 5026- Erfolg- und Abbruch-Seiten 5027 5028### Wiederkehrende Abos 5029 5030Pläne mit monatlicher oder jährlicher Abrechnung. Beispiel: 5031 5032\`\`\` 5033Füge Abos mit 3 Plänen hinzu: Free, Pro für 19 â¬/Monat, Business für 49 â¬/Monat 5034\`\`\` 5035 5036Die KI erstellt: 5037- 3 Produkte in Stripe (Free, Pro, Business) 5038- Wiederkehrende (monatliche) Preise für jeden Plan 5039- Eine Preisseite mit Planvergleich 5040- Das Backend zur Verwaltung des Abo-Status 5041- Webhooks für Echtzeit-Updates 5042 5043### Payment Link (am einfachsten) 5044 5045Wenn du nur einen Zahlungslink ohne eigenen Code willst: 5046 5047\`\`\` 5048Erstelle einen Stripe Payment Link für ein Produkt für 29 ⬠5049\`\`\` 5050 5051Die KI erstellt Produkt und Preis in Stripe und gibt eine einsatzbereite URL zurück (z. B. \`https://buy.stripe.com/xxx\`), die du überall einfügen kannst. 5052 5053### Stripe Checkout (gehostet) 5054 5055Die schnellste Lösung für einen kompletten Checkout: 5056 5057\`\`\` 5058Integriere Stripe Checkout für den Warenkorb meines E-Commerce 5059\`\`\` 5060 5061Stripe Checkout ist eine von Stripe gehostete Zahlungsseite: sie verwaltet automatisch Karten, Apple Pay, Google Pay und die PCI-Konformität. 5062 5063--- 5064 5065## Webhooks 5066
5067Webhooks lassen dich Echtzeit-Benachrichtigungen von Stripe empfangen (Zahlung abgeschlossen, Abo gekündigt usw.). 5068 5069### Konfiguration 5070 5071Nachdem die KI den Webhook-Code generiert hat, musst du die URL im Stripe-Dashboard registrieren: 5072 50731. Gehe zu [Stripe Dashboard â Developers â Webhooks](https://dashboard.stripe.com/webhooks) 50742. Klicke auf **âAdd endpoint"** 50753. Gib die URL deines Projekts ein: \`https://{deine-id}.coderblock.app/api/payments/webhook\` 50764. Wähle die zu empfangenden Ereignisse (empfohlen: \`checkout.session.completed\`, \`invoice.payment_succeeded\`, \`customer.subscription.deleted\`) 50775. Kopiere das **Webhook Secret** und füge es als Projekt-Secret hinzu: \`STRIPE_WEBHOOK_SECRET\` 5078 5079> [!WARNING] Die Webhook-URL muss die **Produktions**-URL sein (\`.coderblock.app\`), nicht die Vorschau (\`.coderblock.dev\`). Webhooks funktionieren nicht mit der Vorschau, weil Stripe die Entwicklungs-URL nicht erreichen kann. 5080 5081--- 5082 5083## Supabase-Web-App (Edge Functions) 5084 5085Bei Projekten mit **Supabase**-Runtime werden Zahlungen von zwei Deno Edge Functions statt einem Backend-Server verwaltet. Das ist das validierte (Lovable-artige) Muster, das die KI automatisch über die Skill \`add-stripe-payments-supabase\` konfiguriert. 5086 5087- \`create-checkout\` (\`verify_jwt = true\`) â erstellt die Stripe Checkout Session und gibt ihre URL zurück. Funktioniert für **Einmal**-Zahlungen (\`mode: "payment"\`) und **Abos** (\`mode: "subscription"\`). 5088- \`stripe-webhook\` (\`verify_jwt = false\`) â prüft Stripes Signatur und erfasst Bestellungen/Abos mit dem Service-Role-Client. **Der Webhook ist die einzige Quelle der Wahrheit**, dass die Zahlung stattfand â bestätige sie nie clientseitig. 5089 5090### Benötigte Secrets (im Chat via HIL erfasst) 5091 5092Wenn du die KI bittest, Zahlungen hinzuzufügen, erscheinen sichere Human-in-the-Loop-Felder im Chat, um die Secrets einzufügen. Sie werden automatisch als **Supabase-Edge-Function-Secrets** (\`Deno.env.get\`) gespeichert und propagiert: 5093 5094| Secret | Wo zu finden | 5095|--------|------------------| 5096| \`STRIPE_SECRET_KEY\` | Stripe Dashboard â Developers â API keys (\`sk_test_â¦\` im Test) | 5097| \`STRIPE_WEBHOOK_SECRET\` | Das Signing Secret deines Webhook-Endpoints (\`whsec_â¦\`), siehe unten | 5098 50994. Stripe zeigt ein **Signing secret** (\`whsec_â¦\`): füge es im Chat in das HIL-Feld \`STRIPE_WEBHOOK_SECRET\` ein. 5100 5101> [!TIP] Anders als bei der Python-Runtime ist der Supabase-Webhook für Stripe schon vor dem Produktions-Deploy erreichbar, weil die Funktion auf deinem Supabase-Projekt lebt. 5102 5103### Frontend 5104 5105\`\`\`ts 5106import { startCheckout, loadActiveSubscription } from "@/integrations/supabase/payments"; 5107 5108await startCheckout({ priceId: "price_oneTime" }); // einmalig 5109await startCheckout({ priceId: "price_monthly", mode: "subscription" }); // Abo 5110 5111const sub = await loadActiveSubscription(); // null wenn nicht abonniert â Funktionen an sub?.status koppeln 5112\`\`\` 5113 5114Die Tabellen \`orders\` und \`subscriptions\` (Migration \`0003_payments.sql\`) sind RLS-geschützt: jeder Nutzer liest nur seine eigenen Zeilen, und nur der Webhook (Service-Role) schreibt sie. 5115 5116--- 5117 5118## Prompt-Beispiele 5119 5120| Ziel | Prompt | 5121|------|--------| 5122| Einmalverkauf | *âErstelle einen Checkout, um ein T-Shirt für 25 ⬠zu verkaufen"* | 5123| SaaS-Abo | *âFüge Abo-Pläne Free/Pro/Enterprise mit Stripe hinzu"* | 5124| Payment Link | *âGeneriere einen Payment Link für ein Produkt für 99 â¬"* | 5125| Spende | *âFüge einen Spenden-Button mit frei wählbarem Betrag hinzu"* | 5126| E-Commerce | *âIntegriere Stripe Checkout für meinen Shop-Warenkorb"* | 5127| Kundenportal | *âFüge ein Portal hinzu, in dem Nutzer ihr Abo verwalten"* | 5128 5129--- 5130 5131## Zahlungen testen 5132 5133Im Testmodus (\`sk_test_\`, \`pk_test_\`) nutze diese Testkarten: 5134 5135| Szenario | Kartennummer | 5136|----------|------------| 5137| Erfolgreiche Zahlung | \`4242 4242 4242 4242\` | 5138| Abgelehnte Zahlung | \`4000 0000 0000 0002\` | 5139| 3D-Secure-Authentifizierung | \`4000 0025 0000 3155\` | 5140| Unzureichende Deckung | \`4000 0000 0000 9995\` | 5141| Abgelaufene Karte | \`4000 0000 0000 0069\` | 5142 5143Nutze ein beliebiges zukünftiges Datum und einen beliebigen 3-stelligen CVC. 5144 5145--- 5146 5147## API-Schlüssel 5148 5149| Schlüssel | Präfix | Wo verwendet | Typ | 5150|-----|--------|-----------|------| 5151| Secret Key | \`sk_test_\` / \`sk_live_\` | Backend | Geheim (nie offengelegt) | 5152| Publishable Key | \`pk_test_\` / \`pk_live_\` | Frontend | Ãffentlich (sicher im Browser) | 5153| Webhook Secret | \`whsec_\` | Backend | Geheim | 5154 5155> [!DANGER] Teile niemals den **Secret Key** oder das **Webhook Secret**. Nutze immer Umgebungsvariablen, nie fest im Code. 5156 5157--- 5158 5159## FAQ 5160 5161**Kann ich PayPal statt Stripe nutzen?**
5162Derzeit unterstützt Coderblock nur Stripe als Zahlungsanbieter. Stripe deckt über 135 Währungen und alle wichtigen Zahlungsmethoden ab. 5163 5164**Was kostet Stripe?** 5165Stripe berechnet 2,9 % + 0,25 ⬠pro Transaktion (europäischer Standard). Es gibt keine monatlichen Fixkosten. 5166 5167**Kann ich von Test auf Live wechseln?** 5168Ja, ersetze einfach die Test-Schlüssel durch Live-Schlüssel in den Einstellungen â Secrets des Projekts und deploye neu. 5169 5170**Kann die KI Rückerstattungen abwickeln?** 5171Die KI kann Code für Rückerstattungen über die Stripe-API generieren, aber du kannst Rückerstattungen auch direkt im Stripe-Dashboard vornehmen. 5172`,zh:`# Stripe éæ 5173 5174\`\`\`anim 5175payment-funnel 5176\`\`\` 5177 5178ç¨ **Stripe**ï¼å ¨çææµè¡çæ¯ä»å¤çå¨ï¼å¨ä½ çåºç¨ä¸æ¥åæ¯ä»ãCoderblock å ç½®äºç± AI å¼å¯¼çæµç¨ï¼ä¼èªå¨å¨ Stripe ä¸åå»ºä½ ç产åä¸ä»·æ ¼ï¼å¹¶çæ带æçå®ãå¯ç¨ ID ç代ç ã 5179 5180> [!NOTE] å¯¹äº **Web app**ï¼Supabase è¿è¡æ¶ï¼æ¯ä»æ´ç®åï¼æµè¯æ¨¡å¼é¶é ç½®ï¼åªæä¸çº¿æ¶æéè¦ä¸å±è´¦æ·ââåè§[æ¥åæ¯ä»](/docs/payments)ãæ¬é¡µä»æ¯é«çº§âèªå¸¦å¯é¥âï¼BYOKï¼æ¨¡å¼ä»¥å Python/Node è¿è¡æ¶çåèã 5181 5182## å·¥ä½åç 5183 5184å½ä½ 让 AI æ·»å æ¯ä»æ¶ï¼ç³»ç»ä¼éµå¾ªä¸ä¸ªèªå¨åæµç¨ï¼ 5185 51861. **AI ç´¢åä½ ç Secret Key** ââ è天ä¸åºç°ä¸ä¸ªé®ç½©è¾å ¥æ¡ 51872. **ä½ ç²è´´å¯é¥** ââ å®ä¼ä¿å为项ç®å¯é¥ 51883. **AI å¨ Stripe ä¸å建产å** ââ 产åãä»·æ ¼å payment link ç´æ¥å¨ä½ ç Stripe è´¦æ·ä¸å建 51894. **çæç代ç 使ç¨çå® ID** ââ 没æå ä½ç¬¦ï¼ä¸åç«å³å¯ç¨ 5190 5191> [!TIP] è¿æå³çä½ æ éæå¨åå¾ Stripe 仪表çå建产åï¼AI ä¼èªå¨å®æä¸åã 5192 5193--- 5194 5195## 设置 5196 5197### 1. å建 Stripe è´¦æ· 5198 5199å¦æè¿æ²¡æè´¦æ·ï¼è¯·å¨ [stripe.com](https://stripe.com) 注åãStripe æä¾å®æ´çæµè¯ç¯å¢ï¼ä½ å¯ä»¥å¨ä¸å¤ççå®æ¯ä»çæ åµä¸è¯éªä¸åã 5200 5201### 2. è·å API å¯é¥ 5202 5203å¨ [Stripe Dashboard â Developers â API Keys](https://dashboard.stripe.com/apikeys) å¤å¶ï¼ 5204 5205- **Secret key**ï¼ä»¥ \`sk_test_...\` å¼å¤´ï¼ï¼AI æéç主å¯é¥ 5206- **Publishable key**ï¼ä»¥ \`pk_test_...\` å¼å¤´ï¼ï¼ç¨äºå端 5207 5208> [!INFO] å¼åæ¶å§ç»ä½¿ç¨**æµè¯**å¯é¥ãåå¤ä¸çº¿æ¶ï¼å°å ¶æ¿æ¢ä¸º **live** å¯é¥ã 5209 5210### 3. å¨ Coderblock ä¸è¾å ¥å¯é¥ 5211 5212ä½ æ两个éæ©ï¼ 5213 5214**é项 Aï¼æ¨èï¼ï¼éè¿ AI è天** 5215åªé让 AI æ·»å Stripeï¼è天ä¸ä¼èªå¨åºç°ä¸ä¸ªè¾å ¥æ¡ï¼ 5216\`\`\` 5217为æç项ç®æ·»å Stripe æ¯ä» 5218\`\`\` 5219 5220**é项 Bï¼ä»è®¾ç½®æå¨æ·»å ** 5221è¿å ¥é¡¹ç®ç**设置 â å¯é¥**并添å ï¼ 5222- \`STRIPE_SECRET_KEY\` â \`sk_test_...\` 5223- \`STRIPE_PUBLISHABLE_KEY\` â \`pk_test_...\` 5224 5225--- 5226 5227## ä½ è½åä»ä¹ 5228 5229### ä¸æ¬¡æ§æ¯ä» 5230 5231å个产åææå¡çéå®ãä¾å¦ï¼ 5232 5233\`\`\` 5234å建ä¸ä¸ªç»è´¦é¡µï¼ä»¥ 49 ⬠åºå®ä¸é¨å¨çº¿è¯¾ç¨ 5235\`\`\` 5236 5237AI å°åå»ºï¼ 5238- Stripe ä¸ä¸ä¸ªâå¨çº¿è¯¾ç¨â产å 5239- ä¸ä¸ª 49.00 â¬ï¼ä¸æ¬¡æ§ï¼çä»·æ ¼ 5240- è·³è½¬å° Stripe çç»è´¦ä»£ç 5241- æå页ä¸åæ¶é¡µ 5242 5243### 循ç¯è®¢é 5244 5245ææææ年计费çå¥é¤ãä¾å¦ï¼ 5246 5247\`\`\` 5248æ·»å 3 个订é å¥é¤ï¼FreeãPro æ¯æ 19 â¬ãBusiness æ¯æ 49 ⬠5249\`\`\` 5250 5251AI å°åå»ºï¼ 5252- Stripe ä¸ 3 个产åï¼FreeãProãBusinessï¼ 5253- æ¯ä¸ªå¥é¤ç循ç¯ï¼ææï¼ä»·æ ¼ 5254- ä¸ä¸ªå¸¦å¥é¤å¯¹æ¯çä»·æ ¼é¡µ 5255- ç¨äºç®¡ç订é ç¶æçå端 5256- ç¨äºå®æ¶æ´æ°ç webhook 5257 5258### Payment Linkï¼æç®åï¼ 5259 5260å¦æä½ åªæ³è¦ä¸ä¸ªæ¯ä»é¾æ¥ãæ éèªå®ä¹ä»£ç ï¼ 5261 5262\`\`\` 5263为ä¸ä¸ª 29 ⬠ç产åå建ä¸ä¸ª Stripe Payment Link 5264\`\`\` 5265 5266AI ä¼å¨ Stripe ä¸å建产åä¸ä»·æ ¼ï¼å¹¶è¿åä¸ä¸ªå¯ç´æ¥ä½¿ç¨ç URLï¼å¦ \`https://buy.stripe.com/xxx\`ï¼ï¼ä½ å¯ä»¥ç²è´´å°ä»»ä½å°æ¹ã 5267 5268### Stripe Checkoutï¼æç®¡ï¼ 5269 5270å®ç°å®æ´ç»è´¦çæå¿«æ¹æ¡ï¼ 5271 5272\`\`\` 5273为æççµåè´ç©è½¦éæ Stripe Checkout 5274\`\`\` 5275 5276Stripe Checkout æ¯ç± Stripe æ管çæ¯ä»é¡µï¼å®ä¼èªå¨å¤çä¿¡ç¨å¡ãApple PayãGoogle Pay 以å PCI åè§ã 5277 5278--- 5279 5280## Webhook 5281 5282Webhook è®©ä½ å®æ¶æ¥æ¶æ¥èª Stripe çéç¥ï¼æ¯ä»å®æã订é åæ¶çï¼ã 5283 5284### é ç½® 5285 5286å¨ AI çæ webhook 代ç åï¼ä½ éè¦å¨ Stripe 仪表çä¸æ³¨å该 URLï¼ 5287 52881. åå¾ [Stripe Dashboard â Developers â Webhooks](https://dashboard.stripe.com/webhooks) 52892. ç¹å» **âAdd endpointâ** 52903. è¾å ¥ä½ çé¡¹ç® URLï¼\`https://{ä½ ç-id}
5290.coderblock.app/api/payments/webhook\` 52914. éæ©è¦æ¥æ¶çäºä»¶ï¼æ¨èï¼\`checkout.session.completed\`ã\`invoice.payment_succeeded\`ã\`customer.subscription.deleted\`ï¼ 52925. å¤å¶ **Webhook Secret** 并å°å ¶ä½ä¸ºé¡¹ç®å¯é¥æ·»å ï¼\`STRIPE_WEBHOOK_SECRET\` 5293 5294> [!WARNING] Webhook ç URL å¿ é¡»æ¯**ç产**å°åï¼\`.coderblock.app\`ï¼ï¼èä¸æ¯é¢è§å°åï¼\`.coderblock.dev\`ï¼ãWebhook ä¸éç¨äºé¢è§ï¼å 为 Stripe æ æ³è®¿é®å¼åç¯å¢ç URLã 5295 5296--- 5297 5298## Supabase Web appï¼Edge Functionsï¼ 5299 5300å¨ **Supabase** è¿è¡æ¶ç项ç®ä¸ï¼æ¯ä»ç±ä¸¤ä¸ª Deno Edge Function å¤çï¼èéå端æå¡å¨ãè¿æ¯ç»è¿éªè¯çï¼Lovable é£æ ¼ï¼æ¨¡å¼ï¼ç± AI éè¿ \`add-stripe-payments-supabase\` skill èªå¨é ç½®ã 5301 5302- \`create-checkout\`ï¼\`verify_jwt = true\`ï¼â å建 Stripe Checkout Session 并è¿åå ¶ URLãæ¢éç¨äº**ä¸æ¬¡æ§**æ¯ä»ï¼\`mode: "payment"\`ï¼ï¼ä¹éç¨äº**订é **ï¼\`mode: "subscription"\`ï¼ã 5303- \`stripe-webhook\`ï¼\`verify_jwt = false\`ï¼â æ ¡éª Stripe çç¾åï¼å¹¶ç¨ service-role 客æ·ç«¯è®°å½è®¢å/订é ã**webhook æ¯æ¯ä»ç¡®å®åççå¯ä¸å¯ä¿¡æ¥æº**ââåå¿å¨å®¢æ·ç«¯ç¡®è®¤ã 5304 5305### æéå¯é¥ï¼éè¿ HIL å¨è天ä¸æ¶éï¼ 5306 5307å½ä½ 让 AI æ·»å æ¯ä»æ¶ï¼è天ä¸ä¼åºç°å®å ¨ç Human-in-the-Loop å段ä¾ä½ ç²è´´å¯é¥ãå®ä»¬ä¼èªå¨ä¿å并ä½ä¸º **Supabase Edge Function å¯é¥**ï¼\`Deno.env.get\`ï¼ä¼ æï¼ 5308 5309| å¯é¥ | å¨åªéæ¾å° | 5310|--------|------------------| 5311| \`STRIPE_SECRET_KEY\` | Stripe Dashboard â Developers â API keysï¼æµè¯ä¸º \`sk_test_â¦\`ï¼ | 5312| \`STRIPE_WEBHOOK_SECRET\` | ä½ webhook 端ç¹çç¾åå¯é¥ï¼\`whsec_â¦\`ï¼ï¼è§ä¸æ | 5313 53144. Stripe ä¼æ¾ç¤ºä¸ä¸ª **Signing secret**ï¼\`whsec_â¦\`ï¼ï¼å°å ¶ç²è´´å°è天ä¸ç \`STRIPE_WEBHOOK_SECRET\` HIL å段ã 5315 5316> [!TIP] ä¸ Python è¿è¡æ¶ä¸åï¼Supabase ç webhook å¨ç产é¨ç½²ä¹åå°±è½è¢« Stripe 访é®ï¼å 为该å½æ°ä½äºä½ ç Supabase 项ç®ä¸ã 5317 5318### å端 5319 5320\`\`\`ts 5321import { startCheckout, loadActiveSubscription } from "@/integrations/supabase/payments"; 5322 5323await startCheckout({ priceId: "price_oneTime" }); // ä¸æ¬¡æ§ 5324await startCheckout({ priceId: "price_monthly", mode: "subscription" }); // 订é 5325 5326const sub = await loadActiveSubscription(); // æªè®¢é å为 null â ç¨ sub?.status æ§å¶åè½ 5327\`\`\` 5328 5329\`orders\` å \`subscriptions\` 表ï¼è¿ç§» \`0003_payments.sql\`ï¼å RLS ä¿æ¤ï¼æ¯ä¸ªç¨æ·åªè¯»åèªå·±çè¡ï¼ä¸åªæ webhookï¼service-roleï¼ä¼åå ¥å®ä»¬ã 5330 5331--- 5332 5333## æ示è¯ç¤ºä¾ 5334 5335| ç®æ | æç¤ºè¯ | 5336|------|--------| 5337| ä¸æ¬¡æ§éå® | *âå建ä¸ä¸ªç»è´¦é¡µï¼ä»¥ 25 ⬠åºå®ä¸ä»¶ T æ¤â* | 5338| SaaS 订é | *âç¨ Stripe æ·»å Free/Pro/Enterprise 订é å¥é¤â* | 5339| Payment link | *â为ä¸ä¸ª 99 ⬠ç产åçæä¸ä¸ª Payment Linkâ* | 5340| æèµ | *âæ·»å ä¸ä¸ªå¯èªå®ä¹éé¢çæèµ æé®â* | 5341| çµå | *â为æååºçè´ç©è½¦éæ Stripe Checkoutâ* | 5342| 客æ·é¨æ· | *âæ·»å ä¸ä¸ªè®©ç¨æ·ç®¡çå ¶è®¢é çé¨æ·â* | 5343 5344--- 5345 5346## æµè¯æ¯ä» 5347 5348å¨æµè¯æ¨¡å¼ä¸ï¼\`sk_test_\`ã\`pk_test_\`ï¼ï¼ä½¿ç¨è¿äºæµè¯å¡ï¼ 5349 5350| åºæ¯ | å¡å· | 5351|----------|------------| 5352| æ¯ä»æå | \`4242 4242 4242 4242\` | 5353| æ¯ä»è¢«æ | \`4000 0000 0000 0002\` | 5354| 3D Secure éªè¯ | \`4000 0025 0000 3155\` | 5355| ä½é¢ä¸è¶³ | \`4000 0000 0000 9995\` | 5356| å¡çè¿æ | \`4000 0000 0000 0069\` | 5357 5358使ç¨ä»»æå°æ¥çæ¥æåä»»æ 3 ä½ CVCã 5359 5360--- 5361 5362## API å¯é¥ 5363 5364| å¯é¥ | åç¼ | 使ç¨ä½ç½® | ç±»å | 5365|-----|--------|-----------|------| 5366| Secret Key | \`sk_test_\` / \`sk_live_\` | å端 | æºå¯ï¼ç»ä¸æ´é²ï¼ | 5367| Publishable Key | \`pk_test_\` / \`pk_live_\` | å端 | å ¬å¼ï¼å¨æµè§å¨ä¸å®å ¨ï¼ | 5368| Webhook Secret | \`whsec_\` | å端 | æºå¯ | 5369 5370> [!DANGER] åå¿å享 **Secret Key** æ **Webhook Secret**ãå§ç»ä½¿ç¨ç¯å¢åéï¼ç»ä¸ç¡¬ç¼ç å¨ä»£ç ä¸ã 5371 5372--- 5373 5374## 常è§é®é¢ 5375 5376**æè½ç¨ PayPal ä»£æ¿ Stripe åï¼** 5377ç®å Coderblock ä» æ¯æ Stripe ä½ä¸ºæ¯ä»å¤çå¨ãStripe è¦ç 135 ç§ä»¥ä¸è´§å¸åææ主æµæ¯ä»æ¹å¼ã 5378 5379**Stripe æ¶è´¹å¤å°ï¼** 5380Stripe æ¯ç¬äº¤ææ¶å 2.9% + 0.25 â¬ï¼æ¬§æ´²æ åï¼ã没ææ¯æåºå®è´¹ç¨ã 5381 5382**æè½ä»æµè¯åæ¢å° live åï¼** 5383å¯ä»¥ï¼åªéå¨é¡¹ç®ç 设置 â å¯é¥ ä¸ææµè¯å¯é¥æ¿æ¢ä¸º live å¯é¥ï¼ç¶åéæ°é¨ç½²ã 5384 5385**AI è½å¤çé款åï¼** 5386AI å¯ä»¥éè¿ Stripe API çæé款代ç ï¼ä½ä½ ä¹å¯ä»¥ç´æ¥å¨ Stripe 仪表çä¸å¤çé款ã 5387`},"image-upload":{es:`# Subir imágenes 5388 5389\`\`\`anim 5390media 5391\`\`\` 5392 5393Sube imágenes personalizadas para tu proyecto. 5394 5395## Formatos admitidos 5396 5397- JPEG / JPG 5398- PNG 5399- GIF 5400- WebP 5401- SVG 5402 5403## Cómo subirlas 5404 54051. En el chat, usa el icono de **adjuntar** para subir una imagen 54062. La IA puede usar la imagen como referencia visual de diseño 54073. Las imágenes subidas se guardan en la carpeta \`public/\` del proyecto 5408 5409## Generación de imágenes con IA 5410 5411La IA también puede **generar imágenes** usando DALL-E: 5412 5413\`\`\` 5414Genera una imagen hero para un sitio de viajes, estilo fotorrealista 5415\`\`\` 5416 5417> [!TIP] Sube capturas o mockups como referencia. La IA los analizará para reproducir el diseño. 5418`,fr:`# Upload d'images 5419 5420\`\`\`anim 5421media 5422\`\`\` 5423 5424Téléverse des images personnalisées pour ton projet. 5425 5426## Formats pris en charge 5427 5428- JPEG / JPG 5429- PNG 5430- GIF 5431- WebP 5432- SVG 5433 5434## Comment les téléverser 5435 54361. Dans le chat, utilise l'icône de **pièce jointe** pour envoyer une image 54372. L'IA peut utiliser l'image comme référence visuelle de design 54383. Les images téléversées sont enregistrées dans le dossier \`public/\` du projet 5439 5440## Génération d'images par IA 5441 5442L'IA peut aussi **générer des images** avec DALL-E : 5443 5444\`\`\` 5445Génère une image hero pour un site de voyage, style photoréaliste 5446\`\`\` 5447 5448> [!TIP] Envoie des captures ou des maquettes en référence. L'IA les analysera pour reproduire le design. 5449`,de:`# Bild-Upload 5450 5451\`\`\`anim 5452media 5453\`\`\` 5454 5455Lade eigene Bilder für dein Projekt hoch. 5456 5457## Unterstützte Formate 5458 5459- JPEG / JPG 5460- PNG 5461- GIF 5462- WebP 5463- SVG 5464 5465## So lädst du sie hoch 5466 54671. Nutze im Chat das **Anhang**-Symbol, um ein Bild hochzuladen 54682. Die KI kann das Bild als visuelle Design-Referenz nutzen 54693. Hochgeladene Bilder werden im Ordner \`public/\` des Projekts gespeichert 5470 5471## KI-Bildgenerierung 5472 5473Die KI kann auch **Bilder generieren** mit DALL-E: 5474 5475\`\`\` 5476Generiere ein Hero-Bild für eine Reise-Website, fotorealistischer Stil 5477\`\`\` 5478 5479> [!TIP] Lade Screenshots oder Mockups als Referenz hoch. Die KI analysiert sie, um das Design nachzubauen. 5480`,zh:`# å¾çä¸ä¼ 5481 5482\`\`\`anim 5483media 5484\`\`\` 5485 5486ä¸ºä½ ç项ç®ä¸ä¼ èªå®ä¹å¾çã 5487 5488## æ¯æçæ ¼å¼ 5489 5490- JPEG / JPG 5491- PNG 5492- GIF 5493- WebP 5494- SVG 5495 5496## å¦ä½ä¸ä¼ 5497 54981. å¨è天ä¸ï¼ä½¿ç¨**é件**å¾æ ä¸ä¼ å¾ç 54992. AI å¯ä»¥å°å¾çä½ä¸ºè§è§è®¾è®¡åè 55003. ä¸ä¼ çå¾çä¼ä¿åå¨é¡¹ç®ç \`public/\` æä»¶å¤¹ä¸ 5501 5502## AI å¾ççæ 5503 5504AI ä¹å¯ä»¥ä½¿ç¨ DALL-E **çæå¾ç**ï¼ 5505 5506\`\`\` 5507为ä¸ä¸ªæ 游ç½ç«çæä¸å¼ 主è§è§å¾ï¼åå®é£æ ¼ 5508\`\`\` 5509 5510> [!TIP] ä¸ä¼ æªå¾æååå¾ä½ä¸ºåèãAI ä¼åæå®ä»¬æ¥è¿å设计ã 5511`},media:{es:`# Media 5512 5513\`\`\`anim 5514media 5515\`\`\` 5516 5517Gestión de archivos multimedia en tu proyecto. 5518 5519## Almacenamiento 5520 5521Los archivos multimedia se guardan en **AWS S3** y se sirven a través del CDN. 5522 5523## Estructura de carpetas 5524 5525\`\`\` 5526public/ 5527âââ images/ # Imágenes del sitio 5528âââ icons/ # Iconos y favicon 5529âââ assets/ # Otros recursos estáticos 5530\`\`\` 5531 5532## Tamaños recomendados 5533 5534| Tipo | Tamaño | Formato | 5535|------|------|--------| 5536| Imagen hero | 1920x1080 | WebP / JPEG | 5537| Miniatura | 400x300 | WebP / JPEG | 5538| Icono | 512x512 | PNG / SVG | 5539| Favicon | 32x32 | PNG / ICO | 5540`,fr:`# Média 5541 5542\`\`\`anim 5543media 5544\`\`\` 5545 5546Gestion des fichiers médias dans ton projet. 5547 5548## Stockage 5549 5550Les fichiers médias sont enregistrés sur **AWS S3** et servis via le CDN. 5551 5552## Structure des dossiers 5553 5554\`\`\` 5555public/ 5556âââ images/ # Images du site 5557âââ icons/ # Icônes et favicon 5558âââ assets/ # Autres ressources statiques 5559\`\`\` 5560 5561## Tailles recommandées 5562 5563| Type | Taille | Format | 5564|------|------|--------| 5565| Image hero | 1920x1080 | WebP / JPEG | 5566| Vignette | 400x300 | WebP / JPEG | 5567| Icône | 512x512 | PNG / SVG | 5568| Favicon | 32x32 | PNG / ICO | 5569`,de:`# Medien 5570 5571\`\`\`anim 5572media 5573\`\`\` 5574 5575Verwaltung von Mediendateien in deinem Projekt. 5576 5577## Speicherung 5578 5579Mediendateien werden auf **AWS S3** gespeichert und über das CDN ausgeliefert. 5580 5581## Ordnerstruktur 5582 5583\`\`\` 5584public/ 5585âââ images/ # Website-Bilder 5586âââ icons/ # Icons und Favicon 5587âââ assets/ # Weitere statische Assets 5588\`\`\` 5589 5590## Empfohlene GröÃen 5591 5592| Typ | GröÃe | Format | 5593|------|------|--------| 5594| Hero-Bild | 1920x1080 | WebP / JPEG |
5595| Thumbnail | 400x300 | WebP / JPEG | 5596| Icon | 512x512 | PNG / SVG | 5597| Favicon | 32x32 | PNG / ICO | 5598`,zh:`# åªä½ 5599 5600\`\`\`anim 5601media 5602\`\`\` 5603 5604管ç项ç®ä¸çåªä½æ件ã 5605 5606## åå¨ 5607 5608åªä½æ件ä¿åå¨ **AWS S3** ä¸ï¼å¹¶éè¿ CDN æä¾ã 5609 5610## æ件夹ç»æ 5611 5612\`\`\` 5613public/ 5614âââ images/ # ç½ç«å¾ç 5615âââ icons/ # å¾æ ä¸ favicon 5616âââ assets/ # å ¶ä»éæèµæº 5617\`\`\` 5618 5619## æ¨è尺寸 5620 5621| ç±»å | 尺寸 | æ ¼å¼ | 5622|------|------|--------| 5623| 主è§è§å¾ | 1920x1080 | WebP / JPEG | 5624| 缩ç¥å¾ | 400x300 | WebP / JPEG | 5625| å¾æ | 512x512 | PNG / SVG | 5626| Favicon | 32x32 | PNG / ICO | 5627`},"email-integration":{es:`# Integración de email (Resend) 5628 5629\`\`\`anim 5630email 5631\`\`\` 5632 5633EnvÃa emails transaccionales desde tu app usando **Resend**. 5634 5635## Configuración 5636 56371. Crea una cuenta en [resend.com](https://resend.com) 56382. Genera una clave API 56393. Añádela como secreto: \`RESEND_API_KEY\` 56404. Pide a la IA que integre el envÃo de emails 5641 5642## Ejemplo 5643 5644\`\`\` 5645Añade el email de confirmación de registro usando Resend 5646\`\`\` 5647 5648La IA generará el código backend para enviar emails con plantillas HTML personalizadas. 5649 5650## Funciones 5651 5652- Emails de bienvenida 5653- Confirmación de registro 5654- Restablecimiento de contraseña 5655- Notificaciones 5656- Newsletter 5657 5658> [!INFO] Resend ofrece 3.000 emails/mes gratis en el plan free. 5659`,fr:`# Intégration e-mail (Resend) 5660 5661\`\`\`anim 5662email 5663\`\`\` 5664 5665Envoie des e-mails transactionnels depuis ton app avec **Resend**. 5666 5667## Configuration 5668 56691. Crée un compte sur [resend.com](https://resend.com) 56702. Génère une clé API 56713. Ajoute-la comme secret : \`RESEND_API_KEY\` 56724. Demande à l'IA d'intégrer l'envoi d'e-mails 5673 5674## Exemple 5675 5676\`\`\` 5677Ajoute l'e-mail de confirmation d'inscription avec Resend 5678\`\`\` 5679 5680L'IA générera le code backend pour envoyer des e-mails avec des templates HTML personnalisés. 5681 5682## Fonctionnalités 5683 5684- E-mails de bienvenue 5685- Confirmation d'inscription 5686- Réinitialisation du mot de passe 5687- Notifications 5688- Newsletter 5689 5690> [!INFO] Resend offre 3 000 e-mails/mois gratuits sur le plan gratuit. 5691`,de:`# E-Mail-Integration (Resend) 5692 5693\`\`\`anim 5694email 5695\`\`\` 5696 5697Sende transaktionale E-Mails aus deiner App mit **Resend**. 5698 5699## Einrichtung 5700 57011. Erstelle ein Konto auf [resend.com](https://resend.com) 57022. Generiere einen API-Schlüssel 57033. Füge ihn als Secret hinzu: \`RESEND_API_KEY\` 57044. Bitte die KI, den E-Mail-Versand zu integrieren 5705 5706## Beispiel 5707 5708\`\`\` 5709Füge die Registrierungs-Bestätigungsmail mit Resend hinzu 5710\`\`\` 5711 5712Die KI generiert den Backend-Code, um E-Mails mit eigenen HTML-Vorlagen zu senden. 5713 5714## Funktionen 5715 5716- Willkommens-E-Mails 5717- Registrierungsbestätigung 5718- Passwort zurücksetzen 5719- Benachrichtigungen 5720- Newsletter 5721 5722> [!INFO] Resend bietet 3.000 E-Mails/Monat kostenlos im Free-Plan. 5723`,zh:`# é®ä»¶éæ (Resend) 5724 5725\`\`\`anim 5726email 5727\`\`\` 5728 5729ä½¿ç¨ **Resend** ä»ä½ çåºç¨åéäºå¡æ§é®ä»¶ã 5730 5731## 设置 5732 57331. å¨ [resend.com](https://resend.com) åå»ºè´¦æ· 57342. çæä¸ä¸ª API å¯é¥ 57353. å°å ¶ä½ä¸ºå¯é¥æ·»å ï¼\`RESEND_API_KEY\` 57364. 让 AI éæé®ä»¶åé 5737 5738## ç¤ºä¾ 5739 5740\`\`\` 5741ä½¿ç¨ Resend æ·»å 注å确认é®ä»¶ 5742\`\`\` 5743 5744AI ä¼çæå端代ç ï¼ç¨èªå®ä¹ HTML 模æ¿åéé®ä»¶ã 5745 5746## åè½ 5747 5748- 欢è¿é®ä»¶ 5749- 注å确认 5750- å¯ç éç½® 5751- éç¥ 5752- æ°é»é讯 5753 5754> [!INFO] Resend çå è´¹å¥é¤æ¯ææä¾ 3,000 å°å è´¹é®ä»¶ã 5755`},"github-integration":{es:`# Integración de GitHub 5756 5757\`\`\`anim 5758github 5759\`\`\` 5760 5761Conecta tu proyecto a un repositorio de GitHub para control de versiones y colaboración. 5762 5763## Cómo conectarlo 5764 57651. Ve a los **Ajustes** del proyecto 57662. Sección **"GitHub"** 57673. Haz clic en **"Conectar GitHub"** para autorizar vÃa OAuth 57684. Elige un repositorio existente o crea uno nuevo 5769 5770## Funciones 5771 5772- **Commits automáticos**: cada cambio de la IA se puede confirmar (commit) 5773- **Push/Pull**: sincroniza el código entre Coderblock y GitHub 5774- **Ramas**: trabaja en ramas separadas para distintas funciones 5775 5776## Estructura del repositorio 5777 5778\`\`\` 5779repository/ 5780âââ frontend/ # Código React/Vite 5781âââ backend/ # Código Python/FastAPI 5782âââ README.md 5783\`\`\` 5784 5785> [!TIP] Activa los commits automáticos para tener un historial completo de los cambios. 5786`,fr:`# Intégration GitHub 5787 5788\`\`\`anim 5789github 5790\`\`\` 5791 5792Connecte ton projet à un dépôt GitHub pour le contrôle de version et la collaboration. 5793 5794## Comment connecter 5795 57961. Va dans les **Paramètres** du projet 57972. Section **« GitHub »** 57983. Clique sur **« Connecter GitHub »** pour autoriser via OAuth 57994. Choisis un dépôt existant ou crées-en un nouveau 5800 5801## Fonctionnalités 5802 5803- **Commits automatiques** : chaque changement de l'IA peut être commité 5804- **Push/Pull** : synchronise le code entre Coderblock et GitHub 5805- **Branches** : travaille sur des branches séparées pour différentes fonctionnalités 5806 5807## Structure du dépôt 5808 5809\`\`\` 5810repository/ 5811âââ frontend/ # Code React/Vite 5812âââ backend/ # Code Python/FastAPI 5813âââ README.md 5814\`\`\` 5815 5816> [!TIP] Active les commits automatiques pour un historique complet des changements. 5817`,de:`# GitHub-Integration 5818 5819\`\`\`anim 5820github 5821\`\`\` 5822 5823Verbinde dein Projekt mit einem GitHub-Repository für Versionskontrolle und Zusammenarbeit. 5824 5825## So verbindest du 5826 58271. Gehe zu den **Einstellungen** des Projekts 58282. Abschnitt **âGitHub"** 58293. Klicke auf **âGitHub verbinden"**, um über OAuth zu autorisieren 58304. Wähle ein bestehendes Repository oder erstelle ein neues 5831 5832## Funktionen 5833 5834- **Automatische Commits**: jede KI-Ãnderung kann committet werden 5835- **Push/Pull**: synchronisiere den Code zwischen Coderblock und GitHub 5836- **Branches**: arbeite auf separaten Branches für verschiedene Funktionen 5837 5838## Repository-Struktur 5839 5840\`\`\` 5841repository/ 5842âââ frontend/ # React/Vite-Code 5843âââ backend/ # Python/FastAPI-Code 5844âââ README.md 5845\`\`\` 5846 5847> [!TIP] Aktiviere automatische Commits für eine vollständige Ãnderungshistorie. 5848`,zh:`# GitHub éæ 5849 5850\`\`\`anim 5851github 5852\`\`\` 5853 5854å°ä½ ç项ç®è¿æ¥å° GitHub ä»åºï¼ç¨äºçæ¬æ§å¶ååä½ã 5855 5856## å¦ä½è¿æ¥ 5857 58581. è¿å ¥é¡¹ç®**设置** 58592. **âGitHubâ**é¨å 58603. ç¹å» **âè¿æ¥ GitHubâ** 以éè¿ OAuth ææ 58614. éæ©ä¸ä¸ªç°æä»åºææ°å»ºä¸ä¸ª 5862 5863## åè½ 5864 5865- **èªå¨æ交**ï¼æ¯æ¬¡ AI çæ´æ¹é½å¯ä»¥æ交ï¼commitï¼ 5866- **Push/Pull**ï¼å¨ Coderblock ä¸ GitHub ä¹é´åæ¥ä»£ç 5867- **åæ¯**ï¼ä¸ºä¸ååè½å¨ç¬ç«åæ¯ä¸å·¥ä½ 5868 5869## ä»åºç»æ 5870 5871\`\`\` 5872repository/ 5873âââ frontend/ # React/Vite 代ç 5874âââ backend/ # Python/FastAPI 代ç 5875âââ README.md 5876\`\`\` 5877 5878> [!TIP] å¯ç¨èªå¨æ交ï¼ä»¥è·å¾å®æ´çæ´æ¹åå²ã 5879`},"custom-domains":{es:`# Dominios personalizados 5880 5881\`\`\`anim 5882custom-domain 5883\`\`\` 5884 5885Conecta un dominio personalizado a tu app publicada para un aspecto profesional. En lugar de \`{id}.coderblock.app\`, tus usuarios verán \`www.tudominio.com\`. 5886 5887## Requisitos previos 5888 5889- La app debe estar ya **publicada en producción** (Deploy completado) 5890- Debes tener acceso a la **gestión de DNS** de tu dominio 5891 5892## Cómo configurarlo 5893 5894### Paso 1: Añade el dominio en Coderblock 5895 58961. Abre el proyecto en el editor 58972. Ve a los **Ajustes** del proyecto 58983. Sección **"Dominio personalizado"** 58994. Introduce tu dominio (p. ej. \`midominio.com\` o \`app.midominio.com\`) 59005. Coderblock te mostrará los registros DNS a configurar 5901 5902### Paso 2: Configura el DNS 5903 5904Ve al panel de gestión de DNS (Cloudflare, GoDaddy, Namecheap, etc.) y añade los siguientes registros: 5905 5906**Para el dominio raÃz** (\`midominio.com\`): 5907\`\`\` 5908A @ â [IP proporcionada por Coderblock] 5909\`\`\` 5910
5911**Para un subdominio** (\`www.midominio.com\` o \`app.midominio.com\`): 5912\`\`\` 5913CNAME www â {id}.coderblock.app 5914\`\`\` 5915 5916### Paso 3: Verificación y SSL 5917 59181. Coderblock verifica automáticamente la configuración DNS 59192. Una vez confirmada, el **certificado SSL** se genera automáticamente vÃa Let's Encrypt 59203. Tu dominio está listo: funcionarán tanto \`http://\` como \`https://\` 5921 5922## Tiempos 5923 5924| Operación | Tiempo | 5925|-----------|------| 5926| Propagación DNS | 5 minutos - 48 horas | 5927| Generación del certificado SSL | 1-5 minutos | 5928| Activación del dominio | Automática tras el DNS | 5929 5930## Solución de problemas 5931 5932| Problema | Solución | 5933|-------|----------| 5934| El DNS no se propaga | Espera hasta 48 horas, verifica los registros con \`dig\` o \`nslookup\` | 5935| Error del certificado SSL | Comprueba que el CNAME apunte correctamente, reintenta tras unos minutos | 5936| Dominio inaccesible | Revisa si hay proxies activos (p. ej. el proxy de Cloudflare) que puedan interferir | 5937 5938> [!WARNING] Si usas Cloudflare, pon el proxy en **"DNS only"** (icono gris) para el registro CNAME, al menos durante la configuración inicial. Tras generarse el certificado SSL, puedes reactivar el proxy. 5939`,fr:`# Domaines personnalisés 5940 5941\`\`\`anim 5942custom-domain 5943\`\`\` 5944 5945Connecte un domaine personnalisé à ton app publiée pour une image professionnelle. Au lieu de \`{id}.coderblock.app\`, tes utilisateurs verront \`www.tondomaine.com\`. 5946 5947## Prérequis 5948 5949- L'app doit déjà être **publiée en production** (Deploy terminé) 5950- Tu dois avoir accès à la **gestion DNS** de ton domaine 5951 5952## Comment configurer 5953 5954### Ãtape 1 : Ajoute le domaine dans Coderblock 5955 59561. Ouvre le projet dans l'éditeur 59572. Va dans les **Paramètres** du projet 59583. Section **« Domaine personnalisé »** 59594. Saisis ton domaine (p. ex. \`mondomaine.com\` ou \`app.mondomaine.com\`) 59605. Coderblock t'indiquera les enregistrements DNS à configurer 5961 5962### Ãtape 2 : Configure le DNS 5963 5964Va dans ton panneau de gestion DNS (Cloudflare, GoDaddy, Namecheap, etc.) et ajoute les enregistrements suivants : 5965 5966**Pour le domaine racine** (\`mondomaine.com\`) : 5967\`\`\` 5968A @ â [IP fournie par Coderblock] 5969\`\`\` 5970 5971**Pour un sous-domaine** (\`www.mondomaine.com\` ou \`app.mondomaine.com\`) : 5972\`\`\` 5973CNAME www â {id}.coderblock.app 5974\`\`\` 5975 5976### Ãtape 3 : Vérification et SSL 5977 59781. Coderblock vérifie automatiquement la configuration DNS 59792. Une fois confirmée, le **certificat SSL** est généré automatiquement via Let's Encrypt 59803. Ton domaine est prêt : \`http://\` comme \`https://\` fonctionneront 5981 5982## Délais 5983 5984| Opération | Temps | 5985|-----------|------| 5986| Propagation DNS | 5 minutes - 48 heures | 5987| Génération du certificat SSL | 1-5 minutes | 5988| Activation du domaine | Automatique après le DNS | 5989 5990## Dépannage 5991 5992| Problème | Solution | 5993|-------|----------| 5994| Le DNS ne se propage pas | Attends jusqu'à 48 heures, vérifie les enregistrements avec \`dig\` ou \`nslookup\` | 5995| Erreur du certificat SSL | Vérifie que le CNAME pointe correctement, réessaie après quelques minutes | 5996| Domaine injoignable | Vérifie les proxys actifs (p. ex. le proxy Cloudflare) qui pourraient interférer | 5997 5998> [!WARNING] Si tu utilises Cloudflare, mets le proxy sur **« DNS only »** (icône grise) pour l'enregistrement CNAME, au moins pendant la configuration initiale. Une fois le certificat SSL généré, tu peux réactiver le proxy. 5999`,de:`# Eigene Domains 6000 6001\`\`\`anim 6002custom-domain 6003\`\`\` 6004 6005Verbinde eine eigene Domain mit deiner veröffentlichten App für einen professionellen Auftritt. Statt \`{id}.coderblock.app\` sehen deine Nutzer \`www.deinedomain.de\`. 6006 6007## Voraussetzungen 6008 6009- Die App muss bereits **in Produktion veröffentlicht** sein (Deploy abgeschlossen) 6010- Du brauchst Zugriff auf die **DNS-Verwaltung** deiner Domain 6011 6012## So konfigurierst du 6013 6014### Schritt 1: Domain in Coderblock hinzufügen 6015 60161. Ãffne das Projekt im Editor 60172. Gehe zu den **Einstellungen** des Projekts 60183. Abschnitt **âEigene Domain"** 60194. Gib deine Domain ein (z. B. \`meinedomain.de\` oder \`app.meinedomain.de\`) 60205. Coderblock zeigt dir die zu konfigurierenden DNS-Einträge 6021 6022### Schritt 2: DNS konfigurieren 6023 6024Gehe in dein DNS-Verwaltungspanel (Cloudflare, GoDaddy, Namecheap usw.) und füge folgende Einträge hinzu: 6025 6026**Für die Root-Domain** (\`meinedomain.de\`): 6027\`\`\` 6028A @ â [von Coderblock bereitgestellte IP] 6029\`\`\` 6030 6031**Für eine Subdomain** (\`www.meinedomain.de\` oder \`app.meinedomain.de\`): 6032\`\`\` 6033CNAME www â {id}.coderblock.app 6034\`\`\` 6035 6036### Schritt 3: Verifizierung und SSL 6037 60381. Coderblock prüft die DNS-Konfiguration automatisch 60392. Nach Bestätigung wird das **SSL-Zertifikat** automatisch über Let's Encrypt generiert 60403. Deine Domain ist bereit: sowohl \`http://\` als auch \`https://\` funktionieren 6041 6042## Zeiten 6043 6044| Vorgang | Zeit | 6045|-----------|------| 6046| DNS-Propagierung | 5 Minuten - 48 Stunden | 6047| SSL-Zertifikat-Generierung | 1-5 Minuten | 6048| Domain-Aktivierung | Automatisch nach dem DNS | 6049 6050## Fehlerbehebung 6051 6052| Problem | Lösung | 6053|-------|----------| 6054| DNS propagiert nicht | Warte bis zu 48 Stunden, prüfe die Einträge mit \`dig\` oder \`nslookup\` | 6055| SSL-Zertifikatsfehler | Prüfe, ob der CNAME korrekt zeigt, versuche es nach einigen Minuten erneut | 6056| Domain nicht erreichbar | Prüfe auf aktive Proxys (z. B. Cloudflare-Proxy), die stören könnten | 6057 6058> [!WARNING] Wenn du Cloudflare nutzt, stelle den Proxy für den CNAME-Eintrag auf **âDNS only"** (graues Symbol), zumindest während der Ersteinrichtung. Nach der SSL-Generierung kannst du den Proxy wieder aktivieren. 6059`,zh:`# èªå®ä¹åå 6060 6061\`\`\`anim 6062custom-domain 6063\`\`\` 6064 6065ä¸ºä½ å·²åå¸çåºç¨è¿æ¥ä¸ä¸ªèªå®ä¹ååï¼è®©å ¶æ´ä¸ä¸ãç¨æ·å°çå° \`www.ä½ çåå.com\`ï¼èä¸æ¯ \`{id}.coderblock.app\`ã 6066 6067## åææ¡ä»¶ 6068 6069- åºç¨å¿ 须已**åå¸å°ç产ç¯å¢**ï¼Deploy å·²å®æï¼ 6070- ä½ å¿ é¡»è½è®¿é®ååç **DNS 管ç** 6071 6072## å¦ä½é ç½® 6073 6074### 第 1 æ¥ï¼å¨ Coderblock ä¸æ·»å åå 6075 60761. å¨ç¼è¾å¨ä¸æå¼é¡¹ç® 60772. è¿å ¥é¡¹ç®**设置** 60783. **âèªå®ä¹ååâ**é¨å 60794. è¾å ¥ä½ çååï¼å¦ \`mydomain.com\` æ \`app.mydomain.com\`ï¼ 60805. Coderblock ä¼åä½ å±ç¤ºéè¦é ç½®ç DNS è®°å½ 6081 6082### 第 2 æ¥ï¼é ç½® DNS 6083 6084è¿å ¥ä½ ç DNS 管çé¢æ¿ï¼CloudflareãGoDaddyãNamecheap çï¼å¹¶æ·»å 以ä¸è®°å½ï¼ 6085 6086**对äºæ ¹åå**ï¼\`mydomain.com\`ï¼ï¼ 6087\`\`\` 6088A @ â [Coderblock æä¾ç IP] 6089\`\`\` 6090 6091**对äºååå**ï¼\`www.mydomain.com\` æ \`app.mydomain.com\`ï¼ï¼ 6092\`\`\` 6093CNAME www â {id}.coderblock.app 6094\`\`\` 6095 6096### 第 3 æ¥ï¼éªè¯ä¸ SSL 6097 60981. Coderblock ä¼èªå¨éªè¯ DNS é ç½® 60992. 确认åï¼**SSL è¯ä¹¦**ä¼éè¿ Let's Encrypt èªå¨çæ 61003. ä½ çåå就绪ï¼\`http://\` å \`https://\` é½å¯ç¨ 6101 6102## èæ¶ 6103 6104| æä½ | æ¶é´ | 6105|-----------|------| 6106| DNS ä¼ æ | 5 åé - 48 å°æ¶ | 6107| SSL è¯ä¹¦çæ | 1-5 åé | 6108| ååæ¿æ´» | DNS ä¹åèªå¨ | 6109 6110## æ éæé¤ 6111 6112| é®é¢ | è§£å³ | 6113|-------|----------| 6114| DNS æªä¼ æ | æå¤çå¾ 48 å°æ¶ï¼ç¨ \`dig\` æ \`nslookup\` éªè¯è®°å½ | 6115| SSL è¯ä¹¦é误 | æ£æ¥ CNAME æ¯å¦æåæ£ç¡®ï¼å åéåéè¯ |
6116| ååæ æ³è®¿é® | æ£æ¥æ¯å¦ææ´»è·ä»£çï¼å¦ Cloudflare 代çï¼å¨å¹²æ° | 6117 6118> [!WARNING] å¦æä½¿ç¨ Cloudflareï¼è¯·è³å°å¨åå§è®¾ç½®æé´å° CNAME è®°å½ç代ç设为 **âDNS onlyâ**ï¼ç°è²å¾æ ï¼ãSSL è¯ä¹¦çæåï¼ä½ å¯ä»¥éæ°å¯ç¨ä»£çã 6119`},billing:{es:`# Facturación 6120 6121\`\`\`anim 6122credits 6123\`\`\` 6124 6125Gestiona tu suscripción, pagos y facturas. 6126 6127## Planes 6128 6129| Plan | Precio | Créditos de IA | 6130|------|--------|----------------| 6131| Community | Gratis | ${y} créditos, una sola vez (no se renuevan) | 6132| Pro | $25/mes | 100 créditos cada mes | 6133| Business | $50/mes | 200 créditos cada mes | 6134| Enterprise | A medida | Contacta con ventas | 6135 6136En la UE/EEE, Reino Unido y Suiza los precios se muestran en euros. Los precios ya incluyen el IVA o los impuestos sobre las ventas. La facturación anual cuesta menos que la mensual: la [página de precios](/pricing) muestra siempre el precio exacto y actualizado en tu moneda. La comparativa completa está en [Planes](/docs/plans). 6137 6138## Gestión de la suscripción 6139 6140- Ve a **Cuenta â Suscripción** 6141- Puedes subir o bajar de plan, o cancelar, en cualquier momento
6142- Las subidas de plan se prorratean y tus créditos sin usar pasan al nuevo plan 6143- Los pagos los gestiona **Stripe**: a los clientes de la UE les factura Coderblock S.r.l. (Italia) y al resto Coderblock, Inc. (EE. UU.) 6144- Las facturas están disponibles en la sección de facturación de tu cuenta 6145 6146> [!INFO] Los créditos mensuales se reinician en cada renovación y no se acumulan para el mes siguiente. Los créditos extra que compres se guardan aparte de la asignación mensual. 6147`,fr:`# Facturation 6148 6149\`\`\`anim 6150credits 6151\`\`\` 6152 6153Gère ton abonnement, tes paiements et tes factures. 6154 6155## Offres 6156 6157| Offre | Prix | Crédits IA | 6158|-------|------|------------| 6159| Community | Gratuit | ${y} crédits, une seule fois (non renouvelés) | 6160| Pro | 25 $/mois | 100 crédits chaque mois | 6161| Business | 50 $/mois | 200 crédits chaque mois | 6162| Enterprise | Sur mesure | Contacte l'équipe commerciale | 6163 6164Dans l'UE/EEE, au Royaume-Uni et en Suisse, les prix sont affichés en euros. Les prix incluent déjà la TVA ou les taxes de vente. La facturation annuelle coûte moins cher que la mensuelle : la [page des tarifs](/pricing) affiche toujours le prix exact et à jour dans ta devise. La comparaison complète se trouve dans [Offres](/docs/plans). 6165 6166## Gestion de l'abonnement 6167 6168- Va dans **Account â Subscription** 6169- Tu peux changer d'offre ou résilier à tout moment 6170- Les passages à une offre supérieure sont calculés au prorata, et tes crédits non utilisés sont reportés sur la nouvelle offre 6171- Les paiements sont traités par **Stripe** : les clients de l'UE sont facturés par Coderblock S.r.l. (Italie), les autres par Coderblock, Inc. (Ãtats-Unis) 6172- Les factures sont disponibles dans la section facturation de ton compte 6173 6174> [!INFO] Les crédits mensuels sont remis à zéro à chaque renouvellement et ne sont pas reportés au mois suivant. Les crédits supplémentaires que tu achètes sont conservés à part de la dotation mensuelle. 6175`,de:`# Abrechnung 6176 6177\`\`\`anim 6178credits 6179\`\`\` 6180 6181Verwalte Abo, Zahlungen und Rechnungen. 6182 6183## Pläne 6184 6185| Plan | Preis | KI-Credits | 6186|------|-------|------------| 6187| Community | Kostenlos | ${y} Credits, einmalig (keine Erneuerung) | 6188| Pro | 25 $/Monat | 100 Credits pro Monat | 6189| Business | 50 $/Monat | 200 Credits pro Monat | 6190| Enterprise | Individuell | Vertrieb kontaktieren | 6191 6192In der EU/im EWR, im Vereinigten Königreich und in der Schweiz werden die Preise in Euro angezeigt. Die Preise enthalten bereits MwSt. bzw. Umsatzsteuer. Jährliche Abrechnung ist günstiger als monatliche: Die [Preisseite](/pricing) zeigt immer den genauen, aktuellen Preis in deiner Währung. Der vollständige Vergleich steht unter [Pläne](/docs/plans). 6193 6194## Abo-Verwaltung 6195 6196- Gehe zu **Konto â Abo** 6197- Du kannst jederzeit upgraden, downgraden oder kündigen 6198- Upgrades werden anteilig berechnet, und deine ungenutzten Credits gehen in den neuen Plan über 6199- Zahlungen laufen über **Stripe**: Kunden in der EU werden von der Coderblock S.r.l. (Italien) abgerechnet, alle anderen von der Coderblock, Inc. (USA) 6200- Rechnungen findest du im Abrechnungsbereich deines Kontos 6201 6202> [!INFO] Monatliche Credits werden bei jeder Verlängerung zurückgesetzt und nicht in den nächsten Monat übertragen. Zusätzlich gekaufte Credits werden getrennt vom monatlichen Kontingent geführt. 6203`,zh:`# è´¦å 6204 6205\`\`\`anim 6206credits 6207\`\`\` 6208 6209管çä½ ç订é ãä»æ¬¾åå票ã 6210 6211## å¥é¤ 6212 6213| å¥é¤ | ä»·æ ¼ | AI 积å | 6214|------|------|---------| 6215| Community | å è´¹ | ${y} 积åï¼ä¸æ¬¡æ§åæ¾ï¼ä¸ç»æï¼ | 6216| Pro | 25 ç¾å /æ | æ¯æ 100 积å | 6217| Business | 50 ç¾å /æ | æ¯æ 200 积å | 6218| Enterprise | å®å¶ | èç³»éå® | 6219 6220欧ç/欧洲ç»æµåºãè±å½åç士çç¨æ·çå°çæ¯æ¬§å ä»·æ ¼ãä»·æ ¼å·²å å«å¢å¼ç¨æéå®ç¨ãæå¹´ä»è´¹æ¯ææä»è´¹æ´ä¾¿å®ï¼[ä»·æ ¼é¡µé¢](/pricing)å§ç»ä»¥ä½ çè´§å¸æ¾ç¤ºåç¡®çææ°ä»·æ ¼ãå®æ´å¯¹æ¯è§[å¥é¤](/docs/plans)ã 6221 6222## 订é 管ç 6223 6224- åå¾ **è´¦æ· â 订é ** 6225- ä½ å¯ä»¥éæ¶å级ãé级æåæ¶ 6226- å级ææ¯ä¾è®¡è´¹ï¼æªç¨å®ç积åä¼è½¬å ¥æ°å¥é¤ 6227- ä»æ¬¾ç± **Stripe** å¤çï¼æ¬§çç¨æ·ç± Coderblock S.r.l.ï¼æ大å©ï¼å¼å ·è´¦åï¼å ¶ä»ç¨æ·ç± Coderblock, Inc.ï¼ç¾å½ï¼å¼å ·è´¦å 6228- å票å¯å¨è´¦æ·çè´¦åé¨åæ¥ç 6229 6230> [!INFO] æ¯æ积åå¨æ¯æ¬¡ç»è®¢æ¶éç½®ï¼ä¸ä¼ç´¯ç§¯å°ä¸ä¸ªæãä½ é¢å¤è´ä¹°ç积åä¸æ¯æé¢åº¦åå¼ä¿åã 6231`},credits:{es:`# Créditos 6232 6233\`\`\`anim 6234credits 6235\`\`\` 6236 6237Los créditos son la unidad que mide el uso de la IA en Coderblock. 6238 6239## De dónde salen los créditos 6240 6241- **Community**: ${y} créditos una sola vez, al registrarte. No se renuevan. 6242- **Prueba de Pro**: +${M} créditos durante los 14 dÃas de la prueba. 6243- **Pro**: 100 créditos cada mes. **Business**: 200 créditos cada mes. 6244- **Créditos extra**: puedes comprar paquetes de créditos en cualquier momento con **Comprar créditos**. 6245
6246## Cómo se consumen los créditos 6247 6248Cada mensaje se cobra según el trabajo de IA que realmente necesitó, no con una tarifa fija. Influyen tres cosas: 6249 62501. **El tamaño de la tarea**: un pequeño cambio de texto consume una fracción de crédito, mientras que generar una app fullstack completa puede requerir varios créditos. 62512. **El modelo**: los modelos premium (Claude, GPT-6.1 Sol, GPT-5.6 Terra y Frontier) consumen más créditos que los modelos abiertos para el mismo trabajo, y Claude Fable 5 es el que más consume. Ver [Modelos](/docs/models). 62523. **Tu plan**: los planes de pago consumen menos créditos por el mismo trabajo. 6253 6254Las herramientas que la IA usa durante un mensaje, como la generación de imágenes, se incluyen en el coste de ese mensaje. 6255 6256> [!INFO] La primera generación de tu primer proyecto corre por cuenta de Coderblock, hasta un lÃmite: una nota en el chat te avisa cuando se aplica. 6257 6258## Estimaciones y consumo real 6259 6260- Con **Auto** (y con **Frontier** cuando está disponible) la ventana de niveles de calidad muestra una **estimación** del coste por mensaje que se actualiza al cambiar los niveles. 6261- Después de cada mensaje, los créditos realmente usados quedan registrados en tu historial de consumo. 6262 6263Lo que cuenta son la estimación de la app y tu historial de consumo: los ejemplos de esta documentación son solo orientativos. 6264 6265## Otros usos de los créditos 6266 6267- Una **IPv4 dedicada** opcional para un dominio personalizado se paga en créditos, un año cada vez. 6268 6269## Seguimiento 6270 6271Desde **Cuenta â Suscripción** puedes ver: 6272 6273- Los créditos restantes 6274- El consumo por tipo de acción 6275- El uso reciente 6276 6277> [!WARNING] Cuando se acaban los créditos, la IA no puede iniciar nuevas peticiones hasta que se renueve tu plan o compres créditos extra. 6278`,fr:`# Crédits 6279 6280\`\`\`anim 6281credits 6282\`\`\` 6283 6284Les crédits sont l'unité qui mesure l'utilisation de l'IA sur Coderblock. 6285 6286## D'où viennent les crédits 6287 6288- **Community** : ${y} crédits une seule fois, à l'inscription. Ils ne se renouvellent pas. 6289- **Essai Pro** : +${M} crédits pendant les 14 jours de l'essai. 6290- **Pro** : 100 crédits chaque mois. **Business** : 200 crédits chaque mois. 6291- **Crédits supplémentaires** : tu peux acheter des packs de crédits à tout moment avec **Buy credits**. 6292 6293## Comment les crédits sont consommés 6294 6295Chaque message est facturé selon le travail d'IA réellement nécessaire, pas selon un forfait. Trois éléments comptent : 6296 62971. **La taille de la tâche** : une petite modification de texte consomme une fraction de crédit, alors que générer une app fullstack complète peut en demander plusieurs. 62982. **Le modèle** : les modèles premium (Claude, GPT-6.1 Sol, GPT-5.6 Terra et Frontier) consomment plus de crédits que les modèles ouverts pour le même travail, et Claude Fable 5 est le plus gourmand. Voir [Modèles](/docs/models). 62993. **Ton offre** : les offres payantes consomment moins de crédits pour le même travail. 6300 6301Les outils que l'IA utilise pendant un message, comme la génération d'images, sont inclus dans le coût de ce message. 6302 6303> [!INFO] La première génération de ton premier projet est offerte par Coderblock, dans une certaine limite : une note dans le chat te le signale quand elle s'applique. 6304 6305## Estimations et consommation réelle 6306 6307- Avec **Auto** (et **Frontier** quand c'est disponible), la fenêtre des niveaux de qualité affiche une **estimation** du coût par message, mise à jour quand tu modifies les niveaux. 6308- Après chaque message, les crédits réellement utilisés sont enregistrés dans ton historique de consommation. 6309 6310Ce qui fait foi, ce sont l'estimation dans l'app et ton historique : les exemples de cette documentation sont seulement indicatifs. 6311 6312## Autres usages des crédits 6313 6314- Une **IPv4 dédiée** optionnelle pour un domaine personnalisé se paie en crédits, par période d'un an. 6315 6316## Suivi 6317 6318Depuis **Account â Subscription**, tu peux voir : 6319 6320- Les crédits restants 6321- La consommation par type d'action 6322- L'utilisation récente 6323 6324> [!WARNING] Quand tes crédits sont épuisés, l'IA ne peut plus lancer de nouvelles requêtes jusqu'au renouvellement de ton offre ou à l'achat de crédits supplémentaires. 6325`,de:`# Credits 6326 6327\`\`\`anim 6328credits 6329\`\`\` 6330 6331Credits sind die Einheit, mit der die KI-Nutzung auf Coderblock gemessen wird. 6332 6333## Woher die Credits kommen 6334 6335- **Community**: ${y} Credits einmalig bei der Registrierung. Sie werden nicht erneuert. 6336- **Pro-Testphase**: +${M} Credits für die 14 Tage der Testphase. 6337- **Pro**: 100 Credits pro Monat. **Business**: 200 Credits pro Monat. 6338- **Zusätzliche Credits**: Ãber **Credits kaufen** kannst du jederzeit Credit-Pakete erwerben. 6339 6340## Wie Credits verbraucht werden 6341 6342Jede Nachricht wird nach der KI-Arbeit berechnet, die sie tatsächlich gebraucht hat, nicht pauschal. Drei Dinge machen den Unterschied: 6343 63441. **Der Umfang der Aufgabe**: Eine kleine Textänderung kostet einen Bruchteil eines Credits, eine komplette Fullstack-App zu erzeugen kann mehrere Credits kosten.
63452. **Das Modell**: Premium-Modelle (Claude, GPT-6.1 Sol, GPT-5.6 Terra und Frontier) verbrauchen für dieselbe Arbeit mehr Credits als offene Modelle, Claude Fable 5 am meisten. Siehe [Modelle](/docs/models). 63463. **Dein Plan**: Bezahlpläne verbrauchen für dieselbe Arbeit weniger Credits. 6347 6348Werkzeuge, die die KI während einer Nachricht nutzt, etwa die Bildgenerierung, sind in den Kosten dieser Nachricht enthalten. 6349 6350> [!INFO] Die erste Generierung deines ersten Projekts übernimmt Coderblock, bis zu einer Obergrenze: Ein Hinweis im Chat zeigt dir, wann das gilt. 6351 6352## Schätzung und tatsächlicher Verbrauch 6353 6354- Mit **Auto** (und **Frontier**, wenn verfügbar) zeigt das Fenster der Qualitätsstufen eine **Schätzung** der Kosten pro Nachricht, die sich beim Ãndern der Stufen aktualisiert. 6355- Nach jeder Nachricht werden die tatsächlich verbrauchten Credits in deinem Verbrauchsverlauf erfasst. 6356 6357MaÃgeblich sind die Schätzung in der App und dein Verbrauchsverlauf: Beispiele in dieser Dokumentation sind nur Richtwerte. 6358 6359## Weitere Nutzung von Credits 6360 6361- Eine optionale **dedizierte IPv4** für eine eigene Domain wird in Credits bezahlt, jeweils für ein Jahr. 6362 6363## Ãbersicht 6364 6365Unter **Konto â Abo** siehst du: 6366 6367- Verbleibende Credits 6368- Verbrauch nach Aktionstyp 6369- Letzte Nutzung 6370 6371> [!WARNING] Wenn deine Credits aufgebraucht sind, kann die KI keine neuen Anfragen starten, bis sich dein Plan verlängert oder du zusätzliche Credits kaufst. 6372`,zh:`# 积å 6373 6374\`\`\`anim 6375credits 6376\`\`\` 6377 6378积åæ¯ Coderblock ä¸è¡¡é AI 使ç¨éçåä½ã 6379 6380## 积åä»åªéæ¥ 6381 6382- **Community**ï¼æ³¨åæ¶ä¸æ¬¡æ§è·å¾ ${y} 积åï¼ä¸ä¼ç»æã 6383- **Pro è¯ç¨**ï¼å¨ 14 天è¯ç¨æå é¢å¤è·å¾ ${M} 积åã 6384- **Pro**ï¼æ¯æ 100 积åã**Business**ï¼æ¯æ 200 积åã 6385- **é¢å¤ç§¯å**ï¼éæ¶å¯ä»¥éè¿ **è´ä¹°ç§¯å** è´ä¹°ç§¯åå ã 6386 6387## 积åå¦ä½æ¶è 6388 6389æ¯æ¡æ¶æ¯æå®é æéç AI å·¥ä½é计费ï¼èä¸æ¯åºå®æ¶è´¹ãå½±åå ç´ æä¸ä¸ªï¼ 6390 63911. **ä»»å¡ç大å°**ï¼ä¸æ¬¡å°çææ¬ä¿®æ¹åªæ¶èé¶ç¹å 个积åï¼èçæä¸ä¸ªå®æ´çå ¨æ åºç¨å¯è½éè¦è¥å¹²ç§¯åã 63922. **模å**ï¼å®æåæ ·çå·¥ä½ï¼é«çº§æ¨¡åï¼ClaudeãGPT-6.1 SolãGPT-5.6 Terra å Frontierï¼æ¯å¼æ¾æ¨¡åæ¶èæ´å¤ç§¯åï¼å ¶ä¸ Claude Fable 5 æ¶èæå¤ãåè§[模å](/docs/models)ã 63933. **ä½ çå¥é¤**ï¼ä»è´¹å¥é¤å®æåæ ·çå·¥ä½æ¶èæ´å°ç积åã 6394 6395AI å¨ä¸æ¡æ¶æ¯ä¸ä½¿ç¨çå·¥å ·ï¼ä¾å¦å¾ççæï¼å·²å å«å¨è¯¥æ¶æ¯çè´¹ç¨ä¸ã 6396 6397> [!INFO] ä½ ç¬¬ä¸ä¸ªé¡¹ç®çé¦æ¬¡çæç± Coderblock æ¿æ ï¼ä½æä¸éï¼éç¨æ¶è天ä¸ä¼ææ示ã 6398 6399## é¢ä¼°ä¸å®é æ¶è 6400 6401- ä½¿ç¨ **Auto**ï¼ä»¥åå¯ç¨æ¶ç **Frontier**ï¼æ¶ï¼è´¨éç级çªå£ä¼æ¾ç¤ºæ¯æ¡æ¶æ¯ç**é¢ä¼°**è´¹ç¨ï¼å¹¶éç级è°æ´å®æ¶æ´æ°ã 6402- æ¯æ¡æ¶æ¯ç»æåï¼å®é æ¶èç积åä¼è®°å½å¨ä½ ç使ç¨è®°å½ä¸ã 6403 6404以åºç¨å çé¢ä¼°åä½ ç使ç¨è®°å½ä¸ºåï¼æ¬ææ¡£ä¸ç示ä¾ä» ä¾åèã 6405 6406## 积åçå ¶ä»ç¨é 6407 6408- 为èªå®ä¹ååå¼éçå¯é**ç¬ç« IPv4** 以积åæ¯ä»ï¼æ¯æ¬¡æä¸å¹´è®¡è´¹ã 6409 6410## ç¨éæ¥ç 6411 6412å¨ **è´¦æ· â 订é ** ä¸ï¼ä½ å¯ä»¥æ¥çï¼ 6413 6414- å©ä½ç§¯å 6415- ææä½ç±»åååçç¨é 6416- æè¿ç使ç¨æ åµ 6417 6418> [!WARNING] 积åç¨å®åï¼å¨å¥é¤ç»è®¢æè´ä¹°é¢å¤ç§¯åä¹åï¼AI æ æ³å¼å§æ°ç请æ±ã 6419`},plans:{es:`# Planes 6420 6421\`\`\`anim 6422plans 6423\`\`\` 6424 6425Elige el plan que mejor se adapte a lo que necesitas. 6426 6427## Comparativa de planes 6428 6429| | Community | Pro | Business | Enterprise | 6430|---|-----------|-----|----------|------------| 6431| Precio | Gratis | $25/mes | $50/mes | A medida | 6432| Créditos de IA | ${y} (una sola vez) | 100/mes | 200/mes | A medida | 6433| Proyectos | 2 | Ilimitados | Ilimitados | Ilimitados | 6434| Créditos por mensaje | Tarifa estándar | Menos | Menos | A medida | 6435| Modelos | Auto, modelos abiertos, GPT-6 Luna | Todos, incluidos Claude, GPT-6.1 Sol, GPT-5.6 Terra y Frontier | Todos | Todos | 6436| Repositorios de GitHub | Públicos | Privados | Privados | Privados | 6437| Emails transaccionales gestionados | 50/dÃa | 500/dÃa | 2.000/dÃa | A medida | 6438| Generación de vÃdeo y voz con IA | No | Sà | Sà | Sà | 6439| Soporte | Comunidad | Email | Prioritario | Gestor dedicado | 6440 6441Enterprise añade despliegue on-premise, SSO y garantÃas de SLA. Los precios incluyen el IVA o los impuestos sobre las ventas; la [página de precios](/pricing) muestra el precio actual en tu moneda, incluido el descuento anual. 6442 6443## Prueba de Pro 6444 6445Los usuarios de Community pueden probar Pro gratis durante **14 dÃas**. La prueba añade **${M} créditos** (en total tendrás ${V} con tus créditos de Community) y desbloquea las funciones de Pro. Los créditos de regalo caducan con la prueba. Si ya tuviste una suscripción Pro de pago, la prueba no se vuelve a ofrecer y puedes suscribirte directamente. 6446 6447## Cómo cambiar de plan 6448 64491. Ve a **Cuenta â Suscripción** 64502. Selecciona el nuevo plan 64513. Las subidas de plan son inmediatas y se prorratean 64524. Tus créditos sin usar pasan al nuevo plan 6453 6454> [!TIP] Empieza con Community (o con la prueba de Pro) para probar la plataforma y pasa a Pro cuando necesites más créditos y los modelos premium. 6455`,fr:`# Offres 6456 6457\`\`\`anim 6458plans 6459\`\`\` 6460 6461Choisis l'offre qui correspond à tes besoins. 6462 6463## Comparatif des offres 6464 6465| | Community | Pro | Business | Enterprise | 6466|---|-----------|-----|----------|------------| 6467| Prix | Gratuit | 25 $/mois | 50 $/mois | Sur mesure | 6468| Crédits IA | ${y} (une seule fois) | 100/mois | 200/mois | Sur mesure | 6469| Projets | 2 | Illimités | Illimités | Illimités | 6470| Crédits par message | Tarif standard | Réduits | Réduits | Sur mesure | 6471| Modèles | Auto, modèles ouverts, GPT-6 Luna | Tous, y compris Claude, GPT-6.1 Sol, GPT-5.6 Terra et Frontier | Tous | Tous | 6472| Dépôts GitHub | Publics | Privés | Privés | Privés | 6473| E-mails transactionnels gérés | 50/jour | 500/jour | 2 000/jour | Sur mesure | 6474| Génération vidéo et voix par IA | Non | Oui | Oui | Oui | 6475| Support | Communauté | E-mail | Prioritaire | Responsable dédié | 6476 6477Enterprise ajoute le déploiement on-premise, le SSO et des garanties de SLA. Les prix incluent la TVA ou les taxes de vente ; la [page des tarifs](/pricing) affiche le prix actuel dans ta devise, remise annuelle comprise. 6478 6479## Essai Pro 6480 6481Les utilisateurs Community peuvent essayer Pro gratuitement pendant **14 jours**. L'essai ajoute **${M} crédits** (soit ${V} au total avec tes crédits Community) et débloque les fonctionnalités Pro. Les crédits bonus expirent avec l'essai. Si tu as déjà eu un abonnement Pro payant, l'essai n'est plus proposé et tu peux t'abonner directement. 6482 6483## Changer d'offre 6484 64851. Va dans **Account â Subscription** 64862. Sélectionne la nouvelle offre 64873. Les passages à une offre supérieure sont immédiats et calculés au prorata 64884. Tes crédits non utilisés sont reportés sur la nouvelle offre 6489 6490> [!TIP] Commence avec Community (ou l'essai Pro) pour découvrir la plateforme, puis passe à Pro quand tu as besoin de plus de crédits et des modèles premium. 6491`,de:`# Pläne 6492 6493\`\`\`anim 6494plans 6495\`\`\` 6496 6497Wähle den Plan, der zu dir passt. 6498 6499## Pläne im Vergleich 6500 6501| | Community | Pro | Business | Enterprise | 6502|---|-----------|-----|----------|------------| 6503| Preis | Kostenlos | 25 $/Monat | 50 $/Monat | Individuell | 6504| KI-Credits | ${y} (einmalig) | 100/Monat | 200/Monat | Individuell | 6505| Projekte | 2 | Unbegrenzt | Unbegrenzt | Unbegrenzt | 6506| Credits pro Nachricht | Standardtarif | Weniger | Weniger | Individuell | 6507| Modelle | Auto, offene Modelle, GPT-6 Luna | Alle, inkl. Claude, GPT-6.1 Sol, GPT-5.6 Terra und Frontier | Alle | Alle | 6508| GitHub-Repositories | Ãffentlich | Privat | Privat | Privat | 6509| Verwaltete Transaktions-E-Mails | 50/Tag | 500/Tag | 2.000/Tag | Individuell | 6510| KI-Video- und Sprachgenerierung | Nein | Ja | Ja | Ja | 6511| Support | Community | E-Mail | Priorisiert | Persönlicher Ansprechpartner | 6512 6513Enterprise bietet zusätzlich On-Premise-Betrieb, SSO und SLA-Garantien. Die Preise enthalten MwSt. bzw. Umsatzsteuer; die [Preisseite](/pricing) zeigt den aktuellen Preis in deiner Währung, einschlieÃlich Jahresrabatt. 6514 6515## Pro-Testphase 6516 6517Community-Nutzer können Pro **14 Tage** kostenlos testen. Die Testphase bringt **${M} Credits** dazu (zusammen mit deinen Community-Credits also ${V}) und schaltet die Pro-Funktionen frei. Die Bonus-Credits verfallen mit dem Ende der Testphase. Wenn du schon ein bezahltes Pro-Abo hattest, wird die Testphase nicht erneut angeboten und du kannst direkt abonnieren. 6518 6519## Plan wechseln 6520 65211. Gehe zu **Konto â Abo** 65222. Wähle den neuen Plan 65233. Upgrades gelten sofort und werden anteilig berechnet
65244. Deine ungenutzten Credits gehen in den neuen Plan über 6525 6526> [!TIP] Starte mit Community (oder der Pro-Testphase), um die Plattform kennenzulernen, und wechsle zu Pro, wenn du mehr Credits und die Premium-Modelle brauchst. 6527`,zh:`# å¥é¤ 6528 6529\`\`\`anim 6530plans 6531\`\`\` 6532 6533éæ©æéåä½ éæ±çå¥é¤ã 6534 6535## å¥é¤å¯¹æ¯ 6536 6537| | Community | Pro | Business | Enterprise | 6538|---|-----------|-----|----------|------------| 6539| ä»·æ ¼ | å è´¹ | 25 ç¾å /æ | 50 ç¾å /æ | å®å¶ | 6540| AI 积å | ${y}ï¼ä¸æ¬¡æ§ï¼ | 100/æ | 200/æ | å®å¶ | 6541| é¡¹ç® | 2 | æ é | æ é | æ é | 6542| æ¯æ¡æ¶æ¯ç积å | æ åè´¹ç | æ´å° | æ´å° | å®å¶ | 6543| 模å | Autoãå¼æ¾æ¨¡åãGPT-6 Luna | å ¨é¨ï¼å æ¬ ClaudeãGPT-6.1 SolãGPT-5.6 Terra å Frontier | å ¨é¨ | å ¨é¨ | 6544| GitHub ä»åº | å ¬å¼ | ç§æ | ç§æ | ç§æ | 6545| æ管çäºå¡é®ä»¶ | 50/天 | 500/天 | 2,000/天 | å®å¶ | 6546| AI è§é¢ä¸è¯é³çæ | å¦ | æ¯ | æ¯ | æ¯ | 6547| æ¯æ | ç¤¾åº | é®ä»¶ | ä¼å | ä¸å±ç»ç | 6548 6549Enterprise è¿æä¾æ¬å°é¨ç½²ãSSO å SLA ä¿éãä»·æ ¼å·²å«å¢å¼ç¨æéå®ç¨ï¼[ä»·æ ¼é¡µé¢](/pricing)ä»¥ä½ çè´§å¸æ¾ç¤ºå½åä»·æ ¼ï¼å æ¬å¹´ä»ææ£ã 6550 6551## Pro è¯ç¨ 6552 6553Community ç¨æ·å¯ä»¥å è´¹è¯ç¨ Pro **14 天**ãè¯ç¨æé¢å¤æä¾ **${M} 积å**ï¼å ä¸ Community 积åå ± ${V} 积åï¼ï¼å¹¶è§£é Pro åè½ãèµ éç积åéè¯ç¨ç»æè失æãå¦æä½ æ¾ç»è®¢é è¿ä»è´¹ç Proï¼å°ä¸åæä¾è¯ç¨ï¼ä½ å¯ä»¥ç´æ¥è®¢é ã 6554 6555## å¦ä½æ´æ¢å¥é¤ 6556 65571. åå¾ **è´¦æ· â 订é ** 65582. éæ©æ°å¥é¤ 65593. å级ç«å³çæ并ææ¯ä¾è®¡è´¹ 65604. æªç¨å®ç积åä¼è½¬å ¥æ°å¥é¤ 6561 6562> [!TIP] å ç¨ Communityï¼æ Pro è¯ç¨ï¼ä½éªå¹³å°ï¼å½ä½ éè¦æ´å¤ç§¯ååé«çº§æ¨¡åæ¶ååçº§å° Proã 6563`},changelog:{es:`# Changelog 6564 6565\`\`\`anim 6566changelog 6567\`\`\` 6568 6569Ãltimas novedades y actualizaciones de la plataforma. 6570 6571--- 6572 6573## Septiembre 2026 6574 6575### ð Novedades 6576 6577- **Nuevos modelos**: Claude Opus 5.5 es ahora el modelo insignia de Anthropic en Coderblock, y GPT-6 Sol y GPT-6 Luna sustituyen a GPT-5.6 Sol y GPT-5.6 Luna. Claude Sonnet 5 sigue siendo el modelo Claude para el dÃa a dÃa. Ver [Modelos](/docs/models). 6578- **GPT-6.1 Sol** (30 de septiembre): el modo Sol pasa de GPT-6 Sol a GPT-6.1 Sol, al mismo precio y más fuerte en código. Ver [Modelos](/docs/models). 6579- **Selector con nombres reales**: cada opción muestra ahora el nombre real del modelo, agrupado por proveedor, junto a Auto y Frontier. 6580 6581### ð³ Planes 6582 6583- Planes actuales: Community (gratis, ${y} créditos una sola vez), Pro ($25/mes, 100 créditos al mes), Business ($50/mes, 200 créditos al mes) y Enterprise (a medida). Ver [Planes](/docs/plans). 6584 6585> [!INFO] Las entradas siguientes describen la plataforma tal como era entonces: algunos modelos, nombres de modos y precios que mencionan ya se han sustituido. 6586 6587--- 6588 6589## Marzo 2026 6590 6591### ð Novedades 6592 6593- **AI Chat: Stop y cola de mensajes**: Ahora puedes detener la ejecución de la IA en cualquier momento con el botón Stop. También puedes escribir mensajes mientras la IA trabaja: se ponen en cola y se envÃan automáticamente al terminar la ejecución actual, o puedes forzar el envÃo inmediato. 6594- **Modo Eco (Kimi K2.5)**: Tercer modo de generación con IA junto a Turbo (Sonnet 4.6) y Premium (Opus 4.6). Alrededor de un 80% más barato, ideal para tareas simples. 6595- **Variables de entorno en el chat**: Cuando la IA detecta la necesidad de una clave API, muestra un campo enmascarado directamente en el chat. Guarda con un clic. 6596- **Consultas SQL directas**: El agente de IA puede ejecutar consultas SQL (SELECT, INSERT, UPDATE, DELETE, DDL) directamente en la base de datos del proyecto, con capas de seguridad y confirmación del usuario para operaciones destructivas. 6597- **HIL (Human-in-the-Loop)**: El agente presenta botones de opción múltiple para decisiones ambiguas (alcance de la clonación, cambios en la base de datos, etc.). 6598- **Generación de imágenes en los proyectos**: La IA puede generar imágenes (banners hero, ilustraciones, iconos) directamente en los archivos del proyecto con DALL-E. 6599- **Social Login para los proyectos**: Proxy OAuth compartido de Coderblock con Google + GitHub. Tus usuarios pueden iniciar sesión con un clic. 6600- **Navegación atrás en la vista previa**: Botón atrás en el navegador de la vista previa + navegación SPA sin parpadeo blanco. 6601- **32 plantillas de producto**: Plataforma de reservas, tienda online, juego MMORPG, plataforma de contenidos, app de bienestar y mucho más. 6602- **Más de 20 plantillas de función**: Panel de administración, carrito, chat, CMS, dashboard, notificaciones, pagos, búsqueda, suscripciones, gestión de tareas. 6603 6604### â¡ Mejoras 6605 6606- **Hot-reload 5 veces más rápido**: De ~60-80s a ~7-13s para cambios de un solo archivo. Ruta optimizada con \`aws s3 cp\` dirigido. 6607- **UI del chat más limpia**: Bloques de herramientas plegables ("N herramientas usadas" al estilo Lovable), sin narración de razonamiento intermedio. 6608- **RAG mejorado**: Indexación automática para las plantillas de producto (de 148 a 284 puntos, de 99 a 103 archivos). 6609- **code_search reescrito**: Corregido un bug fundamental, filtros de exclusión de archivos, caché en memoria. 6610- **Prompt caching**: Reducción de coste de ~27-33% con el prompt c
6610aching de Anthropic. 6611- **Tema claro por defecto**: La homepage ahora usa tema claro; el modo oscuro por elección explÃcita. 6612 6613### ð Seguridad 6614 6615- **Row Level Security (RLS)**: Activado en las 66 tablas, acceso anónimo revocado en 58 tablas sensibles. 6616- **Backup completo de la base de datos**: pg_dump schema + data con PostgreSQL 17. 6617- **Rate limiting**: slowapi en todos los endpoints de la API. 6618- **Eliminación de cuenta autoservicio**: Cumplimiento del GDPR con limpieza completa de datos. 6619 6620### ð³ Pagos y facturación 6621 6622- **Arquitectura dual-Stripe**: Coderblock Inc (US/no-UE) + Coderblock Srl (IT/UE) con enrutado automático según el paÃs. 6623- **Fatture in Cloud**: Facturación electrónica italiana automática (SDI) para los pagos de la Srl. 6624- **Stripe Adaptive Pricing**: Precios base en USD con conversión automática + Stripe Tax para el IVA. 6625- **Paquetes de créditos**: 25/75/170/400 créditos a 10/25/50/100 $. 6626 6627### ð Corrección de errores 6628 6629- Corregido el import de ReactDOM en todas las plantillas base 6630- Corregida la sincronización bloqueada en la vista previa tras un timeout SSE 6631- Corregido el bucle infinito en operaciones destructivas con confirmación del usuario 6632- Corregida una inyección SQL en el parámetro \`order_dir\` 6633- Corregidos los nombres de usuario duplicados durante el social login 6634 6635--- 6636 6637## Febrero 2026 6638 6639### ð Novedades 6640 6641- **Arquitectura Single-Agent**: Migración del sistema multiagente Agno al patrón Claude Code: pensar â actuar â observar â corregir. 6642- **Sub-agentes en paralelo**: Hasta 3-4 sub-agentes concurrentes con \`asyncio.gather()\` para la generación de código frontend y backend.
6643- **Vista previa en Fly.io**: VMs reales con servidor de dev Vite y HMR en \`*.coderblock.dev\`. 6644- **Despliegue en producción**: Contenedor Docker unificado en \`*.coderblock.app\` con Fly.io. 6645- **Clonación de sitios**: La IA puede analizar y clonar sitios web existentes a partir de URLs. 6646- **Auto-descubrimiento de rutas**: \`import.meta.glob\` para el descubrimiento automático de páginas en el frontend. 6647 6648### â¡ Mejoras 6649 6650- **NeonDB resiliente**: pool_recycle, pool_pre_ping, mejor manejo de errores. 6651- **Web scraper con Playwright**: Navegador headless para sitios renderizados con JS, httpx como fallback. 6652- **Health check del frontend**: Detección automática de errores 500 de Vite con bucle de auto-fix. 6653 6654--- 6655 6656## Enero 2026 6657 6658### ð Lanzamiento 6659 6660- Lanzamiento de la plataforma Coderblock.ai 6661- **Claude Sonnet 4.6** como modelo principal 6662- **Claude Opus 4.6** para la generación premium de UI frontend 6663- **Claude Haiku 4.5** para enrutado y análisis 6664- Panel de proyectos, editor a pantalla dividida, gestor de archivos 6665- Sistema de créditos con planes Community y Pro 6666`,fr:`# Changelog 6667 6668\`\`\`anim 6669changelog 6670\`\`\` 6671 6672Dernières nouveautés et mises à jour de la plateforme. 6673 6674--- 6675 6676## Septembre 2026 6677 6678### ð Nouveautés 6679 6680- **Nouveaux modèles** : Claude Opus 5.5 est désormais le modèle phare d'Anthropic sur Coderblock, et GPT-6 Sol et GPT-6 Luna remplacent GPT-5.6 Sol et GPT-5.6 Luna. Claude Sonnet 5 reste le modèle Claude du quotidien. Voir [Modèles](/docs/models). 6681- **GPT-6.1 Sol** (30 septembre) : le mode Sol passe de GPT-6 Sol à GPT-6.1 Sol, au même prix et plus fort en code. Voir [Modèles](/docs/models). 6682- **Sélecteur avec les vrais noms** : chaque option affiche désormais le nom réel du modèle, regroupé par fournisseur, à côté d'Auto et Frontier. 6683 6684### ð³ Offres 6685 6686- Offres actuelles : Community (gratuit, ${y} crédits une seule fois), Pro (25 $/mois, 100 crédits par mois), Business (50 $/mois, 200 crédits par mois) et Enterprise (sur mesure). Voir [Offres](/docs/plans). 6687 6688> [!INFO] Les entrées ci-dessous décrivent la plateforme telle qu'elle était à l'époque : certains modèles, noms de modes et prix qu'elles citent ont depuis été remplacés. 6689 6690--- 6691 6692## Mars 2026 6693 6694### ð Nouveautés 6695 6696- **AI Chat : Stop et file de messages**: Tu peux désormais arrêter l'exécution de l'IA à tout moment avec le bouton Stop. Tu peux aussi écrire des messages pendant que l'IA travaille : ils sont mis en file et envoyés automatiquement à la fin de l'exécution en cours, ou tu peux forcer l'envoi immédiat. 6697- **Mode Eco (Kimi K2.5)**: Troisième mode de génération IA aux côtés de Turbo (Sonnet 4.6) et Premium (Opus 4.6). Environ 80 % moins cher, idéal pour les tâches simples. 6698- **Variables d'environnement dans le chat**: Quand l'IA détecte le besoin d'une clé API, elle affiche un champ masqué directement dans le chat. Enregistre en un clic. 6699- **Requêtes SQL directes**: L'agent IA peut exécuter des requêtes SQL (SELECT, INSERT, UPDATE, DELETE, DDL) directement sur la base de données du projet, avec des couches de sécurité et une confirmation de l'utilisateur pour les opérations destructrices. 6700- **HIL (Human-in-the-Loop)**: L'agent présente des boutons à choix multiples pour les décisions ambiguës (portée du clonage, changements de base de données, etc.). 6701- **Génération d'images dans les projets**: L'IA peut générer des images (bannières hero, illustrations, icônes) directement dans les fichiers du projet avec DALL-E. 6702- **Social Login pour les projets**: Proxy OAuth partagé Coderblock avec Google + GitHub. Tes utilisateurs peuvent se connecter en un clic. 6703- **Navigation arrière dans l'aperçu**: Bouton retour dans le navigateur de l'aperçu + navigation SPA sans flash blanc. 6704- **32 templates produit**: Plateforme de réservation, boutique en ligne, jeu MMORPG, plateforme de contenus, app bien-être et bien plus. 6705- **Plus de 20 templates de fonctionnalité**: Panneau d'administration, panier, chat, CMS, dashboard, notifications, paiements, recherche, abonnements, gestion des tâches. 6706 6707### â¡ Améliorations 6708 6709- **Hot-reload 5x plus rapide**: De ~60-80s à ~7-13s pour les changements d'un seul fichier. Chemin optimisé avec \`aws
6709s3 cp\` ciblé. 6710- **UI du chat épurée**: Blocs d'outils repliables (« N outils utilisés » à la Lovable), sans narration du raisonnement intermédiaire. 6711- **RAG amélioré**: Indexation automatique pour les templates produit (de 148 à 284 points, de 99 à 103 fichiers). 6712- **code_search réécrit**: Bug fondamental corrigé, filtres d'exclusion de fichiers, cache en mémoire. 6713- **Prompt caching**: Réduction des coûts de ~27-33 % avec le prompt caching d'Anthropic. 6714- **Thème clair par défaut**: La homepage utilise désormais le thème clair ; le mode sombre par choix explicite. 6715 6716### ð Sécurité 6717 6718- **Row Level Security (RLS)**: Activé sur les 66 tables, accès anonyme révoqué sur 58 tables sensibles. 6719- **Sauvegarde complète de la base de données**: pg_dump schema + data avec PostgreSQL 17. 6720- **Rate limiting**: slowapi sur tous les endpoints de l'API. 6721- **Suppression de compte en self-service**: Conformité GDPR avec nettoyage complet des données. 6722 6723### ð³ Paiements & facturation 6724 6725- **Architecture dual-Stripe**: Coderblock Inc (US/hors-UE) + Coderblock Srl (IT/UE) avec routage automatique selon le pays. 6726- **Fatture in Cloud**: Facturation électronique italienne automatique (SDI) pour les paiements de la Srl. 6727- **Stripe Adaptive Pricing**: Prix de base en USD avec conversion automatique + Stripe Tax pour la TVA. 6728- **Packs de crédits**: 25/75/170/400 crédits à 10/25/50/100 $. 6729 6730### ð Corrections de bugs 6731 6732- Corrigé l'import de ReactDOM dans tous les templates de base 6733- Corrigée la synchro bloquée dans l'aperçu après un timeout SSE 6734- Corrigée la boucle infinie sur les opérations destructrices avec confirmation utilisateur 6735- Corrigée une injection SQL dans le paramètre \`order_dir\` 6736- Corrigés les noms d'utilisateur en double lors du social login 6737 6738--- 6739 6740## Février 2026 6741 6742### ð Nouveautés 6743 6744- **Architecture Single-Agent**: Migration du système multi-agents Agno vers le pattern Claude Code : penser â agir â observer â corriger. 6745- **Sous-agents en parallèle**: Jusqu'à 3-4 sous-agents simultanés avec \`asyncio.gather()\` pour la génération de code frontend et backend. 6746- **Aperçu sur Fly.io**: Vraies VMs avec serveur de dev Vite et HMR sur \`*.coderblock.dev\`. 6747- **Déploiement en production**: Conteneur Docker unifié sur \`*.coderblock.app\` avec Fly.io. 6748- **Clonage de sites**: L'IA peut analyser et cloner des sites web existants à partir d'URLs. 6749- **Auto-découverte des routes**: \`import.meta.glob\` pour la découverte automatique des pages dans le frontend. 6750 6751### â¡ Améliorations 6752 6753- **NeonDB résilient**: pool_recycle, pool_pre_ping, meilleure gestion des erreurs. 6754- **Web scraper Playwright**: Navigateur headless pour les sites rendus en JS, httpx en fallback. 6755- **Health check du frontend**: Détection automatique des erreurs 500 de Vite avec boucle d'auto-fix. 6756 6757--- 6758 6759## Janvier 2026 6760 6761### ð Lancement 6762 6763- Lancement de la plateforme Coderblock.ai 6764- **Claude Sonnet 4.6** comme modèle principal 6765- **Claude Opus 4.6** pour la génération premium d'UI frontend 6766- **Claude Haiku 4.5** pour le routage et l'analyse 6767- Tableau de bord des projets, éditeur en écran partagé, gestionnaire de fichiers 6768- Système de crédits avec offres Community et Pro 6769`,de:`# Changelog 6770 6771\`\`\`anim 6772changelog 6773\`\`\` 6774 6775Neueste Nachrichten und Plattform-Updates. 6776 6777--- 6778 6779## September 2026 6780 6781### ð Neue Funktionen 6782 6783- **Neue Modelle**: Claude Opus 5.5 ist jetzt das Spitzenmodell von Anthropic auf Coderblock, und GPT-6 Sol und GPT-6 Luna ersetzen GPT-5.6 Sol und GPT-5.6 Luna. Claude Sonnet 5 bleibt das Claude-Modell für den Alltag. Siehe [Modelle](/docs/models). 6784- **GPT-6.1 Sol** (30. September): Der Sol-Modus wechselt von GPT-6 Sol zu GPT-6.1 Sol, zum gleichen Preis und stärker beim Code. Siehe [Modelle](/docs/models). 6785- **Modellauswahl mit echten Namen**: Jede Option zeigt jetzt den tatsächlichen Modellnamen, nach Anbieter gruppiert, neben Auto und Frontier. 6786 6787### ð³ Pläne 6788 6789- Aktuelle Pläne: Community (kostenlos, ${y} Credits einmalig), Pro (25 $/Monat, 100 Credits pro Monat), Business (50 $/Monat, 200 Credits pro Monat) und Enterprise (individuell). Siehe [Pläne](/docs/plans). 6790 6791> [!INFO] Die folgenden Einträge beschreiben die Plattform zum jeweiligen Zeitpunkt: Einige der genannten Modelle, Modusnamen und Preise wurden inzwischen ersetzt. 6792 6793--- 6794 6795## März 2026 6796 6797### ð Neue Funktionen 6798 6799- **AI Chat: Stop & Nachrichten-Warteschlange**: Du kannst die KI-Ausführung jetzt jederzeit mit dem Stop-Button anhalten. Du kannst auch Nachrichten schreiben, während die KI arbeitet: sie werden eingereiht und nach Abschluss der aktuellen Ausführung automatisch gesendet, oder du erzwingst das sofortige Senden. 6800- **Eco-Modus (Kimi K2.5)**: Dritter KI-Generierungsmodus neben Turbo (Sonnet 4.6) und Premium (Opus 4.6). Ru
6800nd 80 % günstiger, ideal für einfache Aufgaben. 6801- **Umgebungsvariablen im Chat**: Erkennt die KI den Bedarf an einem API-Schlüssel, zeigt sie ein maskiertes Eingabefeld direkt im Chat. Mit einem Klick speichern. 6802- **Direkte SQL-Abfragen**: Der KI-Agent kann SQL-Abfragen (SELECT, INSERT, UPDATE, DELETE, DDL) direkt auf der Projektdatenbank ausführen, mit Sicherheitsebenen und Nutzerbestätigung für destruktive Operationen. 6803- **HIL (Human-in-the-Loop)**: Der Agent zeigt Mehrfachauswahl-Buttons für mehrdeutige Entscheidungen (Klon-Umfang, Datenbankänderungen usw.). 6804- **Bildgenerierung in den Projekten**: Die KI kann Bilder (Hero-Banner, Illustrationen, Icons) direkt in den Projektdateien mit DALL-E generieren. 6805- **Social Login für die Projekte**: Gemeinsamer Coderblock-OAuth-Proxy mit Google + GitHub. Deine Nutzer können sich mit einem Klick anmelden. 6806- **Zurück-Navigation in der Vorschau**: Zurück-Button im Vorschau-Browser + SPA-Navigation ohne weiÃes Flackern. 6807- **32 Produktvorlagen**: Buchungsplattform, Online-Shop, MMORPG-Spiel, Content-Plattform, Wellness-App und vieles mehr. 6808- **Ãber 20 Funktionsvorlagen**: Admin-Panel, Warenkorb, Chat, CMS, Dashboard, Benachrichtigungen, Zahlungen, Suche, Abos, Aufgabenverwaltung. 6809 6810### â¡ Verbesserungen 6811 6812- **5x schnelleres Hot-Reload**: Von ~60-80s auf ~7-13s bei Einzeldatei-Ãnderungen. Optimierter Pfad mit gezieltem \`aws s3 cp\`. 6813- **Aufgeräumte Chat-UI**: Einklappbare Tool-Blöcke (âN Tools verwendet" à la Lovable), keine Zwischen-Reasoning-Narration. 6814- **Verbessertes RAG**: Automatische Indizierung für Produktvorlagen (von 148 auf 284 Punkte, von 99 auf 103 Dateien). 6815- **code_search neu geschrieben**: Fundamentaler Bug behoben, Dateiausschluss-Filter, In-Memory-Cache. 6816- **Prompt Caching**: ~27-33 % Kostenreduktion mit Anthropics Prompt Caching. 6817- **Helles Theme als Standard**: Die Homepage nutzt jetzt das helle Theme; Dark Mode auf ausdrückliche Wahl. 6818 6819### ð Sicherheit 6820 6821- **Row Level Security (RLS)**: Auf allen 66 Tabellen aktiviert, anonymer Zugriff auf 58 sensiblen Tabellen entzogen. 6822- **Vollständiges Datenbank-Backup**: pg_dump schema + data mit PostgreSQL 17. 6823- **Rate Limiting**: slowapi auf allen API-Endpoints. 6824- **Self-Service-Kontolöschung**: DSGVO-Konformität mit vollständiger Datenbereinigung. 6825 6826### ð³ Zahlungen & Abrechnung 6827 6828- **Dual-Stripe-Architektur**: Coderblock Inc (US/Nicht-EU) + Coderblock Srl (IT/EU) mit automatischem länderbasiertem Routing. 6829- **Fatture in Cloud**: Automatische italienische E-Rechnung (SDI) für Srl-Zahlungen. 6830- **Stripe Adaptive Pricing**: USD-Basispreise mit automatischer Umrechnung + Stripe Tax für die MwSt. 6831- **Credit-Pakete**: 25/75/170/400 Credits zu 10/25/50/100 $. 6832 6833### ð Fehlerbehebungen 6834 6835- ReactDOM-Import in allen Basisvorlagen korrigiert 6836- Hängende Synchronisation in der Vorschau nach SSE-Timeout behoben 6837- Endlosschleife bei destruktiven Operationen mit Nutzerbestätigung behoben 6838- SQL-Injection im Parameter \`order_dir\` behoben 6839- Doppelte Nutzernamen beim Social Login behoben 6840 6841--- 6842 6843## Februar 2026 6844 6845### ð Neue Funktionen 6846 6847- **Single-Agent-Architektur**: Migration vom Multi-Agent-System Agno zum Claude-Code-Muster: denken â handeln â beobachten â korrigieren. 6848- **Parallele Sub-Agenten**: Bis zu 3-4 gleichzeitige Sub-Agenten mit \`asyncio.gather()\` für die Frontend- und Backend-Codegenerierung. 6849- **Vorschau auf Fly.io**: Echte VMs mit Vite-Dev-Server und HMR auf \`*.coderblock.dev\`. 6850- **Produktions-Deployment**: Einheitlicher Docker-Container auf \`*.coderblock.app\` mit Fly.io. 6851- **Website-Klonen**: Die KI kann bestehende Websites aus URLs analysieren und klonen. 6852- **Automatische Routen-Erkennung**: \`import.meta.glob\` zur automatischen Seitenerkennung im Frontend. 6853 6854### â¡ Verbesserungen 6855 6856- **Resilientes NeonDB**: pool_recycle, pool_pre_ping, verbesserte Fehlerbehandlung. 6857- **Playwright-Web-Scraper**: Headless-Browser für JS-gerenderte Seiten, httpx als Fallback. 6858- **Frontend-Health-Check**: Automatische Erkennung von Vite-500-Fehlern mit Auto-Fix-Schleife. 6859 6860--- 6861 6862## Januar 2026 6863 6864### ð Start 6865 6866- Start der Plattform Coderblock.ai 6867- **Claude Sonnet 4.6** als primäres Modell 6868- **Claude Opus 4.6** für die Premium-Frontend-UI-Generierung 6869- **Claude Haiku 4.5** für Routing und Analyse 6870- Projekt-Dashboard, Split-Screen-Editor, Dateimanager 6871- Credit-System mit Community- und Pro-Plänen 6872`,zh:`# æ´æ°æ¥å¿ 6873 6874\`\`\`anim 6875changelog 6876\`\`\` 6877 6878å¹³å°çææ°å¨æä¸æ´æ°ã 6879 6880--- 6881 6882## 2026 å¹´ 9 æ 6883 6884### ð æ°åè½ 6885 6886- **æ°æ¨¡å**ï¼Claude Opus 5.5 ç°ä¸º Coderblock ä¸ Anthropic çæè°æ¨¡åï¼GPT-6 Sol å GPT-6 Luna åä»£äº GPT-5.6 Sol å GPT-5.6 LunaãClaude Sonnet 5 ä»æ¯æ¥å¸¸ä½¿ç¨ç Claude 模åãåè§[模å](/docs/models)ã 6887- **GPT-6.1 Sol**ï¼9 æ 30 æ¥ï¼ï¼Sol 模å¼ç± GPT-6 Sol å级为 GPT-6.
68871 Solï¼ä»·æ ¼ä¸åï¼ç¼ç¨è½åæ´å¼ºãåè§[模å](/docs/models)ã 6888- **æ¾ç¤ºçå®å称ç模åéæ©å¨**ï¼æ¯ä¸ªé项ç°å¨é½æ¾ç¤ºå®é ç模åå称ï¼å¹¶ææä¾ååç»ï¼ä¸ Auto å Frontier 并åã 6889 6890### ð³ å¥é¤ 6891 6892- å½åå¥é¤ï¼Communityï¼å è´¹ï¼ä¸æ¬¡æ§ ${y} 积åï¼ãProï¼25 ç¾å /æï¼æ¯æ 100 积åï¼ãBusinessï¼50 ç¾å /æï¼æ¯æ 200 积åï¼å Enterpriseï¼å®å¶ï¼ãåè§[å¥é¤](/docs/plans)ã 6893 6894> [!INFO] 以ä¸æ¡ç®æè¿°çæ¯å½æ¶çå¹³å°ï¼å ¶ä¸æå°çé¨å模åã模å¼å称åä»·æ ¼å·²è¢«æ¿æ¢ã 6895 6896--- 6897 6898## 2026 å¹´ 3 æ 6899 6900### ð æ°åè½ 6901 6902- **AI Chatï¼åæ¢ä¸æ¶æ¯éå**ï¼ç°å¨ä½ å¯ä»¥éæ¶ç¨ Stop æé®åæ¢ AI æ§è¡ãä½ ä¹å¯ä»¥å¨ AI å·¥ä½æ¶è¾å ¥æ¶æ¯ï¼å®ä»¬ä¼è¿å ¥éåï¼å¹¶å¨å½åæ§è¡å®æåèªå¨åéï¼æè ä½ å¯ä»¥å¼ºå¶ç«å³åéã 6903- **Eco 模å¼ï¼Kimi K2.5ï¼**ï¼ç»§ Turboï¼Sonnet 4.6ï¼å Premiumï¼Opus 4.6ï¼ä¹åç第ä¸ç§ AI çæ模å¼ã便å®çº¦ 80%ï¼éåç®åä»»å¡ã 6904- **è天ä¸çç¯å¢åé**ï¼å½ AI æ£æµå°éè¦ API å¯é¥æ¶ï¼ä¼ç´æ¥å¨è天ä¸æ¾ç¤ºä¸ä¸ªé®ç½©è¾å ¥æ¡ãä¸é®ä¿åã 6905- **ç´æ¥ SQL æ¥è¯¢**ï¼AI æºè½ä½å¯ç´æ¥å¨é¡¹ç®æ°æ®åºä¸æ§è¡ SQL æ¥è¯¢ï¼SELECTãINSERTãUPDATEãDELETEãDDLï¼ï¼å¹¶å¸¦æå®å ¨å±ï¼ç ´åæ§æä½éç¨æ·ç¡®è®¤ã 6906- **HILï¼Human-in-the-Loopï¼**ï¼å¯¹äºå«ç³çå³çï¼å éèå´ãæ°æ®åºæ´æ¹çï¼ï¼æºè½ä½ä¼ç»åºå¤éæé®ã 6907- **项ç®ä¸çå¾ççæ**ï¼AI å¯ç¨ DALL-E ç´æ¥å¨é¡¹ç®æ件ä¸çæå¾çï¼ä¸»è§è§æ¨ªå¹ ãæå¾ãå¾æ ï¼ã 6908- **项ç®ç社交ç»å½**ï¼Coderblock å ±äº« OAuth 代çï¼æ¯æ Google + GitHubãä½ çç¨æ·å¯ä¸é®ç»å½ã 6909- **é¢è§ä¸çåé导èª**ï¼é¢è§æµè§å¨ä¸çåéæé® + æ ç½å±éªçç SPA 导èªã 6910- **32 个产å模æ¿**ï¼é¢è®¢å¹³å°ãå¨çº¿ååºãMMORPG 游æãå 容平å°ãå¥åº·åºç¨ççã 6911- **20+ 个åè½æ¨¡æ¿**ï¼åå°ç®¡çãè´ç©è½¦ãè天ãCMSãçæ¿ãéç¥ãæ¯ä»ãæç´¢ã订é ãä»»å¡ç®¡çã 6912 6913### â¡ æ¹è¿ 6914 6915- **çé载快 5 å**ï¼åæ件æ´æ¹ä»çº¦ 60-80 ç§éå°çº¦ 7-13 ç§ã使ç¨å®å \`aws s3 cp\` ä¼åè·¯å¾ã 6916- **æ´ç®æ´çè天 UI**ï¼å¯æå çå·¥å ·åºåï¼Lovable é£æ ¼çâ使ç¨äº N ä¸ªå·¥å ·âï¼ï¼ä¸ååè¿°ä¸é´æ¨çã 6917- **æ¹è¿ç RAG**ï¼äº§å模æ¿èªå¨ç´¢å¼ï¼ä» 148 å¢è³ 284 个ç¹ï¼ä» 99 å¢è³ 103 个æ件ï¼ã 6918- **éå code_search**ï¼ä¿®å¤äºä¸ä¸ªæ ¹æ¬æ§ç¼ºé·ï¼å¢å æ件æé¤è¿æ»¤å¨ä¸å åç¼åã 6919- **Prompt caching**ï¼ä½¿ç¨ Anthropic ç prompt caching éä½çº¦ 27-33% ææ¬ã 6920- **é»è®¤æµ è²ä¸»é¢**ï¼é¦é¡µç°ä½¿ç¨æµ è²ä¸»é¢ï¼æè²æ¨¡å¼éæ¾å¼éæ©ã 6921 6922### ð å®å ¨ 6923 6924- **è¡çº§å®å ¨ï¼RLSï¼**ï¼å¨å ¨é¨ 66 å¼ è¡¨ä¸å¯ç¨ï¼å¯¹ 58 å¼ ææ表æ¤éå¿å访é®ã 6925- **å®æ´æ°æ®åºå¤ä»½**ï¼ä½¿ç¨ PostgreSQL 17 ç pg_dump ç»æ + æ°æ®ã 6926- **éçéå¶**ï¼ææ API 端ç¹ä½¿ç¨ slowapiã 6927- **èªå©è´¦æ·å é¤**ï¼ç¬¦å GDPRï¼å®æ´æ¸ çæ°æ®ã 6928 6929### ð³ æ¯ä»ä¸è´¦å 6930 6931- **å Stripe æ¶æ**ï¼Coderblock Incï¼ç¾å½/é欧çï¼+ Coderblock Srlï¼æ大å©/欧çï¼ï¼æå½å®¶èªå¨è·¯ç±ã 6932- **Fatture in Cloud**ï¼ä¸º Srl ä»æ¬¾èªå¨å¼å ·æ大å©çµåå票ï¼SDIï¼ã 6933- **Stripe Adaptive Pricing**ï¼ä»¥ç¾å 为åºå价并èªå¨æ¢ç® + Stripe Tax 计ç®å¢å¼ç¨ã 6934- **积åå¥é¤**ï¼25/75/170/400 积åï¼å®ä»· 10/25/50/100 ç¾å ã 6935 6936### ð 缺é·ä¿®å¤ 6937 6938- ä¿®å¤ææåºç¡æ¨¡æ¿ä¸ç ReactDOM å¯¼å ¥ 6939- ä¿®å¤ SSE è¶ æ¶åé¢è§ä¸å¡ä½çåæ¥ 6940- ä¿®å¤å¸¦ç¨æ·ç¡®è®¤çç ´åæ§æä½ä¸çæ éå¾ªç¯ 6941- ä¿®å¤ \`order_dir\` åæ°ä¸ç SQL æ³¨å ¥ 6942- ä¿®å¤ç¤¾äº¤ç»å½æ¶çéå¤ç¨æ·å 6943 6944--- 6945 6946## 2026 å¹´ 2 æ 6947 6948### ð æ°åè½ 6949 6950- **åæºè½ä½æ¶æ**ï¼ä»å¤æºè½ä½ Agno ç³»ç»è¿ç§»å° Claude Code 模å¼ï¼æè â è¡å¨ â è§å¯ â çº æ£ã 6951- **并è¡åæºè½ä½**ï¼ä½¿ç¨ \`asyncio.gather()\` åæ¶æå¤ 3-4 个åæºè½ä½è¿è¡å端ä¸å端代ç çæã 6952- **Fly.io ä¸çé¢è§**ï¼å¨ \`*.coderblock.dev\` ä¸è¿è¡å¸¦ Vite å¼åæå¡å¨ä¸ HMR ççå®èææºã 6953- **ç产é¨ç½²**ï¼ä½¿ç¨ Fly.io å¨ \`*.coderblock.app\` ä¸çç»ä¸ Docker 容å¨ã 6954- **ç½ç«å é**ï¼AI å¯ä»¥ä» URL åæ并å éç°æç½ç«ã 6955- **è·¯ç±èªå¨åç°**ï¼ä½¿ç¨ \`import.meta.glob\` å¨å端èªå¨åç°é
6955¡µé¢ã 6956 6957### â¡ æ¹è¿ 6958 6959- **æé§æ§ç NeonDB**ï¼pool_recycleãpool_pre_pingãæ¹è¿çé误å¤çã 6960- **Playwright ç½é¡µæåå¨**ï¼ä¸º JS 渲æçç«ç¹æä¾æ 头æµè§å¨ï¼httpx ä½ä¸ºåéã 6961- **å端å¥åº·æ£æ¥**ï¼èªå¨æ£æµ Vite 500 é误并è¿å ¥èªå¨ä¿®å¤å¾ªç¯ã 6962 6963--- 6964 6965## 2026 å¹´ 1 æ 6966 6967### ð åå¸ 6968 6969- Coderblock.ai å¹³å°åå¸ 6970- **Claude Sonnet 4.6** ä½ä¸ºä¸»æ¨¡å 6971- **Claude Opus 4.6** ç¨äºé«çº§å端 UI çæ 6972- **Claude Haiku 4.5** ç¨äºè·¯ç±ä¸åæ 6973- 项ç®ä»ªè¡¨çãåå±ç¼è¾å¨ãæ件管çå¨ 6974- 带 Community ä¸ Pro å¥é¤ç积åç³»ç» 6975`}};function ui(a,n){return Z[a]?.[n]??ci[a]?.[n]??Z[a]?.en??O(Z[a],n)??mi(a,n)}const ae=new Map;function pi(a){const n=ae.get(a);if(n)return n;const i=X.list(a).then(s=>{const o={};for(const r of s)o[r.slug]=r;return o}).catch(()=>({}));return ae.set(a,i),i}const Z={welcome:{it:`# Benvenuto su Coderblock 6976 6977\`\`\`anim 6978build-loop 6979\`\`\` 6980 6981Coderblock è una piattaforma di **vibe coding** che ti permette di creare applicazioni web fullstack (frontend, backend e database) semplicemente descrivendo ciò che vuoi in linguaggio naturale. Nessuna esperienza di programmazione richiesta: il nostro agente AI si occupa di tutto, dalla struttura delle pagine alla logica del server, fino al deploy in produzione. 6982 6983## Cos'è il Vibe Coding? 6984 6985Il **vibe coding** è un nuovo paradigma di sviluppo software in cui descrivi la tua idea e l'intelligenza artificiale scrive il codice per te. A differenza dei classici website builder drag-and-drop, con Coderblock ottieni codice vero e pulito (React, TypeScript, Tailwind CSS per il frontend, Python e FastAPI per il backend) che puoi esportare, modificare e controllare completamente. 6986 6987## Come funziona 6988 69891. **Descrivi** ciò che vuoi costruire in linguaggio naturale (italiano o inglese) 69902. L'**agente AI** analizza la richiesta, pianifica le modifiche e genera codice in tempo reale 69913. **Anteprima live**: vedi le modifiche istantaneamente nel browser su \`*.coderblock.dev\` 69924. **Itera**: continua a conversare per aggiungere funzionalità , correggere bug o perfezionare il design 69935. **Pubblica** con un click su un dominio \`.coderblock.app\` o sul tuo dominio personalizzato 6994 6995## Cosa puoi costruire 6996 6997Coderblock è pensato per creare applicazioni web complete. Ecco alcuni esempi: 6998 6999- **E-commerce**: catalogo prodotti, carrello, checkout con Stripe 7000- **Piattaforme di prenotazione**: calendari, disponibilità , pagamenti 7001- **Dashboard analitiche**: grafici, metriche, esportazione dati 7002- **Blog e CMS**: gestione contenuti, categorie, SEO 7003- **SaaS**: autenticazione, dashboard utente, abbonamenti 7004- **Portfolio e landing page**: design responsive, animazioni, form di contatto 7005- **Giochi browser**: con Phaser.js o Three.js per esperienze 3D 7006 7007## Lo stack tecnologico 7008 7009| Componente | Tecnologia | 7010|-----------|------------| 7011| Frontend | React 18 + TypeScript + Vite + Tailwind CSS | 7012| Backend | Python + FastAPI | 7013| Database | NeonDB (PostgreSQL serverless) | 7014| Storage file | AWS S3 | 7015| Preview | Fly.io VM con Vite HMR | 7016| Produzione | Fly.io Docker container | 7017| Pagamenti | Stripe | 7018| Email | Resend | 7019| Auth | Social login (Google, GitHub) | 7020 7021> [!INFO] Coderblock offre due tipi di progetto: **Web app** (backend gestito, consigliato) e **Web Platform** (Python + FastAPI). La tabella qui sopra riflette la Web Platform; con la Web app il backend è incluso e gestito per te. Scopri le differenze in [Web app vs Web Platform](/docs/project-types). 7022 7023## Primi passi 7024 7025\`\`\`anim 7026create-project 7027\`\`\` 7028 7029- Crea un nuovo progetto dalla [dashboard](/apps) 7030- Scegli un **template prodotto** (32 app pronte all'uso) o un **progetto vuoto** 7031- Inizia a chattare con l'AI per costruire la tua app 7032- Usa l'**anteprima live** per vedere i risultati in tempo reale 7033- Quando sei soddisfatto, clicca **Deploy** per pubblicare 7034 7035> [!TIP] Usa prompt chiari e specifici per ottenere i migliori risultati. Invece di "fammi un sito", prova "Crea una landing page per un ristorante con hero section, menù e form di prenotazione". 7036 7037## Risorse 7038 7039| Risorsa | Link | 7040|---------|------| 7041| Dashboard | [coderblock.ai/apps](/apps) | 7042| Pricing | [coderblock.ai/pricing](/pricing) | 7043| Status | [status.coderblock.ai](https://status.coderblock.ai) | 7044`,en:`# Welcome to Coderblock 7045 7046\`\`\`anim 7047build-loop 7048\`\`\` 7049
7050Coderblock is a **vibe coding** platform that lets you create fullstack web applications (frontend, backend, and database) simply by describing what you want in natural language. No programming experience required: our AI agent handles everything, from page structure to server logic to production deployment. 7051 7052## What is Vibe Coding? 7053 7054**Vibe coding** is a new software development paradigm where you describe your idea and artificial intelligence writes the code for you. Unlike traditional drag-and-drop website builders, with Coderblock you get real, clean code (React, TypeScript, Tailwind CSS for the frontend, Python and FastAPI for the backend) that you can export, modify, and fully control. 7055 7056## How it works 7057 70581. **Describe** what you want to build in natural language (English or Italian) 70592. The **AI agent** analyzes your request, plans changes, and generates code in real-time 70603. **Live preview**: see changes instantly in the browser on \`*.coderblock.dev\` 70614. **Iterate**: keep chatting to add features, fix bugs, or refine the design 70625. **Publish** with one click to a \`.coderblock.app\` domain or your own custom domain 7063 7064## What you can build 7065 7066Coderblock is designed for building complete web applications. Here are some examples: 7067 7068- **E-commerce**: product catalog, cart, Stripe checkout 7069- **Booking platforms**: calendars, availability, payments 7070- **Analytics dashboards**: charts, metrics, data export 7071- **Blogs and CMS**: content management, categories, SEO 7072- **SaaS**: authentication, user dashboard, subscriptions 7073- **Portfolios and landing pages**: responsive design, animations, contact forms 7074- **Browser games**: with Phaser.js or Three.js for 3D experiences 7075 7076## The tech stack 7077 7078| Component | Technology | 7079|-----------|------------| 7080| Frontend | React 18 + TypeScript + Vite + Tailwind CSS | 7081| Backend | Python + FastAPI | 7082| Database | NeonDB (serverless PostgreSQL) | 7083| File storage | AWS S3 | 7084| Preview | Fly.io VM with Vite HMR | 7085| Production | Fly.io Docker container | 7086| Payments | Stripe | 7087| Email | Resend | 7088| Auth | Social login (Google, GitHub) | 7089 7090> [!INFO] Coderblock offers two project types: **Web app** (managed backend, recommended) and **Web Platform** (Python + FastAPI). The table above reflects Web Platform; with Web app the backend is included and managed for you. Learn more in [Web app vs Web Platform](/docs/project-types). 7091 7092## Getting started 7093 7094\`\`\`anim 7095create-project 7096\`\`\` 7097 7098- Create a new project from the [dashboard](/apps) 7099- Choose a **product template** (32 ready-to-use apps) or a **blank project** 7100- Start chatting with the AI to build your app 7101- Use the **live preview** to see results in real-time 7102- When you're happy, click **Deploy** to publish 7103 7104> [!TIP] Use clear, specific prompts for the best results. Instead of "make me a website", try "Create a landing page for a restaurant with hero section, menu, and reservation form". 7105 7106## Resources 7107 7108| Resource | Link | 7109|----------|------| 7110| Dashboard | [coderblock.ai/apps](/apps) | 7111| Pricing | [coderblock.ai/pricing](/pricing) | 7112| Status | [status.coderblock.ai](https://status.coderblock.ai) | 7113`},"project-types":{it:`# Web app vs Web Platform 7114 7115\`\`\`anim 7116project-types 7117\`\`\` 7118 7119Quando crei un nuovo progetto, Coderblock ti chiede di scegliere il **tipo di progetto**. à la prima decisione importante: definisce le tecnologie con cui l'AI costruirà la tua applicazione. Non serve essere tecnici â questa guida ti aiuta a scegliere in un minuto. 7120 7121## Le due opzioni in breve 7122 7123| | Web app | Web Platform | 7124|---|---|---| 7125| Ideale per | SaaS, dashboard, marketplace, app con AI | Integrazioni B2B, progetti ML/dati, team Python | 7126| Velocità di avvio | Massima (anteprima in pochi secondi) | Elevata | 7127| Backend | Incluso e gestito automaticamente | Python + FastAPI | 7128| Badge | Consigliato | Stabile | 7129 7130## Web app (consigliato) 7131 7132à la scelta **predefinita e consigliata** per la maggior parte dei progetti. Ottieni un'app web completa con tutto il "dietro le quinte" già pronto e gestito da Coderblock: 7133 7134- **Accesso e account utente** sicuri pronti all'uso (email/password e login social) 7135- **Database e archiviazione file** integrati 7136- **Aggiornamenti in tempo reale** e **funzioni AI** incluse 7137- **Anteprima live in pochi secondi** 7138 7139Non devi configurare nulla a livello tecnico: descrivi l'app e l'AI la costruisce. à perfetta per lanciare velocemente un prodotto, validare un'idea o creare un SaaS. 7140 7141> [!TIP] Se non sai quale scegliere, scegli **Web app**. Copre la grande maggioranza dei casi ed è il modo più rapido per arrivare online. 7142 7143## Web Platform 7144
7145Pensata per chi ha bisogno di un **backend su misura in Python**. à la scelta giusta per: 7146 7147- **Integrazioni B2B** complesse e API personalizzate 7148- **Machine learning, analisi dati** e logiche di calcolo 7149- Team che lavorano già nell'ecosistema **Python** 7150 7151Usa **Python + FastAPI** con un database PostgreSQL e si abbina ai template 3D (Three.js / React Three Fiber). 7152 7153> [!INFO] I **Template Prodotto** (es. piattaforma di prenotazione, negozio online) sono disponibili con **Web Platform**. Con **Web app** l'AI costruisce tutto da zero a partire dalla tua richiesta. 7154 7155## Tabella di confronto completa 7156 7157| Caratteristica | Web app | Web Platform | 7158|---|---|---| 7159| Frontend | React + TypeScript + Tailwind | React + TypeScript + Tailwind | 7160| Backend | Gestito (auth, DB, storage, AI) | Python + FastAPI | 7161| Database | Incluso | PostgreSQL | 7162| Login utenti | Pronto all'uso | Configurabile | 7163| Funzioni AI | Incluse (vedi AI Agents) | Disponibili | 7164| Template prodotto | Build su misura | 32 template pronti | 7165| Ideale per | SaaS, app AI, MVP | B2B, ML, integrazioni | 7166 7167## Come si sceglie e si cambia 7168 7169Scegli il tipo di progetto nella schermata di **creazione del progetto**, tramite le due card. La selezione guida le tecnologie e i suggerimenti dell'AI. 7170 7171> [!WARNING] Il tipo di progetto si imposta alla creazione. Se hai bisogno di cambiarlo, la via più semplice è creare un nuovo progetto con il tipo corretto. 7172 7173## E adesso? 7174 7175- Hai scelto **Web app**? Aggiungi chat e immagini AI dalla sezione [AI Agents](/docs/ai-agents). 7176- Vuoi partire da un template? Vedi [Template Prodotto](/docs/product-templates). 7177`,en:`# Web app vs Web Platform 7178 7179\`\`\`anim 7180project-types 7181\`\`\` 7182 7183When you create a new project, Coderblock asks you to choose a **project type**. It's the first important decision: it defines the technologies the AI will use to build your app. You don't need to be technical â this guide helps you choose in a minute. 7184 7185## The two options at a glance 7186 7187| | Web app | Web Platform | 7188|---|---|---| 7189| Best for | SaaS, dashboards, marketplaces, AI apps | B2B integrations, ML/data projects, Python teams | 7190| Time to start | Fastest (preview in seconds) | High | 7191| Backend | Included and managed automatically | Python + FastAPI | 7192| Badge | Recommended | Stable | 7193 7194## Web app (recommended) 7195 7196The **default and recommended** choice for most projects. You get a complete web app with all the "behind the scenes" already set up and managed by Coderblock: 7197 7198- Secure **sign-in & user accounts** out of the box (email/password and social login) 7199- Built-in **database & file storage** 7200- **Realtime updates** and **AI features** included 7201- **Live preview in seconds** 7202 7203You don't configure anything technical: describe the app and the AI builds it. Perfect for launching a product fast, validating an idea, or building a SaaS. 7204 7205> [!TIP] If you're unsure, choose **Web app**. It covers the vast majority of cases and is the fastest way to get online. 7206 7207## Web Platform 7208 7209Built for those who need a **custom Python backend**. It's the right choice for: 7210 7211- Complex **B2B integrations** and custom APIs 7212- **Machine learning, data analysis** and computation logic 7213- Teams already working in the **Python** ecosystem 7214 7215It uses **Python + FastAPI** with a PostgreSQL database and pairs with the 3D templates (Three.js / React Three Fiber). 7216 7217> [!INFO] **Product Templates** (e.g. booking platform, online store) are available on **Web Platform**. With **Web app** the AI builds everything from scratch based on your request. 7218 7219## Full comparison 7220 7221| Feature | Web app | Web Platform | 7222|---|---|---| 7223| Frontend | React + TypeScript + Tailwind | React + TypeScript + Tailwind | 7224| Backend | Managed (auth, DB, storage, AI) | Python + FastAPI | 7225| Database | Included | PostgreSQL | 7226| User login | Out of the box | Configurable | 7227| AI features | Included (see AI Agents) | Available | 7228| Product templates | Custom build | 32 ready templates | 7229| Best for | SaaS, AI apps, MVP | B2B, ML, integrations | 7230 7231## How to choose and change it 7232 7233Pick the project type on the **project creation** screen, using the two cards. The choice drives the technologies and the AI's suggestions. 7234 7235> [!WARNING] The project type is set at creation time. If you need to change it, the simplest path is to create a new project with the correct type. 7236 7237## What's next? 7238 7239- Chose **Web app**? Add AI chat and images from the [AI Agents](/docs/ai-agents) section. 7240- Want to start from a template? See [Product Templates](/docs/product-templates). 7241`},"ai-agents":{it:`# AI Agents del progetto 7242 7243\`\`\`anim 7244agents-team 7245\`\`\` 7246 7247Ogni progetto **Web app** ha una scheda **AI Agents** nell'editor: è il pannello di controllo di tutte le funzionalità di intelligenza artificiale della tua applicazione. Qui vedi quali agenti AI sono attivi, come sono collegati e li configuri â senza scrivere c
7247odice e senza chiavi API. 7248 7249## Cos'è la scheda AI Agents 7250 7251Apri un progetto e seleziona la scheda **AI Agents** in alto. Vedrai un **diagramma** che mostra, per ogni funzione AI: 7252 7253- la **pagina o il componente** della tua app che la usa, 7254- l'**endpoint** che la elabora, 7255- il **Coderblock AI Gateway**, il motore che parla con i modelli AI, 7256- il **modello** in uso (per la chat o per le immagini). 7257 7258Il diagramma si aggiorna automaticamente ogni volta che aggiungi una nuova funzione AI tramite l'AI Chat. 7259 7260## Gli agenti pronti all'uso 7261 7262| Agente | Cosa fa | 7263|---|---| 7264| **AI Chat** | Una chat che risponde agli utenti in tempo reale | 7265| **AI Image** | Genera immagini a partire da una descrizione testuale | 7266 7267> [!INFO] Tutte le funzioni AI passano dal **Coderblock AI Gateway**: non devi inserire chiavi API di OpenAI, Anthropic o Google. L'utilizzo viene scalato dai tuoi **crediti** Coderblock. 7268 7269## Aggiungere un nuovo agente 7270 7271Per aggiungere una funzione AI basta chiederlo nell'**AI Chat** del progetto, in linguaggio naturale. Esempi: 7272 7273- "Aggiungi una chat AI di assistenza che risponde alle domande dei visitatori" 7274- "Aggiungi un generatore di immagini dalla descrizione" 7275 7276Una volta creato, l'agente appare automaticamente nella scheda **AI Agents**. 7277 7278## Configurare un agente 7279 7280Clicca **Configura** in alto a destra per aprire il pannello laterale. Per ogni agente puoi: 7281 7282### Cambiare il modello AI 7283 7284Dal menu a tendina **Modello AI** scegli il modello da usare: 7285 7286- Per gli agenti **di chat**: modelli di conversazione (es. Claude Haiku/Sonnet, GPT-4o / GPT-4o mini) 7287- Per gli agenti di **immagini**: modelli di generazione immagini (es. Gemini 2.5 Flash Image) 7288 7289Quando cambi il modello, Coderblock aggiorna automaticamente il codice della funzione e lo ripubblica: il nuovo modello è attivo subito, senza alcun intervento tecnico. 7290 7291> [!TIP] I modelli più leggeri (Haiku, GPT-4o mini) sono più veloci ed economici; quelli più potenti (Sonnet, GPT-4o) danno risposte più curate. Puoi cambiarli quando vuoi. 7292 7293### Knowledge base (RAG) 7294 7295Per gli agenti di chat puoi allegare documenti che l'AI userà per rispondere. Vedi la guida dedicata: [Knowledge base (RAG)](/docs/ai-knowledge-base). 7296 7297## Crediti e costi 7298
7299Ogni richiesta AI consuma crediti in base al modello scelto. Trovi i dettagli nella sezione [Crediti](/docs/credits). 7300`,en:`# Project AI Agents 7301 7302\`\`\`anim 7303agents-team 7304\`\`\` 7305 7306Every **Web app** project has an **AI Agents** tab in the editor: it's the control panel for all the AI features in your application. Here you see which AI agents are active, how they're wired up, and you configure them â with no code and no API keys. 7307 7308## What the AI Agents tab is 7309 7310Open a project and select the **AI Agents** tab at the top. You'll see a **diagram** that shows, for each AI feature: 7311 7312- the **page or component** of your app that uses it, 7313- the **endpoint** that processes it, 7314- the **Coderblock AI Gateway**, the engine that talks to the AI models, 7315- the **model** in use (for chat or for images). 7316 7317The diagram updates automatically every time you add a new AI feature through the AI Chat. 7318 7319## The agents you get out of the box 7320 7321| Agent | What it does | 7322|---|---| 7323| **AI Chat** | A chat that answers your users in real time | 7324| **AI Image** | Generates images from a text description | 7325 7326> [!INFO] Every AI feature goes through the **Coderblock AI Gateway**: you never enter OpenAI, Anthropic or Google API keys. Usage is billed against your Coderblock **credits**. 7327 7328## Adding a new agent 7329 7330To add an AI feature, just ask for it in the project's **AI Chat**, in plain language. Examples: 7331 7332- "Add a support AI chat that answers visitor questions" 7333- "Add an image generator from a description" 7334 7335Once created, the agent automatically appears in the **AI Agents** tab. 7336 7337## Configuring an agent 7338 7339Click **Configure** in the top right to open the side panel. For each agent you can: 7340 7341### Switch the AI model 7342 7343From the **AI model** dropdown choose the model to use: 7344 7345- For **chat** agents: conversation models (e.g. Claude Haiku/Sonnet, GPT-4o / GPT-4o mini) 7346- For **image** agents: image-generation models (e.g. Gemini 2.5 Flash Image) 7347 7348When you switch the model, Coderblock automatically updates the function's code and redeploys it: the new model is active immediately, with no technical work. 7349 7350> [!TIP] Lighter models (Haiku, GPT-4o mini) are faster and cheaper; more powerful ones (Sonnet, GPT-4o) give more polished answers. Change them whenever you like. 7351 7352### Knowledge base (RAG) 7353 7354For chat agents you can attach documents the AI will use to answer. See the dedicated guide: [Knowledge base (RAG)](/docs/ai-knowledge-base). 7355 7356## Credits and cost 7357 7358Each AI request consumes credits depending on the chosen model. Details are in the [Credits](/docs/credits) section. 7359`},"ai-knowledge-base":{it:`# Knowledge base (RAG) 7360 7361\`\`\`anim 7362knowledge-base 7363\`\`\` 7364 7365La **knowledge base** ti permette di "addestrare" la chat AI della tua app con i **tuoi documenti**: l'AI risponderà agli utenti basandosi sui contenuti che hai caricato (listini, FAQ, policy, manuali, ecc.). Questa tecnica si chiama **RAG** (Retrieval-Augmented Generation), ma a te basta caricare i file: al resto pensa Coderblock. 7366 7367## A cosa serve 7368 7369Senza knowledge base, la chat risponde con conoscenze generali. Con la knowledge base, risponde **anche** usando le informazioni specifiche della tua attività . Esempi: 7370 7371- Una FAQ aziendale per rispondere ai clienti 7372- Il listino prezzi e le condizioni di reso 7373- Un manuale di prodotto o una guida interna 7374 7375## Come aggiungere documenti 7376 73771. Apri la scheda **AI Agents** e clicca **Configura** 73782. Sull'agente di chat, vai alla sezione **Knowledge base (RAG)** 73793. Clicca **Carica file** (oppure **Testo** per incollare un testo) 73804. Il documento viene elaborato e diventa subito disponibile per l'AI 7381 7382I file vengono suddivisi in piccoli pezzi e indicizzati, così l'AI trova sempre la parte più pertinente alla domanda dell'utente. 7383 7384## Formati supportati 7385 7386| Formato | Supportato | 7387|---|---| 7388| Testo (.txt) | Sì | 7389| Markdown (.md) | Sì | 7390| CSV (.csv) | Sì | 7391| JSON (.json) | Sì | 7392| PDF / Word | Non ancora â incolla il testo | 7393 7394> [!TIP] Per i PDF, per ora copia e incolla il contenuto con il pulsante **Testo**. Documenti chiari e ben scritti danno risposte migliori. 7395 7396## Come l'AI usa i documenti 7397 7398Quando un utente fa una domanda nella chat, l'AI: 7399 74001. cerca nei tuoi documenti i passaggi più pertinenti, 74012. li usa come contesto per formulare la risposta, 74023. se l'informazione non c'è, lo dice e risponde con conoscenze generali. 7403 7404Tutto questo avviene **lato server**, in modo sicuro, ad ogni messaggio. 7405 7406## Gestire i documenti 7407 7408Nella stessa sezione vedi l'elenco dei documenti caricati, con il numero di "pezzi" indicizzati. Per rimuoverne uno, clicca l'icona del **cestino**: l'AI smetterà immediatamente di usarlo. 7409 7410## Privacy 7411 7412I documenti sono salvati nel database della **tua** app e usati solo dalla tua chat AI. Og
7412ni agente ha la sua knowledge base separata. 7413 7414> [!INFO] La knowledge base è disponibile per gli agenti di **chat**. La generazione di immagini non usa documenti. 7415`,en:`# Knowledge base (RAG) 7416 7417\`\`\`anim 7418knowledge-base 7419\`\`\` 7420 7421The **knowledge base** lets you "train" your app's AI chat with **your own documents**: the AI will answer your users based on the content you upload (price lists, FAQs, policies, manuals, etc.). This technique is called **RAG** (Retrieval-Augmented Generation), but all you have to do is upload the files â Coderblock handles the rest. 7422 7423## What it's for 7424 7425Without a knowledge base, the chat answers with general knowledge. With a knowledge base, it **also** answers using your business-specific information. Examples: 7426 7427- A company FAQ to answer customers 7428- Your price list and return policy 7429- A product manual or an internal guide 7430 7431## How to add documents 7432 74331. Open the **AI Agents** tab and click **Configure** 74342. On the chat agent, go to the **Knowledge base (RAG)** section 74353. Click **Upload file** (or **Text** to paste some text) 74364. The document is processed and becomes available to the AI right away 7437 7438Files are split into small pieces and indexed, so the AI always finds the part most relevant to the user's question. 7439 7440## Supported formats 7441 7442| Format | Supported | 7443|---|---| 7444| Text (.txt) | Yes | 7445| Markdown (.md) | Yes | 7446| CSV (.csv) | Yes | 7447| JSON (.json) | Yes | 7448| PDF / Word | Not yet â paste the text | 7449 7450> [!TIP] For PDFs, for now copy and paste the content with the **Text** button. Clear, well-written documents give better answers. 7451 7452## How the AI uses your documents 7453 7454When a user asks a question in the chat, the AI: 7455 74561. searches your documents for the most relevant passages, 74572. uses them as context to craft the answer, 74583. if the information isn't there, it says so and answers with general knowledge. 7459 7460All of this happens **server-side**, securely, on every message. 7461 7462## Managing documents 7463 7464In the same section you see the list of uploaded documents, with the number of indexed "pieces". To remove one, click the **trash** icon: the AI stops using it immediately. 7465 7466## Privacy 7467 7468Documents are stored in **your** app's database and used only by your AI chat. Each agent has its own separate knowledge base. 7469 7470> [!INFO] The knowledge base is available for **chat** agents. Image generation does not use documents. 7471`},"team-office":{it:`# Ufficio 3D & AI Agents 7472 7473\`\`\`anim 7474agents-team 7475\`\`\` 7476 7477Oltre all'AI che scrive codice, Coderblock ti mette a disposizione un **team di agenti AI specializzati** che collaborano al tuo progetto come farebbe un vero team. Puoi incontrarli in un **ufficio 3D** interattivo e configurarli uno per uno. 7478 7479## Il team di specialisti 7480 7481Ogni progetto può avere un team con ruoli diversi, ognuno esperto nel suo campo: 7482 7483| Ruolo | Si occupa di | 7484|---|---| 7485| **UX Design** | Esperienza utente, interfacce, usabilità | 7486| **Frontend** | La parte visibile dell'app | 7487| **Backend** | Logica server e gestione dei dati | 7488| **Architettura** | Struttura tecnica e scelte di fondo | 7489| **Cybersecurity** | Sicurezza e vulnerabilità | 7490| **Marketing** | Analisi di mercato, contenuti, SEO | 7491| **GTM** | Strategia di go-to-market | 7492| **Sales** | Prezzi, conversioni, vendite | 7493 7494## L'ufficio 3D 7495 7496L'**ufficio 3D** è uno spazio interattivo dove vedi i membri del team come personaggi in un ambiente tridimensionale. Puoi avvicinarti a un agente per parlarci, vederli "ragionare" e collaborare tra loro. à un modo immediato e visuale per gestire il tuo team AI. 7497 7498## Configurare un agente 7499 7500Ogni agente è **personalizzabile**. Per ciascuno puoi impostare: 7501 7502- **Modello AI**: quale modello usa per ragionare 7503- **Personalità ** e **tono**: come comunica 7504- **Istruzioni personalizzate**: linee guida specifiche per il tuo progetto 7505- **Creatività **: risposte più prevedibili o più creative 7506- **Attivo / non attivo**: accendi solo gli specialisti che ti servono 7507 7508## Come collaborano 7509 7510Gli agenti possono: 7511 7512- **Analizzare** il tuo progetto e proporre miglioramenti 7513- Generare **proposte** (suggerimenti, domande, richieste di collaborazione, review) 7514- Avviare **discussioni di team** su un argomento 7515 7516Quando un agente propone un'azione, la vedi come una **scheda**: puoi **accettarla** (la proposta viene passata all'AI Chat che la realizza) oppure ignorarla. 7517 7518> [!TIP] Usa il team per avere punti di vista diversi: chiedi al Marketing un'analisi della concorrenza, alla Cybersecurity un controllo di sicurezza, all'UX un miglioramento dell'interfaccia. 7519 7520## Crediti 7521 7522Anche le conversazioni e le analisi del team consumano crediti, in base al modello configurato per ogni agente. Vedi [Crediti](/docs/credits). 7523`,en:`# 3D Office & AI Agents 7524 7525\`\`\`anim 7526agents-team 7527\`\`\` 7528 7529Beyond the AI that writes code, Coderblock gives you a **team of specialized AI agents** that collaborate on your project the way a real team would. You can meet them in an interactive **3D office** and configure them one by one. 7530 7531## The team of specialists 7532 7533Each project can have a team with different roles, each an expert in its field: 7534 7535| Role | Focuses on | 7536|---|---| 7537| **UX Design** | User experience, interfaces, usability | 7538| **Frontend** | The visible part of the app | 7539| **Backend** | Server logic and data handling | 7540| **Architecture** | Technical structure and key decisions | 7541| **Cybersecurity** | Security and vulnerabilities |
7542| **Marketing** | Market analysis, content, SEO | 7543| **GTM** | Go-to-market strategy | 7544| **Sales** | Pricing, conversions, selling | 7545 7546## The 3D office 7547 7548The **3D office** is an interactive space where you see team members as characters in a three-dimensional environment. You can walk up to an agent to talk to them, watch them "think" and collaborate with each other. It's an immediate, visual way to manage your AI team. 7549 7550## Configuring an agent 7551 7552Every agent is **customizable**. For each one you can set: 7553 7554- **AI model**: which model it uses to reason 7555- **Personality** and **tone**: how it communicates 7556- **Custom instructions**: specific guidelines for your project 7557- **Creativity**: more predictable or more creative answers 7558- **Active / inactive**: turn on only the specialists you need 7559 7560## How they collaborate 7561 7562Agents can: 7563 7564- **Analyze** your project and propose improvements 7565- Generate **proposals** (suggestions, questions, collaboration requests, reviews) 7566- Start **team discussions** on a topic 7567 7568When an agent proposes an action, you see it as a **card**: you can **accept it** (the proposal is handed to the AI Chat, which carries it out) or ignore it. 7569 7570> [!TIP] Use the team for diverse perspectives: ask Marketing for a competitor analysis, Cybersecurity for a security check, UX for an interface improvement. 7571 7572## Credits 7573 7574Team conversations and analyses also consume credits, based on the model configured for each agent. See [Credits](/docs/credits). 7575`},"getting-started":{it:`# Guida Rapida 7576 7577\`\`\`anim 7578create-project 7579\`\`\` 7580 7581Inizia a creare la tua prima app in meno di 5 minuti. Questa guida ti porta dalla registrazione alla pubblicazione. 7582 7583## 1. Crea un account 7584
7585Registrati su [coderblock.ai](/signup) con email o Google SSO. Tutti i nuovi utenti ricevono **crediti gratuiti** per provare la piattaforma. 7586 7587## 2. Crea un progetto 7588 7589Dalla [dashboard](/apps), clicca **"Nuovo progetto"** e scegli tra: 7590 7591- **Template prodotto**: 32 app complete pronte all'uso (e-commerce, booking, dashboard, giochi, ecc.) Vengono copiate in 1-2 secondi. 7592- **Progetto vuoto**: inizia da zero con React + Vite + TypeScript + Tailwind CSS 7593 7594Dai un nome al progetto e opzionalmente una descrizione dell'app che vuoi costruire. 7595 7596## 3. L'interfaccia editor 7597 7598L'editor è diviso in due pannelli: 7599 7600- **Sinistra**: Chat AI + File manager + Code editor 7601- **Destra**: Anteprima live della tua app 7602 7603Nella parte inferiore della chat trovi: 7604- **Selettore del modello** (Auto, Frontier o un modello specifico, vedi [Modelli](/docs/models)) 7605- **Pulsante allegati** per caricare immagini di riferimento 7606- **Input testo** per le istruzioni all'AI 7607 7608## 4. Chatta con l'AI 7609 7610Scrivi nella chat cosa vuoi costruire. L'AI analizzerà la richiesta, genererà il codice e lo mostrerà nell'anteprima. Ecco alcuni esempi per iniziare: 7611 7612\`\`\` 7613Crea una landing page con hero section, features e pricing 7614\`\`\` 7615 7616\`\`\` 7617Aggiungi un form di contatto con validazione email e messaggio 7618\`\`\` 7619 7620\`\`\` 7621Crea una pagina "Chi siamo" con team section e timeline dell'azienda 7622\`\`\` 7623 7624### Suggerimenti per prompt efficaci 7625 7626- **Sii specifico**: "Crea un e-commerce per scarpe sportive con filtro per marca e taglia" è meglio di "Fammi un sito" 7627- **Un passo alla volta**: prima la struttura, poi i dettagli 7628- **Dai contesto**: puoi fare riferimento a file specifici, componenti o pagine esistenti 7629- **Carica screenshot**: usa l'allegato per caricare mockup o screenshot di siti che ti piacciono 7630 7631## 5. Anteprima live 7632 7633L'anteprima si avvia automaticamente su un dominio \`*.coderblock.dev\`: 7634- **Primo avvio**: ~60-90 secondi (la VM deve avviarsi) 7635- **Modifiche successive**: ~7-13 secondi (hot-reload mirato) 7636- **Navigazione**: puoi cliccare i link e navigare nella tua app direttamente nella preview 7637 7638## 6. Itera e perfeziona 7639 7640Continua a conversare con l'AI per: 7641- Aggiungere nuove pagine e funzionalità 7642- Modificare colori, font e layout 7643- Integrare servizi esterni (database, pagamenti, email) 7644- Correggere bug o problemi di layout 7645 7646## 7. Pubblica 7647 7648Quando sei soddisfatto del risultato: 76491. Clicca il pulsante **"Deploy"** nella barra superiore 76502. In 60-90 secondi la tua app sarà live su \`{id}.coderblock.app\` 76513. Opzionalmente, collega un dominio personalizzato 7652 7653> [!TIP] Non devi aspettare di aver finito tutto per pubblicare. Puoi fare deploy in qualsiasi momento e aggiornare successivamente. Gli aggiornamenti sono molto più veloci del primo deploy. 7654`,en:`# Getting Started 7655 7656\`\`\`anim 7657create-project 7658\`\`\` 7659 7660Start building your first app in under 5 minutes. This guide takes you from signup to publishing. 7661 7662## 1. Create an account 7663 7664Sign up at [coderblock.ai](/signup) with email or Google SSO. All new users receive **free credits** to try the platform. 7665 7666## 2. Create a project 7667 7668From the [dashboard](/apps), click **"New Project"** and choose: 7669 7670- **Product template**: 32 complete ready-to-use apps (e-commerce, booking, dashboard, games, etc.) Copied in 1-2 seconds. 7671- **Blank project**: start from scratch with React + Vite + TypeScript + Tailwind CSS 7672 7673Give your project a name and optionally a description of the app you want to build. 7674 7675## 3. The editor interface 7676 7677The editor is split into two panels: 7678 7679- **Left**: AI Chat + File manager + Code editor 7680- **Right**: Live preview of your app 7681 7682At the bottom of the chat you'll find: 7683- **Model picker** (Auto, Frontier or a specific model, see [Models](/docs/models)) 7684- **Attachment button** to upload reference images 7685- **Text input** for AI instructions 7686 7687## 4. Chat with the AI 7688 7689Type in the chat what you want to build. The AI will analyze your request, generate code, and show it in the preview. Here are some examples to get started: 7690 7691\`\`\` 7692Create a landing page with hero section, features and pricing 7693\`\`\` 7694 7695\`\`\` 7696Add a contact form with email and message validation 7697\`\`\` 7698 7699\`\`\` 7700Create an "About Us" page with team section and company timeline 7701\`\`\` 7702 7703### Tips for effective prompts 7704 7705- **Be specific**: "Create a sports shoe e-commerce with brand and size filters" is better than "Make me a website" 7706- **One step at a time**: first the structure, then the details 7707- **Give context**: you can reference specific files, components, or existing pages 7708- **Upload screenshots**: use the attachment to upload mockups or screenshots of sites you like 7709 7710## 5. Live preview 7711 7712The preview starts automatically on a \`*.coderblock.dev\` domain: 7713- **First start**: ~60-90 seconds (VM needs to boot) 7714- **Subsequent changes**: ~7-13 seconds (targeted hot-reload) 7715- **Navigation**: you can click links and navigate your app directly in the preview 7716 7717## 6. Iterate and refine 7718 7719Continue chatting with the AI to: 7720- Add new pages and features 7721- Modify colors, fonts, and layout 7722- Integrate external services (database, payments, email) 7723- Fix bugs or layout issues 7724 7725## 7. Publish 7726 7727When you're happy with the result: 77281. Click the **"Deploy"** button in the top bar 77292. In 60-90 seconds your app will be live at \`{id}.coderblock.app\` 77303. Optionally, connect a custom domain 7731 7732> [!TIP] You don't have to wait until everything is done to publish. You can deploy at any time and update later. Updates are much faster than the first deploy. 7733`},prompting:{it:`# Prompting 7734 7735\`\`\`anim 7736prompting 7737\`\`\` 7738 7739Scrivere buoni prompt è la chiave per ottenere risultati eccellenti da Coderblock. 7740 7741## Best practices 7742 7743### Sii specifico 7744 7745Invece di scrivere *"fammi un sito"*, prova: 7746 7747\`\`\` 7748Crea una landing page per un ristorante italiano con: 7749- Hero section con immagine di sfondo 7750- Menù con 3 categorie (antipasti, primi, secondi) 7751- Form di prenotazione tavolo 7752- Footer con mappa e contatti 7753\`\`\` 7754 7755### Dai contesto 7756 7757L'AI ha accesso a tutti i file del progetto. Se vuoi modificare qualcosa di specifico, menzionalo: 7758 7759\`\`\` 7760Nel componente Header.tsx, cambia il colore del logo da blu a verde 7761\`\`\` 7762 7763### Un passo alla volta 7764 7765Per progetti complessi, procedi per step: 7766 77671. Prima la struttura delle pagine 77682. Poi i componenti UI 77693. Infine la logica e le API 7770 7771> [!WARNING] Evita prompt troppo lunghi con molte richieste diverse. L'AI lavora meglio con task focalizzati. 7772 7773## Prompt di esempio 7774 7775| Obiettivo | Prompt | 7776|-----------|--------| 7777| Nuova pagina | *"Crea una pagina About con team section"* |
7778| Modifica stile | *"Cambia il tema in dark mode"* | 7779| Aggiunta feature | *"Aggiungi autenticazione con email e password"* | 7780| Fix bug | *"Il bottone submit non funziona, controlla il form"* | 7781| Integrazione | *"Integra Stripe per i pagamenti"* | 7782`,en:`# Prompting 7783 7784\`\`\`anim 7785prompting 7786\`\`\` 7787 7788Writing good prompts is the key to getting excellent results from Coderblock. 7789 7790## Best practices 7791 7792### Be specific 7793 7794Instead of writing *"make me a website"*, try: 7795 7796\`\`\` 7797Create a landing page for an Italian restaurant with: 7798- Hero section with background image 7799- Menu with 3 categories (appetizers, first courses, main courses) 7800- Table reservation form 7801- Footer with map and contacts 7802\`\`\` 7803 7804### Give context 7805 7806The AI has access to all project files. If you want to modify something specific, mention it: 7807 7808\`\`\` 7809In the Header.tsx component, change the logo color from blue to green 7810\`\`\` 7811 7812### One step at a time 7813 7814For complex projects, proceed in steps: 7815 78161. First the page structure 78172. Then UI components 78183. Finally logic and APIs 7819 7820> [!WARNING] Avoid very long prompts with many different requests. The AI works best with focused tasks. 7821 7822## Example prompts 7823 7824| Goal | Prompt | 7825|------|--------| 7826| New page | *"Create an About page with team section"* | 7827| Style change | *"Switch the theme to dark mode"* | 7828| Add feature | *"Add authentication with email and password"* | 7829| Fix bug | *"The submit button doesn't work, check the form"* | 7830| Integration | *"Integrate Stripe for payments"* | 7831`},modes:{it:`# Selettore del modello 7832 7833\`\`\`anim 7834modes 7835\`\`\` 7836 7837Scegli quale modello AI lavora sul tuo progetto dal **selettore del modello** in basso nella chat. Lo stesso selettore compare quando crei un nuovo progetto, e puoi cambiare modello in qualsiasi momento: progetto e conversazione restano gli stessi. 7838 7839## Le tre opzioni 7840 7841- **Auto**: la piattaforma sceglie un modello per ogni parte del lavoro, in base ai livelli di qualità che imposti. Usa modelli open efficienti nei costi. Disponibile in tutti i piani. 7842- **Frontier**: modelli frontier premium selezionati dal team di Coderblock, per la massima qualità . Consuma più crediti. Solo piani a pagamento. 7843- **Custom**: scegli tu un modello specifico. I modelli sono raggruppati per provider (**OpenAI**, **Anthropic**, **Open models**) e sotto il nome di ciascuno trovi il provider e la sua caratteristica principale. 7844 7845Punti di forza e limiti di ogni modello sono spiegati in [Modelli](/docs/models). 7846 7847## Livelli di qualità (Auto e Frontier) 7848 7849La prima volta che selezioni Auto o Frontier si apre una finestra con quattro manopole. Puoi riaprirla quando vuoi dall'icona a ingranaggio accanto al selettore. 7850 7851| Manopola | Cosa controlla | 7852|----------|----------------| 7853| **General AI Intelligence** | il modello che pianifica e coordina il lavoro | 7854| **Creativity & Design** | il modello che costruisce l'interfaccia | 7855| **Functionality & Database** | il modello che scrive logica e dati | 7856| **Adaptability** | il modello usato per ricerca e lettura | 7857 7858Ogni manopola va da **Low** a **Ultra High**. I livelli più alti usano modelli più forti e più crediti. Per Auto (e per Frontier quando disponibile) la finestra mostra una **stima** dei crediti per messaggio che si aggiorna mentre sposti le manopole. Auto e Frontier hanno impostazioni separate. 7859 7860## Livello di performance (modelli Custom) 7861 7862Quando scegli un modello specifico, l'icona a ingranaggio ne imposta il **livello di performance**: un livello più alto fa ragionare di più il modello prima di rispondere, cosa che di solito aiuta sui task difficili ma è più lenta e consuma più crediti. I livelli disponibili dipendono dal modello: su Claude Opus 5.5, per esempio, il ragionamento non si può disattivare. Su alcuni modelli trovi anche l'opzione **Automatic** (consigliata dove disponibile): la piattaforma alza il livello mentre pianifica, lo abbassa mentre esegue e lo rialza se qualcosa va storto. 7863 7864## Da sapere 7865 7866- I modelli con il lucchetto sono riservati ai piani a pagamento: fai upgrade per sbloccarli. 7867- L'editor ricorda nel tuo browser l'ultimo modello che hai usato. 7868- La pagina di creazione progetto parte sempre da **GLM 5.3 Flash**, così ogni nuovo progetto nasce da una scelta consapevole: cambialo prima di creare il progetto se preferisci un altro modello. 7869- L'elenco dei modelli può cambiare nel tempo: il selettore nell'editor mostra sempre quelli disponibili per te. 7870 7871> [!TIP] Non sai da dove partire? Costruisci con Auto o GLM 5.3 Flash, poi passa a un modello più forte come Claude Opus 5.5 per le pagine o i bug che richiedono più cura. 7872`,en:`# Model picker 7873 7874\`\`\`anim 7875modes 7876\`\`\` 7877 7878You choose which AI model works on your project from the **model picker** at the bottom of the chat. The same picker appears when you create a new project, and you can switch model at any time: the project and the conversation stay the same. 7879 7880## The three options 7881 7882- **Auto**: the platform picks a model for each part of the task, based on the quality levels you set. It runs on cost-efficient open models. Available on every plan.
7883- **Frontier**: premium frontier models selected by the Coderblock team, for the highest quality. It uses more credits. Paid plans only. 7884- **Custom**: you pick a specific model yourself. Models are grouped by provider (**OpenAI**, **Anthropic**, **Open models**) and each one shows its provider and main trait under the name. 7885 7886What each model is good (and less good) at is explained in [Models](/docs/models). 7887 7888## Quality dials (Auto and Frontier) 7889 7890The first time you select Auto or Frontier, a window opens with four dials. You can reopen it at any time from the gear icon next to the picker. 7891 7892| Dial | What it controls | 7893|------|------------------| 7894| **General AI Intelligence** | the model that plans and coordinates the work | 7895| **Creativity & Design** | the model that builds the interface | 7896| **Functionality & Database** | the model that writes logic and data | 7897| **Adaptability** | the model used for research and reading | 7898 7899Each dial goes from **Low** to **Ultra High**. Higher levels use stronger models and more credits. For Auto (and for Frontier when available) the window shows an **estimated** credit cost per message that updates as you move the dials. Auto and Frontier keep separate settings. 7900 7901## Performance level (Custom models) 7902 7903When you pick a specific model, the gear icon sets its **performance level**: a higher level makes the model reason more before answering, which usually helps on hard tasks but is slower and uses more credits. The available levels depend on the model: on Claude Opus 5.5, for example, reasoning can't be switched off. On some models you'll also see an **Automatic** option (recommended where available): the platform raises the level while planning, lowers it while executing and raises it again if something fails. 7904 7905## Good to know 7906 7907- Models marked with a lock are reserved to paid plans: upgrade to unlock them. 7908- The editor remembers the last model you used in your browser. 7909- The project creation page always starts from **GLM 5.3 Flash**, so each new project begins with a deliberate choice: change it before creating the project if you prefer another model. 7910- The list of models can change over time: the picker in the editor always shows what's available to you. 7911 7912> [!TIP] Not sure where to start? Use Auto or GLM 5.3 Flash to build, then switch to a stronger model like Claude Opus 5.5 for the pages or bugs that need extra care. 7913`},models:{it:`# Modelli 7914 7915\`\`\`anim 7916modes 7917\`\`\` 7918 7919Su Coderblock scegli tu quale modello AI costruisce la tua app. Ogni modello ha il suo equilibrio tra qualità , velocità e costo: in questa pagina trovi i modelli che puoi scegliere oggi, dove ciascuno in generale rende meglio (e peggio) e come orientarti. 7920 7921> [!INFO] L'elenco riflette i modelli disponibili al momento della stesura. I modelli che vedi nel tuo selettore possono variare: ne aggiungiamo, aggiorniamo o sospendiamo temporaneamente alcuni, e alcuni sono riservati ai piani a pagamento. Il selettore nell'editor fa sempre fede. 7922 7923## Auto e Frontier 7924 7925Oltre ai singoli modelli, il selettore offre due opzioni in cui è la piattaforma a scegliere per te (vedi [Selettore del modello](/docs/modes)): 7926 7927- **Auto** divide il lavoro in quattro aree e usa modelli open efficienti nei costi, ai livelli di qualità che imposti. Disponibile in tutti i piani. 7928- **Frontier** funziona allo stesso modo ma usa modelli frontier premium selezionati dal nostro team. Massima qualità , più crediti. Solo piani a pagamento. 7929 7930## I modelli in sintesi 7931 7932Il costo relativo è indicativo: confronta quanti crediti tende a consumare lo stesso task, da $ (il più economico) a $$$$$ (il più costoso). Il consumo reale dipende dal task, da quanto ragiona il modello e dal tuo piano. 7933 7934| Modello | Provider | Costo relativo | Piani | 7935|---------|----------|----------------|-------| 7936| Claude Sonnet 5.5 | Anthropic | $$$ | Piani a pagamento | 7937| Claude Opus 5.5 | Anthropic | $$$$ | Piani a pagamento | 7938| Claude Fable 5 | Anthropic | $$$$$ | Piani a pagamento | 7939| GPT-6.1 Sol | OpenAI | $$$ | Piani a pagamento | 7940| GPT-5.6 Terra | OpenAI | $$$ | Piani a pagamento | 7941| GPT-6 Luna | OpenAI | $ | Tutti i piani | 7942| GLM 5.3 Flash | Z.ai | $ | Tutti i piani | 7943| GLM 5.3 FlashX | Z.ai | $ | Tutti i piani | 7944| GLM 5.2 | Z.ai | $$ | Tutti i piani | 7945| DeepSeek V4 Pro | DeepSeek | $$ | Tutti i piani | 7946| DeepSeek V4 Flash | DeepSeek | $ | Tutti i piani | 7947| DeepSeek V4.1 Flash | DeepSeek | $ | Tutti i piani | 7948| Kimi K2.6 | Moonshot AI | $$ | Tutti i piani | 7949| MiMo 2.6 Pro | Xiaomi | $ | Tutti i piani | 7950| MiMo 2.6 Flash | Xiaomi | $ | Tutti i piani | 7951 7952## Anthropic 7953 7954### Claude Sonnet 5.5 7955 7956Il modello frontier veloce di Anthropic: genera codice completo su frontend e backend ed è molto bravo a pianificare e portare a termine lavori in più passaggi. 7957 7958- **Punti di forza**: un tuttofare affidabile per lo sviluppo di tutti i giorni; rapido per essere un modello frontier. 7959- **Limiti**: consuma decisamente più crediti dei modelli open. 7960 7961### Claude Opus 5.5 7962
7963Il modello di punta di Anthropic per il codice, tra le opzioni più forti di questo elenco per coding e lavoro agentico. Il ragionamento è sempre attivo. 7964 7965- **Punti di forza**: qualità al top su interfacce complesse, architettura e bug difficili; la scelta migliore quando conta fare bene al primo colpo. 7966- **Limiti**: più lento e con un prezzo per token circa doppio rispetto a Claude Sonnet 5.5, quindi consuma più crediti. 7967 7968### Claude Fable 5 7969 7970Il livello premium di Anthropic, con il ragionamento più profondo della sua gamma. 7971 7972- **Punti di forza**: il ragionamento più profondo. 7973- **Limiti**: il modello che consuma più crediti (il doppio di Claude Opus 5.5). Su coding e lavoro agentico i benchmark pubblicati danno Claude Opus 5.5 davanti a meno della metà del prezzo, quindi per la maggior parte del lavoro di sviluppo Opus 5.5 conviene di più. 7974 7975## OpenAI 7976 7977### GPT-6.1 Sol 7978 7979Il modello frontier di OpenAI, forte nel ragionamento, nel codice e nel lavoro agentico in più passaggi. à la nostra scelta consigliata per i problemi di ragionamento più difficili. 7980 7981- **Punti di forza**: codice e bug difficili (molto più forte di GPT-6 Sol allo stesso livello di ragionamento), uso degli strumenti e task lunghi. 7982- **Limiti**: usa un po' più token per attività del suo predecessore; consumo di crediti nella stessa fascia di Claude Sonnet 5. 7983 7984### GPT-5.6 Terra 7985 7986Il livello intermedio bilanciato di OpenAI: buona qualità quotidiana a un prezzo per token più basso dei modelli di punta. 7987 7988- **Punti di forza**: domande, analisi e task brevi. 7989- **Limiti**: nei test di terze parti su task di coding lunghi è riuscito meno spesso e ha usato molti più token per task, quindi una build lunga può costare più del previsto. Non è la prima scelta per generare un'app intera. 7990 7991### GPT-6 Luna 7992 7993L'opzione OpenAI più veloce ed economica. 7994 7995- **Punti di forza**: task brevi e ben circoscritti: leggere codice, piccole modifiche, fix rapidi. 7996- **Limiti**: più debole sui task lunghi e complessi e nel ricordare i dettagli nelle conversazioni lunghe. Non adatto a costruire un'app intera. 7997 7998## Modelli open 7999 8000### GLM 5.3 Flash (Z.ai) 8001 8002Coding agentico nativamente multimodale (sa leggere gli screenshot) a una frazione del prezzo dei modelli frontier. à il modello preselezionato quando crei un nuovo progetto. 8003 8004- **Punti di forza**: costo molto basso, uso affidabile degli strumenti, legge le immagini e i PDF pagina per pagina; regge bene i task lunghi (nei nostri test ha completato build di oltre 15 minuti e decine di file). à la nostra scelta consigliata per lo sviluppo di tutti i giorni. 8005- **Limiti**: ragiona sempre prima di rispondere, e questo può rallentare alcune risposte. 8006 8007### GLM 5.3 FlashX (Z.ai) 8008 8009Lo stesso modello di GLM 5.3 Flash, servito da Z.ai su un livello più veloce: stesse capacità (immagini, strumenti, livelli di ragionamento), run circa tre volte più rapide nelle nostre prove. 8010 8011- **Punti di forza**: velocità ; per il resto identico a GLM 5.3 Flash. 8012- **Punti deboli**: costa circa 2,5 volte GLM 5.3 Flash, resta comunque tra i modelli più economici. 8013 8014### GLM 5.2 (Z.ai) 8015 8016Un modello open forte nel coding agentico autonomo su task lunghi, vicino ai modelli frontier nel coding e nell'orchestrazione degli strumenti. 8017 8018- **Punti di forza**: task lunghi in più passaggi, refactoring, backend. 8019- **Limiti**: interfacce meno rifinite rispetto a DeepSeek V4 Pro o Claude Opus (non può controllare visivamente il proprio lavoro); sulle esecuzioni più lunghe resta dietro ai modelli frontier; è il modello open più costoso. 8020 8021### DeepSeek V4 Pro 8022 8023Il miglior rapporto qualità /prezzo tra i modelli open e il modello open più forte nella generazione del frontend. 8024 8025- **Punti di forza**: codice frontend e backend pulito a costi contenuti. 8026- **Limiti**: più debole di GLM e dei modelli frontier sull'ingegneria reale più difficile e sui task molto lunghi in più passaggi. 8027 8028### DeepSeek V4 Flash 8029 8030Economico e rapido, con una finestra di contesto molto ampia. 8031 8032- **Punti di forza**: leggere codice, domande e piccoli task. 8033- **Limiti**: qualità delle interfacce inferiore a DeepSeek V4 Pro; tenuta sulle esecuzioni lunghe meno collaudata. 8034 8035### DeepSeek V4.1 Flash 8036 8037La versione più recente di DeepSeek Flash, disponibile accanto a V4 Flash: contesto da 1 milione di token, strumenti e ragionamento nativi, e una cache molto più economica. 8038 8039- **Punti di forza**: task brevi e medi a costo molto basso; nelle conversazioni lunghe le parti già viste costano quasi nulla grazie alla cache. 8040- **Limiti**: appena introdotto, i benchmark ufficiali non sono ancora pubblicati e la tenuta sulle esecuzioni lunghe è ancora da verificare sul campo. 8041 8042### Kimi K2.6 (Moonshot AI) 8043 8044Un modello open forte nel ragionamento e nella ricerca, che regge bene le sessioni lunghe con molti strumenti. 8045 8046- **Punti di forza**: ragionamento, ricerca, pianificazione. 8047- **Limiti**: l'output costa più che negli altri modelli open, quindi il lavoro con molto codice costa più che con DeepSeek V4 Pro o GLM; finestra di contesto più piccola della maggior parte dei modelli di questo elenco; più lento. 8048 8049### MiMo 2.6 Pro (Xiaomi) 8050 8051Sperimentale: il modello open di punta di Xiaomi, uscito a settembre 2026, con un grande salto sul lavoro agentico rispetto alla versione precedente. 8052 8053- **Punti di forza**: coding agentico ai livelli dei modelli di frontiera nei benchmark pubblici, costo basso. 8054- **Limiti**: generazione lenta (un file grande può richiedere minuti); sperimentale. 8055 8056### MiMo 2.6 Flash (Xiaomi) 8057 8058Sperimentale: il modello open economico della stessa famiglia, allo stesso prezzo di DeepSeek V4 Flash. 8059 8060- **Punti di forza**: costo molto basso, buon coding agentico. 8061- **Limiti**: generazione lenta; sperimentale. 8062 8063## Quale modello scegliere? 8064 8065| Situazione | Scelta consigliata | 8066|------------|--------------------| 8067| Per iniziare, o con il piano Community | GLM 5.3 Flash o Auto | 8068| Sviluppo quotidiano | GLM 5.3 Flash | 8069| Interfacce complesse, architettura, bug difficili | Claude Opus 5.5 o GPT-6.1 Sol | 8070| I problemi di ragionamento più difficili | GPT-6.1 Sol | 8071| Task lunghi, autonomi, in più passaggi | GLM 5.3 Flash | 8072| Un frontend curato con un budget contenuto | DeepSeek V4 Pro | 8073| Piccole modifiche di testo o stile, domande sul codice | GPT-6 Luna, DeepSeek V4 Flash o GLM 5.3 Flash | 8074| Preferisci non scegliere | Auto o Frontier (Frontier con un piano a pagamento) | 8075 8076> [!TIP] Puoi cambiare modello quando vuoi. Uno schema comune: costruisci con un modello efficie
8076nte nei costi, poi passa a Claude Opus 5.5 o GPT-6.1 Sol per le pagine o i bug che richiedono più cura. Prima dell'invio la stima in app (Auto e Frontier) e dopo lo storico dei consumi ti mostrano il costo reale in crediti. 8077`,en:`# Models 8078 8079\`\`\`anim 8080modes 8081\`\`\` 8082 8083Coderblock lets you choose which AI model builds your app. Every model strikes its own balance between quality, speed and cost: this page lists the models you can pick today, what each one is generally good (and less good) at, and how to choose. 8084 8085> [!INFO] The list reflects the models available at the time of writing. The exact set in your model picker may vary: we add, update or temporarily pause models, and some are reserved to paid plans. The picker in the editor is always the source of truth. 8086 8087## Auto and Frontier 8088 8089Besides the individual models, the picker offers two options where the platform chooses for you (see [Model picker](/docs/modes)): 8090 8091- **Auto** splits the work into four areas and uses cost-efficient open models, at the quality levels you set. Available on every plan. 8092- **Frontier** works the same way but uses premium frontier models selected by our team. Highest quality, more credits. Paid plans only. 8093 8094## Models at a glance 8095 8096Relative cost is indicative: it compares how many credits the same task tends to use, from $ (cheapest) to $$$$$ (most expensive). Actual usage depends on the task, on how much the model reasons and on your plan. 8097 8098| Model | Provider | Relative cost | Plans | 8099|-------|----------|---------------|-------| 8100| Claude Sonnet 5.5 | Anthropic | $$$ | Paid plans | 8101| Claude Opus 5.5 | Anthropic | $$$$ | Paid plans | 8102| Claude Fable 5 | Anthropic | $$$$$ | Paid plans | 8103| GPT-6.1 Sol | OpenAI | $$$ | Paid plans | 8104| GPT-5.6 Terra | OpenAI | $$$ | Paid plans | 8105| GPT-6 Luna | OpenAI | $ | All plans | 8106| GLM 5.3 Flash | Z.ai | $ | All plans | 8107| GLM 5.3 FlashX | Z.ai | $ | All plans | 8108| GLM 5.2 | Z.ai | $$ | All plans | 8109| DeepSeek V4 Pro | DeepSeek | $$ | All plans | 8110| DeepSeek V4 Flash | DeepSeek | $ | All plans | 8111| DeepSeek V4.1 Flash | DeepSeek | $ | All plans | 8112| Kimi K2.6 | Moonshot AI | $$ | All plans | 8113| MiMo 2.6 Pro | Xiaomi | $ | All plans | 8114| MiMo 2.6 Flash | Xiaomi | $ | All plans | 8115 8116## Anthropic 8117 8118### Claude Sonnet 5.5 8119 8120Anthropic's fast frontier model: complete code generation across frontend and backend, and very good at planning and carrying out multi-step work. 8121 8122- **Strengths**: a reliable all-rounder for everyday development; quick for a frontier model. 8123- **Weaknesses**: uses clearly more credits than the open models. 8124 8125### Claude Opus 5.5 8126 8127Anthropic's flagship model for code, among the strongest options here for coding and agentic work. Reasoning is always on. 8128 8129- **Strengths**: top quality on complex interfaces, architecture and hard bugs; the best pick when getting it right the first time matters. 8130- **Weaknesses**: slower, and about twice the per-token price of Claude Sonnet 5.5, so it uses more credits. 8131 8132### Claude Fable 5 8133 8134Anthropic's premium tier, with the deepest reasoning in its lineup. 8135 8136- **Strengths**: the deepest reasoning. 8137- **Weaknesses**: the most credit-hungry model (twice the credits of Claude Opus 5.5). On coding and agentic work, published benchmarks put Claude Opus 5.5 ahead at less than half the price, so for most building work Opus 5.5 is the better value. 8138 8139## OpenAI 8140 8141### GPT-6.1 Sol 8142 8143OpenAI's frontier model, strong on reasoning, coding and agentic, multi-step work. It's our recommended pick for the hardest reasoning problems. 8144 8145- **Strengths**: code and hard bugs (much stronger than GPT-6 Sol at the same reasoning level), tool use and long tasks. 8146- **Weaknesses**: it uses somewhat more tokens per task than its predecessor; credit usage in the same range as Claude Sonnet 5. 8147 8148### GPT-5.6 Terra 8149 8150OpenAI's balanced mid tier: good everyday quality at a lower per-token price than the flagships. 8151 8152- **Strengths**: questions, analysis and shorter tasks. 8153- **Weaknesses**: in third-party tests on long coding tasks it succeeded less often and used many more tokens per task, so a long build can cost more than expected. Not the first choice for generating a whole app. 8154 8155### GPT-6 Luna 8156 8157The fastest and cheapest OpenAI option. 8158 8159- **Strengths**: short, well-scoped tasks: reading code, small edits, quick fixes. 8160- **Weaknesses**: weaker on long, complex tasks and on recalling details across long conversations. Not suited to building a whole app. 8161 8162## Open models 8163 8164### GLM 5.3 Flash (Z.ai) 8165 8166Natively multimodal (it can read screenshots) agentic coding at a fraction of the price of frontier models. It's preselected when you create a new project. 8167 8168- **Strengths**: very low cost, reliable tool use, reads images and PDFs page by page; holds up well on long tasks (in our tests it completed builds of over 15 minutes and dozens of files). It's our recommended pick for everyday development. 8169- **Weaknesses**: it always reasons before answering, which can make some replies slower. 8170 8171### GLM 5.3 FlashX (Z.ai) 8172 8173The same model as GLM 5.3 Flash, served by Z.ai on a faster tier: s
8173ame capabilities (images, tools, reasoning levels), with runs about three times quicker in our tests. 8174 8175- **Strengths**: speed; otherwise identical to GLM 5.3 Flash. 8176- **Weaknesses**: it costs about 2.5à GLM 5.3 Flash, though it stays among the cheapest models. 8177 8178### GLM 5.2 (Z.ai) 8179 8180A strong open model for autonomous, long-horizon agentic coding, close to the frontier on coding and tool orchestration. 8181 8182- **Strengths**: long multi-step tasks, refactoring, backend work. 8183- **Weaknesses**: rougher UI than DeepSeek V4 Pro or Claude Opus (it can't visually check its own work); on the very longest runs it still trails the frontier models; the most expensive open model. 8184 8185### DeepSeek V4 Pro 8186 8187The best value among open models and the strongest open model for frontend generation. 8188 8189- **Strengths**: clean frontend and backend code at a low cost. 8190- **Weaknesses**: weaker than GLM and the frontier models on hard real-world engineering and very long multi-step tasks. 8191 8192### DeepSeek V4 Flash 8193 8194Cheap and quick, with a very large context window. 8195 8196- **Strengths**: reading code, questions and small tasks. 8197- **Weaknesses**: UI quality below DeepSeek V4 Pro; endurance on long runs less proven. 8198 8199### DeepSeek V4.1 Flash 8200 8201The newest DeepSeek Flash, available alongside V4 Flash: 1-million-token context, native tools and reasoning, and a much cheaper cache. 8202 8203- **Strengths**: short and medium tasks at a very low cost; in long conversations, the parts already seen cost almost nothing thanks to the cache. 8204- **Weaknesses**: newly added, so official benchmarks aren't published yet and its endurance on long runs is still to be proven in the field. 8205 8206### Kimi K2.6 (Moonshot AI) 8207 8208A strong open model for reasoning and research that holds up well in long tool-using sessions. 8209 8210- **Strengths**: reasoning, research, planning. 8211- **Weaknesses**: pricier output than the other open models, so code-heavy work costs more than with DeepSeek V4 Pro or GLM; smaller context window than most models here; slower. 8212 8213### MiMo 2.6 Pro (Xiaomi) 8214 8215Experimental: Xiaomi's open flagship, released in September 2026, with a big jump in agentic work over the previous version. 8216 8217- **Strengths**: agentic coding close to frontier models on public benchmarks, low cost. 8218- **Weaknesses**: slow generation (a large file can take minutes); experimental. 8219 8220### MiMo 2.6 Flash (Xiaomi) 8221 8222Experimental: the low-cost open model of the same family, at the price of DeepSeek V4 Flash. 8223 8224- **Strengths**: very low cost, good agentic coding. 8225- **Weaknesses**: slow generation; experimental. 8226 8227## Which model should I choose? 8228 8229| Situation | Suggested choice | 8230|-----------|------------------| 8231| Getting started, or on the Community plan | GLM 5.3 Flash or Auto | 8232| Everyday development | GLM 5.3 Flash | 8233| Complex interfaces, architecture, hard bugs | Claude Opus 5.5 or GPT-6.1 Sol | 8234| The hardest reasoning problems | GPT-6.1 Sol | 8235| Long, autonomous multi-step tasks | GLM 5.3 Flash | 8236| A polished frontend on a budget | DeepSeek V4 Pro | 8237| Quick text or style edits, questions about the code | GPT-6 Luna, DeepSeek V4 Flash or GLM 5.3 Flash | 8238| You'd rather not choose | Auto or Frontier (Frontier on a paid plan) | 8239 8240> [!TIP] You can switch model whenever you like. A common pattern: build with a cost-efficient model, then switch to Claude Opus 5.5 or GPT-6.1 Sol for the pages or bugs that need extra care. Before sending, the in-app estimate (Auto and Frontier) and afterwards your usage history show the real credit cost. 8241`},"abort-queue":{it:`# Coda & Annulla 8242 8243\`\`\`anim 8244queue 8245\`\`\` 8246 8247## Annullare una richiesta 8248 8249Puoi annullare una richiesta in corso cliccando il pulsante **"Stop"** che sostituisce il pulsante "Invia" durante l'esecuzione. L'agente AI interromperà l'elaborazione in modo pulito: 8250 8251- I **file già scritti** vengono preservati: le modifiche completate restano nel progetto 8252- Il **contenuto già generato** nella chat rimane visibile 8253- Solo le operazioni **non ancora completate** vengono annullate 8254- Nella chat apparirà un messaggio "Esecuzione interrotta" 8255 8256### Quando usare Stop 8257 8258- L'AI sta prendendo una direzione sbagliata 8259- Vuoi cambiare approccio a metà esecuzione 8260- L'operazione sta impiegando troppo tempo 8261- Hai cambiato idea su cosa vuoi costruire 8262 8263## Coda messaggi 8264 8265Se invii un messaggio mentre l'AI sta ancora elaborando il precedente, il nuovo messaggio verrà messo in coda automaticamente, come in Cursor. 8266 8267### Come funziona 8268 82691. **Scrivi durante l'esecuzione**: l'input della chat resta attivo 82702. Il messaggio appare come **pill "in coda"** sotto il blocco in esecuzione 82713. Al termine dell'esecuzione corrente, il messaggio in coda viene **inviato automaticamente** 82724. Puoi anche **forzare l'invio immediato** cliccando l'icona freccia su. Questo interrompe l'esecuzione corrente e invia subito il tuo messaggio 8273 8274### Indicatori visivi 8275 8276- **Badge pulsante** sulla coda quando ci sono messaggi in attesa 8277- **Label** "Messaggio in coda: verrà inviato al termine dell'esecuzione corrente" 8278- La coda viene svuotata in caso di abort o quando tutti i messaggi sono stati processati 8279 8280> [!TIP] Puoi scrivere istruzioni di correzione mentre l'AI lavora. Verranno inviate appena l'esecuzione corrente termina, senza perdere tempo. 8281`,en:`# Abort & Queue 8282 8283\`\`\`anim 8284queue 8285\`\`\` 8286 8287## Cancel a request 8288 8289You can cancel an in-progress request by clicking the **"Stop"** button that replaces the "Send" button during execution. The AI agent will halt cleanly: 8290 8291- **Already written files** are preserved: completed changes stay in the project 8292- **Already generated content** in the chat remains visible 8293- Only **not-yet-completed** operations are cancelled 8294- The chat will show an "Execution stopped" message 8295 8296### When to use Stop 8297 8298- The AI is heading in the wrong direction 8299- You want to change approach mid-execution 8300- The operation is taking too long 8301- You changed your mind about what to build 8302 8303## Message queue 8304 8305If you send a message while the AI is still processing the previous one, the new message is automatically queued, like in Cursor. 8306 8307### How it works 8308 83091. **Type during execution**: the chat input stays active 83102. The message appears as a **"queued" pill** below the running block 83113. When the current execution completes, the queued message is **sent automatically** 83124. You can also **force immediate delivery** by clicking the up arrow icon. This interrupts the current execution and sends your message right away 8313 8314### Visual indicators 8315 8316- **Pulsing badge** on the queue when messages are waiting 8317- **Label** "Message queued: will be sent after current run"
8318- The queue is cleared on abort or when all queued messages have been processed 8319 8320> [!TIP] You can write correction instructions while the AI is working. They'll be sent as soon as the current execution finishes, saving you time. 8321`},"product-templates":{it:`# Template Prodotto 8322 8323\`\`\`anim 8324templates 8325\`\`\` 8326 8327I template prodotto sono **applicazioni fullstack complete** pronte all'uso. Vengono copiati nel tuo progetto tramite copia S3-to-S3 in appena **1-2 secondi**, includendo frontend React, backend FastAPI, e schema database dove necessario. 8328 8329## Template disponibili (32) 8330 8331### Business & Produttività 8332 8333| Template | Descrizione | 8334|----------|-------------| 8335| Business Dashboard | Dashboard analitica con grafici, metriche e KPI | 8336| Todo App | Task manager con progetti, categorie e priorità | 8337| Social Media Scheduler | Pianificazione e gestione post social media | 8338| Project Management | Gestione progetti con kanban board e timeline | 8339| CRM | Customer relationship management con pipeline vendite | 8340 8341### E-commerce & Marketplace 8342 8343| Template | Descrizione | 8344|----------|-------------| 8345| Online Store | E-commerce completo con catalogo, carrello, checkout Stripe | 8346| Marketplace | Piattaforma multi-vendor con gestione negozi | 8347| Digital Products | Vendita prodotti digitali (corsi, ebook, template) | 8348 8349### Servizi & Prenotazioni 8350 8351| Template | Descrizione | 8352|----------|-------------| 8353| Booking Platform | Piattaforma prenotazioni con calendario e pagamenti | 8354| Restaurant | Sito ristorante con menù, gallery e prenotazione tavoli | 8355| Wellness App | App benessere con tracking attività e programmi | 8356 8357### Contenuti & Media 8358 8359| Template | Descrizione | 8360|----------|-------------| 8361| Content Platform | Blog / CMS con editor, categorie e SEO | 8362| Portfolio | Portfolio personale/agency con gallery e case studies | 8363| Entertainment | Piattaforma streaming/contenuti media | 8364 8365### Gaming 8366 8367| Template | Descrizione | 8368|----------|-------------| 8369| Phaser Game | Gioco browser 2D con Phaser.js | 8370| 3D Product Configurator | Configuratore prodotti 3D con Three.js | 8371 8372E molti altri: **32 template** in totale, tra cui app per real estate, healthcare, education, fintech, eventi e altro. 8373 8374## Come usare un template 8375 83761. Crea un nuovo progetto dalla [dashboard](/apps) 83772. Seleziona **"Usa Template"** e scegli dalla griglia 83783. Il progetto viene inizializzato istantaneamente (~1-2 secondi) 83794. L'anteprima si avvia automaticamente 83805. **Personalizza** tutto attraverso la chat AI: colori, layout, contenuti, funzionalità 8381 8382## Cosa include ogni template 8383 8384Ogni template prodotto include: 8385- **Frontend completo**: pagine, componenti, routing, stili Tailwind 8386- **Backend API**: endpoint FastAPI con modelli e validazione 8387- **Schema database**: tabelle, relazioni, dati di esempio 8388- **Autenticazione**: social login (Google + GitHub) pre-configurato 8389- **Design responsive**: ottimizzato per desktop, tablet e mobile 8390 8391> [!TIP] I template sono un punto di partenza. Puoi modificare qualsiasi aspetto tramite la chat AI: aggiungi pagine, cambia il design, integra servizi esterni. 8392`,en:`# Product Templates 8393 8394\`\`\`anim 8395templates 8396\`\`\` 8397 8398Product templates are **complete fullstack applications** ready to use. They are copied to your project via S3-to-S3 copy in just **1-2 seconds**, including React frontend, FastAPI backend, and database schema where needed. 8399 8400## Available templates (32) 8401 8402### Business & Productivity 8403 8404| Template | Description | 8405|----------|-------------| 8406| Business Dashboard | Analytics dashboard with charts, metrics, and KPIs | 8407| Todo App | Task manager with projects, categories, and priorities | 8408| Social Media Scheduler | Social media post planning and management | 8409| Project Management | Project management with kanban board and timeline | 8410| CRM | Customer relationship management with sales pipeline | 8411 8412### E-commerce & Marketplace 8413 8414| Template | Description | 8415|----------|-------------| 8416| Online Store | Complete e-commerce with catalog, cart, Stripe checkout | 8417| Marketplace | Multi-vendor platform with store management | 8418| Digital Products | Digital product sales (courses, ebooks, templates) | 8419 8420### Services & Bookings 8421 8422| Template | Description | 8423|----------|-------------| 8424| Booking Platform | Booking platform with calendar and payments | 8425| Restaurant | Restaurant site with menu, gallery, and table reservations |
8426| Wellness App | Wellness app with activity tracking and programs | 8427 8428### Content & Media 8429 8430| Template | Description | 8431|----------|-------------| 8432| Content Platform | Blog / CMS with editor, categories, and SEO | 8433| Portfolio | Personal/agency portfolio with gallery and case studies | 8434| Entertainment | Streaming/media content platform | 8435 8436### Gaming 8437 8438| Template | Description | 8439|----------|-------------| 8440| Phaser Game | 2D browser game with Phaser.js | 8441| 3D Product Configurator | 3D product configurator with Three.js | 8442 8443And many more: **32 templates** in total, including apps for real estate, healthcare, education, fintech, events, and more. 8444 8445## How to use a template 8446 84471. Create a new project from the [dashboard](/apps) 84482. Select **"Use Template"** and choose from the grid 84493. The project is initialized instantly (~1-2 seconds) 84504. The preview starts automatically 84515. **Customize** everything through the AI chat: colors, layout, content, features 8452 8453## What each template includes 8454 8455Every product template includes: 8456- **Complete frontend**: pages, components, routing, Tailwind styles 8457- **Backend API**: FastAPI endpoints with models and validation 8458- **Database schema**: tables, relationships, sample data 8459- **Authentication**: social login (Google + GitHub) pre-configured 8460- **Responsive design**: optimized for desktop, tablet, and mobile 8461 8462> [!TIP] Templates are a starting point. You can modify any aspect through the AI chat: add pages, change the design, integrate external services. 8463`},"feature-templates":{it:`# Template Feature 8464 8465\`\`\`anim 8466templates 8467\`\`\` 8468 8469I template feature sono **moduli riutilizzabili** che puoi aggiungere a qualsiasi progetto. 8470 8471## Feature disponibili 8472 8473- **Auth**: Autenticazione con email/password e social login 8474- **Admin Panel**: Pannello di amministrazione completo 8475- **Payments**: Integrazione pagamenti con Stripe 8476- **Chat**: Chat in tempo reale 8477- **Notifications**: Sistema notifiche push e in-app 8478- **Search**: Ricerca full-text con filtri 8479- **Dashboard**: Dashboard con widget e grafici 8480- **Cart**: Carrello e-commerce 8481 8482E oltre **20 feature** aggiuntive. 8483 8484> [!TIP] Puoi combinare più feature template nello stesso progetto. Chiedi all'AI di integrarle. 8485`,en:`# Feature Templates 8486 8487\`\`\`anim 8488templates 8489\`\`\` 8490 8491Feature templates are **reusable modules** that you can add to any project. 8492 8493## Available features 8494 8495- **Auth**: Authentication with email/password and social login 8496- **Admin Panel**: Complete admin panel 8497- **Payments**: Payment integration with Stripe 8498- **Chat**: Real-time chat 8499- **Notifications**: Push and in-app notification system 8500- **Search**: Full-text search with filters 8501- **Dashboard**: Dashboard with widgets and charts 8502- **Cart**: E-commerce cart 8503 8504And over **20 additional features**. 8505 8506> [!TIP] You can combine multiple feature templates in the same project. Ask the AI to integrate them. 8507`},preview:{it:`# Anteprima 8508 8509\`\`\`anim 8510hot-reload 8511\`\`\` 8512 8513Ogni progetto Coderblock ha un'anteprima live in tempo reale su un dominio \`*.coderblock.dev\`. Non è un'anteprima simulata: è un vero ambiente di sviluppo che esegue la tua app su una virtual machine dedicata. 8514 8515## Come funziona 8516 8517L'anteprima è integrata direttamente nell'editor, nel pannello a destra della chat: 8518 85191. L'AI scrive i file del progetto su **AWS S3** 85202. Viene triggerato un **sync mirato** verso la VM di preview (solo i file modificati) 85213. **Vite HMR** (Hot Module Replacement) rileva le modifiche e aggiorna il browser 85224. L'**iframe** di preview si ricarica automaticamente 8523 8524### Dettagli tecnici 8525 8526- Ogni progetto ha una **VM Fly.io dedicata** con Node.js, Vite e tutte le dipendenze pre-installate 8527- Le dipendenze npm più comuni (Radix UI, Tailwind, React Hook Form, Three.js, Phaser, ecc.) sono pre-installate nell'immagine base, e \`npm install\` verifica in ~5 secondi invece di ~60-120s 8528- URL formato: \`https://{id}.coderblock.dev\` 8529- La VM esegue un vero Vite dev server con supporto HMR completo 8530 8531## Tempi 8532 8533| Azione | Tempo | 8534|--------|-------| 8535| Primo avvio (cold start) | 60-90s | 8536| Risveglio dopo pausa | 5-10s | 8537| Refresh pagina | 2-5s | 8538| Modifiche AI (hot-reload) | ~7-13s | 8539| Aggiunta dipendenza npm | 5-15s | 8540 8541## Navigazione nella preview 8542 8543Il pannello di preview include: 8544- **Barra indirizzo** con l'URL corrente della pagina 8545- **Pulsante indietro/avanti** per navigare nella cronologia 8546- **Pulsante refresh** per forzare un ricaricamento completo 8547- **Pulsante "Apri in nuova finestra"** per vedere l'app a schermo intero 8548
8549La navigazione è di tipo SPA (Single Page Application): i cambi pagina avvengono senza flash bianco. 8550 8551## Pausa automatica 8552 8553L'anteprima si mette in pausa automaticamente dopo un periodo di inattività per risparmiare risorse. Al prossimo accesso, la VM si risveglia in 5-10 secondi. 8554 8555> [!TIP] Se l'anteprima mostra errori di compilazione, l'AI li rileva automaticamente e tenta di correggerli con un loop di auto-fix. 8556`,en:`# Preview 8557 8558\`\`\`anim 8559hot-reload 8560\`\`\` 8561 8562Every Coderblock project has a real-time live preview on a \`*.coderblock.dev\` domain. This is not a simulated preview: it's a real development environment running your app on a dedicated virtual machine. 8563 8564## How it works 8565 8566The preview is integrated directly in the editor, in the panel to the right of the chat: 8567 85681. The AI writes project files to **AWS S3** 85692. A **targeted sync** is triggered to the preview VM (only changed files) 85703. **Vite HMR** (Hot Module Replacement) detects changes and updates the browser 85714. The preview **iframe** auto-refreshes 8572 8573### Technical details 8574 8575- Each project has a **dedicated Fly.io VM** with Node.js, Vite, and all dependencies pre-installed 8576- Common npm dependencies (Radix UI, Tailwind, React Hook Form, Three.js, Phaser, etc.) are pre-installed in the base image, and \`npm install\` verifies in ~5 seconds instead of ~60-120s 8577- URL format: \`https://{id}.coderblock.dev\` 8578- The VM runs a real Vite dev server with full HMR support 8579 8580## Timing 8581 8582| Action | Time | 8583|--------|------| 8584| First start (cold start) | 60-90s | 8585| Wake from sleep | 5-10s | 8586| Page refresh | 2-5s | 8587| AI changes (hot-reload) | ~7-13s | 8588| Adding npm dependency | 5-15s | 8589 8590## Preview navigation 8591 8592The preview panel includes: 8593- **Address bar** with the current page URL 8594- **Back/forward buttons** for history navigation 8595- **Refresh button** to force a full reload 8596- **"Open in new window" button** to view the app fullscreen 8597 8598Navigation is SPA (Single Page Application): page transitions happen without white flash. 8599 8600## Auto-pause 8601 8602The preview automatically pauses after a period of inactivity to save resources. On next access, the VM wakes up in 5-10 seconds. 8603 8604> [!TIP] If the preview shows compilation errors, the AI automatically detects them and attempts to fix them with an auto-fix loop. 8605`},production:{it:`# Produzione 8606 8607\`\`\`anim 8608preview-vs-production 8609\`\`\` 8610 8611Pubblica la tua app su un dominio \`*.coderblock.app\` con un click. L'app viene distribuita su un vero server cloud con SSL automatico, pronta per ricevere traffico reale. 8612 8613## Come funziona il deploy 8614 86151. Clicca il pulsante **"Deploy"** nell'editor 86162. Il sistema crea un **container Docker unificato** che include sia il frontend (React build statica servita da Caddy) sia il backend (FastAPI con Uvicorn) 86173. Il container viene distribuito su **Fly.io** in una regione vicina ai tuoi utenti 86184. Il certificato **SSL** viene generato automaticamente 86195. URL: \`https://{id}.coderblock.app\` 8620 8621## Tempi di deploy 8622 8623| Azione | Tempo | 8624|--------|-------| 8625| Deploy completo (prima volta) | 60-90s | 8626| Hot-update frontend | 15-30s | 8627| Hot-update backend | 10-20s | 8628 8629## Aggiornamenti successivi 8630 8631Dopo il primo deploy, gli aggiornamenti sono **molto più veloci** grazie a: 8632 8633- **Caching delle dipendenze**: npm modules e pip packages sono cachati 8634- **Hot-update mirato**: solo i file modificati vengono aggiornati 8635- **Immagine Docker layer**: i layer non modificati vengono riutilizzati 8636 8637## Variabili d'ambiente in produzione 8638 8639Le variabili d'ambiente e i secrets configurati nel progetto vengono automaticamente iniettati nel container di produzione ad ogni deploy. Non devi fare nulla di aggiuntivo. 8640 8641## Stato del deploy 8642 8643Nella barra superiore dell'editor puoi vedere: 8644- **Stato corrente** del deploy (in corso, completato, fallito) 8645- **URL** dell'app in produzione 8646- **Log** di deploy per il debug 8647 8648## Differenze tra preview e produzione 8649 8650| Aspetto | Preview (\`.coderblock.dev\`) | Produzione (\`.coderblock.app\`) | 8651|---------|----------------------------|-------------------------------| 8652| Ambiente | Vite dev server | Docker container ottimizzato | 8653| Build | No (development mode) | Sì (production build) | 8654| Performance | Buona (HMR) | Ottima (build ottimizzata) | 8655| SSL | Sì | Sì | 8656| Variabili env | Iniettate | Iniettate | 8657| Persistenza | Auto-pause dopo inattività | Sempre attiva | 8658 8659> [!TIP] Testa sempre nella preview prima di fare deploy in produzione. La preview usa la stessa configurazione, quindi se funziona lì, funzionerà anche in produzione. 8660`,en:`# Production 8661 8662\`\`\`anim 8663preview-vs-production 8664\`\`\` 8665 8666Publish your app to a \`*.coderblock.app\` domain with one click. The app is deployed on a real cloud server with automatic SSL, ready to receive real traffic. 8667 8668## How deployment works 8669 86701. Click the **"Deploy"** button in the editor
86712. The system creates a **unified Docker container** that includes both the frontend (React static build served by Caddy) and the backend (FastAPI with Uvicorn) 86723. The container is deployed on **Fly.io** in a region close to your users 86734. The **SSL** certificate is generated automatically 86745. URL: \`https://{id}.coderblock.app\` 8675 8676## Deploy timing 8677 8678| Action | Time | 8679|--------|------| 8680| Full deploy (first time) | 60-90s | 8681| Frontend hot-update | 15-30s | 8682| Backend hot-update | 10-20s | 8683 8684## Subsequent updates 8685 8686After the first deploy, updates are **much faster** thanks to: 8687 8688- **Dependency caching**: npm modules and pip packages are cached 8689- **Targeted hot-update**: only modified files are updated 8690- **Docker image layers**: unchanged layers are reused 8691 8692## Environment variables in production 8693 8694Environment variables and secrets configured in the project are automatically injected into the production container on every deploy. No additional action needed. 8695 8696## Deploy status 8697 8698In the top bar of the editor you can see: 8699- **Current status** of the deploy (in progress, completed, failed) 8700- **URL** of the production app 8701- **Deploy logs** for debugging 8702 8703## Differences between preview and production 8704 8705| Aspect | Preview (\`.coderblock.dev\`) | Production (\`.coderblock.app\`) | 8706|--------|----------------------------|-------------------------------| 8707| Environment | Vite dev server | Optimized Docker container | 8708| Build | No (development mode) | Yes (production build) | 8709| Performance | Good (HMR) | Excellent (optimized build) | 8710| SSL | Yes | Yes | 8711| Env variables | Injected | Injected | 8712| Persistence | Auto-pause after inactivity | Always active | 8713 8714> [!TIP] Always test in preview before deploying to production. Preview uses the same configuration, so if it works there, it will work in production too. 8715`},"hot-reload":{it:`# Hot Reload 8716 8717\`\`\`anim 8718hot-reload 8719\`\`\` 8720 8721Il sistema di hot-reload permette di vedere le modifiche in tempo reale nell'anteprima. 8722 8723## Flusso 8724 87251. L'AI scrive i file su **S3** 87262. Viene triggerato il **sync** verso la VM di preview 87273. **Vite HMR** rileva le modifiche e aggiorna il browser 87284. L'iframe di preview si ricarica automaticamente 8729 8730## Quando serve un reload completo 8731 8732In alcuni casi, un reload completo è necessario: 8733 8734- Aggiunta di nuove dipendenze npm 8735- Modifiche alla configurazione Vite 8736- Modifiche al file \`index.html\` 8737- Errori di compilazione che interrompono HMR 8738 8739> [!INFO] Puoi forzare un reload completo cliccando il pulsante di refresh nel pannello preview. 8740`,en:`# Hot Reload 8741 8742\`\`\`anim 8743hot-reload 8744\`\`\` 8745 8746The hot-reload system lets you see changes in real-time in the preview. 8747 8748## Flow 8749 87501. The AI writes files to **S3** 87512. A **sync** is triggered to the preview VM 87523. **Vite HMR** detects changes and updates the browser 87534. The preview iframe auto-refreshes 8754 8755## When a full reload is needed 8756 8757In some cases, a full reload is necessary: 8758 8759- Adding new npm dependencies 8760- Changes to Vite configuration 8761- Changes to \`index.html\` 8762- Compilation errors that break HMR 8763 8764> [!INFO] You can force a full reload by clicking the refresh button in the preview panel. 8765`},neondb:{it:`# NeonDB 8766 8767\`\`\`anim 8768database 8769\`\`\` 8770 8771Coderblock utilizza **NeonDB** (PostgreSQL serverless) come database per le app generate. NeonDB è un servizio PostgreSQL completamente gestito che si scala automaticamente e offre funzionalità avanzate come il branching del database. 8772 8773## Caratteristiche 8774 8775- **PostgreSQL completo**: supporto per tutti i tipi di dati, indici, trigger, funzioni, JSON, array 8776- **Serverless** con scale-to-zero: nessun costo quando non in uso 8777- **Branching** del database per ambienti di sviluppo isolati 8778- **Connessione automatica** dalla preview e dalla produzione 8779- **Connection pooling** integrato con PgBouncer per gestire molte connessioni contemporanee 8780- **Resilienza**: pool_recycle, pool_pre_ping, gestione automatica degli errori di connessione 8781 8782## Configurazione 8783 8784Il database viene configurato automaticamente quando chiedi all'AI di aggiungere funzionalità che richiedono persistenza dati (utenti, prodotti, ordini, ecc.). Le credenziali vengono salvate come variabili d'ambiente e iniettate sia in preview che in produzione. 8785 8786\`\`\`bash 8787DATABASE_URL=postgresql://user:[email protected]/dbname 8788NEON_DATABASE_URL=postgresql://user:[email protected]/dbname 8789\`\`\` 8790 8791## Query SQL dirette 8792 8793L'agente AI può eseguire query SQL direttamente sul database del tuo progetto, c
8793on livelli di sicurezza integrati: 8794 8795- **SELECT**: eseguito liberamente per leggere i dati 8796- **INSERT/UPDATE**: eseguito con conferma implicita 8797- **DELETE/DROP/ALTER**: richiede **conferma esplicita** dell'utente (Human-in-the-Loop) 8798 8799### Esempio nella chat 8800 8801\`\`\` 8802Mostrami tutti gli utenti registrati nelle ultime 24 ore 8803\`\`\` 8804 8805L'AI eseguirà : 8806\`\`\`sql 8807SELECT * FROM users WHERE created_at > NOW() - INTERVAL '24 hours' ORDER BY created_at DESC; 8808\`\`\` 8809 8810## Migrazioni 8811 8812L'AI gestisce automaticamente le migrazioni dello schema. Quando chiedi di aggiungere un campo o modificare una tabella, l'agente: 8813 88141. Legge lo schema esistente 88152. Genera lo script SQL di migrazione 88163. Esegue la migrazione (con conferma per operazioni distruttive) 8817 8818> [!WARNING] Non condividere mai le credenziali del database. Usa sempre le variabili d'ambiente. Coderblock le gestisce automaticamente. 8819`,en:`# NeonDB 8820 8821\`\`\`anim 8822database 8823\`\`\` 8824 8825Coderblock uses **NeonDB** (serverless PostgreSQL) as the database for generated apps. NeonDB is a fully managed PostgreSQL service that scales automatically and offers advanced features like database branching. 8826 8827## Features 8828 8829- **Full PostgreSQL**: support for all data types, indexes, triggers, functions, JSON, arrays 8830- **Serverless** with scale-to-zero: no cost when not in use 8831- **Branching** for isolated development environments 8832- **Automatic connection** from preview and production 8833- **Built-in connection pooling** with PgBouncer for handling many concurrent connections 8834- **Resilience**: pool_recycle, pool_pre_ping, automatic connection error handling 8835 8836## Configuration 8837 8838The database is automatically configured when you ask the AI to add features that require data persistence (users, products, orders, etc.). Credentials are saved as environment variables and injected in both preview and production. 8839 8840\`\`\`bash 8841DATABASE_URL=postgresql://user:[email protected]/dbname 8842NEON_DATABASE_URL=postgresql://user:[email protected]/dbname 8843\`\`\` 8844 8845## Direct SQL queries 8846 8847The AI agent can execute SQL queries directly on your project's database, with built-in safety layers: 8848 8849- **SELECT**: executed freely to read data 8850- **INSERT/UPDATE**: executed with implicit confirmation 8851- **DELETE/DROP/ALTER**: requires **explicit user confirmation** (Human-in-the-Loop) 8852 8853### Chat example 8854 8855\`\`\` 8856Show me all users registered in the last 24 hours 8857\`\`\` 8858 8859The AI will execute: 8860\`\`\`sql 8861SELECT * FROM users WHERE created_at > NOW() - INTERVAL '24 hours' ORDER BY created_at DESC; 8862\`\`\` 8863 8864## Migrations 8865 8866The AI automatically handles schema migrations. When you ask to add a field or modify a table, the agent: 8867 88681. Reads the existing schema 88692. Generates the SQL migration script 88703. Executes the migration (with confirmation for destructive operations) 8871 8872> [!WARNING] Never share database credentials. Always use environment variables. Coderblock manages them automatically. 8873`},"sql-queries":{it:`# Query SQL 8874 8875\`\`\`anim 8876database 8877\`\`\` 8878 8879Puoi chiedere all'AI di creare e modificare tabelle, scrivere query e gestire migrazioni. 8880 8881## Esempi 8882 8883\`\`\`sql 8884-- Crea una tabella utenti 8885CREATE TABLE users ( 8886 id SERIAL PRIMARY KEY, 8887 email VARCHAR(255) UNIQUE NOT NULL, 8888 name VARCHAR(255), 8889 created_at TIMESTAMP DEFAULT NOW() 8890); 8891\`\`\` 8892 8893## Migrazioni 8894 8895L'AI può generare script di migrazione per modifiche allo schema: 8896 8897\`\`\` 8898Aggiungi un campo "avatar_url" alla tabella users 8899\`\`\` 8900 8901> [!TIP] L'AI legge lo schema esistente prima di fare modifiche, garantendo coerenza. 8902`,en:`# SQL Queries 8903 8904\`\`\`anim 8905database 8906\`\`\` 8907 8908You can ask the AI to create and modify tables, write queries, and manage migrations. 8909 8910## Examples 8911 8912\`\`\`sql 8913-- Create a users table 8914CREATE TABLE users ( 8915 id SERIAL PRIMARY KEY, 8916 email VARCHAR(255) UNIQUE NOT NULL, 8917 name VARCHAR(255), 8918 created_at TIMESTAMP DEFAULT NOW() 8919); 8920\`\`\` 8921 8922## Migrations 8923 8924The AI can generate migration scripts for schema changes: 8925 8926\`\`\` 8927Add an "avatar_url" field to the users table 8928\`\`\` 8929 8930> [!TIP] The AI reads the existing schema before making changes, ensuring consistency. 8931`},"env-vars":{it:`# Variabili d'Ambiente 8932 8933\`\`\`anim 8934secrets 8935\`\`\` 8936 8937Le variabili d'ambiente ti permettono di configurare la tua app senza esporre credenziali nel codice. 8938 8939## Come configurarle 8940 89411. Vai nelle **Impostazioni** del progetto 89422. Sezione **"Variabili d'ambiente"**
89433. Aggiungi chiave e valore 89444. Le variabili sono disponibili sia in preview che in produzione 8945 8946## Variabili comuni 8947 8948| Variabile | Uso | 8949|-----------|-----| 8950| \`DATABASE_URL\` | Connessione al database | 8951| \`STRIPE_SECRET_KEY\` | Pagamenti Stripe | 8952| \`RESEND_API_KEY\` | Invio email | 8953| \`NEON_DATABASE_URL\` | NeonDB connection string | 8954 8955> [!DANGER] Non inserire mai chiavi API direttamente nel codice sorgente. Usa sempre le variabili d'ambiente. 8956`,en:`# Environment Variables 8957 8958\`\`\`anim 8959secrets 8960\`\`\` 8961 8962Environment variables let you configure your app without exposing credentials in code. 8963 8964## How to configure 8965 89661. Go to project **Settings** 89672. Section **"Environment Variables"** 89683. Add key and value 89694. Variables are available in both preview and production 8970 8971## Common variables 8972 8973| Variable | Usage | 8974|----------|-------| 8975| \`DATABASE_URL\` | Database connection | 8976| \`STRIPE_SECRET_KEY\` | Stripe payments | 8977| \`RESEND_API_KEY\` | Email sending | 8978| \`NEON_DATABASE_URL\` | NeonDB connection string | 8979 8980> [!DANGER] Never put API keys directly in source code. Always use environment variables. 8981`},secrets:{it:`# Secrets 8982 8983\`\`\`anim 8984secrets 8985\`\`\` 8986 8987I secrets sono variabili d'ambiente sensibili con protezione aggiuntiva. 8988 8989## Differenza tra Variabili e Secrets 8990 8991- **Variabili**: visibili nelle impostazioni, usate per configurazione generica 8992- **Secrets**: mascherati dopo il salvataggio, usati per chiavi API e credenziali 8993 8994## Best practices 8995 8996- Usa secrets per tutte le chiavi API di terze parti 8997- Ruota periodicamente le chiavi 8998- Non loggare mai i valori dei secrets 8999 9000> [!WARNING] I secrets non possono essere letti dopo il salvataggio. Se perdi una chiave, dovrai rigenerarla dal provider. 9001`,en:`# Secrets 9002 9003\`\`\`anim 9004secrets 9005\`\`\` 9006 9007Secrets are sensitive environment variables with additional protection. 9008 9009## Difference between Variables and Secrets 9010 9011- **Variables**: visible in settings, used for generic configuration 9012- **Secrets**: masked after saving, used for API keys and credentials 9013 9014## Best practices 9015 9016- Use secrets for all third-party API keys 9017- Rotate keys periodically 9018- Never log secret values 9019 9020> [!WARNING] Secrets cannot be read after saving. If you lose a key, you'll need to regenerate it from the provider. 9021`},"image-upload":{it:`# Upload Immagini 9022 9023\`\`\`anim 9024media 9025\`\`\` 9026 9027Carica immagini personalizzate per il tuo progetto. 9028 9029## Formati supportati 9030 9031- JPEG / JPG 9032- PNG 9033- GIF 9034- WebP 9035- SVG 9036 9037## Come caricare 9038 90391. Nella chat, usa l'icona **allegato** per caricare un'immagine 90402. L'AI può usare l'immagine come riferimento visivo per il design 90413. Le immagini caricate vengono salvate nella cartella \`public/\` del progetto 9042 9043## Generazione immagini AI 9044 9045L'AI può anche **generare immagini** usando DALL-E: 9046 9047\`\`\` 9048Genera un'immagine hero per un sito di viaggi, stile fotorealistico 9049\`\`\` 9050 9051> [!TIP] Carica screenshot o mockup come riferimento. L'AI li analizzerà per riprodurre il design. 9052`,en:`# Image Upload 9053 9054\`\`\`anim 9055media 9056\`\`\` 9057 9058Upload custom images for your project. 9059 9060## Supported formats 9061 9062- JPEG / JPG 9063- PNG 9064- GIF 9065- WebP 9066- SVG 9067 9068## How to upload 9069 90701. In the chat, use the **attachment** icon to upload an image 90712. The AI can use the image as a visual design reference 90723. Uploaded images are saved in the project's \`public/\` folder 9073 9074## AI image generation 9075 9076The AI can also **generate images** using DALL-E: 9077 9078\`\`\` 9079Generate a hero image for a travel site, photorealistic style 9080\`\`\` 9081 9082> [!TIP] Upload screenshots or mockups as reference. The AI will analyze them to reproduce the design. 9083`},media:{it:`# Media 9084 9085\`\`\`anim 9086media 9087\`\`\` 9088 9089Gestione dei file media nel tuo progetto. 9090 9091## Storage 9092 9093I file media vengono salvati su **AWS S3** e serviti attraverso il CDN. 9094 9095## Struttura cartelle 9096 9097\`\`\` 9098public/ 9099âââ images/ # Immagini del sito 9100âââ icons/ # Icone e favicon 9101âââ assets/ # Altri asset statici 9102\`\`\` 9103 9104## Dimensioni consigliate 9105 9106| Tipo | Dimensione | Formato | 9107|------|-----------|---------| 9108| Hero image | 1920x1080 | WebP / JPEG | 9109| Thumbnail | 400x300 | WebP / JPEG | 9110| Icona | 512x512 | PNG / SVG | 9111| Favicon | 32x32 | PNG / ICO | 9112`,en:`# Media 9113 9114\`\`\`anim 9115media 9116\`\`\` 9117 9118Managing media files in your project. 9119 9120## Storage 9121 9122Media files are saved on **AWS S3** and served through the CDN. 9123 9124## Folder structure 9125 9126\`\`\` 9127public/ 9128âââ images/ # Site images 9129âââ icons/ # Icons and favicon 9130âââ assets/ # Other static assets 9131\`\`\` 9132 9133## Recommended sizes 9134 9135| Type | Size | Format | 9136|------|------|--------| 9137| Hero image | 1920x1080 | WebP / JPEG |
9138| Thumbnail | 400x300 | WebP / JPEG | 9139| Icon | 512x512 | PNG / SVG | 9140| Favicon | 32x32 | PNG / ICO | 9141`},"email-integration":{it:`# Integrazione Email (Resend) 9142 9143\`\`\`anim 9144email 9145\`\`\` 9146 9147Invia email transazionali dalla tua app usando **Resend**. 9148 9149## Setup 9150 91511. Crea un account su [resend.com](https://resend.com) 91522. Genera una API key 91533. Aggiungila come secret: \`RESEND_API_KEY\` 91544. Chiedi all'AI di integrare l'invio email 9155 9156## Esempio 9157 9158\`\`\` 9159Aggiungi invio email di conferma registrazione usando Resend 9160\`\`\` 9161 9162L'AI genererà il codice backend per inviare email con template HTML personalizzati. 9163 9164## Funzionalità 9165 9166- Email di benvenuto 9167- Conferma registrazione 9168- Reset password 9169- Notifiche 9170- Newsletter 9171 9172> [!INFO] Resend offre 3.000 email/mese gratuite nel piano free. 9173`,en:`# Email Integration (Resend) 9174 9175\`\`\`anim 9176email 9177\`\`\` 9178 9179Send transactional emails from your app using **Resend**. 9180 9181## Setup 9182 91831. Create an account at [resend.com](https://resend.com) 91842. Generate an API key 91853. Add it as a secret: \`RESEND_API_KEY\` 91864. Ask the AI to integrate email sending 9187 9188## Example 9189 9190\`\`\` 9191Add registration confirmation email using Resend 9192\`\`\` 9193 9194The AI will generate backend code to send emails with custom HTML templates. 9195 9196## Features 9197 9198- Welcome emails 9199- Registration confirmation 9200- Password reset 9201- Notifications 9202- Newsletter 9203 9204> [!INFO] Resend offers 3,000 emails/month free on the free plan. 9205`},"stripe-integration":{it:`# Integrazione Stripe 9206 9207\`\`\`anim 9208payment-funnel 9209\`\`\` 9210 9211Accetta pagamenti nella tua app con **Stripe**, il processore di pagamenti più utilizzato al mondo. Coderblock include un flusso guidato dall'AI che crea automaticamente i tuoi prodotti e prezzi su Stripe, generando codice con ID reali e funzionanti. 9212 9213> [!NOTE] Per le **Web app** (runtime Supabase) i pagamenti sono ancora più semplici: zero configurazione in test e account dedicato solo al go-live â vedi [Accettare Pagamenti](/docs/payments). Questa pagina resta il riferimento per la modalità avanzata con chiave propria (BYOK) e per i runtime Python/Node. 9214 9215## Come funziona 9216 9217Quando chiedi all'AI di aggiungere pagamenti, il sistema segue un flusso automatizzato: 9218 92191. **L'AI ti chiede la Secret Key** â appare un campo di input mascherato nella chat 92202. **Tu incolli la chiave** â viene salvata come secret del progetto 92213. **L'AI crea i prodotti su Stripe** â prodotti, prezzi e payment link vengono creati direttamente sul tuo account Stripe 92224. **Il codice generato usa ID reali** â niente placeholder, tutto funziona subito 9223 9224> [!TIP] Questo significa che non devi andare manualmente sulla dashboard Stripe per creare prodotti: l'AI fa tutto in automatico. 9225 9226--- 9227 9228## Setup 9229 9230### 1. Crea un account Stripe 9231 9232Registrati su [stripe.com](https://stripe.com) se non hai ancora un account. Stripe offre un ambiente di test c
9232ompleto dove puoi provare tutto senza processare pagamenti reali. 9233 9234### 2. Ottieni le chiavi API 9235 9236Dalla [Dashboard Stripe â Developers â API Keys](https://dashboard.stripe.com/apikeys), copia: 9237 9238- **Secret key** (inizia con \`sk_test_...\`): la chiave principale che serve all'AI 9239- **Publishable key** (inizia con \`pk_test_...\`): per il frontend 9240 9241> [!INFO] Per lo sviluppo usa sempre le chiavi **test**. Quando sei pronto per andare live, sostituiscile con le chiavi **live**. 9242 9243### 3. Inserisci le chiavi in Coderblock 9244 9245Hai due opzioni: 9246 9247**Opzione A (consigliata): tramite AI Chat** 9248Chiedi semplicemente all'AI di aggiungere Stripe, apparirà automaticamente un campo di input nella chat: 9249\`\`\` 9250Aggiungi pagamenti Stripe al mio progetto 9251\`\`\` 9252 9253**Opzione B: manualmente dalle Impostazioni** 9254Vai in **Impostazioni â Secrets** del progetto e aggiungi: 9255- \`STRIPE_SECRET_KEY\` â \`sk_test_...\` 9256- \`STRIPE_PUBLISHABLE_KEY\` â \`pk_test_...\` 9257 9258--- 9259 9260## Cosa puoi fare 9261 9262### Pagamenti one-time 9263 9264Vendita singola di un prodotto o servizio. Esempio: 9265 9266\`\`\` 9267Crea una pagina di checkout per vendere un corso online a â¬49 9268\`\`\` 9269 9270L'AI creerà : 9271- Un prodotto "Corso Online" su Stripe 9272- Un prezzo di â¬49.00 (one-time) 9273- Il codice di checkout che reindirizza a Stripe 9274- Le pagine di successo e cancellazione 9275 9276### Abbonamenti ricorrenti 9277 9278Piani con addebito mensile o annuale. Esempio: 9279 9280\`\`\` 9281Aggiungi abbonamenti con 3 piani: Free, Pro a â¬19/mese, Business a â¬49/mese 9282\`\`\` 9283 9284L'AI creerà : 9285- 3 prodotti su Stripe (Free, Pro, Business) 9286- I prezzi ricorrenti (monthly) per ciascun piano 9287- Una pagina pricing con confronto piani 9288- Il backend per gestire lo stato dell'abbonamento 9289- I webhook per aggiornamenti in tempo reale 9290 9291### Payment Link (il più semplice) 9292 9293Se vuoi solo un link di pagamento senza codice personalizzato: 9294 9295\`\`\` 9296Creami un Payment Link Stripe per un prodotto da â¬29 9297\`\`\` 9298 9299L'AI creerà il prodotto e il prezzo su Stripe, e ti restituirà un URL pronto all'uso (es. \`https://buy.stripe.com/xxx\`) che puoi incollare ovunque. 9300 9301### Stripe Checkout (hosted) 9302 9303La soluzione più rapida per un checkout completo: 9304 9305\`\`\` 9306Integra Stripe Checkout per il mio e-commerce con carrello 9307\`\`\` 9308 9309Stripe Checkout è una pagina di pagamento hosted da Stripe: gestisce automaticamente carte di credito, Apple Pay, Google Pay, e la conformità PCI. 9310 9311--- 9312 9313## Webhook 9314 9315I webhook ti permettono di ricevere notifiche in tempo reale da Stripe (pagamento completato, abbonamento cancellato, ecc.). 9316 9317### Configurazione 9318 9319Dopo che l'AI genera il codice webhook, devi registrare l'URL nella dashboard Stripe: 9320 93211. Vai su [Dashboard Stripe â Developers â Webhooks](https://dashboard.stripe.com/webhooks) 93222. Clicca **"Add endpoint"** 93233. Inserisci l'URL del tuo progetto: \`https://{tuo-id}.coderblock.app/api/payments/webhook\` 93244. Seleziona gli eventi da ricevere (consigliati: \`checkout.session.completed\`, \`invoice.payment_succeeded\`, \`customer.subscription.deleted\`) 93255. Copia il **Webhook Secret** e aggiungilo come secret del progetto: \`STRIPE_WEBHOOK_SECRET\` 9326 9327> [!WARNING] L'URL webhook deve essere quello di **produzione** (\`.coderblock.app\`), non di preview (\`.coderblock.dev\`). I webhook non funzionano con la preview perché Stripe non può raggiungere l'URL di sviluppo. 9328 9329--- 9330 9331## App Supabase (Edge Functions) 9332 9333Sui progetti con runtime **Supabase** i pagamenti vengono gestiti da due Edge Function Deno, non da un server backend. à il pattern validato (stile Lovable) e l'AI lo configura automaticamente con la skill \`add-stripe-payments-supabase\`. 9334 9335- \`create-checkout\` (\`verify_jwt = true\`) â crea la Stripe Checkout Session e restituisce l'URL. Funziona sia per pagamenti **una tantum** (\`mode: "payment"\`) sia per **abbonamenti** (\`mode: "subscription"\`). 9336- \`stripe-webhook\` (\`verify_jwt = false\`) â verifica la firma di Stripe e registra ordini/abbonamenti con il client service-role. **Il webhook è l'unica fonte di verità ** che il pagamento è avvenuto: mai confermare lato frontend. 9337 9338### Secret richiesti (raccolti via chat con HIL) 9339 9340Quando chiedi all'AI di aggiungere i pagamenti, compaiono in chat dei campi sicuri (Human-in-the-Loop) per incollare i secret. Vengono salvati e propagati automaticamente come **secret delle Edge Function Supabase** (\`Deno.env.get\`): 9341 9342| Secret | Dove trovarlo | 9343|--------|---------------| 9344| \`STRIPE_SECRET_KEY\` | Stripe Dashboard â Developers â API keys (\`sk_test_â¦\` in test) | 9345| \`STRIPE_WEBHOOK_SECRET\` | Firma dell'endpoint webhook (\`whsec_â¦\`), vedi sotto | 9346 9347> [!NOTE] \`SUPABASE_URL\`, \`SUPABASE_ANON_KEY\` e \`SUPABASE_SERVICE_ROLE_KEY\` sono iniettati dalla piattaforma: non vanno mai richiesti né scritti a mano. 9348 9349### Configurare il WEBHOOK_TOKEN (signing secret) 9350 93511. La funzione è deployata su: \`https://<project-ref>.supabase.co/functions/v1/stripe-webhook\` 93522. In Stripe Dashboard â **Developers â Webhooks â Add endpoint**, incolla quell'URL. 93533. Seleziona gli eventi: \`checkout.session.completed\`, \`invoice.paid\`, \`customer.subscription.created\`, \`customer.subscription.updated\`, \`customer.subscription.deleted\`. 93544. Stripe mostra un **Signing secret** (\`whsec_â¦\`): incollalo nel campo HIL \`STRIPE_WEBHOOK_SECRET\` in chat. 9355 9356> [!TIP] A differenza del runtime Python, il webhook Supabase è raggiungibile da Stripe anche prima del deploy in produzione, perché la funzione vive sul tuo progetto Supabase. 9357 9358### Frontend 9359 9360\`\`\`ts 9361import { startCheckout, loadActiveSubscription } from "@/integrations/supabase/payments"; 9362 9363await startCheckout({ priceId: "price_oneTime" }); // una tantum 9364await startCheckout({ priceId: "price_monthly", mode: "subscription" }); // abbonamento 9365 9366const sub = await loadActiveSubscription(); // null se non abbonato â usa sub?.status per sbloccare funzioni 9367\`\`\` 9368 9369Le tabelle \`orders\` e \`subscriptions\` (migration \`0003_payments.sql\`) sono protette da RLS: ogni utente legge solo le proprie righe e solo il webhook (service-role) le scrive. 9370 9371--- 9372 9373## Esempi di prompt 9374 9375| Obiettivo | Prompt | 9376|-----------|--------| 9377| Vendita singola | *"Crea un checkout per vendere una maglietta a â¬25"* | 9378| Abbonamento SaaS | *"Aggiungi piani di abbonamento Free/Pro/Enterprise con Stripe"* | 9379| Payment Link | *"Genera un Payment Link per un prodotto da â¬99"* | 9380| Donazione | *"Aggiungi un pulsante per donazioni con importo libero"* | 9381| E-commerce | *"Integra Stripe Checkout per il carrello del mio shop"* | 9382| Portale clienti | *"Aggiungi un portale dove gli utenti gestiscono il loro abbonamento"* | 9383 9384--- 9385 9386## Test dei pagamenti 9387 9388In modalità test (\`sk_test_\`, \`pk_test_\`), usa queste carte fittizie: 9389 9390| Scenario | Numero carta | 9391|----------|-------------| 9392| Pagamento riuscito | \`4242 4242 4242 4242\` | 9393| Pagamento rifiutato | \`4000 0000 0000 0002\` | 9394| Autenticazione 3D Secure | \`4000 0025 0000 3155\` | 9395| Fondi insufficienti | \`4000 0000 0000 9995\` | 9396| Carta scaduta | \`4000 0000 0000 0069\` | 9397 9398Usa qualsiasi data futura e qualsiasi CVC a 3 cifre. 9399 9400--- 9401 9402## Chiavi API 9403 9404| Chiave | Prefisso | Dove si usa | Tipo | 9405|--------|----------|-------------|------| 9406| Secret Key | \`sk_test_\` / \`sk_live_\` | Backend | Secret (mai esposta) | 9407| Publishable Key | \`pk_test_\` / \`pk_live_\` | Frontend | Pubblica (sicura nel browser) | 9408| Webhook Secret | \`whsec_\` | Backend | Secret | 9409 9410> [!DANGER] Non condividere mai la **Secret Key** o il **Webhook Secret**. Usa sempre le variabili d'ambiente, mai hardcoded nel codice. 9411 9412--- 9413 9414## FAQ 9415 9416**Posso usare PayPal invece di Stripe?** 9417Attualmente Coderblock supporta solo Stripe come processore di pagamento. Stripe copre oltre 135 valute e tutti i principali metodi di pagamento. 9418 9419**Quanto costa Stripe?** 9420Stripe applica una commissione del 2.9% + â¬0.25 per transazione (standard europeo). Non ci sono costi fissi mensili. 9421 9422**Posso passare da test a live?** 9423Sì, basta sostituire le chiavi test con le chiavi live nelle Impostazioni â Secrets del progetto, e ridistribuire. 9424 9425**L'AI può gestire i rimborsi?** 9426L'AI può generare il codice per i rimborsi tramite l'API Stripe, ma il rimborso effettivo lo puoi anche fare dalla dashboard Stripe. 9427`,en:`# Stripe Integration 9428 9429\`\`\`anim 9430payment-funnel 9431\`\`\` 9432 9433Accept payments in your app with **Stripe**, the world's most popular payment processor. Coderblock
9433includes an AI-guided flow that automatically creates your products and prices on Stripe, generating code with real, working IDs. 9434 9435> [!NOTE] For **Web apps** (Supabase runtime) payments are even simpler: zero configuration in test and a dedicated account only at go-live â see [Accept Payments](/docs/payments). This page remains the reference for the advanced bring-your-own-key (BYOK) mode and the Python/Node runtimes. 9436 9437## How it works 9438 9439When you ask the AI to add payments, the system follows an automated flow: 9440 94411. **The AI asks for your Secret Key** â a masked input field appears in the chat 94422. **You paste the key** â it's saved as a project secret 94433. **The AI creates products on Stripe** â products, prices and payment links are created directly on your Stripe account 94444. **Generated code uses real IDs** â no placeholders, everything works immediately 9445 9446> [!TIP] This means you don't need to manually go to the Stripe dashboard to create products: the AI does everything automatically. 9447 9448--- 9449 9450## Setup 9451 9452### 1. Create a Stripe account 9453 9454Sign up at [stripe.com](https://stripe.com) if you don't have an account yet. Stripe offers a complete test environment where you can try everything without processing real payments. 9455 9456### 2. Get API keys 9457 9458From the [Stripe Dashboard â Developers â API Keys](https://dashboard.stripe.com/apikeys), copy: 9459 9460- **Secret key** (starts with \`sk_test_...\`): the main key the AI needs 9461- **Publishable key** (starts with \`pk_test_...\`): for the frontend 9462 9463> [!INFO] Always use **test** keys for development. When you're ready to go live, replace them with **live** keys. 9464 9465### 3. Enter keys in Coderblock 9466 9467You have two options: 9468 9469**Option A (recommended): via AI Chat** 9470Simply ask the AI to add Stripe, an input field will automatically appear in the chat: 9471\`\`\` 9472Add Stripe payments to my project 9473\`\`\` 9474 9475**Option B: manually from Settings** 9476Go to your project's **Settings â Secrets** and add: 9477- \`STRIPE_SECRET_KEY\` â \`sk_test_...\` 9478- \`STRIPE_PUBLISHABLE_KEY\` â \`pk_test_...\` 9479 9480--- 9481 9482## What you can do 9483 9484### One-time payments 9485 9486Single product or service sale. Example: 9487 9488\`\`\` 9489Create a checkout page to sell an online course for â¬49 9490\`\`\` 9491 9492The AI will create: 9493- A "Online Course" product on Stripe 9494- A â¬49.00 price (one-time) 9495- The checkout code that redirects to Stripe 9496- Success and cancellation pages 9497 9498### Recurring subscriptions 9499 9500Plans with monthly or annual billing. Example: 9501 9502\`\`\` 9503Add subscriptions with 3 plans: Free, Pro at â¬19/month, Business at â¬49/month 9504\`\`\` 9505 9506The AI will create: 9507- 3 products on Stripe (Free, Pro, Business) 9508- Recurring (monthly) prices for each plan 9509- A pricing page with plan comparison 9510- The backend to manage subscription status 9511- Webhooks for real-time updates 9512 9513### Payment Link (the simplest) 9514 9515If you just want a payment link without custom code: 9516 9517\`\`\` 9518Create a Stripe Payment Link for a product at â¬29 9519\`\`\` 9520 9521The AI will create the product and price on Stripe, and return a ready-to-use URL (e.g. \`https://buy.stripe.com/xxx\`) that you can paste anywhere. 9522 9523### Stripe Checkout (hosted) 9524 9525The fastest solution for a complete checkout: 9526 9527\`\`\` 9528Integrate Stripe Checkout for my e-commerce with cart 9529\`\`\` 9530 9531Stripe Checkout is a Stripe-hosted payment page: it automatically handles credit cards, Apple Pay, Google Pay, and PCI compliance. 9532 9533--- 9534 9535## Webhooks 9536 9537Webhooks let you receive real-time notifications from Stripe (payment completed, subscription canceled, etc.). 9538 9539### Configuration 9540 9541After the AI generates webhook code, you need to register the URL in the Stripe dashboard: 9542 95431. Go to [Stripe Dashboard â Developers â Webhooks](https://dashboard.stripe.com/webhooks) 95442. Click **"Add endpoint"** 95453. Enter your project URL: \`https://{your-id}.coderblock.app/api/payments/webhook\` 95464. Select the events to receive (recommended: \`checkout.session.completed\`, \`invoice.payment_succeeded\`, \`customer.subscription.deleted\`) 95475. Copy the **Webhook Secret** and add it as a project secret: \`STRIPE_WEBHOOK_SECRET\` 9548 9549> [!WARNING] The webhook URL must be the **production** one (\`.coderblock.app\`), not preview (\`.coderblock.dev\`). Webhooks don't work with preview because Stripe can't reach the development URL. 9550 9551--- 9552 9553## Supabase web app (Edge Functions) 9554 9555On **Supabase** runtime projects, payments are handled by two Deno Edge Functions instead of a backend server. This is the validated (Lovable-style) pattern, configured automatically by the AI via the \`add-stripe-payments-supabase\` skill. 9556 9557- \`create-checkout\` (\`verify_jwt = true\`) â creates the Stripe Checkout Session and returns its URL. Works for both **one-time** payments (\`mode: "payment"\`) and **subscriptions** (\`mode: "subscription"\`). 9558- \`stripe-webhook\` (\`verify_jwt = false\`) â verifies Stripe's signature and records orders/subscriptions with the service-role client. **The webhook is the single source of truth** that the payment happened â never confirm it client-side. 9559 9560### Required secrets (collected in chat via HIL) 9561 9562When you ask the AI to add payments, secure Human-in-the-Loop fields appear in chat to paste the secrets. They are saved and propagated automatically as **Supabase Edge Function secrets** (\`Deno.env.get\`): 9563 9564| Secret | Where to find it | 9565|--------|------------------| 9566| \`STRIPE_SECRET_KEY\` | Stripe Dashboard â Developers â API keys (\`sk_test_â¦\` in test) | 9567| \`STRIPE_WEBHOOK_SECRET\` | Your webhook endpoint signing secret (\`whsec_â¦\`), see below | 9568 9569> [!NOTE] \`SUPABASE_URL\`, \`SUPABASE_ANON_KEY\` and \`SUPABASE_SERVICE_ROLE_KEY\` are injected by the platform â never request or hardcode them. 9570 9571### Configuring the WEBHOOK_TOKEN (signing secret) 9572 95731. The function is deployed at: \`https://<project-ref>.supabase.co/functions/v1/stripe-webhook\` 95742. In Stripe Dashboard â **Developers â Webhooks â Add endpoint**, paste that URL. 95753. Select the events: \`checkout.session.completed\`, \`invoice.paid\`, \`customer.subscription.created\`, \`customer.subscription.updated\`, \`customer.subscription.deleted\`. 95764. Stripe shows a **Signing secret** (\`whsec_â¦\`): paste it into the \`STRIPE_WEBHOOK_SECRET\` HIL field in chat. 9577 9578> [!TIP] Unlike the Python runtime, the Supabase webhook is reachable by Stripe even before production deploy, because the function lives on your Supabase project. 9579 9580### Frontend 9581 9582\`\`\`ts 9583import { startCheckout, loadActiveSubscription } from "@/integrations/supabase/payments"; 9584 9585await startCheckout({ priceId: "price_oneTime" }); // one-time 9586await startCheckout({ priceId: "price_monthly", mode: "subscription" }); // subscription 9587 9588const sub = await loadActiveSubscription(); // null if not subscribed â gate features on sub?.status 9589\`\`\` 9590 9591The \`orders\` and \`subscriptions\` tables (migration \`0003_payments.sql\`) are RLS-protected: each user reads only their own rows, and only the webhook (service-role) writes them. 9592 9593--- 9594 9595## Prompt examples 9596 9597| Goal | Prompt | 9598|------|--------| 9599| One-time sale | *"Create a checkout to sell a t-shirt for â¬25"* | 9600| SaaS subscription | *"Add subscription plans Free/Pro/Enterprise with Stripe"* | 9601| Payment link | *"Generate a Payment Link for a â¬99 product"* | 9602| Donation | *"Add a donation button with custom amount"* | 9603| E-commerce | *"Integrate Stripe Checkout for my shop cart"* |
9604| Customer portal | *"Add a portal where users manage their subscription"* | 9605 9606--- 9607 9608## Testing payments 9609 9610In test mode (\`sk_test_\`, \`pk_test_\`), use these fake cards: 9611 9612| Scenario | Card number | 9613|----------|------------| 9614| Successful payment | \`4242 4242 4242 4242\` | 9615| Declined payment | \`4000 0000 0000 0002\` | 9616| 3D Secure authentication | \`4000 0025 0000 3155\` | 9617| Insufficient funds | \`4000 0000 0000 9995\` | 9618| Expired card | \`4000 0000 0000 0069\` | 9619 9620Use any future date and any 3-digit CVC. 9621 9622--- 9623 9624## API Keys 9625 9626| Key | Prefix | Where used | Type | 9627|-----|--------|-----------|------| 9628| Secret Key | \`sk_test_\` / \`sk_live_\` | Backend | Secret (never exposed) | 9629| Publishable Key | \`pk_test_\` / \`pk_live_\` | Frontend | Public (safe in browser) | 9630| Webhook Secret | \`whsec_\` | Backend | Secret | 9631 9632> [!DANGER] Never share the **Secret Key** or **Webhook Secret**. Always use environment variables, never hardcoded in code. 9633 9634--- 9635 9636## FAQ 9637 9638**Can I use PayPal instead of Stripe?** 9639Currently Coderblock only supports Stripe as a payment processor. Stripe covers over 135 currencies and all major payment methods. 9640 9641**How much does Stripe cost?** 9642Stripe charges 2.9% + â¬0.25 per transaction (European standard). There are no monthly fixed costs. 9643 9644**Can I switch from test to live?** 9645Yes, just replace the test keys with live keys in your project's Settings â Secrets, and redeploy. 9646 9647**Can the AI handle refunds?** 9648The AI can generate code for refunds via the Stripe API, but you can also process refunds directly from the Stripe dashboard. 9649`},"github-integration":{it:`# Integrazione GitHub 9650 9651\`\`\`anim 9652github 9653\`\`\` 9654 9655Collega il tuo progetto a un repository GitHub per versionamento e collaborazione. 9656 9657## Come collegare 9658 96591. Vai nelle **Impostazioni** del progetto 96602. Sezione **"GitHub"** 96613. Clicca **"Connetti GitHub"** per autorizzare via OAuth 96624. Scegli un repository esistente o creane uno nuovo 9663 9664## Funzionalità 9665 9666- **Commit automatici**: ogni modifica dell'AI può essere committata 9667- **Push/Pull**: sincronizza il codice tra Coderblock e GitHub 9668- **Branch**: lavora su branch separati per feature diverse 9669 9670## Struttura repository 9671 9672\`\`\` 9673repository/ 9674âââ frontend/ # Codice React/Vite 9675âââ backend/ # Codice Python/FastAPI 9676âââ README.md 9677\`\`\` 9678 9679> [!TIP] Attiva i commit automatici per avere una cronologia completa delle modifiche. 9680`,en:`# GitHub Integration 9681 9682\`\`\`anim 9683github 9684\`\`\` 9685 9686Connect your project to a GitHub repository for version control and collaboration. 9687 9688## How to connect 9689 96901. Go to project **Settings** 96912. Section **"GitHub"** 96923. Click **"Connect GitHub"** to authorize via OAuth 96934. Choose an existing repository or create a new one 9694 9695## Features 9696 9697- **Automatic commits**: each AI change can be committed 9698- **Push/Pull**: sync code between Coderblock and GitHub 9699- **Branches**: work on separate branches for different features 9700 9701## Repository structure 9702 9703\`\`\` 9704repository/ 9705âââ frontend/ # React/Vite code 9706âââ backend/ # Python/FastAPI code 9707âââ README.md 9708\`\`\` 9709 9710> [!TIP] Enable automatic commits for a complete history of changes. 9711`},"custom-domains":{it:`# Domini Personalizzati 9712 9713\`\`\`anim 9714custom-domain 9715\`\`\` 9716 9717Collega un dominio personalizzato alla tua app pubblicata per dare un aspetto professionale al tuo progetto. Invece di \`{id}.coderblock.app\`, i tuoi utenti vedranno \`www.tuodominio.com\`. 9718 9719## Prerequisiti 9720 9721- L'app deve essere già **pubblicata in produzione** (Deploy completato) 9722- Devi avere accesso alla **gestione DNS** del tuo dominio 9723 9724## Come configurare 9725 9726### Passo 1: Aggiungi il dominio su Coderblock 9727 97281. Apri il progetto nell'editor 97292. Vai nelle **Impostazioni** del progetto 97303. Sezione **"Dominio personalizzato"** 97314. Inserisci il tuo dominio (es. \`miodominio.com\` o \`app.miodominio.com\`) 97325. Coderblock ti mostrerà i record DNS da configurare 9733 9734### Passo 2: Configura i DNS 9735 9736Vai nel pannello di gestione DNS del tuo provider (Cloudflare, GoDaddy, Namecheap, ecc.) e aggiungi i seguenti record: 9737 9738**Per dominio root** (\`miodominio.com\`): 9739\`\`\` 9740A @ â [IP fornito da Coderblock] 9741\`\`\` 9742 9743**Per sottodominio** (\`www.miodominio.com\` o \`app.miodominio.com\`): 9744\`\`\` 9745CNAME www â {id}.coderblock.app 9746\`\`\` 9747 9748### Passo 3: Verifica e SSL 9749 97501. Coderblock verifica automaticamente la configurazione DNS 97512. Una volta confermata, il **certificato SSL** viene generato automaticamente tramite Let's Encrypt 97523. Il tuo dominio è pronto: sia \`http://\` che \`https://\` funzioneranno 9753 9754## Tempi 9755 9756| Operazione | Tempo | 9757|-----------|-------| 9758| Propagazione DNS | 5 minuti - 48 ore | 9759| Generazione certificato SSL | 1-5 minuti | 9760| Attivazione dominio | Automatica dopo DNS | 9761 9762## Risoluzione problemi 9763 9764| Problema | Soluzione | 9765|----------|----------| 9766| DNS non si propaga | Attendi fino a 48 ore, verifica i record con \`dig\` o \`nslookup\` | 9767| Errore certificato SSL | Verifica che il CNAME punti correttamente, riprova dopo qualche minuto | 9768| Dominio non raggiungibile | Controlla che non ci siano proxy attivi (es. Cloudflare proxy) che interfer
9768iscono | 9769 9770> [!WARNING] Se usi Cloudflare, imposta il proxy su **"DNS only"** (icona grigia) per il record CNAME, almeno durante la configurazione iniziale. Dopo che il certificato SSL è stato generato, puoi riattivare il proxy. 9771`,en:`# Custom Domains 9772 9773\`\`\`anim 9774custom-domain 9775\`\`\` 9776 9777Connect a custom domain to your published app for a professional look. Instead of \`{id}.coderblock.app\`, your users will see \`www.yourdomain.com\`. 9778 9779## Prerequisites 9780 9781- The app must already be **published to production** (Deploy completed) 9782- You must have access to your domain's **DNS management** 9783 9784## How to configure 9785 9786### Step 1: Add the domain on Coderblock 9787 97881. Open the project in the editor 97892. Go to project **Settings** 97903. Section **"Custom Domain"** 97914. Enter your domain (e.g. \`mydomain.com\` or \`app.mydomain.com\`) 97925. Coderblock will show you the DNS records to configure 9793 9794### Step 2: Configure DNS 9795 9796Go to your DNS management panel (Cloudflare, GoDaddy, Namecheap, etc.) and add the following records: 9797 9798**For root domain** (\`mydomain.com\`): 9799\`\`\` 9800A @ â [IP provided by Coderblock] 9801\`\`\` 9802 9803**For subdomain** (\`www.mydomain.com\` or \`app.mydomain.com\`): 9804\`\`\` 9805CNAME www â {id}.coderblock.app 9806\`\`\` 9807 9808### Step 3: Verification and SSL 9809 98101. Coderblock automatically verifies DNS configuration 98112. Once confirmed, the **SSL certificate** is automatically generated via Let's Encrypt 98123. Your domain is ready: both \`http://\` and \`https://\` will work 9813 9814## Timing 9815 9816| Operation | Time | 9817|-----------|------| 9818| DNS propagation | 5 minutes - 48 hours | 9819| SSL certificate generation | 1-5 minutes | 9820| Domain activation | Automatic after DNS | 9821 9822## Troubleshooting 9823 9824| Issue | Solution | 9825|-------|----------| 9826| DNS not propagating | Wait up to 48 hours, verify records with \`dig\` or \`nslookup\` | 9827| SSL certificate error | Verify CNAME points correctly, retry after a few minutes | 9828| Domain unreachable | Check for active proxies (e.g., Cloudflare proxy) that may interfere | 9829 9830> [!WARNING] If using Cloudflare, set the proxy to **"DNS only"** (gray icon) for the CNAME record, at least during initial setup. After the SSL certificate is generated, you can re-enable the proxy. 9831`},billing:{it:`# Fatturazione 9832 9833\`\`\`anim 9834credits 9835\`\`\` 9836 9837Gestisci abbonamento, pagamenti e fatture. 9838 9839## Piani 9840 9841| Piano | Prezzo | Crediti AI | 9842|-------|--------|------------| 9843| Community | Gratuito | ${y} crediti, una tantum (non si rinnovano) | 9844| Pro | $25/mese | 100 crediti ogni mese | 9845| Business | $50/mese | 200 crediti ogni mese | 9846| Enterprise | Su misura | Contatta il team commerciale | 9847 9848Nell'UE/SEE, nel Regno Unito e in Svizzera i prezzi sono mostrati in euro. I prezzi includono già IVA o imposte sulle vendite. La fatturazione annuale costa meno di quella mensile: la [pagina prezzi](/pricing) mostra sempre il prezzo esatto e aggiornato nella tua valuta. Il confronto completo è in [Piani](/docs/plans). 9849 9850## Gestione abbonamento 9851 9852- Vai su **Account â Abbonamento** 9853- Puoi fare upgrade, downgrade o disdire in qualsiasi momento 9854- Gli upgrade sono calcolati pro-rata e i crediti non usati passano al nuovo piano 9855- I pagamenti sono gestiti da **Stripe**: i clienti UE sono fatturati da Coderblock S.r.l. (Italia), tutti gli altri da Coderblock, Inc. (USA) 9856- Le fatture sono disponibili nella sezione fatturazione del tuo account 9857 9858> [!INFO] I crediti mensili si azzerano a ogni rinnovo e non passano al mese successivo. I crediti extra che acquisti restano separati dalla dotazione mensile. 9859`,en:`# Billing 9860 9861\`\`\`anim 9862credits 9863\`\`\` 9864 9865Manage your subscription, payments and invoices. 9866 9867## Plans 9868 9869| Plan | Price | AI credits | 9870|------|-------|------------| 9871| Community | Free | ${y} credits, one-time (they don't renew) | 9872| Pro | $25/month | 100 credits every month | 9873| Business | $50/month | 200 credits every month | 9874| Enterprise | Custom | Contact sales | 9875 9876Customers in the EU/EEA, UK and Switzerland see prices in euros. Prices already include VAT or sales tax. Annual billing costs less than paying monthly: the [pricing page](/pricing) always shows the exact current price in your currency. Full comparison in [Plans](/docs/plans). 9877 9878## Subscription management 9879 9880- Go to **Account â Subscription** 9881- You can upgrade, downgrade or cancel at any time
9882- Upgrades are prorated, and your unspent credits carry over to the new plan 9883- Payments are processed by **Stripe**: EU customers are billed by Coderblock S.r.l. (Italy), everyone else by Coderblock, Inc. (USA) 9884- Invoices are available in the billing section of your account 9885 9886> [!INFO] Monthly credits reset at every renewal and don't roll over to the next month. Extra credits you buy are kept separately from the monthly allowance. 9887`},credits:{it:`# Crediti 9888 9889\`\`\`anim 9890credits 9891\`\`\` 9892 9893I crediti sono l'unità che misura l'utilizzo dell'AI su Coderblock. 9894 9895## Da dove arrivano i crediti 9896 9897- **Community**: ${y} crediti una sola volta, alla registrazione. Non si rinnovano. 9898- **Prova Pro**: +${M} crediti per i 14 giorni della prova. 9899- **Pro**: 100 crediti ogni mese. **Business**: 200 crediti ogni mese. 9900- **Crediti extra**: puoi acquistare pacchetti di crediti in qualsiasi momento con **Acquista crediti**. 9901 9902## Come si consumano i crediti 9903 9904Ogni messaggio costa in base al lavoro AI che ha richiesto davvero, non a tariffa fissa. Contano tre cose: 9905 99061. **La dimensione del task**: una piccola modifica di testo consuma una frazione di credito, mentre generare un'app fullstack completa può richiedere diversi crediti. 99072. **Il modello**: i modelli premium (Claude, GPT-6.1 Sol, GPT-5.6 Terra e Frontier) consumano più crediti dei modelli open per lo stesso lavoro, e Claude Fable 5 è quello che ne consuma di più. Vedi [Modelli](/docs/models). 99083. **Il tuo piano**: i piani a pagamento consumano meno crediti per lo stesso lavoro. 9909 9910Gli strumenti che l'AI usa durante un messaggio, come la generazione di immagini, sono inclusi nel costo di quel messaggio. 9911 9912> [!INFO] La prima generazione del tuo primo progetto la offre Coderblock, fino a un limite: una nota in chat ti avvisa quando si applica. 9913 9914## Stime e consumo reale 9915 9916- Con **Auto** (e con **Frontier** quando disponibile) la finestra dei livelli di qualità mostra una **stima** del costo per messaggio che si aggiorna mentre cambi i livelli. 9917- Dopo ogni messaggio, i crediti effettivamente usati vengono registrati nello storico dei consumi. 9918 9919Fanno fede la stima in app e lo storico dei consumi: gli esempi in questa documentazione sono solo indicativi. 9920 9921## Altri utilizzi dei crediti 9922 9923- Un **IPv4 dedicato** opzionale per un dominio personalizzato si paga in crediti, un anno alla volta. 9924 9925## Monitoraggio 9926 9927Da **Account â Abbonamento** puoi vedere: 9928 9929- I crediti rimanenti 9930- Il consumo per tipo di azione 9931- Gli utilizzi recenti 9932 9933> [!WARNING] Quando i crediti finiscono, l'AI non può avviare nuove richieste finché il piano non si rinnova o non acquisti crediti extra. 9934`,en:`# Credits 9935 9936\`\`\`anim 9937credits 9938\`\`\` 9939 9940Credits are the unit that measures AI usage on Coderblock. 9941 9942## Where credits come from 9943 9944- **Community**: ${y} credits once, when you sign up. They don't renew. 9945- **Pro trial**: +${M} credits for the 14 days of the trial. 9946- **Pro**: 100 credits every month. **Business**: 200 credits every month. 9947- **Extra credits**: you can buy credit packs at any time with **Buy credits**. 9948 9949## How credits are consumed 9950 9951Each message is charged for the AI work it actually needed, not a flat fee. Three things make the difference: 9952 99531. **The size of the task**: a small text change uses a fraction of a credit, while generating a complete fullstack app can take several credits. 99542. **The model**: premium models (Claude, GPT-6.1 Sol, GPT-5.6 Terra and Frontier) use more credits than open models for the same work, and Claude Fable 5 uses the most. See [Models](/docs/models). 99553. **Your plan**: paid plans use fewer credits for the same work. 9956 9957Tools the AI uses during a message, such as image generation, are included in that message's cost. 9958 9959> [!INFO] The first generation of your first project is on Coderblock, up to a limit: a note in the chat tells you when it applies. 9960 9961## Estimates and actual usage 9962 9963- With **Auto** (and **Frontier** when available) the quality-dials window shows an **estimated** cost per message that updates as you change the levels. 9964- After each message, the credits actually used are recorded in your usage history. 9965 9966The in-app estimate and your usage history are the figures that count: any example in these docs is only indicative. 9967 9968## Other uses of credits 9969 9970- An optional **dedicated IPv4** for a custom domain is charged in credits, one year at a time. 9971 9972## Monitoring 9973 9974From **Account â Subscription** you can see: 9975 9976- Credits remaining 9977- Usage by action type 9978- Recent usage 9979 9980> [!WARNING] When your credits run out, the AI can't start new requests until your plan renews or you buy extra credits. 9981`},plans:{it:`# Piani 9982 9983\`\`\`anim 9984plans 9985\`\`\` 9986 9987Scegli il piano più adatto alle tue esigenze. 9988 9989## Confronto piani 9990 9991| | Community | Pro | Business | Enterprise | 9992|---|-----------|-----|----------|------------| 9993| Prezzo | Gratuito | $25/mese | $50/mese | Su misura | 9994| Crediti AI | ${y} (una tantum) | 100/mese | 200/mese | Su misura | 9995| Progetti | 2 | Illimitati | Illimitati | Illimitati | 9996| Crediti per messaggio | Tariffa standard | Ridotti | Ridotti | Su misura | 9997| Modelli | Auto, modelli open, GPT-6 Luna | Tutti, inclusi Claude, GPT-6.1 Sol, GPT-5.6 Terra e Frontier | Tutti | Tutti | 9998| Repository GitHub | Pubblici | Privati | Privati | Privati | 9999| Email transazionali gestite | 50/giorno | 500/giorno | 2.000/giorno | Su misura | 10000| Generazione video e voce AI | No | Sì | Sì | Sì | 10001| Supporto | Community | Email | Prioritario | Manager dedicato | 10002 10003Enterprise aggiunge installazione on-premise, SSO e garanzie SLA. I prezzi includono IVA o imposte sulle vendite; la [pagina prezzi](/pricing) mostra il prezzo aggiornato nella tua valuta, compreso lo sconto annuale. 10004 10005## Prova Pro 10006 10007Gli utenti Community possono provare Pro gratis per **14 giorni**. La prova aggiunge **${M} crediti** (in tutto ${V} insieme ai crediti Community) e sblocca le funzionalità Pro. I crediti bonus scadono con la prova. Se hai già avuto un abbonamento Pro a pagamento, la prova non viene riproposta e puoi abbonarti direttamente. 10008 10009## Come cambiare piano 10010 100111. Vai su **Account â Abbonamento** 100122. Seleziona il nuovo piano 100133. Gli upgrade sono immediati e calcolati pro-rata 100144. I crediti non usati passano al nuovo piano 10015 10016> [!TIP] Inizia con Community (o con la prova Pro) per provare la piattaforma, poi passa a Pro quando ti servono più crediti e i modelli premium. 10017`,en:`# Plans 10018 10019\`\`\`anim 10020plans 10021\`\`\` 10022 10023Choose the plan that fits your needs. 10024 10025## Plan comparison 10026 10027| | Community | Pro | Business | Enterprise | 10028|---|-----------|-----|----------|------------| 10029| Price | Free | $25/month | $50/month | Custom | 10030| AI credits | ${y} (one-time) | 100/month | 200/month | Custom | 10031| Projects | 2 | Unlimited | Unlimited | Unlimited | 10032| Credits per message | Standard rate | Lower | Lower | Custom | 10033| Models | Auto, open models, GPT-6 Luna | All, incl. Claude, GPT-6.1 Sol, GPT-5.6 Terra and Frontier | All | All | 10034| GitHub repositories | Public | Private | Private | Private | 10035| Managed transactional emails | 50/day | 500/day | 2,000/day | Custom | 10036| AI video and voice generation | No | Yes | Yes | Yes | 10037| Support | Community | Email | Priority | Dedicated manager | 10038 10039Enterprise adds on-premise deployment, SSO and SLA guarantees. Prices include VAT or sales tax; the [pricing page](/pricing) shows the current price in your currency, including the annual discount. 10040 10041## Pro trial 10042 10043Community users can try Pro free for **14 days**. The trial adds **${M} credits** (so you'll have ${V} in total with your Community credits) and unlocks the Pro features. The bonus credits expire with the trial. If you've already had a paid Pro subscription, the trial isn't offered again and you can subscribe directly. 10044 10045## How to change plan 10046 100471. Go to **Account â Subscription** 100482. Select the new plan 100493. Upgrades are immediate and prorated 100504. Your unspent credits carry over to the new plan 10051 10052> [!TIP] Start with Community (or the Pro trial) to try the platform, then move to Pro when you need more credits and the premium models. 10053`}
10053,changelog:{it:`# Changelog 10054 10055\`\`\`anim 10056changelog 10057\`\`\` 10058 10059Ultime novità e aggiornamenti della piattaforma Coderblock. 10060 10061--- 10062 10063## Settembre 2026 10064 10065### ð Nuove funzionalità 10066 10067- **Nuovi modelli**: Claude Opus 5.5 è ora il modello Anthropic di punta su Coderblock, e GPT-6 Sol e GPT-6 Luna sostituiscono GPT-5.6 Sol e GPT-5.6 Luna. Claude Sonnet 5 resta il modello Claude per il lavoro di tutti i giorni. Vedi [Modelli](/docs/models). 10068- **GPT-6.1 Sol** (30 settembre): la modalità Sol passa da GPT-6 Sol a GPT-6.1 Sol, allo stesso prezzo e più forte sul codice. Vedi [Modelli](/docs/models). 10069- **Selettore con i nomi reali**: ogni opzione mostra ora il nome effettivo del modello, raggruppato per provider, accanto ad Auto e Frontier. 10070 10071### ð³ Piani 10072 10073- Piani attuali: Community (gratuito, ${y} crediti una tantum), Pro ($25/mese, 100 crediti al mese), Business ($50/mese, 200 crediti al mese) ed Enterprise (su misura). Vedi [Piani](/docs/plans). 10074 10075> [!INFO] Le voci qui sotto descrivono la piattaforma com'era all'epoca: alcuni modelli, nomi di modalità e prezzi citati sono stati sostituiti. 10076 10077--- 10078 10079## Marzo 2026 10080 10081### ð Nuove funzionalità 10082 10083- **AI Chat: Stop & Coda messaggi**: Ora puoi interrompere l'esecuzione dell'AI in qualsiasi momento con il pulsante Stop. Puoi anche scrivere messaggi mentre l'AI sta lavorando: verranno messi in coda e inviati automaticamente al termine dell'esecuzione, oppure puoi forzare l'invio immediato. 10084- **Modalità Eco (Kimi K2.5)**: Terza modalità di generazione AI accanto a Turbo (Sonnet 4.6) e Premium (Opus 4.6). Circa 80% più economica, ideale per task semplici. 10085- **Variabili d'ambiente in chat**: Quando l'AI rileva la necessità di una API key, mostra un campo di input mascherato direttamente nella chat. Salva con un click. 10086- **Query SQL dirette**: L'agente AI può eseguire query SQL (SELECT, INSERT, UPDATE, DELETE, DDL) direttamente sul database del progetto con livelli di sicurezza e conferma utente per operazioni distruttive. 10087- **HIL (Human-in-the-Loop)**: L'agente presenta pulsanti a scelta multipla per decisioni ambigue (scope del cloning, modifiche al database, etc.). 10088- **Generazione immagini nei progetti**: L'AI può generare immagini (hero banner, illustrazioni, icone) direttamente nei file del progetto con DALL-E. 10089- **Social Login per i progetti**: OAuth proxy condiviso Coderblock con Google + GitHub. I tuoi utenti possono loggarsi con un click. 10090- **Navigazione back nella preview**: Pulsante indietro nel browser di preview + navigazione SPA senza flash bianco. 10091- **32 template prodotto**: Booking platform, online store, MMORPG game, content platform, wellness a
10091pp, e molto altro. 10092- **20+ template feature**: Admin panel, cart, chat, CMS, dashboard, notifications, payments, search, subscriptions, task management. 10093 10094### â¡ Miglioramenti 10095 10096- **Hot-reload 5x più veloce**: Da ~60-80s a ~7-13s per modifiche singole ai file. Path ottimizzato con \`aws s3 cp\` mirato. 10097- **UI Chat pulita**: Blocchi tool collassabili ("N tools usati" à la Lovable), nessuna narrazione intermedia del ragionamento AI. 10098- **RAG migliorato**: Indicizzazione automatica per template prodotto (da 148 a 284 punti, da 99 a 103 file). 10099- **code_search riscritto**: Bug fondamentale corretto, filtri di esclusione file, cache in-memory. 10100- **Prompt caching**: Riduzione costi ~27-33% con prompt caching di Anthropic. 10101- **Tema chiaro di default**: La homepage ora usa il tema chiaro, dark mode per scelta esplicita. 10102 10103### ð Sicurezza 10104 10105- **Row Level Security (RLS)**: Abilitato su tutte le 66 tabelle, accesso anonimo revocato su 58 tabelle sensibili. 10106- **Backup database completo**: pg_dump schema + dati con PostgreSQL 17. 10107- **Rate limiting**: slowapi su tutti gli endpoint API. 10108- **Cancellazione account self-service**: Conformità GDPR con pulizia completa dei dati. 10109 10110### ð³ Pagamenti & Fatturazione 10111 10112- **Architettura Dual-Stripe**: Coderblock Inc (US/non-EU) + Coderblock Srl (IT/EU) con routing automatico per paese. 10113- **Fatture in Cloud**: Fatturazione elettronica italiana automatica (SDI) per pagamenti Srl. 10114- **Stripe Adaptive Pricing**: Prezzi in USD base con conversione automatica + Stripe Tax per IVA. 10115- **Pacchetti crediti**: 25/75/170/400 crediti a $10/$25/$50/$100. 10116 10117### ð Bug fix 10118 10119- Corretto ReactDOM import in tutti i template base 10120- Risolto stuck del sync nella preview dopo timeout SSE 10121- Fix del loop infinito nelle operazioni distruttive con conferma utente 10122- Corretta injection SQL nel parametro \`order_dir\` 10123- Fix username duplicati durante social login 10124 10125--- 10126 10127## Febbraio 2026 10128 10129### ð Nuove funzionalità 10130 10131- **Architettura Single-Agent**: Migrazione dal sistema multi-agente Agno al pattern Claude Code: think â act â observe â correct. 10132- **Sub-agenti paralleli**: Fino a 3-4 sub-agenti concorrenti con \`asyncio.gather()\` per generazione di codice frontend e backend. 10133- **Preview su Fly.io**: VM reali con Vite dev server e HMR su \`*.coderblock.dev\`. 10134- **Deploy in produzione**: Container Docker unificato su \`*.coderblock.app\` con Fly.io. 10135- **Clonazione siti**: L'AI può analizzare e clonare siti web esistenti da URL. 10136- **Auto-discovery delle route**: \`import.meta.glob\` per scoperta automatica delle pagine nel frontend. 10137 10138### â¡ Miglioramenti 10139 10140- **NeonDB resiliente**: pool_recycle, pool_pre_ping, gestione errori migliorata. 10141- **Web scraper Playwright**: Browser headless per siti JS-rendered, httpx come fallback. 10142- **Health check frontend**: Rilevamento automatico errori Vite 500 con loop di auto-fix. 10143 10144--- 10145 10146## Gennaio 2026 10147 10148### ð Lancio 10149 10150- Lancio della piattaforma Coderblock.ai 10151- **Claude Sonnet 4.6** come modello principale 10152- **Claude Opus 4.6** per generazione UI frontend premium 10153- **Claude Haiku 4.5** per routing e analisi 10154- Dashboard progetti, editor con split-screen, file manager 10155- Sistema di crediti con piani Community e Pro 10156`,en:`# Changelog 10157 10158\`\`\`anim 10159changelog 10160\`\`\` 10161 10162Latest news and platform updates. 10163 10164--- 10165 10166## September 2026 10167 10168### ð New features 10169 10170- **New models**: Claude Opus 5.5 is now Anthropic's top model on Coderblock, and GPT-6 Sol and GPT-6 Luna replace GPT-5.6 Sol and GPT-5.6 Luna. Claude Sonnet 5 stays the everyday Claude model. See [Models](/docs/models). 10171- **GPT-6.1 Sol** (September 30): the Sol mode moves from GPT-6 Sol to GPT-6.1 Sol, at the same price and stronger on code. See [Models](/docs/models). 10172- **Model picker with real names**: every option now shows the actual model name, grouped by provider, next to Auto and Frontier. 10173 10174### ð³ Plans 10175 10176- Current plans: Community (free, ${y} one-time credits), Pro ($25/month, 100 credits a month), Business ($50/month, 200 credits a month) and Enterprise (custom). See [Plans](/docs/plans). 10177 10178> [!INFO] The entries below describe the platform as it was at the time: some of the models, mode names and prices they mention have since been replaced. 10179 10180--- 10181 10182## March 2026 10183 10184### ð New Features 10185 10186- **AI Chat: Stop & Message Queue**: You can now stop AI execution at any time with the Stop button. You can also type messages while the AI is working: they'll be queued and sent automatically when the current run completes, or you can force immediate delivery. 10187- **Eco Mode (Kimi K2.5)**: Third AI generation mode alongside Turbo (Sonnet 4.6) and Premium (Opus 4.6). About 80% cheaper, ideal for simple tasks. 10188- **In-chat environment variables**: When the AI detects the need for an API key, it shows a masked input field directly in the chat. Save with one click. 10189- **Direct SQL queries**: The AI agent can execute SQL queries (SELECT, INSERT, UPDATE, DELETE, DDL) directly on the project database with safety layers and user confirmation for destructive operations. 10190- **HIL (Human-in-the-Loop)**: The agent presents multiple-choice buttons for ambiguous decisions (cloning scope, database changes, etc.). 10191- **Image generation in projects**: The AI can generate images (hero banners, illustrations, icons) directly in project files with DALL-E. 10192- **Social Login for projects**: Shared Coderblock OAuth proxy with Google + GitHub. Your users can log in with one click. 10193- **Back navigation in preview**: Back button in preview browser + SPA navigation without white flash. 10194- **32 product templates**: Booking platform, online store, MMORPG game, content platform, wellness a
10194pp, and much more. 10195- **20+ feature templates**: Admin panel, cart, chat, CMS, dashboard, notifications, payments, search, subscriptions, task management. 10196 10197### â¡ Improvements 10198 10199- **5x faster hot-reload**: From ~60-80s to ~7-13s for single file changes. Optimized path with targeted \`aws s3 cp\`. 10200- **Clean chat UI**: Collapsible tool blocks ("N tools used" à la Lovable), no intermediate reasoning narration. 10201- **Improved RAG**: Automatic indexing for product templates (from 148 to 284 points, 99 to 103 files). 10202- **code_search rewritten**: Fundamental bug fixed, file exclusion filters, in-memory cache. 10203- **Prompt caching**: ~27-33% cost reduction with Anthropic prompt caching. 10204- **Light theme by default**: Homepage now uses light theme, dark mode by explicit choice. 10205 10206### ð Security 10207 10208- **Row Level Security (RLS)**: Enabled on all 66 tables, anonymous access revoked on 58 sensitive tables. 10209- **Full database backup**: pg_dump schema + data with PostgreSQL 17. 10210- **Rate limiting**: slowapi on all API endpoints. 10211- **Self-service account deletion**: GDPR compliance with full data cleanup. 10212 10213### ð³ Payments & Billing 10214 10215- **Dual-Stripe architecture**: Coderblock Inc (US/non-EU) + Coderblock Srl (IT/EU) with automatic country-based routing. 10216- **Fatture in Cloud**: Automatic Italian electronic invoicing (SDI) for Srl payments. 10217- **Stripe Adaptive Pricing**: USD base prices with automatic conversion + Stripe Tax for VAT. 10218- **Credit packages**: 25/75/170/400 credits at $10/$25/$50/$100. 10219 10220### ð Bug Fixes 10221 10222- Fixed ReactDOM import in all base templates 10223- Fixed stuck sync in preview after SSE timeout 10224- Fixed infinite loop in destructive operations with user confirmation 10225- Fixed SQL injection in \`order_dir\` parameter 10226- Fixed duplicate usernames during social login 10227 10228--- 10229 10230## February 2026 10231 10232### ð New Features 10233 10234- **Single-Agent Architecture**: Migration from multi-agent Agno system to Claude Code pattern: think â act â observe â correct. 10235- **Parallel sub-agents**: Up to 3-4 concurrent sub-agents with \`asyncio.gather()\` for frontend and backend code generation. 10236- **Preview on Fly.io**: Real VMs with Vite dev server and HMR on \`*.coderblock.dev\`. 10237- **Production deployment**: Unified Docker container on \`*.coderblock.app\` with Fly.io. 10238- **Site cloning**: The AI can analyze and clone existing websites from URLs. 10239- **Route auto-discovery**: \`import.meta.glob\` for automatic page discovery in the frontend. 10240 10241### â¡ Improvements 10242 10243- **Resilient NeonDB**: pool_recycle, pool_pre_ping, improved error handling. 10244- **Playwright web scraper**: Headless browser for JS-rendered sites, httpx as fallback. 10245- **Frontend health check**: Automatic Vite 500 error detection with auto-fix loop. 10246 10247--- 10248 10249## January 2026 10250 10251### ð Launch 10252 10253- Coderblock.ai platform launch 10254- **Claude Sonnet 4.6** as primary model 10255- **Claude Opus 4.6** for premium frontend UI generation 10256- **Claude Haiku 4.5** for routing and analysis 10257- Project dashboard, split-screen editor, file manager 10258- Credit system with Community and Pro plans 10259`},payments:{it:`# Accettare Pagamenti nella tua App 10260 10261\`\`\`anim 10262payment-funnel 10263\`\`\` 10264 10265Con Coderblock puoi aggiungere pagamenti veri (una tantum e abbonamenti) alla tua app semplicemente chiedendolo in chat. L'integrazione usa **Stripe**: in test funziona subito senza alcuna configurazione, e al go-live gli incassi arrivano direttamente sul **tuo** account dedicato â Coderblock non applica alcuna commissione aggiuntiva. 10266 10267## Quick start 10268 10269Scrivi in chat cosa vuoi vendere, ad esempio: 10270 10271\`\`\` 10272Aggiungi un abbonamento Premium da 9,90â¬/mese e sblocca la sezione Reports solo per gli abbonati 10273\`\`\` 10274 10275\`\`\` 10276Vendi il mio ebook a 19⬠con un pulsante "Acquista ora" 10277\`\`\` 10278 10279L'AI si occupa di tutto: crea i prodotti e i prezzi **reali** su Stripe, genera il checkout e le pagine di successo/annullamento, prepara il database per ordini e abbonamenti â e il webhook che conferma i pagamenti è già attivo, senza che tu debba fare nulla. 10280 10281## Zero configurazione: in test non serve niente 10282 10283\`\`\`anim 10284golive 10285\`\`\` 10286 10287Davvero niente: **nessun account Stripe, nessuna chiave, nessun form, nessuna attivazione**. Chiedi i pagamenti in chat e funzionano: prodotti, prezzi e checkout girano su un ambiente Stripe di test gestito da Coderblock, isolato per progetto. I webhook non esistono proprio per te: ci pensa la piattaforma. 10288 10289Il **tuo** account Stripe dedicato nasce solo quando vuoi incassare **davvero**: dal tab **Backend â Pagamenti** completi l'attivazione guidata di Stripe (dati aziendali, IBAN) â è l'unico passaggio che vedrai, e serve solo al go-live. I ricavi arrivano direttamente a te, Coderblock non applica commissioni.
10290 10291### Ho già un account Stripe: posso usare il mio? 10292 10293Sì (modalità avanzata): dillo all'AI e ti chiederà la tua **Secret Key** tramite un form sicuro in chat (Dashboard Stripe â Developers â API keys; in sviluppo usa la \`sk_test_...\`). 10294 10295> [!WARNING] Non incollare MAI la chiave segreta come messaggio in chat. Trattala come le chiavi di casa: solo il form sicuro la salva cifrata. 10296 10297Anche in questa modalità il **webhook** viene registrato automaticamente. 10298 10299## Testare i pagamenti 10300 10301I pagamenti di test funzionano sia in **anteprima** sia sull'app **pubblicata**: 10302 10303- Carta di prova: \`4242 4242 4242 4242\`, qualsiasi scadenza futura, qualsiasi CVC 10304- Nessun addebito reale 10305- Vedi prodotti e stato nel tab **Backend â Pagamenti** dell'editor; ordini e abbonamenti compaiono nel database della tua app 10306 10307## Come funziona il meccanismo (due ambienti, sempre) 10308 10309La tua app ha **due ambienti di pagamento paralleli**, attivi contemporaneamente: 10310 10311| | Ambiente di TEST | Ambiente LIVE | 10312|---|---|---| 10313| Dove | Anteprima dell'editor (e app pubblicata prima del go-live) | App pubblicata, dopo il go-live | 10314| Account Stripe | Ambiente gestito da Coderblock, isolato per progetto | Il **tuo** account dedicato | 10315| Carte | Solo di prova (\`4242 4242 4242 4242\`) | Carte vere | 10316| Configurazione | Nessuna | Attivazione guidata una tantum | 10317 10318Regole importanti: 10319 10320- **L'anteprima paga SEMPRE in test**, anche dopo il go-live: puoi provare modifiche al checkout per sempre senza rischiare addebiti veri. Le carte reali funzionano solo sull'app pubblicata. 10321- Ordini e abbonamenti di test e reali finiscono nelle **stesse tabelle** del tuo database (\`ordini/subscriptions\`), ma ogni riga ha il campo \`livemode\`: \`false\` = pagamento di prova, \`true\` = soldi veri. Così puoi sempre distinguerli (e, se vuoi, sbloccare i contenuti in produzione solo con abbonamenti reali â chiedilo in chat). 10322- Il **webhook** che conferma i pagamenti e scrive nel database è unico e gestito dalla piattaforma: funziona per entrambi gli ambienti senza che tu debba configurare nulla. 10323- I **price id** nel codice della tua app restano quelli di test anche dopo il go-live: la piattaforma li traduce automaticamente nei gemelli live al momento del checkout. Zero modifiche al codice. 10324 10325## Dove vedere gli incassi 10326 10327Nel **Backend Manager â Pagamenti** trovi: modalità attiva (TEST/LIVE), stato del webhook, prodotti e prezzi, pagamenti recenti e abbonamenti â senza uscire da Coderblock. 10328 10329## Problemi comuni 10330 10331| Errore | Causa | Soluzione | 10332|---|---|---| 10333| \`PRICE_KEY_MODE_MISMATCH\` | Il price id nel codice non esiste nell'ambiente in uso | Chiedi in chat: *"ricrea il prodotto e aggiorna il price id"* | 10334| Pagamento riuscito ma ordine assente | Evento webhook non ancora elaborato | Attendi qualche secondo e ricarica; se persiste, segnalalo in chat | 10335 10336Quando sei pronto a incassare davvero, leggi [Andare Live](/docs/payments-golive). 10337`,en:`# Accept Payments in your App 10338 10339\`\`\`anim 10340payment-funnel 10341\`\`\` 10342 10343With Coderblock you can add real payments (one-time and subscriptions) to your app just by asking in chat. The integration uses **Stripe**: in test it works immediately with zero configuration, and at go-live revenue goes straight to your **own dedicated account** â Coderblock adds no extra fees. 10344 10345## Quick start 10346 10347Tell the chat what you want to sell, for example: 10348 10349\`\`\` 10350Add a Premium subscription at $9.90/month and unlock the Reports section for subscribers only 10351\`\`\` 10352 10353\`\`\` 10354Sell my ebook for $19 with a "Buy now" button 10355\`\`\` 10356 10357The AI handles everything: it creates the **real** products and prices on Stripe, generates the checkout and success/cancel pages, prepares the database for orders and subscriptions â and the webhook confirming payments is already live, with nothing for you to do. 10358 10359## Zero setup: nothing needed in test 10360 10361\`\`\`anim 10362golive 10363\`\`\` 10364 10365Literally nothing: **no Stripe account, no keys, no forms, no activation**. Ask for payments in chat and they work: products, prices and checkout run on a Coderblock-managed Stripe test environment, isolated per project. Webhooks simply don't exist for you: the platform handles them. 10366 10367**Your** dedicated Stripe account is born only when you want to charge **real** cards: from **Backend â Payments** you complete Stripe's guided activation (business details, bank account) â the only step you'll ever see, needed only at go-live. Revenue goes straight to you; Coderblock adds no fees. 10368 10369### I already have a Stripe account â can I use mine? 10370 10371Yes (advanced mode): tell the AI and it will ask for your **Secret Key** through a secure in-chat form (Stripe Dashboard â Developers â API keys; use the \`sk_test_...\` one while building). 10372 10373> [!WARNING] NEVER paste your secret key as a chat message. Treat it like the keys to your house: only the secure form stores it encrypted. 10374 10375In this mode too, the **webhook** is registered automatically. 10376 10377## Testing payments 10378 10379Test payments work both in the **preview** and on the **published** app: 10380 10381- Test card: \`4242 4242 4242 4242\`, any future expiry, any CVC 10382- No real charges 10383- See products and status in the editor's **Backend â Payments** tab; orders and subscriptions land in your app's database 10384 10385## How the mechanism works (two environments, always) 10386 10387Your app has **two parallel payment environments**, active at the same time: 10388 10389| | TEST environment | LIVE environment | 10390|---|---|---| 10391| Where | Editor preview (and the published app before go-live) | Published app, after go-live | 10392| Stripe account | Coderblock-managed environment, isolated per project | **Your** dedicated account | 10393| Cards | Test only (\`4242 4242 4242 4242\`) | Real cards | 10394| Setup | None | One-time guided activation | 10395 10396Important rules: 10397 10398- **The preview ALWAYS pays in test**, even after go-live: you can keep testing checkout changes forever with no risk of real charges. Real cards only work on the published app. 10399- Test and real orders/subscriptions land in the **same tables** of your database, but every row carries a \`livemode\` field: \`false\` = test payment, \`true\` = real money. You can always tell them apart (and, if you want, gate production content on real subscriptions only â just ask in chat). 10400- The **webhook** that confirms payments and writes to your database is single and platform-managed: it covers both environments with zero configuration on your side. 10401- The **price ids** in your app's code stay the test ones even after go-live: the platform automatically translates them to their live twins at checkout time. Zero code changes. 10402 10403## Where to see your revenue 10404 10405**Backend Manager â Payments** shows: active mode (TEST/LIVE), webhook health, products and prices, recent payments and subscriptions â without leaving Coderblock. 10406 10407## Common issues 10408 10409| Error | Cause | Fix | 10410|---|---|---| 10411| \`PRICE_KEY_MODE_MISMATCH\` | The price id in the code doesn't exist in the active environment | Ask the chat: *"recreate the product and update the price id"* | 10412| Payment succeeded but no order recorded | Webhook event not processed yet | Wait a few seconds and reload; if it persists, report it in chat | 10413 10414Ready to charge real cards? Read [Going Live](/docs/payments-golive). 10415`},"payments-golive":{it:`# Andare Live con i Pagamenti 10416 10417\`\`\`anim 10418golive 10419\`\`\` 10420 10421Quando l'app funziona con i pagamenti di test, passare agli incassi reali richiede pochi minuti. à l'unico momento in cui serve una configurazione â ed è guidata. 10422 10423## Come funziona il go-live 10424 10425Al go-live Coderblock crea il **tuo account Stripe dedicato** (i test giravano su un ambiente gestito dalla piattaforma): l'account è intestato a te, gli incassi arrivano sul tuo IBAN e hai la tua dashboard Stripe personale. 10426 104271. **Avvia l'attivazione** â dal tab **Backend â Pagamenti** clicca "Attiva pagamenti reali": un breve form (email e paese) crea il tuo account Stripe dedicato. 104282. **Completa la verifica Stripe** â si apre la procedura guidata ufficiale di Stripe: dati aziendali o personali, documento d'identità , IBAN. à il KYC richiesto per legge a chiunque incassi con carta â si fa una sola volta. 104293. **Prodotti e prezzi: automatici** â Coderblock copia da solo i tuoi prodotti e prezzi di test sul nuovo account e aggiorna la corrispondenza dei price id. **Il codice della tua app non cambia**: il checkout usa automaticamente i prezzi live. 104304. **Pagine legali** â Stripe richiede che l'app pubblicata abbia privacy policy, termini di servizio e politica di rimborso. Chiedile in chat se mancano. 104315. **Test finale con carta vera** â fai un acquisto reale di piccolo importo (puoi rimborsarlo subito dalla dashboard Stripe) e verifica: pagamento nella tua dashboard Stripe, ordine registrato nell'app. 10432 10433## Tasse e fatturazione: cosa devi sapere 10434 10435Coderblock **non è il venditore** dei tuoi prodotti: incassi direttamente sul tuo account Stripe, quindi **IVA/imposte e fatture sono responsabilità tua**, come per qualsiasi attività . 10436 10437- **[Stripe Tax](https://stripe.com/tax)**: calcolo automatico dell'IVA/sales tax per paese â attivabile dal dashboard, consigliato se vendi all'estero 10438- **Fatture**: Stripe può emettere ricevute automatiche; per la fatturazione elettronica italiana (SDI) servono strumenti dedicati (es. Fatture in Cloud, integrabile via API chiedendolo in chat) 10439- In dubbio, parla con il tuo commercialista prima di andare live 10440 10441## Quando si attiva, esattamente? 10442 10443Non devi premere nessun interruttore: quando Stripe completa la verifica del tuo account, avvisa Coderblock
10443in automatico e **da quel momento i checkout dell'app pubblicata passano sul tuo account** â carte vere, incassi sul tuo IBAN. Puoi seguire lo stato in **Backend â Pagamenti**. 10444 10445## E i pagamenti di test? 10446 10447Continuano a funzionare come prima, in parallelo â e per sempre: **l'anteprima dell'editor paga sempre in test** con la carta \`4242 4242 4242 4242\`, anche dopo il go-live, così puoi provare modifiche senza rischi. Le righe di prova nel database sono marcate \`livemode = false\`, quelle reali \`livemode = true\`. Non c'è niente da "switchare". 10448`,en:`# Going Live with Payments 10449 10450\`\`\`anim 10451golive 10452\`\`\` 10453 10454Once your app works with test payments, switching to real revenue takes minutes. It's the only moment that needs any configuration â and it's guided. 10455 10456## How go-live works 10457 10458At go-live Coderblock creates **your own dedicated Stripe account** (tests ran on a platform-managed environment): the account belongs to you, revenue lands in your bank account, and you get your own Stripe dashboard. 10459 104601. **Start the activation** â in **Backend â Payments** click "Enable real payments": a short form (email and country) creates your dedicated Stripe account. 104612. **Complete Stripe's verification** â Stripe's official guided flow opens: business or personal details, ID document, bank account. This is the KYC legally required of anyone charging cards â done once. 104623. **Products and prices: automatic** â Coderblock copies your test products and prices to the new account by itself and maps the price ids. **Your app's code doesn't change**: checkout automatically uses the live prices. 104634. **Legal pages** â Stripe requires your published app to have a privacy policy, terms of service and refund policy. Ask the chat to add them if missing. 104645. **Final test with a real card** â make a small real purchase (you can refund it right away from your Stripe dashboard) and verify: payment in your Stripe dashboard, order recorded in the app. 10465 10466## Taxes and invoicing: what you need to know 10467 10468Coderblock is **not the seller** of your products: you charge customers directly on your own Stripe account, so **VAT/sales tax and invoices are your responsibility**, like for any business. 10469 10470- **[Stripe Tax](https://stripe.com/tax)**: automatic VAT/sales-tax calculation per country â enable it from the dashboard, recommended if you sell internationally 10471- **Invoices**: Stripe can issue automatic receipts; country-specific e-invoicing may need dedicated tools (ask the chat to integrate one via API) 10472- When in doubt, talk to your accountant before going live 10473 10474## When does it switch, exactly? 10475 10476There's no switch to flip: when Stripe finishes verifying your account, it notifies Coderblock automatically and **from that moment the published app's checkouts run on your account** â real cards, revenue to your bank. You can follow the status in **Backend â Payments**. 10477 10478## What about test payments? 10479 10480They keep working exactly as before, in parallel â forever: **the editor preview always pays in test** with card \`4242 4242 4242 4242\`, even after go-live, so you can keep experimenting risk-free. Test rows in your database are marked \`livemode = false\`, real ones \`livemode = true\`. There's nothing to "switch". 10481`}};function mi(a,n){return n==="it"?`# ${a.replace(/-/g," ").replace(/\b\w/g,i=>i.toUpperCase())} 10482 10483Questa pagina è in fase di redazione. Torna presto per il contenuto completo. 10484 10485> [!INFO] Nel frattempo, prova a chiedere all'AI nella chat del progetto. Può aiutarti con qualsiasi argomento. 10486`:`# ${a.replace(/-/g," ").replace(/\b\w/g,i=>i.toUpperCase())} 10487 10488This page is being written. Check back soon for the full content. 10489 10490> [!INFO] In the meantime, try asking the AI in the project chat. It can help with any topic. 10491`}const hi=new Set(["[email protected]","[email protected]","[email protected]"]);function gi(a){const i=(a.split(/\n\s*\n/).map(s=>s.trim()).find(s=>s&&!/^(#|```|\||>|-|\*|\d+\.|<|!\[)/.test(s))??"").replace(/\[([^\]]+)\]\([^)]*\)/g,"$1").replace(/[*_`]/g,"").replace(/\s+/g," ").trim();return i?i.length>155?`${i.slice(0,152).replace(/\s+\S*$/,"")}â¦`:i:"Coderblock documentation: build full-stack web apps by describing them in chat."}const Li=()=>{const{slug:a}=ma(),[n]=Sa(),i=pa(k=>k.auth.user),s=!!i?.email&&hi.has(i.email),o=a||"welcome",r=Aa(),[c,h]=g.useState(null),[v,f]=g.useState(""),[C,G]=g.useState(!0),[R,D]=g.useState(!1),[x,T]=g.useState(!1);g.useEffect(()=>{let k=!1;return G(!0),h(null),pi(n).then(L=>{if(k)return;const F=L[o];h(F?.content??null),f(F?.title??"")}).finally(()=>{k||G(!1)}),()=>{k=!0}},[o,n]);const q=ui(o,n),N=c??q,_=g.useMemo(()=>Xa(N),[N]),ie=v||N.match(/^#\s+(.+)/m)?.[1]||o,b=g.useMemo(()=>gi(N),[N]);ya(`docs:${o}`,{title:`${ie} · Coderblock Docs`,description:b}),g.useEffect(()=>{if(C)return;const k=setTimeout(()=>document.dispatchEvent(new Event("render-event")),100);return()=>clearTimeout(k)},[C]);const j=g.useCallback(async(k,L)=>{await X.update(o,n,{title:L,content:k}),ae.delete(n),h(k),f(L),D(!1)},[o,n]),U=g.useCallback(async()=>{T(!0);try{const k=[];for(const[B,K]of Object.entries(Z))for(const[W,H]of Object.entries(K)){const ze=H.match(/^#\s+(.+)/m);k.push({slug:B,lang:W,title:ze?.[1]??B,content:H})}const L=await X.seed(k);alert(`Seeded ${L.seeded} documents to database.`),ae.delete(n);const F=await X.get(o,n);h(F.content),f(F.title)}catch(k){alert(`Seed failed: ${k?.response?.data?.detail??k.message}`)}finally{T(!1)}},[o,n]);if(a&&!r.includes(a)&&!Z[a])return e(ha,{to:"/docs/welcome",replace:!0});if(R&&s){const k=N.match(/^#\s+(.+)/m)?.[1]??o;return e(oi,{initialContent:N,initialTitle:v||k,slug:o,lang:n,onSave:j,onCancel:()=>D(!1)})}return t(Ca,{lang:n,currentSlug:o,toc:_,children:[s&&t("div",{className:"flex items-center gap-2 mb-6 pb-4 border-b border-gray-200 dark:border-zinc-800",children:[t("button",{onClick:()=>D(!0),className:"flex items-center gap-2 px-3 py-1.5 text-sm font-medium rounded-lg bg-indigo-100 dark:bg-indigo-600/20 text-indigo-600 dark:text-indigo-400 hover:bg-indigo-200 dark:hover:bg-indigo-600/30 border border-indigo-200 dark:border-indigo-500/30 transition-colors",children:[e(ca,{className:"w-4 h-4"}),"Edit page"]}),!c&&!C&&t("button",{onClick:U,disabled:x,className:"flex items-center gap-2 px-3 py-1.5 text-sm font-medium rounded-lg bg-amber-100 dar
10491k:bg-amber-600/20 text-amber-600 dark:text-amber-400 hover:bg-amber-200 dark:hover:bg-amber-600/30 border border-amber-200 dark:border-amber-500/30 transition-colors disabled:opacity-40",children:[x?e(ve,{className:"w-4 h-4 animate-spin"}):e(ua,{className:"w-4 h-4"}),"Seed all to DB"]}),C&&e("span",{className:"text-xs text-gray-400 dark:text-zinc-500",children:"Loading from DBâ¦"}),c&&e("span",{className:"text-xs text-gray-400 dark:text-zinc-500",children:"Source: database"}),!c&&!C&&e("span",{className:"text-xs text-gray-400 dark:text-zinc-500",children:"Source: hardcoded (not in DB yet)"})]}),e("div",{className:"mb-4 -mt-1",children:e(di,{markdown:N,slug:o,lang:n})}),e(Ce,{content:N})]})};export{Li as default};
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.