mcpdemos

MCP Demos provides eight runnable demonstrations of the Model Context Protocol, ranging from text-only interactions to interactive MCP Apps with bidirectional communication. The server is started via the standard Node.js entrypoint and serves through the stdio transport by default, enabling tools to talk to the MCP runtime using the library provided in @modelcontextprotocol/sdk. Each demo showcases a specific capability, such as conversational tools, negotiation flows, OAuth handoffs, progress pipelines, task management (cancel/retry), and shared artifacts like color palettes and UI components. When running in development mode, you can also develop using TSX for on-the-fly TypeScript execution, which is convenient during iterations before building for production.

To use the server, start it with the standard development command and then connect your MCP apps or tooling to the running instance. The README describes two primary execution paths: development via npm run dev (stdio transport) and production via npm run build followed by npm start. The server exposes eight demos under the src/demos directory, each wired to a set of tools or resources (for example, color picker resources or component gallery state) that MCP apps can leverage in interactive sessions with models.

In VS Code, you can configure the MCP server in your workspace settings to auto-discover this instance by pointing to the compiled entrypoint (dist/index.js) or, during development, to run via tsx (src/index.ts). This enables seamless authoring and testing of MCP Apps against the same demo set that end users will experience.

Prerequisites

• Node.js 20+ (as recommended by the Quick Start)
• npm (comes with Node.js) or pnpm/yarn if you prefer

Install and run (development)

1. Install dependencies

   npm install
   

2. Start in development mode (stdio transport)

   npm run dev
   

Build for production and run

1. Build the server

   npm run build
   

2. Start the production server

   npm start
   

VS Code integration (optional)

• Configure the MCP server in .vscode/settings.json as shown in the README to auto-discover the server entrypoint.

Notes

• The server exposes eight demos located under src/demos. Each demo has associated toolsets and, in some cases, UI resources that enhance the MCP experience.

Tips and common issues:

• Ensure Node.js 20+ is installed to match the Quick Start guidance.
• If you encounter transport issues, confirm you’re using the stdio-based startup (npm run dev) or the built/production path (npm start).
• For development, tsx-based startup (npx tsx src/index.ts) is supported as an alternative workflow.
• The UI resources (e.g., ui://color-picker, ui://component-gallery) are optional; in environments that don’t support MCP Apps, demos gracefully degrade to text-only tool interactions.
• This server relies on @modelcontextprotocol/sdk and zod for validation; no external APIs or cloud services are required for the demo set.
• If you’re integrating with external tooling, follow the eslint/tsconfig/tsx setup typical for a TypeScript Node project to maintain compatibility with the server and demos.