EdgeOne Pages: MCP Client and Server Implementation with Functions

Name: EdgeOne Pages: MCP Client and Server Implementation with Functions
Author: icyhd

远程服务

github.com/icyhd开发工具078 周前更新

代码仓库

关于 EdgeOne Pages: MCP Client and Server Implementation with Functions

这是一个使用 EdgeOne Pages Functions 构建的网页聊天应用，展示 MCP 客户端、服务端和 Host 的协作。它结合浏览器聊天界面、MCP 工作流处理及兼容 OpenAI 格式的后端。

主要功能

01Next.js 和 React 交互式聊天界面
02EdgeOne Pages Functions 后端
03MCP 客户端、服务端与 Host 工作流
04兼容 OpenAI 格式的请求与响应

适用场景

01通过浏览器聊天使用 MCP 工具
02根据提示词生成在线网页
03配置远程 Streamable HTTP MCP 服务

MCP 相关

项目实现 MCP Streamable HTTP 服务端和客户端，并由后端 API 作为 Host 协调工作流。兼容的应用可将该服务配置为远程 MCP 服务。

配置

远程服务无需本地安装。选择你使用的客户端，复制配置或使用一键安装。

服务地址https://mcp-on-edge.edgeone.site/mcp-server

一键复制安装命令

Claude CodeTerminalclaude mcp add --transport http on-edge-icyhd https://mcp-on-edge.edgeone.site/mcp-server

Cursor.cursor/mcp.json{"mcpServers":{"on-edge-icyhd":{"type":"http","url":"https://mcp-on-edge.edgeone.site/mcp-server"}}}在 Cursor 中打开

VS Code.vscode/mcp.json{"servers":{"on-edge-icyhd":{"type":"http","url":"https://mcp-on-edge.edgeone.site/mcp-server"}}}在 VS Code 中打开

Claude Desktopclaude_desktop_config.json{"mcpServers":{"on-edge-icyhd":{"type":"http","url":"https://mcp-on-edge.edgeone.site/mcp-server"}}}

Windsurf~/.codeium/windsurf/mcp_config.json{"mcpServers":{"on-edge-icyhd":{"serverUrl":"https://mcp-on-edge.edgeone.site/mcp-server"}}}

命令在终端中运行；JSON 粘贴到对应客户端的 MCP 配置后重启。需要授权的服务会在首次连接时提示登录。

工具

参数	类型	必填	说明
value	string	是	要部署的 HTML 或文本内容。提供要发布的完整 HTML 或文本内容，系统将返回一个可公开访问该内容的 URL。

详细介绍

EdgeOne Pages：使用 Functions 实现 MCP 客户端和服务端

项目概览

本项目展示了一个使用 EdgeOne Pages Functions 技术构建的智能聊天应用。它通过 Web 界面与后端函数交互，实现完整的 Model Context Protocol（MCP）工作流。

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

MCP Streamable HTTP 服务端（functions/mcp-server/index.ts）
MCP 客户端（functions/mcp-client/index.ts）
后端 API（functions/v1/chat/completions/index.ts），作为 MCP HOST，负责协调整个 MCP 工作流

借助此架构，用户可以在浏览器中使用强大的 MCP 工具功能，实现“通过一条提示词在线生成网页”等智能交互。

核心功能

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

Streamable HTTP MCP 服务端

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

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

部署

更多模板：EdgeOne Pages

本地开发

环境配置

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

# 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