Google Stitch UI
Google Stitch UI generation API for project creation and screen scaffolding.
Ask AI about Google Stitch UI
Powered by Claude Β· Grounded in docs
I know everything about Google Stitch UI. Ask me about installation, configuration, usage, or troubleshooting.
0/500
Reviews
Documentation
Stitch MCP Server
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.
Features
| 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 |
Quick Start
Prerequisites
- Node.js 18.0.0 or higher
- Stitch API Key β Get one here (sign in with Google)
Installation (30 seconds)
Run the interactive setup wizard:
npx stitch-mcp-server setup
This 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
Manual Configuration
If you prefer manual setup, add this to your MCP config file:
Claude Desktop β ~/Library/Application Support/Claude/claude_desktop_config.json
{
"mcpServers": {
"stitch": {
"command": "npx",
"args": ["-y", "stitch-mcp-server@latest"],
"env": {
"STITCH_API_KEY": "your-api-key-here"
}
}
}
}
Cursor β .cursor/mcp.json in your workspace
{
"mcpServers": {
"stitch": {
"command": "npx",
"args": ["-y", "stitch-mcp-server@latest"],
"env": {
"STITCH_API_KEY": "your-api-key-here"
}
}
}
}
Cline (VS Code) β MCP Settings in Cline extension
{
"mcpServers": {
"stitch": {
"command": "npx",
"args": ["-y", "stitch-mcp-server@latest"],
"env": {
"STITCH_API_KEY": "your-api-key-here"
}
}
}
}
Available Tools
Core Tools
| Tool | Description | Example Prompt |
|---|---|---|
create_project | Create a new Stitch project | "Create a project called 'My App'" |
list_projects | List all your projects | "Show my Stitch projects" |
generate_screen | Generate a UI from description | "Create a login page with email and password" |
edit_screen | Modify an existing screen | "Make the background dark and add a sidebar" |
generate_variants | Create design alternatives | "Show me 3 different color schemes" |
Advanced Tools
| Tool | Description | Use Case |
|---|---|---|
get_screen_code | Fetch HTML source code | Get the raw HTML for a generated screen |
get_screen_image | Get screenshot URL | Preview the generated design |
generate_and_fetch_code | Generate + fetch in one call | Streamlined workflow for quick prototyping |
scaffold_project_files | Save HTML to local files | Export directly to src/components/ |
Resources
stitch://projectsβ List all projects as contextstitch://projects/{id}/screensβ List screens in a project
Prompts
create_web_appβ Guided workflow to build a complete web app from idea to scaffolded files
Usage Examples
Generate a Landing Page
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 links
Create a Dashboard
Generate an admin dashboard with:
- Sidebar navigation
- Stats cards at the top
- Data table with pagination
- Dark mode theme
Edit an Existing Design
Take the login screen and:
- Add social login buttons (Google, GitHub)
- Make it mobile responsive
- Add a "Remember me" checkbox
Local Development
# 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 start
Running Tests
STITCH_API_KEY=your-key npm test
Tech Stack
- Runtime: Node.js 18+
- Language: TypeScript
- MCP SDK: @modelcontextprotocol/sdk
- Stitch SDK: @google/stitch-sdk
- Validation: Zod
- Build: tsup
- Testing: Vitest
Security
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
Contributing
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
License
MIT - 0x-Professor
Links
- npm: npmjs.com/package/stitch-mcp-server
- GitHub: github.com/0x-Professor/Stitch-mcp-server
- Issues: Report a bug
- Stitch SDK: github.com/AugmentedCode/stitch-sdk
- MCP Protocol: modelcontextprotocol.io
Built for the AI-assisted development community
