mcpField
E
EdgeOne Pages: MCP Client and Server Implementation with Functions

EdgeOne Pages: MCP Client and Server Implementation with Functions

Remote
github.com/icyhdDeveloper Tools0Updated 78w ago
Repository

About EdgeOne Pages: MCP Client and Server Implementation with Functions

A web chat application demonstrating an MCP client, server, and host built with EdgeOne Pages Functions. It combines browser-based chat with MCP workflow handling and an OpenAI-format-compatible backend.

Key features

  1. 01Interactive Next.js and React chat UI
  2. 02EdgeOne Pages Functions backend
  3. 03MCP client, server, and host workflow
  4. 04OpenAI-format request and response handling

Use cases

  1. 01Access MCP tools through a browser chat
  2. 02Generate online webpages from a prompt
  3. 03Configure a remote Streamable HTTP MCP server

MCP support

The project implements an MCP Streamable HTTP server and client, with a backend API coordinating the workflow as host. The server can be configured as a remote MCP service in compatible applications.

Configuration

Remote servers need no local install. Pick your client, then copy the config or install in one click.

Endpointhttps://mcp-on-edge.edgeone.site/mcp-server
Copy install command
Claude CodeTerminal
Cursor.cursor/mcp.json
VS Code.vscode/mcp.json
Claude Desktopclaude_desktop_config.json
Windsurf~/.codeium/windsurf/mcp_config.json

Run commands in a terminal; paste JSON into the client’s MCP config and restart. Servers that need sign-in will prompt on first connect.

Tools

1
ParameterTypeRequiredDescription
valuestringYesHTML or text content to deploy. Provide complete HTML or text content you want to publish, and the system will return a public URL where your content can be accessed.

Details

From the project README

EdgeOne Pages: MCP Client and Server Implementation with Functions

Project Overview

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

The system architecture consists of the following core components:

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

Through this architecture, users can access powerful MCP tool capabilities in the browser, enabling intelligent interactions such as "generating online webpages with a single prompt."

Core Features

  • Interactive Chat Interface: Modern, responsive web interface built with Next.js and React
  • High-Performance Edge Functions: Critical business logic deployed on highly scalable EdgeOne Pages Functions
  • Complete MCP Implementation: Model Context Protocol implementation based on the latest specifications, providing powerful context management and request routing capabilities
  • OpenAI Format Compatible: Backend API fully supports OpenAI-formatted request and response handling

Streamable HTTP MCP Server

Configure remote MCP services in applications that support Streamable HTTP MCP Server.

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

Deploy

Deploy with EdgeOne Pages

More Templates: EdgeOne Pages

Local Development

Environment Setup

First, install dependencies and start the development server:

# 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

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

After starting, visit 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 in the functions directory
    • Chat API: functions/v1/chat/completions
    • MCP Server: functions/mcp-server
    • MCP Client: functions/mcp-client

Technical Documentation

Learn more about related technologies:

Comments

Markdown supported

New to MCP?

From what the protocol is to installing your first server, these answers cover most first questions.

An open protocol that defines how AI applications connect to external tools and data in a uniform way. Clients talk to the model; MCP servers provide tools, resources and prompt templates. They exchange standard messages, so one server can be reused by many clients.