AI导哈

多功能React应用

一个紧凑的、实用优先的React单页应用，包含计算器、文件阅读器、文本分析器和待办事项管理器等功能，与MCP风格的后端通信。

  • by Harshsfd
  • JavaScript
  • 本地部署
  • 更新于
在 GitHub 查看 harshsfd/multitask-mcp-server

使用说明

⚙️

MultiTask — MCP Frontend

A compact, utility-first React SPA (Calculator, File Reader, Text Analyzer, Todo Manager) that communicates with an MCP-style backend.

🌐 Live Demo · ✨ Features · 📂 Project Structure · ⚡ Getting Started · 🔐 Analysis & Security

✨ 特性

  • 🧮 计算器 --通过后端计算端点进行基本算术运算。
  • 📄 文件读取器 --从服务器请求文件内容以供审查（请谨慎使用）。
  • 🧾 文本分析器 --分析文本文件：行、单词、最常见的单词。
  • ✅ 计划管理 --通过后端列出/添加/编辑/删除任务。
  • ⚡ 使用Create React app+Axios的快速单页应用程序。

🛠 技术栈

  • 前端： React（创建React应用程序）、React 19、Axios
  • 造型： 自定义CSS（index.CSS/App.CSS）
  • 构建/部署： CRA(npm start, npm run build)，Vercel友好
  • 后端（预期）： REST端点（请参见 API终点 在......下面

📂 项目结构


MultiTask/
├── public/
│   ├── index.html
│   ├── logo192.png
│   └── ...
├── src/
│   ├── components/
│   │   ├── Calculator.js
│   │   ├── FileReader.js
│   │   ├── TextAnalyzer.js
│   │   └── TodoManager.js
│   ├── api.js               # axios instance + BASE\_URL
│   ├── App.js
│   ├── index.js
│   └── index.css
├── package.json
└── README.md

📡 API终点（观察/预期）

前端在配置的上调用这些端点 BASE_URL:

  • GET /calculate?a=&b=&op=

    • 退货 { result: number } 或 { error: string }.

  • GET /read_file?path=

    • 退货 { content: "file contents..." } 或 { error: string }.
    • 警告： 如果服务器接受任意路径→ 文件泄露风险.

  • GET /analyze_text?path=

    • 返回文本统计信息： { lines, words, characters, most_common_words }.

  • GET /todos

    • 加 /todos POST/PUT/DELETE取决于后端。

⚡ 入门（开发人员）

使用Create React应用程序。建议使用节点16+。

# 1. Clone
git clone https://github.com/Harshsfd/Multitask-MCP-Server.git
cd your-repo

# 2. Install
npm install

# 3. Configure API base (recommended: use env)
# Option A: Quick edit (development)
# Edit src/api.js and set BASE_URL to your backend (default: https://mcp-server-qko7.onrender.com)

# Option B: Use an env variable (recommended)
# Create a .env file at project root with:
# REACT_APP_API_BASE_URL=https://your-backend.example.com
#
# Then either update src/api.js to use process.env.REACT_APP_API_BASE_URL (see snippet below)

# 4. Run locally
npm start
# Open http://localhost:3000

建议更改 src/api.js （使用env-var）

将当前硬编码的BASE_URL替换为：

// src/api.js
import axios from "axios";

const BASE_URL = process.env.REACT_APP_API_BASE_URL || "https://mcp-server-qko7.onrender.com";
export const api = axios.create({ baseURL: BASE_URL });

创建 .env.example:

# .env.example
REACT_APP_API_BASE_URL=https://your-backend.example.com

重要：添加 .env 向 .gitignore 永远不要泄露秘密。

🚀 部署

  • 对于 维塞尔：将代码推送到GitHub→ 将项目导入Vercel→ add REACT_APP_API_BASE_URL 在环境变量中→ 部署。
  • 对于一般节点主机：使用构建 npm run build 并服务 build/ 文件夹。

🔍 深度分析和安全说明（可操作）

调查结果摘要

  • 客户端代码 干净易读；小型实用程序作为单独的组件实现。

  • src/api.js 目前使用a 硬编码后端URL --移动到env变量以获得灵活性和安全性。

  • 重大风险： FileReader 组件帖子任意 path 价值到 GET /read_file。如果服务器不清理/白名单允许的路径，这可能会导致：

    • 目录遍历（例如。 ../../etc/passwd)
    • 泄露机密和系统文件
    • 隐私泄露

安全与加固（优先级）

  1. 绝不允许任意文件系统读取。 后端必须执行：

    • A. 白名单 允许的目录或文件ID，或
    • 将客户端文件引用映射到内部安全路径（不接受原始路径）。

  2. 输入验证和净化 在所有端点上(/read_file, /analyze_text, /calculate（所有端点）

  3. 身份验证和授权:

    • 为敏感端点添加身份验证（读取文件，如果不是公开的，则编辑待办事项）。
    • 速率限制端点，以防止暴力破解和数据提取。

  4. 跨域资源共享：限制 Access-Control-Allow-Origin 到生产环境中的前端域。

  5. 记录和监控：记录可疑请求（例如。， .. 在……里面 path)并添加警报。

  6. 删除硬编码的后端URL 在客户端--使用 REACT_APP_API_BASE_URL 如上所述的env-var。

  7. HTTPS&CSP：确保后端证书有效，并考虑CSP index.html.

代码质量和开发人员改进

  • 添加 .env.example, .gitignore env文件的规则。
  • 添加一个小 README.dev.md 使用后端合约（端点+预期的JSON形状）。
  • 为添加GitHub操作CI npm ci, npm run build，基本单元测试（Jest）。
  • 为关键流添加端到端烟雾测试（Playwright）。

✅ 快速缓解补丁建议（现在要更改什么）

  1. 改变 src/api.js 使用env-var （参见 入门指南).
  2. 临时UI安全说明 --注释 File Reader 并在生产中禁用它，直到后端硬化。示例UI通知 FileReader.js:
// Short UI warning (add near input)
<p className="small warning">⚠️ This tool can read server files. Make sure the backend restricts allowed paths before using in production.</p>

  1. 后端检查表 （如果你能控制它）：

    • 实现路径规范化+禁止 .. 片段
    • 只允许配置的基本目录：例如。， /var/app/files 并拒绝任何超出它的路径
    • 读取终结点需要API密钥或会话

📌 最后注意事项和下一步

  • 这个前端是 轻量化，生产就绪 一旦后端被验证/保护。

  • 如果你愿意，我可以：

    • 为生成一个小补丁PR（代码片段） src/api.js + .env.example +README更新。
    • 为起草一个安全的后端处理程序模板 read_file （node/express）强制执行基本目录白名单。

Made with ❤️ by Harsh Bhardwaj

相关 MCP