FE MCP Servers

A collection of Front-End Model Context Protocol (MCP) servers for reusability and standardization.

🏗️ Project Structure

Source Structure (Development)

mcps/
├── shift-ai/                  # Individual MCP server
│   ├── src/
│   │   ├── mcp-server.js     # Main server implementation
│   │   ├── mcp.js            # Core functionality
│   │   └── test-mcp.js       # Test suite
│   └── README.md             # Server documentation
├── github-mcp/               # GitHub integration server (planned)
├── slack-mcp/                # Slack automation server (planned)
├── database-mcp/             # Database management server (planned)
├── scripts/                  # Build and test scripts
│   ├── build.js             # Package builder
│   └── test-all.js          # Test runner
├── package.json             # MCP package configuration
└── README.md                # This file

🚀 Installation & Usage

Install the Package

# Install globally
npm install -g @deriv-com/fe-mcp-servers

CLI Commands

After installation, use the fe-mcp CLI to manage MCP servers:

# List all available MCP servers
fe-mcp list

# Interactive config generator - creates file & opens it for copy-paste
fe-mcp code

# Show detailed info about a specific server
fe-mcp info shift-ai

# Output MCP client configuration JSON
fe-mcp config shift-ai

# Show help
fe-mcp help

# Show version
fe-mcp --version

Quick Setup (Recommended)

The easiest way to get your MCP config:

fe-mcp code

This will:

1. Show you a list of available MCP servers
2. Ask you to select one
3. Generate the configuration JSON with the correct path
4. Save it to a file and auto-open it for easy copy-paste

MCP Configuration Template

{
  "mcpServers": {
    "server-name": {
      "command": "node",
      "args": ["<PATH_FROM_FE-MCP>"]
    }
  }
}

Example Configuration

{
  "mcpServers": {
    "shift-ai": {
      "command": "node",
      "args": ["/Users/user/.nvm/versions/node/v20.17.0/lib/node_modules/@deriv-com/fe-mcp-servers/dist/shift-ai/mcp-server.js"]
    }
  }
}

🛠️ Development

Building the Package

The build process bundles all dependencies into standalone executables:

cd mcps
npm run build

This creates bundled files in dist/ with all dependencies included.

Running Tests

npm run test

Adding New MCP Servers

1. Create a new directory in mcps/
2. Add the required source structure:

   your-server/
   ├── src/
   │   ├── mcp-server.js     # Main server implementation (entry point)
   │   └── mcp.js           # Core functionality
   └── README.md            # Server documentation

3. Implement your MCP server logic in the src/ files
4. The build process will automatically bundle everything into dist/your-server/mcp-server.js
5. Users will reference the bundled file (not the source) in their MCP configuration

Requirements for New Servers

Each MCP server must:

• Have src/mcp-server.js as the main entry point (source file)
• Follow the MCP protocol specification
• Include comprehensive documentation in README.md
• The build process will bundle everything into a single executable dist/server-name/mcp-server.js file

🏗️ Architecture

Build Process

• Input: Source files in src/ directories
• Process: esbuild bundles all dependencies
• Output: Single executable files in dist/ directories
• Distribution: npm package contains only the dist/ directory

Dependency Management

• All dependencies are bundled into the final executable
• No external dependency resolution required at runtime
• Standalone files that work in any Node.js environment