๐ MCP Server Builder Platform
Build powerful Model Context Protocol servers with just one click
Features โข Quick Start โข Documentation โข Contributing โข License
๐ Table of Contents
- Overview
- Features
- Quick Start
- How to Use
- Available MCP Integrations
- Architecture
- Development
- Deployment
- Security
- Contributing
- License
๐ Overview
The MCP Server Builder Platform is an enterprise-grade, production-ready web application that enables developers, security professionals, researchers, students, entrepreneurs, and content creators to build, configure, and deploy Model Context Protocol (MCP) servers instantly. With an intuitive UI and 36+ pre-built integrations across multiple professional domains, you can create powerful AI-enhanced applications without writing complex configuration code.
What is MCP?
Model Context Protocol (MCP) is an open protocol that enables seamless integration between LLM applications and external data sources and tools. MCP provides a standardized way to connect AI models with the context they need - from file systems and databases to APIs and cloud services.
โจ Features
๐ฏ Core Features
- 36+ Pre-built Integrations: Comprehensive tools for developers, security professionals, researchers, students, entrepreneurs, and content creators
- One-Click Build: Generate production-ready MCP server configurations instantly
- Visual Server Builder: Intuitive drag-and-drop interface for selecting and configuring integrations
- Multiple Export Formats: JSON config, Docker, and NPM package formats
- Real-time Preview: See your configuration in real-time before building
- Enterprise Security: Built with security best practices and input validation
๐จ UI/UX Features
- Modern, Responsive Design: Beautiful Tailwind CSS interface that works on all devices
- Smooth Animations: Polished user experience with fluid transitions
- Category Filtering: Easily find the right integration for your needs
- Configuration Modals: Interactive configuration panels for each integration
- Batch Selection: Select multiple integrations and build them together
๐ง Technical Features
- TypeScript: Fully typed for better developer experience
- React 18: Modern React with hooks and concurrent features
- Vite: Lightning-fast build tool and dev server
- Production Ready: Optimized builds with code splitting
- Extensible: Easy to add custom MCP integrations
- Docker Support: Containerized deployment ready
๐ Quick Start
Prerequisites
- Node.js 18+
- npm or yarn
- Modern web browser
Installation
# Clone the repository
git clone https://github.com/pangerlkr/mcp-rep.git
cd mcp-rep
# Install frontend dependencies
cd frontend
npm install
# Start development server
npm run dev
The application will be available at http://localhost:5173
๐ How to Use
NEW! Check out our comprehensive step-by-step guide: How to Use Guide
The guide covers:
- ๐ Selecting and configuring MCP integrations
- ๐ Managing API keys and credentials securely
- ๐จ Building and exporting your MCP server
- ๐ Deploying to various platforms
- ๐ง Troubleshooting and best practices
Quick Start Tutorial:
- Browse available integrations by category
- Select the integrations you need
- Click "Configure" to add API keys and settings
- Click "Save Configuration" to persist your settings
- Click "Build Server" to generate your configuration
- Download in your preferred format (JSON, Docker, or NPM)
For detailed instructions, see the complete guide.
Building for Production
# Build the frontend
cd frontend
npm run build
# Preview production build
npm run preview
๐ฆ Available MCP Integrations
System & Files
- ๐ Filesystem MCP: Access and manipulate files and directories
- ๐ฆ Git MCP: Perform Git operations on repositories
Development
- ๐ GitHub MCP: Interact with GitHub repositories, issues, and PRs
- ๐ณ Docker MCP: Manage Docker containers and images
Databases
- ๐ PostgreSQL MCP: Query and manage PostgreSQL databases
- ๐พ SQLite MCP: Work with SQLite databases
Cloud Services
- โ๏ธ AWS MCP: Interact with AWS services (S3, EC2, Lambda)
- โ๏ธ Google Drive MCP: Access and manage Google Drive files
Communication
- ๐ฌ Slack MCP: Send messages and interact with Slack
Automation & AI
- ๐ค Puppeteer MCP: Browser automation and web scraping
- ๐ Fetch MCP: Make HTTP requests to APIs
- ๐ง Memory MCP: Store and retrieve conversation context
Cybersecurity (NEW!)
- ๐ OSINT MCP: Open Source Intelligence gathering and threat intelligence
- ๐ก๏ธ Vulnerability Scanner MCP: Scan code and dependencies for security vulnerabilities
- ๐ Security Audit MCP: Perform security audits and compliance checks
- โ๏ธ Penetration Testing MCP: Authorized security testing and vulnerability assessment
Research (NEW!)
- ๐ Academic Search MCP: Search and access academic papers and research databases
- ๐ Data Analysis MCP: Statistical analysis and data visualization
- ๐ Citation Manager MCP: Manage citations and generate bibliographies
- ๐ฌ Research Assistant MCP: AI-powered research assistant for literature review
Education (NEW!)
- ๐ Study Planner MCP: Plan and track study schedules and academic goals
- ๐ Note Taking MCP: Organize and manage academic notes efficiently
- ๐ด Flashcards MCP: Create and manage flashcards for effective learning
- โ๏ธ Assignment Tracker MCP: Track assignments, deadlines, and grades
Business & Entrepreneurship (NEW!)
- ๐ผ Business Plan Generator MCP: Generate and manage comprehensive business plans
- ๐ Market Research MCP: Conduct market research and competitive analysis
- ๐ฐ Financial Analysis MCP: Financial modeling, forecasting, and analysis tools
- ๐ฏ Pitch Deck Builder MCP: Create compelling investor pitch decks
Small Business (NEW!)
- ๐งพ Invoice Generator MCP: Create and manage professional invoices
- ๐ฅ Customer Management MCP: Manage customer relationships and interactions
- ๐ฆ Inventory Tracker MCP: Track and manage product inventory
- ๐ Appointment Scheduler MCP: Schedule and manage appointments with customers
Content Creation (NEW!)
- ๐ Content Planner MCP: Plan and organize content creation workflows
- ๐ SEO Optimizer MCP: Optimize content for search engines
- ๐ฌ Video Script Generator MCP: Generate video scripts and storyboards
- ๐ฑ Social Media Manager MCP: Manage and schedule social media posts
๐๏ธ Architecture
mcp-rep/
โโโ frontend/ # React + TypeScript frontend
โ โโโ src/
โ โ โโโ components/ # React components
โ โ โ โโโ Header.tsx
โ โ โ โโโ ServerCard.tsx
โ โ โ โโโ BuildPanel.tsx
โ โ โ โโโ ConfigModal.tsx
โ โ โโโ data/ # MCP server definitions
โ โ โ โโโ mcpServers.ts
โ โ โโโ types/ # TypeScript type definitions
โ โ โ โโโ mcp.ts
โ โ โโโ utils/ # Utility functions
โ โ โ โโโ configGenerator.ts
โ โ โโโ App.tsx # Main application component
โ โ โโโ main.tsx # Application entry point
โ โโโ dist/ # Production build output
โ โโโ package.json
โโโ docs/ # Documentation
โโโ .github/ # GitHub workflows and configs
โโโ README.md # This file
โโโ SECURITY.md # Security policy
โโโ CONTRIBUTING.md # Contribution guidelines
โโโ LICENSE # License file
Technology Stack
Frontend:
- React 18 with TypeScript
- Vite for build tooling
- TailwindCSS for styling
- Lucide React for icons
Code Quality:
- TypeScript strict mode
- ESLint for linting
- Prettier for formatting
๐ ๏ธ Development
Project Structure
The project follows a modular architecture:
- Components: Reusable UI components
- Types: TypeScript interfaces and types
- Data: MCP server configurations and metadata
- Utils: Helper functions and utilities
Adding a New MCP Integration
- Add the server definition to
frontend/src/data/mcpServers.ts:
{
id: 'my-integration',
name: 'My Integration',
description: 'Description of the integration',
category: 'Category',
icon: '๐ฏ',
version: '1.0.0',
author: 'Your Name',
tools: [
{
name: 'tool_name',
description: 'Tool description',
parameters: [...]
}
],
configuration: {
command: 'npx',
args: ['-y', '@package/name'],
configurable: [...]
}
}
- The UI will automatically pick up the new integration!
Development Scripts
# Start development server
npm run dev
# Build for production
npm run build
# Preview production build
npm run preview
# Lint code
npm run lint
๐ข Deployment
Deploy to Netlify (Recommended)
The easiest way to deploy this application is using Netlify's one-click deployment:
Manual Netlify Deployment
- Fork or clone this repository
- Connect your repository to Netlify
- Netlify will automatically detect the
netlify.tomlconfiguration - Deploy! The build settings are pre-configured:
- Base directory:
frontend - Build command:
npm install && npm run build - Publish directory:
dist
- Base directory:
For detailed instructions, see Netlify Deployment Guide.
Docker Deployment
# Build the Docker image
docker build -t mcp-server-builder .
# Run the container
docker run -p 3000:80 mcp-server-builder
Other Static Hosting Options
The built application is a static site that can be hosted on any static hosting service:
- Vercel: Import from GitHub and deploy
- GitHub Pages: Deploy the
frontend/distdirectory - AWS S3 + CloudFront: Upload built files to S3
- Azure Static Web Apps: Connect your repository
- Google Cloud Storage: Upload to GCS bucket
Simply deploy the contents of the frontend/dist directory.
Build Locally
# Install dependencies and build
npm run build
# The built files will be in frontend/dist/
Environment Variables
No environment variables required for basic operation. The application runs entirely client-side.
๐ Security
Security is a top priority. Please see our Security Policy for:
- Security best practices
- Reporting vulnerabilities
- Security features
- Compliance information
Key security features:
- โ No sensitive data stored client-side
- โ Input validation and sanitization
- โ Secure configuration generation
- โ Content Security Policy headers
- โ HTTPS recommended for production
๐ค Contributing
We welcome contributions! Please see our Contributing Guide for details on:
- Code of Conduct
- Development process
- Pull request process
- Coding standards
- Testing requirements
Quick Contribution Guide
- Fork the repository
- Create a feature branch (
git checkout -b feature/amazing-feature) - Commit your changes (
git commit -m 'Add amazing feature') - Push to the branch (
git push origin feature/amazing-feature) - Open a Pull Request
๐ License
This project is licensed under the MIT License - see the LICENSE file for details.
๐ Acknowledgments
- Model Context Protocol - For the MCP specification
- Anthropic - For MCP server implementations
- Vite - For the amazing build tool
- Tailwind CSS - For the beautiful styling
- The open-source community
๐ Support
- ๐ง Email: [email protected]
- ๐ฌ Discord: Join our community
- ๐ Issues: GitHub Issues
- ๐ Documentation: Full Documentation
๐บ๏ธ Roadmap
- Core platform with 12+ integrations
- Visual server builder
- Multiple export formats
- AI-powered configuration suggestions
- Custom integration wizard
- Server marketplace
- Real-time collaboration
- Kubernetes deployment templates
- Monitoring and analytics
- API endpoints for programmatic access
Built with โค๏ธ for the MCP community