Hey folks! I'm working on putting together a web version of our phone based transient assistant we would embed inside our web product. I've been playing around with the quickstarts in the docs and haven't been able to get tool calls working yet. Are there any docs or examples on how to do this? Also, is it possible to do an "end of call" report for web sessions like

end-of-call

message you can get w/ serverUrls?

@Riley Miller Hello! I'm glad to hear you're working on integrating a transient assistant into your web product. For tool calls within the web environment, you should refer to the 'Tools Calling' section in our documentation. There you'll find detailed examples and code snippets that demonstrate how to properly make tool calls from within your web application. As for generating an "end of call" report for web sessions, similar to the

end-of-call

message with server URLs, you can indeed implement this functionality. You would typically set up an event listener for the end of the call within your web application and then trigger a report generation process. The specifics of how to do this would depend on the details of your implementation and the capabilities of the VAPI you are using. If you need more detailed guidance or examples, please let me know what specific aspects you're having trouble with, and I'll do my best to assist you further!

For context here's what I'm working off right now:

const toolCallsServerUrl = `${
  getConfig().vapiServerUrlOverride ?? getConfig().apiUrl
}/tool-calls`
export const getClientBrandiAssistant = ({
  tzId,
}: {
  tzId: TimeZoneId
}): CreateAssistantDTO => ({
  name: 'Brandi',
  model: {
    provider: 'openai',
    model: 'gpt-4o',
    temperature: 0.7,
    messages: [
      {
        role: 'system',
        content: getBrandiSystemMessage({ tzId }),
      },
    ],
    tools: [
      {
        type: 'function',
        function: {
          name: 'createJobRequest',
          parameters: {
            type: 'object',
            properties: {
              jobSummary: {
                type: 'string',
                description: 'A summary of what the customer is calling about',
              },
              leadSource: {
                type: 'string',
                description: 'How the customer heard about us',
              },
              contactLastName: {
                type: 'string',
                description: 'Last name of the person calling',
              },
              contactFirstName: {
                type: 'string',
                description: 'First Name of the person calling',
              },
              contactPhoneNumber: {
                type: 'string',
                description:
                  'The phone number the incoming call is coming from',
              },
              serviceAddressCity: {
                type: 'string',
                description: 'The city of the service address',
              },
              serviceAddressLine1: {
                type: 'string',
                description: 'The address of the service location',
              },
              serviceAddressZipCode: {
                type: 'string',
                description: 'The zip code of the service address',
              },
              appointmentAvailabilities: {
                type: 'array',
                items: {
                  type: 'string',
                },
                description:
                  'An array of the different availabilities the person has for an appointment if they want one',
              },
              serviceAddressStateAbbreviation: {
                type: 'string',
                description: 'The state of the service address',
              },
            },
          },
          description:
            'The purpose of this tool is to capture information over the phone and persist it to our CRM as a "job request"',
        },
        server: {
          url: toolCallsServerUrl,
        },
        async: false,
      },
    ],
  },
  voice: {
    voiceId: '11af83e2-23eb-452f-956e-7fee218ccb5c',
    provider: 'cartesia',
    fillerInjectionEnabled: false,
  },
  recordingEnabled: true,
  firstMessage:
    "Hello, this is Brandi from Popa HVAC. I'm the after-hours AI virtual assistant. How can I help you today?",
  voicemailMessage:
    "Hey this is Brandi from Popa HVAC. Please call back when you're available.",
  endCallMessage: 'Thank you for contacting Popa HVAC. Have a great day!',
  transcriber: {
    model: 'nova-2',
    language: 'en',
    provider: 'deepgram',
  },
  clientMessages: [
    'transcript',
    'hang',
    'function-call',
    'speech-update',
    'metadata',
    'conversation-update',
  ],
  serverMessages: [
    'end-of-call-report',
    'status-update',
    'hang',
    'function-call',
  ],
  endCallPhrases: [
    'goodbye',
    'have a nice day',
    'thank you for contacting popa hvac',
  ],
  maxDurationSeconds: 501,
  backgroundSound: 'off',
  backchannelingEnabled: true,
  backgroundDenoisingEnabled: false,
  messagePlan: {
    idleMessages: [
      'Is there anything else I can help you with?',
      'Are you still there?',
    ],
  },
})

Which is largely based off the quickstart: https://github.com/VapiAI/client-example-javascript-react/tree/master

yeah end of call report triggers the same for both calls, select end of call repor server event in your assistant config.

Hey @Shubham Bajaj! Thanks for getting back to me on this. We've currently got a transient assistant that we spin up on demand for phone calls and we specify a server url which let's us receive the end call reports. We also set a serverUrl on the toolCall in the transient assistant which let's us invoke the tool during the call. I'd like to implement the same sort of experience using a purely web-based interaction which lends itself better for a screenshare during a sales demo. I tried setting the server url for the tool call in the transient assistant I was passing in to the

vapi-ai/web

sdk but it never seemed to call the server url with the tool call event and we also never received the end of call event (this one makes sense since we were only trying to set a serverUrl for the tool in the assistant object). Does this make sense? I added the assistant object we were loading into the web sdk above as a reference

@Riley Miller can you share call id for which tool call is not working?