MCP Builder - Visual MCP Server Platform

A SaaS platform for building, deploying, and managing Model Context Protocol (MCP) servers without writing code. Think "Vercel for MCP" or "Retool for AI integrations."

Features

• 🎨 Visual Drag-and-Drop Builder - Create MCP servers visually without code
• 🚀 One-Click Deployment - Deploy to managed infrastructure instantly
• 🔌 Pre-built Connectors - PostgreSQL, REST APIs, Google Drive, Slack, and more
• 📊 Analytics & Monitoring - Track usage, errors, and performance
• 👥 Team Collaboration - Manage teams with role-based access control
• 💳 Billing Integration - Stripe integration for subscriptions

Tech Stack

• Frontend: Next.js 14+ (App Router), React, TypeScript, Tailwind CSS
• UI Components: shadcn/ui, Radix UI
• State Management: Zustand, React Query
• API: tRPC (type-safe APIs)
• Database: PostgreSQL with Drizzle ORM
• Authentication: NextAuth.js (GitHub, Google, Email)
• Deployment: Docker, Fly.io/Railway
• MCP SDK: @modelcontextprotocol/sdk

Getting Started

Prerequisites

• Node.js 20+
• PostgreSQL database (or use Supabase/Neon)
• npm or yarn

Installation

1. Clone the repository

git clone <repository-url>
cd MCP-SaaS

2. Install dependencies

npm install

3. Set up environment variables

Create a .env.local file:

# Database
DATABASE_URL="postgresql://user:password@localhost:5432/mcpbuilder"

# NextAuth
NEXTAUTH_URL="http://localhost:3000"
NEXTAUTH_SECRET="your-secret-key-here"

# OAuth Providers (optional)
GITHUB_CLIENT_ID="your-github-client-id"
GITHUB_CLIENT_SECRET="your-github-client-secret"
GOOGLE_CLIENT_ID="your-google-client-id"
GOOGLE_CLIENT_SECRET="your-google-client-secret"

# Email (optional, for email auth)
SMTP_HOST="smtp.example.com"
SMTP_PORT="587"
SMTP_USER="your-email@example.com"
SMTP_PASSWORD="your-password"
EMAIL_FROM="noreply@example.com"

# Encryption (for environment variables)
ENCRYPTION_KEY="your-32-byte-hex-key"

# Stripe (optional, for billing)
STRIPE_SECRET_KEY="sk_test_..."
STRIPE_PUBLISHABLE_KEY="pk_test_..."
NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY="pk_test_..."

# Redis (optional, for queues)
REDIS_URL="redis://localhost:6379"

4. Set up the database

# Generate migrations
npm run db:generate

# Run migrations
npm run db:migrate

5. Run the development server

npm run dev

Open http://localhost:3000 in your browser.

Project Structure

MCP-SaaS/
├── app/                    # Next.js app directory
│   ├── api/               # API routes
│   ├── auth/              # Authentication pages
│   ├── dashboard/         # Dashboard pages
│   └── layout.tsx         # Root layout
├── components/            # React components
│   ├── ui/               # shadcn/ui components
│   ├── dashboard/        # Dashboard components
│   └── builder/          # Visual builder components
├── lib/                  # Utility libraries
│   ├── db/               # Database schema and client
│   ├── auth.ts           # NextAuth configuration
│   └── utils.ts          # Utility functions
├── server/               # Server-side code
│   └── trpc/             # tRPC routers
└── types/                # TypeScript type definitions

Development

Database Management

# Generate migrations from schema changes
npm run db:generate

# Apply migrations
npm run db:migrate

# Open Drizzle Studio (database GUI)
npm run db:studio

Adding New Features

1. Database Schema: Update lib/db/schema.ts
2. tRPC Routes: Add to server/trpc/router/
3. UI Components: Create in components/
4. Pages: Add to app/

Deployment

Vercel (Recommended)

1. Push your code to GitHub
2. Import project in Vercel
3. Add environment variables
4. Deploy!

Self-Hosted

See docs/self-hosted/setup.md for Docker Compose setup.

Roadmap

MVP (Months 1-4)

• Authentication & Onboarding
• Dashboard & Server Management
• Visual MCP Server Builder
• Pre-built Connector Library (5 connectors)
• Deployment System
• Monitoring & Analytics
• Testing & Debugging

Phase 2 (Months 5-9)

• SSO/SAML Integration
• Audit Logging
• Self-Hosted Deployment
• Advanced Connectors (10 more)
• Custom Domain Support

Contributing

Contributions are welcome! Please read our contributing guidelines first.

License

MIT License - see LICENSE file for details

Support

• Documentation: /docs
• Issues: GitHub Issues
• Email: support@mcpbuilder.com

Acknowledgments

• Model Context Protocol
• Next.js
• shadcn/ui
• tRPC