MCP Inspector on Cloud Run: Hosted version for the community chat testing and UX improvements

[ChrisLally]

Pre-submission Checklist

• This post follows the MCP community guidelines

What would you like to share?

What I Built

I've created a hosted version of the MCP Inspector optimized for Google Cloud Run, available at https://inspect.mcp.garden (see screenshots https://x.com/ChrisLally/status/1987386962563768368). This fork includes Cloud Run deployment support and several UX improvements to make it more suitable for remote access.

Key Features:

• Cloud Run deployment with Docker containerization
• Default authentication disabled for Cloud Run compatibility (DANGEROUSLY_OMIT_AUTH=true by default)
• Streamable HTTP as the default transport type
• Pre-filled sample URLs (https://zip1.io/mcp for streamable-http, https://docs.mcp.cloudflare.com/sse for SSE)
• Updated Chat tab with Gemini 2.5 Flash/Pro models and custom model support
• STDIO transport inputs disabled with warning message (local-only use)
• Automatic URL updates when switching transport types

How I Built It

1. Docker Containerization: Created a Dockerfile and .dockerignore to properly build and run the application in a containerized environment
2. Cloud Run Optimization: Set DANGEROUSLY_OMIT_AUTH=true as the default for Cloud Run deployments where authentication is handled at the platform level
3. UX Improvements:
   • Made streamable-http the default transport type
   • Pre-filled URL inputs with sample URLs by default
   • Added automatic URL updates when switching transport types
   • Disabled STDIO inputs with a warning message
   • Updated Chat tab to focus on Gemini 2.5 models

Challenges I Faced

1. Docker Build Conflicts: Initial Docker builds failed due to node_modules conflicts. Fixed by creating a proper .dockerignore to exclude build artifacts
2. React Bundling Issues: Encountered "Cannot read properties of null (reading 'useRef')" errors caused by multiple React instances. Resolved by:
   • Setting manualChunks: undefined in Vite config
   • Adding resolve.dedupe: ["react", "react-dom"]
   • Configuring commonjsOptions for mixed module types
3. White Screen Debugging: Initial Cloud Run deployment showed a blank page. Fixed by:
   • Correcting express.static configuration
   • Adding diagnostic error pages
   • Fixing client-side proxy address resolution to match Cloud Run's port configuration

What I Learned

• Cloud Run Deployment Patterns: How to properly configure Node.js applications for Cloud Run, including port handling and static file serving
• React Bundling Best Practices: The importance of deduplication and chunk configuration in Vite builds
• Docker Optimization: Proper use of .dockerignore and layer caching for faster builds
• Default Configuration: Setting sensible defaults for hosted environments vs. local development

Tips for Others

1. Docker Builds: Always use .dockerignore to exclude node_modules and build artifacts. Copy package.json files first for better layer caching
2. React Bundling: If you see React hook errors in production builds, check for multiple React instances and use resolve.dedupe in Vite
3. Cloud Run Deployment: Set DANGEROUSLY_OMIT_AUTH=true only if authentication is handled at the platform level (Cloud Run IAM, Cloudflare Access, etc.)
4. Default URLs: Pre-fill sample URLs in the UI to improve onboarding experience
5. Transport Type Defaults: Consider your use case - streamable-http works well for hosted deployments, while stdio is local-only

Relevant Links

• Live Demo: https://inspect.mcp.garden
• GitHub Repository: https://github.com/ChrisLally/mcpgarden-inspect
• X Post with Screenshots:https://x.com/ChrisLally/status/1987386962563768368