在浏览器使用 MCP，纯边缘函数实现 MCP Client Server

只需对原本的 MCP Stdio Server 进行少量调整，即可实现 Streamable HTTP MCP Server，并通过 Pages Function 快速部署到边缘。以下是完整的实现代码，没有进行任何省略，这有助于更清晰地理解通信过程：

const SESSION_ID_HEADER_NAME = 'mcp-session-id';export async function getBaseUrl(): Promise<string> {try {const res = await fetch('https://mcp.edgeone.site/get_base_url');if (!res.ok) {throw new Error(`HTTP error: ${res.status} ${res.statusText}`);}const data = await res.json();return data.baseUrl;} catch (error) {console.error('Failed to get base URL:', error);throw error;}
}export async function deployHtml(value: string, baseUrl: string) {const res = await fetch(baseUrl, {method: 'POST',headers: {'Content-Type': 'application/json',},body: JSON.stringify({ value }),});if (!res.ok) {throw new Error(`HTTP error: ${res.status} ${res.statusText}`);}const { url, error } = await res.json();return url || error;
}const handleApiError = (error: any) => {console.error('API Error:', error);const errorMessage = error.message || 'Unknown error occurred';return {content: [{type: 'text' as const,text: `Error: ${errorMessage}`,},],isError: true,};
};// Handle initialization request
const handleInitialize = (id: string) => {return {jsonrpc: '2.0',id,result: {protocolVersion: '2024-11-05',serverInfo: {name: 'edgeone-pages-deploy-mcp-server',version: '1.0.0',},capabilities: {tools: {},},},};
};// Handle tools list request
const handleToolsList = (id: string) => {return {jsonrpc: '2.0',id,result: {tools: [{name: 'deploy-html',description:'Deploy HTML content to EdgeOne Pages, return the public URL',inputSchema: {type: 'object',properties: {value: {type: 'string',description:'HTML 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.',},},required: ['value'],},},],},};
};// Handle deploy HTML request
const handleDeployHtml = async (id: string, params: any) => {try {const value = params.arguments?.value;if (!value) {throw new Error('Missing required argument: value');}const baseUrl = await getBaseUrl();const result = await deployHtml(value, baseUrl);return {jsonrpc: '2.0',id,result: {content: [{type: 'text',text: result,},],},};} catch (e: any) {const error = handleApiError(e);return {jsonrpc: '2.0',id,result: error,};}
};// Handle resources or prompts list request
const handleResourcesOrPromptsList = (id: string, method: string) => {const resultKey = method.split('/')[0];return {jsonrpc: '2.0',id,result: {[resultKey]: [],},};
};// Handle unknown method
const handleUnknownMethod = (id: string) => {return {jsonrpc: '2.0',id,error: {code: -32601,message: 'Method not found',},};
};// Handle streaming request
const handleStreamingRequest = () => {return new Response('Not implemented', { status: 405 });
};// Handle CORS preflight request
const handleCorsRequest = () => {return new Response(null, {status: 204,headers: {'Access-Control-Allow-Origin': '*','Access-Control-Allow-Methods': 'GET, POST, OPTIONS','Access-Control-Allow-Headers': 'Content-Type, Authorization','Access-Control-Max-Age': '86400',},});
};// Process JSON-RPC request
const processJsonRpcRequest = async (body: any) => {if (body.method === 'initialize') {return handleInitialize(body.id);}if (body.method === 'tools/list') {return handleToolsList(body.id);}if (body.method === 'tools/call' && body.params?.name === 'deploy-html') {return await handleDeployHtml(body.id, body.params);}if (body.method === 'resources/list' || body.method === 'prompts/list') {return handleResourcesOrPromptsList(body.id, body.method);}return handleUnknownMethod(body.id);
};export const onRequest = async ({ request }: { request: any }) => {const sessionId = request.headers.get(SESSION_ID_HEADER_NAME);if (!sessionId) {// Perform standard header validation, allowing all requests to pass through}const method = request.method.toUpperCase();try {// Handle SSE streaming requestsif (method === 'GET' &&request.headers.get('accept')?.includes('text/event-stream')) {return handleStreamingRequest();}// Handle JSON-RPC requestsif (method === 'POST') {const contentType = request.headers.get('content-type');if (!contentType?.includes('application/json')) {return new Response('Unsupported Media Type', { status: 415 });}const body = await request.json();const responseData = await processJsonRpcRequest(body);return new Response(JSON.stringify(responseData), {headers: {'Content-Type': 'application/json',},});}// Handle CORS preflight requestsif (method === 'OPTIONS') {return handleCorsRequest();}// Method not allowedreturn new Response('Method Not Allowed', { status: 405 });} catch (error) {console.error('Error processing request:', error);return new Response(JSON.stringify({jsonrpc: '2.0',id: null,error: {code: -32000,message: 'Internal server error',},}),{status: 500,headers: {'Content-Type': 'application/json',},});}
};

import { z } from 'zod';
import { MCPClient } from '../../../mcp-client';// 用于验证传入消息的 Schema
const messageSchema = z.object({messages: z.array(z.object({role: z.enum(['user', 'assistant', 'system']),content: z.string(),})),}).passthrough();// API响应和错误处理的辅助函数
const handleApiError = (error: any) => {// 简化的错误处理逻辑，返回格式化错误响应// ...省略详细实现...
};const createResponse = (data: any) => {// 创建标准API响应，包含CORS头// ...省略详细实现...
};const handleOptionsRequest = () => {// 处理CORS预检请求// ...省略详细实现...
};/*** 根据用户请求生成HTML内容*/
async function generateHTMLContent(query: string, openaiConfig: any) {// 1. 构建系统提示，指导AI生成完整的HTML// 2. 调用AI接口生成HTML内容// 3. 处理响应并返回生成的HTML// ...省略详细实现...
}/*** MCP工具函数，抽象MCP能力*/
const MCPUtils = {// 创建并初始化MCP客户端createClient: async (clientName: string,serverUrl: string): Promise<MCPClient> => {// ...省略详细实现...},// 根据名称查找MCP工具findTool: (client: MCPClient, toolName: string): any => {// ...省略详细实现...},// 执行MCP工具executeTool: async (client: MCPClient,toolName: string,params: any): Promise<string> => {// ...省略详细实现...},// 清理MCP客户端资源cleanup: async (client: MCPClient): Promise<void> => {// ...省略详细实现...},
};/*** 使用MCP客户端部署HTML内容*/
async function deployHtml(htmlContent: string): Promise<string> {// 1. 创建MCP客户端并连接到服务器// 2. 执行deploy-html工具部署HTML// 3. 确保在完成后清理客户端资源// ...省略详细实现...
}/*** 边缘函数的主入口点*/
export async function onRequest({ request, env }: any) {// 处理预检请求if (request.method === 'OPTIONS') {return handleOptionsRequest();}// 获取环境变量const { BASE_URL, API_KEY, MODEL } = env;try {// 1. 解析并验证请求JSON// 2. 提取用户查询// 3. 基于用户查询生成HTML内容// 4. 使用MCP部署HTML内容// 5. 基于部署结果生成友好响应// 6. 返回结果给用户const json = await request.clone().json();const parseResult = messageSchema.safeParse(json);// 验证请求格式...// 提取用户最后一条消息const userQuery = '...'; // 从消息中提取用户查询// 生成HTML并部署const htmlContent = await generateHTMLContent(userQuery, {apiKey: API_KEY,baseUrl: BASE_URL,model: MODEL,});const deploymentResult = await deployHtml(htmlContent);// 生成友好响应const aiResponse = await generateAIResponse(deploymentResult, {apiKey: API_KEY,baseUrl: BASE_URL,model: MODEL,});// 返回结果return createResponse({choices: [{ message: { role: 'assistant', content: aiResponse } }],});} catch (error: any) {return createResponse(handleApiError(error));}
}/*** 基于部署结果生成友好的AI响应*/
async function generateAIResponse(deploymentResult: string,openaiConfig: any
): Promise<string> {// 1. 构建提示，指导AI生成友好的部署结果响应// 2. 调用AI接口生成响应// 3. 处理并返回结果，包含后备方案// ...省略详细实现...
}