Bearbeite einen bestehenden Screen mit natürlichsprachlichen Anweisungen. Die API unterstützt mehrere Strategien für effiziente Änderungsanwendung.
Endpunkt
Request Body
Natürlichsprachliche Beschreibung der vorzunehmenden Änderungen.
Der aktuelle HTML-Inhalt des zu bearbeitenden Screens.
Identifikator für den bearbeiteten Screen.
Sandbox-ID wo die Screen-Datei aktualisiert werden soll.
Seiten-Slug der zu aktualisierenden Datei in der Sandbox.
model
string
Standard:"google/gemini-2.0-flash"
KI-Modell zur Verwendung. Optionen:
google/gemini-2.0-flashanthropic/claude-sonnet-4openai/gpt-4ogroq/llama-3.3-70b
Beispiel-Anfrage
curl -X POST http://app.seemodo.ai/api/edit-screen \
-H "Content-Type: application/json" \
-d '{
"prompt": "Ändere die Primär-Button-Farbe zu blau und füge einen Untertitel unter der Überschrift hinzu",
"currentHtml": "<div class=\"p-4\"><h1 class=\"text-2xl\">Willkommen</h1><button class=\"bg-green-500 px-4 py-2\">Los geht'\''s</button></div>",
"sandboxId": "sandbox-abc123",
"pageSlug": "welcome"
}'
Antwort
Ob die Bearbeitung erfolgreich war.
Der modifizierte HTML-Inhalt.
Beschreibung der angewandten Änderungen.
Liste der vorgenommenen Änderungen.
URL zur Ansicht der aktualisierten Seite (wenn Sandbox angegeben).
Ob die Vorschau aktualisiert werden sollte.
Ob Seemodo AI für die Bearbeitung verwendet wurde.
Erfolgs-Antwort
{
"success": true,
"html": "<div class=\"p-4\"><h1 class=\"text-2xl\">Willkommen</h1><p class=\"text-gray-600 mt-1\">Starte deine Reise mit uns</p><button class=\"bg-blue-500 px-4 py-2\">Los geht's</button></div>",
"message": "Änderungen angewandt: Button-Farbe zu blau geändert und Untertitel hinzugefügt",
"changes": ["Button-Farbe zu blau geändert", "Untertitel-Text hinzugefügt"],
"sandboxUrl": "https://sandbox-abc123.modal.run/welcome",
"shouldReload": true,
"useSeemodAI": true
}
Bearbeitungs-Strategien
Die API verwendet mehrere Strategien in Prioritätsreihenfolge:
Strategie 1: Seemodo AI (Bevorzugt)
Wenn eine Modal-Sandbox aktiv ist, wird Seemodo AI für direkte Dateibearbeitung verwendet:
- Liest die aktuelle Datei
- Wendet minimale Änderungen an
- Schreibt zurück in Sandbox
- HMR aktualisiert Vorschau automatisch
Strategie 2: Vollständige Regenerierung
Fallback wenn Seemodo AI nicht verfügbar:
- KI generiert vollständiges modifiziertes HTML
- Erhält Struktur während Änderungen angewandt werden
- Ergebnis wird in Sandbox geschrieben
Häufige Bearbeitungs-Beispiele
Styling
Inhalt
Layout
Elemente hinzufügen
{
"prompt": "Gib der Karte einen subtilen Schatten und abgerundete Ecken",
"currentHtml": "<div class=\"border p-4\">Karteninhalt</div>"
}
{
"prompt": "Ändere die Überschrift zu 'Dashboard-Übersicht' und aktualisiere die Beschreibung",
"currentHtml": "<h1>Hallo</h1><p>Willkommen in der App</p>"
}
{
"prompt": "Konvertiere dies zu einem 2-Spalten-Grid-Layout",
"currentHtml": "<div><div>Element 1</div><div>Element 2</div></div>"
}
{
"prompt": "Füge eine Suchleiste über der Liste hinzu",
"currentHtml": "<ul><li>Element 1</li><li>Element 2</li></ul>"
}
Integrations-Beispiel
async function editScreen(prompt) {
// Aktuellen Screen-Inhalt abrufen
const currentHtml = document.getElementById('screen-container').innerHTML;
const response = await fetch('/api/edit-screen', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({
prompt,
currentHtml,
sandboxId: activeSandbox.id,
pageSlug: currentPage.slug,
model: 'anthropic/claude-sonnet-4'
})
});
const result = await response.json();
if (result.success && result.shouldReload) {
// Vorschau-iframe aktualisieren
previewFrame.src = result.sandboxUrl;
}
return result;
}
Best Practices
- Sei spezifisch - “Ändere Button zu blau” ist besser als “Farben aktualisieren”
- Eine Änderung zur Zeit - Für vorhersagbare Ergebnisse fokussierte Bearbeitungen machen
- Referenziere Elemente - “Der Submit-Button” ist klarer als “der Button”
- Nutze Tailwind-Begriffe - “Füge shadow-lg hinzu” ist präzise
Hinweise
- HMR aktualisiert automatisch die Vorschau wenn Dateien sich ändern
- Der Endpunkt erhält bestehende Funktionalität bei visuellen Änderungen
- Seemodo AI bietet die zuverlässigsten Bearbeitungen für komplexe Änderungen
