Skip to content

Commit fe63bae

Browse files
committed
feat(mcp): sse oauth
1 parent 9b82864 commit fe63bae

30 files changed

+3164
-509
lines changed

sse/.gitignore renamed to doit-mcp-server/.gitignore

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,9 @@
1+
node_modules
2+
3+
.nx
4+
.idea
5+
.vscode
6+
.zed
17
# Logs
28

39
logs

doit-mcp-server/README.md

Lines changed: 120 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,120 @@
1+
# Remote MCP Server on Cloudflare
2+
3+
Let's get a remote MCP server up-and-running on Cloudflare Workers complete with OAuth login!
4+
5+
## Develop locally
6+
7+
```bash
8+
# clone the repository
9+
git clone https://github.com/cloudflare/ai.git
10+
# Or if using ssh:
11+
# git clone [email protected]:cloudflare/ai.git
12+
13+
# install dependencies
14+
cd ai
15+
# Note: using pnpm instead of just "npm"
16+
pnpm install
17+
18+
# run locally
19+
npx nx dev remote-mcp-server
20+
```
21+
22+
You should be able to open [`http://localhost:8787/`](http://localhost:8787/) in your browser
23+
24+
## Connect the MCP inspector to your server
25+
26+
To explore your new MCP api, you can use the [MCP Inspector](https://modelcontextprotocol.io/docs/tools/inspector).
27+
28+
- Start it with `npx @modelcontextprotocol/inspector`
29+
- [Within the inspector](http://localhost:5173), switch the Transport Type to `SSE` and enter `http://localhost:8787/sse` as the URL of the MCP server to connect to, and click "Connect"
30+
- You will navigate to a (mock) user/password login screen. Input any email and pass to login.
31+
- You should be redirected back to the MCP Inspector and you can now list and call any defined tools!
32+
33+
<div align="center">
34+
<img src="img/mcp-inspector-sse-config.png" alt="MCP Inspector with the above config" width="600"/>
35+
</div>
36+
37+
<div align="center">
38+
<img src="img/mcp-inspector-successful-tool-call.png" alt="MCP Inspector with after a tool call" width="600"/>
39+
</div>
40+
41+
## Connect Claude Desktop to your local MCP server
42+
43+
The MCP inspector is great, but we really want to connect this to Claude! Follow [Anthropic's Quickstart](https://modelcontextprotocol.io/quickstart/user) and within Claude Desktop go to Settings > Developer > Edit Config to find your configuration file.
44+
45+
Open the file in your text editor and replace it with this configuration:
46+
47+
```json
48+
{
49+
"mcpServers": {
50+
"math": {
51+
"command": "npx",
52+
"args": [
53+
"mcp-remote",
54+
"http://localhost:8787/sse"
55+
]
56+
}
57+
}
58+
}
59+
```
60+
61+
This will run a local proxy and let Claude talk to your MCP server over HTTP
62+
63+
When you open Claude a browser window should open and allow you to login. You should see the tools available in the bottom right. Given the right prompt Claude should ask to call the tool.
64+
65+
<div align="center">
66+
<img src="img/available-tools.png" alt="Clicking on the hammer icon shows a list of available tools" width="600"/>
67+
</div>
68+
69+
<div align="center">
70+
<img src="img/claude-does-math-the-fancy-way.png" alt="Claude answers the prompt 'I seem to have lost my calculator and have run out of fingers. Could you use the math tool to add 23 and 19?' by invoking the MCP add tool" width="600"/>
71+
</div>
72+
73+
## Deploy to Cloudflare
74+
75+
1. `npx wrangler kv namespace create OAUTH_KV`
76+
2. Follow the guidance to add the kv namespace ID to `wrangler.jsonc`
77+
3. `npm run deploy`
78+
79+
## Call your newly deployed remote MCP server from a remote MCP client
80+
81+
Just like you did above in "Develop locally", run the MCP inspector:
82+
83+
`npx @modelcontextprotocol/inspector@latest`
84+
85+
Then enter the `workers.dev` URL (ex: `worker-name.account-name.workers.dev/sse`) of your Worker in the inspector as the URL of the MCP server to connect to, and click "Connect".
86+
87+
You've now connected to your MCP server from a remote MCP client.
88+
89+
## Connect Claude Desktop to your remote MCP server
90+
91+
Update the Claude configuration file to point to your `workers.dev` URL (ex: `worker-name.account-name.workers.dev/sse`) and restart Claude
92+
93+
```json
94+
{
95+
"mcpServers": {
96+
"math": {
97+
"command": "npx",
98+
"args": [
99+
"mcp-remote",
100+
"https://worker-name.account-name.workers.dev/sse"
101+
]
102+
}
103+
}
104+
}
105+
```
106+
107+
## Debugging
108+
109+
Should anything go wrong it can be helpful to restart Claude, or to try connecting directly to your
110+
MCP server on the command line with the following command.
111+
112+
```bash
113+
npx mcp-remote http://localhost:8787/sse
114+
```
115+
116+
In some rare cases it may help to clear the files added to `~/.mcp-auth`
117+
118+
```bash
119+
rm -rf ~/.mcp-auth
120+
```
File renamed without changes.
91.5 KB
Loading
466 KB
Loading

doit-mcp-server/img/doit-logo.svg

Lines changed: 6 additions & 0 deletions
Loading
403 KB
Loading
333 KB
Loading
487 KB
Loading

doit-mcp-server/img/mcp-login.png

426 KB
Loading

0 commit comments

Comments
 (0)