Collection of Front-End Model Context Protocol (MCP) servers for reusability and standardization
npm install @deriv-com/fe-mcp-serversA collection of Front-End Model Context Protocol (MCP) servers for reusability and standardization.
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
$3
`bash
Install globally
npm install -g @deriv-com/fe-mcp-servers
`$3
After installation, use the
fe-mcp CLI to manage MCP servers:`bash
List all available MCP servers
fe-mcp listInteractive config generator - creates file & opens it for copy-paste
fe-mcp codeShow detailed info about a specific server
fe-mcp info shift-aiOutput MCP client configuration JSON
fe-mcp config shift-aiShow help
fe-mcp helpShow version
fe-mcp --version
`$3
The easiest way to get your MCP config:
`bash
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
$3
`json
{
"mcpServers": {
"server-name": {
"command": "node",
"args": [""]
}
}
}
`$3
`json
{
"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
$3
The build process bundles all dependencies into standalone executables:
`bash
cd mcps
npm run build
`This creates bundled files in
dist/ with all dependencies included.$3
`bash
npm run test
`$3
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$3
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
$3
- 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