AI导哈

智能聊天应用实现

基于EdgeOne Pages Functions技术构建的智能聊天应用，实现完整的Model Context Protocol（MCP）工作流程，支持通过Web界面与后端功能交互，提供高性能的边缘函数和兼容OpenAI格式的API。

  • by Tigress1176835896
  • TypeScript
  • 混合部署
  • 更新于
在 GitHub 查看 Tigress1176835896/mcp-on-edge

使用说明

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

技术文档

了解更多相关技术：

相关 MCP