EdgeOne Pages: MCP Client and Server Implementation with Functions

EdgeOne Pages：Functions による MCP クライアントとサーバーの実装

プロジェクト概要

このプロジェクトでは、EdgeOne Pages Functions テクノロジーを使用して構築したインテリジェントなチャットアプリケーションを紹介します。Web インターフェースを通じてバックエンド関数と連携し、Model Context Protocol（MCP）のワークフロー全体を実装しています。

システムアーキテクチャは、次の主要コンポーネントで構成されています。

• MCP Streamable HTTP Server（functions/mcp-server/index.ts）
• MCP クライアント（functions/mcp-client/index.ts）
• MCP HOST として MCP ワークフロー全体の調整を担うバックエンド API（functions/v1/chat/completions/index.ts）

このアーキテクチャにより、ユーザーはブラウザー上で強力な MCP ツール機能を利用でき、「プロンプトひとつでオンラインの Web ページを生成する」といったインテリジェントな操作が可能になります。

主な機能

• 対話型チャットインターフェース： Next.js と React で構築された、モダンでレスポンシブな Web インターフェースです
• 高性能なエッジ関数： 重要なビジネスロジックを、高い拡張性を備えた EdgeOne Pages Functions にデプロイします
• 完全な MCP 実装： 最新の仕様に基づく Model Context Protocol の実装で、強力なコンテキスト管理とリクエストルーティング機能を提供します
• OpenAI 形式との互換性： バックエンド API は、OpenAI 形式のリクエストとレスポンスの処理を完全にサポートします

Streamable HTTP MCP Server

Streamable HTTP MCP Server に対応したアプリケーションで、リモート MCP サービスを設定します。

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

デプロイ

その他のテンプレート：EdgeOne Pages

ローカル開発

環境設定

まず、依存関係をインストールし、開発サーバーを起動します。

# 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

環境変数を設定します。.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

技術ドキュメント

関連技術について詳しくは、以下をご覧ください。

• Next.js ドキュメント - Next.js フレームワークの機能と API
• EdgeOne Pages Functions ドキュメント - EdgeOne のサーバーレス関数に関する詳細な説明
• Model Context Protocol（MCP） - 2025-03-26 版の Streamable HTTP トランスポートに基づく実装