이것은 3개의 기능을 구성하는 노동자 서버입니다:

• React 및 Vite를 사용하여 내장 된 정적 웹 사이트
• 작업자 KV의 상단에 Hono를 사용하는 REST API
• Workers 튼튼한 목표의 정상에 사용된 모형 Context 의정서 서버

사용자 및 클라이언트 ID는 Stytch를 사용하여 관리됩니다. 함께 넣어, 이 세 가지 기능은 AI 에이전트에 의해 사용을위한 전통적인 풀 스택 응용 프로그램을 확장하는 방법을 보여줍니다.

이 데모는 소비자 SaaS 인증 요구 사항에 적합한 Stytch Consumer 제품을 사용합니다. Stytch의 B2B 제품에 관심이 있다면 이 데모를 참조하세요.

설정

아래 단계를 따라이 응용 프로그램을 완전히 기능하고 자신의 Stytch 자격 증명을 사용하여 실행하십시오.

Stytch 대시보드에서

1. Stytch 계정 만들기. Flow select Consumer Authentication에서 관심있는 인증 유형이 있습니다. 계정이 "내 첫 번째 프로젝트"라는 프로젝트를 설정하면 자동으로 생성됩니다.

2. 프론트엔드 SDK를 사용하여 테스트에서 프론트엔드 SDK를 활성화합니다.

3. Dynamic Client 등록을 가능하게 하는 Connected Apps에 Navigate

4. 명세.

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