Back to blog

Simple Chat Application

Introduction

Implementing real-time chat functionality is a common requirement for many web applications, but building it from scratch with WebSocket management and scalability considerations can be quite challenging.

Today, I'll show you how to implement real-time chat surprisingly easily using **Supabase UI (via shadcn CLI) + Next.js**.

TL;DR

  • Leverage **Supabase UI's** real-time chat component
  • Easily install components with **shadcn CLI**

    • The complete code is available here:

    https://github.com/tnakayama256/simple-chat

    Prerequisites

    This article assumes you have completed the following preparations:

  • Created a Supabase account
  • Created a Vercel account
  • Created a Supabase project
  • Obtained the following credentials:

    • - Public URL (Project URL)

    - Anon Key

    - Service Role Key

    Implementation Steps

    1. Create a Next.js Application

    First, create a new Next.js project:

    pnpm create next-app@latest my-chat-app
cd my-chat-app

    2. Configure Environment Variables

    Create a `.env.local` file in the project root and set your Supabase credentials:

    NEXT_PUBLIC_SUPABASE_URL=your-project-url
NEXT_PUBLIC_SUPABASE_ANON_KEY=your-anon-key
SUPABASE_SERVICE_ROLE_KEY=your-service-role-key

    **Note**: The service role key is sensitive information and should only be used on the server side, never on the client side.

    3. Initialize shadcn/ui

    Set up shadcn/ui in your project:

    pnpm dlx shadcn@latest init

    When prompted, select your preferred settings. TypeScript, ESLint, and Tailwind CSS configurations will be automatically set up.

    4. Install Real-time Chat Component

    Install the real-time chat component provided by Supabase UI:

    pnpm dlx shadcn@latest add https://supabase.com/ui/r/realtime-chat-nextjs.json

    This single command installs all the necessary components (RealtimeChat) and dependencies for real-time chat.

    5. Implementation Example

    // app/chat/page.tsx
import { RealtimeChat } from '@/components/realtime-chat'

export default async function ProtectedPage() {
  return (
    <div className="flex h-svh w-full max-w-screen-sm mx-auto items-center justify-center gap-2">
      <RealtimeChat
        roomName="simple-chat-room"
        username={data.user.email ?? ''}
      />
    </div>
  )
}

    Implementation Points

    Security Considerations

  • **Environment Variable Management**: Never expose the service role key on the client side
  • **RLS (Row Level Security)**: Configure appropriate access control in Supabase

    • Performance Optimization

  • **Real-time Connection**: Supabase's real-time features automate WebSocket management

    • Customization Possibilities

    The `RealtimeChat` component can be customized in the following ways:

  • Dynamic room name changes
  • User name display format
  • UI theme customization (utilizing shadcn/ui's theme system)
  • Message persistence settings

    • Notes

  • When using in production, implement message persistence features and adjust user/conversation creation methods and access controls as needed
  • For building AI chat apps with LLM APIs, we recommend using Vercel AI SDK or Chat SDK

    • Summary

    The combination of Supabase UI and Next.js allows you to implement complex real-time chat functionality in just a few steps. With this approach, you can:

  • **Significantly reduce development time**
  • Use **production-ready** robustness with confidence
  • Benefit from built-in **scalability** considerations

    • Please try this method and add real-time chat functionality to your projects. If you have any questions during implementation, feel free to contact me (contact@tnakayama.com)

    References

  • Complete Repository
  • Supabase UI RealtimeChat
  • shadcn/ui Official Site
  • Next.js Official Documentation
    • Next