🤖 AI Apps
Voice Transcription

AI Voice Transcription Tool

Introduction

The Voice Transcription tool uploads the recorded audio or selected audio file in supabase storage and creates the transcription of the audio using deepgram. It recieves the transcription response in webhook response and display the output using supabase realtime. It also generates a summary of the transcripted audio.

AI Voice Transcription Tool

Quickstart Guide

Installation

  1. Clone the repository:
terminal
git clone https://github.com/1811-Labs-LLC/BuilderKit-Starter.git [YOUR_APP_NAME]
 
cd [YOUR_APP_NAME]
 
git checkout voice-transcription

Remove the origin remote to ensure that you can work locally without pushing the changes back to the original repository.

terminal
git remote remove origin

However, note that after removing the remote, you won't be able to switch between the branches, so you'll need to clone the repository again if you want to work on another branch.

  1. Install dependencies:

    terminal
    npm install

  2. Environment Variables:

    Copy the required variables from .env.example to .env.local as mentioned and update the values.

    terminal
    cp .env.example .env.local

    Or, manually create a .env.local file in the root directory with the following env variables (make sure to update the values with your actual keys):

    .env.local
    # Host
NEXT_PUBLIC_APP_URL=<your-app-url>
 
# Supabase
NEXT_PUBLIC_SUPABASE_URL=<your-supabase-url>
NEXT_PUBLIC_SUPABASE_ANON_KEY=<your-supabase-anon-key>
SUPABASE_SERVICE_ROLE_KEY=<your-supabase-service-role-key>
SUPABASE_STORAGE_BUCKET_NAME=<your-supabase-storage-bucket-name>
 
# Deepgram
DEEPGRAM_API_KEY=<your-deepgram-api-key>
 
# OpenAI
OPENAI_API_KEY=<your-openai-api-key>
 
# Google Analytics
NEXT_PUBLIC_GOOGLE_ANALYTICS_KEY=<your-google-analytics-key>

Setup Supabase

If you have not setup the supabase yet, go through the detailed documentation to set up the supabase for BuilderKit.ai. Make sure that you are creating the user table as mentioned in the supabase setup doc as it is required for the tool.

  1. Create Voice Transcription Table in Supabase:

    sql
    -- Create a table for AI Voice Transcription
create table voice_transcriptions (
   id uuid not null default uuid_generate_v4(),
   created_at timestamp with time zone not null default now(),
   user_id uuid not null,
   transcription text null,
   summary text null,
   transcription_id text not null,
   audio_url text null,
   error text null,
   constraint voice_transcriptions_pkey primary key (id),
   constraint voice_transcriptions_user_id_fkey foreign key (user_id) references users (id)
);
 
-- Set up Row Level Security (RLS)
alter table voice_transcriptions
enable row level security;
 
create policy "Users can insert their own row." on voice_transcriptions
for insert with check (auth.uid() = user_id);
 
create policy "Users can update own row" on voice_transcriptions
for update using (auth.uid() = user_id);
 
create policy "Users can read own row" on voice_transcriptions
for select using (auth.uid() = user_id);
 
create policy "Users can delete own row" on voice_transcriptions
for delete using (auth.uid() = user_id);
 
-- Enable Realtime
alter publication supabase_realtime add table voice_transcriptions;
    • For Voice Transcription tool, we are enabling Supabase Realtime (last line of the script)
    • For all the tables, we enable the RLS policy by default with necessary permissions as mentioned in the script.

  2. Sync Supabase Types:

    To sync the supabase table schema with your project follow the steps here.

Running the Application

  1. Run the development server:

    terminal
    npm run dev

    This will start the development server on http://localhost:3000 (opens in a new tab).

  2. Build for production:

    terminal
    npm run build

    This command compiles the application for production usage.

  3. Start the production server:

    terminal
    npm start

    This will start the application in production mode.

Additional Scripts

  • Prepare Husky for Git hooks:

    terminal
    npm run prepare

  • Validate the code with Linting, Formatting & Typecheck:

    terminal
    npm run validate

Creating a Public URL for Local Webhook Testing

This app uses a webhook to handle responses from the AI server. Since the server cannot recognize a localhost URL (http://localhost:3000 (opens in a new tab)), we need to set up a tunnel to create a public URL that can accept webhook requests from the server and redirect them to your localhost URL for testing purposes.

We will use ngrok (opens in a new tab) to create this tunnel. The public URL generated by ngrok will redirect all external requests to your configured localhost URL. Follow the steps to set up ngrok and create the public URL here: https://ngrok.com/docs/getting-started (opens in a new tab).

Once ngrok is set up, test your project using the ngrok public URL instead of http://localhost:3000 (opens in a new tab).

Requirements

Chat with PDFHeadshot Generator