MCP Builder-可视化MCP服务器平台
一个SaaS平台,用于构建、部署和管理模型上下文协议(MCP)服务器,而无需编写代码。想想“Vercel for MCP”或“Retool for AI集成”
特性
- 🎨 可视化拖放生成器 -无需代码即可直观地创建MCP服务器
- 🚀 一键部署 -立即部署到托管基础架构
- 🔌 预构建连接器 -PostgreSQL、REST API、Google Drive、Slack等
- 📊 分析和监控 -跟踪使用情况、错误和性能
- 👥 团队协作 -使用基于角色的访问控制管理团队
- 💳 计费集成 -订阅的条纹集成
技术栈
- 前端:Next.js 14+(应用路由器)、React、TypeScript、顺风CSS
- UI组件:shadcn/ui,Radix ui
- 状态管理状态, React Query
- API:tRPC(类型安全API)
- 数据库:PostgreSQL与Drizzle ORM
- 认证:NextAuth.js(GitHub、谷歌、电子邮件)
- 部署:Docker、Fly.io/Railway
- MCP-SDK:@modelcontextprotocol/sdk
入门指南
先决条件
- Node.js 20+
- PostgreSQL数据库(或使用Supabase/Neon)
- npm或纱线
安装
- 克隆仓库
git clone
cd MCP-SaaS- 安装依赖项
npm install- 设置环境变量
创建一个 .env.local 文件:
# 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"- 设置数据库
# Generate migrations
npm run db:generate
# Run migrations
npm run db:migrate- 运行开发服务器
npm run dev打开 http://localhost:3000 在您的浏览器中。
项目结构
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发展
数据库管理
# Generate migrations from schema changes
npm run db:generate
# Apply migrations
npm run db:migrate
# Open Drizzle Studio (database GUI)
npm run db:studio添加新功能
- 数据库模式:更新
lib/db/schema.ts - tRPC路线:添加到
server/trpc/router/ - UI组件:创建于
components/ - 页面:添加到
app/
部署
Vercel(推荐)
- 将代码推送到GitHub
- Vercel的进口项目
- 添加环境变量
- 部署!
自托管
看 docs/self-hosted/setup.md 用于Docker Compose设置。
路线图
MVP(第1-4个月)
- \[x\] 身份验证和入职培训
- \[x\] 仪表板和服务器管理
- \[\]可视化MCP服务器生成器
- \[\]预构建连接器库(5个连接器)
- \[\]部署系统
- \[\]监控和分析
- \[\]测试与调试
第2阶段(第5-9个月)
- \[\]SSO/SAML集成
- \[\]审核日志记录
- \[\]自托管部署
- \[\]高级连接器(10个以上)
- \[\]自定义域支持
贡献
欢迎投稿!请先阅读我们的投稿指南。
许可证
MIT许可证-有关详细信息,请参阅许可证文件
支持
- 文档:
/docs - 问题:GitHub问题
- 电子邮件:support@mcpbuilder.com
