• 🌟 深度解析:Supabase MCP 详细配置指南

    引言

    在当今数字化浪潮中,Supabase 作为一种后端即服务平台,正逐渐崭露头角。其 MCP(Model Context Protocol)更是为开发者们打开了一扇便捷之门。本文将深入浅出地解析 Supabase MCP 的详细配置,助您轻松驾驭这一强大工具。

  • 图片

    一、初识 Supabase MCP

    什么是 MCP?

    MCP 是一种连接大型语言模型(LLM)与平台(如 Supabase)的标准协议。它使 AI 助手能够代为操作和查询 Supabase 项目,极大地提升了开发效率。

    MCP 的优势

    • • 无缝集成 AI 助手与 Supabase 项目,实现智能化开发流程。

    • • 简化了对 Supabase 数据库的访问和操作,降低开发门槛。

    • • 提供统一的接口标准,方便不同 AI 工具与 Supabase 连接。

    二、准备工作

    开始配置之前,您需要完成以下准备工作:

    1. 1. 拥有一个 Supabase 账户,并创建一个项目。若尚未注册,可前往Supabase 官网进行注册和项目创建。

    2. 2.  在 Supabase 项目设置中,创建一个个人访问令牌(Personal Access Token)。该令牌用于身份验证,确保 MCP  服务器能够安全地访问您的 Supabase 账户。您可为其命名为 “Cursor MCP Server” 等具有描述性的名称,便于后续识别。

    3. 链接:https://supabase.com/dashboard/account/tokens

    4. 图片

    三、详细配置步骤

    (一)Cursor 配置

    1. 1. 打开 Cursor,并在项目根目录下创建一个名为 “.cursor” 的文件夹(如果该文件夹不存在)。

    2. 2. 在 “.cursor” 文件夹内创建或打开 “mcp.json” 文件。

    3. 3. 将以下配置代码复制到文件中,替换其中的 “” 为您刚才创建的个人访问令牌:

    {
      "mcpServers": {
        "supabase": {
          "command": "cmd",
          "args": [
            "/c",
            "npx",
            "-y",
            "@supabase/mcp-server-supabase@latest",
            "--access-token",
            "<personal-access-token>"
          ]
        }
      }
    }
    1. 4. 保存文件后,回到 Cursor,进入 “设置 / MCP”。当看到绿色的激活状态时,说明服务器已成功连接。

    (二)Windsurf 配置

    1. 1. 打开 Windsurf,进入 Cascade 助手界面。

    2. 2. 点击锤子(MCP)图标,选择 “配置” 以打开配置文件。

    3. 3. 将上述 Cursor 的配置代码复制到该文件中,同样替换个人访问令牌。

    4. 4. 保存文件后点击 “刷新” 按钮,连接成功后也会显示绿色的激活状态。

    (三)Visual Studio Code(Copilot)配置

    1. 1. 在项目根目录下创建 “.vscode” 文件夹(如果不存在)。

    2. 2. 在 “.vscode” 文件夹内创建或打开 “mcp.json” 文件。

    3. 3. 将以下配置代码添加到文件中:

    {
      "inputs": [
        {
          "type": "promptString",
          "id": "supabase-access-token",
          "description": "Supabase personal access token",
          "password": true
        }
      ],
      "servers": {
        "supabase": {
          "command": "cmd",
          "args": ["/c", "npx", "-y", "@supabase/mcp-server-supabase@latest"],
          "env": {
            "SUPABASE_ACCESS_TOKEN": "${input:supabase-access-token}"
          }
        }
      }
    }
    1. 4. 保存文件后,在 Copilot 聊天框中切换到 “代理” 模式。点击工具图标以确认 MCP 工具可用。使用服务器时,系统会提示您输入之前创建的个人访问令牌。

    (四)Cline 配置

    1. 1. 在 VS Code 中打开 Cline 扩展,点击 “MCP 服务器” 图标。

    2. 2. 点击 “配置 MCP 服务器” 打开配置文件。

    3. 3. 将与 Cursor 相同的配置代码复制到文件中,替换个人访问令牌。

    4. 4. 保存文件后,Cline 会自动重新加载配置。看到绿色激活状态则表示连接成功。

    (五)Claude desktop 配置

    1. 1. 打开 Claude desktop,进入 “设置” 选项。

    2. 2. 在 “开发者” 标签下,点击 “编辑配置” 以打开配置文件。

    3. 3. 将相同配置代码添加到文件中,替换个人访问令牌。

    4. 4. 保存文件并重启 Claude desktop。在新的聊天窗口中,您会看到带有新 MCP 服务器的锤子(MCP)图标。

    (六)Claude code 配置

    方法一:项目范围服务器(通过 .mcp.json 文件)

    1. 1. 在项目根目录下创建或打开 “.mcp.json” 文件。

    2. 2. 添加与 Cursor 相同的配置代码,并替换个人访问令牌。

    3. 3. 保存文件后重启 Claude code,以使新配置生效。

    方法二:本地范围服务器(通过 CLI 命令)

    您也可以通过在终端运行以下命令来添加 Supabase MCP 服务器,这将仅在当前项目中为您所用:

    claude mcp add supabase -s local -e SUPABASE_ACCESS_TOKEN=your_token_here npx -y @supabase/mcp-server-supabase@latest

    本地范围服务器会优先于同名的项目范围服务器,并且存储在您的项目特定的用户设置中。

    四、连接本地 Supabase 实例

    如果您运行的是本地 Supabase 实例,可以通过 Postgres MCP 服务器进行连接:

    1. 1. 查找数据库连接字符串 :运行相关命令,复制输出中的 “DB URL” 字段。

    2. 2. 配置 MCP 服务器 :将以下配置代码中的 “” 替换为您的连接字符串:

    {
      "mcpServers": {
        "supabase": {
          "command": "cmd",
          "args": ["/c", "npx", "-y", "@modelcontextprotocol/server-postgres", "<connection-string>"]
        }
      }
    }

    五、总结

    通过上述详细配置,您的  AI 工具已成功与 Supabase 连接。现在,您可以尝试让 AI 助手创建新项目、表格或获取项目配置等操作。Supabase MCP  为开发工作带来了极大的便利和智能化体验。在实际应用中,您可能会遇到各种问题,但随着不断实践和探索,您将能够更加熟练地运用这一工具,提高开发效率,创造出更加出色的项目。

    希望本文能为您的 Supabase MCP 配置之旅提供清晰的指引。如果您在配置过程中遇到任何问题,可以参考 Supabase 官方文档或提交问题报告以获取帮助。开启您的 Supabase MCP 开发之旅,探索无限可能吧!

    快来尝试这些配置,体验 Supabase MCP 带来的便捷与高效吧!

  • Supabase MCP官方配置链接:https://supabase.com/docs/guides/getting-started/mcp?queryGroups=os&os=windows#cursor

Logo

欢迎加入 MCP 技术社区!与志同道合者携手前行,一同解锁 MCP 技术的无限可能!

更多推荐