MCP (Model Context Protocol) Frontend

MCP（模型上下文协议）前端

Model Context Protocol (MCP) Kit 的前端应用，通过基于工具的功能实现与大模型的增强交互。

本仓库是 mcp-kit 的一部分，使用现代 Web 技术构建用户界面层。

🚀 功能

• 单页应用架构
• 与大模型的实时聊天界面
• 基于工具的交互能力
• 与 MCP 后端服务的集成
• 使用 React 和 TypeScript 构建的现代响应式 UI

🎥 演示

体验 MCP Kit 的实际应用——与大模型聊天，同时利用 MCP 服务提供的额外功能：

🛠️ 前置要求

• Node.js 20.x
• NPM 7.x

📦 安装

标准安装

1. 克隆仓库：

git clone https://github.com/shaharia-lab/mcp-frontend.git
cd mcp-frontend

[标准安装步骤的其余部分...]

🐳 Docker 安装

你可以使用我们官方的 Docker 镜像运行 MCP 前端：

docker pull ghcr.io/shaharia-lab/mcp-frontend:<version>

将 <version> 替换为你想使用的具体版本（例如 latest、1.0.0）。

使用 Docker 运行

docker run
-p 3000:3000
-e VITE_MCP_BACKEND_API_ENDPOINT=http://localhost:8081
ghcr.io/shaharia-lab/mcp-frontend:

环境变量

运行 MCP 前端需要以下环境变量：

env_key	默认值	必需	说明
VITE_MCP_BACKEND_API_ENDPOINT	-	是	MCP 后端 API 的基础 URL。

只需将 .env.example 文件复制为 .env 并根据需要更新值，即可在本地运行应用。对于 Docker，可以使用 -e 标志传递环境变量。

🚀 使用

开发

运行开发服务：

npm run dev

生产

构建生产版本：

npm run build

有关详细的配置选项，请参考 Vite 文档。

🏗️ 架构

MCP 前端采用以下技术构建：

• Vite - 构建工具和开发服务器
• React - UI 框架
• TypeScript - 类型安全的 JavaScript
• Tailwind CSS - 原子化 CSS 框架

🤝 贡献

我们欢迎贡献！以下是你可以提供帮助的方式：

1. Fork 仓库
2. 创建你的功能分支（git checkout -b feature/amazing-feature）
3. 提交你的更改（git commit -m 'Add some amazing feature'）
4. 推送到分支（git push origin feature/amazing-feature）
5. 开启 Pull Request

请确保你的 PR 遵循我们的编码标准并包含适当的测试。

🔍 相关项目

• MCP-Kit 后端 - 主后端服务
• 文档 - 完整项目文档

⚠️ 当前状态

本项目处于积极开发中。虽然功能正常，但暂不推荐在生产环境使用。我们正在进行以下工作：

• 增强错误处理
• 提高性能
• 增加更多工具集成
• 完善测试套件

📝 许可证

本项目采用 MIT 许可证——详见 LICENSE 文件。

🤔 支持

• 📧 邮箱：[email protected]
• 🐛 问题跟踪器
• 💬 Discord 邀请：社区聊天

🙏 致谢

• MCP Kit 社区
• 所有贡献者和支持者