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 傳輸實現。