Authenticated MCP with Netlify and Stytch
A starter example for using Netlify serverless functions and Stytch Identity to provide an authenticated MCP server exposing user-scoped data to agents.
Model Context Protocol (MCP) and OAuth
MCP is a lightweight protocol built to allow AI agents/clients to interact with servers to provide dynamic content, prompting, and tool calling. This is very important for websites wanting to provide a great agent experience (AX) through allowing agents to work dynamically with information and capabilities on the server.
OAuth is a set of protocols that allow web apps to share information with each other on behalf of a user, without sharing any account credentials. This allows users to share their information with agents in a secure, auditable, revocable way. Websites wanting to share user data with agents must become OAuth Identity Providers in order to issue access tokens for use with MCP.
Try out this example
Using an MCP Client
Provide the following configuration to your MCP client. The MCP client will trigger an OAuth login flow, giving you the ability to delegate access to your protected resources. After approving access, you will be able to see the tools, prompts, resources, etc. available to the agent.
{
"mcpServers": {
"stytch-netlify-todo-app": {
"command": "npx",
"args": [
"mcp-remote@next",
"https://stytch-auth-mcp.netlify.app/mcp",
"--host",
"127.0.0.1"
]
}
}
}
Using the MCP Inspector
MCP comes with an inspector tool for testing the server locally or remotely. Run the following command in your terminal to use the inspector. After connecting, you will see the tools, prompts, resources, etc. available to the agent.
npx @modelcontextprotocol/inspector npx mcp-remote@next https://stytch-auth-mcp.netlify.app/mcp
Deploy your own
A great place to start is to clone and deploy your own copy of this example. You can do that by clicking the button below.
Clicking the button will clone this example from the examples repo and deploy it as a new site on Netlify