How to vibe codeFrase

Prerequisites

• Node.jsfree

  Runtime environment for Next.js full-stack development and backend scripts.

• GitHubfree

  Source code control and CI/CD repository hosting.

• Anthropic API / OpenAI API keypay-as-you-go

  Provides frontier language models for research processing, brand-voice formatting, and article generation.

AI coding tools

• Claude Code

  Best-in-class agentic coding tool for scaffolding multi-file full-stack apps and managing complex data pipelines from the terminal.

• Cursor

  Excellent AI code editor for iterative frontend UI development and inspecting diffs on complex scoring dashboards.

Build guide

1. 01Project Scaffolding & Database Schema

   Initialize a Next.js project with Tailwind CSS, shadcn/ui, Neon Postgres, and better-auth. Set up database tables for projects, keywords, articles, audit_pages, and content_guard_logs.

   Create a new Next.js 16 project with TypeScript, Tailwind CSS, and App Router. Configure better-auth with email/password and session management connected to a Neon Postgres database using Drizzle ORM. Scaffold the database schema with tables for users, projects (representing domains), keywords, articles (storing briefs, generated Markdown content, SEO/GEO scores), audit_pages, and content_guard_logs (tracking rank decay and fix status). Implement a clean SaaS dashboard layout with sidebar navigation supporting project switching.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

2. 02SERP Extraction & Research Pipeline

   Build an API integration using Firecrawl or custom scraping logic to fetch top 20 Google search results for target keywords, extracting headings, entity terms, and competitor word counts.

   Build a server action and backend service that accepts a target keyword and country code, and queries a web scraping API (like Firecrawl) to fetch the top 10 ranking search results. Parse the HTML of each result to extract the main article text, H1/H2/H3 headings, word count, and key entity terms. Aggregate and store this research data in the database linked to the project, and create a React component view that displays competitor statistics, common heading structures, and suggested content gaps.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

3. 03Brand Voice Profile & AI Article Draft Generator

   Implement a brand profile manager that ingests sample URLs or text to establish a tone profile, and build the AI writing agent that generates optimized long-form articles based on the research brief.

   Implement a Brand Voice feature where users can input sample text or URLs representing their writing style. Store the extracted stylistic attributes in a brand_voices table. Then, create an AI article generator workflow using the Anthropic API (Claude Sonnet) that consumes a research brief, competitor headings, and the user's brand voice profile to draft a comprehensive, well-structured markdown article complete with an SEO-optimized title, meta description, and subheadings.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

4. 04Dual-Scoring Engine (SEO & GEO)

   Develop a real-time text analysis engine that evaluates editor content against keyword density, entity coverage, structure depth, and generative citation criteria (GEO).

   Build a real-time content scoring engine in TypeScript that runs whenever an editor modifies an article draft. The engine must compute two distinct scores: an SEO score (evaluating target keyword density, heading distribution, and word count relative to top SERP competitors) and a GEO score (evaluating clarity, authoritative formatting like comparison tables and bullet points, and factual direct-answer density tailored for AI citation). Display these scores dynamically in a floating sidebar dashboard alongside actionable recommendations (e.g., 'Add pricing comparison table - high impact').

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

5. 05AI Visibility Tracker & Competitor Share-of-Voice

   Create a monitoring dashboard that tracks share-of-voice across simulated generative search queries and logs ranking fluctuations.

   Build an AI Visibility module that allows users to define a set of prompts or queries for their category. Implement a scheduled background job using Next.js cron triggers that queries LLM APIs (simulating user queries across ChatGPT, Perplexity, and Claude) to check whether the user's domain is cited in the generated answer. Calculate and store daily share-of-voice percentages, and render a time-series chart in the dashboard showing visibility trends across engines.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

6. 06Content Guard & Automated Decay Detection

   Build the monitoring system that detects ranking drops on published pages, triggers an AI revision, and queues human approval before publishing.

   Implement Content Guard, an automated monitoring service that periodically checks simulated ranking or traffic metrics for published pages. When a traffic drop exceeds a configurable threshold (e.g., -20%), automatically trigger an LLM revision workflow that updates stale statistics or adds missing subtopics. Queue the revised draft in an approval dashboard where users can review changes via a diff view, click 'Approve', and simulate publishing back to a CMS via webhook.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

Cost vs paying for Frase