MCP On Edge

🚀 EdgeOne 一键部署：MCP クライアントとサーバ機能実現プロジェクト

このプロジェクトは、EdgeOne Pages 技術に基づいて構築されたインテリジェントチャットアプリケーションを展示しています。Web インターフェースを通じてバックエンド機能とやり取りし、完全なモデルコンテキストプロトコル（Model Context Protocol, MCP）ワークフローを実現しています。

🚀 クイックスタート

このシステムは、以下の主要コンポーネントで構成されています。

• MCP ストリーミング HTTP サーバ（functions/mcp-server/index.ts）
• MCP クライアント（functions/mcp-client/index.ts）
• バックエンド API（functions/v1/chat/completions/index.ts）は MCP HOST として機能し、MCP ワークフロー全体を調整します。

このアーキテクチャにより、ユーザーはブラウザを通じて強力な MCP ツール機能にアクセスでき、「単一プロンプトでオンラインウェブページを生成」などのインテリジェントなインタラクションを実現できます。

✨ 主な機能

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

💻 使用例

基本的な使用法

流式 HTTP MCP サーバ をサポートするアプリケーションでリモート MCP サービスを構成する方法は次のとおりです。

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

📦 インストール

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

ローカル開発

環境構築

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

# 依存関係のインストール
npm install
# または他のパッケージマネージャーを使用する場合
# yarn install / pnpm install / bun install

# 開発サーバの起動
npm run dev
# または他のパッケージマネージャーを使用する場合
# 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 のサーバーレス関数の詳細な説明
• モデルコンテキストプロトコル（MCP） - 2025-03-26 バージョンに基づくストリーミング HTTP 転送の実装