🤖Build Your Own AI Interview Assistant With Flask, React, and Vapi Platform🔊

by Orange Digital Center in Circuits > Software

83 Views, 3 Favorites, 0 Comments

🤖Build Your Own AI Interview Assistant With Flask, React, and Vapi Platform🔊

1.png

Powerd by: Houssam El Berrouhi

This project was developed within the Orange Digital Center Morocco , a space dedicated to fostering innovation, creativity, and rapid prototyping.


Have you ever dreamed of automating interview processes using AI? In this guide, we'll walk you through the development of an AI-powered voice call assistant for recruitment purposes — built specifically for Orange Digital Center Rabat.

The assistant automatically interviews candidates who want to join ODC's free training programs (e.g. École du Code ), processes their answers using speech-to-text and AI logic, and stores structured interview results in a backend system accessible by recruiters.

This project combines VoIP (via VAPI.ai), React, FastAPI, and PostgreSQL, and offers both candidate and admin dashboards for managing interview flows and decisions.

Before this AI assistant, A significant enterprise could face significant challenges in efficiently screening the high volume of applicants for their free training programs. Recruiters were overwhelmed with manually conducting initial phone screenings, a time-consuming process that often delayed the identification of promising candidates.

This obstacle slowed the scaling of the programs and strained resources.

The AI-powered voice call assistant directly addresses this problem by automating the initial screening phase. It handles a large volume of calls simultaneously, freeing up recruiters to focus on in-depth evaluations of qualified candidates, accelerating the selection process and allowing ODC or other enterprises to efficiently process a higher number of applications for their training programs.

Supplies

2.png

What You’ll Need is :

Basic Knowledge of Python (FastAPI or Flask)

React + JavaScript for UI

PostgreSQL for database management

VAPI.ai for handling AI phone call interactions

Github account as we'll need it to base our code on a predefined code source

Setup the Development Environment

4.png
6.png
5.png
3.png

Begin by setting up your development environment. First, install Python by downloading it from the official Python website. Once installed, verify the installation by running python --version in your terminal.

Then, install Node.js from the official Node.js website. Verify the installation by running node -v and npm -v in your terminal.

Finally, set up PostgreSQL by downloading and installing it from the official PostgreSQL website. Ensure PostgreSQL is running by connecting using the default credentials provided during installation.

Vapi Platform

7.png
14.png

First, for our main platform that provides free plan access for testing our ai agents, you need to sign in to Vapi platform Vapi - Build Advanced Voice AI Agents .

this will let you use and customize your agent logic as you see fit, as the platform provides many LLM models and VoIP system that can work with many study case.

Once logged in, you get to create an assistant and customize it.

  1. create your assistant by clicking the "Create assistant" button!
  2. give it a name
  3. choose blank template as we'll customize it later.
  4. and simply hit create.

and you'll get the same view as in the image, there you'll find the model section where you can customize your assistant, give it a first message to use once the call is started, build a system prompt to controle the assistant logic and what they are being used for, for this case i made it ask candidates questions related to the school of code program at ODC, I explained the program and draft the road and interview flow, so the agent can follow those instructions when making interview with candidates.

Cloning the Github Repository

8.png
9.png

Next and after you're logged in to your github account, visit techwithtim/VAPI-AI-Voice-Assistant github repository as we'll base on our codebase, provided by techwithtim.

you'll need to clone the repository to your workspace in VScode with :

git clone https://github.com/techwithtim/VAPI-AI-Voice-Assistant.git

then head to the main directory with :

cd VAPI-AI-Voice-Assistant


Frontend Setup With React and Vite

12.png
10.png
11.png
13.png

Enter your frontend directory and install necessary dependencies:

cd frontend
npm install

Check your frontend structure to familiarize yourself:

  1. src/App.jsx: Main React component handling routing.
  2. src/pages/: Contains all main page components.
  3. src/call/: Manages voice interactions.

then you'll find a .env file in the frontend directory, that's where we connect out interface with vapi platform assistant id.

now go back to vapi dashboard to get your public key and your assistant id that we'll use for the frontend, as it shows in the picture above.

after that you can Start the frontend server with:

npm run dev

Your React frontend should now be running and accessible at http://localhost:5173

Backend Setup With Flask

15.png
16.png
17.png

In another terminal, Navigate back to the backend directory:

cd backend
pip install flask flask_sqlalchemy flask_jwt_extended psycopg2-binary

Configure your PostgreSQL connection and JWT authentication in your backend application (main.py).

then you'll find another .env file in the backend folder, for the vapi api private key that we'll need to connect our backend flask server with the platform, you'll find it the same way we did to the 1st public key

Once all configure, start the Flask server in the main app:

python main.py

Your Flask backend will now run on http://localhost:5000.

This will allow us to store new candidates into our postgre database, and check credentials for users trying to login to the user-dashboard

Running and Testing Your Application

20.png
19.png
18.png
21.png

Now, let's test your setup:

User dashboard :

  1. Ensure both backend and frontend are running.
  2. Open your frontend application at http://localhost:5173, register or log in, and start an interview.
  3. Conduct an interview using voice interaction powered by Vapi, and view the summary report provided afterward.
  4. After finishing a call, a summary is generated by vapi providing details about how the interview went.
  5. Imagine having complete control over what's emphasized in a summary, allowing you to tailor it precisely to your needs.

Admin dashboard :

  1. Registered candidates are stored in postgres database, and displayed in the admins dashboard.
  2. each candidate has their own personal information, and a status that shows if they're accepted, refused, or postponed.
  3. And a dataset that fetch detailed call summary for each user.

Final Presentation and Useful Links

AI Voice Assistant for Candidate Interviews

This project demonstrates how artificial intelligence can deeply transform recruitment processes, especially in high-volume contexts like the free training programs offered by the Orange Digital Center. By automating the initial interview phase through an intelligent voice assistant, we have not only gained in efficiency, but also in scalability and objectivity.

The integration of technologies such as VAPI.ai, FastAPI, React, and PostgreSQL shows that it is possible to design innovative, accessible, and high-performance solutions to meet real-world challenges.

This prototype is just the beginning: it paves the way for many future improvements, such as emotional analysis, automated scoring, or integration with other HR platforms. This type of solution has the potential to become a true standard in AI-assisted recruitment, both for training centers and companies looking for new talent.

Access the full source code, documentation, and installation steps on GitHub.

https://github.com/Houssam-11/VoIP-AI-assistant.git

Watch the full project in action in this short video walkthrough

https://www.youtube.com/watch?v=BJ3rwJqoeZk