mcp-stytch-consumer-todo-list

This MCP server demonstrates a three-part application: a static React + Vite frontend served via Worker Assets, a REST API built with Hono on top of Cloudflare Workers KV, and a Model Context Protocol (MCP) server implemented with Cloudflare Durable Objects. User and client identity are managed using Stytch, enabling consumer authentication for the app. The MCP bridge allows an AI agent to interact with the frontend, fetch and modify TODO items via the REST API, and participate in Model Context Protocol sessions so the agent can reason about the app state.

• Prerequisites: Node.js (LTS), npm, and optionally Wrangler for Cloudflare deployment.
• Clone the repository and install dependencies:

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

• Create and configure environment files. Copy templates if provided and fill in your Stytch credentials:

cp .env.template .env.local

Edit .env.local to set your Stytch public token and other frontend environment values.

cp .dev.vars.template .dev.vars

Edit .dev.vars with STYTCH_PROJECT_ID, STYTCH_SECRET, and STYTCH_DOMAIN as shown in the README.

• To run locally:

npm run dev

This will start the frontend, API, and MCP server locally. The MCP endpoint will typically be available at http://localhost:3000/mcp.

• Optional Cloudflare deployment ( Wrangler required ):
  1. Create a KV namespace for TODOS and update wrangler.jsonc accordingly.
  2. Upload secrets for Stytch env vars:

npx wrangler secret bulk .dev.vars

3. Deploy the worker:

npm run deploy

• Verify MCP Inspector:

npx @modelcontextprotocol/inspector@latest

Follow the prompts and point the Inspector to http://localhost:3000/mcp (or your deployed MCP URL).

• The MCP server integrates three layers; ensure your Stytch credentials are kept secure and not committed to source control.
• When deploying to Cloudflare Workers, you must create and bind a KV namespace (TODOS) and configure the wrangler.jsonc bindings exactly as shown in the Deploy section.
• The MCP inspector is a useful tool for validating the Streamable HTTP transport and the MCP endpoints exposed by the server.
• If you encounter CORS or KV read/write issues in development, ensure your local environment mirrors the deployed environment’s domain and path structure (e.g., /mcp path).
• You can customize the frontend environment by editing .env.local and the .dev.vars file to suit your Stytch project settings.