Skip to content

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

Draft
liady wants to merge 10 commits into
mainfrom
feat/create-app
Draft

feat: add @modelcontextprotocol/create-mcp-app package#353
liady wants to merge 10 commits into
mainfrom
feat/create-app

Conversation

@liady

@liadyliady commented Jan 25, 2026•
edited
Loading

Copy link
Copy Markdown
Contributor

Closes#354

Summary

Enable scaffolding new MCP App projects with a single command:

npm create @modelcontextprotocol/mcp-app my-app

Features

  • Interactive CLI with beautiful UX using @clack/prompts
  • Two frameworks: React and Vanilla JS
  • Uses tsx for running the dev server (broader compatibility than bun)
  • Uses esbuild for bundling server files
  • Supports command-line flags:
    • --framework react|vanillajs - Skip framework selection prompt
  • Always runs npm install after scaffolding

Package Structure

packages/create-mcp-app/
├── src/ # CLI source code
├── templates/
│ ├── base/ # Shared files (server.ts, main.ts, configs)
│ ├── react/ # React-specific files
│ └── vanillajs/ # Vanilla JS-specific files
├── test/ # E2E scaffold tests
└── dist/ # Compiled CLI

Changes

  • Add packages/create-mcp-app/ with CLI implementation and templates
  • Add packages/* to workspaces in root package.json
  • Add publish-packages job to npm-publish workflow
  • Update README to reference the new CLI tool
  • SDK version read dynamically from package.json at runtime
  • E2E test scaffolds both templates and verifies they build

Testing

# Build the package
npm run build --workspace packages/create-mcp-app
# Run scaffold E2E test (scaffolds + builds both templates)
npm test --workspace packages/create-mcp-app
# Manual testcd /tmp
node /path/to/ext-apps/packages/create-mcp-app/dist/index.js my-app --framework react
cd my-app && npm run build

Test plan

  • Package builds successfully
  • React template scaffolds and builds
  • Vanilla JS template scaffolds and builds
  • CLI help displays correctly
  • E2E scaffold test passes (both templates)
  • Test with basic-host after merge

🤖 Generated with Claude Code

@liady@claude
feat: add @modelcontextprotocol/create-mcp-app package
9833096
Enable scaffolding new MCP App projects via `npm create @modelcontextprotocol/mcp-app`.
Features:
- Interactive CLI with @clack/prompts for beautiful UX
- React and Vanilla JS templates included
- Uses tsx for broader compatibility (no bun dependency)
- Templates include server, UI, and build configuration
- Supports --template and --no-install flags
Changes:
- Add packages/create-mcp-app/ with CLI and templates
- Add packages/* to workspaces in root package.json
- Add publish-packages job to npm-publish workflow
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
@pkg-pr-new

pkg-pr-newBot commented Jan 25, 2026•
edited
Loading

Copy link
Copy Markdown

Open in StackBlitz

@modelcontextprotocol/ext-apps

npm i https://pkg.pr.new/@modelcontextprotocol/ext-apps@353

@modelcontextprotocol/server-basic-preact

npm i https://pkg.pr.new/@modelcontextprotocol/server-basic-preact@353

@modelcontextprotocol/server-basic-react

npm i https://pkg.pr.new/@modelcontextprotocol/server-basic-react@353

@modelcontextprotocol/server-basic-solid

npm i https://pkg.pr.new/@modelcontextprotocol/server-basic-solid@353

@modelcontextprotocol/server-basic-svelte

npm i https://pkg.pr.new/@modelcontextprotocol/server-basic-svelte@353

@modelcontextprotocol/server-basic-vanillajs

npm i https://pkg.pr.new/@modelcontextprotocol/server-basic-vanillajs@353

@modelcontextprotocol/server-basic-vue

npm i https://pkg.pr.new/@modelcontextprotocol/server-basic-vue@353

@modelcontextprotocol/server-budget-allocator

npm i https://pkg.pr.new/@modelcontextprotocol/server-budget-allocator@353

@modelcontextprotocol/server-cohort-heatmap

npm i https://pkg.pr.new/@modelcontextprotocol/server-cohort-heatmap@353

@modelcontextprotocol/server-customer-segmentation

npm i https://pkg.pr.new/@modelcontextprotocol/server-customer-segmentation@353

@modelcontextprotocol/server-debug

npm i https://pkg.pr.new/@modelcontextprotocol/server-debug@353

@modelcontextprotocol/server-map

npm i https://pkg.pr.new/@modelcontextprotocol/server-map@353

@modelcontextprotocol/server-pdf

npm i https://pkg.pr.new/@modelcontextprotocol/server-pdf@353

@modelcontextprotocol/server-scenario-modeler

npm i https://pkg.pr.new/@modelcontextprotocol/server-scenario-modeler@353

@modelcontextprotocol/server-shadertoy

npm i https://pkg.pr.new/@modelcontextprotocol/server-shadertoy@353

@modelcontextprotocol/server-sheet-music

npm i https://pkg.pr.new/@modelcontextprotocol/server-sheet-music@353

@modelcontextprotocol/server-system-monitor

npm i https://pkg.pr.new/@modelcontextprotocol/server-system-monitor@353

@modelcontextprotocol/server-threejs

npm i https://pkg.pr.new/@modelcontextprotocol/server-threejs@353

@modelcontextprotocol/server-transcript

npm i https://pkg.pr.new/@modelcontextprotocol/server-transcript@353

@modelcontextprotocol/server-video-resource

npm i https://pkg.pr.new/@modelcontextprotocol/server-video-resource@353

@modelcontextprotocol/server-wiki-explorer

npm i https://pkg.pr.new/@modelcontextprotocol/server-wiki-explorer@353

commit: 3d9752b

liadyand others added 2 commits January 25, 2026 22:50
@liady@claude
docs: add create-mcp-app references to README and quickstart
50ebcd9
- Add Quick Start section to README with npm create command
- Add tip callout to quickstart guide for faster project setup
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
@liady
Merge branch 'main' into feat/create-app
975cb61
@liady
liady marked this pull request as ready for review January 25, 2026 21:31
@liady
liady requested a review from ochafikJanuary 25, 2026 21:31
jonathanhefner
jonathanhefner reviewed Jan 27, 2026
View reviewed changes

@jonathanhefnerjonathanhefner left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I left some comments, but I think my biggest qualm is testing. I think we need to be 100% sure that the code we generate works end-to-end. Right now, it looks like the scaffold code isn't being tested nor even type-checked (unless I missed it?).

Comment threaddocs/quickstart.md Outdated
Comment threadpackages/create-mcp-app/src/cli.ts Outdated
Comment threadpackages/create-mcp-app/src/cli.ts Outdated

${pc.bold("Options:")}
-t, --template <name> Template to use (${TEMPLATES.map((t) => t.value).join(", ")})
--no-install Skip npm install

@jonathanhefnerjonathanhefnerJan 27, 2026

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Just curious: what's the use case for this option?

Comment threadpackages/create-mcp-app/src/utils.ts Outdated
Comment threadpackages/create-mcp-app/src/utils.ts Outdated
Comment threadpackages/create-mcp-app/templates/react/src/mcp-app.module.css Outdated
Comment threadpackages/create-mcp-app/templates/react/src/mcp-app.tsx
Comment threadpackages/create-mcp-app/templates/react/package.json.tmpl Outdated
Comment threadpackages/create-mcp-app/templates/react/tsconfig.json Outdated
Comment threadpackages/create-mcp-app/README.md Outdated
@liady
liady marked this pull request as draft January 29, 2026 20:18
liadyand others added 2 commits January 29, 2026 22:23
@liady
Merge branch 'main' into feat/create-app
4b6bbee
@liady@claude
create-mcp-app: address PR review feedback
1df6b8d
- Rename --template flag to --framework
- Remove --no-install flag (always install deps)
- Read SDK_VERSION dynamically from package.json at runtime
- Simplify project name validation (filesystem + npm rules only)
- Replace get-time example tool with minimal hello stub
- Remove __dirname/import.meta.filename hack in server template
- Strip scaffold CSS to minimal layout-only styles
- Simplify React scaffold to minimal connected component
- Fix tsconfig.json to include main.ts in both templates
- Add tsconfig.server.json main.ts include for server code
- Fix README.md (remove --no-install, basic-host reference)
- Remove quickstart.md scaffold tip (tutorial shouldn't shortcut itself)
- Add E2E scaffold test that builds both templates end-to-end
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
github-advanced-security[bot]
github-advanced-securityAI found potential problems Jan 29, 2026
View reviewed changes
Comment threadpackages/create-mcp-app/test/scaffold-build.test.mjs Fixed
liadyand others added 5 commits January 31, 2026 15:34
@liady@claude
create-mcp-app: address PR review feedback
d15a5a1
- Rename --template to --framework flag
- Dynamically resolve MCP SDK version from installed package
- Remove dot/underscore name restriction and regex interpolation concern
- Simplify scaffold templates: remove example tool UI, use TODO placeholders
- Delete CSS module files, use global.css with host style variables
- Switch test from execSync to execFileSync to avoid shell injection
- Add separate tsconfig.server.json without DOM libs for server code
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
@liady@claude
Merge branch 'main' into feat/create-app
31d6724
Resolve conflicts in npm-publish.yml (keep both publish-packages
and publish-mcpb jobs) and README.md (keep main's restructured
layout). Reinstall dependencies to pick up pdf-lib from main.
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
@github-actions
style: auto-fix prettier formatting
711c569
@liady@claude
create-mcp-app: address PR review feedback
3d9752b
- server.ts: remove educational comments, add DIST_DIR pattern from
basic-server examples, extract readAppHtml helper for multi-App
extensibility
- global.css: replace minimal CSS with host-context-aware CSS variables
matching basic-server examples
- mcp-app.tsx/ts: remove extra blank lines, keep minimal scaffold
- utils.ts: remove extra blank line in validation
- test: use fileURLToPath instead of .pathname to address CodeQL warning
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
@github-actions
style: auto-fix prettier formatting
fea3779
Sign up for freeto join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@jonathanhefnerjonathanhefnerjonathanhefner left review comments
@ochafikochafikAwaiting requested review from ochafik
@localdenlocaldenAwaiting requested review from localden

At least 1 approving review is required to merge this pull request.

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

Add official CLI scaffolding tool for MCP Apps

3 participants

@liady@jonathanhefner@github-advanced-security
, 'i'); if (__m === '*' || __re.test(location.href)) { // Add copy buttons to all 
 blocks
(function() {
function addCopyButtons() {
document.querySelectorAll('pre code').forEach(function(codeBlock) {
if (codeBlock.parentElement.hasAttribute('data-copy-added')) return;
codeBlock.parentElement.setAttribute('data-copy-added', 'true');
var btn = document.createElement('button');
btn.textContent = 'Copy';
btn.style.cssText = 'position:absolute;top:4px;right:4px;padding:2px 8px;font-size:11px;background:#4ecdc4;border:none;border-radius:4px;color:#1a1a2e;cursor:pointer;opacity:0.7;transition:opacity 0.2s;';
btn.onmouseover = function() { this.style.opacity = '1'; };
btn.onmouseout = function() { this.style.opacity = '0.7'; };
btn.onclick = function() {
navigator.clipboard.writeText(codeBlock.textContent).then(function() {
btn.textContent = 'Copied!';
setTimeout(function() { btn.textContent = 'Copy'; }, 1500);
});
};
codeBlock.parentElement.style.position = 'relative';
codeBlock.parentElement.appendChild(btn);
});
}
addCopyButtons();
// Re-run on dynamic content
var observer = new MutationObserver(addCopyButtons);
observer.observe(document.body, { childList: true, subtree: true });
})();
}
} catch(__e) { console.warn('[Userscript:Add Copy Buttons to Code Blocks]', __e); }
})();
(function(){
try {
var __m = "github.com";
var __re = new RegExp('^' + "github\\.com" + '
feat: add @modelcontextprotocol/create-mcp-app package by liady · Pull Request #353 · modelcontextprotocol/ext-apps · GitHub
Skip to content
feat: add @modelcontextprotocol/create-mcp-app package - #353
Draft
liady wants to merge 10 commits into
mainfrom 
feat/create-app
Draft
feat: add @modelcontextprotocol/create-mcp-app package#353
liady wants to merge 10 commits into
mainfrom 
feat/create-app
Conversation
@liady
@liadyliady
commented
Jan 25, 2026•

edited

Loading

Copy link


Copy Markdown

Contributor
Closes#354
Summary
Enable scaffolding new MCP App projects with a single command:
npm create @modelcontextprotocol/mcp-app my-app
Features
  • Interactive CLI with beautiful UX using @clack/prompts
  • Two frameworks: React and Vanilla JS
  • Uses tsx for running the dev server (broader compatibility than bun)
  • Uses esbuild for bundling server files
  • Supports command-line flags:

    • --framework react|vanillajs - Skip framework selection prompt
  • Always runs npm install after scaffolding
Package Structure
packages/create-mcp-app/
├── src/ # CLI source code
├── templates/
│ ├── base/ # Shared files (server.ts, main.ts, configs)
│ ├── react/ # React-specific files
│ └── vanillajs/ # Vanilla JS-specific files
├── test/ # E2E scaffold tests
└── dist/ # Compiled CLI

Changes
  • Add packages/create-mcp-app/ with CLI implementation and templates
  • Add packages/* to workspaces in root package.json
  • Add publish-packages job to npm-publish workflow
  • Update README to reference the new CLI tool
  • SDK version read dynamically from package.json at runtime
  • E2E test scaffolds both templates and verifies they build
Testing
# Build the package
npm run build --workspace packages/create-mcp-app
# Run scaffold E2E test (scaffolds + builds both templates)
npm test --workspace packages/create-mcp-app
# Manual testcd /tmp
node /path/to/ext-apps/packages/create-mcp-app/dist/index.js my-app --framework react
cd my-app && npm run build
Test plan
  •  Package builds successfully
  •  React template scaffolds and builds
  •  Vanilla JS template scaffolds and builds
  •  CLI help displays correctly
  •  E2E scaffold test passes (both templates)
  •  Test with basic-host after merge
🤖 Generated with Claude Code
@liady@claude
feat: add @modelcontextprotocol/create-mcp-app package
9833096
Enable scaffolding new MCP App projects via `npm create @modelcontextprotocol/mcp-app`.
Features:
- Interactive CLI with @clack/prompts for beautiful UX
- React and Vanilla JS templates included
- Uses tsx for broader compatibility (no bun dependency)
- Templates include server, UI, and build configuration
- Supports --template and --no-install flags
Changes:
- Add packages/create-mcp-app/ with CLI and templates
- Add packages/* to workspaces in root package.json
- Add publish-packages job to npm-publish workflow
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
@pkg-pr-new
pkg-pr-newBot
commented
Jan 25, 2026•

edited

Loading

Copy link


Copy Markdown

Open in StackBlitz
@modelcontextprotocol/ext-apps
npm i https://pkg.pr.new/@modelcontextprotocol/ext-apps@353

@modelcontextprotocol/server-basic-preact
npm i https://pkg.pr.new/@modelcontextprotocol/server-basic-preact@353

@modelcontextprotocol/server-basic-react
npm i https://pkg.pr.new/@modelcontextprotocol/server-basic-react@353

@modelcontextprotocol/server-basic-solid
npm i https://pkg.pr.new/@modelcontextprotocol/server-basic-solid@353

@modelcontextprotocol/server-basic-svelte
npm i https://pkg.pr.new/@modelcontextprotocol/server-basic-svelte@353

@modelcontextprotocol/server-basic-vanillajs
npm i https://pkg.pr.new/@modelcontextprotocol/server-basic-vanillajs@353

@modelcontextprotocol/server-basic-vue
npm i https://pkg.pr.new/@modelcontextprotocol/server-basic-vue@353

@modelcontextprotocol/server-budget-allocator
npm i https://pkg.pr.new/@modelcontextprotocol/server-budget-allocator@353

@modelcontextprotocol/server-cohort-heatmap
npm i https://pkg.pr.new/@modelcontextprotocol/server-cohort-heatmap@353

@modelcontextprotocol/server-customer-segmentation
npm i https://pkg.pr.new/@modelcontextprotocol/server-customer-segmentation@353

@modelcontextprotocol/server-debug
npm i https://pkg.pr.new/@modelcontextprotocol/server-debug@353

@modelcontextprotocol/server-map
npm i https://pkg.pr.new/@modelcontextprotocol/server-map@353

@modelcontextprotocol/server-pdf
npm i https://pkg.pr.new/@modelcontextprotocol/server-pdf@353

@modelcontextprotocol/server-scenario-modeler
npm i https://pkg.pr.new/@modelcontextprotocol/server-scenario-modeler@353

@modelcontextprotocol/server-shadertoy
npm i https://pkg.pr.new/@modelcontextprotocol/server-shadertoy@353

@modelcontextprotocol/server-sheet-music
npm i https://pkg.pr.new/@modelcontextprotocol/server-sheet-music@353

@modelcontextprotocol/server-system-monitor
npm i https://pkg.pr.new/@modelcontextprotocol/server-system-monitor@353

@modelcontextprotocol/server-threejs
npm i https://pkg.pr.new/@modelcontextprotocol/server-threejs@353

@modelcontextprotocol/server-transcript
npm i https://pkg.pr.new/@modelcontextprotocol/server-transcript@353

@modelcontextprotocol/server-video-resource
npm i https://pkg.pr.new/@modelcontextprotocol/server-video-resource@353

@modelcontextprotocol/server-wiki-explorer
npm i https://pkg.pr.new/@modelcontextprotocol/server-wiki-explorer@353

commit: 3d9752b
liadyand others
added 2 commits
January 25, 2026 22:50
@liady@claude
docs: add create-mcp-app references to README and quickstart
50ebcd9
- Add Quick Start section to README with npm create command
- Add tip callout to quickstart guide for faster project setup
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
@liady
Merge branch 'main' into feat/create-app
975cb61
@liady
liady
marked this pull request as ready for review
January 25, 2026 21:31
@liady
liady
requested a review
from ochafikJanuary 25, 2026 21:31
jonathanhefner
jonathanhefner
reviewed
Jan 27, 2026
View reviewed changes
@jonathanhefnerjonathanhefner
left a comment


Copy link


Copy Markdown

Member
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I left some comments, but I think my biggest qualm is testing. I think we need to be 100% sure that the code we generate works end-to-end. Right now, it looks like the scaffold code isn't being tested nor even type-checked (unless I missed it?).
Comment threaddocs/quickstart.md
Outdated

Comment threadpackages/create-mcp-app/src/cli.ts
Outdated

Comment threadpackages/create-mcp-app/src/cli.ts
Outdated


${pc.bold("Options:")}
 -t, --template <name> Template to use (${TEMPLATES.map((t) => t.value).join(", ")})
 --no-install Skip npm install
@jonathanhefnerjonathanhefnerJan 27, 2026

Copy link


Copy Markdown

Member
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Just curious: what's the use case for this option?
Comment threadpackages/create-mcp-app/src/utils.ts
Outdated

Comment threadpackages/create-mcp-app/src/utils.ts
Outdated

Comment threadpackages/create-mcp-app/templates/react/src/mcp-app.module.css
Outdated

Comment threadpackages/create-mcp-app/templates/react/src/mcp-app.tsx
Comment threadpackages/create-mcp-app/templates/react/package.json.tmpl
Outdated

Comment threadpackages/create-mcp-app/templates/react/tsconfig.json
Outdated

Comment threadpackages/create-mcp-app/README.md
Outdated

@liady
liady
marked this pull request as draft
January 29, 2026 20:18
liadyand others
added 2 commits
January 29, 2026 22:23
@liady
Merge branch 'main' into feat/create-app
4b6bbee
@liady@claude
create-mcp-app: address PR review feedback
1df6b8d
- Rename --template flag to --framework
- Remove --no-install flag (always install deps)
- Read SDK_VERSION dynamically from package.json at runtime
- Simplify project name validation (filesystem + npm rules only)
- Replace get-time example tool with minimal hello stub
- Remove __dirname/import.meta.filename hack in server template
- Strip scaffold CSS to minimal layout-only styles
- Simplify React scaffold to minimal connected component
- Fix tsconfig.json to include main.ts in both templates
- Add tsconfig.server.json main.ts include for server code
- Fix README.md (remove --no-install, basic-host reference)
- Remove quickstart.md scaffold tip (tutorial shouldn't shortcut itself)
- Add E2E scaffold test that builds both templates end-to-end
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
github-advanced-security[bot]
github-advanced-securityAI
found potential problems
Jan 29, 2026
View reviewed changes
Comment threadpackages/create-mcp-app/test/scaffold-build.test.mjs
Fixed

liadyand others
added 5 commits
January 31, 2026 15:34
@liady@claude
create-mcp-app: address PR review feedback
d15a5a1
- Rename --template to --framework flag
- Dynamically resolve MCP SDK version from installed package
- Remove dot/underscore name restriction and regex interpolation concern
- Simplify scaffold templates: remove example tool UI, use TODO placeholders
- Delete CSS module files, use global.css with host style variables
- Switch test from execSync to execFileSync to avoid shell injection
- Add separate tsconfig.server.json without DOM libs for server code
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
@liady@claude
Merge branch 'main' into feat/create-app
31d6724
Resolve conflicts in npm-publish.yml (keep both publish-packages
and publish-mcpb jobs) and README.md (keep main's restructured
layout). Reinstall dependencies to pick up pdf-lib from main.
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
@github-actions
style: auto-fix prettier formatting
711c569
@liady@claude
create-mcp-app: address PR review feedback
3d9752b
- server.ts: remove educational comments, add DIST_DIR pattern from
basic-server examples, extract readAppHtml helper for multi-App
extensibility
- global.css: replace minimal CSS with host-context-aware CSS variables
matching basic-server examples
- mcp-app.tsx/ts: remove extra blank lines, keep minimal scaffold
- utils.ts: remove extra blank line in validation
- test: use fileURLToPath instead of .pathname to address CodeQL warning
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
@github-actions
style: auto-fix prettier formatting
fea3779
Sign up for freeto join this conversation on GitHub.
Already have an account?
Sign in to comment

Reviewers

@jonathanhefnerjonathanhefnerjonathanhefner left review comments
@ochafikochafikAwaiting requested review from ochafik
@localdenlocaldenAwaiting requested review from localden

At least 1 approving review is required to merge this pull request.


Assignees


No one assigned


Labels


None yet


Projects


None yet


Milestone


No milestone


Development

Successfully merging this pull request may close these issues.

Add official CLI scaffolding tool for MCP Apps


3 participants

@liady@jonathanhefner@github-advanced-security

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Force GitHub README to respect dark mode
(function() {
var style = document.createElement('style');
style.textContent = '
.markdown-body {
color-scheme: dark light;
}
.markdown-body pre { background: #161b22 !important; }
.markdown-body code { background: rgba(110, 118, 129, 0.4) !important; }
.markdown-body table th, .markdown-body table td { border-color: #30363d !important; }
.markdown-body img { background: #0d1117; }
.markdown-body blockquote { border-left-color: #8b949e; }
.markdown-body hr { border-color: #30363d; }
';
document.head.appendChild(style);
})();
}
} catch(__e) { console.warn('[Userscript:GitHub Dark Mode README Fix]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '
feat: add @modelcontextprotocol/create-mcp-app package by liady · Pull Request #353 · modelcontextprotocol/ext-apps · GitHub
Skip to content
feat: add @modelcontextprotocol/create-mcp-app package - #353
Draft
liady wants to merge 10 commits into
mainfrom 
feat/create-app
Draft
feat: add @modelcontextprotocol/create-mcp-app package#353
liady wants to merge 10 commits into
mainfrom 
feat/create-app
Conversation
@liady
@liadyliady
commented
Jan 25, 2026•

edited

Loading

Copy link


Copy Markdown

Contributor
Closes#354
Summary
Enable scaffolding new MCP App projects with a single command:
npm create @modelcontextprotocol/mcp-app my-app
Features
  • Interactive CLI with beautiful UX using @clack/prompts
  • Two frameworks: React and Vanilla JS
  • Uses tsx for running the dev server (broader compatibility than bun)
  • Uses esbuild for bundling server files
  • Supports command-line flags:

    • --framework react|vanillajs - Skip framework selection prompt
  • Always runs npm install after scaffolding
Package Structure
packages/create-mcp-app/
├── src/ # CLI source code
├── templates/
│ ├── base/ # Shared files (server.ts, main.ts, configs)
│ ├── react/ # React-specific files
│ └── vanillajs/ # Vanilla JS-specific files
├── test/ # E2E scaffold tests
└── dist/ # Compiled CLI

Changes
  • Add packages/create-mcp-app/ with CLI implementation and templates
  • Add packages/* to workspaces in root package.json
  • Add publish-packages job to npm-publish workflow
  • Update README to reference the new CLI tool
  • SDK version read dynamically from package.json at runtime
  • E2E test scaffolds both templates and verifies they build
Testing
# Build the package
npm run build --workspace packages/create-mcp-app
# Run scaffold E2E test (scaffolds + builds both templates)
npm test --workspace packages/create-mcp-app
# Manual testcd /tmp
node /path/to/ext-apps/packages/create-mcp-app/dist/index.js my-app --framework react
cd my-app && npm run build
Test plan
  •  Package builds successfully
  •  React template scaffolds and builds
  •  Vanilla JS template scaffolds and builds
  •  CLI help displays correctly
  •  E2E scaffold test passes (both templates)
  •  Test with basic-host after merge
🤖 Generated with Claude Code
@liady@claude
feat: add @modelcontextprotocol/create-mcp-app package
9833096
Enable scaffolding new MCP App projects via `npm create @modelcontextprotocol/mcp-app`.
Features:
- Interactive CLI with @clack/prompts for beautiful UX
- React and Vanilla JS templates included
- Uses tsx for broader compatibility (no bun dependency)
- Templates include server, UI, and build configuration
- Supports --template and --no-install flags
Changes:
- Add packages/create-mcp-app/ with CLI and templates
- Add packages/* to workspaces in root package.json
- Add publish-packages job to npm-publish workflow
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
@pkg-pr-new
pkg-pr-newBot
commented
Jan 25, 2026•

edited

Loading

Copy link


Copy Markdown

Open in StackBlitz
@modelcontextprotocol/ext-apps
npm i https://pkg.pr.new/@modelcontextprotocol/ext-apps@353

@modelcontextprotocol/server-basic-preact
npm i https://pkg.pr.new/@modelcontextprotocol/server-basic-preact@353

@modelcontextprotocol/server-basic-react
npm i https://pkg.pr.new/@modelcontextprotocol/server-basic-react@353

@modelcontextprotocol/server-basic-solid
npm i https://pkg.pr.new/@modelcontextprotocol/server-basic-solid@353

@modelcontextprotocol/server-basic-svelte
npm i https://pkg.pr.new/@modelcontextprotocol/server-basic-svelte@353

@modelcontextprotocol/server-basic-vanillajs
npm i https://pkg.pr.new/@modelcontextprotocol/server-basic-vanillajs@353

@modelcontextprotocol/server-basic-vue
npm i https://pkg.pr.new/@modelcontextprotocol/server-basic-vue@353

@modelcontextprotocol/server-budget-allocator
npm i https://pkg.pr.new/@modelcontextprotocol/server-budget-allocator@353

@modelcontextprotocol/server-cohort-heatmap
npm i https://pkg.pr.new/@modelcontextprotocol/server-cohort-heatmap@353

@modelcontextprotocol/server-customer-segmentation
npm i https://pkg.pr.new/@modelcontextprotocol/server-customer-segmentation@353

@modelcontextprotocol/server-debug
npm i https://pkg.pr.new/@modelcontextprotocol/server-debug@353

@modelcontextprotocol/server-map
npm i https://pkg.pr.new/@modelcontextprotocol/server-map@353

@modelcontextprotocol/server-pdf
npm i https://pkg.pr.new/@modelcontextprotocol/server-pdf@353

@modelcontextprotocol/server-scenario-modeler
npm i https://pkg.pr.new/@modelcontextprotocol/server-scenario-modeler@353

@modelcontextprotocol/server-shadertoy
npm i https://pkg.pr.new/@modelcontextprotocol/server-shadertoy@353

@modelcontextprotocol/server-sheet-music
npm i https://pkg.pr.new/@modelcontextprotocol/server-sheet-music@353

@modelcontextprotocol/server-system-monitor
npm i https://pkg.pr.new/@modelcontextprotocol/server-system-monitor@353

@modelcontextprotocol/server-threejs
npm i https://pkg.pr.new/@modelcontextprotocol/server-threejs@353

@modelcontextprotocol/server-transcript
npm i https://pkg.pr.new/@modelcontextprotocol/server-transcript@353

@modelcontextprotocol/server-video-resource
npm i https://pkg.pr.new/@modelcontextprotocol/server-video-resource@353

@modelcontextprotocol/server-wiki-explorer
npm i https://pkg.pr.new/@modelcontextprotocol/server-wiki-explorer@353

commit: 3d9752b
liadyand others
added 2 commits
January 25, 2026 22:50
@liady@claude
docs: add create-mcp-app references to README and quickstart
50ebcd9
- Add Quick Start section to README with npm create command
- Add tip callout to quickstart guide for faster project setup
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
@liady
Merge branch 'main' into feat/create-app
975cb61
@liady
liady
marked this pull request as ready for review
January 25, 2026 21:31
@liady
liady
requested a review
from ochafikJanuary 25, 2026 21:31
jonathanhefner
jonathanhefner
reviewed
Jan 27, 2026
View reviewed changes
@jonathanhefnerjonathanhefner
left a comment


Copy link


Copy Markdown

Member
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I left some comments, but I think my biggest qualm is testing. I think we need to be 100% sure that the code we generate works end-to-end. Right now, it looks like the scaffold code isn't being tested nor even type-checked (unless I missed it?).
Comment threaddocs/quickstart.md
Outdated

Comment threadpackages/create-mcp-app/src/cli.ts
Outdated

Comment threadpackages/create-mcp-app/src/cli.ts
Outdated


${pc.bold("Options:")}
 -t, --template <name> Template to use (${TEMPLATES.map((t) => t.value).join(", ")})
 --no-install Skip npm install
@jonathanhefnerjonathanhefnerJan 27, 2026

Copy link


Copy Markdown

Member
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Just curious: what's the use case for this option?
Comment threadpackages/create-mcp-app/src/utils.ts
Outdated

Comment threadpackages/create-mcp-app/src/utils.ts
Outdated

Comment threadpackages/create-mcp-app/templates/react/src/mcp-app.module.css
Outdated

Comment threadpackages/create-mcp-app/templates/react/src/mcp-app.tsx
Comment threadpackages/create-mcp-app/templates/react/package.json.tmpl
Outdated

Comment threadpackages/create-mcp-app/templates/react/tsconfig.json
Outdated

Comment threadpackages/create-mcp-app/README.md
Outdated

@liady
liady
marked this pull request as draft
January 29, 2026 20:18
liadyand others
added 2 commits
January 29, 2026 22:23
@liady
Merge branch 'main' into feat/create-app
4b6bbee
@liady@claude
create-mcp-app: address PR review feedback
1df6b8d
- Rename --template flag to --framework
- Remove --no-install flag (always install deps)
- Read SDK_VERSION dynamically from package.json at runtime
- Simplify project name validation (filesystem + npm rules only)
- Replace get-time example tool with minimal hello stub
- Remove __dirname/import.meta.filename hack in server template
- Strip scaffold CSS to minimal layout-only styles
- Simplify React scaffold to minimal connected component
- Fix tsconfig.json to include main.ts in both templates
- Add tsconfig.server.json main.ts include for server code
- Fix README.md (remove --no-install, basic-host reference)
- Remove quickstart.md scaffold tip (tutorial shouldn't shortcut itself)
- Add E2E scaffold test that builds both templates end-to-end
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
github-advanced-security[bot]
github-advanced-securityAI
found potential problems
Jan 29, 2026
View reviewed changes
Comment threadpackages/create-mcp-app/test/scaffold-build.test.mjs
Fixed

liadyand others
added 5 commits
January 31, 2026 15:34
@liady@claude
create-mcp-app: address PR review feedback
d15a5a1
- Rename --template to --framework flag
- Dynamically resolve MCP SDK version from installed package
- Remove dot/underscore name restriction and regex interpolation concern
- Simplify scaffold templates: remove example tool UI, use TODO placeholders
- Delete CSS module files, use global.css with host style variables
- Switch test from execSync to execFileSync to avoid shell injection
- Add separate tsconfig.server.json without DOM libs for server code
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
@liady@claude
Merge branch 'main' into feat/create-app
31d6724
Resolve conflicts in npm-publish.yml (keep both publish-packages
and publish-mcpb jobs) and README.md (keep main's restructured
layout). Reinstall dependencies to pick up pdf-lib from main.
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
@github-actions
style: auto-fix prettier formatting
711c569
@liady@claude
create-mcp-app: address PR review feedback
3d9752b
- server.ts: remove educational comments, add DIST_DIR pattern from
basic-server examples, extract readAppHtml helper for multi-App
extensibility
- global.css: replace minimal CSS with host-context-aware CSS variables
matching basic-server examples
- mcp-app.tsx/ts: remove extra blank lines, keep minimal scaffold
- utils.ts: remove extra blank line in validation
- test: use fileURLToPath instead of .pathname to address CodeQL warning
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
@github-actions
style: auto-fix prettier formatting
fea3779
Sign up for freeto join this conversation on GitHub.
Already have an account?
Sign in to comment

Reviewers

@jonathanhefnerjonathanhefnerjonathanhefner left review comments
@ochafikochafikAwaiting requested review from ochafik
@localdenlocaldenAwaiting requested review from localden

At least 1 approving review is required to merge this pull request.


Assignees


No one assigned


Labels


None yet


Projects


None yet


Milestone


No milestone


Development

Successfully merging this pull request may close these issues.

Add official CLI scaffolding tool for MCP Apps


3 participants

@liady@jonathanhefner@github-advanced-security

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Highlight search terms from Google/DuckDuckGo/Bing referrer
(function() {
var ref = document.referrer;
var terms = [];
if (ref.includes('google.com') || ref.includes('duckduckgo.com') || ref.includes('bing.com')) {
var url = new URL(ref);
var q = url.searchParams.get('q') || url.searchParams.get('p');
if (q) {
terms = q.split(/\s+/).filter(function(t) { return t.length > 2; });
}
}
if (terms.length === 0) return;
var style = document.createElement('style');
style.textContent = '.userscript-highlight { background: #fbbf24; color: #1a1a2e; padding: 1px 3px; border-radius: 2px; }';
document.head.appendChild(style);
function highlight(node) {
if (node.nodeType === 3) { // text node
var text = node.textContent;
var found = false;
terms.forEach(function(term) {
var regex = new RegExp('(' + term.replace(/[.*+?^${}()|[\]\\]/g, '\\') + ')', 'gi');
if (regex.test(text)) {
found = true;
var frag = document.createDocumentFragment();
var parts = text.split(regex);
parts.forEach(function(part, i) {
if (i % 2 === 0) {
frag.appendChild(document.createTextNode(part));
} else {
var span = document.createElement('span');
span.className = 'userscript-highlight';
span.textContent = part;
frag.appendChild(span);
}
});
node.parentNode.replaceChild(frag, node);
}
});
} else if (node.nodeType === 1 && node.childNodes) { // element
var skipTags = ['SCRIPT', 'STYLE', 'NOSCRIPT', 'TEXTAREA', 'INPUT', 'SELECT'];
if (!skipTags.includes(node.tagName)) {
Array.from(node.childNodes).forEach(highlight);
}
}
}
highlight(document.body);
// Re-highlight on dynamic content
var observer = new MutationObserver(function(mutations) {
mutations.forEach(function(m) {
m.addedNodes.forEach(function(node) {
if (node.nodeType === 1 || node.nodeType === 3) highlight(node);
});
});
});
observer.observe(document.body, { childList: true, subtree: true });
})();
}
} catch(__e) { console.warn('[Userscript:Highlight Search Terms]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '
feat: add @modelcontextprotocol/create-mcp-app package by liady · Pull Request #353 · modelcontextprotocol/ext-apps · GitHub
Skip to content
feat: add @modelcontextprotocol/create-mcp-app package - #353
Draft
liady wants to merge 10 commits into
mainfrom 
feat/create-app
Draft
feat: add @modelcontextprotocol/create-mcp-app package#353
liady wants to merge 10 commits into
mainfrom 
feat/create-app
Conversation
@liady
@liadyliady
commented
Jan 25, 2026•

edited

Loading

Copy link


Copy Markdown

Contributor
Closes#354
Summary
Enable scaffolding new MCP App projects with a single command:
npm create @modelcontextprotocol/mcp-app my-app
Features
  • Interactive CLI with beautiful UX using @clack/prompts
  • Two frameworks: React and Vanilla JS
  • Uses tsx for running the dev server (broader compatibility than bun)
  • Uses esbuild for bundling server files
  • Supports command-line flags:

    • --framework react|vanillajs - Skip framework selection prompt
  • Always runs npm install after scaffolding
Package Structure
packages/create-mcp-app/
├── src/ # CLI source code
├── templates/
│ ├── base/ # Shared files (server.ts, main.ts, configs)
│ ├── react/ # React-specific files
│ └── vanillajs/ # Vanilla JS-specific files
├── test/ # E2E scaffold tests
└── dist/ # Compiled CLI

Changes
  • Add packages/create-mcp-app/ with CLI implementation and templates
  • Add packages/* to workspaces in root package.json
  • Add publish-packages job to npm-publish workflow
  • Update README to reference the new CLI tool
  • SDK version read dynamically from package.json at runtime
  • E2E test scaffolds both templates and verifies they build
Testing
# Build the package
npm run build --workspace packages/create-mcp-app
# Run scaffold E2E test (scaffolds + builds both templates)
npm test --workspace packages/create-mcp-app
# Manual testcd /tmp
node /path/to/ext-apps/packages/create-mcp-app/dist/index.js my-app --framework react
cd my-app && npm run build
Test plan
  •  Package builds successfully
  •  React template scaffolds and builds
  •  Vanilla JS template scaffolds and builds
  •  CLI help displays correctly
  •  E2E scaffold test passes (both templates)
  •  Test with basic-host after merge
🤖 Generated with Claude Code
@liady@claude
feat: add @modelcontextprotocol/create-mcp-app package
9833096
Enable scaffolding new MCP App projects via `npm create @modelcontextprotocol/mcp-app`.
Features:
- Interactive CLI with @clack/prompts for beautiful UX
- React and Vanilla JS templates included
- Uses tsx for broader compatibility (no bun dependency)
- Templates include server, UI, and build configuration
- Supports --template and --no-install flags
Changes:
- Add packages/create-mcp-app/ with CLI and templates
- Add packages/* to workspaces in root package.json
- Add publish-packages job to npm-publish workflow
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
@pkg-pr-new
pkg-pr-newBot
commented
Jan 25, 2026•

edited

Loading

Copy link


Copy Markdown

Open in StackBlitz
@modelcontextprotocol/ext-apps
npm i https://pkg.pr.new/@modelcontextprotocol/ext-apps@353

@modelcontextprotocol/server-basic-preact
npm i https://pkg.pr.new/@modelcontextprotocol/server-basic-preact@353

@modelcontextprotocol/server-basic-react
npm i https://pkg.pr.new/@modelcontextprotocol/server-basic-react@353

@modelcontextprotocol/server-basic-solid
npm i https://pkg.pr.new/@modelcontextprotocol/server-basic-solid@353

@modelcontextprotocol/server-basic-svelte
npm i https://pkg.pr.new/@modelcontextprotocol/server-basic-svelte@353

@modelcontextprotocol/server-basic-vanillajs
npm i https://pkg.pr.new/@modelcontextprotocol/server-basic-vanillajs@353

@modelcontextprotocol/server-basic-vue
npm i https://pkg.pr.new/@modelcontextprotocol/server-basic-vue@353

@modelcontextprotocol/server-budget-allocator
npm i https://pkg.pr.new/@modelcontextprotocol/server-budget-allocator@353

@modelcontextprotocol/server-cohort-heatmap
npm i https://pkg.pr.new/@modelcontextprotocol/server-cohort-heatmap@353

@modelcontextprotocol/server-customer-segmentation
npm i https://pkg.pr.new/@modelcontextprotocol/server-customer-segmentation@353

@modelcontextprotocol/server-debug
npm i https://pkg.pr.new/@modelcontextprotocol/server-debug@353

@modelcontextprotocol/server-map
npm i https://pkg.pr.new/@modelcontextprotocol/server-map@353

@modelcontextprotocol/server-pdf
npm i https://pkg.pr.new/@modelcontextprotocol/server-pdf@353

@modelcontextprotocol/server-scenario-modeler
npm i https://pkg.pr.new/@modelcontextprotocol/server-scenario-modeler@353

@modelcontextprotocol/server-shadertoy
npm i https://pkg.pr.new/@modelcontextprotocol/server-shadertoy@353

@modelcontextprotocol/server-sheet-music
npm i https://pkg.pr.new/@modelcontextprotocol/server-sheet-music@353

@modelcontextprotocol/server-system-monitor
npm i https://pkg.pr.new/@modelcontextprotocol/server-system-monitor@353

@modelcontextprotocol/server-threejs
npm i https://pkg.pr.new/@modelcontextprotocol/server-threejs@353

@modelcontextprotocol/server-transcript
npm i https://pkg.pr.new/@modelcontextprotocol/server-transcript@353

@modelcontextprotocol/server-video-resource
npm i https://pkg.pr.new/@modelcontextprotocol/server-video-resource@353

@modelcontextprotocol/server-wiki-explorer
npm i https://pkg.pr.new/@modelcontextprotocol/server-wiki-explorer@353

commit: 3d9752b
liadyand others
added 2 commits
January 25, 2026 22:50
@liady@claude
docs: add create-mcp-app references to README and quickstart
50ebcd9
- Add Quick Start section to README with npm create command
- Add tip callout to quickstart guide for faster project setup
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
@liady
Merge branch 'main' into feat/create-app
975cb61
@liady
liady
marked this pull request as ready for review
January 25, 2026 21:31
@liady
liady
requested a review
from ochafikJanuary 25, 2026 21:31
jonathanhefner
jonathanhefner
reviewed
Jan 27, 2026
View reviewed changes
@jonathanhefnerjonathanhefner
left a comment


Copy link


Copy Markdown

Member
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I left some comments, but I think my biggest qualm is testing. I think we need to be 100% sure that the code we generate works end-to-end. Right now, it looks like the scaffold code isn't being tested nor even type-checked (unless I missed it?).
Comment threaddocs/quickstart.md
Outdated

Comment threadpackages/create-mcp-app/src/cli.ts
Outdated

Comment threadpackages/create-mcp-app/src/cli.ts
Outdated


${pc.bold("Options:")}
 -t, --template <name> Template to use (${TEMPLATES.map((t) => t.value).join(", ")})
 --no-install Skip npm install
@jonathanhefnerjonathanhefnerJan 27, 2026

Copy link


Copy Markdown

Member
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Just curious: what's the use case for this option?
Comment threadpackages/create-mcp-app/src/utils.ts
Outdated

Comment threadpackages/create-mcp-app/src/utils.ts
Outdated

Comment threadpackages/create-mcp-app/templates/react/src/mcp-app.module.css
Outdated

Comment threadpackages/create-mcp-app/templates/react/src/mcp-app.tsx
Comment threadpackages/create-mcp-app/templates/react/package.json.tmpl
Outdated

Comment threadpackages/create-mcp-app/templates/react/tsconfig.json
Outdated

Comment threadpackages/create-mcp-app/README.md
Outdated

@liady
liady
marked this pull request as draft
January 29, 2026 20:18
liadyand others
added 2 commits
January 29, 2026 22:23
@liady
Merge branch 'main' into feat/create-app
4b6bbee
@liady@claude
create-mcp-app: address PR review feedback
1df6b8d
- Rename --template flag to --framework
- Remove --no-install flag (always install deps)
- Read SDK_VERSION dynamically from package.json at runtime
- Simplify project name validation (filesystem + npm rules only)
- Replace get-time example tool with minimal hello stub
- Remove __dirname/import.meta.filename hack in server template
- Strip scaffold CSS to minimal layout-only styles
- Simplify React scaffold to minimal connected component
- Fix tsconfig.json to include main.ts in both templates
- Add tsconfig.server.json main.ts include for server code
- Fix README.md (remove --no-install, basic-host reference)
- Remove quickstart.md scaffold tip (tutorial shouldn't shortcut itself)
- Add E2E scaffold test that builds both templates end-to-end
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
github-advanced-security[bot]
github-advanced-securityAI
found potential problems
Jan 29, 2026
View reviewed changes
Comment threadpackages/create-mcp-app/test/scaffold-build.test.mjs
Fixed

liadyand others
added 5 commits
January 31, 2026 15:34
@liady@claude
create-mcp-app: address PR review feedback
d15a5a1
- Rename --template to --framework flag
- Dynamically resolve MCP SDK version from installed package
- Remove dot/underscore name restriction and regex interpolation concern
- Simplify scaffold templates: remove example tool UI, use TODO placeholders
- Delete CSS module files, use global.css with host style variables
- Switch test from execSync to execFileSync to avoid shell injection
- Add separate tsconfig.server.json without DOM libs for server code
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
@liady@claude
Merge branch 'main' into feat/create-app
31d6724
Resolve conflicts in npm-publish.yml (keep both publish-packages
and publish-mcpb jobs) and README.md (keep main's restructured
layout). Reinstall dependencies to pick up pdf-lib from main.
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
@github-actions
style: auto-fix prettier formatting
711c569
@liady@claude
create-mcp-app: address PR review feedback
3d9752b
- server.ts: remove educational comments, add DIST_DIR pattern from
basic-server examples, extract readAppHtml helper for multi-App
extensibility
- global.css: replace minimal CSS with host-context-aware CSS variables
matching basic-server examples
- mcp-app.tsx/ts: remove extra blank lines, keep minimal scaffold
- utils.ts: remove extra blank line in validation
- test: use fileURLToPath instead of .pathname to address CodeQL warning
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
@github-actions
style: auto-fix prettier formatting
fea3779
Sign up for freeto join this conversation on GitHub.
Already have an account?
Sign in to comment

Reviewers

@jonathanhefnerjonathanhefnerjonathanhefner left review comments
@ochafikochafikAwaiting requested review from ochafik
@localdenlocaldenAwaiting requested review from localden

At least 1 approving review is required to merge this pull request.


Assignees


No one assigned


Labels


None yet


Projects


None yet


Milestone


No milestone


Development

Successfully merging this pull request may close these issues.

Add official CLI scaffolding tool for MCP Apps


3 participants

@liady@jonathanhefner@github-advanced-security

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Strip utm_, fbclid, gclid, etc. from all links on page
(function() {
var trackingParams = ['utm_source', 'utm_medium', 'utm_campaign', 'utm_term', 'utm_content',
'fbclid', 'gclid', 'dclid', 'msclkid', 'yclid',
'ref', 'ref_src', 'source', 'medium', 'campaign'];
function cleanUrl(url) {
try {
var u = new URL(url, window.location.origin);
var changed = false;
trackingParams.forEach(function(p) {
if (u.searchParams.has(p)) {
u.searchParams.delete(p);
changed = true;
}
});
return changed ? u.toString() : url;
} catch (e) {
return url;
}
}
function cleanLinks() {
document.querySelectorAll('a[href]').forEach(function(a) {
var clean = cleanUrl(a.href);
if (clean !== a.href) a.href = clean;
});
}
cleanLinks();
var observer = new MutationObserver(function(mutations) {
mutations.forEach(function(m) {
m.addedNodes.forEach(function(node) {
if (node.nodeType === 1) {
if (node.tagName === 'A') cleanLinks();
node.querySelectorAll('a[href]').forEach(function(a) {
var clean = cleanUrl(a.href);
if (clean !== a.href) a.href = clean;
});
}
});
});
});
observer.observe(document.body, { childList: true, subtree: true });
})();
}
} catch(__e) { console.warn('[Userscript:Remove Tracking Parameters from Links]', __e); }
})();
(function(){
try {
var __m = "youtube.com";
var __re = new RegExp('^' + "youtube\\.com" + '
feat: add @modelcontextprotocol/create-mcp-app package by liady · Pull Request #353 · modelcontextprotocol/ext-apps · GitHub
Skip to content
feat: add @modelcontextprotocol/create-mcp-app package - #353
Draft
liady wants to merge 10 commits into
mainfrom 
feat/create-app
Draft
feat: add @modelcontextprotocol/create-mcp-app package#353
liady wants to merge 10 commits into
mainfrom 
feat/create-app
Conversation
@liady
@liadyliady
commented
Jan 25, 2026•

edited

Loading

Copy link


Copy Markdown

Contributor
Closes#354
Summary
Enable scaffolding new MCP App projects with a single command:
npm create @modelcontextprotocol/mcp-app my-app
Features
  • Interactive CLI with beautiful UX using @clack/prompts
  • Two frameworks: React and Vanilla JS
  • Uses tsx for running the dev server (broader compatibility than bun)
  • Uses esbuild for bundling server files
  • Supports command-line flags:

    • --framework react|vanillajs - Skip framework selection prompt
  • Always runs npm install after scaffolding
Package Structure
packages/create-mcp-app/
├── src/ # CLI source code
├── templates/
│ ├── base/ # Shared files (server.ts, main.ts, configs)
│ ├── react/ # React-specific files
│ └── vanillajs/ # Vanilla JS-specific files
├── test/ # E2E scaffold tests
└── dist/ # Compiled CLI

Changes
  • Add packages/create-mcp-app/ with CLI implementation and templates
  • Add packages/* to workspaces in root package.json
  • Add publish-packages job to npm-publish workflow
  • Update README to reference the new CLI tool
  • SDK version read dynamically from package.json at runtime
  • E2E test scaffolds both templates and verifies they build
Testing
# Build the package
npm run build --workspace packages/create-mcp-app
# Run scaffold E2E test (scaffolds + builds both templates)
npm test --workspace packages/create-mcp-app
# Manual testcd /tmp
node /path/to/ext-apps/packages/create-mcp-app/dist/index.js my-app --framework react
cd my-app && npm run build
Test plan
  •  Package builds successfully
  •  React template scaffolds and builds
  •  Vanilla JS template scaffolds and builds
  •  CLI help displays correctly
  •  E2E scaffold test passes (both templates)
  •  Test with basic-host after merge
🤖 Generated with Claude Code
@liady@claude
feat: add @modelcontextprotocol/create-mcp-app package
9833096
Enable scaffolding new MCP App projects via `npm create @modelcontextprotocol/mcp-app`.
Features:
- Interactive CLI with @clack/prompts for beautiful UX
- React and Vanilla JS templates included
- Uses tsx for broader compatibility (no bun dependency)
- Templates include server, UI, and build configuration
- Supports --template and --no-install flags
Changes:
- Add packages/create-mcp-app/ with CLI and templates
- Add packages/* to workspaces in root package.json
- Add publish-packages job to npm-publish workflow
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
@pkg-pr-new
pkg-pr-newBot
commented
Jan 25, 2026•

edited

Loading

Copy link


Copy Markdown

Open in StackBlitz
@modelcontextprotocol/ext-apps
npm i https://pkg.pr.new/@modelcontextprotocol/ext-apps@353

@modelcontextprotocol/server-basic-preact
npm i https://pkg.pr.new/@modelcontextprotocol/server-basic-preact@353

@modelcontextprotocol/server-basic-react
npm i https://pkg.pr.new/@modelcontextprotocol/server-basic-react@353

@modelcontextprotocol/server-basic-solid
npm i https://pkg.pr.new/@modelcontextprotocol/server-basic-solid@353

@modelcontextprotocol/server-basic-svelte
npm i https://pkg.pr.new/@modelcontextprotocol/server-basic-svelte@353

@modelcontextprotocol/server-basic-vanillajs
npm i https://pkg.pr.new/@modelcontextprotocol/server-basic-vanillajs@353

@modelcontextprotocol/server-basic-vue
npm i https://pkg.pr.new/@modelcontextprotocol/server-basic-vue@353

@modelcontextprotocol/server-budget-allocator
npm i https://pkg.pr.new/@modelcontextprotocol/server-budget-allocator@353

@modelcontextprotocol/server-cohort-heatmap
npm i https://pkg.pr.new/@modelcontextprotocol/server-cohort-heatmap@353

@modelcontextprotocol/server-customer-segmentation
npm i https://pkg.pr.new/@modelcontextprotocol/server-customer-segmentation@353

@modelcontextprotocol/server-debug
npm i https://pkg.pr.new/@modelcontextprotocol/server-debug@353

@modelcontextprotocol/server-map
npm i https://pkg.pr.new/@modelcontextprotocol/server-map@353

@modelcontextprotocol/server-pdf
npm i https://pkg.pr.new/@modelcontextprotocol/server-pdf@353

@modelcontextprotocol/server-scenario-modeler
npm i https://pkg.pr.new/@modelcontextprotocol/server-scenario-modeler@353

@modelcontextprotocol/server-shadertoy
npm i https://pkg.pr.new/@modelcontextprotocol/server-shadertoy@353

@modelcontextprotocol/server-sheet-music
npm i https://pkg.pr.new/@modelcontextprotocol/server-sheet-music@353

@modelcontextprotocol/server-system-monitor
npm i https://pkg.pr.new/@modelcontextprotocol/server-system-monitor@353

@modelcontextprotocol/server-threejs
npm i https://pkg.pr.new/@modelcontextprotocol/server-threejs@353

@modelcontextprotocol/server-transcript
npm i https://pkg.pr.new/@modelcontextprotocol/server-transcript@353

@modelcontextprotocol/server-video-resource
npm i https://pkg.pr.new/@modelcontextprotocol/server-video-resource@353

@modelcontextprotocol/server-wiki-explorer
npm i https://pkg.pr.new/@modelcontextprotocol/server-wiki-explorer@353

commit: 3d9752b
liadyand others
added 2 commits
January 25, 2026 22:50
@liady@claude
docs: add create-mcp-app references to README and quickstart
50ebcd9
- Add Quick Start section to README with npm create command
- Add tip callout to quickstart guide for faster project setup
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
@liady
Merge branch 'main' into feat/create-app
975cb61
@liady
liady
marked this pull request as ready for review
January 25, 2026 21:31
@liady
liady
requested a review
from ochafikJanuary 25, 2026 21:31
jonathanhefner
jonathanhefner
reviewed
Jan 27, 2026
View reviewed changes
@jonathanhefnerjonathanhefner
left a comment


Copy link


Copy Markdown

Member
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I left some comments, but I think my biggest qualm is testing. I think we need to be 100% sure that the code we generate works end-to-end. Right now, it looks like the scaffold code isn't being tested nor even type-checked (unless I missed it?).
Comment threaddocs/quickstart.md
Outdated

Comment threadpackages/create-mcp-app/src/cli.ts
Outdated

Comment threadpackages/create-mcp-app/src/cli.ts
Outdated


${pc.bold("Options:")}
 -t, --template <name> Template to use (${TEMPLATES.map((t) => t.value).join(", ")})
 --no-install Skip npm install
@jonathanhefnerjonathanhefnerJan 27, 2026

Copy link


Copy Markdown

Member
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Just curious: what's the use case for this option?
Comment threadpackages/create-mcp-app/src/utils.ts
Outdated

Comment threadpackages/create-mcp-app/src/utils.ts
Outdated

Comment threadpackages/create-mcp-app/templates/react/src/mcp-app.module.css
Outdated

Comment threadpackages/create-mcp-app/templates/react/src/mcp-app.tsx
Comment threadpackages/create-mcp-app/templates/react/package.json.tmpl
Outdated

Comment threadpackages/create-mcp-app/templates/react/tsconfig.json
Outdated

Comment threadpackages/create-mcp-app/README.md
Outdated

@liady
liady
marked this pull request as draft
January 29, 2026 20:18
liadyand others
added 2 commits
January 29, 2026 22:23
@liady
Merge branch 'main' into feat/create-app
4b6bbee
@liady@claude
create-mcp-app: address PR review feedback
1df6b8d
- Rename --template flag to --framework
- Remove --no-install flag (always install deps)
- Read SDK_VERSION dynamically from package.json at runtime
- Simplify project name validation (filesystem + npm rules only)
- Replace get-time example tool with minimal hello stub
- Remove __dirname/import.meta.filename hack in server template
- Strip scaffold CSS to minimal layout-only styles
- Simplify React scaffold to minimal connected component
- Fix tsconfig.json to include main.ts in both templates
- Add tsconfig.server.json main.ts include for server code
- Fix README.md (remove --no-install, basic-host reference)
- Remove quickstart.md scaffold tip (tutorial shouldn't shortcut itself)
- Add E2E scaffold test that builds both templates end-to-end
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
github-advanced-security[bot]
github-advanced-securityAI
found potential problems
Jan 29, 2026
View reviewed changes
Comment threadpackages/create-mcp-app/test/scaffold-build.test.mjs
Fixed

liadyand others
added 5 commits
January 31, 2026 15:34
@liady@claude
create-mcp-app: address PR review feedback
d15a5a1
- Rename --template to --framework flag
- Dynamically resolve MCP SDK version from installed package
- Remove dot/underscore name restriction and regex interpolation concern
- Simplify scaffold templates: remove example tool UI, use TODO placeholders
- Delete CSS module files, use global.css with host style variables
- Switch test from execSync to execFileSync to avoid shell injection
- Add separate tsconfig.server.json without DOM libs for server code
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
@liady@claude
Merge branch 'main' into feat/create-app
31d6724
Resolve conflicts in npm-publish.yml (keep both publish-packages
and publish-mcpb jobs) and README.md (keep main's restructured
layout). Reinstall dependencies to pick up pdf-lib from main.
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
@github-actions
style: auto-fix prettier formatting
711c569
@liady@claude
create-mcp-app: address PR review feedback
3d9752b
- server.ts: remove educational comments, add DIST_DIR pattern from
basic-server examples, extract readAppHtml helper for multi-App
extensibility
- global.css: replace minimal CSS with host-context-aware CSS variables
matching basic-server examples
- mcp-app.tsx/ts: remove extra blank lines, keep minimal scaffold
- utils.ts: remove extra blank line in validation
- test: use fileURLToPath instead of .pathname to address CodeQL warning
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
@github-actions
style: auto-fix prettier formatting
fea3779
Sign up for freeto join this conversation on GitHub.
Already have an account?
Sign in to comment

Reviewers

@jonathanhefnerjonathanhefnerjonathanhefner left review comments
@ochafikochafikAwaiting requested review from ochafik
@localdenlocaldenAwaiting requested review from localden

At least 1 approving review is required to merge this pull request.


Assignees


No one assigned


Labels


None yet


Projects


None yet


Milestone


No milestone


Development

Successfully merging this pull request may close these issues.

Add official CLI scaffolding tool for MCP Apps


3 participants

@liady@jonathanhefner@github-advanced-security

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Auto-enable theater mode on YouTube
(function() {
function tryTheater() {
var btn = document.querySelector('button[aria-label="Theater mode"], ytd-player #player button[title="Theater mode"]');
if (btn && !btn.classList.contains('activated')) {
btn.click();
}
}
// Try immediately
tryTheater();
// Try after navigation (SPA)
var lastUrl = location.href;
setInterval(function() {
if (location.href !== lastUrl) {
lastUrl = location.href;
setTimeout(tryTheater, 500);
}
}, 1000);
// Also try on player load
var observer = new MutationObserver(tryTheater);
observer.observe(document.body, { childList: true, subtree: true });
})();
}
} catch(__e) { console.warn('[Userscript:YouTube Theater Mode Default]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '
feat: add @modelcontextprotocol/create-mcp-app package by liady · Pull Request #353 · modelcontextprotocol/ext-apps · GitHub
Skip to content
feat: add @modelcontextprotocol/create-mcp-app package - #353
Draft
liady wants to merge 10 commits into
mainfrom 
feat/create-app
Draft
feat: add @modelcontextprotocol/create-mcp-app package#353
liady wants to merge 10 commits into
mainfrom 
feat/create-app
Conversation
@liady
@liadyliady
commented
Jan 25, 2026•

edited

Loading

Copy link


Copy Markdown

Contributor
Closes#354
Summary
Enable scaffolding new MCP App projects with a single command:
npm create @modelcontextprotocol/mcp-app my-app
Features
  • Interactive CLI with beautiful UX using @clack/prompts
  • Two frameworks: React and Vanilla JS
  • Uses tsx for running the dev server (broader compatibility than bun)
  • Uses esbuild for bundling server files
  • Supports command-line flags:

    • --framework react|vanillajs - Skip framework selection prompt
  • Always runs npm install after scaffolding
Package Structure
packages/create-mcp-app/
├── src/ # CLI source code
├── templates/
│ ├── base/ # Shared files (server.ts, main.ts, configs)
│ ├── react/ # React-specific files
│ └── vanillajs/ # Vanilla JS-specific files
├── test/ # E2E scaffold tests
└── dist/ # Compiled CLI

Changes
  • Add packages/create-mcp-app/ with CLI implementation and templates
  • Add packages/* to workspaces in root package.json
  • Add publish-packages job to npm-publish workflow
  • Update README to reference the new CLI tool
  • SDK version read dynamically from package.json at runtime
  • E2E test scaffolds both templates and verifies they build
Testing
# Build the package
npm run build --workspace packages/create-mcp-app
# Run scaffold E2E test (scaffolds + builds both templates)
npm test --workspace packages/create-mcp-app
# Manual testcd /tmp
node /path/to/ext-apps/packages/create-mcp-app/dist/index.js my-app --framework react
cd my-app && npm run build
Test plan
  •  Package builds successfully
  •  React template scaffolds and builds
  •  Vanilla JS template scaffolds and builds
  •  CLI help displays correctly
  •  E2E scaffold test passes (both templates)
  •  Test with basic-host after merge
🤖 Generated with Claude Code
@liady@claude
feat: add @modelcontextprotocol/create-mcp-app package
9833096
Enable scaffolding new MCP App projects via `npm create @modelcontextprotocol/mcp-app`.
Features:
- Interactive CLI with @clack/prompts for beautiful UX
- React and Vanilla JS templates included
- Uses tsx for broader compatibility (no bun dependency)
- Templates include server, UI, and build configuration
- Supports --template and --no-install flags
Changes:
- Add packages/create-mcp-app/ with CLI and templates
- Add packages/* to workspaces in root package.json
- Add publish-packages job to npm-publish workflow
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
@pkg-pr-new
pkg-pr-newBot
commented
Jan 25, 2026•

edited

Loading

Copy link


Copy Markdown

Open in StackBlitz
@modelcontextprotocol/ext-apps
npm i https://pkg.pr.new/@modelcontextprotocol/ext-apps@353

@modelcontextprotocol/server-basic-preact
npm i https://pkg.pr.new/@modelcontextprotocol/server-basic-preact@353

@modelcontextprotocol/server-basic-react
npm i https://pkg.pr.new/@modelcontextprotocol/server-basic-react@353

@modelcontextprotocol/server-basic-solid
npm i https://pkg.pr.new/@modelcontextprotocol/server-basic-solid@353

@modelcontextprotocol/server-basic-svelte
npm i https://pkg.pr.new/@modelcontextprotocol/server-basic-svelte@353

@modelcontextprotocol/server-basic-vanillajs
npm i https://pkg.pr.new/@modelcontextprotocol/server-basic-vanillajs@353

@modelcontextprotocol/server-basic-vue
npm i https://pkg.pr.new/@modelcontextprotocol/server-basic-vue@353

@modelcontextprotocol/server-budget-allocator
npm i https://pkg.pr.new/@modelcontextprotocol/server-budget-allocator@353

@modelcontextprotocol/server-cohort-heatmap
npm i https://pkg.pr.new/@modelcontextprotocol/server-cohort-heatmap@353

@modelcontextprotocol/server-customer-segmentation
npm i https://pkg.pr.new/@modelcontextprotocol/server-customer-segmentation@353

@modelcontextprotocol/server-debug
npm i https://pkg.pr.new/@modelcontextprotocol/server-debug@353

@modelcontextprotocol/server-map
npm i https://pkg.pr.new/@modelcontextprotocol/server-map@353

@modelcontextprotocol/server-pdf
npm i https://pkg.pr.new/@modelcontextprotocol/server-pdf@353

@modelcontextprotocol/server-scenario-modeler
npm i https://pkg.pr.new/@modelcontextprotocol/server-scenario-modeler@353

@modelcontextprotocol/server-shadertoy
npm i https://pkg.pr.new/@modelcontextprotocol/server-shadertoy@353

@modelcontextprotocol/server-sheet-music
npm i https://pkg.pr.new/@modelcontextprotocol/server-sheet-music@353

@modelcontextprotocol/server-system-monitor
npm i https://pkg.pr.new/@modelcontextprotocol/server-system-monitor@353

@modelcontextprotocol/server-threejs
npm i https://pkg.pr.new/@modelcontextprotocol/server-threejs@353

@modelcontextprotocol/server-transcript
npm i https://pkg.pr.new/@modelcontextprotocol/server-transcript@353

@modelcontextprotocol/server-video-resource
npm i https://pkg.pr.new/@modelcontextprotocol/server-video-resource@353

@modelcontextprotocol/server-wiki-explorer
npm i https://pkg.pr.new/@modelcontextprotocol/server-wiki-explorer@353

commit: 3d9752b
liadyand others
added 2 commits
January 25, 2026 22:50
@liady@claude
docs: add create-mcp-app references to README and quickstart
50ebcd9
- Add Quick Start section to README with npm create command
- Add tip callout to quickstart guide for faster project setup
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
@liady
Merge branch 'main' into feat/create-app
975cb61
@liady
liady
marked this pull request as ready for review
January 25, 2026 21:31
@liady
liady
requested a review
from ochafikJanuary 25, 2026 21:31
jonathanhefner
jonathanhefner
reviewed
Jan 27, 2026
View reviewed changes
@jonathanhefnerjonathanhefner
left a comment


Copy link


Copy Markdown

Member
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I left some comments, but I think my biggest qualm is testing. I think we need to be 100% sure that the code we generate works end-to-end. Right now, it looks like the scaffold code isn't being tested nor even type-checked (unless I missed it?).
Comment threaddocs/quickstart.md
Outdated

Comment threadpackages/create-mcp-app/src/cli.ts
Outdated

Comment threadpackages/create-mcp-app/src/cli.ts
Outdated


${pc.bold("Options:")}
 -t, --template <name> Template to use (${TEMPLATES.map((t) => t.value).join(", ")})
 --no-install Skip npm install
@jonathanhefnerjonathanhefnerJan 27, 2026

Copy link


Copy Markdown

Member
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Just curious: what's the use case for this option?
Comment threadpackages/create-mcp-app/src/utils.ts
Outdated

Comment threadpackages/create-mcp-app/src/utils.ts
Outdated

Comment threadpackages/create-mcp-app/templates/react/src/mcp-app.module.css
Outdated

Comment threadpackages/create-mcp-app/templates/react/src/mcp-app.tsx
Comment threadpackages/create-mcp-app/templates/react/package.json.tmpl
Outdated

Comment threadpackages/create-mcp-app/templates/react/tsconfig.json
Outdated

Comment threadpackages/create-mcp-app/README.md
Outdated

@liady
liady
marked this pull request as draft
January 29, 2026 20:18
liadyand others
added 2 commits
January 29, 2026 22:23
@liady
Merge branch 'main' into feat/create-app
4b6bbee
@liady@claude
create-mcp-app: address PR review feedback
1df6b8d
- Rename --template flag to --framework
- Remove --no-install flag (always install deps)
- Read SDK_VERSION dynamically from package.json at runtime
- Simplify project name validation (filesystem + npm rules only)
- Replace get-time example tool with minimal hello stub
- Remove __dirname/import.meta.filename hack in server template
- Strip scaffold CSS to minimal layout-only styles
- Simplify React scaffold to minimal connected component
- Fix tsconfig.json to include main.ts in both templates
- Add tsconfig.server.json main.ts include for server code
- Fix README.md (remove --no-install, basic-host reference)
- Remove quickstart.md scaffold tip (tutorial shouldn't shortcut itself)
- Add E2E scaffold test that builds both templates end-to-end
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
github-advanced-security[bot]
github-advanced-securityAI
found potential problems
Jan 29, 2026
View reviewed changes
Comment threadpackages/create-mcp-app/test/scaffold-build.test.mjs
Fixed

liadyand others
added 5 commits
January 31, 2026 15:34
@liady@claude
create-mcp-app: address PR review feedback
d15a5a1
- Rename --template to --framework flag
- Dynamically resolve MCP SDK version from installed package
- Remove dot/underscore name restriction and regex interpolation concern
- Simplify scaffold templates: remove example tool UI, use TODO placeholders
- Delete CSS module files, use global.css with host style variables
- Switch test from execSync to execFileSync to avoid shell injection
- Add separate tsconfig.server.json without DOM libs for server code
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
@liady@claude
Merge branch 'main' into feat/create-app
31d6724
Resolve conflicts in npm-publish.yml (keep both publish-packages
and publish-mcpb jobs) and README.md (keep main's restructured
layout). Reinstall dependencies to pick up pdf-lib from main.
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
@github-actions
style: auto-fix prettier formatting
711c569
@liady@claude
create-mcp-app: address PR review feedback
3d9752b
- server.ts: remove educational comments, add DIST_DIR pattern from
basic-server examples, extract readAppHtml helper for multi-App
extensibility
- global.css: replace minimal CSS with host-context-aware CSS variables
matching basic-server examples
- mcp-app.tsx/ts: remove extra blank lines, keep minimal scaffold
- utils.ts: remove extra blank line in validation
- test: use fileURLToPath instead of .pathname to address CodeQL warning
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
@github-actions
style: auto-fix prettier formatting
fea3779
Sign up for freeto join this conversation on GitHub.
Already have an account?
Sign in to comment

Reviewers

@jonathanhefnerjonathanhefnerjonathanhefner left review comments
@ochafikochafikAwaiting requested review from ochafik
@localdenlocaldenAwaiting requested review from localden

At least 1 approving review is required to merge this pull request.


Assignees


No one assigned


Labels


None yet


Projects


None yet


Milestone


No milestone


Development

Successfully merging this pull request may close these issues.

Add official CLI scaffolding tool for MCP Apps


3 participants

@liady@jonathanhefner@github-advanced-security

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Remove or un-stick sticky/fixed headers that block content
(function() {
function unstick() {
document.querySelectorAll('header, nav, [role="banner"], .header, .navbar, .sticky, .fixed-top, [style*="position: fixed"], [style*="position:sticky"]').forEach(function(el) {
if (el.style.position === 'fixed' || el.style.position === 'sticky' || getComputedStyle(el).position === 'fixed' || getComputedStyle(el).position === 'sticky') {
el.style.position = 'static';
el.style.top = 'auto';
el.style.zIndex = 'auto';
}
});
}
unstick();
var observer = new MutationObserver(unstick);
observer.observe(document.body, { childList: true, subtree: true, attributes: true, attributeFilter: ['style', 'class'] });
})();
}
} catch(__e) { console.warn('[Userscript:Kill Sticky Headers]', __e); }
})();
})();
feat: add @modelcontextprotocol/create-mcp-app package by liady · Pull Request #353 · modelcontextprotocol/ext-apps · GitHub
Skip to content
feat: add @modelcontextprotocol/create-mcp-app package - #353
Draft
liady wants to merge 10 commits into
mainfrom 
feat/create-app
Draft
feat: add @modelcontextprotocol/create-mcp-app package#353
liady wants to merge 10 commits into
mainfrom 
feat/create-app
Conversation
@liady
@liadyliady
commented
Jan 25, 2026•

edited

Loading

Copy link


Copy Markdown

Contributor
Closes#354
Summary
Enable scaffolding new MCP App projects with a single command:
npm create @modelcontextprotocol/mcp-app my-app
Features
  • Interactive CLI with beautiful UX using @clack/prompts
  • Two frameworks: React and Vanilla JS
  • Uses tsx for running the dev server (broader compatibility than bun)
  • Uses esbuild for bundling server files
  • Supports command-line flags:

    • --framework react|vanillajs - Skip framework selection prompt
  • Always runs npm install after scaffolding
Package Structure
packages/create-mcp-app/
├── src/ # CLI source code
├── templates/
│ ├── base/ # Shared files (server.ts, main.ts, configs)
│ ├── react/ # React-specific files
│ └── vanillajs/ # Vanilla JS-specific files
├── test/ # E2E scaffold tests
└── dist/ # Compiled CLI

Changes
  • Add packages/create-mcp-app/ with CLI implementation and templates
  • Add packages/* to workspaces in root package.json
  • Add publish-packages job to npm-publish workflow
  • Update README to reference the new CLI tool
  • SDK version read dynamically from package.json at runtime
  • E2E test scaffolds both templates and verifies they build
Testing
# Build the package
npm run build --workspace packages/create-mcp-app
# Run scaffold E2E test (scaffolds + builds both templates)
npm test --workspace packages/create-mcp-app
# Manual testcd /tmp
node /path/to/ext-apps/packages/create-mcp-app/dist/index.js my-app --framework react
cd my-app && npm run build
Test plan
  •  Package builds successfully
  •  React template scaffolds and builds
  •  Vanilla JS template scaffolds and builds
  •  CLI help displays correctly
  •  E2E scaffold test passes (both templates)
  •  Test with basic-host after merge
🤖 Generated with Claude Code
@liady@claude
feat: add @modelcontextprotocol/create-mcp-app package
9833096
Enable scaffolding new MCP App projects via `npm create @modelcontextprotocol/mcp-app`.
Features:
- Interactive CLI with @clack/prompts for beautiful UX
- React and Vanilla JS templates included
- Uses tsx for broader compatibility (no bun dependency)
- Templates include server, UI, and build configuration
- Supports --template and --no-install flags
Changes:
- Add packages/create-mcp-app/ with CLI and templates
- Add packages/* to workspaces in root package.json
- Add publish-packages job to npm-publish workflow
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
@pkg-pr-new
pkg-pr-newBot
commented
Jan 25, 2026•

edited

Loading

Copy link


Copy Markdown

Open in StackBlitz
@modelcontextprotocol/ext-apps
npm i https://pkg.pr.new/@modelcontextprotocol/ext-apps@353

@modelcontextprotocol/server-basic-preact
npm i https://pkg.pr.new/@modelcontextprotocol/server-basic-preact@353

@modelcontextprotocol/server-basic-react
npm i https://pkg.pr.new/@modelcontextprotocol/server-basic-react@353

@modelcontextprotocol/server-basic-solid
npm i https://pkg.pr.new/@modelcontextprotocol/server-basic-solid@353

@modelcontextprotocol/server-basic-svelte
npm i https://pkg.pr.new/@modelcontextprotocol/server-basic-svelte@353

@modelcontextprotocol/server-basic-vanillajs
npm i https://pkg.pr.new/@modelcontextprotocol/server-basic-vanillajs@353

@modelcontextprotocol/server-basic-vue
npm i https://pkg.pr.new/@modelcontextprotocol/server-basic-vue@353

@modelcontextprotocol/server-budget-allocator
npm i https://pkg.pr.new/@modelcontextprotocol/server-budget-allocator@353

@modelcontextprotocol/server-cohort-heatmap
npm i https://pkg.pr.new/@modelcontextprotocol/server-cohort-heatmap@353

@modelcontextprotocol/server-customer-segmentation
npm i https://pkg.pr.new/@modelcontextprotocol/server-customer-segmentation@353

@modelcontextprotocol/server-debug
npm i https://pkg.pr.new/@modelcontextprotocol/server-debug@353

@modelcontextprotocol/server-map
npm i https://pkg.pr.new/@modelcontextprotocol/server-map@353

@modelcontextprotocol/server-pdf
npm i https://pkg.pr.new/@modelcontextprotocol/server-pdf@353

@modelcontextprotocol/server-scenario-modeler
npm i https://pkg.pr.new/@modelcontextprotocol/server-scenario-modeler@353

@modelcontextprotocol/server-shadertoy
npm i https://pkg.pr.new/@modelcontextprotocol/server-shadertoy@353

@modelcontextprotocol/server-sheet-music
npm i https://pkg.pr.new/@modelcontextprotocol/server-sheet-music@353

@modelcontextprotocol/server-system-monitor
npm i https://pkg.pr.new/@modelcontextprotocol/server-system-monitor@353

@modelcontextprotocol/server-threejs
npm i https://pkg.pr.new/@modelcontextprotocol/server-threejs@353

@modelcontextprotocol/server-transcript
npm i https://pkg.pr.new/@modelcontextprotocol/server-transcript@353

@modelcontextprotocol/server-video-resource
npm i https://pkg.pr.new/@modelcontextprotocol/server-video-resource@353

@modelcontextprotocol/server-wiki-explorer
npm i https://pkg.pr.new/@modelcontextprotocol/server-wiki-explorer@353

commit: 3d9752b
liadyand others
added 2 commits
January 25, 2026 22:50
@liady@claude
docs: add create-mcp-app references to README and quickstart
50ebcd9
- Add Quick Start section to README with npm create command
- Add tip callout to quickstart guide for faster project setup
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
@liady
Merge branch 'main' into feat/create-app
975cb61
@liady
liady
marked this pull request as ready for review
January 25, 2026 21:31
@liady
liady
requested a review
from ochafikJanuary 25, 2026 21:31
jonathanhefner
jonathanhefner
reviewed
Jan 27, 2026
View reviewed changes
@jonathanhefnerjonathanhefner
left a comment


Copy link


Copy Markdown

Member
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I left some comments, but I think my biggest qualm is testing. I think we need to be 100% sure that the code we generate works end-to-end. Right now, it looks like the scaffold code isn't being tested nor even type-checked (unless I missed it?).
Comment threaddocs/quickstart.md
Outdated

Comment threadpackages/create-mcp-app/src/cli.ts
Outdated

Comment threadpackages/create-mcp-app/src/cli.ts
Outdated


${pc.bold("Options:")}
 -t, --template <name> Template to use (${TEMPLATES.map((t) => t.value).join(", ")})
 --no-install Skip npm install
@jonathanhefnerjonathanhefnerJan 27, 2026

Copy link


Copy Markdown

Member
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Just curious: what's the use case for this option?
Comment threadpackages/create-mcp-app/src/utils.ts
Outdated

Comment threadpackages/create-mcp-app/src/utils.ts
Outdated

Comment threadpackages/create-mcp-app/templates/react/src/mcp-app.module.css
Outdated

Comment threadpackages/create-mcp-app/templates/react/src/mcp-app.tsx
Comment threadpackages/create-mcp-app/templates/react/package.json.tmpl
Outdated

Comment threadpackages/create-mcp-app/templates/react/tsconfig.json
Outdated

Comment threadpackages/create-mcp-app/README.md
Outdated

@liady
liady
marked this pull request as draft
January 29, 2026 20:18
liadyand others
added 2 commits
January 29, 2026 22:23
@liady
Merge branch 'main' into feat/create-app
4b6bbee
@liady@claude
create-mcp-app: address PR review feedback
1df6b8d
- Rename --template flag to --framework
- Remove --no-install flag (always install deps)
- Read SDK_VERSION dynamically from package.json at runtime
- Simplify project name validation (filesystem + npm rules only)
- Replace get-time example tool with minimal hello stub
- Remove __dirname/import.meta.filename hack in server template
- Strip scaffold CSS to minimal layout-only styles
- Simplify React scaffold to minimal connected component
- Fix tsconfig.json to include main.ts in both templates
- Add tsconfig.server.json main.ts include for server code
- Fix README.md (remove --no-install, basic-host reference)
- Remove quickstart.md scaffold tip (tutorial shouldn't shortcut itself)
- Add E2E scaffold test that builds both templates end-to-end
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
github-advanced-security[bot]
github-advanced-securityAI
found potential problems
Jan 29, 2026
View reviewed changes
Comment threadpackages/create-mcp-app/test/scaffold-build.test.mjs
Fixed

liadyand others
added 5 commits
January 31, 2026 15:34
@liady@claude
create-mcp-app: address PR review feedback
d15a5a1
- Rename --template to --framework flag
- Dynamically resolve MCP SDK version from installed package
- Remove dot/underscore name restriction and regex interpolation concern
- Simplify scaffold templates: remove example tool UI, use TODO placeholders
- Delete CSS module files, use global.css with host style variables
- Switch test from execSync to execFileSync to avoid shell injection
- Add separate tsconfig.server.json without DOM libs for server code
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
@liady@claude
Merge branch 'main' into feat/create-app
31d6724
Resolve conflicts in npm-publish.yml (keep both publish-packages
and publish-mcpb jobs) and README.md (keep main's restructured
layout). Reinstall dependencies to pick up pdf-lib from main.
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
@github-actions
style: auto-fix prettier formatting
711c569
@liady@claude
create-mcp-app: address PR review feedback
3d9752b
- server.ts: remove educational comments, add DIST_DIR pattern from
basic-server examples, extract readAppHtml helper for multi-App
extensibility
- global.css: replace minimal CSS with host-context-aware CSS variables
matching basic-server examples
- mcp-app.tsx/ts: remove extra blank lines, keep minimal scaffold
- utils.ts: remove extra blank line in validation
- test: use fileURLToPath instead of .pathname to address CodeQL warning
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
@github-actions
style: auto-fix prettier formatting
fea3779
Sign up for freeto join this conversation on GitHub.
Already have an account?
Sign in to comment

Reviewers

@jonathanhefnerjonathanhefnerjonathanhefner left review comments
@ochafikochafikAwaiting requested review from ochafik
@localdenlocaldenAwaiting requested review from localden

At least 1 approving review is required to merge this pull request.


Assignees


No one assigned


Labels


None yet


Projects


None yet


Milestone


No milestone


Development

Successfully merging this pull request may close these issues.

Add official CLI scaffolding tool for MCP Apps


3 participants

@liady@jonathanhefner@github-advanced-security