How to vibe codeFireflies.ai

Prerequisites

• Node.jsfree

  Runtime environment for the Next.js full-stack application.

• GitHubfree

  Source control and deployment pipeline connector for Vercel.

• 

  OpenAI API KeyPay-as-you-go (~$0.006/min)

  Required for Whisper speech-to-text audio transcription.

AI coding tools

• Cursor

  The best AI code editor for rapidly scaffolding UI components and iterating on full-stack codebases.

• Claude Code

  Excellent terminal agent for handling multi-file backend logic, database schema design, and complex debugging loops.

Build guide

1. 01Project Scaffolding & Database Schema

   Initialize a Next.js project with Tailwind CSS and shadcn/ui. Configure Neon Postgres with Drizzle ORM to handle users, meetings, transcripts, and vector embeddings.

   Scaffold a new Next.js 16 application with TypeScript, Tailwind CSS, and App Router. Set up Drizzle ORM connected to a Neon Postgres database. Define database schemas for 'users', 'meetings' (id, userId, title, audioUrl, duration, createdAt), 'transcripts' (id, meetingId, speaker, text, startTime, endTime), and 'summaries' (id, meetingId, bulletPoints, actionItems, embedding vector). Include pgvector extension initialization in the migration scripts.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

2. 02Authentication Setup

   Implement local authentication using better-auth to secure the personal dashboard and manage user sessions.

   Integrate 'better-auth' into the Next.js application using the Neon Postgres database adapter. Create email/password sign-in and sign-up pages with clean Tailwind CSS styling. Add middleware to protect dashboard routes and ensure users can only access their own meeting records.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

3. 03Audio Upload & Whisper Transcription Pipeline

   Build an audio file upload widget using UploadThing and connect it to a background processing action that transcribes audio via the OpenAI Whisper API.

   Create a file upload component using UploadThing that accepts MP3, WAV, and M4A audio files up to 500MB. When an upload completes, trigger a server action that downloads the file temporarily or streams it to the OpenAI Whisper API (v1 /audio/transcriptions) with timestamp granularity. Store the resulting transcript chunks with speaker segments and start/end times into the 'transcripts' table.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

4. 04AI Summarization & Action Item Extraction

   Implement an LLM processing step that analyzes completed transcripts to generate structured summaries, executive bullet points, and actionable tasks.

   Write a server-side utility function that compiles a meeting transcript from database records and sends it to the OpenAI or Anthropic API with a structured prompt. Instruct the model to return a JSON object containing an executive summary, key bullet points, and a list of action items with assignees. Save these outputs into the 'summaries' table and display them in a clean dashboard view.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

5. 05AskFred Conversational Search Interface

   Build a conversational RAG interface allowing users to ask questions about past meeting contents using pgvector semantic search.

   Build an 'AskFred' chat interface UI in the dashboard. When a user submits a query, generate an embedding of the question, query the 'transcripts' table using Neon pgvector cosine similarity to retrieve relevant transcript snippets, and feed those snippets into an LLM context window. Return an accurate, grounded answer with citations pointing to specific meeting timestamps.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

6. 06Dashboard UI & Audio Player Integration

   Develop the main meeting dashboard with searchable history, detailed transcript views, and an audio waveform player synced to transcript timestamps.

   Create a responsive dashboard page displaying a list of recorded meetings with search and filter capabilities. Build a detail view for a single meeting that includes an audio player, a scrolling transcript view where clicking a transcript segment jumps the audio playback to that exact timestamp, and tabs for summary, action items, and chat.

   ⧉copy promptopen in Claude CodeCopen in Codexopen in Cursor

Cost vs paying for Fireflies.ai