MCP Stytch Consumer Todo List

これはCloudflare Workersに基づくフルスタックアプリケーションで、Reactフロントエンド、REST API、MCPサーバー機能を組み合わせ、Stytchを使用してユーザー認証を行います。このプロジェクトは、従来のアプリケーションをAIエージェントをサポートするソリューションに拡張する方法を示しています。

開発者ツール日程管理 #認証 #フルスタックアプリケーション #AIエージェント .TypeScript

スコア : 2.5ポイント

ダウンロード数 : 26

更新時間 : 2025-04-28

Stytch TODOアプリとは何ですか？

これは、ユーザー認証、REST API、AIエージェントとのインタラクション機能を統合した最新のタスク管理アプリケーションです。アプリのフロントエンドはReactを使用して構築され、バックエンドはCloudflare Workers技術スタックを使用しています。

このアプリをどのように使用しますか？

ユーザーはブラウザを通じてアプリケーションのインターフェイスにアクセスし、TODO事項を管理することができます。AIエージェントはMCPプロトコルを通じてサーバーとやり取りすることができます。

適用シナリオ

個人のタスク管理、チーム協力、およびAIアシスタントによるタスク処理が必要なシナリオに適しています。

主要機能

ユーザー認証Stytchを使用して安全なユーザーログインとID管理を行います。

タスク管理APIREST APIを通じてタスクの追加、削除、更新、検索操作を行います。

MCPプロトコルサポートAIエージェントがModel Context Protocolを通じてサーバーとやり取りできるようにサポートします。

Cloudflare統合Workers、KVストレージ、Durable Objectsなどの技術を使用します。

利点と制限

利点

迅速なデプロイ - Cloudflare Workersにワンクリックでデプロイできます。

安全で信頼性が高い - Stytchを使用して専門的な認証を行います。

AIに友好的 - 組み込みのMCPプロトコルでAIエージェントとのインタラクションをサポートします。

高性能 - Cloudflareエッジネットワークに基づいています。

制限

Cloudflareアカウントが必要です。

無料プランにはリソース制限があります。

MCPプロトコルには特定のクライアントのサポートが必要です。

使い方

Stytchアカウントを設定する

Stytchダッシュボードでプロジェクトを作成し、APIキーを取得します。

環境変数を設定する

.env.templateを.env.localにコピーし、あなたのStytch公開キーを入力します。

ローカルで実行する

開発サーバーを起動します。

Cloudflareにデプロイする

ワンクリックでデプロイするか、KVストレージを手動で設定してからデプロイします。

使用例

個人のタスク管理ユーザーはブラウザのインターフェイスを通じて毎日のTODO事項を管理します。

AIアシスタントの統合AIエージェントはMCPプロトコルを通じてユーザーのタスクを読み取り、更新します。

よくある質問

このアプリを使用するには料金がかかりますか？

MCPサーバーの機能をどのようにテストしますか？

アプリケーションのデータはどこに保存されますか？

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

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

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

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

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

🚀 クイックスタート

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

Stytch ダッシュボードでの設定

Stytch アカウントを作成します。登録プロセスでは、認証タイプとして コンシューマー認証 を選択します。アカウント設定が完了すると、自動的に「私の最初のプロジェクト」という名前のプロジェクトが作成されます。
フロントエンド SDK 設定に移動し、フロントエンド SDK（テスト環境）を有効にします。
接続されたアプリケーションに移動し、動的クライアント登録を有効にします。
プロジェクト設定に移動し、プロジェクト ID と API トークンを確認します。これらの値は後で必要になります。

ローカル環境での設定

ターミナルでリポジトリをクローンし、以下のコマンドを実行します。

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

ローカルでの実行

.env.local ファイルを作成します。

touch .env.local

以下の内容を .env.local に追加します。

STYTH_PUBLIC_KEY=your_stytch_public_key
STYTH_PRIVATE_KEY=your_stytch_private_key
STYTH_PROJECT_ID=your_stytch_project_id

.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

アプリケーションを起動します。

npm run dev

Cloudflare Workers へのデプロイ

KV ネームスペースを作成し、wrangler.ts ファイルの ID を更新します。
Stytch 環境変数をアップロードします。

npx wrangler secret bulk .dev.vars

ワーカーをデプロイします。

npm run deploy

Stytch で許可されるアプリケーション URL を追加します。
- https://mcp-stytch-consumer-todo.$YOUR_ACCOUNT_NAME.workers.dev/authenticate をリダイレクト URL として追加します。
- https://mcp-stytch-consumer-todo.$YOUR_ACCOUNT_NAME.workers.dev を承認済みアプリケーションとして追加します。