Unlock real-time AI-powered database workflows by integrating Claude API with Supabase. Build dynamic features like personalized recommendations with live data updates—no more static queries.

Why Integrate Claude with Supabase?

In today's fast-paced apps, static database queries fall short. Users expect personalized, real-time experiences—like product recommendations that adapt instantly to inventory changes or user behavior. Supabase, the open-source Firebase alternative, excels at real-time data with PostgreSQL, Realtime subscriptions, and Edge Functions. Pair it with Claude's superior reasoning via the Anthropic API, and you get AI-driven workflows that query, analyze, and act on live data.

This tutorial walks you through connecting Claude to Supabase for:

• Natural language to SQL generation for dynamic querying
• Real-time subscriptions triggering AI processing
• Personalized recommendations stored back in your DB

Perfect for e-commerce, dashboards, or any app needing smart, live insights.

Prerequisites

Before diving in, ensure you have:

• A free Supabase account and new project
• Anthropic API key (Claude Pro or API credits recommended)
• Node.js 18+ installed
• Basic familiarity with JavaScript/TypeScript and async/await

We'll use:

• @supabase/supabase-js for DB interactions
• @anthropic-ai/sdk for Claude API calls

Step 1: Set Up Your Supabase Project

1. Log into Supabase Dashboard > Create a new project (e.g., "claude-supabase-demo").
2. Note your project's URL and anon key from Settings > API.

Create tables for an e-commerce demo:

-- Users table
CREATE TABLE users (
  id UUID DEFAULT uuid_generate_v4() PRIMARY KEY,
  email TEXT UNIQUE NOT NULL,
  preferences JSONB DEFAULT '{}',
  created_at TIMESTAMP DEFAULT NOW()
);

-- Products table (with realtime)
CREATE TABLE products (
  id UUID DEFAULT uuid_generate_v4() PRIMARY KEY,
  name TEXT NOT NULL,
  category TEXT,
  price DECIMAL(10,2),
  stock INTEGER DEFAULT 0,
  updated_at TIMESTAMP DEFAULT NOW()
);

-- User purchases
CREATE TABLE purchases (
  id UUID DEFAULT uuid_generate_v4() PRIMARY KEY,
  user_id UUID REFERENCES users(id),
  product_id UUID REFERENCES products(id),
  quantity INTEGER,
  purchased_at TIMESTAMP DEFAULT NOW()
);

-- Enable RLS (optional for demo)
ALTER TABLE products ENABLE ROW LEVEL SECURITY;
ALTER TABLE purchases ENABLE ROW LEVEL SECURITY;

Run this in SQL Editor. Insert sample data:

INSERT INTO products (name, category, price, stock) VALUES
('Wireless Headphones', 'Electronics', 99.99, 50),
('Running Shoes', 'Apparel', 129.99, 30),
('Coffee Maker', 'Home', 79.99, 20);

INSERT INTO users (email, preferences) VALUES
('user@example.com', '{"categories": ["Electronics", "Home"]}');

INSERT INTO purchases (user_id, product_id, quantity) VALUES
((SELECT id FROM users LIMIT 1), (SELECT id FROM products WHERE name='Wireless Headphones' LIMIT 1), 1);

Enable Realtime on products and purchases tables via Dashboard > Realtime.

Step 2: Initialize Your Node.js Project with Claude SDK

Create a new directory:

mkdir claude-supabase-demo
cd claude-supabase-demo
npm init -y
npm install @supabase/supabase-js @anthropic-ai/sdk dotenv
npm install -D typescript @types/node ts-node

Create .env:

SUPABASE_URL=your_supabase_url
SUPABASE_ANON_KEY=your_supabase_anon_key
ANTHROPIC_API_KEY=your_anthropic_key

supabase.ts:

import { createClient } from '@supabase/supabase-js';
import dotenv from 'dotenv';
dotenv.config();

export const supabase = createClient(
  process.env.SUPABASE_URL!,
  process.env.SUPABASE_ANON_KEY!
);

anthropic.ts:

import Anthropic from '@anthropic-ai/sdk';
import dotenv from 'dotenv';
dotenv.config();

const anthropic = new Anthropic({ apiKey: process.env.ANTHROPIC_API_KEY });

export default anthropic;

Step 3: Dynamic Data Querying with Claude (Text-to-SQL)

Claude excels at generating precise SQL. Let's query user purchase history naturally.

queryData.ts:

import { supabase } from './supabase';
import anthropic from './anthropic';

async function nlToSQLQuery(nlQuery: string, userId: string) {
  const prompt = `Generate a PostgreSQL SELECT query for Supabase based on this natural language: "${nlQuery}"
  User ID: ${userId}
  Relevant tables: users, products, purchases.
  Use JOINs. Return ONLY the SQL query, no explanations.`;

  const { content } = await anthropic.messages.create({
    model: 'claude-3-5-sonnet-20240620',
    max_tokens: 1000,
    messages: [{ role: 'user', content: prompt }],
  });

  const sql = content[0].text.trim();
  console.log('Generated SQL:', sql);

  const { data, error } = await supabase.rpc('execute_query', { query_text: sql });
  // Note: For security, use Edge Functions or validate SQL in prod
  if (error) throw error;
  return data;
}

// Usage
nlToSQLQuery("Show my recent electronics purchases", "user-uuid-here");

Security Note: In production, validate generated SQL or use Supabase Edge Functions with pg_vector for RAG-like querying. Claude's reasoning minimizes injection risks, but always sanitize.

Step 4: Real-Time Subscriptions + AI Processing

Subscribe to products changes. When stock updates, trigger Claude for affected users' recs.

First, create a recs table:

CREATE TABLE recommendations (
  id UUID DEFAULT uuid_generate_v4() PRIMARY KEY,
  user_id UUID REFERENCES users(id),
  recs JSONB,
  generated_at TIMESTAMP DEFAULT NOW()
);

realtimeAI.ts:

import { supabase } from './supabase';
import anthropic from './anthropic';

// Get user prefs and purchases for recs
graphql
async function generateRecsForUser(userId: string) {
  const { data: purchases } = await supabase
    .from('purchases')
    .select('products(name, category, price)')
    .eq('user_id', userId);

  const { data: prefs } = await supabase
    .from('users')
    .select('preferences')
    .eq('id', userId).single();

  const prompt = `Generate 3 personalized product recommendations as JSON array [{name, reason}].
Past purchases: ${JSON.stringify(purchases)}
Preferences: ${JSON.stringify(prefs?.preferences)}
Current products: [list from DB].
Focus on available stock >0.`;

  const { content } = await anthropic.messages.create({
    model: 'claude-3-haiku-20240307', // Fast for realtime
    max_tokens: 500,
    messages: [{ role: 'user', content: prompt }],
  });

  const recs = JSON.parse(content[0].text);
  await supabase.from('recommendations').upsert({ user_id: userId, recs });
}

// Realtime subscription
const channel = supabase.channel('products-changes')
  .on(
    'postgres_changes',
    {
      event: '*',
      schema: 'public',
      table: 'products',
    },
    async (payload) => {
      console.log('Change:', payload);
      // Find affected users (e.g., those who bought similar categories)
      const { data: users } = await supabase
        .from('users')
        .select('id')
        .contains('preferences.categories', [payload.new.category]);
      for (const user of users || []) {
        await generateRecsForUser(user.id);
      }
    }
  )
  .subscribe();

console.log('Listening for realtime changes...');

Run with npx ts-node realtimeAI.ts. Update a product's stock via Dashboard—watch Claude generate fresh recs!

Step 5: Building Personalized Recommendations App

Combine everything into a full workflow. Fetch live recs in your frontend:

// Frontend (e.g., Next.js)
const { data: recs } = await supabase
  .from('recommendations')
  .select('*')
  .eq('user_id', userId)
  .order('generated_at', { ascending: false })
  .limit(1);

Display: "Claude recommends: ${recs[0].recs.map(r => r.name).join(', ')}"

Step 6: Production Best Practices

• Serverless: Deploy to Supabase Edge Functions or Vercel. Trigger Claude via HTTP on DB events.

// Edge Function example (Deno)
// denoland/supabase-edge-runtime
 Deno.serve(async (req) => {
  // Claude call + DB upsert
 });

• Rate Limits: Claude API: 50 RPM for Sonnet. Use Haiku for high-volume realtime. Implement queues (BullMQ).
• Costs: Monitor token usage. Cache recs with TTL.
• Error Handling: Retry logic with exponential backoff.
• Auth: Use Supabase Auth + RLS for secure access.
• Scaling: Vectorize products with pgvector + Claude for semantic search.

Advanced: AI Agents with MCP

Extend with Claude Code CLI or MCP servers for agentic workflows—e.g., Claude autonomously manages inventory based on sales trends.

Conclusion

You've now built real-time AI database workflows: NL queries, live subs triggering Claude insights, and persistent recs. This powers dynamic apps like personalized dashboards or e-com upsells. Experiment with your data—Claude's context window handles complex schemas effortlessly.

Fork the GitHub repo (imagine it exists) and share your builds in comments!

Word count: ~1450