How to vibe codeWhereby

Prerequisites

• Node.jsfree

  Required for running the Next.js full-stack framework and building developer tools.

• GitHubfree

  Source control and seamless deployments.

• 

  LiveKit Cloud accountfree tier available

  Managed WebRTC infrastructure to handle SFU video routing without building custom media servers.

AI coding tools

• Claude Code

  Best-in-class coding agent for scaffolding full-stack features, managing WebRTC client hooks, and debugging state synchronization.

• Cursor

  IDE workflow for fine-tuning video grid layouts, tailwind styles, and React component UI states.

Build guide

1. 01Project Scaffolding & Database Setup

   Initialize the Next.js project with Tailwind CSS, configure Turso database schema for rooms, hosts, and embedded API tokens, and establish better-auth.

   Scaffold a new Next.js 16 application using App Router, TypeScript, and Tailwind CSS. Configure better-auth with email/password authentication. Set up a Turso SQLite database client supporting tables for users, rooms (with unique slugs, host_id, created_at, settings JSON), and embedded API keys (key_id, secret, user_id). Create a clean dashboard landing page with light/dark styling using Lucide icons. Ensure all environment variables are documented in a .env.example file.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

2. 02Room Management & Instant Link Generation

   Build the host dashboard to create permanent and instant room URLs, configure room settings, and view active room links.

   Build a dashboard page in the Next.js app where authenticated hosts can create, list, and delete custom room URLs (e.g., /room/custom-name). Implement API endpoints for generating room tokens and storing room metadata in Turso. Include a modal for room settings (waiting room toggle, chat enabled, max participants). Add a clean clipboard-copy interaction for sharing room URLs with guests who need to join without logging in.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

3. 03WebRTC Integration with LiveKit

   Integrate the LiveKit WebRTC SDK to generate connection tokens server-side and build the core video room interface.

   Implement a server-side API route that generates LiveKit room access tokens given a room name and participant identity. Create the video room view page at app/room/[slug]/page.tsx. Use LiveKit client SDK hooks to connect to the room, handle local video/audio publication, track remote participants joining and leaving, and render participant tiles in a responsive grid layout.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

4. 04Call Controls & Media Management

   Add interactive video call controls for muting audio, turning off video, sharing screens, and opening the real-time chat drawer.

   Enhance the video room UI with an interactive floating control bar at the bottom: microphone mute/unmute toggle, camera on/off toggle, screen sharing toggle using browser screen capture APIs, and a participants list drawer. Add a real-time text chat sidebar panel using LiveKit data channels or internal websocket events so participants can send text messages to everyone in the room without page reloads.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

5. 05Embedded API & SDK Wrapper

   Create an API endpoint and a reusable iframe/web component wrapper allowing third-party apps to programmatically create rooms and embed the call interface.

   Build a developer API section in the dashboard where users can generate API keys. Create a public API endpoint /api/v1/rooms that accepts POST requests authenticated via API key headers to programmatically create rooms and return join URLs. Build an embeddable React component wrapper (<WherebyEmbed roomUrl={...} />) that renders the video call interface inside an iframe with postMessage bridge support for custom branding configuration.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

6. 06Polish, Error States & Deployment

   Handle browser media permission denial edge cases, loading spinners, mobile responsive tweaks, and deploy to Vercel.

   Audit all video room and dashboard components for robust error handling. Handle browser media permission denial gracefully with clear user instructions. Add loading skeletons for dashboard lists and smooth transitions for modal dialogs. Verify mobile browser compatibility for WebRTC streams. Prepare the codebase for deployment on Vercel and verify environment variable bindings for Turso and LiveKit.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

Cost vs paying for Whereby