​

Getting Started with Development

​

Prerequisites

• Node.js (version 18 or higher)
• pnpm (recommended package manager)
• Git
• Docker (optional, for containerized development)

​

Setting Up the Development Environment

​

1. Clone the Repository

git clone https://github.com/your-username/mcphub.git
cd mcphub

​

2. Install Dependencies

pnpm install

​

3. Environment Configuration

cp .env.example .env

# Server Configuration
PORT=3000
NODE_ENV=development

# Database Configuration
DB_URL=postgresql://username:password@localhost:5432/mcphub

# JWT Configuration
JWT_SECRET=your-secret-key
JWT_EXPIRES_IN=24h

# OpenAI Configuration (for smart routing)
OPENAI_API_KEY=your-openai-api-key

​

4. Database Setup

createdb mcphub

​

5. MCP Server Configuration

{
  "mcpServers": {
    "fetch": {
      "command": "uvx",
      "args": ["mcp-server-fetch"]
    },
    "playwright": {
      "command": "npx",
      "args": ["@playwright/mcp@latest", "--headless"]
    }
  }
}

​

Development Workflow

​

Running the Development Server

pnpm dev

• Backend server on http://localhost:3000
• Frontend development server on http://localhost:5173

​

Running Backend Only

pnpm backend:dev

​

Running Frontend Only

pnpm frontend:dev

​

Building the Project

pnpm build

​

Project Structure

mcphub/
├── src/                    # Backend source code
│   ├── controllers/        # Express controllers
│   ├── routes/            # API routes
│   ├── services/          # Business logic
│   ├── models/            # Database models
│   └── utils/             # Utility functions
├── frontend/              # Frontend React application
│   ├── src/
│   │   ├── components/    # React components
│   │   ├── pages/         # Page components
│   │   ├── services/      # API services
│   │   └── utils/         # Frontend utilities
├── docs/                  # Documentation
├── bin/                   # CLI scripts
└── scripts/               # Build and utility scripts

​

Development Tools

​

Linting and Formatting

# Run ESLint
pnpm lint

# Format code with Prettier
pnpm format

​

Testing

# Run tests
pnpm test

# Run tests in watch mode
pnpm test --watch

​

Debugging

pnpm backend:debug

​

Making Changes

​

Backend Development

1. Controllers: Handle HTTP requests and responses
2. Services: Implement business logic
3. Models: Define database schemas
4. Routes: Define API endpoints

​

Frontend Development

1. Components: Reusable React components
2. Pages: Route-specific components
3. Services: API communication
4. Hooks: Custom React hooks

​

Adding New MCP Servers

1. Update mcp_settings.json with the new server configuration
2. Test the server integration
3. Update documentation if needed

​

Common Development Tasks

​

Adding a New API Endpoint

1. Create a controller in src/controllers/
2. Define the route in src/routes/
3. Add any necessary middleware
4. Write tests for the new endpoint

​

Adding a New Frontend Feature

1. Create components in frontend/src/components/
2. Add routes if needed
3. Implement API integration
4. Style with Tailwind CSS

​

Database Migrations

1. Update models in src/models/
2. Create migration scripts if using TypeORM
3. Test migrations locally

​

Troubleshooting

​

Common Issues

​

Getting Help

• Check the Contributing Guide
• Review Architecture Documentation
• Open an issue on GitHub for bugs
• Join our community discussions

​

Next Steps

• Read the Architecture Overview
• Learn about Contributing Guidelines
• Explore Configuration Options