MCP Eval Website

A comprehensive evaluation platform for MCP Bench.

Tech Stack

• React 19 + React Compiler
• TanStack Start + Router + Query
• Tailwind CSS v4 + shadcn/ui
• Drizzle ORM + PostgreSQL
• Server Functions for type-safe backend operations

Getting Started

Prerequisites

• Node.js 18+
• pnpm (recommended) or npm/yarn
• PostgreSQL 14+ (for database features)

Installation

1. Clone the repository:

   git clone https://github.com/lobehub/mcp-eval-website.git
   cd mcp-eval-website

2. Install dependencies:

   pnpm install

3. Create a .env file based on .env.example:

   cp .env.example .env

   Update the DATABASE_URL with your PostgreSQL connection string.

4. Set up the database (see Database Setup for details):

   # Push schema to database
   pnpm drizzle-kit push

5. Run the development server:

   pnpm dev

   The development server should now be running at http://localhost:3000.

Features

• Authentication Tests: Multiple authentication flow evaluations including Cloudflare Turnstile
• Form Handling: Comprehensive form interaction testing with PostgreSQL backend
• File Downloads: Download functionality testing
• Data Extraction: Content extraction and parsing tests
• Navigation: Complex navigation pattern evaluations
• Database Integration: Customer form submissions stored in PostgreSQL
• Server Functions: Type-safe backend operations using TanStack Start

Development

Available Scripts

These scripts in package.json use pnpm by default, but you can modify them to use your preferred package manager.

• ui - The shadcn/ui CLI. (e.g. pnpm ui add button to add the button component)
• format, lint, check-types - Run Prettier, ESLint, and check TypeScript types respectively.
  • check - Run all three above. (e.g. pnpm check)
• deps - Selectively upgrade dependencies via taze.

Project Structure

src/
├── routes/
│   ├── _layout.auth.*.tsx         # Authentication test routes
│   ├── _layout.forms/              # Form handling tests
│   │   ├── index.tsx               # Form submission page
│   │   └── result.$submissionId.tsx # Dynamic result page
│   ├── _layout.downloads.tsx       # Download tests
│   ├── _layout.extraction.tsx      # Data extraction tests
│   └── _layout.navigation.tsx      # Navigation tests
├── server-functions/               # TanStack Start server functions
│   └── customer-form.ts            # Form submission logic
├── db/                             # Database configuration
│   ├── schema.ts                   # Drizzle ORM schema
│   └── index.ts                    # Database connection
├── components/
│   └── ui/                         # Reusable UI components
└── lib/
    └── utils.ts                    # Utility functions

Building for production

Deploy to Vercel

This project is configured for Vercel deployment. To deploy:

1. Via Vercel Dashboard (Recommended)

   • Import your Git repository on Vercel
   • Add the DATABASE_URL environment variable in project settings
   • Vercel will automatically detect the configuration and deploy your app

2. Via Vercel CLI

   pnpm dlx vercel

The project includes:

• vite.config.ts configured with target: "vercel"
• vercel.json with proper build settings

Database Options for Production:

• Vercel Postgres
• Neon
• Supabase
• Any PostgreSQL-compatible database

Other Platforms

For other deployment platforms, update the target in vite.config.ts and read the hosting docs.

Contributing

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

License

This project is licensed under the Unlicense.