# Authenticate with Google Cloud
gcloud auth application-default login

# Clone the repo
git clone https://github.com/jayeshvpatil/stitch-mcp-app.git
cd stitch-mcp-app

# Install dependencies
npm install

# Build
npm run build

{
  "mcpServers": {
    "stitch-design": {
      "command": "node",
      "args": ["/path/to/stitch-mcp-app/dist/main.js"],
      "env": {
        "GOOGLE_CLOUD_PROJECT": "your-gcp-project-id"
      }
    }
  }
}

"Show me my Stitch design projects"
"List screens in the Sentiment Dashboard project"
"View the Data Explorer screen design"
"Generate a mobile login screen with dark theme"
"Extract design tokens from this screen"

stitch-mcp-app/
├── server.ts          # MCP server: 5 tools + 1 shared UI resource
├── main.ts            # stdio transport entry point
├── stitch-client.ts   # Stitch REST API client (google-auth-library)
├── mcp-app.html       # HTML entry for React UI
├── vite.config.ts     # Vite + vite-plugin-singlefile
└── src/
    ├── StitchApp.tsx   # Main component: useApp() hook + view routing
    ├── types.ts        # TypeScript interfaces matching Stitch API
    ├── global.css      # Dark mode responsive styles
    └── components/
        ├── ProjectList.tsx    # Project card grid
        ├── ScreenList.tsx     # Screen thumbnail grid
        ├── DesignViewer.tsx   # Split panel (image + code/tokens)
        ├── GenerateDesign.tsx # AI generation + suggestions
        └── DesignContext.tsx  # Design token display

# Watch mode (rebuilds on changes)
npm run dev

# Build UI only
npm run build:ui

# Build server only
npm run build:server

# Full build
npm run build