How to vibe codeSnitchFeed

Prerequisites

• Node.jsfree

  Required runtime for the Next.js full-stack application and background worker processes.

• GitHubfree

  Version control and deployment integration for Vercel and background runners.

• Anthropic API Keypay-as-you-go

  Powers intent scoring, sentiment analysis, and AI response draft generation.

AI coding tools

• Claude Code

  Best-in-class terminal agent for scaffolding the full-stack Next.js app, setting up database schemas, and writing complex background worker logic.

• Cursor

  Essential for iterative UI component work, styling dashboards, and refining complex React state logic.

Build guide

1. 01Project Scaffolding & Database Schema

   Initialize the Next.js application with Tailwind CSS and shadcn/ui, configure better-auth, and set up the Neon Postgres schema for users, listeners, mentions, and response profiles.

   Create a new Next.js project with TypeScript, Tailwind CSS, and App Router. Set up better-auth with email/password authentication connected to a Neon PostgreSQL database using Drizzle ORM. Create database migrations and models for users, workspaces, listeners (storing boolean query strings and target platforms), mentions (storing title, content, url, author, sentiment, fit_score, intent_tags, and timestamps), response_profiles (storing goals, voice sliders for tone/length/assertiveness/brand_plug, and platform examples), and bookmarks. Ensure clean folder organization and robust TypeScript types across all models.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

2. 02Ingestion Pipeline & Background Scanners

   Build ingestion workers using Inngest and cron schedules to fetch public posts from Reddit, Bluesky, and Hacker News matching boolean query terms.

   Implement background ingestion jobs using Inngest or scheduled API routes in Next.js. Create robust fetchers for public RSS feeds, Reddit API, Bluesky public API, and Hacker News Firebase API. Write a boolean query matching utility that parses strings with AND, OR, and NOT operators against incoming post titles and bodies. Store incoming matches in the mentions table while de-duplicating by post ID and tracking credit usage.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

3. 03AI Intent Scoring & Filtering Pipeline

   Implement the LLM scoring engine using the Vercel AI SDK and Anthropic API to evaluate relevance, sentiment, and buying intent tags for every ingested mention.

   Build an AI scoring pipeline service using the Vercel AI SDK and Anthropic API. When a new mention is ingested, pass its text and the listener's ICP description to Claude Haiku/Sonnet using structured JSON generation. The model must return a Fit Score (0-100), sentiment classification (positive, neutral, negative), intent tags (e.g. buying intent, competitor mention, brand crisis, noise), and a brief justification. Automatically drop mentions that fail relevance thresholds or match explicit exclusion rules.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

4. 04Dashboard Feed, Filtering, and Bookmarks

   Create the main mentions feed UI with advanced filtering, search, Fit Score sorting, sentiment badges, and bookmarking capabilities.

   Build the primary dashboard feed interface in Next.js using shadcn/ui. Implement a filter sidebar supporting time ranges, platform selection, Fit Score bands, sentiment filters, and intent tags. Display mention cards with author metadata, snippet content, AI scoring badges, and action buttons. Add state management for bookmarking mentions, marking them as seen/unseen, and archiving items.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

5. 05AI Response Profiles & Generation Dialog

   Build the response profile editor and the 'Respond' interactive modal supporting tone adjustments, delivery modes (public reply vs DM), text transforms, and character limits.

   Build the AI response feature set: a profile management CRUD interface under /ai/response-profiles supporting goals, voice sliders (tone, length, assertiveness, brand plug), and platform examples. Next, build the 'Respond' dialog component that opens from any mention card. It must display the mention context on the left and a draft workspace on the right. Use Vercel AI SDK to stream AI drafts based on the selected profile, workspace brand context, and per-mention tweak settings. Include transform buttons (shorten, expand, rephrase, less salesy, more human), version history navigation, platform character limit enforcement (e.g., Bluesky 300, LinkedIn 1250, Reddit 1000), and copy/open-url actions.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

6. 06Analytics Saved Reports & Export

   Implement customizable chart reports and CSV export functionality for filtering and analyzing mentions trends over time.

   Create an Analytics Reports builder page where users can configure saved charts. Support metrics (Mentions, Unique Authors, Avg. Sentiment, Avg. Fit Score), grouping dimensions (Day, Platform, Sentiment, Fit Score, Intents, Keyword), breakdowns, and chart types (Line, Area, Stacked Bar, Donut) using a charting library like Recharts. Implement CSV export server actions that serialize filtered mention data with flat pagination and retention limits.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

7. 07Alerts, Webhooks, and MCP Server Integration

   Implement real-time alert dispatchers for Slack and webhooks, alongside a Model Context Protocol (MCP) server endpoint for querying mentions from external AI tools.

   Implement notification dispatchers that trigger webhook payloads or Slack/Discord alerts the moment a high-intent mention is scored and saved. Additionally, build an MCP server endpoint (or custom API routes adhering to Model Context Protocol standards) allowing external clients like Claude or Cursor to securely query workspace mentions, check listener stats, and retrieve summaries using API keys.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

Cost vs paying for SnitchFeed