Real-Time Features in Next.js with Supabase Realtime

Why Real-Time Matters for AI Agent Systems

AI agents running in the background need to communicate status updates, task completions, and error states back to your frontend without polling. Polling adds lag, wastes database queries, and feels broken to users. Supabase Realtime solves this with PostgreSQL's built-in replication system.

For indie developers building Claude-powered systems, real-time features compress the feedback loop: users see agent reasoning, token usage, and final outputs the moment they're available. This is the difference between a prototype and a product.

Setting Up Supabase Realtime in Next.js

Enable Realtime on your Supabase table, install the client library, and subscribe to database changes in a server component or hook. Supabase handles WebSocket connection pooling and reconnection logic for you.

Create a typed subscriber that listens for INSERT, UPDATE, and DELETE events on your agents table. Filter by user_id to ensure clients only see their own data. The connection stays open across page navigations—critical for keeping agent status live.

import { createClient } from '@supabase/supabase-js';

const supabase = createClient(url, key);

const channel = supabase
  .channel('agents')
  .on(
    'postgres_changes',
    { event: 'UPDATE', schema: 'public', table: 'agents', filter: `user_id=eq.${userId}` },
    (payload) => {
      console.log('Agent updated:', payload.new);
      setAgentStatus(payload.new.status);
    }
  )
  .subscribe();

Presence for Multi-User Agent Dashboards

Supabase Presence lets you broadcast which users are viewing which agents without hitting your database. Each client sends a lightweight presence event; the server syncs state across all subscribers in real-time.

Use this to show 'Agent running—watched by 3 users' or disable concurrent edits. For team-based AI agent platforms, presence prevents the chaos of multiple founders tweaking the same agent prompt simultaneously.

Broadcasting Custom Events

Beyond database changes, use Supabase Broadcast to push arbitrary events: agent logs, token usage metrics, or Claude API errors. Send a message from your backend (e.g., when your AI agent completes a task) and all connected clients receive it instantly.

This decouples real-time notifications from your database schema. Your agent service can emit 'task_completed' with metadata without creating a new table or column.

Handling Connection Dropouts and Reconnection

Supabase Realtime auto-reconnects on network loss, but you should still track connection state in your UI. Show a 'live' or 'reconnecting' indicator so users know whether they're seeing fresh data or stale snapshots.

For critical agent workflows, queue mutations locally and sync when the connection re-establishes. Use React Query or SWR to manage both real-time subscriptions and fallback REST calls if WebSocket fails.

Open-Source Implementation: Pantheon

See a full production-ready example at github.com/lewisallena17/pantheon. Pantheon is an open-source AI agent control panel built with Next.js, Supabase Realtime, and Claude. It shows real-time agent status, token tracking, and task logs—exactly the patterns you need.

Fork it, study how subscriptions are managed in custom hooks, and adapt the presence layer for your own multi-user workflows. Pantheon includes TypeScript types, error boundaries, and connection state management out of the box.

Open-source implementation

Everything in this article runs in pantheon — a production-ready Next.js + Supabase + Claude starter. Clone it, deploy to Vercel, run PM2. The dashboard auto-commits every agent edit and reverts itself if TypeScript breaks.