feat: vapi working

Backend/app/api/v1/api.py

@@ -1,5 +1,5 @@
 from fastapi import APIRouter
-from app.api.v1.endpoints import auth, quiz, notes, vapi_ai  # Add vapi import
+from app.api.v1.endpoints import auth, quiz, notes, interview
 
 api_router = APIRouter()
 
@@ -24,9 +24,8 @@ api_router.include_router(
     tags=["notes"]
 )
 
-# Add Vapi routes
 api_router.include_router(
-    vapi_ai.router,
-    prefix="/vapi",
-    tags=["Voice Interview"]
+    interview.router,
+    prefix="/interview",
+    tags=["Interview"]
 )

Backend/app/api/v1/endpoints/interview.py

@@ -0,0 +1,135 @@
+import os
+import uvicorn
+from fastapi import APIRouter, HTTPException, Request
+from fastapi.middleware.cors import CORSMiddleware
+from pydantic import BaseModel
+from app.config import settings
+from vapi import Vapi
+from dotenv import load_dotenv
+
+# Load environment variables from .env file
+load_dotenv()
+
+router = APIRouter()
+
+
+# --- CONFIGURATION ---
+VAPI_PRIVATE_KEY = os.getenv("VAPI_PRIVATE_KEY")
+VAPI_ASSISTANT_ID = os.getenv("VAPI_ASSISTANT_ID")
+# The SERVER_URL MUST be set to your public ngrok HTTPS URL for external webhooks to work.
+SERVER_URL = os.getenv("SERVER_URL", "http://localhost:8000") 
+
+# Initialize Vapi Server SDK
+try:
+    vapi_server = Vapi(token=VAPI_PRIVATE_KEY)
+except Exception as e:
+    print(f"Vapi SDK Initialization Error: {e}")
+    print("Ensure VAPI_PRIVATE_KEY is set in .env")
+
+# --- CORS SETUP ---
+# app.add_middleware(
+#     CORSMiddleware,
+#     # Allow communication from the frontend running on localhost:5173 
+#     # and also allow the ngrok base URL for safety.
+#     allow_origins=["http://localhost:5173", "http://127.0.0.1:5173", SERVER_URL],
+#     allow_credentials=True,
+#     allow_methods=["*"],
+#     allow_headers=["*"],
+# )
+
+# --- SCHEMAS ---
+class ConfigRequest(BaseModel):
+    name: str
+    job_role: str
+    experience: str
+
+# --- ENDPOINTS ---
+
+@router.post("/api/get-vapi-config")
+async def get_vapi_config(data: ConfigRequest):
+    """
+    Endpoint called by the Frontend to get the dynamically generated Assistant configuration.
+    """
+    if VAPI_ASSISTANT_ID == "asst_11111111111111111111":
+        raise HTTPException(
+            status_code=503, 
+            detail="VAPI_ASSISTANT_ID not configured in .env. Please set your ID."
+        )
+
+    try:
+        print(f"\n--- New Interview Request ---")
+        print(f"👤 User: {data.name}, Role: {data.job_role}, Exp: {data.experience}")
+
+        # 1. Construct the Dynamic System Prompt
+        system_prompt = (
+            f"You are a strict technical interviewer. You are interviewing {data.name} for a {data.job_role} role. "
+            f"They have {data.experience} years of experience. "
+            f"Ask short, concise questions. Wait for their answer. Do not lecture. "
+            f"Start by asking them to introduce themselves and briefly describe their experience."
+        )
+
+        # 2. Dynamic Webhook URL (for this call only)
+        # Vapi will send webhooks to the public URL defined in SERVER_URL, 
+        # specifically hitting this backend's /api/webhook route.
+        webhook_url = f"{SERVER_URL}/api/webhook"
+        
+        # 3. Construct the Overrides Payload
+        assistant_overrides = {
+            "model": {
+                "provider": "openai", 
+                "model": "gpt-4o-mini", # or "gpt-4", "gpt-3.5-turbo"
+                "messages": [
+                    {"role": "system", "content": system_prompt}
+                ]
+            },
+            "server": {
+                "url": webhook_url
+            },
+            # ... keep metadata as is ...
+            "metadata": {
+                "user_name": data.name,
+                "job_role": data.job_role,
+                "environment": "standalone-test"
+            }
+        }
+
+        # 4. Return the necessary config to the frontend Web SDK
+        return {
+            "assistantId": VAPI_ASSISTANT_ID,
+            "overrides": assistant_overrides
+        }
+
+    except Exception as e:
+        print(f"❌ Vapi Configuration Error: {e}")
+        raise HTTPException(status_code=500, detail=f"Failed to configure agent: {str(e)}")
+
+
+@router.post("/api/webhook")
+async def vapi_webhook_receiver(request: Request):
+    """
+    Endpoint that receives asynchronous events from Vapi's servers.
+    """
+    payload = await request.json()
+    message = payload.get("message", {})
+    
+    # Log incoming transcripts in real-time
+    if message.get("type") == "transcript" and message.get("transcriptType") == "final":
+        print(f"🗣️ [Transcript] {message.get('role').upper()}: {message.get('transcript')}")
+        
+    # Log the final report (contains summary, full conversation, etc.)
+    elif message.get("type") == "end-of-call-report":
+        metadata = payload.get("assistant", {}).get("metadata", {})
+        print(f"\n--- 🏁 Call Ended Report ---")
+        print(f"  User: {metadata.get('user_name')}, Role: {metadata.get('job_role')}")
+        print(f"  Summary: {message.get('summary', 'N/A')}")
+        print(f"---------------------------\n")
+
+    # Vapi expects a 200 OK response
+    return {"status": "ok"}
+
+@router.get("/")
+async def root():
+    return {"message": "Vapi Standalone Backend is running on port 8000."}
+
+if __name__ == "__main__":
+    uvicorn.run("main:app", host="0.0.0.0", port=8000, reload=True)

Backend/app/config.py

@@ -23,6 +23,10 @@ class Settings(BaseSettings):
     VAPI_PUBLIC_KEY: str
     VAPI_ASSISTANT_ID: str
 
+    VAPI_ASSISTANT_ID: str = "your-vapi-assistant-id"
+    VAPI_PRIVATE_KEY: str
+    VAPI_PUBLIC_KEY: str
+
     class Config:
         env_file = ".env"
         extra = "ignore"

Frontend/src/api/interviewService.ts

@@ -0,0 +1,16 @@
+import API from "./api";
+
+export const getVapiConfig = async (
+  name: string,
+  jobRole: string,
+  experience: number,
+  level: string
+) => {
+  const response = await API.post("/interview/config", {
+    name,
+    job_role: jobRole,
+    experience,
+    level,
+  });
+  return response.data;
+};

Frontend/src/pages/AiInterview.tsx

@@ -1,47 +1,275 @@
-// AiInterview.tsx
-import { useEffect, useState } from "react";
-import { useVapi } from "../hooks/useVapi";
-import { getVapiConfig } from "../api/vapiService";
+import React, { useEffect, useState } from "react";
+import Vapi from "@vapi-ai/web";
+import { Mic, PhoneOff, Volume2, Loader2, Activity } from "lucide-react";
 
-export default function AiInterview() {
-  const [interviewConfig, setInterviewConfig] = useState(null);
-  const [vapiKey, setVapiKey] = useState<string | null>(null);
-  const { vapiClient, start, stop } = useVapi(vapiKey);
+// --- CONFIG ---
+// 1. Put your Vapi Public Key here
+const VAPI_PUBLIC_KEY = "6e393730-74a2-4690-8cb7-845ed3880488";
+// 2. Point this to your FastAPI backend
+const BACKEND_URL = "http://localhost:8000";
+
+const vapi = new Vapi(VAPI_PUBLIC_KEY);
+
+function App() {
+  const [isSessionActive, setIsSessionActive] = useState(false);
+  const [isSpeaking, setIsSpeaking] = useState(false);
+  const [status, setStatus] = useState("Idle");
+
+  // Form State
+  const [name, setName] = useState("Jane Doe");
+  const [role, setRole] = useState("Senior Frontend Engineer");
+  const [exp, setExp] = useState("7");
+
+  useEffect(() => {
+    // Vapi Event Listeners
+    vapi.on("call-start", () => {
+      setStatus("Connected (AI is listening)");
+      setIsSessionActive(true);
+    });
+
+    vapi.on("call-end", () => {
+      setStatus("Call Ended");
+      setIsSessionActive(false);
+      setIsSpeaking(false);
+    });
+
+    vapi.on("speech-start", () => {
+      setStatus("AI is speaking...");
+      setIsSpeaking(true);
+    });
+
+    vapi.on("speech-end", () => {
+      if (isSessionActive) {
+        setStatus("Connected (Listening)");
+        setIsSpeaking(false);
+      }
+    });
+
+    vapi.on("error", (e) => {
+      console.error("Vapi Error:", e);
+      setStatus(`Error: ${e.message}`);
+      setIsSessionActive(false);
+    });
+
+    return () => {
+      // Cleanup
+      vapi.stop();
+      vapi.removeAllListeners();
+    };
+  }, []);
+
+  const startInterview = async () => {
+    if (VAPI_PUBLIC_KEY === "YOUR_PUBLIC_KEY_HERE") {
+      alert("Please update VAPI_PUBLIC_KEY in src/App.tsx");
+      return;
+    }
+
+    setStatus("Configuring...");
 
-  const handleStartInterview = async () => {
     try {
-      // 1. Ask backend for config
-      const cfg = await getVapiConfig(interviewConfig);
-
-      // 2. Save publicKey → this triggers useVapi to create the client
-      setVapiKey(cfg.publicKey);
-
-      // 3. Wait until client is created
-      const waitForClient = () =>
-        new Promise<void>((resolve) => {
-          const interval = setInterval(() => {
-            if (vapiClient) {
-              clearInterval(interval);
-              resolve();
-            }
-          }, 50);
-        });
-
-      await waitForClient();
-
-      // 4. Start the actual voice session
-      await start(cfg.assistantId, cfg.overrides);
-
-      console.log("Interview started!");
-    } catch (err) {
-      console.error("Failed to start interview:", err);
+      // 1. Call your backend to get the dynamic config
+      const response = await fetch(
+        `${BACKEND_URL}/api/v1/interview/api/get-vapi-config`,
+        {
+          method: "POST",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify({ name, job_role: role, experience: exp }),
+        }
+      );
+
+      const data = await response.json();
+
+      if (!data.assistantId || !data.overrides) {
+        throw new Error("Invalid config from backend");
+      }
+
+      setStatus("Connecting...");
+
+      // 2. Start Vapi with the config from backend
+      vapi.start(data.assistantId, data.overrides);
+    } catch (err: any) {
+      console.error("Start Call API Error:", err);
+      setStatus(
+        `Failed: ${err.message || "Check FastAPI terminal for details."}`
+      );
     }
   };
 
+  const stopInterview = () => {
+    vapi.stop();
+  };
+
   return (
-    <div>
-      <button onClick={handleStartInterview}>Start Interview</button>
-      <button onClick={stop}>Stop</button>
+    <div
+      style={{
+        backgroundColor: "#1f2937" /* Slate 800 */,
+        padding: "2.5rem",
+        borderRadius: "1rem",
+        boxShadow: "0 20px 25px -5px rgba(0, 0, 0, 0.5)",
+        maxWidth: "450px",
+        width: "100%",
+        textAlign: "center",
+        color: "#f9fafb" /* Gray 50 */,
+      }}
+    >
+      <h1
+        style={{
+          fontSize: "2rem",
+          fontWeight: "bold",
+          marginBottom: "1.5rem",
+          color: "#60a5fa",
+        }}
+      >
+        Vapi Interview Tester
+      </h1>
+
+      {/* --- FORM --- */}
+      {!isSessionActive && (
+        <div
+          style={{
+            display: "flex",
+            flexDirection: "column",
+            gap: "1rem",
+            marginBottom: "1.5rem",
+          }}
+        >
+          <input
+            type="text"
+            placeholder="Your Name"
+            value={name}
+            onChange={(e) => setName(e.target.value)}
+            style={inputStyle}
+          />
+          <input
+            type="text"
+            placeholder="Target Role"
+            value={role}
+            onChange={(e) => setRole(e.target.value)}
+            style={inputStyle}
+          />
+          <input
+            type="number"
+            placeholder="Experience (Years)"
+            value={exp}
+            onChange={(e) => setExp(e.target.value)}
+            style={inputStyle}
+          />
+        </div>
+      )}
+
+      {/* --- VISUALIZER --- */}
+      <div
+        style={{ margin: "2rem 0", display: "flex", justifyContent: "center" }}
+      >
+        <div
+          style={{
+            width: "120px",
+            height: "120px",
+            borderRadius: "50%",
+            backgroundColor: isSpeaking
+              ? "#a855f7"
+              : isSessionActive
+              ? "#2563eb"
+              : "#4b5563",
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            color: "white",
+            transition: "all 0.3s ease",
+            transform: isSpeaking ? "scale(1.1)" : "scale(1)",
+            boxShadow: isSpeaking
+              ? "0 0 30px rgba(168, 85, 247, 0.8)"
+              : "0 0 20px rgba(37, 99, 235, 0.4)",
+          }}
+        >
+          {!isSessionActive ? (
+            <Mic size={48} />
+          ) : isSpeaking ? (
+            <Volume2 size={48} />
+          ) : (
+            <Activity size={48} />
+          )}
+        </div>
+      </div>
+
+      {/* --- CONTROLS --- */}
+      <div style={{ display: "flex", justifyContent: "center", gap: "1rem" }}>
+        {!isSessionActive ? (
+          <button
+            onClick={startInterview}
+            style={btnPrimary}
+            disabled={status === "Connecting..." || status === "Configuring..."}
+          >
+            {status === "Connecting..." || status === "Configuring..." ? (
+              <Loader2 className="animate-spin" />
+            ) : (
+              <Mic />
+            )}
+            {status === "Connecting..." || status === "Configuring..."
+              ? "Starting..."
+              : "Start Interview"}
+          </button>
+        ) : (
+          <button onClick={stopInterview} style={btnDestructive}>
+            <PhoneOff /> End Call
+          </button>
+        )}
+      </div>
+
+      <p
+        style={{ marginTop: "1.5rem", color: "#9ca3af", fontSize: "0.875rem" }}
+      >
+        Status:{" "}
+        <strong
+          style={{ color: status.includes("Error") ? "#f87171" : "#e5e7eb" }}
+        >
+          {status}
+        </strong>
+      </p>
     </div>
   );
 }
+
+// Simple inline styles for standalone testing
+const inputStyle = {
+  padding: "0.75rem",
+  borderRadius: "0.5rem",
+  border: "1px solid #475569" /* Slate 600 */,
+  fontSize: "1rem",
+  backgroundColor: "#0f172a" /* Slate 900 */,
+  color: "#f9fafb" /* Gray 50 */,
+};
+
+const btnPrimary = {
+  display: "flex",
+  alignItems: "center",
+  gap: "0.5rem",
+  backgroundColor: "#2563eb" /* Blue 600 */,
+  color: "white",
+  padding: "0.75rem 1.5rem",
+  borderRadius: "0.5rem",
+  border: "none",
+  cursor: "pointer",
+  fontSize: "1rem",
+  fontWeight: "bold",
+  transition: "background-color 0.2s",
+  outline: "none",
+};
+
+const btnDestructive = {
+  display: "flex",
+  alignItems: "center",
+  gap: "0.5rem",
+  backgroundColor: "#dc2626" /* Red 600 */,
+  color: "white",
+  padding: "0.75rem 1.5rem",
+  borderRadius: "0.5rem",
+  border: "none",
+  cursor: "pointer",
+  fontSize: "1rem",
+  fontWeight: "bold",
+  transition: "background-color 0.2s",
+  outline: "none",
+};
+
+export default App;