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

EdgeOne Pages: MCP Client and Server Implementation with Functions

Remote
github.com/amylixingDeveloper Tools0Updated 74w ago
Repository

About EdgeOne Pages: MCP Client and Server Implementation with Functions

This EdgeOne Pages project demonstrates a browser-based chat application that coordinates MCP clients, a Streamable HTTP server, and backend functions. It is intended for teams exploring MCP workflows and OpenAI-format chat APIs on EdgeOne Pages.

Key features

  1. 01Responsive Next.js and React chat UI
  2. 02EdgeOne Pages Functions backend
  3. 03MCP client and Streamable HTTP server
  4. 04OpenAI-format request and response support

Use cases

  1. 01Try MCP tool interactions through a browser chat
  2. 02Deploy an MCP workflow using EdgeOne Pages Functions

MCP support

The project includes a Streamable HTTP MCP server and an MCP client, coordinated by a backend API acting as the MCP host. The server exposes MCP tools to compatible clients.

#mcp#edgeone#chat-application

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.