A minimal Model Context Protocol (MCP) client that runs in the browser, designed for Val.town deployment. This client demonstrates OAuth authentication flow and can connect to any MCP server.

• 🌐 Browser-based MCP client
• 🔐 OAuth 2.0 authentication support
• 🔧 Dynamic SDK version selection
• 💬 Interactive tool testing interface
• 📦 Zero server dependencies (runs entirely in browser)

1. Install Deno (if not already installed):

   curl -fsSL https://deno.com/install.sh | sh

2. Run the development server:

   deno run --allow-net --allow-read cimd-client-demo.ts

3. Open in browser: Navigate to http://localhost:8000

1. Create a new HTTP Val:

   • Go to val.town
   • Click "New" → "HTTP Handler"

2. Copy the code:

   • Copy the entire contents of cimd-client-demo.ts
   • Paste into the Val editor

3. Deploy:

   • Click "Save"
   • Your client will be available at https://<your-username>-<val-name>.web.val.run

1. Install Val Town CLI:

   deno install --global --force --reload --allow-read --allow-write --allow-env --allow-net jsr:@valtown/vt

2. Authenticate:

   vt auth

3. Deploy the client:

   # Create a new val
   vt create cimd-client-demo
   
   # Copy the client code
   cp cimd-client-demo.ts cimd-client-demo/index.ts
   
   # Push to Val Town
   cd cimd-client-demo && vt push

4. Access your deployed client: Your client will be available at https://<your-username>-cimd-client-demo.web.val.run

1. Enter Server URL:

   • Use one of the pre-configured example servers
   • Or enter a custom MCP server URL

2. Click Connect:

   • If the server requires OAuth, a popup will open for authorization
   • Grant permissions and the window will close automatically

3. Test Tools:

   • Once connected, click "List Tools" to see available MCP tools
   • The console will show all interactions

The client automatically handles OAuth callbacks at /callback. When deploying:

• Local: http://localhost:8000/callback
• Val.town: https://<your-val-url>/callback

Make sure your MCP server's OAuth configuration includes this callback URL.

The client supports multiple MCP SDK versions. You can:

• Select from the dropdown in the UI
• Or append ?sdk=<version> to the URL (e.g., ?sdk=1.17.3)
• Use a custom SDK with ?customSdk=<url>

The client includes presets for testing:

• Example Server 1: PRM at root level
• Example Server 2: PRM with path segments
• Example Server 3: Custom PRM location with WWW-Authenticate

cimd-client-demo.ts   # Main client code (Val.town compatible)
README.md            # This file

• BrowserOAuthProvider: Handles OAuth flow in the browser
• StreamableHTTPClientTransport: MCP transport for HTTP connections
• Client: Main MCP client from the TypeScript SDK

To customize the client:

1. Modify server presets: Edit the <select> options in the HTML
2. Change styling: Update the CSS in the <style> section
3. Add features: Extend the JavaScript module section

1. OAuth popup blocked:

   • Enable popups for the client domain
   • Or manually open the authorization URL

2. Connection fails:

   • Verify the server URL is correct
   • Check browser console for detailed errors
   • Ensure the server has CORS enabled for browser access

3. Tools not working:

   • Make sure you're authenticated (if required)
   • Check the server implements the tools properly

Open browser developer console to see detailed logs of:

• Connection attempts
• OAuth flow steps
• MCP protocol messages
• Tool invocations

• OAuth tokens are stored in memory only (not persisted)
• Use HTTPS URLs for production servers
• The client uses PKCE for enhanced OAuth security

• MCP Documentation
• Val.town Documentation
• MCP TypeScript SDK

MIT