Skip to content

README.md

Latest commit

 

History

History
51 lines (40 loc) · 1.33 KB

README.md

File metadata and controls

51 lines (40 loc) · 1.33 KB

Example: Stitch Design Server

An MCP App server that integrates with Google Stitch for AI-powered UI design. Provides 6 tools for managing projects, browsing screens, generating new designs, and extracting design tokens — all rendered in an interactive React UI.

Tools

Tool Description
list-projects List all Stitch design projects
list-screens List screens within a project
design-viewer View a screen with image preview, code, and design tokens
generate-design Generate a new screen from a text prompt
extract-design-context Extract colors, fonts, spacing, and layout tokens
create-project Create a new Stitch project

Prerequisites

  • A Google Cloud project with the Stitch API enabled
  • Application Default Credentials (ADC) configured: 
    gcloud auth application-default login
  • Set GOOGLE_CLOUD_PROJECT environment variable to your GCP project ID

MCP Client Configuration

{
  "mcpServers": {
    "stitch-design": {
      "command": "npx",
      "args": ["-y", "@modelcontextprotocol/server-stitch", "--stdio"]
    }
  }
}

Local Development

npm install
npm run build
npm start          # HTTP mode on port 3001
npm start -- --stdio  # stdio mode

Running Tests

bun test server.test.ts