An open API service indexing awesome lists of open source software.

https://github.com/workos/mcp.shop

mcp.shop storefront/app for MCP Night
https://github.com/workos/mcp.shop

Last synced: 11 months ago
JSON representation

mcp.shop storefront/app for MCP Night

Awesome Lists containing this project

README

          


mcp.shop


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


Live DemoOverviewArchitecturePrerequisitesSetup

## 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](https://workos.com/blog/nextjs-b2b-starter-kit) for the website
- [Vercel MCP Adapter](https://github.com/vercel/mcp-adapter) for MCP integration
- [WorkOS AuthKit with MCP](https://workos.com/docs/user-management/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:

```bash
pnpm install
```

3. Configure environment variables:

Create a `.env.local` file in the root directory with the following variables:

```env
# 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](https://workos.com/docs/user-management/vanilla/nodejs/1-configure-your-project). Make sure to set your redirect URI in the dashboard.

4. Start the development server:

```bash
pnpm dev
```

The application will be available at:

- Website: [http://localhost:3000](http://localhost:3000)
- MCP Server: `/mcp`

## 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`):

```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](LICENSE)