3つの機能を構成するワーカーサーバです。

• 作業者の資産の上に React と Vite を使用して構築された静的なウェブサイト
• Workers KV の上に Hono を使用して構築された REST API
• Workersの耐久の目的の上で使用されるモデルコンテキスト プロトコル サーバー

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

このデモは、消費者SaaS認証要件の目的で構築されたStytch Consumer製品を使用しています。 StytchのB2B製品に興味がある場合は、代わりにこのデモを参照してください。

セットアップ

以下の手順に従って、このアプリケーションを完全に機能し、独自のStytch認証を使用して実行します。

##Stytchダッシュボードで

1。 Stytchアカウントを作成します。 サインアップフロー内で、関心のある認証タイプとしてConsumer Authenticationを選択します。 アカウントが「マイファーストプロジェクト」というプロジェクトを設定すると、自動的に作成されます。

2。 フロントエンドSDKにナビゲートして、テストでフロントエンドSDKを有効にします

3。 接続されたアプリに移動して、動的クライアント登録を有効にします

Workers + Stytch TODO App MCP Server

This is a Workers server that composes three functions:

• A static website built using React and Vite on top of Worker Assets
• A REST API built using Hono on top of Workers KV
• A Model Context Protocol Server built using on top of Workers Durable Objects

User and client identity is managed using Stytch. Put together, these three features show how to extend a traditional full-stack application for use by an AI agent.

This demo uses the Stytch Consumer product, which is purpose-built for Consumer SaaS authentication requirements. If you are more interested in Stytch’s B2B product, see this demo instead.

Set up

Follow the steps below to get this application fully functional and running using your own Stytch credentials.

In the Stytch Dashboard

1. Create a Stytch account. Within the sign up flow select Consumer Authentication as the authentication type you are interested in. Once your account is set up a Project called “My first project” will be automatically created for you.

2. Navigate to Frontend SDKs to enable the Frontend SDK in Test

3. Navigate to Connected Apps to enable Dynamic Client Registration

4. Navigate to Project Settings to view your Project ID and API keys. You will need these values later.

On your machine

In your terminal clone the project and install dependencies:

git clone https://github.com/stytchauth/mcp-stytch-consumer-todo-list.git
cd mcp-stytch-consumer-todo-list
npm i

Next, create an .env.local file by running the command below which copies the contents of .env.template.

cp .env.template .env.local

Open .env.local in the text editor of your choice, and set the environment variables using the public_token found on Project Settings.

# This is what a completed .env.local file will look like
VITE_STYTCH_PUBLIC_TOKEN=public-token-test-abc123-abcde-1234-0987-0000-abcd1234

Create a .dev.vars file by running the command below which copies the contents of .dev.vars.template

cp .dev.vars.template .dev.vars

Open .dev.vars in the text editor of your choice, and set the environment variables using the Project ID, Secret, and Project Domain found on Project Settings.

// This is what a completed .dev.vars file will look like