MCP On Edge

🚀 EdgeOne One-Click Deployment: MCP Client and Server Function Implementation Project

This project showcases an intelligent chat application built on EdgeOne Pages technology. It interacts with backend functions through a web interface, implementing a complete Model Context Protocol (MCP) workflow.

The core components of the system architecture include:

• MCP Streaming HTTP Server (functions/mcp-server/index.ts)
• MCP Client (functions/mcp-client/index.ts)
• Backend API (functions/v1/chat/completions/index.ts) acting as the MCP HOST, responsible for coordinating the entire MCP workflow

With this architecture, users can access powerful MCP tool functions through a browser, enabling intelligent interactions such as "single-prompt generation of online web pages".

✨ Features

• Interactive Chat Interface: A modern, responsive web interface built on Next.js and React
• High-Performance Edge Functions: Key business logic deployed on highly scalable EdgeOne Pages Functions
• Complete MCP Implementation: A model context protocol based on the latest specifications, providing powerful context management and request routing capabilities
• Compatibility with OpenAI Format: The backend API fully supports request and response handling in OpenAI format

🚀 Quick Start

Streaming HTTP MCP Server

Configure the remote MCP service in an application that supports the Streaming HTTP MCP Server.

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

Deployment

More templates: EdgeOne Pages

Local Development

Environment Setup

First, install the dependencies and start the development server:

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

# Start the development server
npm run dev
# Or use other package managers
# yarn dev / pnpm dev / bun dev

Configure environment variables: Copy the .env.example file and rename it to .env, then fill in your AI service interface configuration information.

After starting, access http://localhost:3000 in your browser to view the application.

Project Structure

• Frontend Interface: app/page.tsx contains the main page logic and UI components
• Backend Functions: All edge functions are located in the functions directory
  • Chat API: functions/v1/chat/completions
  • MCP Server: functions/mcp-server
  • MCP Client: functions/mcp-client

📚 Documentation

Learn about related technologies:

• Next.js Documentation - Next.js framework features and APIs
• EdgeOne Pages Functions Documentation - Detailed instructions for EdgeOne serverless functions
• Model Context Protocol (MCP) - Streaming HTTP transmission implementation based on the 2025-03-26 version