MCP Server Playground

A playground for Model Context Protocol (MCP) server built with TypeScript and Streamable HTTP transport with an OAuth Proxy for 3rd party authorization servers like Auth0.

Features

• MCP Server implementation: HTTP-Based Streamable transport using @modelcontextprotocol/sdk with HTTP transport, session management, and tool execution.
• OAuth authentication/3rd party authorization: Implements an OAuth server for MCP clients to process 3rd party authorization servers like Auth0, providing Dynamic Application Registration for MCP server.
• Storage: Provide storage for MCP server to store data like OAuth sessions, tokens, etc.
• Session Management: Support stateful sessions by using replay of initial request.
• Tools:
  • aws-ecs: Investigate the ECS service, task and cloudwatch logs using AWS ECS, Cloudwatch Logs and Bedrock
  • aws-s3: Get the list of S3 buckets and objects
  • system-time: Get the current system time in various formats with timezone support
  • echo: Echo a message back with transformations, repetition
  • streaming: Simulate real-time streaming data with live updates
  • project: Find keywords in the current project directory
• Prompts: echo

Why this project exists?

• The Model Context Protocol spec requires Dynamic Application Registration because it provides a standardized way for MCP clients to automatically register with new servers and obtain OAuth client IDs without user interaction. The main reason for this mechanism is because MCP clients can't know all possible services in advance and manual registration would create significant effort for users and it is not scalable. If do not support Dynamic Application Registration, then MCP clients need to provide OAuth client ID and secret to the server, which is not secure and not scalable.
• However, enabling Dynamic Application Registration (if supported) becomes a security risk because the endpoint is a public endpoint that anyone can create OAuth clients. It can easily be abused, such as by flooding with unwanted client registrations. Hence, Auth0 has disabled Dynamic Application Registration
• As a result, this project provides a way to enable Dynamic Application Registration for MCP server by using OAuth Proxy, but delegating authorization to 3rd party authorization server like Auth0, Github, Google, etc.

Endpoints

Getting Started

Installation

1. Clone the repository:

   git clone <your-repo>
   cd mcp-server-playground
   

2. Install dependencies:

   npm install
   

3. Set up environment variables:

   cp .env.example .env
   

4. Set up the MCP server for local development

   npm run dev:setup
   

Helm Chart

helm repo add chrisleekr https://chrisleekr.github.io/helm-charts/
helm repo update
helm install mcp-server-playground chrisleekr/mcp-server-playground

Set up the MCP server for Cursor

1. Create MCP configuration file for local build

   Create a .cursor/mcp.json file in your project directory (for project-specific setup) or ~/.cursor/mcp.json in your home directory (for global setup):

   {
     "mcpServers": {
       "mcp-server-playground-cursor": {
         "type": "http",
         "url": "http://localhost:3000/mcp"
       }
     }
   }
   

Use npx @modelcontextprotocol/inspector to test the MCP server

1. Copy mcp-config.example.json to mcp-config.json

2. Edit mcp-config.json to point to the correct MCP server

3. Run the inspector

   npm run docker:run
   
   # Then run the inspector
   npx @modelcontextprotocol/inspector -y --config ./mcp-config.json --server mcp-server-playground-cursor
   

   or

   npm run test:inspector
   

Setup Auth0 for authorization

1. Create a new application in Auth0

   • Go to Auth0 Dashboard
   • Click on "Applications"
   • Click on "Create Application"
     • Name: MCP Server Boilerplate
     • Application Type: Regular Web Application
   • Click on "Create"

2. Set up the application

   • Click on "Settings"
   • Set the following settings:
     • Allowed Callback URLs: http://localhost:3000/oauth/auth0-callback
     • Allowed Web Origins: http://localhost:3000

3. Create a new API

   • Click on "APIs"
   • Click on "Create API"
     • Name: MCP Server Boilerplate
     • Identifier: urn:mcp-server-playground
     • JSON Web Token (JWT) Profile: Auth0
     • JSON Web Token (JWT) Signature Algorithm: RS256
   • Click on "Create"

How to make stateful session with multiple MCP Server instances?

When the MCP server is deployed as a cluster, it is not possible to make it stateful with multiple MCP Server instances because the transport is not shared between instances by design.

To make it truly stateful, I used Valkey to store the session id with the initial request.

When the request comes in to alternative MCP server instance, it will check if the session id is in the Valkey. If it is, it will replay the initial request and connect the transport to the server.

Inspired from https://github.com/modelcontextprotocol/modelcontextprotocol/discussions/102

The below diagram shows the flow of the stateful session management.

TODO

• Streaming is not working as expected. It returns the final result instead of streaming the data.

Screenshots

References

• Authorization
• Dynamic Application Registration
• Let's fix OAuth in MCP
• OAuth for MCP explained with a real-world example
• Treat the MCP server as an OAuth resource server rather than an authorization server
• HTTP + SSE MCP Server w/ OAuth by @NapthaAI