麦克佩奇屏蔽消费者待办事项列表
项目介绍
Workers + Stytch TODO App MCP Server
这是一个由三个功能组成的Workers服务器：
- 使用React和Vite构建的静态网站，基于Worker Assets
- 使用Hono构建的REST API，基于Workers KV
- 使用Model Context Protocol构建的服务器，基于Workers Durable Objects
用户和客户端身份管理使用Stytch。这三个功能组合起来展示了如何扩展传统的全栈应用程序以供AI代理使用。
此演示使用了Stytch Consumer产品，该产品专门针对消费者SaaS认证需求设计。 如果您对Stytch的B2B产品更感兴趣，请参阅此演示。
设置
按照以下步骤操作，使用您自己的Stytch凭据使此应用程序完全运行。
在Stytch仪表板中
-
创建一个Stytch账户。在注册流程中选择消费者认证作为您感兴趣的认证类型。一旦您的账户设置完成，将自动为您创建一个名为“我的第一个项目”的项目。
-
导航到前端SDK，启用测试环境中的前端SDK。
-
导航到已连接的应用程序，启用动态客户端注册。
-
导航到项目设置，查看您的项目ID和API密钥。稍后您需要这些值。
在您的机器上
在终端中克隆项目并安装依赖项：
git clone https://github.com/stytchauth/mcp-stytch-consumer-todo-list.git
cd mcp-stytch-consumer-todo-list
npm i
接下来，通过运行以下命令创建一个.env.local文件，该命令复制.env.template的内容。
cp .env.template .env.local
使用您选择的文本编辑器打开.env.local，并使用在项目设置中找到的public_token设置环境变量。
# 这是一个已完成的.env.local文件示例
VITE_STYTCH_PUBLIC_TOKEN=public-token-test-abc123-abcde-1234-0987-0000-abcd1234
通过运行以下命令创建一个.dev.vars文件，该命令复制.dev.vars.template的内容。
cp .dev.vars.template .dev.vars
使用您选择的文本编辑器打开.dev.vars，并使用在项目设置中找到的项目ID、密钥和项目域名设置环境变量。
// 这是一个已完成的.dev.vars文件示例
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，并输入以下值：
- 传输类型：
可流式传输HTTP - URL：
http://localhost:3000/mcp
部署到Cloudflare Workers
点击按钮——初次部署后您需要配置环境变量。
或者，如果您想手动跟随步骤：
- 为TODO应用创建一个KV命名空间
wrangler kv namespace create TODOS
- 更新
wrangler.jsonc中的KV命名空间ID，使用您收到的ID：
"kv_namespaces": [
{
"binding": "TODOS",
"id": "your-kv-namespace-id"
}
]
- 上传您的Stytch环境变量供worker使用
npx wrangler secret bulk .dev.vars
- 部署worker
npm run deploy
- 授予您的部署访问您的Stytch项目的权限。假设您的Stytch项目部署在
https://mcp-stytch-consumer-todo-list.$YOUR_ACCOUNT_NAME.workers.dev：
获取帮助并加入社区
:speech_balloon: Stytch社区Slack
加入讨论，提问，并在我们的Slack社区中提出新功能建议！