Build a Real-Time Chat App with AI: Step-by-Step

Why Build This Project

Every beginner project — todo apps, calculators, portfolios — has something in common: nothing happens until the user clicks a button. Real-time is different. Data arrives without the user doing anything. That's a fundamentally different programming model, and it's what powers every app people actually use daily: Slack, Discord, WhatsApp, iMessage.

Building a chat app teaches you skills that don't show up in simpler projects:

• Real-time data subscriptions — listening for changes instead of requesting them (the core of WebSockets)
• Optimistic updates — showing the message immediately before the server confirms it, so the UI feels instant
• State synchronization — keeping multiple users' screens in sync without conflicts
• User authentication — connecting messages to real authenticated users, not just anonymous text
• Security at the data layer — making sure users can only see messages they're supposed to see

If you've built a todo app and a portfolio, this is your next step. It's the project where you graduate from "I can build static things" to "I can build things that feel alive."

What You'll Build

The finished chat app has these features:

• 💬 Real-time messaging — messages appear instantly for all connected users
• 🔐 User authentication — sign up, log in, and messages tied to your account
• 👤 User presence — see who's online right now
• 📜 Message history — load previous messages when you join
• ⬇️ Auto-scroll — new messages scroll into view automatically
• ⚡ Optimistic updates — your messages appear instantly, even before the server confirms
• 🕐 Timestamps — see when each message was sent
• 📱 Responsive layout — works on desktop and mobile

Step 1: The Initial Prompt

That prompt gives AI enough specifics to scaffold a working app. But "working" and "production-ready" are very different things. Here's what AI typically produces — and the five places it breaks.

Step 2: What AI Generates

Your AI will set up the Supabase client, create the authentication flow, and build the chat interface. Here's the core chat component it generates:

// src/Chat.tsx — AI-generated real-time chat
import { useState, useEffect, useRef } from 'react';
import { supabase } from './supabaseClient';
import type { User } from '@supabase/supabase-js';

interface Message {
  id: string;
  content: string;
  user_id: string;
  display_name: string;
  created_at: string;
}

export default function Chat({ user }: { user: User }) {
  const [messages, setMessages] = useState<Message[]>([]);
  const [newMessage, setNewMessage] = useState('');
  const [loading, setLoading] = useState(true);
  const messagesEndRef = useRef<HTMLDivElement>(null);

  // Fetch existing messages on mount
  useEffect(() => {
    const fetchMessages = async () => {
      const { data, error } = await supabase
        .from('messages')
        .select('*')
        .order('created_at', { ascending: true })
        .limit(100);

      if (error) {
        console.error('Error fetching messages:', error);
      } else {
        setMessages(data || []);
      }
      setLoading(false);
    };

    fetchMessages();
  }, []);

  // Subscribe to new messages in real time
  useEffect(() => {
    const channel = supabase
      .channel('messages')
      .on(
        'postgres_changes',
        {
          event: 'INSERT',
          schema: 'public',
          table: 'messages',
        },
        (payload) => {
          const newMsg = payload.new as Message;
          setMessages((prev) => [...prev, newMsg]);
        }
      )
      .subscribe();

    return () => {
      supabase.removeChannel(channel);
    };
  }, []);

  // Auto-scroll to bottom when new messages arrive
  useEffect(() => {
    messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' });
  }, [messages]);

  // Send a message
  const sendMessage = async (e: React.FormEvent) => {
    e.preventDefault();
    if (!newMessage.trim()) return;

    const messageContent = newMessage.trim();
    setNewMessage('');

    const { error } = await supabase.from('messages').insert({
      content: messageContent,
      user_id: user.id,
      display_name: user.user_metadata?.display_name || user.email,
    });

    if (error) {
      console.error('Error sending message:', error);
      setNewMessage(messageContent); // Restore on failure
    }
  };

  if (loading) return <div className="chat-loading">Loading messages...</div>;

  return (
    <div className="chat-container">
      <div className="chat-header">
        <h2>💬 Chat Room</h2>
        <span className="user-info">
          {user.user_metadata?.display_name || user.email}
        </span>
      </div>

      <div className="messages-list">
        {messages.map((msg) => (
          <div
            key={msg.id}
            className={`message ${msg.user_id === user.id ? 'own' : ''}`}
          >
            <div className="message-header">
              <span className="message-author">{msg.display_name}</span>
              <span className="message-time">
                {new Date(msg.created_at).toLocaleTimeString()}
              </span>
            </div>
            <div className="message-content">{msg.content}</div>
          </div>
        ))}
        <div ref={messagesEndRef} />
      </div>

      <form onSubmit={sendMessage} className="message-form">
        <input
          type="text"
          value={newMessage}
          onChange={(e) => setNewMessage(e.target.value)}
          placeholder="Type a message..."
          className="message-input"
          autoFocus
        />
        <button type="submit" className="send-button">Send</button>
      </form>
    </div>
  );
}

And AI will also generate the Supabase client setup and the SQL for your messages table:

-- SQL: Create the messages table in Supabase
create table public.messages (
  id uuid default gen_random_uuid() primary key,
  content text not null,
  user_id uuid references auth.users(id) not null,
  display_name text not null,
  created_at timestamptz default now() not null
);

-- Enable Row Level Security
alter table public.messages enable row level security;

-- Policy: Authenticated users can read all messages
create policy "Anyone can read messages"
  on public.messages for select
  to authenticated
  using (true);

-- Policy: Authenticated users can insert their own messages
create policy "Users can insert own messages"
  on public.messages for insert
  to authenticated
  with check (auth.uid() = user_id);

-- Enable Realtime for the messages table
alter publication supabase_realtime add table public.messages;

This looks solid. The SQL sets up Supabase Row Level Security so only logged-in users can read or write messages, and users can only insert messages tagged with their own ID. The React component subscribes to real-time changes and updates the UI. But there are critical problems hiding in this code.

Step 3: Understanding What AI Built

Supabase Real-Time Subscriptions

The magic happens in the second useEffect. Instead of your app asking "are there new messages?" every few seconds (that's called polling), Supabase pushes new messages to your app the moment they're inserted into the database. Under the hood, this uses WebSockets — a persistent connection between your browser and Supabase's servers.

Think of it like this: polling is you calling a restaurant every 5 minutes asking "is my table ready?" WebSockets is the restaurant texting you when it's ready. One wastes everyone's time. The other just works.

The .on('postgres_changes', ...) listener tells Supabase: "whenever a new row is inserted into the messages table, send it to me." Your callback receives the new row as payload.new and appends it to the message list.

Message State Management

The messages state array is the single source of truth for what's displayed. Three things modify it:

1. Initial fetch — loads the last 100 messages from the database on mount
2. Real-time subscription — appends new messages as they arrive via WebSocket
3. Optimistic updates — (when added) shows your message immediately before server confirmation

Notice how setMessages((prev) => [...prev, newMsg]) uses the functional updater form. This is important — it ensures you're always working with the latest state, even if multiple messages arrive in rapid succession. If AI wrote setMessages([...messages, newMsg]) instead (using the stale closure), messages would get lost during fast conversations.

Optimistic Updates

Look at the sendMessage function. Right now it clears the input, sends to Supabase, and waits for the real-time subscription to add the message back to the list. That means there's a visible delay — you hit Send, the input clears, and your message doesn't appear for 200-500ms while it round-trips through the server.

A better pattern: add the message to local state immediately, then let the server confirm it. If the insert fails, remove it and show an error. This is called an optimistic update — you're optimistic that the server will accept it, and you handle the rare failure case separately. Every chat app you've ever used does this.

Step 4: What AI Gets Wrong (and How to Fix It)

Step 5: Level-Up Prompts

Once the base chat works, use these prompts to add features that real chat apps have:

What You Learned

This project taught you skills that power every modern real-time application:

• Real-time subscriptions — the push-based data model behind WebSockets, used in Slack, Discord, multiplayer games, live dashboards, and collaborative editors
• Optimistic updates — making UIs feel instant by updating locally before server confirmation, the same pattern used by every social media app's "like" button
• Authentication-linked data — connecting user identity to data with Row Level Security, so your database enforces permissions even if your frontend code has bugs
• Subscription lifecycle management — creating and cleaning up real-time connections to prevent memory leaks and duplicate data
• XSS prevention in user content — a security fundamental for any app that displays content from other users

The real-time chat pattern extends far beyond messaging. Add Supabase presence and you have a collaborative whiteboard. Swap messages for cursor positions and you have Google Docs-style collaboration. Swap messages for game state and you have multiplayer. Once you understand subscriptions, you can build any of these.

Frequently Asked Questions