InterviewMate

• 

  UI demo

🎯 Inspiration

Preparing for interviews is stressful — especially when practice feels artificial. Most mock interview tools rely on text prompts or static question banks, which fail to replicate the pressure, flow, and spontaneity of a real interview.

We wanted to build something closer to reality: an AI interviewer you can actually talk to, one that listens, responds naturally, and leads the interview the way a human interviewer would.

The inspiration came from exploring ElevenLabs Agents and realizing how realistic voice-driven conversations could feel when paired with strong conversational logic. Combining that with Google Cloud AI made it possible to build an experience that feels human, intelligent, and practical.

🚀 What the Project Does

This project is a voice-first AI interview coach where users interact entirely through speech.

The AI introduces itself as an interviewer

It asks interview questions one at a time

It listens to spoken answers

It responds naturally using voice

It drives the interview forward without requiring text input

The experience closely mirrors a real interview, helping users practice communication, confidence, and clarity — not just answers.

🛠️ How We Built It

The project follows a frontend + backend architecture, with a strong focus on conversational UX.

🔹 Frontend (React + Vite)

We built a clean voice interface using React

We integrated the ElevenLabs React SDK for real-time voice conversations

We managed conversation states such as connecting, listening, and speaking

We enabled a fully hands-free, voice-only interaction model

🔹 ElevenLabs Integration

We created a custom ElevenLabs Agent configured as an interview coach

We used Agent Branches to define precise interviewer behavior

We ensured the agent speaks first and leads the conversation

We integrated the agent using:

agentId

branchId (critical for preserving interview persona and behavior)

🔹 Google Cloud AI

We designed the system to integrate with Google Cloud Vertex AI / Gemini

This enables future extensions such as:

Answer evaluation

Confidence and clarity scoring

Personalized feedback

Interview performance analytics

⚠️ Challenges We Faced 1️⃣ Agent Worked in Playground but Not in Code

One major challenge was that the agent behaved perfectly on the ElevenLabs “Talk-to” page but acted like a generic AI inside the application.

The ElevenLabs web interface automatically injects a branch_id

The React SDK requires the branchId to be passed explicitly

Without the branch, the agent lost its interview-specific behavior.

Solution: We extracted the correct branchId and passed it into the useConversation() hook, restoring full agent functionality.

2️⃣ Agent Not Speaking First

Unlike the ElevenLabs Playground, the React SDK does not automatically trigger the first message.

This required understanding the difference between demo environments and SDK-based production integrations

Once handled correctly, the agent reliably initiated the interview flow

3️⃣ Balancing UX with Security

For rapid prototyping during the hackathon, API keys are used on the frontend

The architecture is designed so keys can be securely moved to a backend service for production deployment

📚 What We Learned

How voice-first user experiences significantly improve engagement

The importance of ElevenLabs Agent Branches

Key differences between demo environments and real SDK implementations

How to debug conversational AI systems beyond prompt tuning

How to design AI systems that feel human rather than robotic

🌟 What Makes This Project Unique

Fully voice-driven — no typing required

The AI leads the conversation, not the user

Correct use of ElevenLabs Agents and Branches

Designed to simulate realistic interview conditions

Built to scale with Google Cloud AI

🔮 Future Scope

Multiple interview modes (HR, Technical, Behavioral)

Gemini-powered answer scoring and feedback

Resume-aware, context-driven questioning

Session summaries and performance analytics

Secure backend-based API key management

🧾 Tech Stack

Frontend: React, Vite

Voice AI: ElevenLabs Agents + React SDK

Cloud AI: Google Cloud (Vertex AI / Gemini)

Architecture: Modular frontend-backend design

Built With

• elevenlabsagents
• gemini
• google-cloud
• react
• reactsdk
• vite