Skip to content

Commit 732159e

Browse files
mor10Oxyjun
andauthored
Update remote-mcp-server.mdx to address various errors (#23999)
* Update remote-mcp-server.mdx to address various errors and new features. Fixes #23998 * Update src/content/docs/agents/guides/remote-mcp-server.mdx --------- Co-authored-by: Jun Lee <[email protected]>
1 parent b30d615 commit 732159e

File tree

1 file changed

+41
-11
lines changed

1 file changed

+41
-11
lines changed

src/content/docs/agents/guides/remote-mcp-server.mdx

Lines changed: 41 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -114,7 +114,7 @@ This is especially useful if users already need to log in to use your service. O
114114

115115
In this example, we use GitHub as an OAuth provider, but you can connect your MCP server with any [OAuth provider](/agents/model-context-protocol/authorization/#2-third-party-oauth-provider) that supports the OAuth 2.0 specification, including Google, Slack, [Stytch](/agents/model-context-protocol/authorization/#stytch), [Auth0](/agents/model-context-protocol/authorization/#stytch), [WorkOS](/agents/model-context-protocol/authorization/#stytch), and more.
116116

117-
### Step 1 — Create and deploy a new MCP server
117+
### Step 1 — Create a new MCP server
118118

119119
Run the following command to create a new MCP server:
120120

@@ -132,12 +132,6 @@ Now, you have the MCP server setup, with dependencies installed. Move into that
132132
cd my-mcp-server-github-auth
133133
```
134134

135-
Then, run the following command to deploy the MCP server:
136-
137-
```sh
138-
npx wrangler@latest deploy
139-
```
140-
141135
You'll notice that in the example MCP server, if you open `src/index.ts`, the primary difference is that the `defaultHandler` is set to the `GitHubHandler`:
142136

143137
```ts ins="OAuthProvider.GitHubHandler"
@@ -164,8 +158,8 @@ You'll need to create two [GitHub OAuth Apps](https://docs.github.com/en/apps/oa
164158
Navigate to [github.com/settings/developers](https://github.com/settings/developers) to create a new OAuth App with the following settings:
165159

166160
- **Application name**: `My MCP Server (local)`
167-
- **Homepage URL**: `http://localhost:8787`
168-
- **Authorization callback URL**: `http://localhost:8787/callback`
161+
- **Homepage URL**: `http://localhost:8788`
162+
- **Authorization callback URL**: `http://localhost:8788/callback`
169163

170164
For the OAuth app you just created, add the client ID of the OAuth app as `GITHUB_CLIENT_ID` and generate a client secret, adding it as `GITHUB_CLIENT_SECRET` to a `.dev.vars` file in the root of your project, which [will be used to set secrets in local development](/workers/configuration/secrets/).
171165

@@ -198,9 +192,13 @@ Open the MCP inspector in your web browser:
198192
open http://localhost:5173
199193
```
200194

201-
In the inspector, enter the URL of your MCP server, `http://localhost:8788/sse`, and click **Connect**:
195+
In the inspector, set **Transport Type** to `SSE` and enter the URL of your MCP server, `http://localhost:8788/sse`
202196

203-
You should be redirected to a GitHub login or authorization page. After authorizing the MCP Client (the inspector) access to your GitHub account, you will be redirected back to the inspector. You should see the "List Tools" button, which will list the tools that your MCP server exposes.
197+
In the main panel on the right, click the **Open OAuth Settings** button and then click **Quick OAuth Flow**.
198+
199+
You should be redirected to a GitHub login or authorization page. After authorizing the MCP Client (the inspector) access to your GitHub account, you will be redirected back to the inspector.
200+
201+
Click **Connect** in the sidebar and you should see the "List Tools" button, which will list the tools that your MCP server exposes.
204202

205203
#### Second — create a new OAuth App for production
206204

@@ -222,6 +220,38 @@ wrangler secret put GITHUB_CLIENT_ID
222220
wrangler secret put GITHUB_CLIENT_SECRET
223221
```
224222

223+
```
224+
npx wrangler secret put COOKIE_ENCRYPTION_KEY # add any random string here e.g. openssl rand -hex 32
225+
```
226+
227+
:::caution
228+
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.
229+
:::
230+
231+
#### Set up a KV namespace
232+
- Create the KV namespace:
233+
```bash
234+
npx wrangler kv namespace create "OAUTH_KV"
235+
```
236+
- Update the `wrangler.jsonc` file with the resulting KV ID:
237+
238+
```json
239+
{
240+
"kvNamespaces": [
241+
{
242+
"binding": "OAUTH_KV",
243+
"id": "<YOUR_KV_NAMESPACE_ID>"
244+
}
245+
]
246+
}
247+
```
248+
#### Deploy your server
249+
250+
Deploy the MCP server to your Cloudflare `workers.dev` domain:
251+
```bash
252+
npm run deploy
253+
```
254+
225255
#### Finally, connect to your MCP server
226256

227257
Now that you've added the ID and secret of your production OAuth app, you should now be able to connect to your MCP server running at `worker-name.account-name.workers.dev/sse` using the [AI Playground](https://playground.ai.cloudflare.com/), MCP inspector or ([other MCP clients](/agents/guides/remote-mcp-server/#connect-your-mcp-server-to-claude-and-other-mcp-clients)), and authenticate with GitHub.

0 commit comments

Comments
 (0)