Provides tools to generate, edit, and scaffold HTML screens using Google Stitch AI UI generation API. Allows creation of projects, generation of screens from natural language prompts, editing existing screens, generating variants, and saving generated UI to local files.
Click on "Deploy Server".
Wait a few minutes for the server to deploy. Once ready, it will show a "Started" state.
In the chat, type @ followed by the MCP server name and your instructions, e.g., "@Stitch MCP Server Create a login page with email and password"
That's it! The server will respond to your query, and you can continue using it as needed.
Here is a step-by-step guide with screenshots.
Enterprise-ready Model Context Protocol (MCP) server for Google Stitch SDK — Generate beautiful web UIs from text prompts using AI.
The Stitch MCP Server bridges your AI coding assistant (Claude, Cursor, Cline, Copilot, etc.) with Google's Stitch UI Generation API. Design, generate, and scaffold production-ready HTML components directly into your workspace using natural language.
Feature | Description |
AI UI Generation | Generate complete HTML screens from text descriptions |
Edit and Iterate | Modify existing screens with natural language prompts |
Design Variants | Generate multiple design variations to explore options |
Auto-Scaffold | Save generated UI directly to your project files |
Multi-Client Support | Works with Claude Desktop, Cursor, Cline (VS Code), and any MCP client |
One-Click Setup | Interactive installer configures everything automatically |
Related MCP server: stitch-bridge
Node.js 18.0.0 or higher
Stitch API Key — Get one here (sign in with Google)
Run the interactive setup wizard:
npx stitch-mcp-server setupThis will:
Ask which AI tools you want to configure (Claude, Cursor, Cline)
Prompt for your Stitch API key
Automatically update your MCP configuration files
Done - restart your AI tool and start generating UIs
If you prefer manual setup, add this to your MCP config file:
{
"mcpServers": {
"stitch": {
"command": "npx",
"args": ["-y", "stitch-mcp-server@latest"],
"env": {
"STITCH_API_KEY": "your-api-key-here"
}
}
}
}{
"mcpServers": {
"stitch": {
"command": "npx",
"args": ["-y", "stitch-mcp-server@latest"],
"env": {
"STITCH_API_KEY": "your-api-key-here"
}
}
}
}{
"mcpServers": {
"stitch": {
"command": "npx",
"args": ["-y", "stitch-mcp-server@latest"],
"env": {
"STITCH_API_KEY": "your-api-key-here"
}
}
}
}Tool | Description | Example Prompt |
| Create a new Stitch project | "Create a project called 'My App'" |
| List all your projects | "Show my Stitch projects" |
| Generate a UI from description | "Create a login page with email and password" |
| Modify an existing screen | "Make the background dark and add a sidebar" |
| Create design alternatives | "Show me 3 different color schemes" |
Tool | Description | Use Case |
| Fetch HTML source code | Get the raw HTML for a generated screen |
| Get screenshot URL | Preview the generated design |
| Generate + fetch in one call | Streamlined workflow for quick prototyping |
| Save HTML to local files | Export directly to |
stitch://projects — List all projects as context
stitch://projects/{id}/screens — List screens in a project
create_web_app — Guided workflow to build a complete web app from idea to scaffolded files
Create a modern landing page for a SaaS product with:
- Hero section with headline and CTA button
- Features grid with 3 columns
- Testimonials carousel
- Footer with linksGenerate an admin dashboard with:
- Sidebar navigation
- Stats cards at the top
- Data table with pagination
- Dark mode themeTake the login screen and:
- Add social login buttons (Google, GitHub)
- Make it mobile responsive
- Add a "Remember me" checkbox# Clone the repo
git clone https://github.com/0x-Professor/Stitch-mcp-server.git
cd Stitch-mcp-server
# Install dependencies
npm install
# Build
npm run build
# Run locally
STITCH_API_KEY=your-key npm startSTITCH_API_KEY=your-key npm testRuntime: Node.js 18+
Language: TypeScript
MCP SDK: @modelcontextprotocol/sdk
Stitch SDK: @google/stitch-sdk
Validation: Zod
Build: tsup
Testing: Vitest
This server implements several security measures:
Path Traversal Protection — Prevents writing files outside your workspace
Input Validation — All inputs validated with Zod schemas
Secure Config Storage — API keys stored with restricted file permissions (0600)
HTTP Response Validation — Proper error handling for all network requests
Contributions are welcome! Please see CONTRIBUTING.md for guidelines.
Fork the repository
Create your feature branch (git checkout -b feature/amazing-feature)
Commit your changes (git commit -m 'Add amazing feature')
Push to the branch (git push origin feature/amazing-feature)
Open a Pull Request
MIT - 0x-Professor
Issues: Report a bug
Stitch SDK: github.com/AugmentedCode/stitch-sdk
MCP Protocol: modelcontextprotocol.io
Create a new Stitch project
Inputs: title (required).
Edit an existing screen using a text prompt
Inputs: prompt (required), screenId (required), projectId (required), modelId, +1 more.
One-step tool to generate a UI screen and immediately retrieve its HTML code
Inputs: prompt (required), projectId (required), deviceType.
Generate a UI screen from a text prompt within a project
Inputs: prompt (required), projectId (required), deviceType.
Generate design variants of an existing screen
Inputs: prompt (required), screenId (required), projectId (required), aspects, +2 more.
Retrieve the HTML code download URL (and extract full HTML if possible) for a generated screen
Inputs: screenId (required), projectId (required).
Retrieve the base64 screenshot image download URL for a generated screen.
Inputs: screenId (required), projectId (required).
List all available Stitch projects
Inputs: no named parameters.
Maps a specific screen from a project to a local file path. Use this to save UI designs directly into the user's workspace.
Inputs: filePath (required), screenId (required), projectId (required).
Recent tool additions, removals, and schema changes observed during successful MCP inspections.
Loading tool schema changelog…
Scored across 9 tools
Most tools have distinct purposes (list vs create, generate vs edit vs variants, code vs image retrieval). However, `generate_and_fetch_code` overlaps with the combination of `generate_screen` and `get_screen_code`, creating minor ambiguity about which to use for a one-step workflow.
All tool names consistently follow a snake_case verb_noun pattern. Verbs are clear and specific (list, create, generate, edit, get, scaffold). Even the compound `generate_and_fetch_code` follows the same style, making the naming predictable.
Nine tools is well-scoped for the Stitch UI generation domain. Each tool covers a distinct step in the workflow without unnecessary redundancy, and the count feels appropriate for the server's purpose.
Core lifecycle is covered: project creation, screen generation/editing/variants, and retrieval of code and images. However, there is no explicit way to list or delete screens, and no project update/delete endpoints, which are minor gaps for a complete surface.
Run accessibility, contrast, and design token audits and file QA issues from your AI coding tool.
Serves your design system and coding standards to coding agents, so they stop guessing.
Create, change and install StellaFrame website widgets from an AI agent. OAuth sign-in, no API key.
Find UI components and themes, retrieve code, and generate with hosted 21st AI when enabled.
