Zum Hauptinhalt springen
Generiere einen kompletten React-Screen mit KI. Der Endpunkt verwendet Seemodo AI um schöne, responsive UIs mit Tailwind CSS Styling zu erstellen.

​
Endpunkt

POST /api/generate-screen

​
Request Body

​
prompt
string
erforderlich
Natürlichsprachliche Beschreibung des zu generierenden Screens.
​
sandboxId
string
erforderlich
Die ID einer aktiven Sandbox wo Code geschrieben wird.
​
width
number
Standard:"375"
Screen-Breite in Pixeln.
​
height
number
Standard:"812"
Screen-Höhe in Pixeln.
​
screenType
string
Standard:"Mobile"
Screen-Typ: Mobile, Tablet, oder Desktop.
​
pageSlug
string
URL-Slug für die generierte Seite. Automatisch generiert wenn nicht angegeben.
​
pageType
string
Standard:"normal"
Seitentyp:
  • normal - Standard Single-Screen
  • landingpage - Conversion-fokussierte Landing Page mit mehreren Sections
  • funnel - Multi-Step Funnel-Seite
​
sectionCount
number
Standard:"10"
Anzahl Sections für Landing Pages und Funnels.
​
images
array
Array von base64-kodierten Referenzbildern zur Design-Leitung.
​
model
string
Standard:"anthropic/claude-sonnet-4.5"
KI-Modell für Generierung. Optionen inkludieren:
  • anthropic/claude-sonnet-4.5
  • google/gemini-2.0-flash
  • openai/gpt-4o

​
Beispiel-Anfrage

curl -X POST http://app.seemodo.ai/api/generate-screen \
  -H "Content-Type: application/json" \
  -d '{
    "prompt": "Ein modernes Dashboard mit Benutzer-Statistiken, Aktivitäts-Feed und Seitenleisten-Navigation",
    "sandboxId": "sandbox-abc123",
    "width": 1280,
    "height": 800,
    "screenType": "Desktop",
    "pageType": "normal",
    "model": "anthropic/claude-sonnet-4.5"
  }'

​
Antwort

​
success
boolean
Ob die Generierung erfolgreich war.
​
sandboxUrl
string
Vollständige URL zur Ansicht der generierten Seite in der Sandbox.
​
pageSlug
string
URL-Slug der generierten Seite.
​
agentResponse
string
Ausgabe des KI-Agenten die beschreibt was erstellt wurde.
​
prompt
string
Der ursprüngliche verarbeitete Prompt.
​
useSeemodAI
boolean
Zeigt an dass Seemodo AI für Generierung verwendet wurde.

​
Erfolgs-Antwort

{
  "success": true,
  "sandboxUrl": "https://sandbox-abc123.modal.run/dashboard",
  "pageSlug": "dashboard",
  "agentResponse": "Modernes Dashboard erstellt mit:\n- Benutzer-Stats-Karten oben\n- Aktivitäts-Feed in der Mitte\n- Seitenleisten-Navigation links\n\nModifizierte Dateien:\n- src/pages/dashboard.tsx (neu)\n- src/App.tsx (Routen aktualisiert)",
  "prompt": "Ein modernes Dashboard mit Benutzer-Statistiken...",
  "useSeemodAI": true
}

​
Fehler-Antwort

{
  "error": "Sandbox für Generierung erforderlich. Bitte warten bis Sandbox initialisiert.",
  "details": "Keine Sandbox verfügbar"
}

​
Wie es funktioniert

​
Landing Page Generierung

Wenn pageType auf landingpage gesetzt ist, generiert die KI eine hochkonvertierende Landing Page mit strukturierten Sections: 
curl -X POST http://app.seemodo.ai/api/generate-screen \
  -H "Content-Type: application/json" \
  -d '{
    "prompt": "Eine SaaS Landing Page für ein Projektmanagement-Tool",
    "sandboxId": "sandbox-abc123",
    "screenType": "Desktop",
    "pageType": "landingpage",
    "sectionCount": 8
  }'
Die generierte Seite wird beinhalten:
  • Hero-Section mit überzeugender Headline und CTA
  • Problem/Lösungs-Section
  • Features und Vorteile
  • Social Proof und Testimonials
  • Preis-Tabelle
  • FAQ-Section
  • Finaler Call-to-Action

​
Referenzbilder verwenden

Übergib base64-kodierte Bilder zur Design-Leitung: 
const imageBase64 = await convertImageToBase64(file);

const response = await fetch('/api/generate-screen', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({
    prompt: "Dieses Design mit modernem Styling nachbauen",
    sandboxId: "sandbox-abc123",
    images: [`data:image/png;base64,${imageBase64}`]
  })
});

​
Hinweise

  • Eine Sandbox muss vor Aufruf dieses Endpunkts initialisiert sein
  • Der Endpunkt schreibt Dateien direkt via Seemodo AI in die Sandbox
  • HMR (Hot Module Replacement) aktualisiert automatisch die Vorschau
  • Keine Build-Befehle ausführen - Vite handhabt alles automatisch