@Vapi I'm having troubles trying to use vapi with react sdk. When I attempt to start the call

vapi.start

- i receive this error:

{
  "data": null,
  "error": {
    "message": "Missing Authorization Header.",
    "error": "Unauthorized",
    "statusCode": 401
  },
  "bodyUsed": false,
  "ok": false,
  "redirected": false,
  "status": 401,
  "statusText": "",
  "type": "cors",
  "url": "https://api.vapi.ai/call/web"
}

@RyGuy It looks like you're encountering an authorization issue when trying to start a call with VAPI. The error message indicates that the Authorization header is missing from your request, which is required for authentication. To resolve this issue, please ensure that you have created an instance of the Vapi class with your Public Key correctly, as shown in the installation instructions. Here's a quick reminder of how to do it:

javascript
import Vapi from "@vapi-ai/web";

// Replace 'your-public-key' with the actual public key from your Vapi Dashboard
const vapi = new Vapi("your-public-key");

Once you have instantiated the Vapi class with the correct public key, you should be able to start a call without encountering the authorization error. If you have already done this and are still facing the issue, please double-check that the public key is correct and has not been revoked or expired. If you're confident that the public key is correct and the issue persists, please ask support for more info on this.

@User Here's the code I'm using:

"use client";

import { useEffect, useState } from "react";

import Vapi from "@vapi-ai/web";
import { Button } from "@/components/button";
import ActiveCallDetail from "@/components/ActiveCallDetail";

const vapi = new Vapi(process.env.VAPI_PUBLIC_KEY);

export default function RoofGPTAgent() {
    const [connecting, setConnecting] = useState(false);
    const [connected, setConnected] = useState(false);

    const [assistantIsSpeaking, setAssistantIsSpeaking] = useState(false);
    const [volumeLevel, setVolumeLevel] = useState(0);

    // hook into Vapi events
    useEffect(() => {
        vapi.on("call-start", () => {
            setConnecting(false);
            setConnected(true);
        });

        vapi.on("call-end", () => {
            setConnecting(false);
            setConnected(false);
        });

        vapi.on("speech-start", () => {
            setAssistantIsSpeaking(true);
        });

        vapi.on("speech-end", () => {
            setAssistantIsSpeaking(false);
        });

        vapi.on("volume-level", (level) => {
            setVolumeLevel(level);
        });

        vapi.on("error", (error) => {
            console?.error("vapi.on error:", error);

            setConnecting(false);
        });

    }, []);

    // call start handler
    const startCallInline = () => {
        setConnecting(true);
        vapi.start("1dcf55ac-93f3-4771-98ba-92d6fe5b894a");
    };
    const endCall = () => {
        vapi.stop();
    };

    return (
        <div>
            {!connected ? (
                <Button onClick={startCallInline}>Speak to RoofGPT</Button>
            ) : (
                <ActiveCallDetail
                    assistantIsSpeaking={assistantIsSpeaking}
                    volumeLevel={volumeLevel}
                    onEndCallClick={endCall}
                />
            )}
        </div>
    );
}