You can build a free custom dashboard for Voice AI with Lovable and Vercel even if you’re just starting out. This friendly walkthrough, based on Henryk Brzozowski’s video, guides you through setting up prompts, connecting Supabase, editing the UI, and deploying so you can follow along step by step.
Follow the timestamps to keep things simple: 0:00 start, 1:12 Lovable prompt setup, 3:55 Supabase connection, 6:58 UI editing, 9:35 GitHub push, and 10:24 Vercel deployment. You’ll also find the prompt and images on Gumroad plus practical tips so we get you to a working Voice AI dashboard quickly and confidently.
What you’ll build and expected outcome
You will build a free, custom web dashboard that connects your voice input to a Voice AI assistant (Lovable). The dashboard will let you record or upload voice, send it to the Lovable endpoint, and display the assistant’s replies both as text and optional audio playback. You’ll end up with a working prototype you can run locally and deploy, so you can demo full voice interactions in a browser.
A free, custom web dashboard that connects voice input to a Voice AI assistant (Lovable)
You will create an interface tailored for voice-first interactions: a simple recording control, a message composer, and a threaded message view that shows the conversation between you and Lovable. The dashboard will translate your voice into requests to the Lovable endpoint and show the assistant’s responses in a user-friendly format that is easy to iterate on.
Real-time message history stored in Supabase and visible in the dashboard
The conversation history will be saved to Supabase so messages persist across sessions. Realtime subscriptions will push new messages to your dashboard instantly, so when the assistant replies or another client inserts messages, you’ll see updates without refreshing the page. You’ll be able to inspect text, timestamps, and optional audio URLs stored in Supabase.
Local development flow with GitHub and one-click deployment to Vercel
You’ll develop locally using Node.js and a Git workflow, push your project to GitHub, and connect the repository to Vercel for one-click continuous deployment. Vercel will pick up environment variables for your Lovable and Supabase keys and give you preview deployments for every pull request, making iteration and collaboration simple.
Accessible, beginner-friendly UI with basic playback and recording controls
The UI you build will be accessible and mobile-friendly, including clear recording indicators, keyboard-accessible controls, and simple playback for assistant responses. The design will focus on ease of use for beginners so you can test voice flows without wrestling with complex UI frameworks.
A deployable project using free tiers only (no paid services required to get started)
All services used—Lovable (if you have a free tier or test key), Supabase free tier, GitHub free repositories, and Vercel hobby tier—allow you to get started without paid accounts. Your initial prototype will run on free plans, and you can later upgrade if your usage grows.
Prerequisites and accounts to create
You’ll need a few basics before you start, but nothing advanced: some familiarity with web development and a handful of free accounts to host and deploy your project.
Basic development knowledge: HTML, CSS, JavaScript (React recommended but optional)
You should know the fundamentals of HTML, CSS, and JavaScript. Using React or Next.js will simplify component structure and state management, and Next.js is especially convenient for Vercel deployments, but you can also build the dashboard with plain JavaScript if you prefer to keep things minimal.
Free GitHub account to host the project repository
Create a free GitHub account if you don’t already have one. You’ll use it to host your source code, track changes with commits and branches, and enable collaboration. GitHub will integrate with Vercel for automated deployments.
Free Vercel account for deployment (connects to GitHub)
Sign up for a free Vercel account and connect it to your GitHub account. Vercel will automatically deploy your repository when you push changes, and it provides an easy place to configure environment variables for your Lovable and Supabase credentials.
Free Supabase account for database and realtime features
Create a free Supabase project to host your Postgres database, enable realtime subscriptions, and optionally store audio files. Supabase offers an anon/public key for client-side use in development and server keys for secure operations.
Lovable account or access to the Voice AI endpoint/API keys (vapi/retellai if relevant)
You’ll need access to Lovable or the Voice AI provider’s API keys or endpoint URL. Make sure you have a project or key that allows you to make test requests. Understand whether the provider expects raw audio, base64-encoded audio, or text-based prompts.
Local tools: Node.js and npm (or yarn), a code editor like VS Code
Install Node.js and npm (or yarn) and use a code editor such as VS Code. These tools let you run the development server, install dependencies, and edit source files. You’ll also use Git locally to commit code and push to GitHub.
Overview of the main technologies
You’ll combine a few focused technologies to build a responsive voice dashboard with realtime behavior and seamless deployment.
Lovable: voice AI assistant endpoints, prompt-driven behavior, and voice interaction
Lovable provides the voice AI model endpoint that will receive your prompts or audio and return assistant responses. You’ll design prompts that guide the assistant’s persona and behavior and choose how the audio is handled—either streaming or in request/response cycles—depending on the API’s capabilities.
Supabase: hosted Postgres, realtime subscriptions, authentication, and storage
Supabase offers a hosted Postgres database with realtime features and an easy client library. You’ll use Supabase to store messages, offer realtime updates to the dashboard, and optionally store audio files in Supabase Storage. Supabase also supports authentication and row-level security when you scale to multi-user setups.
Vercel: Git-integrated deployments, environment variables, preview deployments
Vercel integrates tightly with GitHub so every push triggers a build and deployment. You’ll configure environment variables for keys and endpoints in Vercel’s dashboard, get preview URLs for pull requests, and have a production URL for your main branch.
GitHub: source control, PRs for changes, repository structure and commits
GitHub will store your code, track commit history, and let you use branches and pull requests to manage changes. Good commit messages and a clear repository structure will make collaboration straightforward for you and any contributors.
Frontend framework options: React, Next.js (preferred on Vercel), or plain JS
Choose the frontend approach that fits your skill level: React gives component-based structure, Next.js adds routing and server-side options and is ideal for Vercel, while plain JS keeps the project tiny and easy to understand. For beginners, React or Next.js are recommended because they make state and component logic clearer.
Video walkthrough and key timestamps
If you follow a video tutorial, timestamps help you jump to the exact part you need. Below are suggested timestamps and what to expect at each point.
Intro at 0:00 — what the project is and goals
At the intro you’ll get a high-level view of the project goals: connect a voice input to Lovable, persist messages in Supabase, and deploy the app to Vercel. The creator typically outlines the end-to-end flow and the free-tier constraints you need to be aware of.
Lovable prompt at 1:12 — prompt design and examples
Around this point you’ll see prompt examples for guiding Lovable’s persona and behavior. The walkthrough covers system prompts, user examples, and strategies for keeping replies concise and voice-friendly. You’ll learn how to structure prompts so the assistant responds well to spoken input.
Supabase connection at 3:55 — creating DB and tables, connecting from client
This segment walks through creating a Supabase project, adding tables like messages, and copying the API URL and anon/public key into your client. It also demonstrates inserting rows and testing realtime subscriptions in the Supabase SQL or UI.
Editing the UI at 6:58 — where to change styling and layout
Here you’ll see which files control the layout, colors, and components. The video usually highlights CSS or component files you can edit to change the look and flow, helping you quickly customize the dashboard for your preferences.
GitHub push at 9:35 — commit, push, and remote setup
At this timestamp you’ll be guided through committing your changes, creating a GitHub repo, and pushing the local repo to the remote. The tutorial typically covers .gitignore and setting up initial branches.
Vercel deployment at 10:24 — link repo and set up environment variables
Finally, the video shows how to connect the GitHub repo to Vercel, configure environment variables like LOVABLE_KEY and SUPABASE_URL, and trigger a first deployment. You’ll learn where to paste keys for production and how preview deployments work for pull requests.
Setting up Lovable voice AI and managing API keys
Getting Lovable ready and handling keys securely is an important early step you can’t skip.
Create a Lovable project and obtain the API key or endpoint URL
Sign up and create a project in Lovable, then generate an API key or note the endpoint URL. The project dashboard or developer console usually lists the keys; treat them like secrets and don’t share them publicly in your GitHub repo.
Understand the basic request/response shape Lovable expects for prompts
Before wiring up the UI, test the request format Lovable expects—whether it’s JSON with text prompts, multipart form-data with audio files, or streaming. Knowing the response shape (text fields, audio URLs, metadata) will help you map fields into your message model.
Store Lovable keys securely using environment variables (local and Vercel)
Locally, store keys in a .env file excluded from version control. In Vercel, add the keys to the project environment variables panel. Your app should read keys from process.env so credentials stay out of the source code.
Decide on voice input format and whether to use streaming or request/response
Choose whether you’ll stream audio to Lovable for low-latency interactions or send a full audio request and wait for a response. Streaming can feel more real-time but is more complex; request/response is simpler and fine for many prototypes.
Test simple prompts with cURL or Postman before wiring up the dashboard
Use cURL or a REST client to validate requests and see sample responses. This makes debugging easier because you can iterate on prompts and audio handling before integrating with the frontend.
Designing and crafting the Lovable prompt
A good prompt makes the assistant predictable and voice-friendly, so you get reliable output for speech synthesis or display.
Define user intent and assistant persona for consistent responses
Decide who the assistant is and what it should do—concise help, friendly conversation, or task-oriented guidance. Defining intent and persona at the top of the prompt helps the model stay consistent across interactions.
Write clear system and user prompts optimized for voice interactions
Use a system prompt to set the assistant’s role and constraints, then shape user prompts to be short and explicit for voice. Indicate desired response length and whether to include SSML or plain text for TTS.
Include examples and desired response styles to reduce unexpected replies
Provide a few example exchanges that demonstrate the tone, brevity, and structure you want. Examples help the model pattern-match the expected reply format, which is especially useful for voice where timing and pacing matter.
Iterate prompts by logging responses and refining tone, brevity, and format
Log model outputs during testing and tweak prompts to tighten tone, remove ambiguity, and enforce formatting. Small prompt changes often produce big differences, so iterate until responses fit your use case.
Store reusable prompt templates in the code to simplify adjustments
Keep prompt templates in a central file or configuration so you can edit them without hunting through UI code. This makes experimentation fast and keeps the dashboard flexible.
Creating and configuring Supabase
Supabase will be your persistent store for messages and optionally audio assets; setting it up correctly is straightforward.
Create a new Supabase project and note API URL and anon/public key
Create a new project in Supabase and copy the project URL and anon/public key. These values are needed to initialize the Supabase client in your frontend. Keep the service role key offline for server-side operations only.
Design tables: messages (id, role, text, audio_url, created_at), users if needed
Create a messages table with columns such as id, role (user/system/assistant), text, audio_url for stored audio, and created_at timestamp. Add a users table if you plan to support authentication and per-user message isolation.
Enable Realtime to push message updates to clients (Postgres replication)
Enable Supabase realtime for the messages table so the client can subscribe to INSERT events. This allows your dashboard to receive new messages instantly without polling the database.
Set up RLS policies if you require authenticated per-user data isolation
If you need per-user privacy, enable Row Level Security and write policies that restrict reads/writes to authenticated users. This is important before you move to production or multi-user testing.
Test queries in the SQL editor and insert sample rows to validate schema
Use the Supabase SQL editor or UI to run test inserts and queries. Verify that timestamps are set automatically and that audio URLs or blob references save correctly.
Connecting the dashboard to Supabase
Once Supabase is ready, integrate it into your app so messages flow between client, DB, and Lovable.
Install Supabase client library and initialize with the project url and key
Install the Supabase client for JavaScript and initialize it with your project URL and anon/public key. Keep initialization centralized so components can import a single client instance.
Create CRUD functions: sendMessage, fetchMessages, subscribeToMessages
Implement helper functions to insert messages, fetch the recent history, and subscribe to realtime inserts. These abstractions keep data logic out of UI components and make testing easier.
Use realtime subscriptions to update the UI when new messages arrive
Subscribe to the messages table so the message list component receives updates when rows are inserted. Update the local state optimistically when sending messages to improve perceived performance.
Save both text and optional audio URLs or blobs to Supabase storage
If Lovable returns audio or you record audio locally, upload the file to Supabase Storage and save the resulting URL in the messages row. This ensures audio is accessible later for playback and auditing.
Handle reconnection, error states, and offline behavior gracefully
Detect Supabase connection issues and display helpful UI states. Retry subscriptions on disconnects and allow queued messages when offline so you don’t lose user input.
Editing the UI: structure, components, and styling
Make the frontend easy to modify by separating concerns into components and keeping styles centralized.
Choose project structure: single-page React or Next.js app for Vercel
Select a single-page React app or Next.js for your project. Next.js works well with Vercel and gives you dynamic routes and API routes if you need server-side proxying of keys.
Core components: Recorder, MessageList, MessageItem, Composer, Settings
Build a Recorder component to capture audio, a Composer for text or voice submission, a MessageList to show conversation history, MessageItem for individual entries, and Settings where you store prompts and keys during development.
Implement responsive layout and mobile-friendly controls for voice use
Design a responsive layout with large touch targets for recording and playback, and ensure keyboard accessibility for non-touch interactions. Keep the interface readable and easy to use on small screens.
Add visual cues: recording indicator, loading states, and playback controls
Provide clear visual feedback: a blinking recording indicator, a spinner or skeleton for loading assistant replies, and accessible playback controls for audio messages. These cues help users understand app state.
Make UI editable: where to change colors, prompts, and labels for beginners
Document where to change theme colors, prompt text, and labels in a configuration file or top-level component so beginners can personalize the dashboard without digging into complex logic.
Conclusion
You’ll finish with a full voice-enabled dashboard that plugs into Lovable, stores history in Supabase, and deploys via Vercel—all using free tiers and beginner-friendly tools.
Recap of the end-to-end flow: Lovable prompt → Supabase storage → Dashboard → Vercel deployment
The whole flow is straightforward: you craft prompts for Lovable, send recorded or typed input from the dashboard to the Lovable API, persist the conversation to Supabase, and display realtime updates in the UI. Vercel handles continuous deployment so changes go live when you push to GitHub.
Encouragement to iterate on prompts, UI tweaks, and expand features using free tiers
Start simple and iterate: refine prompts for more natural voice responses, tweak UI for accessibility and performance, and add features like multi-user support or analytics as you feel comfortable. The free tiers let you experiment without financial pressure.
Next steps: improve accessibility, add analytics, and move toward authenticated multi-user support
After the prototype, consider improving accessibility (ARIA labels, focus management), adding analytics to understand usage patterns, and implementing authentication with Supabase to support multiple users securely.
Reminders to secure keys, monitor usage, and use preview deployments for safe testing
Always secure your Lovable and Supabase keys using environment variables and never commit them to Git. Monitor usage to stay within free tier limits, and use Vercel preview deployments to test changes safely before promoting them to production.
If you want to implement Chat and Voice Agents into your business to reduce missed calls, book more appointments, save time, and make more revenue, book a discovery call here: https://brand.eliteaienterprises.com/widget/bookings/elite-ai-30-min-demo-call