What is Mcp Stytch Consumer Todo List

mcp-stytch-consumer-todo-list is a Workers server that combines a static TODO app website, a TODO REST API, and a TODO Model Context Protocol Server, all utilizing Stytch for user and client identity management.

Use cases

Use cases include personal task management applications, collaborative project management tools, and AI-driven productivity applications that require secure user authentication.

How to use

To use mcp-stytch-consumer-todo-list, set up a Stytch account, configure the necessary SDKs and project settings, clone the repository, install dependencies, set environment variables, and run the application locally or deploy it to Cloudflare Workers.

Key features

Key features include a static TODO app built with React and Vite, a REST API using Hono, and a Model Context Protocol Server utilizing Workers Durable Objects, all integrated with Stytch for authentication.

Where to use

mcp-stytch-consumer-todo-list can be used in web development projects that require task management functionalities, particularly those that involve user authentication and AI integration.

Workers + Stytch TODO App MCP Server

This is a Workers server that composes three functions:

• A static website built using React and Vite on top of Worker Assets
• A REST API built using Hono on top of Workers KV
• A Model Context Protocol Server built using on top of Workers Durable Objects

User and client identity is managed using Stytch. Put together, these three features show how to extend a traditional full-stack application for use by an AI agent.

This demo uses the Stytch Consumer product, which is purpose-built for Consumer SaaS authentication requirements.
If you are more interested in Stytch’s B2B product, see this demo instead.

Set up

Follow the steps below to get this application fully functional and running using your own Stytch credentials.

In the Stytch Dashboard

1. Create a Stytch account. Within the sign up flow select Consumer Authentication as the authentication type you are interested in. Once your account is set up a Project called “My first project” will be automatically created for you.

2. Navigate to Frontend SDKs to enable the Frontend SDK in Test

3. Navigate to Connected Apps to enable Dynamic Client Registration

4. Navigate to Project Settings to view your Project ID and API keys. You will need these values later.

On your machine

In your terminal clone the project and install dependencies:

git clone https://github.com/stytchauth/mcp-stytch-consumer-todo-list.git
cd mcp-stytch-consumer-todo-list
npm i

Next, create an .env.local file by running the command below which copies the contents of .env.template.

cp .env.template .env.local

Open .env.local in the text editor of your choice, and set the environment variables using the public_token found on Project Settings.

# This is what a completed .env.local file will look like
VITE_STYTCH_PUBLIC_TOKEN=public-token-test-abc123-abcde-1234-0987-0000-abcd1234

Create a .dev.vars file by running the command below which copies the contents of .dev.vars.template

cp .dev.vars.template .dev.vars

Open .dev.vars in the text editor of your choice, and set the environment variables using the Project ID and Secret found on Project Settings.

// This is what a completed .dev.vars file will look like
STYTCH_PROJECT_ID=project-test-6c20cd16-73d5-44f7-852c-9a7e7b2ccf62
STYTCH_SECRET=your-stytch-secret-key

Running locally

After completing all the setup steps above the application can be run with the command:

npm run dev

The application will be available at http://localhost:3000 and the MCP server will be available at http://localhost:3000/sse.

Test your MCP server using the MCP Inspector

npx @modelcontextprotocol/inspector@latest

Deploy to Cloudflare Workers

Click the button - you’ll need to configure environment variables after the initial deployment.

Or, if you want to follow the steps by hand:

1. Create a KV namespace for the TODO app to use

wrangler kv namespace create TODOS

2. Update the KV namespace ID in wrangler.jsonc with the ID you received:

"kv_namespaces": [
   {
      "binding": "TODOS",
      "id": "your-kv-namespace-id"
   }
]

3. Upload your Stytch Env Vars for use by the worker

npx wrangler secret bulk .dev.vars

4. Deploy the worker

npm run deploy

5. Grant your deployment access to your Stytch project. Assuming your Stytch project was deployed at https://mcp-stytch-consumer-todo-list.$YOUR_ACCOUNT_NAME.workers.dev:
   1. Add https://mcp-stytch-consumer-todo-list.$YOUR_ACCOUNT_NAME.workers.dev/authenticate as an allowed Redirect URL
   2. Add https://mcp-stytch-consumer-todo-list.$YOUR_ACCOUNT_NAME.workers.dev as an allowed Authorized Application in the Frontend SDKs configuration

Get help and join the community

:speech_balloon: Stytch community Slack

Join the discussion, ask questions, and suggest new features in our Slack community!