MCP On Edge1111

EdgeOne Pages：MCP客户端和服务器端功能实现

项目概述

该项目展示了一个使用EdgeOne Pages Functions技术构建的智能聊天应用程序。它通过web界面与后端功能交互，实现完整的模型上下文协议（MCP）工作流。

系统架构由以下核心组件组成：

• MCP流式HTTP服务器(functions/mcp-server/index.ts)
• MCP客户端(functions/mcp-client/index.ts)
• 后端API(functions/v1/chat/completions/index.ts)作为MCP主机，负责协调整个MCP工作流程

通过这种架构，用户可以在浏览器中访问强大的MCP工具功能，实现智能交互，例如“用单个提示生成在线网页”

核心功能

• 交互式聊天界面： 使用Next.js和React构建的现代响应式web界面
• 高性能边缘功能： 部署在高度可扩展的EdgeOne Pages功能上的关键业务逻辑
• 完成MCP实施： 基于最新规范的模型上下文协议实现，提供强大的上下文管理和请求路由功能
• 兼容OpenAI格式： 后端API完全支持OpenAI格式的请求和响应处理

流式HTTP MCP服务器

在支持的应用程序中配置远程MCP服务 Streamable HTTP MCP Server.

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

部署


更多模板： EdgeOne页面

地方发展

环境设置

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

# Install dependencies
npm install
# Or use other package managers
# yarn install / pnpm install / bun install

# Start development server
npm run dev
# Or use other package managers
# 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

技术文档

了解更多相关技术：

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