assets-pipeline

Quand utiliser ce skill

• Ajouter une génération d'image, SVG, vidéo ou audio dans le produit
• Setup scroll 3D / WebGL sur landing ou app
• Aligner landing, marketing et UI sur une même charte visuelle
• Avant d'ajouter des variables d'environnement liées aux APIs d'assets

Règle absolue (voir rules/media-apis.md)

• Appels API assets = server-side uniquement (route API, worker, cron)
• Jamais NEXT_PUBLIC_* pour QUIVERAI_*, GOOGLE_API_KEY, ELEVENLABS_*
• Sortie → stockage objet (Supabase Storage / S3) + URL signée ou CDN
• Lier chaque asset généré à organizationId / userId en DB (multi-tenant)

---

Images IA — Gemini

// app/api/generate-image/route.ts (server-side uniquement)
import { GoogleGenerativeAI } from '@google/generative-ai'

const genAI = new GoogleGenerativeAI(process.env.GOOGLE_API_KEY!)

export async function POST(req: Request) {
  const { prompt } = await req.json()
  const model = genAI.getGenerativeModel({ model: 'gemini-2.0-flash-exp-image-generation' })

  const result = await model.generateContent(prompt)
  const imageData = result.response.candidates?.[0]?.content.parts
    .find(p => p.inlineData)?.inlineData

  // Uploader vers Supabase Storage
  const { data } = await supabase.storage
    .from('assets')
    .upload(`generated/${Date.now()}.png`, Buffer.from(imageData!.data, 'base64'), {
      contentType: 'image/png',
    })

  return NextResponse.json({ url: data?.path })
}

Docs : https://ai.google.dev/gemini-api/docs/image-generation

---

SVG — Quiver AI

// app/api/generate-svg/route.ts
const res = await fetch('https://api.quiver.ai/v1/svg', {
  method: 'POST',
  headers: { Authorization: `Bearer ${process.env.QUIVERAI_API_KEY}` },
  body: JSON.stringify({ prompt, style: 'minimal', format: 'svg' }),
})
const { svg } = await res.json()
// Stocker en DB ou Supabase Storage

Docs : https://docs.quiver.ai/api-reference/introduction

---

Vidéo — Remotion

pnpm create video@latest