Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
9 changes: 9 additions & 0 deletions demos/remote-mcp-pingone/.gitignore
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
**/node_modules
**/dist
**/build
**/lib
**/coverage
**/*.tsbuildinfo
.wrangler
worker-configuration.d.ts
.dev.vars
79 changes: 79 additions & 0 deletions demos/remote-mcp-pingone/README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,79 @@
# Model Context Protocol (MCP) Server + PingOne

This is a [Model Context Protocol (MCP)](https://modelcontextprotocol.io/introduction) server that supports remote MCP connections, with PingOne built-in.

The MCP server (powered by [Cloudflare Workers](https://developers.cloudflare.com/workers/)):

- Acts as _OAuth Server_ to your MCP clients
- Acts as _OIDC Client_ to your PingOne environment

> [!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

This demo shows how an MCP server can securely call a protected API on behalf of an end user. To begin:

1. Deploy the [Todo API](./api/).
2. Deploy either the [OIDC MCP server](./mcp/) (for Cloudflare-managed consent) or the [DaVinci OIDC MCP Server](./mcp-dv/) (for PingOne DaVinci-managed consent).

> [!NOTE]
> The API used here could be any PingOne-secured API. We use a Cloudflare workers API for this example, but the goal is to demonstrate how any API can be connected to an MCP server using this architecture.

### Access the remote MCP server from the Cloudflare Workers AI LLM Playground

Navigate to [https://playground.ai.cloudflare.com](https://playground.ai.cloudflare.com) and connect to your MCP server using the following URL pattern:

```
https://remote-mcp-pingone(-dv).<your-subdomain>.workers.dev/mcp
```

<img src="_docs/workers_ai_playground_demo.png" width="60%" alt="MCP server demo with workers ai playground">

### 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": {
"todo-mcp": {
"command": "npx",
"args": [
"mcp-remote",
"https://remote-mcp-pingone(-dv).<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 tell me what is in my Todo list?". Claude should invoke the tool and show the result generated by the MCP server.

## How does it work?

This architecture bridges the stateless nature of Cloudflare workers with the stateful requirements of an authenticated MCP session.

### OAuth Provider (The Identity Broker)

The OAuth provider library implements a compliant OAuth 2.1 server directly within your Cloudflare worker. It acts as the security gateway, performing a dual role:
- **OAuth Server:** It manages the immediate relationship with the MCP client, handling registration and issuing session tokens.
- **OIDC Client:** It orchestrates the upstream federation with PingOne, exchanging authorization codes for the access tokens needed to call protected APIs.

### Cloudflare Agents (State & Transport)

The MCP server extends the McpAgent class, which automatically wraps the MCP logic in a durable object. This handles the complex infrastructure requirements:
- **Session Persistence:** It creates a dedicated, isolated environment for each MCP connection and securely persists the PingOne tokens in the durable object's storage (`this.props`).
- **Streamable HTTP:** The agent automatically handles the network transport layer. It accepts standard HTTP requests from MCP clients and routes them to MCP tools in the correct durable object.

### MCP SDK (Tool Logic)

The official `@modelcontextprotocol/sdk` is used to define the actual capabilities of the MCP server. Inside the agent, an McpServer instance:
- **Handles Protocol:** Manages the serialization of JSON-RPC messages and tool definitions.
- **Enables Streaming:** Implements Streamable HTTP to support real-time, bi-directional communication over a single endpoint.

## Use Cases & Extensibility

This architecture demonstrates a pattern for connecting AI agents to APIs secured by PingOne. By functioning as an OAuth proxy, the MCP server enables LLMs to interact with services on behalf of an authenticated user, without modifying the downstream API's existing permission models. Whether using the direct Cloudflare consent approach or the DaVinci orchestration flow, this project provides a configuration guide for enabling natural language interactions with enterprise data while maintaining identity-based access controls.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
2 changes: 2 additions & 0 deletions demos/remote-mcp-pingone/api/.dev.vars.sample
Original file line number Diff line number Diff line change
@@ -0,0 +1,2 @@
API_ISSUER=
API_AUDIENCE=
75 changes: 75 additions & 0 deletions demos/remote-mcp-pingone/api/README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,75 @@
# Todo API

A protected API providing basic Todo CRUD. Access is granted only with a PingOne token.

### Stack

| Role | Name | Description |
| :--- | :--- | :--- |
| **Platform** | [Cloudflare Workers](https://workers.cloudflare.com) | Serverless execution |
| **Framework** | [Hono](https://hono.dev) | Lightweight API endpoints |
| **Data Storage** | [Cloudflare Workers KV](https://developers.cloudflare.com/kv) | User-scoped Todo list data |

### Requirements

* Node.js (v20+)
* PingOne environment
* Cloudflare account & [Wrangler CLI](https://developers.cloudflare.com/workers/wrangler/install-and-update)

### Structure

```text
api/
├── src/
│ ├── index.ts # Worker entry point, defines the routes
│ ├── config.ts # Worker bindings, request-scoped variables, and scopes
│ ├── todoService.ts # Todo CRUD with Cloudflare KV
│ └── auth.ts # PingOne token verification
├── package.json # Dependencies and scripts
├── tsconfig.json # TypeScript compiler settings
└── wrangler.jsonc # Worker configuration
```

## 🔒 PingOne Configuration

**Configure the API's audience and supported scopes in PingOne**

- **Name:** `Todo List API`
- **Audience:** `https://todo.api.com`
- **Scopes:** `todo_api:read todo_api:write`

![Todo API resource config in PingOne dashboard](../_docs/ping_api_resource_config.png)

## 🚀 Deploy to Cloudflare

1. Install dependencies and build
```zsh
npm install
npm run build
```

2. Set remote environment variables

| Name | Description | Example |
| :--- | :--- | :--- |
| API_ISSUER | PingOne environment domain | `https://auth.pingone.<REGION>/<ENV_ID>/as` |
| API_AUDIENCE | `aud` claim this API expects in JWTs | `https://api.yourdomain.com` |

```bash
wrangler secret put API_ISSUER
wrangler secret put API_AUDIENCE
```

3. Configure remote KV storage

```bash
wrangler kv namespace create TODO_KV_PINGONE
```

> Note: After running this command, you must update `wrangler.jsonc` with the generated KV namespace ID

4. Deploy

```bash
npm run deploy
```
Loading