Connecting claude.ai
Set up claude.ai web custom connectors with OAuth for seamless MCP integration
Overview
Claude.ai (the web interface) supports MCP through custom connectors. Unlike Desktop or Code, the web version uses a full OAuth 2.1 + PKCE flow. The good news: it's mostly automatic. Claude registers itself and handles tokens — you just paste your API key once.
Prerequisites
- A claude.ai account with access to custom connectors
- An active API key (generate one here)
- Your platform URL (e.g.,
https://api.v2.affinitydesign.ca)
How It Works
Your platform implements the complete OAuth 2.1 authorization server:
- Dynamic Client Registration (RFC 7591) — Claude registers itself automatically
- Protected Resource Metadata (RFC 9728) — Claude discovers auth endpoints
- Authorization Server Metadata (RFC 8414) — Standard OAuth discovery
- PKCE with S256 — Secure authorization code flow
- Refresh token rotation — New refresh token issued on every exchange
Tokens are signed JWTs (HS256) bound to your client's origin:
- Access tokens: 1 hour expiry
- Refresh tokens: 30 days expiry
Step-by-Step Connection
1. Open Custom Connectors
In claude.ai:
- Click your profile → Customize
- Go to the Connectors tab
- Click Add custom connector
2. Enter Your Platform URL
| Field | Value |
|---|---|
| URL | https://api.v2.affinitydesign.ca/mcp/http |
| OAuth Client ID | Leave blank (Claude auto-registers) |
| OAuth Client Secret | Leave blank |
3. Connect
Click Connect. Claude will:
- Fetch
/.well-known/oauth-protected-resourceto discover auth endpoints - Register itself via
POST /oauth/register - Redirect you to the sign-in form
4. Authenticate with Your API Key
You'll see a dark-themed form titled "Authorize Claude":
- Paste your
afk_...API key into the field - Click Authorize
The server resolves your client from the key and issues an authorization code. Claude exchanges it for access/refresh tokens automatically.
5. Start Using Tools
Once connected, Claude shows a tools indicator in chat. You can now ask things like:
"Check my GHL calendar for tomorrow and book a follow-up call with the lead who called today"
"Run a GA4 report on last month's traffic and create a summary in my WordPress drafts"
Security Notes
- Your API key is only used once during the OAuth flow. It's not stored by Claude.
- Tokens are scoped to the specific client resolved from your API key.
- Plugin restrictions from the API key are inherited — if your key only allows
ga4andgbp, Claude can only use those plugins. - No admin access: You cannot use an admin JWT for the web connector. It must be a client-scoped API key.
Managing Connections
View Active Sessions
As an admin, you can view active MCP sessions:
GET /mcp/sessions
Authorization: Bearer YOUR_ADMIN_JWT
This returns:
- Session IDs
- Client IDs
- Initialization status
- Plugin counts
Revoke Access
To disconnect Claude:
- Go to claude.ai → Customize → Connectors
- Find your connector
- Click Disconnect
This invalidates the session on Claude's side. The tokens on your platform expire naturally (1 hour for access tokens).
Force Logout (Admin)
If you need to immediately terminate all sessions for a client, rotate their API keys:
- Revoke the old key in Admin → Clients → API Keys
- Generate a new key
- Re-authenticate Claude with the new key
Troubleshooting
"Unable to connect" during setup
- Verify your platform URL is correct and publicly accessible
- Ensure
/.well-known/oauth-protected-resourceis reachable - Check that the client is Active in your admin dashboard
"Invalid API key" during authorization
- The key may have been revoked or the client deactivated
- Verify you're using the full raw key (not just the prefix)
- Ensure the key has
mcp:accessscope
Tools disappear after an hour
- This is normal — access tokens expire after 1 hour
- Claude should auto-refresh using the refresh token
- If it doesn't, disconnect and reconnect the connector
"Unauthorized" on every request
- The OAuth client may have been deleted or changed
- Try disconnecting and reconnecting the connector in Claude's settings
