How to vibe codeLetterdrop

Prerequisites

• Node.jsfree

  Runtime environment for Next.js backend and TypeScript scripts

• GitHubfree

  Source control and deployment pipeline integration

AI coding tools

• Claude Code

  Best-in-class terminal agent for scaffolding the Next.js app and multi-file data pipelines

• Cursor

  IDE-first AI assistant for refining dashboard views and message generation components

Build guide

1. 01Project Scaffolding and Database Schema

   Initialize the Next.js project with Tailwind CSS, shadcn/ui, and configure Neon Postgres with Drizzle ORM for accounts, contacts, and intent signals.

   Initialize a new Next.js project with TypeScript, Tailwind CSS, and App Router. Set up Drizzle ORM connected to a Neon Postgres database. Define database schemas for 'accounts' (id, name, domain, employee_count, industry), 'contacts' (id, account_id, name, title, linkedin_url, current_status), 'signals' (id, contact_id, signal_type, competitor_name, confidence_score, detected_at, raw_context), and 'outreach_drafts' (id, contact_id, generated_message, status). Include migration scripts and a clean database connection utility.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

2. 02Authentication and Dashboard Shell

   Implement better-auth for secure user authentication and build the main GTM intelligence dashboard layout.

   Integrate better-auth into the Next.js application supporting email/password and session management. Build a responsive dashboard layout using Tailwind CSS and shadcn/ui components featuring a sidebar navigation (Signals Feed, Target Accounts, Outreach Generator, Settings), top bar with user profile, and a clean overview metrics card layout displaying active signals count, pipeline generated estimate, and active ICP leads.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

3. 03Competitor Intent Signals Feed & Filtering

   Build the core buying signals feed UI with multi-faceted filtering by competitor, vertical, and confidence score.

   Build the Competitor Intent Signals page in Next.js. Create a server-rendered data table displaying active in-market contacts, their titles, company firmographics, confidence scores, and the competing software vendors they are evaluating. Implement filter controls for competitor name, company size, and minimum confidence threshold. Add a detailed slide-over drawer showing full contact profile and company intelligence when a row is clicked.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

4. 04AI Outreach Generation Pipeline

   Integrate the Vercel AI SDK and Anthropic API to generate tailored multi-threaded sales outreach messages based on captured signals.

   Implement an AI outreach generator using the Vercel AI SDK and Anthropic API. When a user selects an in-market lead or champion job change signal, create a server action that extracts context (prospect role, competitor being evaluated, past context) and prompts Claude to draft a personalized 3-step outreach sequence. Display the generated draft in an editable modal with buttons to copy or push via webhook.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

5. 05Signal Ingestion and Webhook Alerts

   Build background ingestion routines using Inngest to scan target URLs/RSS feeds and dispatch real-time Slack notifications.

   Set up Inngest in the Next.js application to handle background signal processing. Create a scheduled workflow function that simulates fetching public professional data or ingesting RSS/Firecrawl markdown feeds for target competitor keywords, matches entity names against the Neon database, inserts new high-confidence signals into the 'signals' table, and fires a formatted JSON webhook notification to a configured Slack channel URL.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

6. 06CRM / Webhook Export & Polish

   Add export capabilities to push enriched leads and alerts to webhooks, Google Sheets, or mock CRM endpoints.

   Build a CRM and Webhook export settings page where users can input custom webhook URLs or Google Sheet integration endpoints. Implement an export action on signal cards that bundles contact profile, firmographics, and competitor activity data into a structured payload and sends it asynchronously with retry logic, logging delivery status in the database.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

Cost vs paying for Letterdrop