MCP Stytch Consumer Todo List

🚀 工人 + Stytch TODO 應用 MCP 服務器

本項目是一個由三個功能模塊構成的工人服務器，它主要展示瞭如何將傳統全棧應用程序擴展為可供人工智能代理使用的形式。具體功能如下：

• 基於 Worker 資產，運用 React 和 Vite 構建的靜態網站。
• 基於 Workers KV，採用 Hono 構建的 REST API。
• 基於 工人持久對象 的 模型上下文協議 服務器。

用戶和客戶端身份由 Stytch 負責管理。該演示使用了 Stytch 消費者，這是專門針對消費者 SaaS 身份驗證需求設計的產品。若您對 Stytch 的 B2B 產品更感興趣，可查看 此演示。

🚀 快速開始

環境準備

在 Stytch 儀表板中

1. 訪問 Stytch 創建賬戶，在註冊流程中選擇 消費者身份驗證 作為感興趣的認證類型。賬戶設置完成後，會自動創建一個名為“我的第一個項目”的項目。
2. 前往 前端 SDK 配置 啟用前端 SDK（測試環境）。
3. 進入 連接的應用程序 啟用動態客戶端註冊。
4. 打開 項目設置 查看項目 ID 和 API 令牌，後續步驟會用到這些值。

在本地機器上

在終端中執行以下命令克隆存儲庫並安裝依賴：

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

本地運行

1. 創建 .env.local 文件：

touch .env.local

2. 向 .env.local 文件添加以下內容：

STYTH_PUBLIC_KEY=your_stytch_public_key
STYTH_PRIVATE_KEY=your_stytch_private_key
STYTH_PROJECT_ID=your_stytch_project_id

3. 創建 .dev.vars 文件並添加相應內容：

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. 啟動應用程序：

npm run dev

部署到 Cloudflare Workers

1. 創建 KV 命名空間，並更新 wrangler.ts 文件中的 ID。
2. 上傳 Stytch 環境變量：

npx wrangler secret bulk .dev.vars

3. 部署工人：

npm run deploy

4. 在 Stytch 中添加允許的應用程序 URL：
   • 添加 https://mcp-stytch-consumer-todo.$YOUR_ACCOUNT_NAME.workers.dev/authenticate 作為重定向 URL。
   • 添加 https://mcp-stytch-consumer-todo.$YOUR_ACCOUNT_NAME.workers.dev 為授權應用程序。

📚 詳細文檔

獲取幫助和加入社區

:speech_balloon: Stytch 社區 Slack

您可以在我們的 Slack 社區 中進行討論、提問以及建議新功能！