Web SDK Issue
# support
n
Hello, I am trying to run const vapi = new Vapi("your-public-key"); However, I get an error that Vapi is not a constructor. Has anyone run into this issue?
v
@NickVapi Hello! It sounds like there might be an issue with how the Vapi class is being imported or with the package installation itself. Let's try to troubleshoot this step by step: 1. Please ensure that the
@vapi-ai/web
package is correctly installed in your project. You can check if the package is in your
node_modules
directory or by running
yarn list @vapi-ai/web
or
npm list @vapi-ai/web
. 2. Verify that you are importing the Vapi class correctly at the top of your file. The import statement should look like this:
Copy code
javascript
   import Vapi from "@vapi-ai/web";
3. Ensure that there are no typos in your import statement and that the case of the letters matches exactly, as JavaScript imports are case-sensitive. 4. If you're using a module bundler or a build tool like Webpack, Babel, or TypeScript, make sure that it's configured correctly to handle ES6 imports. 5. If you're working in an environment that doesn't support ES6 imports, you might need to use the
require
syntax instead:
Copy code
javascript
   const Vapi = require("@vapi-ai/web").default;
If you've checked all of the above and the issue persists, please provide more details about the error message you're receiving, and I'll be happy to help you further.
You can continue this conversation by mentioning me in the message.
n
Dear Vapi Support Bot, thank you, I got to the next step, but there is a subsequent error: const Vapi = require("@vapi-ai/web").default; const vapi = new Vapi("API Key Here"); vapi.start('Asisstant ID Here'); the error I get now is: ReferenceError: window is not defined at new oe (...\Desktop\node_modules\@daily-co\daily-js\dist\daily.js:1:115760) at Function.value (..\Desktop\node_modules\@daily-co\daily-js\dist\daily.js:1:190380) at Vapi.start (C..\Desktop\node_modules\@vapi-ai\web\dist\vapi.js:110:44) at process.processTicksAndRejections (node:internal/process/task_queues:95:5) node:internal/process/promises:391 triggerUncaughtException(err, true /* fromPromise */); ^ ReferenceError: window is not defined at new oe (..\Desktop\node_modules\@daily-co\daily-js\dist\daily.js:1:115760) at Function.value (\Desktop\node_modules\@daily-co\daily-js\dist\daily.js:1:190380) at Vapi.start (\Desktop\node_modules\@vapi-ai\web\dist\vapi.js:110:44) at process.processTicksAndRejections (node:internal/process/task_queues:95:5) Emitted 'error' event on Vapi instance at: at Vapi.emit (..\Desktop\node_modules\@vapi-ai\web\dist\vapi.js:48:22) at Vapi.start (..\Desktop\node_modules\@vapi-ai\web\dist\vapi.js:217:18) at process.processTicksAndRejections (node:internal/process/task_queues:95:5) Node.js v20.18.0
Are there any other modules that need to be installed to work with this?
b
You're trying to use the client side sdk instead of the server side, please try this out https://github.com/VapiAI/server-sdk-typescript
The client side will try to access window which isn't available outside the browser
n
thanks bryant, I am trying to interact with Vapi through a web app rather than a phone call, does the server sdk work for that? For example, in the python one, I am just seeing the ability to place a call
b
Hm, it seems the server SDK is also only exposing the phone call endpoint. Let me ask the team whether this is intended behavior. In the meantime, an API call using fetch() should work fine
n
thanks bryant, client.calls.create(assistant_id= "",) is what I am seeing, is there a fetch example I can see how to write it out? https://github.com/VapiAI/server-sdk-python/blob/main/reference.md
b
something like this should work:
Copy code
await fetch(`https://api.vapi.ai/call/web`, {
        method: 'POST',
        headers: {
          Authorization: `Bearer       
${YOUR_API_KEY}`,
      'Content-Type': 'application/json',
    },
        body: JSON.stringify({
          assistantId: <your assistant id>
        }),
      });
n
thanks bryant and Vapi Support Bot, I tried this import requests import json url = "https://api.vapi.ai/call/web" headers = { 'Authorization': f'Bearer {YOUR_API_KEY}', 'Content-Type': 'application/json', } data = { 'assistantId': AssistantID, # Replace with the correct assistantId } response = requests.post(url, headers=headers, data=json.dumps(data)) if response.status_code == 200: print('Success:', response.json()) # Print the response JSON else: print(f'Failed: {response.status_code} - {response.text}') # Print error details Failed: 201 - {"id":"","orgId":"f","createdAt":"2024-12-01T07:09:32.003Z","updatedAt":"2024-12-01T07:09:32.003Z","type":"webCall","monitor":{"listenUrl":"wss://phone-call-websocket.aws-us-west-2-backend-production3.vapi.ai/../listen","controlUrl":"https://phone-call-websocket.aws-us-west-2-backend-production3.vapi.ai/../control"},"transport":{"assistantVideoEnabled":false},"webCallUrl":"https://vapi.daily.co/..","status":"queued","assistantId":".."} , I was hoping that when I ran the code, I could start chatting with the agent like with the web interface on the dashboard. I get a link to a web url, there I am able to enter and then the meeting closes quite quickly. Also, the status is qued
Thank you, just following up on the above
Hi can someone please help me resolve this question
s
Hey @NickVapi can you join Vapi Live Tech Support Disocrd OH, we will resolve your ticket there.
n
thanks Shubham, is there a ink to the Live Tech Support Discord OH? I am not seeing it on the channels
s
@NickVapi yeah the discord is bugging, don't why events are disappearing.
@NickVapi 1. **You need to use the Web SDK**: Web-based calls like the ones you’re aiming for require the client-side SDK. The server SDKs are focused on backend tasks, mainly managing phone calls, not real-time web interactions. 2. Your initial error (
window is not defined
) happened because
you tried running client-side code (Web SDK) in a Node.js environment. Client SDKs are built for browsers and depend on browser-specific objects like
window
. 3. **Bryant's Suggestion**: He pointed you to the server SDK, but it doesn't support the interactive web call functionality you're looking for. 4. **API Call Attempt**: The
fetch()
example you tried returned a "queued" call status because you're bypassing the Web SDK, but that approach doesn't handle the session management and WebSocket handshake required for web-based calls. That’s why the session ends abruptly. ### What Next? To stick with web-based interactions, you must use the Web SDK. You’ll need to ensure: 1. Your app is running in the browser. 2. The Web SDK is properly set up and connected to handle WebSocket interactions via the provided URLs (
listenUrl
and
controlUrl
) if required. Let me know how else I can help.
n
thanks Shubham, it turns out my colleague was able to get vapi running with code such as the following on Mac: from vapi_python import Vapi vapi = Vapi(api_key='') vapi.start(assistant_id=AssistantID). However, when I pip install vapi_python in anaconda prompt (Windows 11 Home), the folder is empty, and alternatively I run into issues with daily-python pip install, no matching distribution found. (Python 3.12.6)
s
@NickVapi sadly it's related to window packet management, you can try using window sub system for linux.
n
thanks issue resolved for this Shubham
8 Views