Cloudflare MCP Lab
A remote MCP server deployed on Cloudflare Workers with Google OAuth authentication that enables users to interact with a SQL database containing employee data. Demonstrates how to build authenticated MCP servers with OAuth integration on Cloudflare infrastructure.
README
Model Context Protocol (MCP) Server + Google OAuth
📺 Video Tutorial
Watch the full tutorial on YouTube →
This is a Model Context Protocol (MCP) server that supports remote MCP connections, with Google OAuth built-in.
You can deploy it to your own Cloudflare account, and after you create your own Google Cloud OAuth client app, 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 their Google account.
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.
The MCP server (powered by Cloudflare Workers):
Getting Started
Prerequisites
Install wrangler (globally):
npm i -g wrangler@latest
Google Cloud Console Settings
Create an OAuth app with client ID and client secret:
- Add
http://localhost:8788/callbackas the redirect URL
Cloudflare Settings
Create KV Cache Database
Create a KV cache DB and note down its ID. Add the following keys:
GOOGLE_CLIENT_IDGOOGLE_CLIENT_SECRETCOOKIE_ENCRYPTION_KEY
You can use openssl to generate a 32-byte random value as COOKIE_ENCRYPTION_KEY:
openssl rand -hex 32
Create D1 Database
Create a D1 database with name sql_employees and note down its ID. Import data using simple_import_employees.sql:
wrangler d1 execute employees --remote --file ./simple_import_employees.sql
To Make the Current Repo Work
Step 1: Install dependencies
npm install
Step 2: Modify wrangler.jsonc
- Replace
<ADD-KV-ID>with your KV ID - Replace
<ADD-D1-ID>with your D1 ID
Step 3: Prepare KV in your local space
wrangler kv key put --local "GOOGLE_CLIENT_ID" "<your-google-client-id>" --binding="OAUTH_KV"
wrangler kv key put --local "GOOGLE_CLIENT_SECRET" "<your-google-client-secret>" --binding="OAUTH_KV"
wrangler kv key put --local "COOKIE_ENCRYPTION_KEY" "<your-cookie-encryption-key>" --binding="OAUTH_KV"
Step 4: Run locally
npm run dev
# or
wrangler dev
The local MCP server should be up on port 8788. You can test it now on Postman.
Step 5: Deploy to production
npm run deploy
# or
wrangler deploy
After a while you should see it at the Cloudflare platform. Note down its URL: <remote-mcp-url>
Step 6: Update Google Cloud Console Go to your Google Cloud Console again and add the following to the redirect URL list:
https://<remote-mcp-url>/callback
Now you should be able to use the remote MCP server as well!
To Follow My Video and Start Everything From Scratch
You can start building it with command:
npm create cloudflare@latest -- my-mcp-server --template=cloudflare/ai/demos/remote-mcp-google-oauth
Note: This is slow and takes some time.
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": {
"employee-db": {
"command": "npx",
"args": [
"mcp-remote",
"https://<your-remote-mcp-url>/mcp"
]
}
}
}
Once the Tools (under 🔨) show up in the interface, you can ask Claude to use them. For example: "Could you list all tables in the database?" or "Show me the employees table schema". Claude should invoke the tool and show the result generated by the MCP server.
Testing with MCP Inspector
Test the remote server using Inspector:
npx @modelcontextprotocol/inspector@latest
Enter your server URL and hit connect:
- Local:
http://localhost:8788/mcp - Remote:
https://<your-remote-mcp-url>/mcp
Once you go through the authentication flow, you'll see the database tools available.
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/mcp).
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 Google Cloud'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
- Supports both Streamable HTTP (recommended) and Server-Sent Events (SSE) protocols for client communication
Transport Protocol Migration
This example has been updated to support the new Streamable HTTP transport protocol, which replaces the deprecated Server-Sent Events (SSE) protocol. The server now exposes both endpoints:
/mcp- Recommended: Uses the new Streamable HTTP protocol/sse- Deprecated: Legacy SSE protocol (maintained for backward compatibility)
All new integrations should use the /mcp endpoint. The SSE endpoint will be removed in a future version.
Recommended Servers
playwright-mcp
A Model Context Protocol server that enables LLMs to interact with web pages through structured accessibility snapshots without requiring vision models or screenshots.
Magic Component Platform (MCP)
An AI-powered tool that generates modern UI components from natural language descriptions, integrating with popular IDEs to streamline UI development workflow.
Audiense Insights MCP Server
Enables interaction with Audiense Insights accounts via the Model Context Protocol, facilitating the extraction and analysis of marketing insights and audience data including demographics, behavior, and influencer engagement.
VeyraX MCP
Single MCP tool to connect all your favorite tools: Gmail, Calendar and 40 more.
graphlit-mcp-server
The Model Context Protocol (MCP) Server enables integration between MCP clients and the Graphlit service. Ingest anything from Slack to Gmail to podcast feeds, in addition to web crawling, into a Graphlit project - and then retrieve relevant contents from the MCP client.
Kagi MCP Server
An MCP server that integrates Kagi search capabilities with Claude AI, enabling Claude to perform real-time web searches when answering questions that require up-to-date information.
E2B
Using MCP to run code via e2b.
Neon Database
MCP server for interacting with Neon Management API and databases
Exa Search
A Model Context Protocol (MCP) server lets AI assistants like Claude use the Exa AI Search API for web searches. This setup allows AI models to get real-time web information in a safe and controlled way.
Qdrant Server
This repository is an example of how to create a MCP server for Qdrant, a vector search engine.
