这是一个由三个函数组成的 Workers 服务器：

• 一个静态网站，基于React和Vite构建，基于Worker Assets。
• 一个REST API，基于Hono构建在Workers KV之上
• 基于Workers Durable Object构建的模型上下文协议服务器

用户和客户端身份均通过Stytch进行管理。综合来看，这三个功能展示了如何将传统全栈应用扩展到AI代理使用。

本次演示使用了专为消费者SaaS认证需求设计的Stytch Consumer产品。 如果你对Stytch的B2B产品更感兴趣，可以看看这个演示。

布置

请按照以下步骤操作，使用您自己的Stytch账号让该应用完全正常运行。

在斯蒂奇仪表盘

1. 创建一个Stytch账户。在注册流程中选择消费者认证作为你感兴趣的认证类型。账户设置完成后，一个名为“我的第一个项目”的项目将自动为你创建。

2. 导航到前端SDK，在测试中启用前端SDK。

3. 导航至已连接应用以启用动态客户端注册

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, Secret, and Project Domain found on Project Settings.

// This is what a completed .dev.vars file will look like