How to vibe codeGuru

Prerequisites

• Node.jsfree

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

• GitHubfree

  Source control and CI/CD deployment pipeline.

AI coding tools

• Claude Code

  Best-in-class agentic coding tool for scaffolding full-stack features, setting up vector database schemas, and writing MCP server handlers directly from the terminal.

• Cursor

  Ideal for iterative UI work on the dashboard, card editor, and browser extension side panel.

Build guide

1. 01Project Scaffolding and Database Schema

   Initialize the Next.js project with Tailwind CSS, configure better-auth, and set up the Supabase database schema with tables for documents, collections, tags, verification status, and pgvector embeddings.

   Initialize a new Next.js 16 project using TypeScript, Tailwind CSS, and App Router. Set up better-auth with email/password authentication. Create a Supabase migration file defining tables for 'collections', 'documents' (with columns for id, title, content, collection_id, author_id, verification_status, freshness_score, created_at, updated_at), and 'document_embeddings' (with a pgvector column supporting 1536 dimensions for vector similarity search). Write a robust database connection utility using the Supabase JS client and ensure proper TypeScript types are generated for all tables.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

2. 02Document Authoring and Management Interface

   Build the core web application dashboard allowing users to create, edit, organize documents into collections, and manage verification states.

   Build a full-featured knowledge management dashboard in Next.js. Create a sidebar navigation for collections and tags, a rich-text document editor view using shadcn/ui components, and an authoring interface where users can draft, edit, and tag documents. Implement document verification toggle buttons ('Verified' vs 'Unverified') and add metadata tracking for last review date and SME assignment. Ensure all CRUD operations interact securely with the Supabase backend.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

3. 03Hybrid Search and RAG Pipeline with Citations

   Implement vector embedding generation upon document save and build a semantic search API endpoint that grounds AI answers with mandatory source citations.

   Implement a RAG search and question-answering pipeline in Next.js. When a document is created or updated, generate its vector embeddings using the OpenAI or Anthropic embeddings API and store them in the 'document_embeddings' table. Build an API route for natural language queries that performs hybrid search (combining pgvector semantic distance with keyword search). Send the retrieved context chunks to the Anthropic API with a strict system prompt requiring mandatory source citations embedded inline and listed at the bottom of every response. Display the citations and reasoning trace clearly in the search UI.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

4. 04Automated Knowledge Verification Agent

   Create a background worker script that evaluates document usage telemetry and age to automatically flag or unverify stale content.

   Build an automated knowledge quality background job that runs via cron or an API endpoint. The script must query documents to evaluate content freshness (comparing updated_at against a configurable threshold) and check behavioral usage signals stored in a document_views table. Use an LLM evaluation call to assess whether outdated facts conflict with newer documents. Automatically update the verification_status of stale or non-compliant documents to 'unverified' and log an audit trail entry explaining the reasoning.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

5. 05Model Context Protocol (MCP) Server Implementation

   Develop a standalone MCP server endpoint exposing the governed knowledge layer so external IDE agents and AI tools can query verified documents directly.

   Build a Model Context Protocol (MCP) server in TypeScript that exposes your governed knowledge base to external AI clients like Claude Desktop or Cursor. Implement MCP tools and resources for searching verified documents, fetching document content by ID, and retrieving citation lineages. Secure the MCP server with token-based authentication and ensure it queries the exact same Supabase database and permission filters as the main web application.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

6. 06Browser Extension Side Panel

   Scaffold a lightweight browser extension using Plasmo that injects a persistent side panel for searching and querying the governed knowledge base across web apps.

   Scaffold a browser extension using the Plasmo framework in TypeScript. Build a persistent side panel UI that authenticates against your Next.js backend. Implement a search input and chat interface that communicates with your RAG API endpoint, allowing users to query company knowledge and view citations without leaving their active browser tab (e.g., while viewing Jira or GitHub).

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

7. 07Security, DLP Masking, and Audit Logging

   Add regex-based Data Loss Prevention (DLP) masking to sanitize sensitive patterns at ingestion and implement centralized audit logging for all knowledge actions.

   Implement Data Loss Prevention (DLP) regex masking middleware for all incoming document content and chat queries to redact sensitive patterns like Social Security Numbers, API keys, and credit card numbers before storage or transmission to LLM APIs. Build a centralized audit log table and logging service that records every document edit, verification change, search query, and AI access event with user lineage and timestamps.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

Cost vs paying for Guru