How to vibe codeHelpwise

Prerequisites

• Node.js LTSFree

  Required runtime for building the Next.js full-stack application and running AI agent scripts.

• GitHub AccountFree

  Repository hosting and continuous deployment integration with Vercel.

• Supabase AccountFree tier

  Managed Postgres database, row-level security, and real-time channel subscriptions.

AI coding tools

• Claude Code

  Terminal agent best suited for executing multi-file scaffolding, writing complex API integrations, and debugging error logs.

• Cursor

  AI-native code editor ideal for reviewing diffs and making rapid, iterative UI adjustments to the inbox workspace.

Build guide

1. 01Project Scaffolding and Database Schema

   Initialize the Next.js project with Tailwind CSS, shadcn/ui, and establish the complete relational database schema in Supabase for organizations, users, shared inboxes, conversations, messages, internal notes, and automation rules.

   Create a new Next.js project configured with TypeScript, Tailwind CSS, and App Router. Set up a Supabase client configuration file and write migration SQL scripts to create tables for: organizations, profiles, shared_inboxes, conversations (with fields for subject, status, assigned_user_id, channel type), messages (with body, sender_type, raw_headers), internal_notes, and automation_rules. Include foreign key constraints, indexes on conversation status and inbox_id, and Row Level Security policies ensuring tenant isolation.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

2. 02Authentication and Organization Setup

   Configure better-auth for secure user registration, login, and multi-tenant team management with role-based invitations.

   Implement better-auth in the Next.js app supporting email/password and Google OAuth logins. Create database bindings for user sessions and organization memberships. Build sign-in, sign-up, and team settings pages using shadcn/ui components where admins can invite new team members to their shared workspace.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

3. 03Shared Inbox Dashboard & Real-Time Thread UI

   Build the core three-pane helpdesk interface: inbox switcher on the left, conversation list in the middle, and detailed message thread view with reply box on the right.

   Build a responsive three-pane customer support dashboard in Next.js. Left pane lists shared inboxes and folder filters (All, Assigned to me, Unassigned, Closed). Middle pane renders a scrollable list of conversations with status badges, customer avatars, and timestamps. Right pane displays the full conversation message thread, a rich text reply composer, and sidebar metadata for tags and assignee. Ensure clean styling matching professional helpdesks.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

4. 04Email Ingestion & MIME Parsing Pipeline

   Build a robust webhook endpoint to ingest inbound emails, parse multipart MIME bodies, sanitize HTML content, strip email signatures, and thread replies correctly.

   Create a Next.js API route to act as a webhook receiver for incoming emails (configured for Resend or Sendgrid inbound parse). Write backend utility functions using mailparser or similar libraries to extract plain text, sanitize HTML parts, parse 'In-Reply-To' and 'References' headers to match existing conversation threads, and store inbound messages securely in the Supabase database.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

5. 05Real-time Collaboration & Collision Detection

   Implement real-time presence indicators and collision detection to notify agents when another team member is actively viewing or typing a reply on the same thread.

   Implement real-time collaboration features using Supabase Realtime channels. When an agent opens a conversation thread, broadcast presence state so other agents see an indicator banner stating 'User X is viewing this thread'. When an agent starts typing in the reply box, broadcast a typing status event. Display active avatars at the top of the conversation thread view.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

6. 06Internal Notes, Mentions & Shared Drafts

   Add internal notes tabs and @mentions within conversation threads, alongside real-time shared draft syncing.

   Add a toggle inside the conversation thread view to switch between 'Reply' and 'Internal Note'. Notes should be styled distinctly (e.g., yellow background) and visible only to team members. Implement @mention popups that query workspace members. Add a shared draft feature that saves draft text to the database in real-time as team members edit it collaboratively.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

7. 07AI Assistant & Summarizer Integration

   Integrate the Anthropic API to provide AI-powered reply generation, tone adjustment, and 30-second conversation thread summarization.

   Create a backend server action that calls the Anthropic API to assist support agents. Implement three tools: (1) 'Generate Reply' based on conversation context, (2) 'Rephrase Tone' (formal, friendly, concise), and (3) 'Summarize Thread' to output a 3-bullet summary of long customer conversation histories. Add UI buttons in the reply composer to invoke these AI features.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

Cost vs paying for Helpwise