How to vibe codeSurfer

Prerequisites

• Node.jsfree

  Runtime environment for Next.js full-stack application and background worker queues

• GitHubfree

  Source control and deployment pipeline integration

• Anthropic API KeyPay-as-you-go (~$15-30/mo)

  Powers content generation, entity extraction, and reasoning for SEO briefs

AI coding tools

• Claude Code

  Best-in-class terminal agent for scaffolding multi-file Next.js apps, setting up worker queues, and fixing database schemas

• Cursor

  Ideal for fine-tuning the real-time editor UI and interactive NLP entity highlighting components

Build guide

1. 01Scaffold Full-Stack Next.js Application and Database Schema

   Initialize the Next.js project with Tailwind CSS, configure Turso SQLite connection via Drizzle ORM, and set up better-auth for single-user security.

   Create a new Next.js project using TypeScript and Tailwind CSS. Configure Drizzle ORM connected to a Turso SQLite database with tables for `documents` (id, title, content, targetKeyword, contentScore, userId, createdAt), `nlp_terms` (id, documentId, term, frequency, recommendedCount), and `ai_prompts` (id, promptText, model, brandName, position, visibilityScore, checkedAt). Implement better-auth with email/password authentication. Ensure proper folder structure following Next.js App Router conventions.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

2. 02Implement SERP Scraper and NLP Entity Extraction Pipeline

   Build a backend utility that takes a target keyword, fetches top-ranking Google search results using Firecrawl or proxy-routed fetch, extracts body text, and uses Anthropic via Vercel AI SDK to extract required NLP entities and frequency targets.

   Build a server-side action in Next.js that accepts a target keyword. Use Firecrawl API or a robust fetch wrapper to retrieve top 10 competing URLs from Google SERPs. Extract clean text content from the top pages, aggregate term frequencies, and invoke Claude via Vercel AI SDK (`generateObject`) to return a JSON list of essential NLP entities with recommended min/max occurrence counts and importance weights. Store these in the `nlp_terms` table linked to the document.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

3. 03Build Real-Time Content Editor with Live SEO Scoring

   Create an interactive TipTap or textarea-based markdown editor frontend that analyzes text content on the client side, matching words against stored NLP entities and calculating a real-time 'Content Score' based on density and word count thresholds.

   Build a split-screen writing interface in Next.js using Tailwind CSS. The left side is a markdown editor; the right side is a live SEO sidebar displaying the overall 'Content Score' (0-100), word count, heading structure breakdown, and a checklist of NLP terms color-coded by usage status (missing, optimal, overused). Implement debounced client-side evaluation logic that recalculates scores and term frequencies as the user types, highlighting active terms in real time.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

4. 04Integrate AI Content Generation (Surfy Assistant)

   Add an automated article drafting feature that generates full outlines and paragraphs structured around the extracted NLP guidelines, complete with auto-linked citations.

   Implement an 'AI Writer' feature in the application. When a user creates a document with a target keyword and generated NLP terms, provide a button to generate an SEO-optimized article draft. Use `streamText` from Vercel AI SDK with Claude Sonnet, injecting the required NLP terms, word count targets, and heading hierarchy into the system prompt. Stream the generated markdown directly into the editor and append relevant external source links automatically.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

5. 05Implement AI Search Visibility Tracker

   Build a prompt tracking dashboard that queries ChatGPT, Perplexity, and Gemini APIs with brand-specific queries to evaluate brand mention status, sentiment, and share of voice.

   Create an 'AI Visibility Tracker' dashboard view and database backend. Allow users to input target prompts (e.g., 'best CRM for startups') and their brand name. Build a scheduled background task or server action that queries Perplexity Sonar API and OpenAI/Claude with web search grounding. Parse the generated responses to detect if the brand is mentioned, calculate rank position, and store results in the `ai_prompts` table. Render historical visibility trend charts using Recharts in the UI.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

6. 06Polish UI, Add Export, and Deploy to Vercel

   Refine the dashboard aesthetics, add document export options (Markdown/HTML), and deploy the application to Vercel with production environment variables.

   Polish the entire Next.js application UI for a clean, SaaS-grade dark/light theme matching modern SEO tools. Add export capabilities to download documents as Markdown or copy HTML to clipboard. Create environment variable validation for Turso, Better Auth, and AI API keys. Prepare configuration for deployment on Vercel and verify all database migrations run cleanly.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

Cost vs paying for Surfer