Cloudflare MCP Lab

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.

Category
访问服务器

README

Model Context Protocol (MCP) Server + Google OAuth

📺 Video Tutorial

Step-by-Step Guide on YouTube

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/callback as 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_ID
  • GOOGLE_CLIENT_SECRET
  • COOKIE_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.

推荐服务器

Baidu Map

Baidu Map

百度地图核心API现已全面兼容MCP协议,是国内首家兼容MCP协议的地图服务商。

官方
精选
JavaScript
Playwright MCP Server

Playwright MCP Server

一个模型上下文协议服务器,它使大型语言模型能够通过结构化的可访问性快照与网页进行交互,而无需视觉模型或屏幕截图。

官方
精选
TypeScript
Magic Component Platform (MCP)

Magic Component Platform (MCP)

一个由人工智能驱动的工具,可以从自然语言描述生成现代化的用户界面组件,并与流行的集成开发环境(IDE)集成,从而简化用户界面开发流程。

官方
精选
本地
TypeScript
Audiense Insights MCP Server

Audiense Insights MCP Server

通过模型上下文协议启用与 Audiense Insights 账户的交互,从而促进营销洞察和受众数据的提取和分析,包括人口统计信息、行为和影响者互动。

官方
精选
本地
TypeScript
VeyraX

VeyraX

一个单一的 MCP 工具,连接你所有喜爱的工具:Gmail、日历以及其他 40 多个工具。

官方
精选
本地
graphlit-mcp-server

graphlit-mcp-server

模型上下文协议 (MCP) 服务器实现了 MCP 客户端与 Graphlit 服务之间的集成。 除了网络爬取之外,还可以将任何内容(从 Slack 到 Gmail 再到播客订阅源)导入到 Graphlit 项目中,然后从 MCP 客户端检索相关内容。

官方
精选
TypeScript
Kagi MCP Server

Kagi MCP Server

一个 MCP 服务器,集成了 Kagi 搜索功能和 Claude AI,使 Claude 能够在回答需要最新信息的问题时执行实时网络搜索。

官方
精选
Python
e2b-mcp-server

e2b-mcp-server

使用 MCP 通过 e2b 运行代码。

官方
精选
Neon MCP Server

Neon MCP Server

用于与 Neon 管理 API 和数据库交互的 MCP 服务器

官方
精选
Exa MCP Server

Exa MCP Server

模型上下文协议(MCP)服务器允许像 Claude 这样的 AI 助手使用 Exa AI 搜索 API 进行网络搜索。这种设置允许 AI 模型以安全和受控的方式获取实时的网络信息。

官方
精选