MCP Google Stitch Server

MCP (Model Context Protocol) server untuk Google Stitch - AI-powered UI design generation tool.

📋 Features

• create_project - Membuat project baru di Google Stitch
• list_projects - Menampilkan daftar semua project
• get_project - Mendapatkan detail project tertentu
• list_screens - Menampilkan semua screen dalam project
• get_screen - Mendapatkan detail screen tertentu
• generate_screen_from_text - Generate UI design dari text prompt menggunakan AI

🚀 Installation

npm install
npm run build

⚙️ Configuration

Environment Variables

Pilih salah satu metode autentikasi:

Option 1: API Key (Recommended)

export STITCH_API_KEY="your-api-key-here"

Dapatkan API Key dari: https://stitch.withgoogle.com/settings

Option 2: OAuth (Untuk Zero-Trust environments)

export STITCH_ACCESS_TOKEN="your-access-token"
export GOOGLE_CLOUD_PROJECT="your-project-id"

Generate access token:

gcloud auth application-default print-access-token

🔧 MCP Client Configuration

Cursor

Buat file .cursor/mcp.json:

{
  "mcpServers": {
    "google-stitch": {
      "command": "node",
      "args": ["/path/to/mcp-google-stitch/dist/index.js"],
      "env": {
        "STITCH_API_KEY": "your-api-key"
      }
    }
  }
}

VSCode

Open Command Palette (Cmd+Shift+P) → "MCP: Add Server" → Select "Command" → Enter:

node /path/to/mcp-google-stitch/dist/index.js

Set environment variables di settings:

{
  "mcp.servers": {
    "google-stitch": {
      "command": "node",
      "args": ["/path/to/mcp-google-stitch/dist/index.js"],
      "env": {
        "STITCH_API_KEY": "your-api-key"
      }
    }
  }
}

Claude Code

claude mcp add google-stitch \
  --command "node /path/to/mcp-google-stitch/dist/index.js" \
  -s user

Claude Desktop

Edit claude_desktop_config.json:

{
  "mcpServers": {
    "google-stitch": {
      "command": "node",
      "args": ["/path/to/mcp-google-stitch/dist/index.js"],
      "env": {
        "STITCH_API_KEY": "your-api-key"
      }
    }
  }
}

📝 Usage Examples

Create Project

Create a new Stitch project called "My Mobile App"

List Projects

Show all my Stitch projects

Generate Design

Generate a login screen for project "proj_123" with prompt: "Modern login screen with email and password fields, blue gradient background"

List Screens

List all screens in project "proj_123"

🔗 Links

• Google Stitch
• Stitch Documentation
• MCP Documentation

📄 License

MIT