MCP On Edge

🚀 EdgeOne 一键部署：MCP 客户端与服务器功能实现项目

本项目基于 EdgeOne Pages 技术构建了一个智能聊天应用程序。它借助 Web 界面与后端功能交互，实现了完整的模型上下文协议（Model Context Protocol, MCP）工作流，用户可通过浏览器使用强大的 MCP 工具，实现如“单提示生成在线网页”等智能交互。

🚀 快速开始

部署

点击下方按钮，即可使用 EdgeOne Pages 进行部署：

更多模板可参考：EdgeOne Pages

本地开发

环境搭建

首先，安装项目依赖并启动开发服务器：

# 安装依赖
npm install
# 或使用其他包管理器
# yarn install / pnpm install / bun install

# 启动开发服务器
npm run dev
# 或使用其他包管理器
# yarn dev / pnpm dev / bun dev

接着，配置环境变量：复制 .env.example 文件并重命名为 .env，然后填写你的 AI 服务接口配置信息。

启动完成后，在浏览器中访问 http://localhost:3000 即可查看应用程序。

项目结构

• 前端界面：app/page.tsx 包含主要页面逻辑和 UI 组件。
• 后台函数：所有边缘函数位于 functions 目录下。
  • 聊天 API：functions/v1/chat/completions
  • MCP 服务器：functions/mcp-server
  • MCP 客户端：functions/mcp-client

✨ 主要特性

• 交互式聊天界面：采用现代化、响应式的 Web 界面，基于 Next.js 和 React 构建。
• 高性能边缘函数：关键业务逻辑部署在高度可扩展的 EdgeOne Pages Functions 上。
• 完整的 MCP 实现：基于最新规范实现的模型上下文协议，具备强大的上下文管理和请求路由能力。
• 与 OpenAI 格式兼容：后端 API 完全支持 OpenAI 格式的请求和响应处理。

💻 使用示例

流式 HTTP MCP 服务器

在支持 流式 HTTP MCP 服务器 的应用程序中配置远程 MCP 服务，示例如下：

{
  "mcpServers": {
    "edgeone-pages-mcp-server": {
      "url": "https://mcp-on-edge.edgeone.site/mcp-server"
    }
  }
}

📚 详细文档

若想了解相关技术，可参考以下文档：

• Next.js 文档 - Next.js 框架功能和 API。
• EdgeOne Pages Functions 文档 - EdgeOne 无服务器函数的详细说明。
• 模型上下文协议（MCP） - 基于 2025 - 03 - 26 版本的流式 HTTP 传输实现。