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

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