🚀 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:

1. Browse available integrations by category
2. Select the integrations you need
3. Click "Configure" to add API keys and settings
4. Click "Save Configuration" to persist your settings
5. Click "Build Server" to generate your configuration
6. 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

1. 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: [...]
  }
}

2. 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

1. Fork or clone this repository
2. Connect your repository to Netlify
3. Netlify will automatically detect the netlify.toml configuration
4. Deploy! The build settings are pre-configured:
   • Base directory: frontend
   • Build command: npm install && npm run build
   • Publish directory: dist

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/dist directory
• 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

1. Fork the repository
2. Create a feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. 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: support@pangerlkr.link
• 💬 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

⭐ Star us on GitHub • 🐦 Follow on Twitter