Provides the frontend framework for the file management interface, allowing users to interact with files and folders through a modern web interface.
Powers the backend API that handles file operations including uploading, reading, editing, and deleting files in the workspace.
Serves as the runtime environment for the server-side application, managing file system operations and serving API requests.
Enables the creation of the interactive user interface components that display file listings, content viewers, and editing capabilities.
MCP File Manager
A full-stack web application to manage files and folders in a specified workspace. Users can upload folders/files, view, edit, and delete text files, and see file info. Binary files are protected from editing.
Features
Upload multiple files or entire folders (with structure preserved)
List all files in the workspace
View and edit text files (e.g., .txt, .js, .json, .md)
Prevent editing/viewing of binary files (e.g., images, audio, video, Office docs)
Delete files
See file size and last modified info
Simple, modern React UI
Related MCP server: Simple Document Processing MCP Server
Tech Stack
Frontend: React (Create React App)
Backend: Node.js, Express, Multer
Setup & Usage
1. Clone the repository
2. Install dependencies
3. Start the backend
4. Start the frontend
5. Open the app
Go to http://localhost:3000
Folder Structure
server/workspace/— All uploaded and managed files are stored here.client/— React frontendserver/— Node.js backend
Notes
Only text files can be edited/viewed in the browser.
Binary files show a message and cannot be edited.
File size and last modified info are shown in the file list.
Developed for the MCP assignment.