stitch-mcp-server 1.0.0

package/.github/ISSUE_TEMPLATE/bug_report.md

@@ -0,0 +1,31 @@
+---
+name: Bug report
+about: Create a report to help us improve the MCP server
+title: '[BUG] '
+labels: bug
+assignees: ''
+---
+
+**Describe the bug**
+A clear and concise description of what the bug is.
+
+**To Reproduce**
+Steps to reproduce the behavior:
+1. Call tool '...'
+2. With arguments '...'
+3. See error
+
+**Expected behavior**
+A clear and concise description of what you expected to happen.
+
+**Screenshots**
+If applicable, add screenshots to help explain your problem.
+
+**Environment (please complete the following information):**
+ - OS: [e.g. iOS, Windows]
+ - Node Version: [e.g. 20.x]
+ - MCP Client: [e.g. Claude Code, VS Code, Cursor]
+ - Version [e.g. 1.0.0]
+
+**Additional context**
+Add any other context about the problem here (e.g., error logs).

package/.github/ISSUE_TEMPLATE/feature_request.md

@@ -0,0 +1,19 @@
+---
+name: Feature request
+about: Suggest an idea for this project
+title: '[FEAT] '
+labels: enhancement
+assignees: ''
+---
+
+**Is your feature request related to a problem? Please describe.**
+A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]
+
+**Describe the solution you'd like**
+A clear and concise description of what you want to happen (e.g., a new MCP tool, a new resource).
+
+**Describe alternatives you've considered**
+A clear and concise description of any alternative solutions or features you've considered.
+
+**Additional context**
+Add any other context or screenshots about the feature request here.

package/.github/workflows/ci.yml

@@ -0,0 +1,34 @@
+name: CI
+
+on:
+  push:
+    branches: [ "main" ]
+  pull_request:
+    branches: [ "main" ]
+
+jobs:
+  build-and-test:
+    runs-on: ubuntu-latest
+    strategy:
+      matrix:
+        node-version: [20.x, 22.x]
+
+    steps:
+    - uses: actions/checkout@v4
+    
+    - name: Use Node.js ${{ matrix.node-version }}
+      uses: actions/setup-node@v4
+      with:
+        node-version: ${{ matrix.node-version }}
+        cache: 'npm'
+        
+    - name: Install dependencies
+      run: npm ci
+      
+    - name: Build project
+      run: npm run build
+      
+    - name: Run Tests
+      env:
+        STITCH_API_KEY: ${{ secrets.STITCH_API_KEY }}
+      run: npm run test

package/.github/workflows/release.yml

@@ -0,0 +1,44 @@
+name: Release and Publish
+
+on:
+  push:
+    tags:
+      - 'v*.*.*'
+
+jobs:
+  build-and-publish:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout Code
+        uses: actions/checkout@v4
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: '20'
+          registry-url: 'https://registry.npmjs.org/'
+
+      - name: Install dependencies
+        run: npm ci
+
+      - name: Build
+        run: npm run build
+        
+      # You can uncomment this step once you have an NPM_TOKEN set in your GitHub secrets
+      # - name: Publish to NPM
+      #   run: npm publish --access public
+      #   env:
+      #     NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
+
+  create-github-release:
+    needs: build-and-publish
+    runs-on: ubuntu-latest
+    permissions:
+      contents: write
+    steps:
+      - uses: actions/checkout@v4
+      
+      - name: Create Release
+        uses: softprops/action-gh-release@v2
+        with:
+          generate_release_notes: true

package/CONTRIBUTING.md

@@ -0,0 +1,34 @@
+# Contributing to Stitch MCP Server
+
+First off, thank you for considering contributing to the Stitch MCP Server! It's people like you that make the open source community such a great place to learn, inspire, and create.
+
+## How to Contribute
+
+1. **Fork the Repository**: Start by forking the repository to your GitHub account.
+2. **Clone the File**: Clone your fork locally (`git clone https://github.com/0x-Professor/Stitch-mcp-server.git`).
+3. **Install Dependencies**: Run `npm install` to install necessary Node modules.
+4. **Branch Out**: Create a new branch for your feature or bug fix (`git checkout -b feature/your-feature-name`).
+5. **Develop**: Write your code. Make sure your changes follow the existing style and pass tests (if applicable).
+6. **Build**: Ensure the project still builds perfectly with `npm run build`.
+7. **Commit**: Keep your commit messages clear and concise.
+8. **Push & Pull Request**: Push your branch to GitHub and submit a Pull Request against the `main` branch.
+
+## Setting Up Your Development Environment
+
+```bash
+# Install dependencies
+npm install
+
+# Build the Node server locally
+npm run build
+
+# Start the server (requires an API Key)
+STITCH_API_KEY="your-api-key" npm start
+```
+
+## Code of Conduct
+
+By participating in this project, you agree to abide by friendly and professional conduct. We expect contributors to respect each other and communicate courteously.
+
+## Bug Reports and Feature Requests
+Please use the GitHub Issues tab to report any bugs you find or feature requests you might have. Ensure that your reports are reproducible and your feature requests outline clear user benefits.

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Stitch MCP Server Contributors
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,92 @@
+# Stitch MCP Server
+
+An enterprise-ready Model Context Protocol (MCP) server for the [Google Stitch SDK](https://github.com/google-labs-code/stitch-sdk). 
+
+This server acts as a bridge between your coding agent (Claude, Gemini, Copilot, Cursor, etc.) and Google's Stitch UI Generation API. It exposes powerful native tools, intelligent macro features, resources, and templates so AI agents can fluidly design, generate, and scaffold UI components straight into your workspace.
+
+## Features
+
+- **Standard Tools**: Direct support for Native Stitch functionalities (`create_project`, `generate_screen`, `edit_screen`, `list_projects`, `generate_variants`).
+- **Advanced Agent Macro Tools**: 
+  - `get_screen_code`: Fetches raw HTML for generated screens.
+  - `get_screen_image`: Fetches screenshot images associated with your screens.
+  - `generate_and_fetch_code`: Create a UI and retrieve its HTML code in a single round-trip, saving extreme token latency and minimizing prompt complexity.
+  - `scaffold_project_files`: Seamlessly save and map an abstract Stitch UI directly to local files in the active workspace.
+- **Context Resources**: Map abstract IDs natively with `stitch://projects` and `stitch://projects/{projectId}/screens` context providers.
+- **Bootstrapping Prompts**: Leverage the native `create_web_app` prompt for zero-shot orchestration to guide agents from project creation to scaffolding.
+
+## Installation & Setup
+
+You need an active `STITCH_API_KEY` to run this server. You can sign up with your Google account to get one.
+
+This package comes with a built-in automated installer for **Claude Desktop**, **Cline**, and **Cursor**.
+
+### The Easy Way (Interactive Setup)
+
+Run the following command anywhere on your machine. It will ask which AI tools you want to configure, and it will safely insert the server and prompt you for your `STITCH_API_KEY`:
+
+```bash
+npx -y stitch-mcp-server@latest setup
+```
+
+That's it! Restart your target application and the tools will appear.
+
+### The Manual Way (JSON Config)
+
+If you prefer to configure your client manually, use the following snippet. Ensure you replace `your-api-key` with your actual Stitch API Key.
+
+```json
+{
+  "mcpServers": {
+    "stitch": {
+      "command": "npx",
+      "args": ["-y", "stitch-mcp-server@latest"],
+      "env": {
+        "STITCH_API_KEY": "your-api-key"
+      }
+    }
+  }
+}
+```
+
+---
+
+## Capabilities
+
+The `stitch-mcp-server` gives your AI assistant several specialized tools:
+
+### Local Development
+1. Install dependencies:
+   ```bash
+   npm install
+   ```
+2. Build the project:
+   ```bash
+   npm run build
+   ```
+3. Run the server (or configure your client to run it locally):
+   ```bash
+   STITCH_API_KEY=your-api-key npm start
+   ```
+
+## Development
+
+Built natively with:
+- Node.js & TypeScript
+- `@modelcontextprotocol/sdk` (Official SDK)
+- `@google/stitch-sdk`
+- Zod for rigorous run-time schema validation
+- `tsup` for rapid transparent builds
+
+## Publishing to NPM
+
+This project is fully weaponized for NPM publishing.
+
+1. Ensure you are logged into NPM: `npm login`
+2. Test the build: `npm run build`
+3. Publish publicly: `npm publish --access public`
+
+The `package.json` uses the `files` directive to only pack the optimized `dist` folder, keeping the package extremely lightweight.
+
+## License
+MIT

package/dist/cli.d.ts

@@ -0,0 +1 @@
+#!/usr/bin/env node

package/dist/cli.js

@@ -0,0 +1,9 @@
+#!/usr/bin/env node
+import r from"fs";import o from"path";import S from"os";import{checkbox as h,input as w}from"@inquirer/prompts";var n=S.homedir(),t=S.platform(),u=()=>t==="win32"?process.env.APPDATA||o.join(n,"AppData","Roaming"):t==="darwin"?o.join(n,"Library","Application Support"):o.join(n,".config"),g=()=>t==="darwin"?o.join(n,"Library","Application Support","Claude","claude_desktop_config.json"):o.join(u(),"Claude","claude_desktop_config.json"),m=()=>t==="darwin"?o.join(n,"Library","Application Support","Code","User","globalStorage","saoudrizwan.claude-dev","settings","cline_mcp_settings.json"):t==="win32"?o.join(u(),"Code","User","globalStorage","saoudrizwan.claude-dev","settings","cline_mcp_settings.json"):o.join(u(),"Code","User","globalStorage","saoudrizwan.claude-dev","settings","cline_mcp_settings.json"),f=()=>o.join(process.cwd(),".cursor","mcp.json"),C=async()=>{console.log(`
+\u{1F680} Welcome to the Stitch MCP Server Setup!`),console.log(`This utility will automatically configure your favorite tools to use the Stitch MCP Server.
+`);let c=[{name:"Claude Desktop",value:"claude",checked:r.existsSync(g())},{name:"Cline (VS Code Extension)",value:"cline",checked:r.existsSync(m())},{name:"Cursor (Workspace Config)",value:"cursor",checked:r.existsSync(f())}],p=await h({message:"Which tools would you like to configure this MCP Server for?",choices:c});if(p.length===0){console.log("\u274C No tools selected. Exiting.");return}let d=await w({message:"Please enter your Stitch API Key (STITCH_API_KEY):"});if(!d){console.log("\u274C API Key is required. Exiting.");return}console.log(`
+Configuring selected tools...
+`);let y={command:t==="win32"?"npx.cmd":"npx",args:["-y","stitch-mcp-server"],env:{STITCH_API_KEY:d}},l=(e,i="stitch",v=y)=>{let s={mcpServers:{}};try{if(r.existsSync(e)){let a=r.readFileSync(e,"utf-8");s=JSON.parse(a),s.mcpServers||(s.mcpServers={})}else r.mkdirSync(o.dirname(e),{recursive:!0});s.mcpServers[i]=v,r.writeFileSync(e,JSON.stringify(s,null,2)),console.log(`\u2705 Successfully updated: ${e}`)}catch(a){console.error(`\u274C Failed to update ${e}:`,a)}};for(let e of p)if(e==="claude")l(g());else if(e==="cline")l(m());else if(e==="cursor"){let i=f();console.log(`
+\u{1F4A1} Note: Cursor handles MCP per-workspace or via its UI Settings.`),console.log(`Generating workspace config for Cursor at ${i}`),l(i),console.log("\u{1F449} In Cursor: Go to Cursor Settings Menu > Settings > Features > MCP to manage servers visually.")}console.log(`
+\u{1F389} Setup complete! You can now use Stitch-mcp-server in your selected tools.`),console.log("Make sure to restart Claude Desktop or reload your Editor for changes to take effect.")};C().catch(c=>{console.error("An error occurred during setup:",c),process.exitCode=1});
+//# sourceMappingURL=cli.js.map

package/dist/cli.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/setup.ts","../src/cli.ts"],"sourcesContent":["import fs from \"fs\";\r\nimport path from \"path\";\r\nimport os from \"os\";\r\nimport { checkbox, input, confirm } from \"@inquirer/prompts\";\r\n\r\nconst homedir = os.homedir();\r\nconst platform = os.platform();\r\n\r\nconst getAppDataPath = () => {\r\n  if (platform === \"win32\") {\r\n    return process.env.APPDATA || path.join(homedir, \"AppData\", \"Roaming\");\r\n  } else if (platform === \"darwin\") {\r\n    return path.join(homedir, \"Library\", \"Application Support\");\r\n  } else {\r\n    return path.join(homedir, \".config\");\r\n  }\r\n};\r\n\r\nconst getClaudeDesktopConfigPath = () => {\r\n  if (platform === \"darwin\") {\r\n    return path.join(homedir, \"Library\", \"Application Support\", \"Claude\", \"claude_desktop_config.json\");\r\n  }\r\n  return path.join(getAppDataPath(), \"Claude\", \"claude_desktop_config.json\");\r\n};\r\n\r\nconst getClineConfigPath = () => {\r\n  if (platform === \"darwin\") {\r\n    return path.join(homedir, \"Library\", \"Application Support\", \"Code\", \"User\", \"globalStorage\", \"saoudrizwan.claude-dev\", \"settings\", \"cline_mcp_settings.json\");\r\n  } else if (platform === \"win32\") {\r\n    return path.join(getAppDataPath(), \"Code\", \"User\", \"globalStorage\", \"saoudrizwan.claude-dev\", \"settings\", \"cline_mcp_settings.json\");\r\n  }\r\n  return path.join(getAppDataPath(), \"Code\", \"User\", \"globalStorage\", \"saoudrizwan.claude-dev\", \"settings\", \"cline_mcp_settings.json\");\r\n};\r\n\r\nconst getCursorConfigPath = () => {\r\n  return path.join(process.cwd(), \".cursor\", \"mcp.json\");\r\n};\r\n\r\nexport const runSetup = async () => {\r\n  console.log(\"\\n🚀 Welcome to the Stitch MCP Server Setup!\");\r\n  console.log(\"This utility will automatically configure your favorite tools to use the Stitch MCP Server.\\n\");\r\n\r\n  const tools = [\r\n    {\r\n      name: \"Claude Desktop\",\r\n      value: \"claude\",\r\n      checked: fs.existsSync(getClaudeDesktopConfigPath()),\r\n    },\r\n    {\r\n      name: \"Cline (VS Code Extension)\",\r\n      value: \"cline\",\r\n      checked: fs.existsSync(getClineConfigPath()),\r\n    },\r\n    {\r\n      name: \"Cursor (Workspace Config)\",\r\n      value: \"cursor\",\r\n      checked: fs.existsSync(getCursorConfigPath()),\r\n    }\r\n  ];\r\n\r\n  const selectedTools = await checkbox({\r\n    message: \"Which tools would you like to configure this MCP Server for?\",\r\n    choices: tools,\r\n  });\r\n\r\n  if (selectedTools.length === 0) {\r\n    console.log(\"❌ No tools selected. Exiting.\");\r\n    return;\r\n  }\r\n\r\n  const apiKey = await input({\r\n    message: \"Please enter your Stitch API Key (STITCH_API_KEY):\",\r\n  });\r\n\r\n  if (!apiKey) {\r\n    console.log(\"❌ API Key is required. Exiting.\");\r\n    return;\r\n  }\r\n\r\n  console.log(\"\\nConfiguring selected tools...\\n\");\r\n\r\n  const serverCommand = platform === \"win32\" ? \"npx.cmd\" : \"npx\";\r\n  const serverArgs = [\"-y\", \"stitch-mcp-server\"];\r\n\r\n  const mcpConfigEntry = {\r\n    command: serverCommand,\r\n    args: serverArgs,\r\n    env: {\r\n      STITCH_API_KEY: apiKey\r\n    }\r\n  };\r\n\r\n  const updateJsonConfig = (configPath: string, keyName: string = \"stitch\", serverDef = mcpConfigEntry) => {\r\n    let config: any = { mcpServers: {} };\r\n    try {\r\n      if (fs.existsSync(configPath)) {\r\n        const fileContent = fs.readFileSync(configPath, \"utf-8\");\r\n        config = JSON.parse(fileContent);\r\n        if (!config.mcpServers) config.mcpServers = {};\r\n      } else {\r\n        fs.mkdirSync(path.dirname(configPath), { recursive: true });\r\n      }\r\n      \r\n      config.mcpServers[keyName] = serverDef;\r\n      fs.writeFileSync(configPath, JSON.stringify(config, null, 2));\r\n      console.log(`✅ Successfully updated: ${configPath}`);\r\n    } catch (err) {\r\n      console.error(`❌ Failed to update ${configPath}:`, err);\r\n    }\r\n  };\r\n\r\n  for (const tool of selectedTools) {\r\n    if (tool === \"claude\") {\r\n      updateJsonConfig(getClaudeDesktopConfigPath());\r\n    } else if (tool === \"cline\") {\r\n      updateJsonConfig(getClineConfigPath());\r\n    } else if (tool === \"cursor\") {\r\n      const cursorPath = getCursorConfigPath();\r\n      console.log(`\\n💡 Note: Cursor handles MCP per-workspace or via its UI Settings.`);\r\n      console.log(`Generating workspace config for Cursor at ${cursorPath}`);\r\n      updateJsonConfig(cursorPath);\r\n      console.log(`👉 In Cursor: Go to Cursor Settings Menu > Settings > Features > MCP to manage servers visually.`);\r\n    }\r\n  }\r\n\r\n  console.log(\"\\n🎉 Setup complete! You can now use Stitch-mcp-server in your selected tools.\");\r\n  console.log(\"Make sure to restart Claude Desktop or reload your Editor for changes to take effect.\");\r\n};\r\n\r\n","#!/usr/bin/env node\r\nimport { runSetup } from \"./setup.js\";\r\n\r\nrunSetup().catch((err) => {\r\n  console.error(\"An error occurred during setup:\", err);\r\n  process.exitCode = 1;\r\n});\r\n"],"mappings":"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","names":["fs","path","os","checkbox","input","homedir","platform","getAppDataPath","getClaudeDesktopConfigPath","getClineConfigPath","getCursorConfigPath","runSetup","tools","selectedTools","apiKey","mcpConfigEntry","updateJsonConfig","configPath","keyName","serverDef","config","fileContent","err","tool","cursorPath","runSetup","err"]}

package/dist/index.d.ts

@@ -0,0 +1 @@
+#!/usr/bin/env node

package/dist/index.js

@@ -0,0 +1,30 @@
+#!/usr/bin/env node
+import{McpServer as E}from"@modelcontextprotocol/sdk/server/mcp.js";import{StdioServerTransport as b}from"@modelcontextprotocol/sdk/server/stdio.js";import _ from"dotenv";import{z as r}from"zod";import{Stitch as x,StitchToolClient as w}from"@google/stitch-sdk";function m(){let n=process.env.STITCH_API_KEY;if(!n)throw new Error("STITCH_API_KEY environment variable is missing.");let s=new w({apiKey:n});return{stitch:new x(s),toolClient:s}}import h from"fs/promises";import f from"path";function u(n){let{stitch:s,toolClient:d}=m();n.tool("create_project","Create a new Stitch project",{title:r.string().describe("Title of the new project")},async({title:e})=>{try{let t=await d.callTool("create_project",{title:e});return{content:[{type:"text",text:`Project created successfully!
+
+${JSON.stringify(t,null,2)}`}]}}catch(t){return{content:[{type:"text",text:`Error creating project: ${t?.message||String(t)}`}],isError:!0}}}),n.tool("list_projects","List all available Stitch projects",{},async()=>{try{return{content:[{type:"text",text:`Projects:
+${(await s.projects()).map(o=>`- ${o.id}`).join("\\n")}`}]}}catch(e){return{content:[{type:"text",text:`Error listing projects: ${e?.message||String(e)}`}],isError:!0}}}),n.tool("generate_screen","Generate a UI screen from a text prompt within a project",{projectId:r.string().describe("The ID of the project to generate the screen in"),prompt:r.string().describe("Text prompt describing the desired screen (e.g., 'A login page with email and password fields')"),deviceType:r.enum(["MOBILE","DESKTOP","TABLET","AGNOSTIC"]).optional().describe("Target device type")},async({projectId:e,prompt:t,deviceType:o})=>{try{let i=await s.project(e).generate(t,o);return{content:[{type:"text",text:`Screen generated successfully!
+Screen ID: ${i.id}
+Project ID: ${i.projectId}
+Use get_screen_code tool to retrieve the HTML.`}]}}catch(c){return{content:[{type:"text",text:`Error generating screen: ${c?.message||String(c)}`}],isError:!0}}}),n.tool("edit_screen","Edit an existing screen using a text prompt",{projectId:r.string().describe("The ID of the project containing the screen"),screenId:r.string().describe("The ID of the screen to edit"),prompt:r.string().describe("Text prompt describing the changes (e.g., 'Make the background dark and add a sidebar')"),deviceType:r.enum(["MOBILE","DESKTOP","TABLET","AGNOSTIC"]).optional().describe("Target device type"),modelId:r.enum(["GEMINI_3_PRO","GEMINI_3_FLASH"]).optional().describe("Generative model to use")},async({projectId:e,screenId:t,prompt:o,deviceType:c,modelId:i})=>{try{let p=await s.project(e).getScreen(t);return{content:[{type:"text",text:`Screen edited successfully!
+New Screen ID: ${(await p.edit(o,c,i)).id}
+Original Screen ID: ${p.id}
+Use get_screen_code to retrieve the updated HTML.`}]}}catch(a){return{content:[{type:"text",text:`Error editing screen: ${a?.message||String(a)}`}],isError:!0}}}),n.tool("generate_variants","Generate design variants of an existing screen",{projectId:r.string().describe("The ID of the project containing the screen"),screenId:r.string().describe("The ID of the screen to generate variants from"),prompt:r.string().describe("Prompt guiding the variants (e.g., 'Try different color schemes')"),variantCount:r.number().min(1).max(5).default(3).describe("Number of variants to generate (1-5)"),creativeRange:r.enum(["REFINE","EXPLORE","REIMAGINE"]).default("EXPLORE").describe("How different the variants should be"),aspects:r.array(r.enum(["COLOR_SCHEME","LAYOUT","IMAGES","TEXT_FONT","TEXT_CONTENT"])).optional().describe("Aspects of the design to vary")},async({projectId:e,screenId:t,prompt:o,variantCount:c,creativeRange:i,aspects:a})=>{try{return{content:[{type:"text",text:`Variants generated successfully:
+${(await(await s.project(e).getScreen(t)).variants(o,{variantCount:c,creativeRange:i,aspects:a})).map((I,T)=>`Variant ${T+1} ID: ${I.id}`).join("\\n")}`}]}}catch(p){return{content:[{type:"text",text:`Error generating variants: ${p?.message||String(p)}`}],isError:!0}}}),n.tool("get_screen_code","Retrieve the HTML code download URL (and extract full HTML if possible) for a generated screen",{projectId:r.string().describe("The ID of the project"),screenId:r.string().describe("The ID of the screen")},async({projectId:e,screenId:t})=>{try{let i=await(await s.project(e).getScreen(t)).getHtml(),a=await fetch(i);if(!a.ok)return{content:[{type:"text",text:`Failed to fetch HTML content from URL: ${i}`}],isError:!0};let p=await a.text();return{content:[{type:"text",text:`Code fetched successfully from URL: ${i}`},{type:"text",text:`
+
+\`\`\`html
+${p}
+\`\`\`
+`}]}}catch(o){return{content:[{type:"text",text:`Error retrieving screen code: ${o?.message||String(o)}`}],isError:!0}}}),n.tool("get_screen_image","Retrieve the base64 screenshot image download URL for a generated screen.",{projectId:r.string().describe("The ID of the project"),screenId:r.string().describe("The ID of the screen")},async({projectId:e,screenId:t})=>{try{return{content:[{type:"text",text:`Screenshot fetched successfully! Image available at URL: ${await(await s.project(e).getScreen(t)).getImage()}`}]}}catch(o){return{content:[{type:"text",text:`Error retrieving screen image: ${o?.message||String(o)}`}],isError:!0}}}),n.tool("generate_and_fetch_code","One-step tool to generate a UI screen and immediately retrieve its HTML code",{projectId:r.string().describe("The ID of the project"),prompt:r.string().describe("Text prompt describing the desired screen"),deviceType:r.enum(["MOBILE","DESKTOP","TABLET","AGNOSTIC"]).optional().describe("Target device type")},async({projectId:e,prompt:t,deviceType:o})=>{try{let i=await s.project(e).generate(t,o),a=await i.getHtml(),l=await(await fetch(a)).text();return{content:[{type:"text",text:`Screen generated! Screen ID: ${i.id}`},{type:"text",text:`
+
+\`\`\`html
+${l}
+\`\`\`
+`}]}}catch(c){return{content:[{type:"text",text:`Error in generate_and_fetch_code: ${c?.message||String(c)}`}],isError:!0}}}),n.tool("scaffold_project_files","Maps a specific screen from a project to a local file path. Use this to save UI designs directly into the user's workspace.",{projectId:r.string().describe("The ID of the project"),screenId:r.string().describe("The ID of the screen"),filePath:r.string().describe("Absolute or relative file path to save the HTML (e.g., 'src/components/MyComponent.html')")},async({projectId:e,screenId:t,filePath:o})=>{try{let a=await(await s.project(e).getScreen(t)).getHtml(),l=await(await fetch(a)).text(),g=f.resolve(process.cwd(),o);return await h.mkdir(f.dirname(g),{recursive:!0}),await h.writeFile(g,l,"utf-8"),{content:[{type:"text",text:`Successfully wrote screen ${t} to file: ${g}`}]}}catch(c){return{content:[{type:"text",text:`Error scaffolding file: ${c?.message||String(c)}`}],isError:!0}}})}import{ResourceTemplate as S}from"@modelcontextprotocol/sdk/server/mcp.js";function y(n){let{stitch:s}=m();n.resource("projects","stitch://projects",{mimeType:"application/json"},async d=>{try{let e=await s.projects();return{contents:[{uri:d.href,text:JSON.stringify(e.map(t=>({id:t.id,projectId:t.projectId})),null,2)}]}}catch(e){throw new Error(`Failed to list projects: ${e.message}`)}}),n.resource("project_screens",new S("stitch://projects/{projectId}/screens",{list:void 0}),async(d,{projectId:e})=>{try{if(typeof e!="string")throw new Error("Invalid projectId");let o=await s.project(e).screens();return{contents:[{uri:d.href,text:JSON.stringify(o.map(c=>({id:c.id,screenId:c.screenId,projectId:c.projectId})),null,2)}]}}catch(t){throw new Error(`Failed to load screens for project ${e}: ${t.message}`)}})}import{z as v}from"zod";function j(n){n.prompt("create_web_app",{description:"Generates instructions for the agent to orchestrate the generation and scaffolding of a web app using Google Stitch.",appIdea:v.string().describe("What kind of web app you'd like to build")},({appIdea:s})=>({messages:[{role:"user",content:{type:"text",text:`I want to build a web application using the Google Stitch SDK. Here is my idea: "${s}"
+
+Please act as an expert frontend engineer and perform the following steps:
+1. Call \`create_project\` to create a new workspace for this idea.
+2. Formulate a detailed visual prompt for a high-quality UI layout based on my idea.
+3. Call \`generate_and_fetch_code\` to produce the initial screen UI and fetch its HTML code instantly.
+4. Review the generated code visually if possible, or propose edits. Use \`scaffold_project_files\` to save the HTML correctly inside this workspace (e.g. into an \`index.html\` or wrapped into a component file).
+5. Let me know when you are done, or if you encounter any errors!`}}]}))}_.config();async function L(){process.env.STITCH_API_KEY||(console.error("Error: STITCH_API_KEY environment variable is required."),console.error("Please provide it via .env file or environment variable."),process.exit(1));let n=new E({name:"Stitch-MCP-Server",version:"1.0.0"});u(n),y(n),j(n);let s=new b;await n.connect(s),console.error("Stitch MCP Server is running and listening on stdio.")}L().catch(n=>{console.error("Fatal error starting server:",n),process.exit(1)});
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/index.ts","../src/handlers/tools.ts","../src/utils/stitch.ts","../src/handlers/resources.ts","../src/handlers/prompts.ts"],"sourcesContent":["#!/usr/bin/env node\r\n\r\nimport { McpServer } from \"@modelcontextprotocol/sdk/server/mcp.js\";\r\nimport { StdioServerTransport } from \"@modelcontextprotocol/sdk/server/stdio.js\";\r\nimport dotenv from \"dotenv\";\r\nimport { registerTools } from \"./handlers/tools.js\";\r\nimport { registerResources } from \"./handlers/resources.js\";\r\nimport { registerPrompts } from \"./handlers/prompts.js\";\r\n\r\n// Load environment variables\r\ndotenv.config();\r\n\r\nasync function main() {\r\n  if (!process.env.STITCH_API_KEY) {\r\n    console.error(\"Error: STITCH_API_KEY environment variable is required.\");\r\n    console.error(\"Please provide it via .env file or environment variable.\");\r\n    process.exit(1);\r\n  }\r\n\r\n  const server = new McpServer({\r\n    name: \"Stitch-MCP-Server\",\r\n    version: \"1.0.0\",\r\n  });\r\n\r\n  // Register Handlers\r\n  registerTools(server);\r\n  registerResources(server);\r\n  registerPrompts(server);\r\n\r\n  const transport = new StdioServerTransport();\r\n  await server.connect(transport);\r\n  \r\n  // Informative log (to stderr, so it doesn't pollute stdout where MCP protocol communicates)\r\n  console.error(\"Stitch MCP Server is running and listening on stdio.\");\r\n}\r\n\r\nmain().catch((err) => {\r\n  console.error(\"Fatal error starting server:\", err);\r\n  process.exit(1);\r\n});","import { McpServer } from \"@modelcontextprotocol/sdk/server/mcp.js\";\r\nimport { z } from \"zod\";\r\nimport { getStitchClient } from \"../utils/stitch.js\";\r\n\r\nimport fs from 'fs/promises';\r\nimport path from 'path';\r\n\r\nexport function registerTools(server: McpServer) {\r\n  const { stitch, toolClient } = getStitchClient();\r\n\r\n  // ----- Core Tools -----\r\n\r\n  server.tool(\r\n    \"create_project\",\r\n    \"Create a new Stitch project\",\r\n    {\r\n      title: z.string().describe(\"Title of the new project\"),\r\n    },\r\n    async ({ title }) => {\r\n      try {\r\n        const result = await toolClient.callTool(\"create_project\", { title });\r\n        return {\r\n          content: [{ type: \"text\", text: `Project created successfully!\\n\\n${JSON.stringify(result, null, 2)}` }],\r\n        };\r\n      } catch (error: any) {\r\n        return { content: [{ type: \"text\", text: `Error creating project: ${error?.message || String(error)}` }], isError: true };\r\n      }\r\n    }\r\n  );\r\n\r\n  server.tool(\r\n    \"list_projects\",\r\n    \"List all available Stitch projects\",\r\n    {},\r\n    async () => {\r\n      try {\r\n        const projects = await stitch.projects();\r\n        const projectList = projects.map(p => `- ${p.id}`).join('\\\\n');\r\n        return {\r\n          content: [{ type: \"text\", text: `Projects:\\n${projectList}` }],\r\n        };\r\n      } catch (error: any) {\r\n        return { content: [{ type: \"text\", text: `Error listing projects: ${error?.message || String(error)}` }], isError: true };\r\n      }\r\n    }\r\n  );\r\n\r\n  server.tool(\r\n    \"generate_screen\",\r\n    \"Generate a UI screen from a text prompt within a project\",\r\n    {\r\n      projectId: z.string().describe(\"The ID of the project to generate the screen in\"),\r\n      prompt: z.string().describe(\"Text prompt describing the desired screen (e.g., 'A login page with email and password fields')\"),\r\n      deviceType: z.enum([\"MOBILE\", \"DESKTOP\", \"TABLET\", \"AGNOSTIC\"]).optional().describe(\"Target device type\"),\r\n    },\r\n    async ({ projectId, prompt, deviceType }) => {\r\n      try {\r\n        const project = stitch.project(projectId);\r\n        const screen = await project.generate(prompt, deviceType);\r\n        \r\n        return {\r\n          content: [\r\n            { \r\n              type: \"text\", \r\n              text: `Screen generated successfully!\\nScreen ID: ${screen.id}\\nProject ID: ${screen.projectId}\\nUse get_screen_code tool to retrieve the HTML.` \r\n            }\r\n          ],\r\n        };\r\n      } catch (error: any) {\r\n        return { content: [{ type: \"text\", text: `Error generating screen: ${error?.message || String(error)}` }], isError: true };\r\n      }\r\n    }\r\n  );\r\n\r\n  server.tool(\r\n    \"edit_screen\",\r\n    \"Edit an existing screen using a text prompt\",\r\n    {\r\n      projectId: z.string().describe(\"The ID of the project containing the screen\"),\r\n      screenId: z.string().describe(\"The ID of the screen to edit\"),\r\n      prompt: z.string().describe(\"Text prompt describing the changes (e.g., 'Make the background dark and add a sidebar')\"),\r\n      deviceType: z.enum([\"MOBILE\", \"DESKTOP\", \"TABLET\", \"AGNOSTIC\"]).optional().describe(\"Target device type\"),\r\n      modelId: z.enum([\"GEMINI_3_PRO\", \"GEMINI_3_FLASH\"]).optional().describe(\"Generative model to use\"),\r\n    },\r\n    async ({ projectId, screenId, prompt, deviceType, modelId }) => {\r\n      try {\r\n        const project = stitch.project(projectId);\r\n        const screen = await project.getScreen(screenId);\r\n        const editedScreen = await screen.edit(prompt, deviceType, modelId);\r\n        \r\n        return {\r\n          content: [{ type: \"text\", text: `Screen edited successfully!\\nNew Screen ID: ${editedScreen.id}\\nOriginal Screen ID: ${screen.id}\\nUse get_screen_code to retrieve the updated HTML.` }],\r\n        };\r\n      } catch (error: any) {\r\n        return { content: [{ type: \"text\", text: `Error editing screen: ${error?.message || String(error)}` }], isError: true };\r\n      }\r\n    }\r\n  );\r\n\r\n  server.tool(\r\n    \"generate_variants\",\r\n    \"Generate design variants of an existing screen\",\r\n    {\r\n      projectId: z.string().describe(\"The ID of the project containing the screen\"),\r\n      screenId: z.string().describe(\"The ID of the screen to generate variants from\"),\r\n      prompt: z.string().describe(\"Prompt guiding the variants (e.g., 'Try different color schemes')\"),\r\n      variantCount: z.number().min(1).max(5).default(3).describe(\"Number of variants to generate (1-5)\"),\r\n      creativeRange: z.enum([\"REFINE\", \"EXPLORE\", \"REIMAGINE\"]).default(\"EXPLORE\").describe(\"How different the variants should be\"),\r\n      aspects: z.array(z.enum([\"COLOR_SCHEME\", \"LAYOUT\", \"IMAGES\", \"TEXT_FONT\", \"TEXT_CONTENT\"])).optional().describe(\"Aspects of the design to vary\"),\r\n    },\r\n    async ({ projectId, screenId, prompt, variantCount, creativeRange, aspects }) => {\r\n      try {\r\n        const project = stitch.project(projectId);\r\n        const screen = await project.getScreen(screenId);\r\n        \r\n        const variants = await screen.variants(prompt, { variantCount, creativeRange, aspects });\r\n        const variantList = variants.map((v, i) => `Variant ${i + 1} ID: ${v.id}`).join('\\\\n');\r\n\r\n        return {\r\n          content: [{ type: \"text\", text: `Variants generated successfully:\\n${variantList}` }],\r\n        };\r\n      } catch (error: any) {\r\n        return { content: [{ type: \"text\", text: `Error generating variants: ${error?.message || String(error)}` }], isError: true };\r\n      }\r\n    }\r\n  );\r\n\r\n  // ----- Advanced Macro Tools -----\r\n\r\n  server.tool(\r\n    \"get_screen_code\",\r\n    \"Retrieve the HTML code download URL (and extract full HTML if possible) for a generated screen\",\r\n    {\r\n      projectId: z.string().describe(\"The ID of the project\"),\r\n      screenId: z.string().describe(\"The ID of the screen\"),\r\n    },\r\n    async ({ projectId, screenId }) => {\r\n      try {\r\n        const project = stitch.project(projectId);\r\n        const screen = await project.getScreen(screenId);\r\n        const htmlUrl = await screen.getHtml();\r\n        \r\n        // Fetch the actual HTML content\r\n        const response = await fetch(htmlUrl);\r\n        if (!response.ok) {\r\n           return { content: [{ type: \"text\", text: `Failed to fetch HTML content from URL: ${htmlUrl}` }], isError: true };\r\n        }\r\n        const htmlContent = await response.text();\r\n\r\n        return {\r\n          content: [\r\n            { type: \"text\", text: `Code fetched successfully from URL: ${htmlUrl}` },\r\n            { type: \"text\", text: `\\n\\n\\`\\`\\`html\\n${htmlContent}\\n\\`\\`\\`\\n` }\r\n          ],\r\n        };\r\n      } catch (error: any) {\r\n        return { content: [{ type: \"text\", text: `Error retrieving screen code: ${error?.message || String(error)}` }], isError: true };\r\n      }\r\n    }\r\n  );\r\n\r\n  server.tool(\r\n    \"get_screen_image\",\r\n    \"Retrieve the base64 screenshot image download URL for a generated screen.\",\r\n    {\r\n      projectId: z.string().describe(\"The ID of the project\"),\r\n      screenId: z.string().describe(\"The ID of the screen\"),\r\n    },\r\n    async ({ projectId, screenId }) => {\r\n      try {\r\n        const project = stitch.project(projectId);\r\n        const screen = await project.getScreen(screenId);\r\n        const imageUrl = await screen.getImage();\r\n\r\n        return {\r\n          content: [\r\n            { type: \"text\", text: `Screenshot fetched successfully! Image available at URL: ${imageUrl}` },\r\n          ],\r\n        };\r\n      } catch (error: any) {\r\n        return { content: [{ type: \"text\", text: `Error retrieving screen image: ${error?.message || String(error)}` }], isError: true };\r\n      }\r\n    }\r\n  );\r\n\r\n  server.tool(\r\n    \"generate_and_fetch_code\",\r\n    \"One-step tool to generate a UI screen and immediately retrieve its HTML code\",\r\n    {\r\n      projectId: z.string().describe(\"The ID of the project\"),\r\n      prompt: z.string().describe(\"Text prompt describing the desired screen\"),\r\n      deviceType: z.enum([\"MOBILE\", \"DESKTOP\", \"TABLET\", \"AGNOSTIC\"]).optional().describe(\"Target device type\"),\r\n    },\r\n    async ({ projectId, prompt, deviceType }) => {\r\n      try {\r\n        const project = stitch.project(projectId);\r\n        const screen = await project.generate(prompt, deviceType);\r\n        const htmlUrl = await screen.getHtml();\r\n        \r\n        const response = await fetch(htmlUrl);\r\n        const htmlContent = await response.text();\r\n\r\n        return {\r\n          content: [\r\n            { type: \"text\", text: `Screen generated! Screen ID: ${screen.id}` },\r\n            { type: \"text\", text: `\\n\\n\\`\\`\\`html\\n${htmlContent}\\n\\`\\`\\`\\n` }\r\n          ],\r\n        };\r\n      } catch (error: any) {\r\n        return { content: [{ type: \"text\", text: `Error in generate_and_fetch_code: ${error?.message || String(error)}` }], isError: true };\r\n      }\r\n    }\r\n  );\r\n\r\n  server.tool(\r\n    \"scaffold_project_files\",\r\n    \"Maps a specific screen from a project to a local file path. Use this to save UI designs directly into the user's workspace.\",\r\n    {\r\n      projectId: z.string().describe(\"The ID of the project\"),\r\n      screenId: z.string().describe(\"The ID of the screen\"),\r\n      filePath: z.string().describe(\"Absolute or relative file path to save the HTML (e.g., 'src/components/MyComponent.html')\"),\r\n    },\r\n    async ({ projectId, screenId, filePath }) => {\r\n      try {\r\n        const project = stitch.project(projectId);\r\n        const screen = await project.getScreen(screenId);\r\n        const htmlUrl = await screen.getHtml();\r\n        \r\n        const response = await fetch(htmlUrl);\r\n        const htmlContent = await response.text();\r\n\r\n        // Save to file system\r\n        const resolvedPath = path.resolve(process.cwd(), filePath);\r\n        await fs.mkdir(path.dirname(resolvedPath), { recursive: true });\r\n        await fs.writeFile(resolvedPath, htmlContent, 'utf-8');\r\n\r\n        return {\r\n          content: [\r\n            { type: \"text\", text: `Successfully wrote screen ${screenId} to file: ${resolvedPath}` }\r\n          ],\r\n        };\r\n      } catch (error: any) {\r\n        return { content: [{ type: \"text\", text: `Error scaffolding file: ${error?.message || String(error)}` }], isError: true };\r\n      }\r\n    }\r\n  );\r\n\r\n}","import { Stitch, StitchToolClient } from '@google/stitch-sdk';\r\nimport { z } from 'zod';\r\n\r\nexport function getStitchClient() {\r\n  const apiKey = process.env.STITCH_API_KEY;\r\n  if (!apiKey) {\r\n    throw new Error('STITCH_API_KEY environment variable is missing.');\r\n  }\r\n\r\n  // Under the hood, Stitch instance manages authorization and project scoping\r\n  const toolClient = new StitchToolClient({ apiKey });\r\n  const stitch = new Stitch(toolClient);\r\n  \r\n  return { stitch, toolClient };\r\n}","import { McpServer, ResourceTemplate } from \"@modelcontextprotocol/sdk/server/mcp.js\";\r\nimport { getStitchClient } from \"../utils/stitch.js\";\r\n\r\nexport function registerResources(server: McpServer) {\r\n  const { stitch } = getStitchClient();\r\n\r\n  // Resource to list all projects\r\n  server.resource(\r\n    \"projects\",\r\n    \"stitch://projects\",\r\n    { mimeType: \"application/json\" },\r\n    async (uri) => {\r\n      try {\r\n        const projects = await stitch.projects();\r\n        return {\r\n          contents: [\r\n            {\r\n              uri: uri.href,\r\n              text: JSON.stringify(projects.map(p => ({ id: p.id, projectId: p.projectId })), null, 2),\r\n            },\r\n          ],\r\n        };\r\n      } catch (error: any) {\r\n        throw new Error(`Failed to list projects: ${error.message}`);\r\n      }\r\n    }\r\n  );\r\n\r\n  // Resource template to fetch screens for a specific project\r\n  server.resource(\r\n    \"project_screens\",\r\n    new ResourceTemplate(\"stitch://projects/{projectId}/screens\", { list: undefined }),\r\n    async (uri, { projectId }) => {\r\n      try {\r\n        if (typeof projectId !== \"string\") {\r\n          throw new Error(\"Invalid projectId\");\r\n        }\r\n        \r\n        const project = stitch.project(projectId);\r\n        const screens = await project.screens();\r\n        return {\r\n          contents: [\r\n            {\r\n              uri: uri.href,\r\n              text: JSON.stringify(screens.map(s => ({ id: s.id, screenId: s.screenId, projectId: s.projectId })), null, 2),\r\n            },\r\n          ],\r\n        };\r\n      } catch (error: any) {\r\n        throw new Error(`Failed to load screens for project ${projectId}: ${error.message}`);\r\n      }\r\n    }\r\n  );\r\n}","import { McpServer } from \"@modelcontextprotocol/sdk/server/mcp.js\";\r\nimport { z } from \"zod\";\r\n\r\nexport function registerPrompts(server: McpServer) {\r\n  server.prompt(\r\n    \"create_web_app\",\r\n    {\r\n      description: \"Generates instructions for the agent to orchestrate the generation and scaffolding of a web app using Google Stitch.\",\r\n      appIdea: z.string().describe(\"What kind of web app you'd like to build\"),\r\n    },\r\n    ({ appIdea }) => {\r\n      return {\r\n        messages: [\r\n          {\r\n            role: \"user\",\r\n            content: {\r\n              type: \"text\",\r\n              text: `I want to build a web application using the Google Stitch SDK. Here is my idea: \"${appIdea}\"\r\n\r\nPlease act as an expert frontend engineer and perform the following steps:\r\n1. Call \\`create_project\\` to create a new workspace for this idea.\r\n2. Formulate a detailed visual prompt for a high-quality UI layout based on my idea.\r\n3. Call \\`generate_and_fetch_code\\` to produce the initial screen UI and fetch its HTML code instantly.\r\n4. Review the generated code visually if possible, or propose edits. Use \\`scaffold_project_files\\` to save the HTML correctly inside this workspace (e.g. into an \\`index.html\\` or wrapped into a component file).\r\n5. Let me know when you are done, or if you encounter any errors!`,\r\n            },\r\n          },\r\n        ],\r\n      };\r\n    }\r\n  );\r\n}"],"mappings":"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","names":["McpServer","StdioServerTransport","dotenv","z","Stitch","StitchToolClient","getStitchClient","apiKey","toolClient","fs","path","registerTools","server","stitch","toolClient","getStitchClient","z","title","result","error","p","projectId","prompt","deviceType","screen","screenId","modelId","variantCount","creativeRange","aspects","v","i","htmlUrl","response","htmlContent","filePath","resolvedPath","ResourceTemplate","registerResources","server","stitch","getStitchClient","uri","projects","p","error","ResourceTemplate","projectId","screens","s","z","registerPrompts","server","appIdea","dotenv","main","server","McpServer","registerTools","registerResources","registerPrompts","transport","StdioServerTransport","err"]}

package/package.json

@@ -0,0 +1,46 @@
+{
+  "name": "stitch-mcp-server",
+  "version": "1.0.0",
+  "description": "Enterprise-ready MCP Server for Google Stitch UI generation SDK",
+  "main": "dist/index.js",
+  "scripts": {
+    "test": "node --experimental-vm-modules node_modules/vitest/vitest.mjs run",
+    "build": "tsup",
+    "start": "node dist/index.js",
+    "prepare": "npm run build"
+  },
+  "keywords": [
+    "mcp",
+    "model-context-protocol",
+    "stitch",
+    "ai",
+    "google-stitch"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/0x-Professor/Stitch-mcp-server.git"
+  },
+  "bugs": {
+    "url": "https://github.com/0x-Professor/Stitch-mcp-server/issues"
+  },
+  "author": "",
+  "license": "MIT",
+  "type": "module",
+  "dependencies": {
+    "@google/stitch-sdk": "^0.0.3",
+    "@inquirer/prompts": "^8.3.2",
+    "@modelcontextprotocol/sdk": "^1.27.1",
+    "dotenv": "^17.3.1",
+    "zod": "^4.3.6"
+  },
+  "devDependencies": {
+    "@types/node": "^25.5.0",
+    "tsup": "^8.5.1",
+    "typescript": "^5.9.3",
+    "vitest": "^4.1.0"
+  },
+  "bin": {
+    "stitch-mcp": "dist/index.js",
+    "stitch-mcp-setup": "dist/cli.js"
+  }
+}

package/src/cli.ts

@@ -0,0 +1,7 @@
+#!/usr/bin/env node
+import { runSetup } from "./setup.js";
+
+runSetup().catch((err) => {
+  console.error("An error occurred during setup:", err);
+  process.exitCode = 1;
+});

package/src/handlers/prompts.ts

@@ -0,0 +1,32 @@
+import { McpServer } from "@modelcontextprotocol/sdk/server/mcp.js";
+import { z } from "zod";
+
+export function registerPrompts(server: McpServer) {
+  server.prompt(
+    "create_web_app",
+    {
+      description: "Generates instructions for the agent to orchestrate the generation and scaffolding of a web app using Google Stitch.",
+      appIdea: z.string().describe("What kind of web app you'd like to build"),
+    },
+    ({ appIdea }) => {
+      return {
+        messages: [
+          {
+            role: "user",
+            content: {
+              type: "text",
+              text: `I want to build a web application using the Google Stitch SDK. Here is my idea: "${appIdea}"
+
+Please act as an expert frontend engineer and perform the following steps:
+1. Call \`create_project\` to create a new workspace for this idea.
+2. Formulate a detailed visual prompt for a high-quality UI layout based on my idea.
+3. Call \`generate_and_fetch_code\` to produce the initial screen UI and fetch its HTML code instantly.
+4. Review the generated code visually if possible, or propose edits. Use \`scaffold_project_files\` to save the HTML correctly inside this workspace (e.g. into an \`index.html\` or wrapped into a component file).
+5. Let me know when you are done, or if you encounter any errors!`,
+            },
+          },
+        ],
+      };
+    }
+  );
+}

package/src/handlers/resources.ts

@@ -0,0 +1,54 @@
+import { McpServer, ResourceTemplate } from "@modelcontextprotocol/sdk/server/mcp.js";
+import { getStitchClient } from "../utils/stitch.js";
+
+export function registerResources(server: McpServer) {
+  const { stitch } = getStitchClient();
+
+  // Resource to list all projects
+  server.resource(
+    "projects",
+    "stitch://projects",
+    { mimeType: "application/json" },
+    async (uri) => {
+      try {
+        const projects = await stitch.projects();
+        return {
+          contents: [
+            {
+              uri: uri.href,
+              text: JSON.stringify(projects.map(p => ({ id: p.id, projectId: p.projectId })), null, 2),
+            },
+          ],
+        };
+      } catch (error: any) {
+        throw new Error(`Failed to list projects: ${error.message}`);
+      }
+    }
+  );
+
+  // Resource template to fetch screens for a specific project
+  server.resource(
+    "project_screens",
+    new ResourceTemplate("stitch://projects/{projectId}/screens", { list: undefined }),
+    async (uri, { projectId }) => {
+      try {
+        if (typeof projectId !== "string") {
+          throw new Error("Invalid projectId");
+        }
+        
+        const project = stitch.project(projectId);
+        const screens = await project.screens();
+        return {
+          contents: [
+            {
+              uri: uri.href,
+              text: JSON.stringify(screens.map(s => ({ id: s.id, screenId: s.screenId, projectId: s.projectId })), null, 2),
+            },
+          ],
+        };
+      } catch (error: any) {
+        throw new Error(`Failed to load screens for project ${projectId}: ${error.message}`);
+      }
+    }
+  );
+}

package/src/handlers/tools.ts

@@ -0,0 +1,248 @@
+import { McpServer } from "@modelcontextprotocol/sdk/server/mcp.js";
+import { z } from "zod";
+import { getStitchClient } from "../utils/stitch.js";
+
+import fs from 'fs/promises';
+import path from 'path';
+
+export function registerTools(server: McpServer) {
+  const { stitch, toolClient } = getStitchClient();
+
+  // ----- Core Tools -----
+
+  server.tool(
+    "create_project",
+    "Create a new Stitch project",
+    {
+      title: z.string().describe("Title of the new project"),
+    },
+    async ({ title }) => {
+      try {
+        const result = await toolClient.callTool("create_project", { title });
+        return {
+          content: [{ type: "text", text: `Project created successfully!\n\n${JSON.stringify(result, null, 2)}` }],
+        };
+      } catch (error: any) {
+        return { content: [{ type: "text", text: `Error creating project: ${error?.message || String(error)}` }], isError: true };
+      }
+    }
+  );
+
+  server.tool(
+    "list_projects",
+    "List all available Stitch projects",
+    {},
+    async () => {
+      try {
+        const projects = await stitch.projects();
+        const projectList = projects.map(p => `- ${p.id}`).join('\\n');
+        return {
+          content: [{ type: "text", text: `Projects:\n${projectList}` }],
+        };
+      } catch (error: any) {
+        return { content: [{ type: "text", text: `Error listing projects: ${error?.message || String(error)}` }], isError: true };
+      }
+    }
+  );
+
+  server.tool(
+    "generate_screen",
+    "Generate a UI screen from a text prompt within a project",
+    {
+      projectId: z.string().describe("The ID of the project to generate the screen in"),
+      prompt: z.string().describe("Text prompt describing the desired screen (e.g., 'A login page with email and password fields')"),
+      deviceType: z.enum(["MOBILE", "DESKTOP", "TABLET", "AGNOSTIC"]).optional().describe("Target device type"),
+    },
+    async ({ projectId, prompt, deviceType }) => {
+      try {
+        const project = stitch.project(projectId);
+        const screen = await project.generate(prompt, deviceType);
+        
+        return {
+          content: [
+            { 
+              type: "text", 
+              text: `Screen generated successfully!\nScreen ID: ${screen.id}\nProject ID: ${screen.projectId}\nUse get_screen_code tool to retrieve the HTML.` 
+            }
+          ],
+        };
+      } catch (error: any) {
+        return { content: [{ type: "text", text: `Error generating screen: ${error?.message || String(error)}` }], isError: true };
+      }
+    }
+  );
+
+  server.tool(
+    "edit_screen",
+    "Edit an existing screen using a text prompt",
+    {
+      projectId: z.string().describe("The ID of the project containing the screen"),
+      screenId: z.string().describe("The ID of the screen to edit"),
+      prompt: z.string().describe("Text prompt describing the changes (e.g., 'Make the background dark and add a sidebar')"),
+      deviceType: z.enum(["MOBILE", "DESKTOP", "TABLET", "AGNOSTIC"]).optional().describe("Target device type"),
+      modelId: z.enum(["GEMINI_3_PRO", "GEMINI_3_FLASH"]).optional().describe("Generative model to use"),
+    },
+    async ({ projectId, screenId, prompt, deviceType, modelId }) => {
+      try {
+        const project = stitch.project(projectId);
+        const screen = await project.getScreen(screenId);
+        const editedScreen = await screen.edit(prompt, deviceType, modelId);
+        
+        return {
+          content: [{ type: "text", text: `Screen edited successfully!\nNew Screen ID: ${editedScreen.id}\nOriginal Screen ID: ${screen.id}\nUse get_screen_code to retrieve the updated HTML.` }],
+        };
+      } catch (error: any) {
+        return { content: [{ type: "text", text: `Error editing screen: ${error?.message || String(error)}` }], isError: true };
+      }
+    }
+  );
+
+  server.tool(
+    "generate_variants",
+    "Generate design variants of an existing screen",
+    {
+      projectId: z.string().describe("The ID of the project containing the screen"),
+      screenId: z.string().describe("The ID of the screen to generate variants from"),
+      prompt: z.string().describe("Prompt guiding the variants (e.g., 'Try different color schemes')"),
+      variantCount: z.number().min(1).max(5).default(3).describe("Number of variants to generate (1-5)"),
+      creativeRange: z.enum(["REFINE", "EXPLORE", "REIMAGINE"]).default("EXPLORE").describe("How different the variants should be"),
+      aspects: z.array(z.enum(["COLOR_SCHEME", "LAYOUT", "IMAGES", "TEXT_FONT", "TEXT_CONTENT"])).optional().describe("Aspects of the design to vary"),
+    },
+    async ({ projectId, screenId, prompt, variantCount, creativeRange, aspects }) => {
+      try {
+        const project = stitch.project(projectId);
+        const screen = await project.getScreen(screenId);
+        
+        const variants = await screen.variants(prompt, { variantCount, creativeRange, aspects });
+        const variantList = variants.map((v, i) => `Variant ${i + 1} ID: ${v.id}`).join('\\n');
+
+        return {
+          content: [{ type: "text", text: `Variants generated successfully:\n${variantList}` }],
+        };
+      } catch (error: any) {
+        return { content: [{ type: "text", text: `Error generating variants: ${error?.message || String(error)}` }], isError: true };
+      }
+    }
+  );
+
+  // ----- Advanced Macro Tools -----
+
+  server.tool(
+    "get_screen_code",
+    "Retrieve the HTML code download URL (and extract full HTML if possible) for a generated screen",
+    {
+      projectId: z.string().describe("The ID of the project"),
+      screenId: z.string().describe("The ID of the screen"),
+    },
+    async ({ projectId, screenId }) => {
+      try {
+        const project = stitch.project(projectId);
+        const screen = await project.getScreen(screenId);
+        const htmlUrl = await screen.getHtml();
+        
+        // Fetch the actual HTML content
+        const response = await fetch(htmlUrl);
+        if (!response.ok) {
+           return { content: [{ type: "text", text: `Failed to fetch HTML content from URL: ${htmlUrl}` }], isError: true };
+        }
+        const htmlContent = await response.text();
+
+        return {
+          content: [
+            { type: "text", text: `Code fetched successfully from URL: ${htmlUrl}` },
+            { type: "text", text: `\n\n\`\`\`html\n${htmlContent}\n\`\`\`\n` }
+          ],
+        };
+      } catch (error: any) {
+        return { content: [{ type: "text", text: `Error retrieving screen code: ${error?.message || String(error)}` }], isError: true };
+      }
+    }
+  );
+
+  server.tool(
+    "get_screen_image",
+    "Retrieve the base64 screenshot image download URL for a generated screen.",
+    {
+      projectId: z.string().describe("The ID of the project"),
+      screenId: z.string().describe("The ID of the screen"),
+    },
+    async ({ projectId, screenId }) => {
+      try {
+        const project = stitch.project(projectId);
+        const screen = await project.getScreen(screenId);
+        const imageUrl = await screen.getImage();
+
+        return {
+          content: [
+            { type: "text", text: `Screenshot fetched successfully! Image available at URL: ${imageUrl}` },
+          ],
+        };
+      } catch (error: any) {
+        return { content: [{ type: "text", text: `Error retrieving screen image: ${error?.message || String(error)}` }], isError: true };
+      }
+    }
+  );
+
+  server.tool(
+    "generate_and_fetch_code",
+    "One-step tool to generate a UI screen and immediately retrieve its HTML code",
+    {
+      projectId: z.string().describe("The ID of the project"),
+      prompt: z.string().describe("Text prompt describing the desired screen"),
+      deviceType: z.enum(["MOBILE", "DESKTOP", "TABLET", "AGNOSTIC"]).optional().describe("Target device type"),
+    },
+    async ({ projectId, prompt, deviceType }) => {
+      try {
+        const project = stitch.project(projectId);
+        const screen = await project.generate(prompt, deviceType);
+        const htmlUrl = await screen.getHtml();
+        
+        const response = await fetch(htmlUrl);
+        const htmlContent = await response.text();
+
+        return {
+          content: [
+            { type: "text", text: `Screen generated! Screen ID: ${screen.id}` },
+            { type: "text", text: `\n\n\`\`\`html\n${htmlContent}\n\`\`\`\n` }
+          ],
+        };
+      } catch (error: any) {
+        return { content: [{ type: "text", text: `Error in generate_and_fetch_code: ${error?.message || String(error)}` }], isError: true };
+      }
+    }
+  );
+
+  server.tool(
+    "scaffold_project_files",
+    "Maps a specific screen from a project to a local file path. Use this to save UI designs directly into the user's workspace.",
+    {
+      projectId: z.string().describe("The ID of the project"),
+      screenId: z.string().describe("The ID of the screen"),
+      filePath: z.string().describe("Absolute or relative file path to save the HTML (e.g., 'src/components/MyComponent.html')"),
+    },
+    async ({ projectId, screenId, filePath }) => {
+      try {
+        const project = stitch.project(projectId);
+        const screen = await project.getScreen(screenId);
+        const htmlUrl = await screen.getHtml();
+        
+        const response = await fetch(htmlUrl);
+        const htmlContent = await response.text();
+
+        // Save to file system
+        const resolvedPath = path.resolve(process.cwd(), filePath);
+        await fs.mkdir(path.dirname(resolvedPath), { recursive: true });
+        await fs.writeFile(resolvedPath, htmlContent, 'utf-8');
+
+        return {
+          content: [
+            { type: "text", text: `Successfully wrote screen ${screenId} to file: ${resolvedPath}` }
+          ],
+        };
+      } catch (error: any) {
+        return { content: [{ type: "text", text: `Error scaffolding file: ${error?.message || String(error)}` }], isError: true };
+      }
+    }
+  );
+
+}

package/src/index.ts

@@ -0,0 +1,40 @@
+#!/usr/bin/env node
+
+import { McpServer } from "@modelcontextprotocol/sdk/server/mcp.js";
+import { StdioServerTransport } from "@modelcontextprotocol/sdk/server/stdio.js";
+import dotenv from "dotenv";
+import { registerTools } from "./handlers/tools.js";
+import { registerResources } from "./handlers/resources.js";
+import { registerPrompts } from "./handlers/prompts.js";
+
+// Load environment variables
+dotenv.config();
+
+async function main() {
+  if (!process.env.STITCH_API_KEY) {
+    console.error("Error: STITCH_API_KEY environment variable is required.");
+    console.error("Please provide it via .env file or environment variable.");
+    process.exit(1);
+  }
+
+  const server = new McpServer({
+    name: "Stitch-MCP-Server",
+    version: "1.0.0",
+  });
+
+  // Register Handlers
+  registerTools(server);
+  registerResources(server);
+  registerPrompts(server);
+
+  const transport = new StdioServerTransport();
+  await server.connect(transport);
+  
+  // Informative log (to stderr, so it doesn't pollute stdout where MCP protocol communicates)
+  console.error("Stitch MCP Server is running and listening on stdio.");
+}
+
+main().catch((err) => {
+  console.error("Fatal error starting server:", err);
+  process.exit(1);
+});

package/src/setup.ts

@@ -0,0 +1,129 @@
+import fs from "fs";
+import path from "path";
+import os from "os";
+import { checkbox, input, confirm } from "@inquirer/prompts";
+
+const homedir = os.homedir();
+const platform = os.platform();
+
+const getAppDataPath = () => {
+  if (platform === "win32") {
+    return process.env.APPDATA || path.join(homedir, "AppData", "Roaming");
+  } else if (platform === "darwin") {
+    return path.join(homedir, "Library", "Application Support");
+  } else {
+    return path.join(homedir, ".config");
+  }
+};
+
+const getClaudeDesktopConfigPath = () => {
+  if (platform === "darwin") {
+    return path.join(homedir, "Library", "Application Support", "Claude", "claude_desktop_config.json");
+  }
+  return path.join(getAppDataPath(), "Claude", "claude_desktop_config.json");
+};
+
+const getClineConfigPath = () => {
+  if (platform === "darwin") {
+    return path.join(homedir, "Library", "Application Support", "Code", "User", "globalStorage", "saoudrizwan.claude-dev", "settings", "cline_mcp_settings.json");
+  } else if (platform === "win32") {
+    return path.join(getAppDataPath(), "Code", "User", "globalStorage", "saoudrizwan.claude-dev", "settings", "cline_mcp_settings.json");
+  }
+  return path.join(getAppDataPath(), "Code", "User", "globalStorage", "saoudrizwan.claude-dev", "settings", "cline_mcp_settings.json");
+};
+
+const getCursorConfigPath = () => {
+  return path.join(process.cwd(), ".cursor", "mcp.json");
+};
+
+export const runSetup = async () => {
+  console.log("\n🚀 Welcome to the Stitch MCP Server Setup!");
+  console.log("This utility will automatically configure your favorite tools to use the Stitch MCP Server.\n");
+
+  const tools = [
+    {
+      name: "Claude Desktop",
+      value: "claude",
+      checked: fs.existsSync(getClaudeDesktopConfigPath()),
+    },
+    {
+      name: "Cline (VS Code Extension)",
+      value: "cline",
+      checked: fs.existsSync(getClineConfigPath()),
+    },
+    {
+      name: "Cursor (Workspace Config)",
+      value: "cursor",
+      checked: fs.existsSync(getCursorConfigPath()),
+    }
+  ];
+
+  const selectedTools = await checkbox({
+    message: "Which tools would you like to configure this MCP Server for?",
+    choices: tools,
+  });
+
+  if (selectedTools.length === 0) {
+    console.log("❌ No tools selected. Exiting.");
+    return;
+  }
+
+  const apiKey = await input({
+    message: "Please enter your Stitch API Key (STITCH_API_KEY):",
+  });
+
+  if (!apiKey) {
+    console.log("❌ API Key is required. Exiting.");
+    return;
+  }
+
+  console.log("\nConfiguring selected tools...\n");
+
+  const serverCommand = platform === "win32" ? "npx.cmd" : "npx";
+  const serverArgs = ["-y", "stitch-mcp-server"];
+
+  const mcpConfigEntry = {
+    command: serverCommand,
+    args: serverArgs,
+    env: {
+      STITCH_API_KEY: apiKey
+    }
+  };
+
+  const updateJsonConfig = (configPath: string, keyName: string = "stitch", serverDef = mcpConfigEntry) => {
+    let config: any = { mcpServers: {} };
+    try {
+      if (fs.existsSync(configPath)) {
+        const fileContent = fs.readFileSync(configPath, "utf-8");
+        config = JSON.parse(fileContent);
+        if (!config.mcpServers) config.mcpServers = {};
+      } else {
+        fs.mkdirSync(path.dirname(configPath), { recursive: true });
+      }
+      
+      config.mcpServers[keyName] = serverDef;
+      fs.writeFileSync(configPath, JSON.stringify(config, null, 2));
+      console.log(`✅ Successfully updated: ${configPath}`);
+    } catch (err) {
+      console.error(`❌ Failed to update ${configPath}:`, err);
+    }
+  };
+
+  for (const tool of selectedTools) {
+    if (tool === "claude") {
+      updateJsonConfig(getClaudeDesktopConfigPath());
+    } else if (tool === "cline") {
+      updateJsonConfig(getClineConfigPath());
+    } else if (tool === "cursor") {
+      const cursorPath = getCursorConfigPath();
+      console.log(`\n💡 Note: Cursor handles MCP per-workspace or via its UI Settings.`);
+      console.log(`Generating workspace config for Cursor at ${cursorPath}`);
+      updateJsonConfig(cursorPath);
+      console.log(`👉 In Cursor: Go to Cursor Settings Menu > Settings > Features > MCP to manage servers visually.`);
+    }
+  }
+
+  console.log("\n🎉 Setup complete! You can now use Stitch-mcp-server in your selected tools.");
+  console.log("Make sure to restart Claude Desktop or reload your Editor for changes to take effect.");
+};
+

package/src/utils/stitch.ts

@@ -0,0 +1,15 @@
+import { Stitch, StitchToolClient } from '@google/stitch-sdk';
+import { z } from 'zod';
+
+export function getStitchClient() {
+  const apiKey = process.env.STITCH_API_KEY;
+  if (!apiKey) {
+    throw new Error('STITCH_API_KEY environment variable is missing.');
+  }
+
+  // Under the hood, Stitch instance manages authorization and project scoping
+  const toolClient = new StitchToolClient({ apiKey });
+  const stitch = new Stitch(toolClient);
+  
+  return { stitch, toolClient };
+}

package/tests/tools.test.ts

@@ -0,0 +1,149 @@
+import { describe, it, expect, beforeAll, afterAll } from 'vitest';
+import { McpServer } from '@modelcontextprotocol/sdk/server/mcp.js';
+import { Client } from '@modelcontextprotocol/sdk/client/index.js';
+import { InMemoryTransport } from '@modelcontextprotocol/sdk/inMemory.js';
+import { registerTools } from '../src/handlers/tools.js';
+import { registerResources } from '../src/handlers/resources.js';
+import dotenv from 'dotenv';
+import path from 'path';
+import fs from 'fs/promises';
+import { CallToolResultSchema } from '@modelcontextprotocol/sdk/types.js';
+
+dotenv.config();
+
+describe('Stitch MCP Server Integration Tests', () => {
+  let mcpServer: McpServer;
+  let client: Client;
+  let clientTransport: InMemoryTransport;
+  let serverTransport: InMemoryTransport;
+
+  beforeAll(async () => {
+    if (!process.env.STITCH_API_KEY) {
+      throw new Error("STITCH_API_KEY is not defined in environment.");
+    }
+
+    mcpServer = new McpServer({
+      name: "Test-Stitch-MCP",
+      version: "1.0.0"
+    });
+
+    registerTools(mcpServer);
+    registerResources(mcpServer);
+
+    // Create linked transports
+    const [t1, t2] = InMemoryTransport.createLinkedPair();
+    clientTransport = t1;
+    serverTransport = t2;
+
+    await mcpServer.connect(serverTransport);
+
+    client = new Client({ name: "test-client", version: "1.0.0" }, { capabilities: {} });
+    await client.connect(clientTransport);
+  });
+
+  afterAll(async () => {
+    await clientTransport.close();
+    await serverTransport.close();
+  });
+
+  it('should list projects without error', async () => {
+    const listResult = await client.listTools();
+    expect(listResult.tools.some(t => t.name === 'list_projects')).toBe(true);
+
+    const result = await client.callTool({
+      name: 'list_projects',
+      arguments: {}
+    });
+
+    expect(result.isError).toBeFalsy();
+    // @ts-ignore
+    expect(result.content[0].type).toBe('text');
+    // @ts-ignore
+    expect(result.content[0].text).toContain('Projects:');
+  });
+
+  it('should create a project', async () => {
+    const result = await client.callTool({
+      name: 'create_project',
+      arguments: { title: 'Test Project via Vitest' }
+    });
+    
+    expect(result.isError).toBeFalsy();
+    // @ts-ignore
+    expect(result.content[0].text).toContain('Project created successfully!');
+  });
+  
+  it('should generate a screen and fetch code (generate_and_fetch_code tool)', async () => {
+    const listResult = await client.callTool({
+      name: 'list_projects',
+      arguments: {}
+    });
+    // @ts-ignore
+    const projectsText = listResult.content[0].text as string;
+    
+    const match = projectsText.match(/- (\d+)/);
+    if (match && match[1]) {
+      const projectId = match[1];
+
+      const result = await client.request(
+        { method: "tools/call", params: { name: 'generate_and_fetch_code', arguments: { projectId: projectId, prompt: "A simple red button centered on the screen", deviceType: "DESKTOP" } } },
+        CallToolResultSchema,
+        { timeout: 120000 }
+      );
+
+      expect(result.isError).toBeFalsy();
+      // @ts-ignore
+      expect(result.content.length).toBeGreaterThan(1);
+      // @ts-ignore
+      const text0 = result.content[0].text || "";
+      // @ts-ignore
+      const text1 = result.content[1].text || "";
+      
+      expect(text0).toContain('Screen generated!');
+      expect(text1).toContain('```html');
+      expect(text1).toContain('</html>');
+    }
+  }, 120000); 
+
+  it('should scaffold project files successfully', async () => {
+    const listResult = await client.callTool({
+      name: 'list_projects',
+      arguments: {}
+    });
+    // @ts-ignore
+    const projectIdMatch = (listResult.content[0].text as string).match(/- (\d+)/);
+    
+    if (projectIdMatch && projectIdMatch[1]) {
+      const projectId = projectIdMatch[1];
+      
+      const genResult = await client.request(
+        { method: "tools/call", params: { name: 'generate_screen', arguments: { projectId: projectId, prompt: "A test heading for scaffolding", deviceType: "MOBILE" } } },
+        CallToolResultSchema,
+        { timeout: 120000 }
+      );
+
+      // @ts-ignore
+      const screenIdMatch = (genResult.content[0].text as string).match(/Screen ID: ([a-zA-Z0-9]+)/);
+      if (screenIdMatch && screenIdMatch[1]) {
+        const screenId = screenIdMatch[1];
+        
+        const filePath = 'tests/fixtures/test-scaffold.html';
+        
+        const scaffoldResult = await client.request(
+          { method: "tools/call", params: { name: 'scaffold_project_files', arguments: { projectId: projectId, screenId: screenId, filePath: filePath } } },
+          CallToolResultSchema,
+          { timeout: 120000 }
+        );
+
+        expect(scaffoldResult.isError).toBeFalsy();
+        
+        const resolvedPath = path.resolve(process.cwd(), filePath);
+        const fileStat = await fs.stat(resolvedPath);
+        expect(fileStat.isFile()).toBe(true);
+        
+        const content = await fs.readFile(resolvedPath, 'utf8');
+        expect(content).toContain('<!DOCTYPE html');
+      }
+    }
+  }, 120000);
+});

package/tsconfig.json

@@ -0,0 +1,16 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "module": "NodeNext",
+    "moduleResolution": "NodeNext",
+    "lib": ["ES2022"],
+    "outDir": "./dist",
+    "rootDir": "./src",
+    "strict": true,
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "forceConsistentCasingInFileNames": true,
+    "declaration": true
+  },
+  "include": ["src/**/*"]
+}

package/tsup.config.ts

@@ -0,0 +1,10 @@
+import { defineConfig } from 'tsup';
+
+export default defineConfig({
+  entry: ['src/index.ts', 'src/cli.ts'],
+  format: ['esm'],
+  dts: true,
+  clean: true,
+  minify: true,
+  sourcemap: true,
+});