mcp-filesystem-server

yuvraj1107thapa/mcp-filesystem-server

3.2

If you are the rightful owner of mcp-filesystem-server and would like to certify it and/or have it hosted online, please leave a comment on the right or send an email to henry@mcphub.com.

The MCP Filesystem Server is a Model Context Protocol server designed for file operations with a web frontend, enabling users to manage files through a browser interface and programmatically via WebSocket connections.

Tools

  1. filesystem_create

    Create a new file with specified content.

  2. filesystem_read

    Read the content of a specified file.

  3. filesystem_edit

    Edit an existing file with new content.

  4. filesystem_delete

    Delete a specified file.

  5. filesystem_list

    List the contents of a directory.

MCP Filesystem Server

Model Context Protocol server for file operations with web frontend

Deployed App Live Demo: https://mcp-filesystem-server.onrender.com

Screenshots

File Management Interface - Upload & Delete Operations

File Editor - Edit & Delete File Operations

AI Commands Working

What This Does

  • MCP Server: Handles file create/read/edit/delete operations
  • MCP Client: Connects to server via WebSocket
  • Web UI: Upload folders, edit files, run AI commands

Architecture

Browser ←→ MCP Client ←→ MCP Server ←→ File System

Core Components:

  • server/index.js - MCP server (Express + WebSocket)
  • client/index.js - MCP client library
  • public/index.html - Frontend interface
  • storage/ - File operations sandbox

Setup

npm install
npm start

Open http://localhost:3001

Usage

Web Interface:

  1. Upload folder via "Choose Folder"
  2. Browse/edit files in explorer
  3. Use prompt box for AI commands:
    • "Create config.json with default settings"
    • "Delete all .log files"
    • "Edit README to add usage section"

Programmatic:

const client = new MCPClient();
await client.connect();

await client.createFile('test.txt', 'content');
const content = await client.readFile('test.txt');
await client.editFile('test.txt', 'new content');
await client.deleteFile('test.txt');

MCP Protocol

Implements JSON-RPC 2.0 over WebSocket:

{
  "jsonrpc": "2.0",
  "id": "1",
  "method": "filesystem_create",
  "params": {
    "filePath": "example.txt",
    "content": "Hello World"
  }
}

Supported Methods:

  • filesystem_create - Create file
  • filesystem_read - Read file
  • filesystem_edit - Edit file
  • filesystem_delete - Delete file
  • filesystem_list - List directory

Security

  • Operations restricted to storage/ directory
  • Input validation on all file paths
  • No directory traversal attacks (../ blocked)

Files

  • server/index.js - 200 lines, MCP server implementation
  • client/index.js - 100 lines, WebSocket client wrapper
  • public/index.html - 300 lines, frontend with file explorer
  • package.json - Dependencies: express, ws, cors

Key Implementation Details

MCP Server Pattern:

class MCPServer {
  tools = {
    filesystem_create: this.createFile,
    filesystem_read: this.readFile,
    // ...
  }
  
  async handleMessage(message) {
    const tool = this.tools[message.method];
    return await tool(message.params);
  }
}

Client Connection:

class MCPClient {
  constructor() {
    this.ws = new WebSocket('ws://localhost:3001');
  }
  
  async call(method, params) {
    return new Promise((resolve) => {
      this.ws.send(JSON.stringify({
        jsonrpc: "2.0",
        id: Date.now(),
        method,
        params
      }));
    });
  }
}

This demonstrates MCP fundamentals: protocol compliance, tool-based architecture, and real-world filesystem integration.