# How to Vibe Code Your Own Slack (and Stop Paying for It) > AI work platform and productivity tools - Site: https://slack.com - Category: Enterprise Collaboration - Verdict: **Serious undertaking** (48/100 vibecodeable) - Estimated effort: 4-6 weeks of part-time development ## Verdict Build a scaled-down personal web clone with chat, channels, and LLM search, but keep paying for Slack because real-time multi-tenant sync and enterprise scale take months. Replicating Slack for personal use means building a rock-solid real-time message broadcasting server and complex relational models for channels, memberships, and threads. While an AI coding agent can scaffold the Next.js UI and Postgres schema in hours, debugging WebSocket disconnection loops, state race conditions on unread counts, and permission-filtered AI search takes weeks of painstaking engineering. It is a fantastic architectural challenge, but entirely impractical as a replacement for the production app. ### What you can't replicate - Ecosystem of 2,400+ pre-built enterprise software integrations - Enterprise Grid security certifications and AWS KMS key management - Network effects of millions of active enterprise users and Slack Connect partners ## What it does Slack connects your team and tools with persistent chat channels, direct messaging, huddles, workflows, and AI-powered enterprise search. ### Core features - Real-time persistent chat channels and direct messaging via WebSockets - Channel membership management and role-based permissions - Threaded message replies and reactions - Universal search across messages, files, and users - File and image sharing with secure preview rendering - Rich text message composition with markdown support - Basic workflow builder for automated triggers and forms - AI-powered message summarization and search queries ## The business ### Pricing - Free: $0 — For small teams starting out with basic collaboration. - Pro: $US7.25/mo — For small-to-medium teams needing full history and basic AI. - Business+: $US15/mo — For growing organizations needing SAML SSO and compliance. - Enterprise+: Custom — For massive enterprises requiring EKM and custom keys. Founded 2009. Team size: 1,001 to 5,000. ## The hard parts - Maintaining low-latency state synchronization across thousands of concurrent WebSocket connections and multi-device presences - Implementing permission-aware vector and keyword search (RAG) that instantly filters query results against channel membership ACLs - Handling offline state queues, message delivery retries, and optimistic UI updates seamlessly across client wrappers - Managing memory-efficient client rendering for thousands of archived messages without DOM slowdowns ## How to vibe code Slack ### Prerequisites - Node.js (free): Required runtime for executing the Next.js full-stack application and package manager. - GitHub (free): Code repository hosting and CI/CD triggers for deployment. ### Recommended AI tools - Claude Code: Best-in-class terminal agent for orchestrating multi-file full-stack features, setting up database schemas, and writing WebSocket event handlers. - Cursor: IDE for reviewing UI component diffs, tweaking Tailwind styles, and fine-tuning real-time chat panes. ### Stack - Frontend: Next.js with Tailwind CSS and shadcn/ui components - Backend: Next.js App Router API routes with native WebSockets via custom Node server or Supabase Realtime - Database: Supabase (Postgres + pgvector for RAG message search) - Auth: better-auth - Payments: none - Other: Vercel AI SDK for LLM integration, LiveKit for Huddles audio/video calls ### Hosting - Vercel (Hosting the Next.js frontend and serverless API endpoints.): $0/mo (Hobby Tier) - Fly.io (Hosting the persistent WebSocket server container for real-time messaging.): ~$3-5/mo ### Build guide 1. **Project Scaffolding and Database Schema** — Initialize the Next.js application, configure Tailwind CSS with shadcn/ui, and set up the Supabase database schema for users, workspaces, channels, channel memberships, and messages with pgvector support. ``` Create a new Next.js 16 project with TypeScript, App Router, and Tailwind CSS. Initialize shadcn/ui components for a clean enterprise dashboard layout with a dark sidebar and light content pane. Configure Supabase client connection utilities and write a migration script for the database schema: tables for users (id, email, full_name, avatar_url), workspaces (id, name, slug), workspace_members (user_id, workspace_id, role), channels (id, workspace_id, name, is_private, topic), channel_members (channel_id, user_id), messages (id, channel_id, user_id, content, parent_id for threads, created_at, embedding vector(1536)). Ensure proper foreign key constraints, indexes on channel_id and created_at, and enable Row Level Security policies where workspace members can only read data from channels they belong to. Write a comprehensive README with setup instructions. ``` 2. **Authentication and Workspace Onboarding** — Implement authentication using better-auth, allowing user registration, login, and workspace creation flows. ``` Integrate better-auth into our Next.js application using Supabase as the underlying database adapter. Set up email/password authentication and Google OAuth providers. Create signup, login, and onboarding screens where a new user can create their initial workspace and default channels (#general, #random). Build protected layout wrappers that verify user workspace membership, redirect unauthenticated users to /login, and inject the current user session context into client components. Handle session token refresh edge cases gracefully and add unit tests for the auth middleware. ``` 3. **Real-time Chat and Channel Navigation** — Build the core Slack UI interface with a collapsible channel sidebar, direct messaging list, active message pane, and real-time WebSocket synchronization. ``` Build the main Slack workspace view containing a resizable left sidebar for channels and direct messages, a top header with search, and a central message stream with a sticky message input footer at the bottom. Implement real-time messaging using Supabase Realtime or a dedicated WebSockets layer so that when a user sends a message in a channel, all active clients subscribed to that channel instantly render the new message without requiring a manual page refresh. Support markdown text formatting in messages, emoji reactions with counters, and threaded replies that open a right-hand inspection drawer when clicked. Handle optimistic UI updates correctly to ensure zero perceived input lag. ``` 4. **Universal Search and AI Slackbot Summarization** — Implement instant search across channels and messages, integrating Anthropic API and pgvector for semantic search and thread summaries. ``` Implement an enterprise search modal triggered by Cmd+K (or Ctrl+K) that provides instant fuzzy search across channel names, users, and message history within the current workspace. Build an AI background worker using the Vercel AI SDK and Anthropic API that generates message embeddings upon insert, storing them in pgvector. Add a 'Summarize Channel' action in the channel header that prompts Claude Sonnet to synthesize unread messages into a concise bulleted recap. Ensure search results strictly honor channel membership ACLs so users never see snippets from private channels they don't belong to. ``` 5. **Huddles Audio/Video and File Sharing** — Integrate LiveKit for real-time huddles audio/video calls and Supabase Storage for secure file sharing. ``` Integrate LiveKit to power Slack-style Huddles. Add a 'Start Huddle' button in the channel header that launches a floating audio/video grid overlay for participating channel members, supporting mute/unmute and screen sharing toggles. Additionally, implement file upload functionality using Supabase Storage buckets, allowing users to attach images and documents directly into message streams with thumbnail preview rendering and secure download URLs. Handle upload progress bars, file size validation limits, and error recovery states. ``` 6. **Polish, Error Boundaries, and Deployment** — Add Sentry error tracking, responsive layout polish, keyboard shortcuts for navigation, and deploy production containers to Vercel and Fly.io. ``` Perform a comprehensive polish pass on the entire application. Add keyboard shortcuts (Cmd+K for search, Cmd+T for threads, Up arrow to edit last message). Implement error boundaries around message streams and sidebars with fallback states. Configure Sentry for frontend and backend error monitoring. Create Dockerfiles and deployment configurations for hosting the backend websocket processes on Fly.io and the Next.js frontend on Vercel. Write a test suite verifying core channel switching and message broadcasting workflows. ``` ### Cost vs paying **Starting costs (one-time):** - Custom domain name (optional): $12/yr - Total: ~$12 one-time **Ongoing costs (monthly):** - Vercel Hobby Hosting: $0/mo - Fly.io WebSocket Server: ~$3/mo - Anthropic API / Supabase Usage: ~$5/mo - Total: ~$8/mo - Paying for the SaaS instead: $7.25 - $15.00 / user / mo - Build time: 40-60 hours - AI tool credits: $20/mo (Claude Pro / Cursor) - Break-even: Not applicable (built for personal learning and fun) ## Sources - [Slack Official Website & Feature Pages](https://slack.com) - [Slack Pricing & Subscriptions Page](https://slack.com/pricing) - [Wikipedia - Slack Technologies](https://en.wikipedia.org/wiki/Slack_Technologies)