Edit an existing screen with natural language instructions. The API supports multiple strategies for applying changes efficiently.
Endpoint
Request Body
Natural language description of the changes to make.
The current HTML content of the screen to edit.
Identifier for the screen being edited.
Sandbox ID where the screen file should be updated.
Page slug of the file to update in the sandbox.
model
string
default:"google/gemini-2.0-flash"
AI model to use. Options:
google/gemini-2.0-flashanthropic/claude-sonnet-4openai/gpt-4ogroq/llama-3.3-70b
Example Request
curl -X POST http://app.seemodo.ai/api/edit-screen \
-H "Content-Type: application/json" \
-d '{
"prompt": "Change the primary button color to blue and add a subtitle under the heading",
"currentHtml": "<div class=\"p-4\"><h1 class=\"text-2xl\">Welcome</h1><button class=\"bg-green-500 px-4 py-2\">Get Started</button></div>",
"sandboxId": "sandbox-abc123",
"pageSlug": "welcome"
}'
Response
Whether the edit was successful.
The modified HTML content.
Description of changes applied.
URL to view the updated page (if sandbox was provided).
Whether the preview should be refreshed.
Whether Seemodo AI was used for the edit.
Success Response
{
"success": true,
"html": "<div class=\"p-4\"><h1 class=\"text-2xl\">Welcome</h1><p class=\"text-gray-600 mt-1\">Start your journey with us</p><button class=\"bg-blue-500 px-4 py-2\">Get Started</button></div>",
"message": "Applied changes: Change the primary button color to blue and add a subtitle",
"changes": ["Changed button color to blue", "Added subtitle text"],
"sandboxUrl": "https://sandbox-abc123.modal.run/welcome",
"shouldReload": true,
"useSeemodAI": true
}
Edit Strategies
The API uses multiple strategies in order of preference:
Strategy 1: Seemodo AI (Preferred)
When a Modal sandbox is active, uses Seemodo AI to directly edit files:
- Reads the current file
- Applies minimal changes
- Writes back to sandbox
- HMR updates preview automatically
Strategy 2: Full Regeneration
Fallback when Seemodo AI isn’t available:
- AI generates complete modified HTML
- Preserves structure while applying changes
- Result is written to sandbox
Common Edit Examples
Styling
Content
Layout
Add Elements
{
"prompt": "Make the card have a subtle shadow and rounded corners",
"currentHtml": "<div class=\"border p-4\">Card content</div>"
}
{
"prompt": "Change the heading to 'Dashboard Overview' and update the description",
"currentHtml": "<h1>Hello</h1><p>Welcome to the app</p>"
}
{
"prompt": "Convert this to a 2-column grid layout",
"currentHtml": "<div><div>Item 1</div><div>Item 2</div></div>"
}
{
"prompt": "Add a search bar above the list",
"currentHtml": "<ul><li>Item 1</li><li>Item 2</li></ul>"
}
Integration Example
async function editScreen(prompt) {
// Get current screen content
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) {
// Refresh the preview iframe
previewFrame.src = result.sandboxUrl;
}
return result;
}
Best Practices
- Be specific - “Change button to blue” is better than “update colors”
- One change at a time - For predictable results, make focused edits
- Reference elements - “The submit button” is clearer than “the button”
- Use Tailwind terms - “Add shadow-lg” is precise
Notes
- HMR automatically updates the preview when files change
- The endpoint preserves existing functionality when making visual changes
- Seemodo AI provides the most reliable edits for complex changes
