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

EdgeOne Pages: MCP Client and Server Implementation with Functions

Remote
github.com/xixianDeveloper Tools0Updated 79w ago
Repository

About EdgeOne Pages: MCP Client and Server Implementation with Functions

A chat application example built with EdgeOne Pages Functions, combining an MCP client, server, and backend API that coordinates the workflow. It is intended for browser-based use of MCP tools and supports OpenAI-formatted requests and responses.

Key features

  1. 01Interactive browser chat interface
  2. 02EdgeOne Pages Functions backend
  3. 03MCP client and server implementation
  4. 04Coordinates the complete MCP workflow
  5. 05OpenAI-format API compatibility

Use cases

  1. 01Interact with MCP tools in a browser
  2. 02Generate webpages from a prompt
  3. 03Deploy a chat app backed by edge functions

MCP support

The project includes a Streamable HTTP MCP server and an MCP client, with the backend API coordinating the MCP workflow. The server can be connected to applications that support Streamable HTTP.

#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.