MCP Stytch Consumer Todo List

🚀 工人 + Stytch TODO アプリケーション MCP サーバ

このサーバは3つの機能から構成されるワーカーサーバです。

• Worker アセット をベースに、React と Vite で構築された静的ウェブサイト
• Workers KV をベースに、Hono で構築された REST API
• ワーカー永続オブジェクト をベースに、モデルコンテキストプロトコル サーバ

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

このデモでは、消費者向け SaaS 認証のニーズに合わせた Stytch コンシューマー を使用しています。 Stytch の B2B 製品に興味がある場合は、このデモ をご覧ください。

🚀 クイックスタート

以下の手順に従って設定を完了し、独自の Stytch 資格情報を使用してこのアプリケーションを完全に機能させます。

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 コミュニティ で議論し、質問し、新機能の提案を行いましょう！