@deriv-com/fe-mcp-servers 0.0.8 → 0.0.9

package/README.md

@@ -4,6 +4,7 @@ A collection of Front-End Model Context Protocol (MCP) servers for reusability a
 
 ## 🏗️ Project Structure
 
+### Source Structure (Development)
 ```
 mcps/
 ├── shift-ai/                  # Individual MCP server
@@ -66,11 +67,14 @@ Replace `SERVER_NAME` with the specific server you want (e.g., `shift-ai`).
 ## 🛠️ Development
 
 ### Building the Package
+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.
+
 ### Running Tests
 ```bash
 npm run test
@@ -79,64 +83,35 @@ npm run test
 ### Adding New MCP Servers
 
 1. Create a new directory in `mcps/`
-2. Add the required structure:
+2. Add the required **source structure**:
    ```
    your-server/
    ├── src/
-   │   ├── mcp-server.js    # Required: Main MCP server
-   │   ├── your-logic.js    # Your server logic
-   │   └── test-mcp.js      # Optional: Tests
-   └── README.md            # Required: Documentation
+   │   ├── mcp-server.js     # Main server implementation (entry point)
+   │   └── mcp.js           # Core functionality
+   └── README.md            # Server documentation
    ```
-3. Use standard npm imports (dependencies are resolved from mcps root)
-4. The build script will automatically include it
-
-## Available MCP Servers
-
-### 🚀 shift-ai
-AI code generation and analysis server that provides intelligent code suggestions, analysis, and automated code generation capabilities.
-
-**Status**: ✅ Active
-**Location**: `shift-ai/`
-
-### 🐙 github-mcp
-GitHub integration server for repository management, issue tracking, and pull request automation.
-
-**Status**: 🚧 Planned
-**Location**: `github-mcp/`
-
-### 💬 slack-mcp
-Slack workspace automation server for communication workflows and bot integrations.
+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
 
-**Status**: 🚧 Planned
-**Location**: `slack-mcp/`
-
-### 🗄️ database-mcp
-Database query and schema management server supporting multiple database systems.
-
-**Status**: 🚧 Planned
-**Location**: `database-mcp/`
-
-## 📦 Distribution
-
-This package is published to npm as part of the @deriv/ai-tools collection with all dependencies bundled for easy installation and usage.
-
-## 🔧 Standards
+### Requirements for New Servers
 
 Each MCP server must:
-- Have `src/mcp-server.js` as the main entry point
-- Use standard npm package imports
-- Include comprehensive `README.md` documentation
-- Follow consistent coding patterns
-- Include test coverage where applicable
+- 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
 
-- **Monorepo Structure**: All servers in one package for easy distribution
-- **Shared Dependencies**: Common dependencies bundled at mcps level
-- **Automatic Discovery**: Build system automatically finds and includes servers
-- **Global Installation**: Zero-configuration setup via npm global install
-- **Standardized Structure**: Consistent patterns across all servers
-- **Protocol**: [Model Context Protocol (MCP)](https://modelcontextprotocol.io/)
-- **Runtime**: Node.js
-- **Build System**: Automated packaging and distribution 
+### 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 

package/dist/shift-ai/README.md

@@ -1,136 +1,183 @@
 # ShiftAI MCP Server
 
-An MCP (Model Context Protocol) server that provides AI code provenance tracking through simple comment markers. This tool helps maintain transparency and traceability of AI-generated code across different programming languages.
+A Model Context Protocol (MCP) server that provides AI code generation with automatic code provenance wrapping according to simple AI code wrapping rules.
 
-## ✨ Features
+## 🚀 Installation & Setup
 
-- **Universal Code Wrapping**: Supports JavaScript, TypeScript, Python, CSS, HTML, and more
-- **Simple Comment Markers**: Uses language-appropriate comment syntax for wrapping
-- **AI Code Provenance**: Enables automated detection and tracking of AI-generated code
-- **MCP Protocol**: Full compatibility with MCP-enabled AI tools and IDEs
-- **Zero Configuration**: Works out of the box with sensible defaults
-- **Language Detection**: Automatically applies correct comment syntax for each file type
-
-## 🚀 Installation
-
-### Install the Package
+### Step 1: Install the Package
 ```bash
 npm install -g @deriv-com/fe-mcp-servers
 ```
 
-### Get ShiftAI Configuration Path
-Copy and run this command to get the exact path for ShiftAI:
+### Step 2: Get Configuration Path
+Get the exact path for your MCP configuration:
 
 ```bash
-echo "$(npm root -g)/@deriv-com/fe-mcp-servers/dist/shift-ai/src/mcp-server.js"
+echo "$(npm root -g)/@deriv-com/fe-mcp-servers/dist/shift-ai/mcp-server.js"
 ```
 
-This will output the full path that you can copy directly into your MCP configuration.
+**Important**: Use the **bundled executable path** (without `src/`) for MCP configuration.
 
-## 📋 Configuration
+### Step 3: Configure MCP Client
+Add to your MCP client configuration (e.g., in Cursor settings):
 
-### Cursor IDE
 ```json
 {
   "mcpServers": {
     "shift-ai": {
       "command": "node",
-      "args": ["<PASTE_PATH_FROM_ABOVE>"]
+      "args": ["/Users/user/.nvm/versions/node/v20.17.0/lib/node_modules/@deriv-com/fe-mcp-servers/dist/shift-ai/mcp-server.js"]
     }
   }
 }
 ```
 
-### Claude Desktop
-```json
-{
-  "mcpServers": {
-    "shift-ai": {
-      "command": "node",
-      "args": ["<PASTE_PATH_FROM_ABOVE>"]
-    }
-  }
-}
+## 🛠️ Development Structure
+
+### Source Code (Development)
+```
+shift-ai/
+├── src/
+│   ├── mcp-server.js    # Main MCP server implementation
+│   ├── mcp.js          # Core ShiftAI functionality  
+│   └── test-mcp.js     # Test suite
+└── README.md           # This documentation
 ```
 
-### Example Configuration
-```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/src/mcp-server.js"]
-    }
-  }
-}
+### Built Output (Distribution)
+After building, the package creates:
+```
+dist/
+└── shift-ai/
+    ├── mcp-server.js   # Bundled executable (all dependencies included)
+    └── README.md       # Documentation
 ```
 
-## 🛠️ Usage
+## 🔧 Build Process
 
-Once configured, you can use the `shai` tool in your AI conversations:
+The build process uses esbuild to:
+1. Bundle all dependencies into a single file
+2. Create a standalone executable
+3. Include proper Node.js shebang for direct execution
+4. No external dependency resolution needed at runtime
 
-### Simple Usage
+## ⚡ Available Tools
 
-```
-shai: refactor this button component
-```
+### `shai` Tool
+Generates code wrapped according to simple AI code provenance rules.
 
-```
-shai: create a login form with validation
-```
+**Parameters:**
 
+- `prompt` (string, required): The instruction or prompt for code generation
+- `code` (string, optional): Existing code to be wrapped with AI markers
+
+**Returns:**
+
+- Formatted instructions with examples for proper AI code wrapping
+
+## 🎯 Usage Examples
+
+Once configured in your MCP client, you can use the `shai` tool in your conversations:
+
+### Simple Code Generation
+
+**Input:**
 ```
-shai: optimize this database query function
+Use shai to create a login form component in React
 ```
 
-### With Context
+**What happens:**
+The AI will receive instructions to wrap any generated code with proper AI markers for React/JavaScript.
+
+### Code Refactoring
 
+**Input:**
 ```
-shai: add error handling to this API call function:
+shai: refactor this function to be more efficient:
 
-function fetchUserData(userId) {
-  return fetch(`/api/users/${userId}`).then(res => res.json());
+function calculateTotal(items) {
+  let total = 0;
+  for (let i = 0; i < items.length; i++) {
+    total += items[i].price * items[i].quantity;
+  }
+  return total;
 }
 ```
 
-### For Code Reviews
-
-```
-shai: suggest improvements for this React component and wrap with proper markers
+**Expected Output:**
+```javascript
+// [AI]
+function calculateTotal(items) {
+  return items.reduce((total, item) => total + (item.price * item.quantity), 0);
+}
+// [/AI]
 ```
 
-## 🔧 API Reference
-
-### `shai` Tool
+### Multi-Language Support
 
-Generates code wrapped according to AI code provenance rules.
+**Python Example:**
+```
+shai: create a data validation function in Python
+```
 
-**Parameters:**
+**Expected Output:**
+```python
+# [AI]
+def validate_email(email):
+    import re
+    pattern = r'^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$'
+    return re.match(pattern, email) is not None
+# [/AI]
+```
 
-- `prompt` (string, required): The instruction or prompt for code generation
-- `code` (string, optional): Existing code to be wrapped with AI markers
+**CSS Example:**
+```
+shai: create a responsive navigation bar style
+```
 
-**Returns:**
+**Expected Output:**
+```css
+/* [AI] */
+.navbar {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 1rem 2rem;
+  background-color: #333;
+  color: white;
+}
 
-- Formatted instructions with examples for proper AI code wrapping
+@media (max-width: 768px) {
+  .navbar {
+    flex-direction: column;
+    padding: 1rem;
+  }
+}
+/* [/AI] */
+```
 
-## 🏗️ Project Structure
+### Code Review and Improvement
 
+**Input:**
 ```
-shift-ai/
-├── src/
-│   ├── mcp-server.js    # Main MCP server implementation
-│   ├── mcp.js          # Core shai function
-│   └── test-mcp.js     # Test suite
-└── README.md          # This file
+shai: analyze and improve this API endpoint for better error handling
 ```
 
-## 🔧 Dependencies
+**Benefits:**
+- Ensures all AI-generated code suggestions are properly marked
+- Maintains code provenance tracking
+- Enables automated detection of AI-assisted code
+- Supports team transparency and compliance requirements
+
+### Common Use Cases
 
-- `@modelcontextprotocol/sdk`: MCP protocol implementation
-- Additional dependencies bundled automatically
+1. **Feature Development**: `shai: implement user authentication`
+2. **Bug Fixes**: `shai: fix the memory leak in this component`
+3. **Code Optimization**: `shai: optimize this database query`
+4. **Testing**: `shai: write unit tests for this function`
+5. **Documentation**: `shai: add JSDoc comments to this module`
 
-## 📝 Comment Formats
+## Comment Formats
 
 | Language/File Type     | Wrapper Format                    |
 |----------------------- |-----------------------------------|

package/dist/shift-ai/mcp-server.js

@@ -5275,87 +5275,31 @@ var StdioServerTransport = class {
 
 // shift-ai/src/mcp.js
 function shai(prompt, code) {
-  return {
-    message: `IMPORTANT: You must wrap your code output with simple AI markers as shown below.
-
-# AI Code Wrapping Rules
-
-All code suggestions from any AI tool or agent must be wrapped in simple comment markers for the file type.
-
-## Comment Styles by Language
-
-| Language/File Type      | Wrapper Format                    |
-|------------------------|-----------------------------------|
-| JavaScript/TypeScript/Dart/Java/C/C++/C#/PHP/Go/Rust/Swift/Kotlin/Scala  | // [AI]\\ncode here\\n// [/AI]    |
-| Python/Shell/Ruby/PERL/R/YAML/TOML      | # [AI]\\ncode here\\n# [/AI]      |
-| CSS/SCSS/Sass/Less     | /* [AI] */\\ncode here\\n/* [/AI] */ |
-| HTML/XML/Markdown      | <!-- [AI] -->\\ncode here\\n<!-- [/AI] --> |
-
-## Examples
-
-**JavaScript:**
-\`\`\`javascript
-// [AI]
-function fibonacci(n) {
-  const sequence = [0, 1];
-  for (let i = 2; i < n; i++) {
-    sequence[i] = sequence[i - 1] + sequence[i - 2];
-  }
-  return sequence.slice(0, n);
-}
-
-console.log(fibonacci(10));
-// [/AI]
-\`\`\`
-
-**Python:**
-\`\`\`python
-# [AI]
-def fibonacci(n):
-    sequence = [0, 1]
-    for i in range(2, n):
-        sequence.append(sequence[i-1] + sequence[i-2])
-    return sequence[:n]
-
-print(fibonacci(10))
-# [/AI]
-\`\`\`
+  if (code && code.trim()) {
+    return {
+      message: `Here's your code. Remember to wrap it with [AI] markers at the beginning and end of the file using the appropriate comment syntax.
 
-**HTML:**
-\`\`\`html
-<!-- [AI] -->
-<div class="fibonacci-result">
-  <h2>Fibonacci Sequence</h2>
-  <p>Result: [0, 1, 1, 2, 3, 5, 8, 13, 21, 34]</p>
-</div>
-<!-- [/AI] -->
-\`\`\`
+${code.trim()}
 
-**CSS:**
-\`\`\`css
-/* [AI] */
-.fibonacci-result {
-  padding: 20px;
-  background: #f5f5f5;
-  border-radius: 8px;
-  margin: 10px 0;
-}
+\u2705 Add [AI] marker at the very beginning of the file
+\u2705 Add [/AI] marker at the very end of the file`
+    };
+  }
+  return {
+    message: `${prompt}
 
-.fibonacci-result h2 {
-  color: #333;
-  margin-bottom: 10px;
-}
-/* [/AI] */
-\`\`\`
+\u{1F6A8} CRITICAL INSTRUCTION: After you generate the complete file, you MUST:
 
-## Key Rules
+1. Add [AI] at the VERY BEGINNING of your file (using appropriate comment syntax)
+2. Add [/AI] at the VERY END of your file (using appropriate comment syntax)
 
-1. **Always use the correct comment syntax** for the file type
-2. **The code inside the wrapper must be actual code**, not commented out
-3. **Use simple opening and closing markers** - no complex metadata required
-4. **Consistent formatting** - opening marker on its own line, closing marker on its own line
+Examples:
+- JavaScript/TypeScript: // [AI] at start, // [/AI] at end
+- Python/Shell: # [AI] at start, # [/AI] at end  
+- CSS: /* [AI] */ at start, /* [/AI] */ at end
+- HTML: <!-- [AI] --> at start, <!-- [/AI] --> at end
 
-This simple approach enables automated detection and tracking of AI-generated code while maintaining readability and simplicity.`
+\u26A0\uFE0F You know the correct comment syntax - use it to wrap your ENTIRE file with [AI] markers!`
   };
 }
 
@@ -5363,7 +5307,7 @@ This simple approach enables automated detection and tracking of AI-generated co
 var transport = new StdioServerTransport();
 var server = new Server({
   name: "ShiftAI MCP Server",
-  version: "0.0.1"
+  version: "0.0.8"
 }, {
   capabilities: {
     tools: {}
@@ -5374,63 +5318,21 @@ server.setRequestHandler(ListToolsRequestSchema, async (request) => {
     tools: [
       {
         name: "shai",
-        description: `Generates code wrapped according to simple AI code provenance rules.
-
-# AI Code Wrapping Rules
-
-All code suggestions from any AI tool or agent must be wrapped in simple comment markers for the file type.
-
-## Comment Styles by Language
-
-| Language/File Type      | Wrapper Format                    |
-|------------------------|-----------------------------------|
-| JavaScript/TypeScript/Dart/Java/C/C++/C#/PHP/Go/Rust/Swift/Kotlin/Scala  | // [AI]\\ncode here\\n// [/AI]    |
-| Python/Shell/Ruby/PERL/R/YAML/TOML      | # [AI]\\ncode here\\n# [/AI]      |
-| CSS/SCSS/Sass/Less     | /* [AI] */\\ncode here\\n/* [/AI] */ |
-| HTML/XML/Markdown      | <!-- [AI] -->\\ncode here\\n<!-- [/AI] --> |
+        description: `Instructs AI to add [AI] markers at the beginning and end of all generated code files.
 
-## Examples
-
-**JavaScript:**
-// [AI]
-function fibonacci(n) {
-  const sequence = [0, 1];
-  for (let i = 2; i < n; i++) {
-    sequence[i] = sequence[i - 1] + sequence[i - 2];
-  }
-  return sequence.slice(0, n);
-}
-// [/AI]
-
-**Python:**
-# [AI]
-def fibonacci(n):
-    sequence = [0, 1]
-    for i in range(2, n):
-        sequence.append(sequence[i-1] + sequence[i-2])
-    return sequence[:n]
-# [/AI]
-
-**HTML:**
-<!-- [AI] -->
-<div>Content here</div>
-<!-- [/AI] -->
-
-**CSS:**
-/* [AI] */
-.class {
-  property: value;
-}
-/* [/AI] */
+## SIMPLE REQUIREMENT:
 
-## Key Rules
+After generating any code file, the AI must:
+1. Add [AI] marker at the VERY BEGINNING of the file (using appropriate comment syntax)
+2. Add [/AI] marker at the VERY END of the file (using appropriate comment syntax)
 
-1. Always use the correct comment syntax for the file type
-2. The code inside the wrapper must be actual code, not commented out
-3. Use simple opening and closing markers - no complex metadata required
-4. Consistent formatting - opening marker on its own line, closing marker on its own line
+## Examples by Language:
+- JavaScript/TypeScript: // [AI] and // [/AI]
+- Python/Shell: # [AI] and # [/AI]  
+- CSS: /* [AI] */ and /* [/AI] */
+- HTML: <!-- [AI] --> and <!-- [/AI] -->
 
-This simple approach enables automated detection and tracking of AI-generated code while maintaining readability and simplicity.`,
+The AI knows the correct comment syntax for each language - just add [AI] markers at the start and end of the entire file.`,
         inputSchema: {
           type: "object",
           properties: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@deriv-com/fe-mcp-servers",
-  "version": "0.0.8",
+  "version": "0.0.9",
   "description": "Collection of Front-End Model Context Protocol (MCP) servers for reusability and standardization",
   "type": "module",
   "scripts": {