Aakash231217/MCP_Server_assignment

MCP Filesystem Operations

A complete MCP (Model Context Protocol) implementation for filesystem operations with a modern web interface.

Features

• MCP Server: Supports create, edit, delete, read files and directories
• MCP Client: Interactive command-line interface
• Web Frontend: Modern React/Next.js interface with drag-and-drop folder upload
• REST API: Bridge between frontend and MCP server
• Natural Language Processing: Parse user prompts into filesystem operations

Architecture

┌─────────────────┐     ┌─────────────────┐     ┌─────────────────┐
│   Frontend      │────▶│   REST API      │────▶│   MCP Server    │
│   (Next.js)     │     │   (Express)     │     │   (Node.js)     │
└─────────────────┘     └─────────────────┘     └─────────────────┘
        │                        │                        │
        │                        │                        ▼
        │                        │               ┌─────────────────┐
        │                        │               │   File System   │
        │                        │               │   Operations    │
        └────────────────────────┼───────────────┴─────────────────┘
                                 │
                                 ▼
                        ┌─────────────────┐
                        │   MCP Client    │
                        │   (CLI)         │
                        └─────────────────┘

Quick Start

1. Install Dependencies

# Install main dependencies
npm install

# Install frontend dependencies
cd frontend
npm install
cd ..

2. Start the MCP Server

npm start

3. Run the Web Interface

# Terminal 1: Start the API server
node api/server.js

# Terminal 2: Start the frontend
cd frontend
npm run dev

4. Try the CLI Client

npm run client

Usage Examples

Web Interface

1. Upload Folder: Drag and drop a folder to upload all files
2. Use Natural Language: Type commands like:
   • "Create file 'hello.txt' with 'Hello World'"
   • "Edit file 'package.json' with 'updated content'"
   • "Delete 'old-file.txt'"
   • "Read 'README.md'"

CLI Client

📁 > create_file hello.txt "Hello World"
✅ File created successfully: hello.txt

📁 > read_file hello.txt
✅ Hello World

📁 > edit_file hello.txt "Hello MCP World!" replace
✅ File edited successfully: hello.txt

📁 > list_files .
✅ [
  {
    "name": "hello.txt",
    "type": "file",
    "size": 17,
    "modified": "2024-01-15T10:30:00.000Z"
  }
]

📁 > delete_file hello.txt
✅ Deleted successfully: hello.txt

REST API

# Execute MCP operations
curl -X POST http://localhost:3002/api/execute \
  -H "Content-Type: application/json" \
  -d '{"operation": "create_file", "args": {"path": "test.txt", "content": "Hello"}}'

# Use natural language prompts
curl -X POST http://localhost:3002/api/prompt \
  -H "Content-Type: application/json" \
  -d '{"prompt": "Create file '\''hello.txt'\'' with '\''Hello World'\''"}'

# List files
curl http://localhost:3002/api/files?path=.

# Read file
curl http://localhost:3002/api/file/hello.txt

MCP Tools Available

Security Features

• Path Validation: Prevents directory traversal attacks
• Working Directory Restriction: Operations limited to designated folder
• File Type Validation: Configurable file type restrictions
• Size Limits: Configurable file size limits

Development

Project Structure

mcp-filesystem/
├── server/
│   └── index.js          # MCP Server implementation
├── client/
│   └── index.js          # CLI client
├── api/
│   └── server.js         # REST API server
├── frontend/
│   ├── app/
│   │   ├── page.tsx      # Main React component
│   │   ├── layout.tsx    # Layout component
│   │   └── globals.css   # Global styles
│   ├── package.json      # Frontend dependencies
│   └── next.config.js    # Next.js configuration
├── package.json          # Main package.json
└── README.md            # This file

Adding New Tools

1. Add tool definition in server/index.js:

{
  name: "my_new_tool",
  description: "Description of the tool",
  inputSchema: {
    type: "object",
    properties: {
      param1: { type: "string", description: "Parameter description" }
    },
    required: ["param1"]
  }
}

2. Implement tool handler:

case "my_new_tool":
  return await this.myNewTool(args.param1);

3. Add method implementation:

async myNewTool(param1) {
  // Implementation here
  return {
    content: [{ type: "text", text: "Result message" }]
  };
}

Deployment

Docker

FROM node:18-alpine

WORKDIR /app
COPY package*.json ./
RUN npm install

COPY . .
EXPOSE 3000 3001 3002

CMD ["npm", "start"]

Environment Variables

# API Server
PORT=3002
MCP_SERVER_PATH=../server/index.js

# Frontend
NEXT_PUBLIC_API_URL=http://localhost:3002

Contributing

1. Fork the repository
2. Create a feature branch
3. Make your changes
4. Add tests
5. Submit a pull request

License

MIT License - see LICENSE file for details

Troubleshooting

Common Issues

1. MCP Server Connection Failed

   • Ensure Node.js version >= 18
   • Check if server/index.js is executable
   • Verify dependencies are installed

2. File Upload Not Working

   • Check folder permissions
   • Ensure API server is running on port 3002
   • Verify CORS settings

3. Frontend Build Errors

   • Run npm install in frontend directory
   • Check TypeScript version compatibility
   • Verify all dependencies are installed

Debug Mode

Enable debug logging:

DEBUG=mcp:* npm start

Support

For issues and questions:

• Create an issue on GitHub
• Check the troubleshooting section
• Review the API documentation

Built with ❤️ using MCP (Model Context Protocol)