How to vibe codeAmICited

Prerequisites

• Node.jsfree

  Required runtime for executing the Next.js full-stack application and MCP server tooling.

• GitHubfree

  Source control and seamless deployment integration for your hosting provider.

• Supabase Accountfree

  Provides PostgreSQL database hosting, row-level security, and authentication primitives.

AI coding tools

• Claude Code

  Best-in-class terminal agent for scaffolding complex multi-file Next.js apps, writing database migrations, and building custom MCP servers.

• Cursor

  Ideal AI code editor for inspecting UI components, reviewing git diffs, and tuning Tailwind layouts interactively.

Build guide

1. 01Project Scaffolding & Database Schema

   Initialize the Next.js project with Tailwind CSS, configure Supabase with better-auth, and set up relational tables for domains, prompts, engine_runs, and citations.

   Scaffold a new Next.js 16 project using TypeScript, Tailwind CSS, and App Router. Set up better-auth for email/password authentication connected to Supabase PostgreSQL. Create a robust database schema using Prisma or Supabase migrations with the following tables: `domains` (id, user_id, domain_name, created_at), `prompts` (id, domain_id, query_text, tags, active), `engine_runs` (id, prompt_id, engine_name, raw_response, sentiment, cited_domains, created_at), and `competitors` (id, domain_id, competitor_name). Ensure proper foreign key constraints, indexes on prompt timestamps, and a clean folder structure with shared UI primitives.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

2. 02Multi-Engine Prompt Orchestration Engine

   Build server actions and cron handlers that query OpenAI, Anthropic, Gemini, and Perplexity APIs simultaneously to evaluate tracked prompts.

   Implement a robust multi-engine prompt execution pipeline using the Vercel AI SDK. Create an API route `/api/cron/run-prompts` that fetches active prompts for all domains and dispatches queries in parallel to OpenAI (ChatGPT), Anthropic (Claude), Google (Gemini), and Perplexity (Sonar API). Wrap each engine call in a resilient retry/backoff wrapper with error catching to handle rate limits gracefully. Each execution must record the raw response string, extract mentioning brand entities, parse out referenced citation URLs, and calculate a baseline sentiment score (positive/neutral/negative) before saving the record into the `engine_runs` table.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

3. 03Visibility Score & Analytics Dashboard

   Construct the main dashboard UI visualizing Visibility Scores, Share of Voice, and engine-by-engine performance comparisons.

   Build a responsive Next.js dashboard under `/dashboard` using Tailwind CSS and shadcn/ui components. Create summary metric cards displaying the composite Visibility Score, Share of Voice percentage against tracked competitors, and average citation ranking. Implement a multi-platform breakdown view showing side-by-side performance across ChatGPT, Perplexity, Gemini, and Claude. Include an interactive historical trend chart using Recharts to visualize visibility deltas over 30 and 90 days, drawing live data from the `engine_runs` and `citations` tables.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

4. 04Full Answer Archive & Diff Viewer

   Build an archive viewer that lets users inspect raw LLM responses and diff day-over-day changes in brand citations.

   Create a detailed prompt view page at `/dashboard/prompts/[id]` that displays the full chronological history of LLM answers for a specific query. Implement a diff viewer component that compares yesterday's answer text against today's response, highlighting changes in brand mention position, wording, and newly acquired or lost citation links. Include source domain filters so users can instantly inspect which third-party domains (e.g. reddit.com, g2.com) the search engines relied upon for each run.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

5. 05SEO AI Agent & Content Optimization Module

   Develop an AI assistant interface that detects visibility gaps, evaluates competing URLs, and drafts GEO-scored optimization guidelines.

   Build an SEO AI Agent module under `/dashboard/articles` that identifies prompts where competitors are cited and the user's domain is absent. Using the Vercel AI SDK and Claude Sonnet, create a server action that analyzes winning competitor URLs, extracts missing semantic entities, and auto-drafts a GEO-optimized markdown article. The output must adhere to GEO best practices (direct answer in first 80 words, structured FAQ schema, and competitor comparison tables) and display a live calculated GEO readiness score before allowing export or markdown download.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

6. 06Model Context Protocol (MCP) Server Integration

   Implement a custom Model Context Protocol (MCP) server so local development agents like Claude Code can query your citation database directly.

   Build a standalone Model Context Protocol (MCP) server script in TypeScript (using `@modelcontextprotocol/sdk`) that securely connects to your Supabase PostgreSQL database. Expose custom tools such as `get_brand_visibility_summary`, `list_prompt_gaps`, and `get_competitor_share_of_voice`. Configure transport over stdio so that external coding agents like Claude Code and Cursor can run local queries against your tracked brand data during code refactoring and content creation workflows. Document the setup instructions in a project `README.md`.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

Cost vs paying for AmICited