How to vibe codeHiver

Prerequisites

• Node.jsfree

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

• GitHubfree

  Source code repository and CI/CD deployment pipeline integration.

• Anthropic API KeyPay-as-you-go

  Provides Claude model access for the AI Copilot reply drafting and ticket summarization features.

AI coding tools

• Claude Code

  Best-in-class terminal coding agent for multi-file scaffolding, API integration loops, and debugging backend sync workers.

• Cursor

  Ideal for iterative UI design of the ticketing dashboard, shared inbox views, and Tailwind CSS layout adjustments.

Build guide

1. 01Project Scaffolding & Database Schema

   Initialize the Next.js 16 project with Tailwind CSS, configure better-auth for secure user accounts, and set up the Neon Postgres database schema for organizations, users, shared inboxes, tickets, and messages.

   Create a new Next.js 16 project with TypeScript and Tailwind CSS. Integrate better-auth with email/password authentication and organization management plugins. Configure Drizzle ORM to connect to a Neon Postgres database. Define the relational schema tables: 'organizations', 'users', 'inboxes', 'tickets' (fields: id, inbox_id, subject, status, priority, assignee_id, customer_email, created_at, updated_at), 'messages' (fields: id, ticket_id, sender_type, body, raw_headers, created_at), and 'internal_notes' (fields: id, ticket_id, author_id, body, created_at). Ensure foreign keys cascade correctly and include index optimizations for ticket status and assignee filtering. Test the local build and database migrations.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

2. 02Shared Inbox Dashboard & Ticket Queue UI

   Build the core desktop web application layout featuring a sidebar for shared inboxes (support@, billing@), a ticket list queue with filter tabs (Open, Pending, Resolved), and a detail view pane.

   Build a responsive SaaS dashboard layout mimicking Hiver Omni using Tailwind CSS and shadcn/ui primitives. Create a collapsible left sidebar listing shared inboxes with unread badge counters. Build a center ticket queue pane featuring search filtering, status badges (Open, Pending, Resolved), priority tags, and assignee avatars. Build a right-hand ticket detail view that displays the threaded conversation history, a reply composition text box, and an internal notes tab. Implement client-side state management to switch between selected inboxes and individual tickets seamlessly.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

3. 03Email Ingestion & Threading API

   Implement backend API webhook endpoints and ingestion logic to receive incoming emails, parse MIME payloads, match sender addresses to active inboxes, and append threaded messages to tickets.

   Create a secure API route in Next.js designed to receive inbound email webhook payloads (compatible with SendGrid/Postmark inbound parse or custom SMTP worker hooks). Implement backend parsing logic using mailparser to extract clean plain text and HTML body content, strip email signatures, and parse threading headers (In-Reply-To, References). Write database transaction logic that looks up existing tickets by subject/references or auto-creates a new ticket in the correct shared inbox queue if no thread match is found. Add robust error handling for malformed MIME messages.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

4. 04Real-Time Collaboration & Collision Detection

   Integrate Pusher channels to broadcast real-time ticket status changes, new incoming replies, and active agent presence indicators to prevent simultaneous replies.

   Integrate Pusher into the Next.js application to handle real-time event broadcasting for the ticketing workspace. When an agent opens a ticket view, broadcast a presence event showing 'Agent X is viewing this ticket' to alert other team members and prevent collision. When an incoming message or internal note is saved, publish a WebSocket event to instantly update the ticket queue and thread view for all connected team members without requiring a page refresh. Implement graceful fallback connection handling.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

5. 05AI Copilot Integration

   Incorporate the Anthropic API to power the AI Copilot sidebar widget, enabling automatic thread summarization and context-aware draft reply generation.

   Implement an AI Copilot feature using the Anthropic API and Claude Sonnet. Create a backend action that reads the entire message history of a selected ticket, constructs a structured prompt containing customer sentiment and conversation history, and streams back a concise summary alongside a recommended reply draft. Build the corresponding frontend React component with a 'Draft with AI' button that populates the reply box and an 'Summarize Ticket' card in the sidebar. Handle API rate limits, error states, and token streaming correctly.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

6. 06Workflow Automations & Polish

   Add rule-based automation triggers for incoming tickets, polish UI accessibility, add loading skeletons, and deploy the application to Vercel.

   Build an automation rule engine interface and execution worker. Allow users to configure simple trigger rules (e.g., if ticket subject contains 'billing', auto-assign to the Billing inbox and set priority to High). Implement background evaluation of these rules whenever a new ticket is ingested via webhook. Add UI polish across the entire application including loading skeletons, empty states, keyboard shortcuts for ticket navigation, and toast notifications for successful actions. Prepare environment variables and verify successful deployment configuration for Vercel.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

Cost vs paying for Hiver