Workers + Stytch TODO App MCP Server

Workers + Stytch TODO アプリ MCP サーバー

これは 3 つの機能を組み合わせた Workers サーバーです：

• Worker Assets 上に React と Vite を使って構築された静的ウェブサイト
• Workers KV 上に Hono を使って構築された REST API
• Workers Durable Objects 上に構築された Model Context Protocol サーバー

ユーザーとクライアントの ID は Stytch を使って管理されています。これら 3 つの機能を組み合わせることで、従来のフルスタックアプリケーションを AI エージェントが利用できるように拡張する方法を示しています。

このデモでは、Consumer SaaS の認証要件に特化して設計された Stytch Consumer 製品を使用しています。 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 に移動し、プロジェクト 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 に移動し、以下の値を入力します：

• Transport Type: Streamable HTTP
• URL: http://localhost:3000/mcp

Cloudflare Workers へのデプロイ

ボタンをクリックしてください - 初回デプロイ後に環境変数を設定する必要があります。

または、手動で手順を進めたい場合は次のとおりです。

1. TODO アプリが使用する KV 名前空間を作成します

wrangler kv namespace create TODOS

2. wrangler.jsonc 内の KV 名前空間 ID を、受け取った ID で更新します:

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

3. ワーカーが使用する Stytch 環境変数をアップロードします

npx wrangler secret bulk .dev.vars

4. ワーカーをデプロイします

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. https://mcp-stytch-consumer-todo-list.$YOUR_ACCOUNT_NAME.workers.dev を、フロントエンド SDK 構成の許可されたアプリケーションとして追加します

ヘルプとコミュニティへの参加

:speech_balloon: Stytch コミュニティ Slack

Slack コミュニティでディスカッションに参加したり、質問したり、新機能を提案したりしましょう！