@deriv-com/fe-mcp-servers 0.0.1

package/README.md

@@ -0,0 +1,96 @@
+# Front-End MCP Servers Repository
+
+A centralized repository for Front-End Model Context Protocol (MCP) servers, designed for reusability, standardization, and easy integration across projects.
+
+## 📋 Overview
+
+This repository serves as a collection of MCP servers specifically tailored for front-end development workflows. Each MCP server is organized in its own directory with comprehensive documentation and standardized structure to ensure consistency and ease of use.
+
+## 🏗️ Repository Structure
+
+```
+fe-mcp-servers/
+├── README.md                    # This file - main repository documentation
+├── server-name-1/              # Individual MCP server directory
+│   ├── README.md               # Server-specific documentation
+│   ├── src/                    # Source code
+│   ├── package.json            # Dependencies and scripts
+│   └── ...                     # Other server files
+├── server-name-2/              # Another MCP server
+│   ├── README.md
+│   └── ...
+└── docs/                       # Additional documentation (optional)
+```
+
+## 📚 MCP Server Standards
+
+Each MCP server in this repository must follow these standards:
+
+### Directory Structure
+- **One directory per MCP server**
+- **Descriptive, kebab-case naming** (e.g., `ui-component-generator`, `css-utility-server`)
+- **Self-contained** - all dependencies and configuration within the directory
+
+### Required Files
+Each MCP server directory **must** include:
+
+1. **README.md** - Comprehensive documentation (see template below)
+2. **package.json** - Node.js dependencies and metadata
+3. **src/** directory - Source code and implementation
+4. **Configuration files** - Any necessary config files (tsconfig.json, etc.)
+
+### README.md Template
+
+Each server's README.md should include:
+
+```markdown
+# [Server Name]
+
+Brief description of what this MCP server does.
+
+## Features
+- Feature 1
+- Feature 2
+- Feature 3
+
+## Installation
+Instructions for installing and setting up the server.
+
+## Configuration
+Configuration options and examples.
+
+## Usage
+How to use the server, including:
+- Available tools/functions
+- Example requests and responses
+- Integration examples
+
+## API Reference
+Detailed documentation of available functions.
+
+## Examples
+Practical usage examples and code snippets.
+
+## Contributing
+Guidelines for contributing to this specific server.
+
+## License
+License information.
+```
+
+## 🚀 Getting Started
+
+### For Users
+1. Browse the available MCP servers in this repository
+2. Navigate to the server directory you're interested in
+3. Follow the installation and usage instructions in that server's README.md
+
+### For Contributors
+1. Fork this repository
+2. Create a new directory for your MCP server
+3. Follow the standardization guidelines above
+4. Ensure your server includes comprehensive documentation
+5. Submit a pull request
+
+
+

package/dist/shift-ai/README.md

@@ -0,0 +1,186 @@
+# 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.
+
+## 🎯 Features
+
+- **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
+
+## 🚀 Usage
+
+```json
+{
+  "mcpServers": {
+    "shiftai": {
+      "command": "node",
+      "args": ["https://cdn.jsdelivr.net/npm/@deriv-com/fe-mcp-servers@latest/dist/shift-ai/src/mcp-server.js"]
+    }
+  }
+}
+```
+
+## ⚙️ Configuration Examples
+
+### Cursor IDE
+
+Add to your `cursor-settings.json`:
+
+```json
+{
+  "mcpServers": {
+    "shiftai": {
+      "command": "node",
+      "args": ["https://cdn.jsdelivr.net/npm/@deriv-com/fe-mcp-servers@latest/dist/shift-ai/src/mcp-server.js"]
+    }
+  }
+}
+```
+
+### Claude Desktop
+
+Add to your `claude_desktop_config.json`:
+
+```json
+{
+  "mcpServers": {
+    "shiftai": {
+      "command": "node",
+      "args": ["https://cdn.jsdelivr.net/npm/@deriv-com/fe-mcp-servers@latest/dist/shift-ai/src/mcp-server.js"]
+    }
+  }
+}
+```
+
+## 🚀 Usage
+
+Once configured, you can use the `shai` tool in your AI conversations:
+
+### Simple Usage
+
+```
+shai: refactor this button component
+```
+
+```
+shai: create a login form with validation
+```
+
+```
+shai: optimize this database query function
+```
+
+### With Context
+
+```
+shai: add error handling to this API call function:
+
+function fetchUserData(userId) {
+  return fetch(`/api/users/${userId}`).then(res => res.json());
+}
+```
+
+### For Code Reviews
+
+```
+shai: suggest improvements for this React component and wrap with proper markers
+```
+
+## 🔧 API Reference
+
+### `shai` Tool
+
+Generates code wrapped according to AI code provenance rules.
+
+**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
+
+## 📋 Comment Formats by Language
+
+| Language/File Type    | Wrapper Format                                     |
+| --------------------- | -------------------------------------------------- |
+| JavaScript/TypeScript | `// [AI]`<br/>code here<br/>`// [/AI]`             |
+| Python/Shell/Ruby     | `# [AI]`<br/>code here<br/>`# [/AI]`               |
+| CSS/SCSS/Sass/Less    | `/* [AI]`<br/>code here<br/>`[/AI] */`             |
+| HTML/XML/Markdown     | `<!-- [AI] -->`<br/>code here<br/>`<!-- [/AI] -->` |
+
+## 💡 Examples
+
+### JavaScript Example
+
+```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 Example
+
+```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]
+```
+
+### CSS Example
+
+```css
+/* [AI] */
+.fibonacci-result {
+  padding: 20px;
+  background: #f5f5f5;
+  border-radius: 8px;
+  margin: 10px 0;
+}
+/* [/AI] */
+```
+
+### HTML Example
+
+```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] -->
+```
+
+## 🎯 Key Rules
+
+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
+
+### Project Structure
+
+```
+shift-ai/
+├── src/
+│   ├── mcp.js          # Core shai function logic
+│   ├── mcp-server.js   # MCP server implementation
+│   └── test-mcp.js     # Test suite
+├── package.json        # Project configuration
+└── README.md           # This documentation
+```