How to integrate Supabase MCP with Vercel AI SDK

Framework Integration Gradient
Supabase Logo
Vercel AI SDK Logo
divider

Introduction

This guide walks you through connecting Supabase to Vercel AI SDK using the Composio tool router. By the end, you'll have a working Supabase agent that can create a new secret api key for my project, list all third-party auth providers configured, delete google oauth from my supabase project, check if 'app-preview' subdomain is available through natural language commands.

This guide will help you understand how to give your Vercel AI SDK agent real control over a Supabase account through Composio's Supabase MCP server.

Before we dive in, let's take a quick look at the key ideas and tools involved.

TL;DR

Here's what you'll learn:
  • How to set up and configure a Vercel AI SDK agent with Supabase integration
  • Using Composio's Tool Router to dynamically load and access Supabase tools
  • Creating an MCP client connection using HTTP transport
  • Building an interactive CLI chat interface with conversation history management
  • Handling tool calls and results within the Vercel AI SDK framework

What is Vercel AI SDK?

The Vercel AI SDK is a TypeScript library for building AI-powered applications. It provides tools for creating agents that can use external services and maintain conversation state.

Key features include:

  • streamText: Core function for streaming responses with real-time tool support
  • MCP Client: Built-in support for Model Context Protocol
  • Step Counting: Control multi-step tool execution
  • OpenAI Provider: Native integration with OpenAI models

What is the Supabase MCP server, and what's possible with it?

The Supabase MCP server is an implementation of the Model Context Protocol that connects your AI agent and assistants like Claude, Cursor, etc directly to your Supabase account. It provides structured and secure access to your Supabase projects, so your agent can perform actions like managing API keys, configuring authentication, and handling custom domains on your behalf.

  • API key management: Create, update, or permanently delete project API keys, including setting descriptions and customizing JWT templates for secure access control.
  • Third-party auth integration control: List, retrieve, or remove third-party authentication providers (like Google or GitHub) from your Supabase project to tailor user sign-in options.
  • Custom domain and subdomain setup: Activate custom hostnames or vanity subdomains for your Supabase project, ensuring your app is accessible at a branded URL after DNS verification.
  • OAuth authorization handling: Generate OAuth 2.0 authorization URLs for secure user authentication flows, supporting seamless integration with registered apps.
  • Subdomain availability checks: Instantly verify if a desired vanity subdomain is available for your project before making DNS changes or launching branded experiences.

Supported Tools & Triggers

Tools
Create project api keyCreates a 'publishable' or 'secret' api key for an existing supabase project, optionally with a description; 'secret' keys can have customized jwt templates.
Delete an API key from the projectPermanently deletes a specific api key (identified by `id`) from a supabase project (identified by `ref`), revoking its access.
Get a third-party integrationRetrieves the detailed configuration for a specific third-party authentication (tpa) provider, identified by `tpa id`, within an existing supabase project specified by `ref`.
List third-party auth integrations for projectLists all configured third-party authentication provider integrations for an existing supabase project (using its `ref`), suitable for read-only auditing or verifying current authentication settings.
Delete third party auth configRemoves a third-party authentication provider (e.
Update an API key for the projectUpdates an existing supabase project api key's `description` and/or `secret jwt template` (which defines its `role`); does not regenerate the key string.
Beta activate custom hostname for projectActivates a previously configured custom hostname for a supabase project, assuming dns settings are verified externally.
Activate vanity subdomain for projectActivates a vanity subdomain for the specified supabase project, requiring subsequent dns configuration for the subdomain to become operational.
Authorize user through OAuthGenerates a supabase oauth 2.
Check vanity subdomain availabilityChecks if a specific vanity subdomain is available for a supabase project; this action does not reserve or assign the subdomain.
Enable project database webhooksEnables database webhooks for the supabase project `ref`, triggering real-time notifications for insert, update, or delete events.
Get project SSL enforcement configurationRetrieves the ssl enforcement configuration for a specified supabase project, indicating if ssl connections are mandated for its database.
Get current vanity subdomain configFetches the current vanity subdomain configuration, including its status and custom domain name, for a supabase project identified by its reference id.
Beta get project's custom hostname configRetrieves a supabase project's custom hostname configuration, including its status, ssl certificate, and ownership verification, noting that availability may depend on the project's plan.
Retrieve network bans for projectRetrieves the list of banned ipv4 addresses for a supabase project using its unique project reference string; this is a read-only operation.
Retrieve project network restrictionsRetrieves the current network restriction settings (e.
Get project pgsodium configRetrieves the pgsodium configuration, including the root encryption key, for an existing supabase project identified by its `ref`.
Beta remove a read replicaIrreversibly initiates the removal of a specified read replica from an existing supabase project, confirming only the start of the process, not its completion.
Remove project network bansRemoves specified ipv4 addresses from a supabase project's network ban list, granting immediate access; ips not currently banned are ignored.
Execute project database queryExecutes a given sql query against the project's database; use for advanced data operations or when standard api endpoints are insufficient, ensuring queries are valid postgresql and sanitized.
Setup read replica for projectProvisions a read-only replica for a supabase project in a specified, supabase-supported aws region to enhance read performance and reduce latency.
Beta update project network restrictionsUpdates and applies network access restrictions (ipv4/ipv6 cidr lists) for a supabase project, which may terminate existing connections not matching the new rules.
Upgrade the project's PostgreSQL versionInitiates an asynchronous upgrade of a supabase project's postgresql database to a specified `target version` from a selected `release channel`, returning a `tracking id` to monitor status; the `target version` must be available in the chosen channel.
Update pgsodium root keyCritically updates or initializes a supabase project's pgsodium root encryption key for security setup or key rotation, requiring secure backup of the new key to prevent irreversible data loss.
Create a database branchCreates a new, isolated database branch from an existing supabase project (identified by `ref`), useful for setting up separate environments like development or testing, which can optionally be linked to a git branch.
Create a functionCreates a new serverless edge function for a supabase project (identified by `ref`), requiring valid javascript/typescript in `body` and a project-unique `slug 1` identifier.
Create an organizationCreates a new supabase organization, which serves as a top-level container for projects, billing, and team access.
Create new projectCreates a new supabase project, requiring a unique name (no dots) within the organization; project creation is asynchronous.
Create SSO provider configurationCreates a new saml 2.
Create a new third-party auth integrationCall this to add a new third-party authentication method (oidc or jwks) to a supabase project for integrating external identity providers (e.
Reverify custom hostnameRe-verifies dns and ssl configurations for an existing custom hostname associated with a supabase project.
Delete branch by idPermanently and irreversibly deletes a specific, non-default database branch by its `branch id`, without affecting other branches.
Delete an edge function by slugPermanently deletes a specific edge function (by `function slug`) from a supabase project (by `ref`); this action is irreversible and requires prior existence of both project and function.
Delete custom hostname configDeletes an active custom hostname configuration for the project identified by `ref`, reverting to the default supabase-provided hostname; this action immediately makes the project inaccessible via the custom domain and requires subsequent updates to client, oauth, and dns settings.
Delete vanity subdomain for projectPermanently and irreversibly deletes an active vanity subdomain configuration for the specified supabase project, reverting it to its default supabase url.
Delete project by refPermanently and irreversibly deletes a supabase project, identified by its unique `ref` id, resulting in complete data loss.
Deploy functionDeploys edge functions to a supabase project using multipart upload.
Disable project readonly modeTemporarily disables a supabase project's read-only mode for 15 minutes to allow write operations (e.
Disable preview branchingDisables the preview branching feature for an existing supabase project, identified by its unique reference id (`ref`).
Exchange auth code for access and refresh token(beta) implements the oauth 2.
Generate TypeScript typesGenerates and retrieves typescript types from a supabase project's database; any schemas specified in `included schemas` must exist in the project.
Get database branch configRetrieves the read-only configuration and status for a supabase database branch, typically for monitoring or verifying its settings.
Get project API keysRetrieves all api keys for an existing supabase project, specified by its unique reference id (`ref`); this is a read-only operation.
Get project PgBouncer configRetrieves the active pgbouncer configuration (postgresql connection pooler) for a supabase project, used for performance tuning, auditing, or getting the connection string.
Get Project Upgrade EligibilityChecks a supabase project's eligibility for an upgrade, verifying compatibility and identifying potential issues; this action does not perform the actual upgrade.
Get project upgrade statusRetrieves the latest status of a supabase project's database upgrade for monitoring purposes; does not initiate or modify upgrades.
Get a specific SQL snippetRetrieves a specific sql snippet by its unique identifier.
Get a SSO provider by its UUIDRetrieves the configuration details for a specific single sign-on (sso) provider (e.
Get information about an organizationFetches comprehensive details for a specific supabase organization using its unique slug.
Get project's auth configRetrieves the project's complete read-only authentication configuration, detailing all settings (e.
Get project postgres configRetrieves the current read-only postgresql database configuration for a specified supabase project's `ref`, noting that some advanced or security-sensitive details might be omitted from the response.
Get project's PostgREST configRetrieves the postgrest configuration for a specific supabase project.
Get project's service health statusRetrieves the current health status for a supabase project, for specified services or all services if the 'services' list is omitted.
Get project Supavisor configurationRetrieves the supavisor (connection pooler) configuration for a specified supabase project, identified by its reference id.
Get Table SchemasRetrieves column details, types, and constraints for multiple database tables to help debug schema issues and write accurate sql queries.
List all database branchesLists all database branches for a specified supabase project, used for isolated development and testing of schema changes; ensure the project reference id is valid.
List all functionsLists metadata for all edge functions in a supabase project (specified by 'ref'), excluding function code or logs; the project must exist.
List all organizationsLists all organizations (id and name only) associated with the supabase account, excluding project details within these organizations.
List all projectsRetrieves a list of all supabase projects, including their id, name, region, and status, for the authenticated user.
List all secretsRetrieves all secrets for a supabase project using its reference id; secret values in the response may be masked.
List members of an organizationRetrieves all members of a supabase organization, identified by its unique slug, including their user id, username, email, role, and mfa status.
List project database backupsLists all database backups for a supabase project, providing details on existing backups but not creating new ones or performing restores; availability may depend on plan and configuration.
List all bucketsRetrieves a list of all storage buckets for a supabase project, without returning bucket contents or access policies.
List all SSO providersLists all configured single sign-on (sso) providers for a supabase project, requiring the project reference id (`ref`) of an existing project.
List SQL snippets for the logged in userRetrieves a list of sql snippets for the logged-in user, optionally filtered by a specific supabase project if `project ref` is provided.
Remove an SSO providerDeletes a specific sso provider by its id (`provider id`) from a supabase project (`ref`), which disables it and returns its details; ensure this action will not inadvertently lock out users.
Reset a database branchResets an existing supabase database branch, identified by `branch id`, to its initial clean state, irreversibly deleting all its current data and schema changes.
Restore database PITR backupRestores a supabase project's database to a specific unix timestamp using point-in-time recovery (pitr), overwriting the current state; requires a paid plan with pitr and physical backups enabled.
Retrieve a functionRetrieves detailed information, metadata, configuration, and status for a specific edge function using its project reference id and function slug.
Retrieve a function bodyRetrieves the source code (body) for a specified serverless edge function using its project reference and function slug; this is a read-only operation that does not execute the function or return runtime logs.
Get project's read-only mode statusRetrieves the read-only mode status for a specified supabase project to check its operational state; this action does not change the read-only state.
Update a functionUpdates an existing supabase edge function's properties (like name, slug, source code, jwt settings, import map) identified by project `ref` and `function slug`, supporting plain text code or eszip for the body.
Update database branch configUpdates the configuration of a supabase database branch, allowing modification of its name, associated git branch, reset-on-push behavior, persistence, and status.
Update project's custom hostname configurationUpdates the custom hostname for a supabase project, requiring subsequent dns changes to a user-controlled domain for ssl certificate issuance and domain ownership.
Update an SSO provider by its UUIDUpdates an existing sso provider's saml metadata, associated email domains, or attribute mappings for a supabase project, identified by `ref` and `provider id`.
Update project's postgres configUpdates specified postgresql configuration parameters for an existing supabase project (`ref`) to optimize database performance; note that unspecified parameters remain unchanged, and caution is advised as incorrect settings can impact stability or require a restart.
Update project's PostgREST configUpdates postgrest configuration settings (e.
Update database pooler configUpdates the supavisor (database pooler) configuration, such as `default pool size`, for an existing supabase project identified by `ref`; the `pool mode` parameter in the request is deprecated and ignored.
Update SSL enforcement configUpdates the ssl enforcement configuration (enable/disable) for a specified supabase project's database.

What is the Composio tool router, and how does it fit here?

What is Tool Router?

Composio's Tool Router helps agents find the right tools for a task at runtime. You can plug in multiple toolkits (like Gmail, HubSpot, and GitHub), and the agent will identify the relevant app and action to complete multi-step workflows. This can reduce token usage and improve the reliability of tool calls. Read more here: Getting started with Tool Router

The tool router generates a secure MCP URL that your agents can access to perform actions.

How the Tool Router works

The Tool Router follows a three-phase workflow:

  1. Discovery: Searches for tools matching your task and returns relevant toolkits with their details.
  2. Authentication: Checks for active connections. If missing, creates an auth config and returns a connection URL via Auth Link.
  3. Execution: Executes the action using the authenticated connection.

Step-by-step Guide

Prerequisites

Before you begin, make sure you have:
  • Node.js and npm installed
  • A Composio account with API key
  • An OpenAI API key

Getting API Keys for OpenAI and Composio

OpenAI API Key
  • Go to the OpenAI dashboard and create an API key. You'll need credits to use the models, or you can connect to another model provider.
  • Keep the API key safe.
Composio API Key
  • Log in to the Composio dashboard.
  • Navigate to your API settings and generate a new API key.
  • Store this key securely as you'll need it for authentication.

Install required dependencies

bash
npm install @ai-sdk/openai @ai-sdk/mcp @composio/core ai dotenv

First, install the necessary packages for your project.

What you're installing:

  • @ai-sdk/openai: Vercel AI SDK's OpenAI provider
  • @ai-sdk/mcp: MCP client for Vercel AI SDK
  • @composio/core: Composio SDK for tool integration
  • ai: Core Vercel AI SDK
  • dotenv: Environment variable management

Set up environment variables

bash
OPENAI_API_KEY=your_openai_api_key_here
COMPOSIO_API_KEY=your_composio_api_key_here
COMPOSIO_USER_ID=your_user_id_here

Create a .env file in your project root.

What's needed:

  • OPENAI_API_KEY: Your OpenAI API key for GPT model access
  • COMPOSIO_API_KEY: Your Composio API key for tool access
  • COMPOSIO_USER_ID: A unique identifier for the user session

Import required modules and validate environment

typescript
import "dotenv/config";
import { openai } from "@ai-sdk/openai";
import { Composio } from "@composio/core";
import * as readline from "readline";
import { streamText, type ModelMessage, stepCountIs } from "ai";
import { experimental_createMCPClient as createMCPClient } from "@ai-sdk/mcp";

const composioAPIKey = process.env.COMPOSIO_API_KEY;
const composioUserID = process.env.COMPOSIO_USER_ID;

if (!process.env.OPENAI_API_KEY) throw new Error("OPENAI_API_KEY is not set");
if (!composioAPIKey) throw new Error("COMPOSIO_API_KEY is not set");
if (!composioUserID) throw new Error("COMPOSIO_USER_ID is not set");

const composio = new Composio({
  apiKey: composioAPIKey,
});
What's happening:
  • We're importing all necessary libraries including Vercel AI SDK's OpenAI provider and Composio
  • The dotenv/config import automatically loads environment variables
  • The MCP client import enables connection to Composio's tool server

Create Tool Router session and initialize MCP client

typescript
async function main() {
  // Create a tool router session for the user
  const { session } = await composio.create(composioUserID!, {
    toolkits: ["supabase"],
  });

  const mcpUrl = session.mcp.url;
What's happening:
  • We're creating a Tool Router session that gives your agent access to Supabase tools
  • The create method takes the user ID and specifies which toolkits should be available
  • The returned mcp object contains the URL and authentication headers needed to connect to the MCP server
  • This session provides access to all Supabase-related tools through the MCP protocol

Connect to MCP server and retrieve tools

typescript
const mcpClient = await createMCPClient({
  transport: {
    type: "http",
    url: mcpUrl,
    headers: session.mcp.headers, // Authentication headers for the Composio MCP server
  },
});

const tools = await mcpClient.tools();
What's happening:
  • We're creating an MCP client that connects to our Composio Tool Router session via HTTP
  • The mcp.url provides the endpoint, and mcp.headers contains authentication credentials
  • The type: "http" is important - Composio requires HTTP transport
  • tools() retrieves all available Supabase tools that the agent can use

Initialize conversation and CLI interface

typescript
let messages: ModelMessage[] = [];

console.log("Chat started! Type 'exit' or 'quit' to end the conversation.\n");
console.log(
  "Ask any questions related to supabase, like summarize my last 5 emails, send an email, etc... :)))\n",
);

const rl = readline.createInterface({
  input: process.stdin,
  output: process.stdout,
  prompt: "> ",
});

rl.prompt();
What's happening:
  • We initialize an empty messages array to maintain conversation history
  • A readline interface is created to accept user input from the command line
  • Instructions are displayed to guide the user on how to interact with the agent

Handle user input and stream responses with real-time tool feedback

typescript
rl.on("line", async (userInput: string) => {
  const trimmedInput = userInput.trim();

  if (["exit", "quit", "bye"].includes(trimmedInput.toLowerCase())) {
    console.log("\nGoodbye!");
    rl.close();
    process.exit(0);
  }

  if (!trimmedInput) {
    rl.prompt();
    return;
  }

  messages.push({ role: "user", content: trimmedInput });
  console.log("\nAgent is thinking...\n");

  try {
    const stream = streamText({
      model: openai("gpt-5"),
      messages,
      tools,
      toolChoice: "auto",
      stopWhen: stepCountIs(10),
      onStepFinish: (step) => {
        for (const toolCall of step.toolCalls) {
          console.log(`[Using tool: ${toolCall.toolName}]`);
          }
          if (step.toolCalls.length > 0) {
            console.log(""); // Add space after tool calls
          }
        },
      });

      for await (const chunk of stream.textStream) {
        process.stdout.write(chunk);
      }

      console.log("\n\n---\n");

      // Get final result for message history
      const response = await stream.response;
      if (response?.messages?.length) {
        messages.push(...response.messages);
      }
    } catch (error) {
      console.error("\nAn error occurred while talking to the agent:");
      console.error(error);
      console.log(
        "\nYou can try again or restart the app if it keeps happening.\n",
      );
    } finally {
      rl.prompt();
    }
  });

  rl.on("close", async () => {
    await mcpClient.close();
    console.log("\nšŸ‘‹ Session ended.");
    process.exit(0);
  });
}

main().catch((err) => {
  console.error("Fatal error:", err);
  process.exit(1);
});
What's happening:
  • We use streamText instead of generateText to stream responses in real-time
  • toolChoice: "auto" allows the model to decide when to use Supabase tools
  • stopWhen: stepCountIs(10) allows up to 10 steps for complex multi-tool operations
  • onStepFinish callback displays which tools are being used in real-time
  • We iterate through the text stream to create a typewriter effect as the agent responds
  • The complete response is added to conversation history to maintain context
  • Errors are caught and displayed with helpful retry suggestions

Complete Code

Here's the complete code to get you started with Supabase and Vercel AI SDK:

typescript
import "dotenv/config";
import { openai } from "@ai-sdk/openai";
import { Composio } from "@composio/core";
import * as readline from "readline";
import { streamText, type ModelMessage, stepCountIs } from "ai";
import { experimental_createMCPClient as createMCPClient } from "@ai-sdk/mcp";

const composioAPIKey = process.env.COMPOSIO_API_KEY;
const composioUserID = process.env.COMPOSIO_USER_ID;

if (!process.env.OPENAI_API_KEY) throw new Error("OPENAI_API_KEY is not set");
if (!composioAPIKey) throw new Error("COMPOSIO_API_KEY is not set");
if (!composioUserID) throw new Error("COMPOSIO_USER_ID is not set");

const composio = new Composio({
  apiKey: composioAPIKey,
});

async function main() {
  // Create a tool router session for the user
  const { session } = await composio.create(composioUserID!, {
    toolkits: ["supabase"],
  });

  const mcpUrl = session.mcp.url;

  const mcpClient = await createMCPClient({
    transport: {
      type: "http",
      url: mcpUrl,
      headers: session.mcp.headers, // Authentication headers for the Composio MCP server
    },
  });

  const tools = await mcpClient.tools();

  let messages: ModelMessage[] = [];

  console.log("Chat started! Type 'exit' or 'quit' to end the conversation.\n");
  console.log(
    "Ask any questions related to supabase, like summarize my last 5 emails, send an email, etc... :)))\n",
  );

  const rl = readline.createInterface({
    input: process.stdin,
    output: process.stdout,
    prompt: "> ",
  });

  rl.prompt();

  rl.on("line", async (userInput: string) => {
    const trimmedInput = userInput.trim();

    if (["exit", "quit", "bye"].includes(trimmedInput.toLowerCase())) {
      console.log("\nGoodbye!");
      rl.close();
      process.exit(0);
    }

    if (!trimmedInput) {
      rl.prompt();
      return;
    }

    messages.push({ role: "user", content: trimmedInput });
    console.log("\nAgent is thinking...\n");

    try {
      const stream = streamText({
        model: openai("gpt-5"),
        messages,
        tools,
        toolChoice: "auto",
        stopWhen: stepCountIs(10),
        onStepFinish: (step) => {
          for (const toolCall of step.toolCalls) {
            console.log(`[Using tool: ${toolCall.toolName}]`);
          }
          if (step.toolCalls.length > 0) {
            console.log(""); // Add space after tool calls
          }
        },
      });

      for await (const chunk of stream.textStream) {
        process.stdout.write(chunk);
      }

      console.log("\n\n---\n");

      // Get final result for message history
      const response = await stream.response;
      if (response?.messages?.length) {
        messages.push(...response.messages);
      }
    } catch (error) {
      console.error("\nAn error occurred while talking to the agent:");
      console.error(error);
      console.log(
        "\nYou can try again or restart the app if it keeps happening.\n",
      );
    } finally {
      rl.prompt();
    }
  });

  rl.on("close", async () => {
    await mcpClient.close();
    console.log("\nšŸ‘‹ Session ended.");
    process.exit(0);
  });
}

main().catch((err) => {
  console.error("Fatal error:", err);
  process.exit(1);
});

Conclusion

You've successfully built a Supabase agent using the Vercel AI SDK with streaming capabilities! This implementation provides a powerful foundation for building AI applications with natural language interfaces and real-time feedback.

Key features of this implementation:

  • Real-time streaming responses for a better user experience with typewriter effect
  • Live tool execution feedback showing which tools are being used as the agent works
  • Dynamic tool loading through Composio's Tool Router with secure authentication
  • Multi-step tool execution with configurable step limits (up to 10 steps)
  • Comprehensive error handling for robust agent execution
  • Conversation history maintenance for context-aware responses

You can extend this further by adding custom error handling, implementing specific business logic, or integrating additional Composio toolkits to create multi-app workflows.

How to build Supabase MCP Agent with another framework

FAQ

What are the differences in Tool Router MCP and Supabase MCP?

With a standalone Supabase MCP server, the agents and LLMs can only access a fixed set of Supabase tools tied to that server. However, with the Composio Tool Router, agents can dynamically load tools from Supabase and many other apps based on the task at hand, all through a single MCP endpoint.

Can I use Tool Router MCP with Vercel AI SDK?

Yes, you can. Vercel AI SDK fully supports MCP integration. You get structured tool calling, message history handling, and model orchestration while Tool Router takes care of discovering and serving the right Supabase tools.

Can I manage the permissions and scopes for Supabase while using Tool Router?

Yes, absolutely. You can configure which Supabase scopes and actions are allowed when connecting your account to Composio. You can also bring your own OAuth credentials or API configuration so you keep full control over what the agent can do.

How safe is my data with Composio Tool Router?

All sensitive data such as tokens, keys, and configuration is fully encrypted at rest and in transit. Composio is SOC 2 Type 2 compliant and follows strict security practices so your Supabase data and credentials are handled as safely as possible.

Used by agents from

Context
ASU
Letta
glean
HubSpot
Agent.ai
Altera
DataStax
Entelligence
Rolai
Context
ASU
Letta
glean
HubSpot
Agent.ai
Altera
DataStax
Entelligence
Rolai
Context
ASU
Letta
glean
HubSpot
Agent.ai
Altera
DataStax
Entelligence
Rolai

Never worry about agent reliability

We handle tool reliability, observability, and security so you never have to second-guess an agent action.