#104 feat: VAPI call informations

The system will be connected with VAPI service as AI caller. When a call is finished (inbound / outbound) VAPI will call a REST API endpoint with JSON payload with the results of the call. Wee need a supabae edge function which handles this API call. This result must be displayed in the WEBUI /call-logs, so we need to store it in the database.

Here is an example API call payload from VAPI (received by n8n, i just removed the n8n related stuffs, this is the body)

{
   "message":{
      "timestamp":1763633517714,
      "type":"end-of-call-report",
      "analysis":{
         "summary":"",
         "successEvaluation":"true"
      },
      "artifact":{
         "messages":[
            {
               "role":"system",
               "message":"",
               "time":1763633304806,
               "secondsFromStart":0
            },
            {
               "role":"bot",
               "message":"Üdvözlöm rita vagyok a myhali day virtuális asszisztense a beszélgetést minőségbiztosítási okokból rögzítjük. Amennyiben ehhez nem járul hozzá, kérjük bontsa a vonalat, hogy elkerülje a hosszú várakozást. Igyekszem segíteni, míg a kollégáim felszabadulnak a humán kollégáim a háttérben mindenre figyelnek, miben lehetek a segítségére?",
               "time":1763633305414,
               "endTime":1763633327672,
               "secondsFromStart":0.486,
               "duration":270,
               "source":""
            },
            {
               "role":"user",
               "message":"Maradj már csöndben, mert nem hallom a telefont. Halló.",
               "time":1763633326917,
               "endTime":1763633332908,
               "secondsFromStart":21.81,
               "duration":48290,
               "metadata":{
                  "wordLevelConfidence":[
                     
                  ]
               }
            },
            {
               "role":"bot",
               "message":"Tehát halló, itt vagyok. Miben segíthetek önnek?",
               "time":1763633332594,
               "endTime":1763633337113,
               "secondsFromStart":27.666,
               "duration":27450,
               "source":""
            },
            {
               "role":"user",
               "message":"Jó napot kívánok. Én varga laurát keresném.",
               "time":1763633337467,
               "endTime":1763633341432,
               "secondsFromStart":32.36,
               "duration":32360,
               "metadata":{
                  "wordLevelConfidence":[
                     
                  ]
               }
            },
            {
               "role":"bot",
               "message":"Miben tudok segíteni varga laurával kapcsolatban?",
               "time":1763633342984,
               "endTime":1763633345818,
               "secondsFromStart":38.056,
               "duration":37840,
               "source":""
            },
            {
               "role":"user",
               "message":"Kocsorné csattó én vagyok én írtam én egy vagy kértem én egy foglalást hurkadára. Be is vették, illetve visszajeleztek, de azóta se történt semmi. És ez a múlt 7-en volt.",
               "time":1763633347207,
               "endTime":1763633363272,
               "secondsFromStart":42.1,
               "duration":91630,
               "metadata":{
                  "wordLevelConfidence":[
                     
                  ]
               }
            },
            {
               "role":"bot",
               "message":"Elnézést a kellemetlenségért, hogy utánanézhessek, kérem adja meg az e-mail címét vagy a telefonszámát jelzem most SOS egyik kollégámnak és hamarosan keresni fogjuk önt.",
               "time":1763633364584,
               "endTime":1763633375441,
               "secondsFromStart":59.656,
               "duration":59440,
               "source":""
            },
            {
               "role":"user",
               "message":"Jó cseva. Kim kicsi.",
               "time":1763633376147,
               "endTime":1763633379079,
               "secondsFromStart":71.04,
               "duration":71040,
               "metadata":{
                  "wordLevelConfidence":[
                     
                  ]
               }
            },
            {
               "role":"bot",
               "message":"Ne haragudj.",
               "time":1763633387504,
               "endTime":1763633388714,
               "secondsFromStart":82.576,
               "duration":82360,
               "source":""
            },
            {
               "role":"user",
               "message":"Hát ezt nagyon nem lehet hallani.",
               "time":1763633390827,
               "endTime":1763633393332,
               "secondsFromStart":85.72,
               "duration":85720,
               "metadata":{
                  "wordLevelConfidence":[
                     
                  ]
               }
            },
            {
               "role":"bot",
               "message":"Ne haragudjon úgy.",
               "time":1763633394614,
               "endTime":1763633396513,
               "secondsFromStart":89.686,
               "duration":89470,
               "source":""
            },
            {
               "role":"user",
               "message":"Halló.",
               "time":1763633395037,
               "endTime":1763633396802,
               "secondsFromStart":89.93,
               "duration":89930,
               "metadata":{
                  "wordLevelConfidence":[
                     
                  ]
               }
            },
            {
               "role":"bot",
               "message":"Itt vagyok hallom önt miben segíthetek?",
               "time":1763633397994,
               "endTime":1763633401302,
               "secondsFromStart":93.066,
               "duration":92850,
               "source":""
            },
            {
               "role":"user",
               "message":"Most mondjam el még egyszer vagy már mással beszélek. Hát ez nem igaz.",
               "time":1763633404327,
               "endTime":1763633411270,
               "secondsFromStart":99.22,
               "duration":203300,
               "metadata":{
                  "wordLevelConfidence":[
                     
                  ]
               }
            },
            {
               "role":"bot",
               "message":"Kérem. Kérem ismételje meg miben tudok segíteni? Itt vagyok figyelek.",
               "time":1763633409264,
               "endTime":1763633417270,
               "secondsFromStart":104.336,
               "duration":211460,
               "source":""
            },
            {
               "role":"user",
               "message":"Foglaltam, vagyis adtam egy foglalást Egyiptom hurgadára. Pocsorné csatolja Éva névre. Vissza is írták, hogy köszönik az ajánlatkérést, de még azóta nem történt semmi. Ez a. Ez a múlt 7-en volt.",
               "time":1763633417887,
               "endTime":1763633434096,
               "secondsFromStart":112.78,
               "duration":357590,
               "metadata":{
                  "wordLevelConfidence":[
                     
                  ]
               }
            },
            {
               "role":"bot",
               "message":"Elnézést a késlekedésért, hogy gyorsan utánanézhessünk. Elkérhetem az e-mail címét vagy telefonszámát, amin a foglalást leadta. Jelzem most SOS egyik kollégámnak és hamarosan keresni fogjuk önt.",
               "time":1763633435524,
               "endTime":1763633447799,
               "secondsFromStart":130.596,
               "duration":130380,
               "source":""
            },
            {
               "role":"user",
               "message":"Gmail.com.",
               "time":1763633455507,
               "endTime":1763633458493,
               "secondsFromStart":150.4,
               "duration":150400,
               "metadata":{
                  "wordLevelConfidence":[
                     
                  ]
               }
            },
            {
               "role":"bot",
               "message":"Elnézést.",
               "time":1763633459694,
               "endTime":1763633460898,
               "secondsFromStart":154.766,
               "duration":154550,
               "source":""
            },
            {
               "role":"user",
               "message":"Ez az e-mail címen.",
               "time":1763633459867,
               "endTime":1763633462714,
               "secondsFromStart":154.76,
               "duration":154760,
               "metadata":{
                  "wordLevelConfidence":[
                     
                  ]
               }
            },
            {
               "role":"bot",
               "message":"Elnézést, nem értettem pontosan le tudná betűzni az e-mail címét, hogy biztosan jól továbbítsam a kollégáimnak.",
               "time":1763633463994,
               "endTime":1763633471337,
               "secondsFromStart":159.066,
               "duration":158850,
               "source":""
            },
            {
               "role":"user",
               "message":"Jó. Csilla.",
               "time":1763633470157,
               "endTime":1763633473818,
               "secondsFromStart":165.05,
               "duration":332130,
               "metadata":{
                  "wordLevelConfidence":[
                     
                  ]
               }
            },
            {
               "role":"bot",
               "message":"Várom, hogy. Köszönöm. Jelzem most SOS egyik kollégámnak és hamarosan keresni fogják önt.",
               "time":1763633473044,
               "endTime":1763633481270,
               "secondsFromStart":168.116,
               "duration":337750,
               "source":""
            },
            {
               "role":"user",
               "message":"Elemér csilla elemér viktor. ATTILA.",
               "time":1763633480387,
               "endTime":1763633488492,
               "secondsFromStart":175.28,
               "duration":356450,
               "metadata":{
                  "wordLevelConfidence":[
                     
                  ]
               }
            },
            {
               "toolCalls":[
                  {
                     "id":"call_7WaAONeTq9cNPxfekYsNPLMA",
                     "type":"function",
                     "function":{
                        "name":"Transfer_to_Human",
                        "arguments":"{\n  \"query\": \"Foglalt utazást Egyiptom, Hurghadára Pocsorné Csató Éva néven, visszaigazolták, de azóta nem kapott további információt. Az e-mail címe gmail.com végződésű, pontos betűzést vár. Sürgős visszajelzést kér.\"\n}"
                     }
                  }
               ],
               "role":"tool_calls",
               "message":"",
               "time":1763633486935,
               "secondsFromStart":182.007
            },
            {
               "role":"tool_call_result",
               "time":1763633487456,
               "secondsFromStart":182.528,
               "name":"Transfer_to_Human",
               "result":"Sikeresen jeleztem a kollégámnak, hogy mit szeretne és amint tudunk jelentkezünk. Van még más amiben segíthetek?",
               "metadata":{
                  
               },
               "toolCallId":"call_7WaAONeTq9cNPxfekYsNPLMA"
            },
            {
               "role":"user",
               "message":"Károly Irén Márta. Kukac gmail pont come ba.",
               "time":1763633489027,
               "endTime":1763633497938,
               "secondsFromStart":183.92,
               "duration":372080,
               "metadata":{
                  "wordLevelConfidence":[
                     
                  ]
               }
            },
            {
               "role":"bot",
               "message":"Rögzítettem, jelzem most egy Soros egyik kollégámnak és hamarosan keresni fogják önt.",
               "time":1763633499154,
               "endTime":1763633506123,
               "secondsFromStart":194.226,
               "duration":194010,
               "source":""
            },
            {
               "role":"user",
               "message":"Köszönöm, viszont hallásra.",
               "time":1763633508697,
               "endTime":1763633511558,
               "secondsFromStart":203.59,
               "duration":203590,
               "metadata":{
                  "wordLevelConfidence":[
                     
                  ]
               }
            }
         ],
         "messagesOpenAIFormatted":[
            {
               "role":"system",
               "content":"",
               "time":1763633304806,
               "secondsFromStart":0
            },
            {
               "role":"assistant",
               "content":"Üdvözlöm rita vagyok a myhali day virtuális asszisztense a beszélgetést minőségbiztosítási okokból rögzítjük. Amennyiben ehhez nem járul hozzá, kérjük bontsa a vonalat, hogy elkerülje a hosszú várakozást. Igyekszem segíteni, míg a kollégáim felszabadulnak a humán kollégáim a háttérben mindenre figyelnek, miben lehetek a segítségére?"
            },
            {
               "role":"user",
               "content":"Maradj már csöndben, mert nem hallom a telefont. Halló."
            },
            {
               "role":"assistant",
               "content":"Tehát halló, itt vagyok. Miben segíthetek önnek?"
            },
            {
               "role":"user",
               "content":"Jó napot kívánok. Én varga laurát keresném."
            },
            {
               "role":"assistant",
               "content":"Miben tudok segíteni varga laurával kapcsolatban?"
            },
            {
               "role":"user",
               "content":"Kocsorné csattó én vagyok én írtam én egy vagy kértem én egy foglalást hurkadára. Be is vették, illetve visszajeleztek, de azóta se történt semmi. És ez a múlt 7-en volt."
            },
            {
               "role":"assistant",
               "content":"Elnézést a kellemetlenségért, hogy utánanézhessek, kérem adja meg az e-mail címét vagy a telefonszámát jelzem most SOS egyik kollégámnak és hamarosan keresni fogjuk önt."
            },
            {
               "role":"user",
               "content":"Jó cseva. Kim kicsi."
            },
            {
               "role":"assistant",
               "content":"Ne haragudj."
            },
            {
               "role":"user",
               "content":"Hát ezt nagyon nem lehet hallani."
            },
            {
               "role":"assistant",
               "content":"Ne haragudjon úgy."
            },
            {
               "role":"user",
               "content":"Halló."
            },
            {
               "role":"assistant",
               "content":"Itt vagyok hallom önt miben segíthetek?"
            },
            {
               "role":"user",
               "content":"Most mondjam el még egyszer vagy már mással beszélek. Hát ez nem igaz."
            },
            {
               "role":"assistant",
               "content":"Kérem. Kérem ismételje meg miben tudok segíteni? Itt vagyok figyelek."
            },
            {
               "role":"user",
               "content":"Foglaltam, vagyis adtam egy foglalást Egyiptom hurgadára. Pocsorné csatolja Éva névre. Vissza is írták, hogy köszönik az ajánlatkérést, de még azóta nem történt semmi. Ez a. Ez a múlt 7-en volt."
            },
            {
               "role":"assistant",
               "content":"Elnézést a késlekedésért, hogy gyorsan utánanézhessünk. Elkérhetem az e-mail címét vagy telefonszámát, amin a foglalást leadta. Jelzem most SOS egyik kollégámnak és hamarosan keresni fogjuk önt."
            },
            {
               "role":"user",
               "content":"Gmail.com."
            },
            {
               "role":"assistant",
               "content":"Elnézést."
            },
            {
               "role":"user",
               "content":"Ez az e-mail címen."
            },
            {
               "role":"assistant",
               "content":"Elnézést, nem értettem pontosan le tudná betűzni az e-mail címét, hogy biztosan jól továbbítsam a kollégáimnak."
            },
            {
               "role":"user",
               "content":"Jó. Csilla."
            },
            {
               "role":"assistant",
               "content":"Várom, hogy. Köszönöm. Jelzem most SOS egyik kollégámnak és hamarosan keresni fogják önt."
            },
            {
               "role":"user",
               "content":"Elemér csilla elemér viktor. ATTILA."
            },
            {
               "role":"assistant",
               "tool_calls":[
                  {
                     "id":"call_7WaAONeTq9cNPxfekYsNPLMA",
                     "type":"function",
                     "function":{
                        "name":"Transfer_to_Human",
                        "arguments":"{\n  \"query\": \"Foglalt utazást Egyiptom, Hurghadára Pocsorné Csató Éva néven, visszaigazolták, de azóta nem kapott további információt. Az e-mail címe gmail.com végződésű, pontos betűzést vár. Sürgős visszajelzést kér.\"\n}"
                     }
                  }
               ]
            },
            {
               "role":"tool",
               "tool_call_id":"call_7WaAONeTq9cNPxfekYsNPLMA",
               "content":"Sikeresen jeleztem a kollégámnak, hogy mit szeretne és amint tudunk jelentkezünk. Van még más amiben segíthetek?"
            },
            {
               "role":"user",
               "content":"Károly Irén Márta. Kukac gmail pont come ba."
            },
            {
               "role":"assistant",
               "content":"Rögzítettem, jelzem most egy Soros egyik kollégámnak és hamarosan keresni fogják önt."
            },
            {
               "role":"user",
               "content":"Köszönöm, viszont hallásra."
            }
         ],
         "transcript":"",
         "recordingUrl":"https://storage.vapi.ai/019aa0bc-9461-7ff4-b90a-cbb4944f578d-1763633514645-2363a9f2-e74b-4239-8c99-612d040c8c25-mono.wav",
         "stereoRecordingUrl":"https://storage.vapi.ai/019aa0bc-9461-7ff4-b90a-cbb4944f578d-1763633514645-27992a10-9db2-4bed-99ba-48b163414b06-stereo.wav",
         "pcapUrl":"https://storage.vapi.ai/019aa0bc-9461-7ff4-b90a-cbb4944f578d-1763633515000-7b273c88-85d2-45c6-8899-44fa7103463b-sip.pcap",
         "logUrl":"https://calllogs.vapi.ai/180114a6-a81e-4999-b2c7-54522b5b65f3/019aa0bc-9461-7ff4-b90a-cbb4944f578d-e606a151-3488-466e-b46e-6d90378f4a75-1763633517306.jsonl

@fszontagh I'm starting work on this issue now!

I'll implement:

1. A new Supabase Edge Function to handle VAPI webhook callbacks (end-of-call-report)
2. Database schema updates to store call data in the call_logs table
3. Integration with the existing /call-logs page in the WebUI

The implementation will:

• Create a webhook endpoint for VAPI to POST call results
• Parse and store the conversation transcript, messages, analysis, and recording URLs
• Map VAPI data to our existing call_logs table structure
• Ensure proper authentication and validation of webhook requests

I'll get started on this right away!

Analysis Complete

I've analyzed the existing code and VAPI webhook payload structure. Here's my implementation plan:

Current State

• ✅ call_logs table exists with fields for transcript, summary, recording_url, costs, assistant info, etc.
• ✅ WebUI has /call-logs page that fetches data from /api/call-logs endpoint
• ✅ API endpoint structure exists in api Edge Function

What Needs to be Done

1. Database Schema Updates The call_logs table needs additional fields to store VAPI-specific data:

• vapi_call_id - Unique VAPI call identifier
• messages - JSONB field for conversation messages array
• analysis - JSONB field for VAPI analysis (summary, successEvaluation)
• stereo_recording_url - Stereo version of recording
• pcap_url - Network capture file URL
• log_url - VAPI call log URL

2. Supabase Edge Function Create vapi-webhook Edge Function to:

• Receive POST requests from VAPI
• Validate webhook payload
• Extract and map VAPI data to call_logs table fields
• Store messages, transcript, recording URLs, costs
• Return appropriate response to VAPI

3. WebUI Updates (Optional) The existing CallLogs component should work, but we can enhance it to:

• Display VAPI conversation messages
• Show analysis summary
• Add play button for stereo recording
• Display success evaluation status

Next Steps

I'll now create:

1. Database migration to add VAPI fields
2. VAPI webhook Edge Function
3. Update WebUI to display VAPI-specific data

Starting implementation now...

✅ Implementation Complete!

I've successfully implemented the VAPI call integration. Here's what was done:

🗄️ Database Changes

• Migration: 20251120_vapi_integration.sql
• New fields in call_logs table:
  • vapi_call_id - Unique VAPI call identifier
  • messages - JSONB array of conversation messages
  • analysis - JSONB object with summary and successEvaluation
  • stereo_recording_url, pcap_url, log_url - VAPI recording URLs
  • vapi_timestamp - Event timestamp
• Indexes: Added for fast lookups by call ID and timestamp

🔧 Backend Changes

1. VAPI Webhook Edge Function (vapi-webhook)

• Receives POST requests from VAPI with end-of-call-report events
• Validates webhook payload structure
• Extracts conversation data, transcript, recordings, and costs
• Maps VAPI data to call_logs table schema
• Calculates call duration from message timestamps
• Determines call outcome based on successEvaluation
• Webhook URL: https://ztklqodcdjeqpsvhlpud.supabase.co/functions/v1/vapi-webhook

2. API Endpoint Update (/api/call-logs)

• Fetches call logs from database (previously returned empty array)
• Transforms data for frontend display
• Formats duration, costs, and timestamps
• Color-codes outcomes and sentiment
• Includes full call data for details modal

🎨 Frontend Changes

CallDetailsModal Component

• Displays VAPI conversation messages with timestamps
• Shows formatted transcript (customer/assistant messages)
• Renders call summary and success evaluation
• Provides clickable links to:
  • Mono recording
  • Stereo recording
    
  • VAPI call logs
• Falls back gracefully if data is missing

📚 Documentation

Created comprehensive VAPI_INTEGRATION.md covering:

• Architecture overview
• Database schema
• VAPI webhook configuration
• Data mapping (VAPI → call_logs)
• API endpoints
• Security considerations
• Deployment instructions
• Testing guide
• Troubleshooting tips
• Future enhancement ideas

🚀 Deployment Status

✅ Database migration applied
✅ vapi-webhook Edge Function deployed
✅ api Edge Function deployed
✅ All changes committed and pushed to main

📋 VAPI Configuration

Configure VAPI to send webhooks to:

https://ztklqodcdjeqpsvhlpud.supabase.co/functions/v1/vapi-webhook

Event type: end-of-call-report

✨ Features Delivered

• ✅ Store VAPI call data in database
• ✅ Display calls in /call-logs WebUI
• ✅ Show detailed transcripts with timestamps
• ✅ Link to call recordings (mono/stereo)
• ✅ Display analysis summary and success evaluation
• ✅ Track costs breakdown (STT, LLM, TTS, Twilio)
• ✅ Color-coded outcomes and sentiment

The integration is ready for testing! 🎉