The world's first MCP-based web shop, built with WorkOS AuthKit and Next.js mcp-adaptor.
Live Demo • Overview • Architecture • Prerequisites • Setup
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)
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
- Node.js (latest LTS version recommended)
- WorkOS account with AuthKit configured
- Redis service (e.g., Upstash)
-
Clone the repository
-
Install dependencies:
pnpm install
-
Configure environment variables:
Create a
.env.local
file in the root directory with the following variables:# WorkOS Configuration AUTHKIT_DOMAIN=your-authkit-domain WORKOS_API_KEY=your-workos-api-key WORKOS_CLIENT_ID=your-workos-client-id # Redis Configuration (Upstash) KV_REST_API_URL=your-upstash-url KV_REST_API_TOKEN=your-upstash-token
Note: You can find your WorkOS credentials in the WorkOS dashboard. Make sure to set your redirect URI in the dashboard.
-
Start the development server:
pnpm dev
The application will be available at:
- Website: http://localhost:3000
- MCP Server:
/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"]
}
}
}
Contributions are welcome! Please feel free to submit a Pull Request.