Add Stitch Design server example

examples/stitch-server/.gitignore

@@ -0,0 +1,3 @@
+node_modules/
+dist/
+*.tsbuildinfo

examples/stitch-server/README.md

@@ -0,0 +1,51 @@
+# Example: Stitch Design Server
+
+An MCP App server that integrates with [Google Stitch](https://stitch.google.com) 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:
+  ```bash
+  gcloud auth application-default login
+  ```
+- Set `GOOGLE_CLOUD_PROJECT` environment variable to your GCP project ID
+
+## MCP Client Configuration
+
+```json
+{
+  "mcpServers": {
+    "stitch-design": {
+      "command": "npx",
+      "args": ["-y", "@modelcontextprotocol/server-stitch", "--stdio"]
+    }
+  }
+}
+```
+
+## Local Development
+
+```bash
+npm install
+npm run build
+npm start          # HTTP mode on port 3001
+npm start -- --stdio  # stdio mode
+```
+
+## Running Tests
+
+```bash
+bun test server.test.ts
+```

examples/stitch-server/main.ts

@@ -0,0 +1,89 @@
+/**
+ * Entry point for running the Stitch Design MCP server.
+ * Run with: npx @modelcontextprotocol/server-stitch
+ * Or: node dist/index.js [--stdio]
+ */
+
+import { createMcpExpressApp } from "@modelcontextprotocol/sdk/server/express.js";
+import type { McpServer } from "@modelcontextprotocol/sdk/server/mcp.js";
+import { StdioServerTransport } from "@modelcontextprotocol/sdk/server/stdio.js";
+import { StreamableHTTPServerTransport } from "@modelcontextprotocol/sdk/server/streamableHttp.js";
+import cors from "cors";
+import type { Request, Response } from "express";
+import { createServer } from "./server.js";
+
+/**
+ * Starts an MCP server with Streamable HTTP transport in stateless mode.
+ */
+export async function startStreamableHTTPServer(
+  createServer: () => McpServer,
+): Promise<void> {
+  const port = parseInt(process.env.PORT ?? "3001", 10);
+
+  const app = createMcpExpressApp({ host: "0.0.0.0" });
+  app.use(cors());
+
+  app.all("/mcp", async (req: Request, res: Response) => {
+    const server = createServer();
+    const transport = new StreamableHTTPServerTransport({
+      sessionIdGenerator: undefined,
+    });
+
+    res.on("close", () => {
+      transport.close().catch(() => {});
+      server.close().catch(() => {});
+    });
+
+    try {
+      await server.connect(transport);
+      await transport.handleRequest(req, res, req.body);
+    } catch (error) {
+      console.error("MCP error:", error);
+      if (!res.headersSent) {
+        res.status(500).json({
+          jsonrpc: "2.0",
+          error: { code: -32603, message: "Internal server error" },
+          id: null,
+        });
+      }
+    }
+  });
+
+  const httpServer = app.listen(port, (err) => {
+    if (err) {
+      console.error("Failed to start server:", err);
+      process.exit(1);
+    }
+    console.log(`MCP server listening on http://localhost:${port}/mcp`);
+  });
+
+  const shutdown = () => {
+    console.log("\nShutting down...");
+    httpServer.close(() => process.exit(0));
+  };
+
+  process.on("SIGINT", shutdown);
+  process.on("SIGTERM", shutdown);
+}
+
+/**
+ * Starts an MCP server with stdio transport.
+ */
+export async function startStdioServer(
+  createServer: () => McpServer,
+): Promise<void> {
+  await createServer().connect(new StdioServerTransport());
+}
+
+async function main() {
+  if (process.argv.includes("--stdio")) {
+    await startStdioServer(createServer);
+  } else {
+    await startStreamableHTTPServer(createServer);
+  }
+}
+
+main().catch((e) => {
+  console.error(e);
+  process.exit(1);
+});

examples/stitch-server/mcp-app.html

@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Stitch Design</title>
+    <link rel="stylesheet" href="./src/global.css" />
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="./src/App.tsx"></script>
+  </body>
+</html>

examples/stitch-server/package.json

@@ -0,0 +1,57 @@
+{
+  "name": "@modelcontextprotocol/server-stitch",
+  "version": "1.0.1",
+  "type": "module",
+  "description": "MCP App for Google Stitch — AI-powered UI design generation and management with interactive previews",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/modelcontextprotocol/ext-apps",
+    "directory": "examples/stitch-server"
+  },
+  "license": "MIT",
+  "main": "dist/server.js",
+  "types": "dist/server.d.ts",
+  "bin": {
+    "mcp-server-stitch": "dist/index.js"
+  },
+  "files": [
+    "dist"
+  ],
+  "exports": {
+    ".": {
+      "types": "./dist/server.d.ts",
+      "default": "./dist/server.js"
+    }
+  },
+  "scripts": {
+    "build": "tsc --noEmit && cross-env INPUT=mcp-app.html vite build && tsc -p tsconfig.server.json && bun build server.ts --outdir dist --target node && bun build main.ts --outfile dist/index.js --target node --external \"./server.js\" --banner \"#!/usr/bin/env node\"",
+    "watch": "cross-env INPUT=mcp-app.html vite build --watch",
+    "serve": "bun --watch main.ts",
+    "start": "cross-env NODE_ENV=development npm run build && npm run serve",
+    "dev": "cross-env NODE_ENV=development concurrently 'npm run watch' 'npm run serve'",
+    "prepublishOnly": "npm run build"
+  },
+  "dependencies": {
+    "@modelcontextprotocol/ext-apps": "^1.0.0",
+    "@modelcontextprotocol/sdk": "^1.24.0",
+    "cors": "^2.8.5",
+    "express": "^5.1.0",
+    "google-auth-library": "^9.0.0",
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0",
+    "zod": "^4.1.13"
+  },
+  "devDependencies": {
+    "@types/cors": "^2.8.19",
+    "@types/express": "^5.0.0",
+    "@types/node": "22.10.0",
+    "@types/react": "^19.2.2",
+    "@types/react-dom": "^19.2.2",
+    "@vitejs/plugin-react": "^4.3.4",
+    "concurrently": "^9.2.1",
+    "cross-env": "^10.1.0",
+    "typescript": "^5.9.3",
+    "vite": "^6.0.0",
+    "vite-plugin-singlefile": "^2.3.0"
+  }
+}