File Manager

March 24, 2026 · View on GitHub

Built with mcp-use   mcp-use stars

File management MCP App showcasing useFiles, Image components, ErrorBoundary, and custom HTTP endpoints. Browse files, view images, and manage a virtual file vault — all inside your chat.

File Manager Demo

Try it now

Connect to the hosted instance:

https://muddy-pond-eyays.run.mcp-use.com/mcp

Or open the Inspector to test it interactively.

Setup on ChatGPT

  1. Open Settings > Apps and Connectors > Advanced Settings and enable Developer Mode
  2. Go to Connectors > Create, name it "File Manager", paste the URL above
  3. In a new chat, click + > More and select the File Manager connector

Setup on Claude

  1. Open Settings > Connectors > Add custom connector
  2. Paste the URL above and save

Features

  • File vault widget — browse and preview files in a rich UI
  • useFiles hook — React hook for file access in widgets
  • Image component — display images with automatic URL resolution
  • ErrorBoundary — graceful error handling in widgets
  • Custom HTTP endpoints — serve files via custom routes

Tools

ToolDescription
open-vaultOpen the file vault browser widget
get-fileRetrieve a specific file by name
list-filesList all available files

Available Widgets

WidgetPreview
file-vault

Local development

git clone https://github.com/mcp-use/mcp-file-manager.git
cd mcp-file-manager
npm install
npm run dev

Deploy

npx mcp-use deploy

Built with

License

MIT