How to vibe codeTettra

Prerequisites

• Node.jsfree

  Required runtime for the Next.js full-stack application and CLI tools.

• GitHubfree

  Source code repository and continuous deployment source for Vercel.

• 

  Slack App Accountfree

  Required to register a custom Slack app, obtain Bot tokens, and configure Event Subscriptions for the AI assistant bot.

AI coding tools

• Claude Code

  Unmatched capability for scaffolding full-stack apps, writing robust backend database migrations, and configuring complex asynchronous event handlers like Slack webhooks.

• Cursor

  Essential for iterative UI development, component styling with Tailwind, and inspecting complex React tree-view layouts.

Build guide

1. 01Project Scaffolding & Database Schema

   Initialize the Next.js 16 project with Tailwind CSS, shadcn/ui, better-auth, and connect to Neon Postgres with pgvector enabled.

   Create a new Next.js project with TypeScript, Tailwind CSS, and App Router. Set up better-auth for email/password authentication. Configure Drizzle ORM to connect to Neon Postgres. Create database schemas for users, categories (with parent_id for hierarchical nesting), pages (title, content, category_id, status, verified_at, author_id), and page_embeddings (page_id, chunk_text, vector(1536)). Ensure pgvector extension is enabled via migration SQL. Deliver a clean, responsive dashboard layout with a sidebar category tree and markdown editor viewport.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

2. 02Knowledge Base Editor & Category Management

   Build the hierarchical category tree navigation and the markdown page editor with versioning and import capabilities.

   Build a robust category and page management system in Next.js. Implement a collapsible sidebar tree-view supporting nested categories and drag-and-drop or reordering actions. Create a markdown editing view using a clean split-pane editor with live preview. Add server actions to handle creating, updating, archiving, and deleting pages and categories. Implement a simple file import utility that parses uploaded markdown files or pasted text into structured database pages.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

3. 03Vector Ingestion & RAG Pipeline

   Implement the text chunking, embedding generation via OpenAI, and pgvector semantic search engine.

   Implement an automated RAG pipeline using the Vercel AI SDK and OpenAI embeddings (`text-embedding-3-small`). When a knowledge base page is created or updated, split its markdown content into overlapping text chunks (approx 500 tokens each), generate embedding vectors for each chunk via OpenAI API, and store them in the `page_embeddings` table linked to the page ID. Create an internal semantic search API route that accepts a natural language query, generates its embedding, performs a cosine similarity search against `page_embeddings` filtered by active/verified pages, and returns the top 5 relevant document chunks.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

4. 04AI Q&A Assistant (Kai) Web Interface

   Build the AI chat drawer and inline Q&A interface that answers questions using the company knowledge base chunks with citations.

   Build an AI assistant chat interface component named 'Kai' accessible via a floating drawer in the web app. Using the Vercel AI SDK `useChat` hook, connect it to an API route that queries the RAG pipeline from Step 3, injects retrieved document chunks as context into system prompts for GPT-4o, and streams back answers with clear markdown source citations pointing to the original knowledge base pages. Handle edge cases where no relevant context is found by prompting the user to submit a page request.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

5. 05Slack Bot Integration

   Configure the Slack Bolt app to handle slash commands, app mentions, and direct messages, querying the RAG pipeline and posting answers back to Slack.

   Implement a Slack integration module using `@slack/bolt` in Socket Mode. Set up event handlers for app mentions (`app_mention`) and direct messages (`message.im`). When a teammate asks a question in Slack, invoke the RAG semantic search pipeline to retrieve verified knowledge base answers, construct a formatted Slack Block Kit message with the answer and source links, and reply directly in the thread or channel. Include error handling for when Kai cannot find an answer, triggering an automated suggestion to notify a human expert.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

6. 06Content Hygiene & Verification Workflows

   Add verification schedules, unowned/stale page detection reports, and page request tracking.

   Build a knowledge management hygiene dashboard. Implement a database tracking column for `verification_interval_days` and `last_verified_at` on pages. Create an automated query/report route that flags pages where `last_verified_at` exceeds the interval (stale pages) or where `author_id` is null (unowned pages). Build a UI page displaying these audit reports with action buttons for Subject Matter Experts (SMEs) to recertify pages in one click. Add a page request feature allowing team members to submit missing documentation requests.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

7. 07Polish, Export, & Deployment

   Add static HTML export for categories, configure environment variables, and deploy to Vercel.

   Implement an export feature that allows users to export any category and its child pages as a structured zip archive of clean HTML files. Ensure all database queries, environment variables (`OPENAI_API_KEY`, `DATABASE_URL`, `SLACK_BOT_TOKEN`, `SLACK_SIGNING_SECRET`), and error boundaries are robust. Write clear deployment instructions for pushing the repository to GitHub and configuring production environment variables on Vercel.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

Cost vs paying for Tettra