') + ')', '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('^' + ".*" + ', '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" + ', '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('^' + ".*" + ', '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); } })(); })(); MCP Apps - start server issue · Issue #420 · modelcontextprotocol/ext-apps · GitHub
Skip to content

MCP Apps - start server issue #420

Description

@wngreenway

Following the MCP Apps Quickstart guide.

At "Step 4 See it in action", I run the npm start command. Instead of getting MCP server listening on http://localhost:3001/mcp I error out with Error: INPUT environment variable is not set.

Running W11, nodejs v22.19.0. Created files using VS Code.

Checked through the code to try and problem solve, but couldn't come to any conclusions.

Logs

PS C:\dev\learning\mcp_app> npm start
> mcp_app@1.0.0 start
> concurrently 'cross-env NODE_ENV=development INPUT=mcp-app.html vite build --watch' 'tsx watch main.ts'
[0] ''cross-env' is not recognized as an internal or external command,
[0] operable program or batch file.
[1] 'NODE_ENV' is not recognized as an internal or external command,
[1] operable program or batch file.
[2] 'INPUT' is not recognized as an internal or external command,
[2] operable program or batch file.
[4] 'build' is not recognized as an internal or external command,
[4] operable program or batch file.
[5] 'watch' is not recognized as an internal or external command,
[5] operable program or batch file.
[5] watch exited with code 1
[4] build exited with code 1
[2] INPUT=mcp-app.html exited with code 1
[1] NODE_ENV=development exited with code 1
[0] 'cross-env exited with code 1
[6] 'main.ts'' is not recognized as an internal or external command,
[6] operable program or batch file.
[6] main.ts' exited with code 1
[3] failed to load config from C:\dev\learning\mcp_app\vite.config.ts
[3] error when starting dev server:
[3] Error: INPUT environment variable is not set
[3] at file:///C:/dev/learning/mcp_app/node_modules/.vite-temp/vite.config.ts.timestamp-1770031400901-820ec7360d816.mjs:6:9
[3] at ModuleJob.run (node:internal/modules/esm/module_job:345:25)
[3] at async onImport.tracePromise.__proto__ (node:internal/modules/esm/loader:651:26)
[3] at async loadConfigFromBundledFile (file:///C:/dev/learning/mcp_app/node_modules/vite/dist/node/chunks/config.js:35909:12)
[3] at async bundleAndLoadConfigFile (file:///C:/dev/learning/mcp_app/node_modules/vite/dist/node/chunks/config.js:35797:17)
[3] at async loadConfigFromFile (file:///C:/dev/learning/mcp_app/node_modules/vite/dist/node/chunks/config.js:35764:42)
[3] at async resolveConfig (file:///C:/dev/learning/mcp_app/node_modules/vite/dist/node/chunks/config.js:35413:22)
[3] at async _createServer (file:///C:/dev/learning/mcp_app/node_modules/vite/dist/node/chunks/config.js:25362:67)
[3] at async CAC.<anonymous> (file:///C:/dev/learning/mcp_app/node_modules/vite/dist/node/cli.js:572:18)
[3] vite exited with code 1

Also noticed a package-lock.json is created, when the quickstart doesn't mention that.

Metadata

Metadata

Labels

bugSomething isn't working

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions