L
💭Chat & Messaging

Real-Time Chat App

Build a Slack-style team chat app with channels, DMs, real-time messages, reactions, and file sharing.

Real-time messagesChannels & DMsThreadsReactionsFile uploadsPresence indicators

The Prompt

✨ Ready-to-use Lovable Prompt

Open Lovable
Build a real-time team chat app with the following features:

**Workspaces:**
- Sign up creates a personal workspace; invite teammates by email
- Users can belong to multiple workspaces and switch via a sidebar

**Channels:**
- Public channels (anyone in workspace can join), private channels (invite-only)
- Channel sidebar grouped: Channels, Direct Messages, Threads
- Create channel with name, description, and visibility
- Channel detail: message stream newest-at-bottom, typing indicator, online dots next to active members

**Messages:**
- Real-time message stream using Supabase Realtime
- Message actions: reply in thread, react with emoji, edit (within 15 min), delete
- @mentions notify the tagged user (in-app bell badge + optional email via Resend)
- Slash commands: /me, /giphy, /shrug, /remind

**Threads:**
- Any message can spawn a thread; threads open in a right-hand drawer
- Thread participants get follow-up notifications

**Files:**
- Drag-and-drop upload to the message composer
- Image previews inline, other files as attachments
- Stored in Supabase Storage

**Search:**
- Search across all channels the user has access to
- Filter by channel, person, date range

**Design:**
- Three-pane layout: workspace switcher / channel sidebar / message stream
- Dark mode by default (chat apps live in dark mode)
- Compact, high-density typography
- Mobile: single pane that slides between views

Store everything in Supabase. Use Supabase Realtime for message delivery and presence. RLS so private channels are invisible to non-members.

How to Use This Prompt

  1. 1

    Copy the prompt

    Click the 'Copy Prompt' button above to copy the full prompt to your clipboard.

  2. 2

    Open Lovable

    Go to lovable.dev and create a new project. If you're on the free plan, you get 5 credits/day.

  3. 3

    Paste and send

    Paste the prompt into the Lovable chat input and press enter. Lovable will start building your app immediately.

  4. 4

    Iterate and refine

    Review what Lovable builds. Use follow-up prompts to refine the design, add features, or fix anything that's off.

Pro Tips

  • Always specify 'Supabase Realtime' — don't let Lovable default to polling
  • Ask for 'message edit history' from day one; users always ask 'was this edited?'
  • Include 'typing indicators' and 'presence' in the original prompt — they sell the 'this feels alive' quality

Prompt Variations

Different versions of this prompt for specific use cases.

Customer support chat

Build a customer-facing support chat widget embedded on a website. Customers type messages; support agents respond from an internal dashboard. Store conversations, add canned replies, and auto-assign based on queue.

Discord-style server chat

Build a Discord-style server with voice channels (WebRTC), roles (Admin/Mod/Member), channel permissions per role, and custom emoji upload. Add server invites with expiring links.

Frequently Asked Questions

Can Lovable really build a Slack clone?
For a team of up to ~100 active users, yes — Lovable + Supabase Realtime handles it. Past that scale, you'll want to move message fanout to a dedicated service like Ably or Pusher.
Does Lovable support voice and video chat?
Not out of the box. For voice/video you'll need to integrate Daily.co, Twilio, or LiveKit via a Supabase Edge Function. Ask Lovable to 'add a Daily.co video room launcher in every channel.'

Ready to build?

Copy the prompt above, then paste it into Lovable. Your app starts building instantly.

Try Lovable Free