Supabase边缘函数MCP服务器

一个用于运行和测试托管MCP服务器的Supabase边缘函数的最小化设置。

  • by graysonhicks
  • TypeScript
  • 本地部署
  • 更新于
在 GitHub 查看 graysonhicks/mastra-mcp-supabase-example

使用说明

Supabase MCP 设置与测试

一个用于运行和测试托管MCP服务器的Supabase边缘函数的最小配置。

📦 先决条件

🚀 本地开发

启动本地Supabase堆栈并运行MCP函数:

supabase start
supabase functions serve mcp

终点(或:终端点)

  • 健康: http://127.0.0.1:54321/functions/v1/mcp/health
  • MCP:(此处“MCP”可能是一个缩写或特定术语,没有上下文难以给出准确翻译,但一般可理解为“最小成本路径”、“多路复用通信协议”等,具体需根据上下文确定) http://127.0.0.1:54321/functions/v1/mcp

示例:

curl -s http://127.0.0.1:54321/functions/v1/mcp/health | jq

🧪 测试MCP客户端

安装依赖项并设置MCP服务器URL:

pnpm install
export MCP_SERVER_URL="http://127.0.0.1:54321/functions/v1/mcp"
# or in .env
# MCP_SERVER_URL="http://127.0.0.1:54321/functions/v1/mcp"

运行测试:

pnpm start

这验证了:

  1. MCP服务器健康状况
  2. 客户端连接
  3. Echo工具的可用性
  4. 工具执行

✅ 预期结果: Echo 工具对提供的消息做出了正确的响应。


📝 笔记

  • 已为所有来源启用CORS(跨源资源共享)。

  • 代码驻留在 supabase/functions/mcp/index.ts。

  • 在调用Mastra MCP工具时,将参数用一个(结构/容器)包裹起来 context 对象:

    await tool.execute({ context: { message: "hello" } })
    

⚠️ Node ↔ Deno 请求/响应适配(Supabase Edge)

Supabase Edge Functions 在 Deno(Web 标准请求/响应)上运行,而 Mastra MCP 的 HTTP 服务器则期望使用 Node.js req/res为了弥补这一差距,我们使用 fetch-to-node:

  • toReqRes(webRequest: Request) → { req, res } 将Deno进行转换 Request 转化为Node风格 IncomingMessage/ServerResponse
  • toFetchResponse(res) → Response 将Node转换 ServerResponse 回到网页 Response

所使用的最小图案 supabase/functions/mcp/index.ts:

import { toReqRes, toFetchResponse } from "npm:fetch-to-node@latest";

async function handleMCP(webRequest: Request) {
  const { req, res } = toReqRes(webRequest);

  await server.startHTTP({
    url: new URL(webRequest.url),
    httpPath: "/mcp",
    req,
    res,
    options: { sessionIdGenerator: () => crypto.randomUUID() }
  });

  // optional: add CORS headers
  const headers = new Headers(res.headers);
  headers.set("Access-Control-Allow-Origin", "*");

  return await toFetchResponse(res);
}

关键词:

  • 始终提供原件 webRequest.url 到 startHTTP 作为 URL 例子
  • 设定 httpPath 以匹配您的路线(此处 "/mcp")。
  • 在Node.js中添加CORS头部 res 在返回之前设置请求头 toFetchResponse(res) 如需需要。
  • 把手;处理 OPTIONS 如果从浏览器访问,则使用允许的CORS进行预检。