Add an implementation of the remote-mcp demo for Clerk.com.

demos/remote-mcp-clerk/.dev.vars.example

@@ -0,0 +1,7 @@
+COOKIE_ENCRYPTION_KEY=<your cookie cookie encryption key>
+
+CLERK_SECRET_KEY=<your key>
+CLERK_FRONTEND_API=<your api url>
+
+CLERK_CLIENT_ID=<your client id>
+CLERK_CLIENT_SECRET=<your client secret>

demos/remote-mcp-clerk/.gitignore

@@ -0,0 +1,172 @@
+# Logs
+
+logs
+_.log
+npm-debug.log_
+yarn-debug.log*
+yarn-error.log*
+lerna-debug.log*
+.pnpm-debug.log*
+
+# Diagnostic reports (https://nodejs.org/api/report.html)
+
+report.[0-9]_.[0-9]_.[0-9]_.[0-9]_.json
+
+# Runtime data
+
+pids
+_.pid
+_.seed
+\*.pid.lock
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+
+lib-cov
+
+# Coverage directory used by tools like istanbul
+
+coverage
+\*.lcov
+
+# nyc test coverage
+
+.nyc_output
+
+# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
+
+.grunt
+
+# Bower dependency directory (https://bower.io/)
+
+bower_components
+
+# node-waf configuration
+
+.lock-wscript
+
+# Compiled binary addons (https://nodejs.org/api/addons.html)
+
+build/Release
+
+# Dependency directories
+
+node_modules/
+jspm_packages/
+
+# Snowpack dependency directory (https://snowpack.dev/)
+
+web_modules/
+
+# TypeScript cache
+
+\*.tsbuildinfo
+
+# Optional npm cache directory
+
+.npm
+
+# Optional eslint cache
+
+.eslintcache
+
+# Optional stylelint cache
+
+.stylelintcache
+
+# Microbundle cache
+
+.rpt2_cache/
+.rts2_cache_cjs/
+.rts2_cache_es/
+.rts2_cache_umd/
+
+# Optional REPL history
+
+.node_repl_history
+
+# Output of 'npm pack'
+
+\*.tgz
+
+# Yarn Integrity file
+
+.yarn-integrity
+
+# dotenv environment variable files
+
+.env
+.env.development.local
+.env.test.local
+.env.production.local
+.env.local
+
+# parcel-bundler cache (https://parceljs.org/)
+
+.cache
+.parcel-cache
+
+# Next.js build output
+
+.next
+out
+
+# Nuxt.js build / generate output
+
+.nuxt
+dist
+
+# Gatsby files
+
+.cache/
+
+# Comment in the public line in if your project uses Gatsby and not Next.js
+
+# https://nextjs.org/blog/next-9-1#public-directory-support
+
+# public
+
+# vuepress build output
+
+.vuepress/dist
+
+# vuepress v2.x temp and cache directory
+
+.temp
+.cache
+
+# Docusaurus cache and generated files
+
+.docusaurus
+
+# Serverless directories
+
+.serverless/
+
+# FuseBox cache
+
+.fusebox/
+
+# DynamoDB Local files
+
+.dynamodb/
+
+# TernJS port file
+
+.tern-port
+
+# Stores VSCode versions used for testing VSCode extensions
+
+.vscode-test
+
+# yarn v2
+
+.yarn/cache
+.yarn/unplugged
+.yarn/build-state.yml
+.yarn/install-state.gz
+.pnp.\*
+
+# wrangler project
+
+.dev.vars
+.wrangler/

demos/remote-mcp-clerk/.prettierrc

@@ -0,0 +1,14 @@
+{
+  "printWidth": 140,
+  "singleQuote": false,
+  "semi": true,
+  "useTabs": false,
+  "overrides": [
+    {
+      "files": ["*.jsonc"],
+      "options": {
+        "trailingComma": "none"
+      }
+    }
+  ]
+}

demos/remote-mcp-clerk/README.md

@@ -0,0 +1,164 @@
+# Model Context Protocol (MCP) Server + Clerk OAuth
+
+This is a [Model Context Protocol (MCP)](https://modelcontextprotocol.io/introduction) server that supports remote MCP connections, with Clerk OAuth built-in.
+
+You can deploy it to your own Cloudflare account, and after you create your own Clerk OAuth application, you'll have a fully functional remote MCP server that you can build off. Users will be able to connect to your MCP server by signing in with Clerk.
+
+You can use this as a reference example for how to integrate other OAuth providers with an MCP server deployed to Cloudflare, using the [`workers-oauth-provider` library](https://github.com/cloudflare/workers-oauth-provider).
+
+The MCP server (powered by [Cloudflare Workers](https://developers.cloudflare.com/workers/)):
+
+* Acts as OAuth _Server_ to your MCP clients
+* Acts as OAuth _Client_ to your _real_ OAuth server (in this case, Clerk)
+
+> [!WARNING]
+> This is a demo template designed to help you get started quickly. While we have implemented several security controls, **you must implement all preventive and defense-in-depth security measures before deploying to production**. Please review our comprehensive security guide: [Securing MCP Servers](https://github.com/cloudflare/agents/blob/main/docs/securing-mcp-servers.md)
+
+## Getting Started
+
+Clone the repo directly & install dependencies: `npm install`.
+
+Alternatively, you can use the command line below to get the remote MCP Server created on your local machine:
+```bash
+npm create cloudflare@latest -- my-mcp-server --template=cloudflare/ai/demos/remote-mcp-clerk-oauth
+```
+
+### For Production
+Create a new Clerk application and OAuth configuration:
+1. Sign up or log in at [Clerk Dashboard](https://dashboard.clerk.com)
+2. Create a new application
+3. Go to **OAuth Applications** and create a new OAuth application
+4. Set the redirect URI to: `https://mcp-clerk-oauth.<your-subdomain>.workers.dev/callback`
+5. Note your Client ID and Client Secret
+6. Get your Secret Key from **API Keys** (starts with `sk_live_`)
+7. Note your Frontend API URL (e.g., `https://your-subdomain.clerk.accounts.dev`)
+
+Set secrets via Wrangler:
+```bash
+wrangler secret put CLERK_CLIENT_ID
+wrangler secret put CLERK_CLIENT_SECRET
+wrangler secret put CLERK_SECRET_KEY
+wrangler secret put CLERK_FRONTEND_API
+wrangler secret put COOKIE_ENCRYPTION_KEY # generate with: openssl rand -hex 32
+```
+
+> [!IMPORTANT]
+> When you create the first secret, Wrangler will ask if you want to create a new Worker. Submit "Y" to create a new Worker and save the secret.
+
+#### Set up a KV namespace
+- Create the KV namespace: 
+`wrangler kv namespace create "OAUTH_KV"`
+- Update the Wrangler file with the KV ID
+
+#### Deploy & Test
+Deploy the MCP server to make it available on your workers.dev domain 
+` wrangler deploy`
+
+Test the remote server using [Inspector](https://modelcontextprotocol.io/docs/tools/inspector):
+
+```
+npx @modelcontextprotocol/inspector@latest
+```
+Enter `https://mcp-clerk-oauth.<your-subdomain>.workers.dev/mcp` (or `/sse` for deprecated protocol) and hit connect. Once you go through the authentication flow, you'll see the Tools working: 
+
+<img width="640" alt="image" src="https://github.com/user-attachments/assets/7973f392-0a9d-4712-b679-6dd23f824287" />
+
+You now have a remote MCP server deployed! 
+
+### Access Control
+
+This MCP server uses Clerk OAuth for authentication. All authenticated users can access basic tools like "add" and "userInfo".
+
+The "generateImage" tool is restricted to specific roles using role-based access control (RBAC):
+
+```typescript
+// Roles that have access to the image generation tool
+const ALLOWED_ROLES = new Set([
+  'admin',
+  'premium'
+]);
+```
+
+To set a user's role in Clerk Dashboard:
+1. Go to **Users** → select a user
+2. Click on **Metadata** tab
+3. Under **Public metadata**, add: `{"role": "admin"}`
+4. Save changes
+
+### Access the remote MCP server from Claude Desktop
+
+Open Claude Desktop and navigate to Settings -> Developer -> Edit Config. This opens the configuration file that controls which MCP servers Claude can access.
+
+Replace the content with the following configuration. Once you restart Claude Desktop, a browser window will open showing your OAuth login page. Complete the authentication flow to grant Claude access to your MCP server. After you grant access, the tools will become available for you to use. 
+
+```
+{
+  "mcpServers": {
+    "clerk-mcp": {
+      "command": "npx",
+      "args": [
+        "mcp-remote",
+        "https://mcp-clerk-oauth.<your-subdomain>.workers.dev/mcp"
+      ]
+    }
+  }
+}
+```
+
+Once the Tools (under 🔨) show up in the interface, you can ask Claude to use them. For example: "Could you use the math tool to add 23 and 19?". Claude should invoke the tool and show the result generated by the MCP server.
+
+### For Local Development
+If you'd like to iterate and test your MCP server, you can do so in local development:
+
+1. In Clerk Dashboard, update your OAuth application's redirect URI to include `http://localhost:8788/callback`
+2. Copy `.env.example` to `.dev.vars` and fill in your Clerk credentials:
+```
+CLERK_CLIENT_ID=your_clerk_client_id
+CLERK_CLIENT_SECRET=your_clerk_client_secret
+CLERK_SECRET_KEY=sk_test_...
+CLERK_FRONTEND_API=https://your-subdomain.clerk.accounts.dev
+COOKIE_ENCRYPTION_KEY=<generate-with-openssl-rand-hex-32>
+```
+
+#### Develop & Test
+Run the server locally to make it available at `http://localhost:8788`
+```bash
+npm run dev  # or: wrangler dev
+```
+
+To test the local server, enter `http://localhost:8788/mcp` (or `/sse` for deprecated protocol) into Inspector and hit connect. Once you follow the prompts, you'll be able to "List Tools". 
+
+#### Using Claude and other MCP Clients
+
+When using Claude to connect to your remote MCP server, you may see some error messages. This is because Claude Desktop doesn't yet support remote MCP servers, so it sometimes gets confused. To verify whether the MCP server is connected, hover over the 🔨 icon in the bottom right corner of Claude's interface. You should see your tools available there.
+
+#### Using Cursor and other MCP Clients
+
+To connect Cursor with your MCP server, choose `Type`: "Command" and in the `Command` field, combine the command and args fields into one (e.g. `npx mcp-remote https://<your-worker-name>.<your-subdomain>.workers.dev/sse`).
+
+Note that while Cursor supports HTTP+SSE servers, it doesn't support authentication, so you still need to use `mcp-remote` (and to use a STDIO server, not an HTTP one).
+
+You can connect your MCP server to other MCP clients like Windsurf by opening the client's configuration file, adding the same JSON that was used for the Claude setup, and restarting the MCP client.
+
+## How does it work? 
+
+#### OAuth Provider
+The OAuth Provider library serves as a complete OAuth 2.1 server implementation for Cloudflare Workers. It handles the complexities of the OAuth flow, including token issuance, validation, and management. In this project, it plays the dual role of:
+
+- Authenticating MCP clients that connect to your server
+- Managing the connection to Clerk's OAuth services
+- Securely storing tokens and authentication state in KV storage
+
+#### Durable MCP
+Durable MCP extends the base MCP functionality with Cloudflare's Durable Objects, providing:
+- Persistent state management for your MCP server
+- Secure storage of authentication context between requests
+- Access to authenticated user information via `this.props`
+- Support for conditional tool availability based on user identity
+
+#### MCP Remote
+The MCP Remote library enables your server to expose tools that can be invoked by MCP clients like the Inspector. It:
+- Defines the protocol for communication between clients and your server
+- Provides a structured way to define tools
+- Handles serialization and deserialization of requests and responses
+- Maintains the Server-Sent Events (SSE) connection between clients and your server