Google Stitch MCP — AI Design via Model Context Protocol

What it is

Google Stitch MCP is a Model Context Protocol server that connects AI coding agents (Claude Code, Cursor, Gemini CLI, VS Code) to Google Stitch, Google's AI-driven UI design platform. Through MCP, agents can create projects, generate screens from text descriptions, edit existing designs, apply design systems, and export assets -- all programmatically.

This integration is for developers and designers who want AI agents to handle UI design tasks directly within their coding workflow.

The project is actively maintained with regular releases and a growing user community. Documentation covers common use cases, and the open-source nature means you can inspect the source code, contribute fixes, and adapt the tool to your specific requirements.

How it saves time or tokens

Design handoff between designers and developers is a major bottleneck. With Stitch MCP, a developer can describe a screen in natural language, and the AI agent generates a complete UI design without switching to Figma or Sketch. Design changes happen in the same terminal session as code changes, keeping the workflow continuous.

How to use

1. Add the Stitch MCP server to your AI agent's MCP configuration.
2. Authenticate with your Google API key or OAuth credentials.
3. Use natural language to create and edit designs through your agent.

Example

{
  "mcpServers": {
    "stitch": {
      "url": "https://stitch.googleapis.com/mcp",
      "headers": {
        "x-goog-api-key": "YOUR_API_KEY"
      }
    }
  }
}

# In Claude Code or Cursor
# 'Create a mobile login screen with email, password, and a Google sign-in button'
# 'Update the dashboard screen to add a revenue chart in the top-right corner'
# 'Apply the Material Design 3 design system to all screens'

Related on TokRepo

• AI Tools for Design -- AI design tools and UI generators
• AI Tools for Coding -- Developer tools with MCP integration

Common pitfalls

• The MCP endpoint requires a valid Google API key with Stitch API access enabled. Missing or invalid credentials produce authentication errors without clear messages.
• Generated designs are starting points, not pixel-perfect production screens. Review and refine the output before handing off to development.
• Design system changes applied via MCP affect all screens in the project. Test design system updates on a single screen first before applying globally.

Before adopting this tool, evaluate whether it fits your team's existing workflow. Read the official documentation thoroughly, and start with a small proof-of-concept rather than a full migration. Community forums, GitHub issues, and Stack Overflow are valuable resources when you encounter edge cases not covered in the documentation.