Skip to main content
Generate a complete React screen with AI. The endpoint uses Seemodo AI to create beautiful, responsive UIs with Tailwind CSS styling.

​
Endpoint

POST /api/generate-screen

​
Request Body

​
prompt
string
required
Natural language description of the screen to generate.
​
sandboxId
string
required
The ID of an active sandbox where code will be written.
​
width
number
default:"375"
Screen width in pixels.
​
height
number
default:"812"
Screen height in pixels.
​
screenType
string
default:"Mobile"
Type of screen: Mobile, Tablet, or Desktop.
​
pageSlug
string
URL slug for the generated page. Auto-generated if not provided.
​
pageType
string
default:"normal"
Type of page to generate:
  • normal - Standard single screen
  • landingpage - Conversion-focused landing page with multiple sections
  • funnel - Multi-step funnel page
​
sectionCount
number
default:"10"
Number of sections for landing pages and funnels.
​
images
array
Array of base64-encoded reference images to guide the design.
​
model
string
default:"anthropic/claude-sonnet-4.5"
AI model to use for generation. Options include:
  • anthropic/claude-sonnet-4.5
  • google/gemini-2.0-flash
  • openai/gpt-4o

​
Example Request

curl -X POST http://app.seemodo.ai/api/generate-screen \
  -H "Content-Type: application/json" \
  -d '{
    "prompt": "A modern dashboard with user stats, recent activity feed, and a sidebar navigation",
    "sandboxId": "sandbox-abc123",
    "width": 1280,
    "height": 800,
    "screenType": "Desktop",
    "pageType": "normal",
    "model": "anthropic/claude-sonnet-4.5"
  }'

​
Response

​
success
boolean
Whether the generation succeeded.
​
sandboxUrl
string
Full URL to view the generated page in the sandbox.
​
pageSlug
string
The URL slug of the generated page.
​
agentResponse
string
Output from the AI agent describing what was created.
​
prompt
string
The original prompt that was processed.
​
useSeemodAI
boolean
Indicates Seemodo AI was used for generation.

​
Success Response

{
  "success": true,
  "sandboxUrl": "https://sandbox-abc123.modal.run/dashboard",
  "pageSlug": "dashboard",
  "agentResponse": "Created a modern dashboard with:\n- User stats cards at the top\n- Activity feed in the center\n- Sidebar navigation on the left\n\nFiles modified:\n- src/pages/dashboard.tsx (new)\n- src/App.tsx (updated routes)",
  "prompt": "A modern dashboard with user stats...",
  "useSeemodAI": true
}

​
Error Response

{
  "error": "Sandbox is required for generation. Please wait for sandbox to initialize.",
  "details": "No sandbox available"
}

​
How It Works

​
Landing Page Generation

When pageType is set to landingpage, the AI generates a high-converting landing page with structured sections: 
curl -X POST http://app.seemodo.ai/api/generate-screen \
  -H "Content-Type: application/json" \
  -d '{
    "prompt": "A SaaS landing page for a project management tool",
    "sandboxId": "sandbox-abc123",
    "screenType": "Desktop",
    "pageType": "landingpage",
    "sectionCount": 8
  }'
The generated page will include:
  • Hero section with compelling headline and CTA
  • Problem/Solution section
  • Features and benefits
  • Social proof and testimonials
  • Pricing table
  • FAQ section
  • Final call-to-action

​
Using Reference Images

Pass base64-encoded images to guide the design: 
const imageBase64 = await convertImageToBase64(file);

const response = await fetch('/api/generate-screen', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({
    prompt: "Recreate this design with modern styling",
    sandboxId: "sandbox-abc123",
    images: [`data:image/png;base64,${imageBase64}`]
  })
});

​
Notes

  • A sandbox must be initialized before calling this endpoint
  • The endpoint writes files directly to the sandbox via Seemodo AI
  • HMR (Hot Module Replacement) automatically updates the preview
  • Do not run build commands - Vite handles everything automatically