Workers + Stytch TODO App MCP Server

Workers + Stytch TODO 应用 MCP 服务

这是一个 Workers 服务，组合了三个功能：

• 基于 Worker Assets 使用 React 和 Vite 构建的静态网站
• 基于 Workers KV 使用 Hono 构建的 REST API
• 基于 Workers Durable Objects 构建的 Model Context Protocol 服务

用户和客户端身份由 Stytch 管理。结合这三个功能，可以展示如何扩展传统的全栈应用，以供 AI Agent 使用。

此演示使用 Stytch Consumer 产品，该产品专为 Consumer SaaS 身份验证需求打造。 如果你对 Stytch 的 B2B 产品更感兴趣，请参阅此演示。

设置

按照以下步骤，使用你自己的 Stytch 凭据完成应用配置并运行。

在 Stytch 控制面板中

1. 创建一个 Stytch 账户。在注册流程中，将 Consumer Authentication 选为你感兴趣的身份验证类型。账户设置完成后，系统会自动为你创建一个名为“My first project”的项目。

2. 前往 Frontend SDKs，在 Test 环境中启用 Frontend SDK。

3. 前往 Connected Apps，启用 Dynamic Client Registration。

4. 前往 Project Settings，查看你的 Project ID 和 API 密钥。稍后会用到这些值。

在你的计算机上

在终端中克隆项目并安装依赖项：

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

接下来，运行以下命令，从 .env.template 复制内容以创建 .env.local 文件。

cp .env.template .env.local

使用你选择的文本编辑器打开 .env.local，并使用 Project Settings 中的 public_token 设置环境变量。

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

运行以下命令，从 .dev.vars.template 复制内容以创建 .dev.vars 文件。

cp .dev.vars.template .dev.vars

使用你选择的文本编辑器打开 .dev.vars，并使用 Project Settings 中的 Project ID、Secret 和 Project Domain 设置环境变量。

// 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
STYTCH_DOMAIN=https://cname-word-1234.customers.stytch.dev

在本地运行

完成上述所有设置步骤后，可以运行以下命令启动应用：

npm run dev

应用将在 http://localhost:3000 上提供，MCP 服务将在 http://localhost:3000/mcp 上提供。

使用 MCP Inspector 测试你的 MCP 服务

npx @modelcontextprotocol/inspector@latest

前往 Inspector 运行的 URL，并输入以下值：

• 传输类型：Streamable HTTP
• URL：http://localhost:3000/mcp

部署到 Cloudflare Workers

点击按钮——首次部署后，你需要配置环境变量。

或者，如果你想手动操作，请按以下步骤进行：

1. 为 TODO 应用创建一个 KV 命名空间

wrangler kv namespace create TODOS

2. 使用你收到的 ID 更新 wrangler.jsonc 中的 KV 命名空间 ID：

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

3. 上传 Stytch 环境变量，供 Worker 使用

npx wrangler secret bulk .dev.vars

4. 部署 Worker

npm run deploy

5. 授予你的部署访问 Stytch 项目的权限。假设你的 Stytch 项目部署在 https://mcp-stytch-consumer-todo-list.$YOUR_ACCOUNT_NAME.workers.dev：
   1. 将 https://mcp-stytch-consumer-todo-list.$YOUR_ACCOUNT_NAME.workers.dev/authenticate 添加为允许的重定向 URL
   2. 在 Frontend SDKs 配置中，将 https://mcp-stytch-consumer-todo-list.$YOUR_ACCOUNT_NAME.workers.dev 添加为允许的 Authorized Application

获取帮助并加入社区

:speech_balloon: Stytch 社区 Slack

加入讨论、提出问题，并为我们的新功能提供建议，欢迎访问 Slack 社区！