mcp.shop

mcp.shop

The world's first MCP-based web shop, built with WorkOS AuthKit and Next.js mcp-adaptor.

• • • •

Overview

This project demonstrates how to use AuthKit with MCP to create a secure web shop where users can:

• Connect to an MCP server
• Authenticate via AuthKit
• Order t-shirts using MCP tools
• View order details (admin users only)

Architecture

The application is built on:

• Next.js B2B Starter Kit for the website
• Vercel MCP Adapter for MCP integration
• WorkOS AuthKit with MCP for authentication

Key components:

• Authentication logic: `lib/with-authkit.ts`
• Client registration: `app/.well-known/`
• MCP implementation: `app/[transport]/route.ts`

Prerequisites

• Node.js (latest LTS version recommended)
• WorkOS account with AuthKit configured
• Redis service (e.g., Upstash)

Setup

1. Clone the repository

2. Install dependencies:

pnpm install

3. Configure environment variables:

Copy `.env.example` to `.env.local` and set each environment variable appropriately.

> Note:

>

> - You can find your WorkOS credentials in the WorkOS dashboard.

> - Make sure to set your redirect URI (`http://localhost:3000/callback` for local development or `https:///callback` for production) in the dashboard.

> - Make sure you have enabled Dynamic Client Registration on the dashboard. It should be under Developer -> Application -> Configuration page on the dashboard

4. Start the development server:

pnpm dev

The application will be available at:

Connecting to MCP

To connect your chat client to the development server, add the following configuration to your MCP config file (e.g., `.cursor/mcp.json`):

{
  "mcpServers": {
    "mcp.shop": {
      "command": "npx",
      "args": ["-y", "mcp-remote", "http://localhost:3000/mcp"]
    }
  }
}

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

License

MIT