stitch-mcp

Stitch MCP — How to use it

This plugin exposes Google Stitch's screen-generation tools through MCP. Use it when the user wants to design a UI, generate mockups, or iterate on screens.

Available tools

When the stitch MCP server is running, these tools appear (prefixed mcp__stitch__):

• create_project — Create a new Stitch project. Use before generating screens if the user has no existing project.
• generate_screen_from_text — Generate a high-fidelity HTML screen from a text prompt. Returns HTML + screenshot URL.
• edit_screens — Apply a natural-language edit to an existing screen ("make it dark mode", "add a sidebar", etc.).
• get_screen — Retrieve an existing screen by ID.
• Additional tools for listing projects, generating variants, and downloading artifacts.

Check /mcp in Claude Code to see the live tool list.

Workflow

1. Before generating, ask the user for:

   • Project name (if new) or project ID (if continuing work)
   • Target platform: web / mobile
   • Rough style direction if not obvious from prompt

2. Enhance vague prompts before calling generate_screen_from_text. Thin prompts produce generic screens. A good prompt specifies: layout type, key components, tone/mood, color direction, typography feel.

3. After generating, present the screenshot URL to the user. Offer to:

   • Iterate with edit_screens
   • Generate variants
   • Export to React components (if they want code)

Design-system consistency

If the project already has screens, read the existing style first (colors, type scale, spacing, component patterns) before generating a new one. Keep the new screen visually cohesive with what exists.

Troubleshooting

• "STITCH_API_KEY is not set" → User needs to copy .env.example to .env in the plugin folder and paste their key from https://stitch.withgoogle.com/.
• Tool calls fail with auth error → Key may be invalid or expired. Ask user to regenerate.
• No tools visible → Plugin may not be loaded. User should run /plugin to check status.