How to vibe codeWritesonic

Prerequisites

• Node.jsfree

  Runtime environment for building and executing the full-stack Next.js application.

• GitHubfree

  Repository hosting and continuous deployment integration.

• 

  OpenAI API KeyPay-as-you-go

  Required for running brand-mention prompt evaluations and content generation pipelines.

AI coding tools

• Claude Code

  Best-in-class terminal coding agent for scaffolding complex full-stack apps, setting up database schemas, and writing LLM orchestration loops.

• Cursor

  Ideal AI code editor for reviewing inline edits, tweaking frontend dashboard components, and fixing UI styling bugs.

Build guide

1. 01Project Scaffolding & Database Schema

   Initialize the Next.js application with Tailwind CSS, configure Neon Postgres connection pools using Drizzle ORM, and set up better-auth for single-user authentication.

   Create a new Next.js project with TypeScript, Tailwind CSS, and App Router. Set up Drizzle ORM configured for Neon Postgres. Define database schemas for `projects` (id, name, target_domain, created_at), `tracked_prompts` (id, project_id, prompt_text, target_keywords), `visibility_runs` (id, prompt_id, run_date, raw_response, brand_mentioned, competitor_mentions, sentiment_score), and `action_items` (id, project_id, category, description, status, impact_score). Implement better-auth with email/password authentication linked to the Neon database. Ensure all relational constraints and foreign keys are strictly enforced.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

2. 02Dashboard Layout & Project Management UI

   Build the core dashboard views including the overview summary, project selector, and main layout navigation mirroring the Writesonic user interface.

   Build a responsive SaaS dashboard UI using Tailwind CSS and shadcn/ui components inside the Next.js App Router. Create a sidebar layout with navigation items: Dashboard (Overview), Track (Prompt Monitoring), Prioritize (Action Center), Content, and Settings. Implement a project switcher dropdown component in the header that fetches projects from the Neon database. Create a clean summary view on the main dashboard showing aggregate AI visibility percentage trends, active prompt counts, and unresolved technical issues with interactive charts.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

3. 03AI Visibility Monitoring Engine

   Implement background worker routines and API routes that query frontier LLM models with tracked brand prompts to evaluate visibility and extract competitor mentions.

   Build a backend service module that executes tracked prompts against the OpenAI and Anthropic APIs simulating multi-engine AI search. Create an API route `/api/track` that iterates through active project prompts, sends them to the LLM with system prompts instructing it to act as an answer engine, and parses the returned markdown text. Use the Vercel AI SDK to extract structured JSON containing: `brand_mentioned` (boolean), `competitor_mentions` (array of strings), `sentiment` (positive/neutral/negative), and `citation_sources` (extracted URLs). Save these structured evaluation records into the `visibility_runs` table.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

4. 04Action Center & Prioritization Matrix

   Develop the Action Center logic that ingests visibility gaps and generates prioritized on-page and technical recommendations.

   Implement the Action Center feature in the Next.js app. Create a backend utility that analyzes recent `visibility_runs` data where the user's brand was absent while competitors were cited. Automatically generate structured items in the `action_items` table across categories: 'External mentions', 'New content', 'Refresh pages', and 'Technical issues'. Build a Kanban-style or categorized list UI in `/dashboard/actions` allowing users to view items filtered by status (Unresolved, In progress, Resolved) and priority impact score, with buttons to trigger AI optimization workflows.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

5. 05Agentic Content & Technical Audit Pipeline

   Integrate Firecrawl for website crawling and build AI content generation flows tailored for GEO optimization.

   Implement site auditing and content generation features. Integrate the Firecrawl API to crawl target URLs, checking robots.txt rules for AI crawlers like GPTBot and ClaudeBot and auditing heading hierarchy and schema presence. Create an AI Article Writer module in `/dashboard/content` that takes a target keyword and competitor gaps, uses the Anthropic API via Vercel AI SDK to generate GEO-optimized passages with embedded FAQ blocks and comparison tables, and saves the output to a markdown editor view.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

Cost vs paying for Writesonic