MCP Stytch Consumer Todo List

🚀 Worker + Stytch TODO App MCP Server

This is a worker server composed of three functions:

• A static website built with React and Vite, based on Worker Assets.
• A REST API built with Hono, based on Workers KV.
• A Model Context Protocol server based on Worker Durable Objects.

User and client identities are managed by Stytch. Combining these three functions demonstrates how to extend a traditional full-stack application for use by AI agents.

This demo uses Stytch Consumer, a product designed for consumer SaaS authentication needs. If you're more interested in Stytch's B2B products, check out this demo.

🚀 Quick Start

📦 Installation

Follow these steps to complete the setup and get the application fully functional and running with your own Stytch credentials.

In the Stytch Dashboard

1. Create a Stytch account. Select Consumer Authentication as the authentication type of interest during the registration process. Once your account is set up, a project named "My First Project" will be automatically created.
2. Navigate to Frontend SDK Configuration to enable the frontend SDK (test environment).
3. Navigate to Connected Apps to enable dynamic client registration.
4. Navigate to Project Settings to view your project ID and API token. You'll need these values later.

On Your Machine

Clone the repository in your terminal and run:

git clone https://github.com/your-username/mcp-stytch-consumer-todo.git
cd mcp-stytch-consumer-todo
npm install

💻 Usage Examples

Running Locally

1. Create a .env.local file:

touch .env.local

2. Add the following content to .env.local:

STYTH_PUBLIC_KEY=your_stytch_public_key
STYTH_PRIVATE_KEY=your_stytch_private_key
STYTH_PROJECT_ID=your_stytch_project_id

3. Create a .dev.vars file and add the following content:

echo "STYTH_PUBLIC_KEY=your_stytch_public_key" >> .dev.vars
echo "STYTH_PRIVATE_KEY=your_stytch_private_key" >> .dev.vars
echo "STYTH_PROJECT_ID=your_stytch_project_id" >> .dev.vars

4. Start the application:

npm run dev

Deploying to Cloudflare Workers

1. Create a KV namespace and update the ID in the wrangler.ts file.
2. Upload the Stytch environment variables:

npx wrangler secret bulk .dev.vars

3. Deploy the worker:

npm run deploy

4. Add the allowed application URLs in Stytch:
   • Add https://mcp-stytch-consumer-todo.$YOUR_ACCOUNT_NAME.workers.dev/authenticate as the redirect URL.
   • Add https://mcp-stytch-consumer-todo.$YOUR_ACCOUNT_NAME.workers.dev as the authorized application.

📚 Documentation

Getting Help and Joining the Community

:speech_balloon: Stytch Community Slack

Discuss, ask questions, and suggest new features in our Slack community!