README.md•3.65 kB
# Model Context Protocol (MCP) Server + Google OAuth
This is a [Model Context Protocol (MCP)](https://modelcontextprotocol.io/introduction) server that supports remote MCP connections, with Google OAuth built-in.
## Getting Started
Clone the repo & install dependencies: `pnpm install`
### For Production
Create a new [Google Cloud OAuth App](https://cloud.google.com/iam/docs/workforce-manage-oauth-app):
- For the Homepage URL, specify `http://localhost:8788`
- For the Authorization callback URL, specify `http://localhost:8788/callback`
- Note your Client ID and generate a Client secret.
#### Set up a KV namespace
- Create the KV namespace: `pnpm dlx wrangler kv namespace create OAUTH_KV`
- Update the Wrangler file with the KV ID
#### Deploy & Test
You can use Cloudflare to deploy the MCP server to make it available on your workers.dev domain
`npx wrangler deploy`
Test the remote server using [Inspector](https://modelcontextprotocol.io/docs/tools/inspector):
```bash
npx @modelcontextprotocol/inspector@latest
```
1. Select `SSE` in place of `STDIO`.
Enter `http://localhost:8788/sse` (devlopment) or `https://mcp-google-oauth.<your-subdomain>.workers.dev/sse`, select `Quick Refresh` and hit `Connect` in the sidebar. Once you go through the google authentication flow (signing in via google), you'll see the `list tools` button, click on it to test the tools manually.
You now have a remote MCP server deployed and also working in the dev environment!
### 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.
```bash
{
"mcpServers": {
"math": {
"command": "npx",
"args": [
"mcp-remote",
"https://mcp-google-oauth.<your-subdomain>.workers.dev/sse"
]
}
}
}
```
Once the Tools (under 🔨) show up in the interface, you can ask Claude to use them. For example: "Could you use the math tool to add 23 and 19?". Claude should invoke the tool and show the result generated by the MCP server.
### For Local Development
If you'd like to iterate and test your MCP server, you can do so in local development. This will require you to create another OAuth App on Google Cloud:
- For the Homepage URL, specify `http://localhost:8788`
- For the Authorization callback URL, specify `http://localhost:8788/callback`
- Note your Client ID and generate a Client secret.
- Create a `.dev.vars` file in your project root with:
```bash
GOOGLE_CLIENT_ID=your_development_google_cloud_oauth_client_id
GOOGLE_CLIENT_SECRET=your_development_google_cloud_oauth_client_secret
```
#### Develop & Test
Run the server locally to make it available at `http://localhost:8788`
`wrangler dev`
To test the local server, enter `http://localhost:8788/sse` into Inspector and hit connect. Once you follow the prompts, you'll be able to "List Tools".
#### Using Claude and other MCP Clients
When using Claude to connect to your remote MCP server, you may see some error messages. This is because Claude Desktop doesn't yet support remote MCP servers, so it sometimes gets confused. To verify whether the MCP server is connected, hover over the 🔨 icon in the bottom right corner of Claude's interface. You should see your tools available there.