stitch-mcp-upload-screens-from-images

Stitch MCP — Upload Screens from Images

Uploads one or more images (screenshots, mockups, wireframes) into a Stitch project as new screens. This is the entry point for the "redesign existing UI" workflow — import what you have, then use edit_screens to iterate or convert directly to code.

Critical prerequisite

Only use this skill when the user explicitly mentions "Stitch".

You must have a projectId before calling this. If you don't have one:

• Create a new project via stitch-mcp-create-project
• Or find an existing project via stitch-mcp-list-projects

When to use

• User provides a screenshot and wants to redesign it in Stitch
• User wants to import existing mockups into Stitch for editing
• The orchestrator classifies intent as "Upload screenshot"
• User says "import this design", "upload this image", or "redesign this screen"

Step 1: Encode the image to base64

Use the helper script to convert a local image file to base64:

bash scripts/encode-image.sh "path/to/screenshot.png"

The script outputs raw base64 to stdout. Capture it for the API call.

Supported formats and their MIME types: | Extension | MIME type | |-----------|----------| | .png | image/png | | .jpg, .jpeg | image/jpeg | | .webp | image/webp | | .gif | image/gif |

Step 2: Call the MCP tool

{
  "name": "upload_screens_from_images",
  "arguments": {
    "projectId": "3780309359108792857",
    "images": [
      {
        "fileContentBase64": "[base64-encoded-image-data]",
        "mimeType": "image/png"
      }
    ]
  }
}

projectId — numeric ID only, no prefix

✅ "3780309359108792857"
❌ "projects/3780309359108792857"

images — array of image objects

Each image needs: | Field | Type | Description | |-------|------|-------------| | fileContentBase64 | string | Base64-encoded image data (no data: prefix) | | mimeType | string | MIME type matching the image format |

You can upload multiple images in a single call — each becomes a separate screen.

Output

Returns session info similar to generate_screen_from_text. The uploaded images appear as new screens in the project.

After uploading

1. Call stitch-mcp-list-screens to find the new screen IDs
2. Offer the user:
3. "Edit this screen (change colors, layout, content)?" → stitch-mcp-edit-screens
4. "Convert directly to code?" → stitch-mcp-get-screen → framework conversion
5. "Generate variants based on this design?" → stitch-mcp-generate-variants

References

• scripts/encode-image.sh — Base64 encoding helper