feat: add @modelcontextprotocol/create-mcp-app package

.github/workflows/npm-publish.yml

@@ -137,3 +137,36 @@ jobs:
         run: npm publish --workspace examples/${{ matrix.example }} --provenance --access public
         env:
           NODE_AUTH_TOKEN: ${{ secrets.NPM_SECRET }}
+
+  publish-packages:
+    runs-on: ubuntu-latest
+    if: github.event_name == 'release'
+    environment: Release
+    needs: [publish]
+
+    permissions:
+      contents: read
+      id-token: write
+
+    strategy:
+      fail-fast: false
+      matrix:
+        package:
+          - create-mcp-app
+
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version: "22"
+          cache: npm
+          registry-url: "https://registry.npmjs.org"
+      - run: npm ci
+
+      - name: Build package
+        run: npm run build --workspace packages/${{ matrix.package }}
+
+      - name: Publish package
+        run: npm publish --workspace packages/${{ matrix.package }} --provenance --access public
+        env:
+          NODE_AUTH_TOKEN: ${{ secrets.NPM_SECRET }}

README.md

@@ -38,6 +38,18 @@ There's no _supported_ host implementation in this repo (beyond the [examples/ba
 
 We have [contributed a tentative implementation](https://github.com/MCP-UI-Org/mcp-ui/pull/147) of hosting / iframing / sandboxing logic to the [MCP-UI](https://github.com/idosal/mcp-ui) repository, and expect OSS clients may use it, while other clients might roll their own hosting logic.
 
+## Quick Start
+
+Create a new MCP App project in seconds:
+
+```bash
+npm create @modelcontextprotocol/mcp-app my-app
+cd my-app
+npm run dev
+```
+
+Choose from React or Vanilla JS templates. See the [create-mcp-app README](packages/create-mcp-app/README.md) for all options.
+
 ## Installation
 
 ```bash

docs/quickstart.md

@@ -21,6 +21,9 @@ We'll use the [MCP TypeScript SDK](https://github.com/modelcontextprotocol/types
 
 You'll also need Node.js 18+.
 
+> [!TIP]
+> **Want to skip the setup?** Run `npm create @modelcontextprotocol/mcp-app my-app` to scaffold this project automatically, then skip to [Section 3: Build the View](#3-build-the-view).
+
 ## 1. Set up the project
 
 We'll set up a minimal TypeScript project with Vite for bundling.

package.json

@@ -41,7 +41,8 @@
     "dist"
   ],
   "workspaces": [
-    "examples/*"
+    "examples/*",
+    "packages/*"
   ],
   "scripts": {
     "postinstall": "node scripts/setup-bun.mjs || echo 'setup-bun.mjs failed or not available'",

packages/create-mcp-app/README.md

@@ -0,0 +1,54 @@
+# @modelcontextprotocol/create-mcp-app
+
+Scaffold new MCP App projects with one command.
+
+## Usage
+
+```bash
+# Interactive mode
+npm create @modelcontextprotocol/mcp-app
+
+# With project name
+npm create @modelcontextprotocol/mcp-app my-app
+
+# With template
+npm create @modelcontextprotocol/mcp-app my-app --template react
+
+# Skip npm install
+npm create @modelcontextprotocol/mcp-app my-app --no-install
+```
+
+## Templates
+
+- **react** - React + Vite + TypeScript
+- **vanillajs** - Vanilla JavaScript + Vite + TypeScript
+
+## What's Included
+
+Each generated project includes:
+
+- MCP server with a sample `get-time` tool
+- Interactive UI that communicates with the host
+- Vite build configuration for bundling the UI
+- TypeScript configuration
+- Development server with hot reload
+
+## Getting Started
+
+After creating your project:
+
+```bash
+cd my-app
+npm install  # if you used --no-install
+npm run dev
+```
+
+Then test with the basic-host:
+
+```bash
+SERVERS='["http://localhost:3001/mcp"]' npx @modelcontextprotocol/basic-host
+```
+
+## License
+
+MIT