vapi.stop() does not seem to work, same for vapi.send(...)

[git-moeen]

Even though I can successfully start a call using vapi.start when I invoke vapi.stop nothing happens. I even tried vapi.send to ask the agent to end the call, but that function doesn't seem to work either. Tried 2.1.4 and 2.1.3 versions.

Am i missing something?

[markgamall]

Did you fix it ? I am facing the same issue

[nikhilro]

this most likely happens if there is a react bug in the code where vapi.stop is happening on different instance than vapi.start. work with claude

[robechun]

I ran into the same issue—I'm going to assume that you're using a custom hook called useVapi() or something similar (?)

In my case, I wrote the hook in the following way:

... other setup

export const useVapi = () => {
  const vapiClient = new Vapi(vapiPublicKey, undefined, {
    alwaysIncludeMicInPermissionPrompt: true,
  });

  const [isConnecting, setIsConnecting] = useState(false);
  const [isConnected, setIsConnected] = useState(false);
  const [isEndingCall, setIsEndingCall] = useState(false);

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

  // Hook into vapi events
  useEffect(() => {
    vapiClient.on("call-start", () => {
      setIsConnecting(false);
      setIsConnected(true);
    });

    vapiClient.on("call-end", () => {
      setIsConnecting(false);
      setIsConnected(false);
      setIsEndingCall(false);
    });

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

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

    vapiClient.on('volume-level', (level) => {
      setVolumeLevel(level);
    });

    vapiClient.on("error", (error) => {
      console.error(error);

      setIsConnecting(false);
    });

    return () => {
      vapiClient.stop();
    };
  }, []);

  // Start call
  const startCall = () => {
    setIsConnecting(true);
    vapiClient.start(vapiAssistantId);
  };

  // End call
  const endCall = () => {
    setIsEndingCall(true);
    vapiClient.stop();
  };

  return {
    isConnecting,
    isConnected,
    isEndingCall,
    assistantIsSpeaking,
    volumeLevel,
    startCall,
    endCall,
  };
};

The issue was that every time the hook runs (which can happen on any re-render of the component using this hook), a new instance of Vapi was being created.

Two solutions:

1. Move new Vapi() outside of the hook
2. Use useMemo.

In my case, I ended up using useMemo(), so it looks something like this:

... other setup

export const useVapi = () => {
  const vapiClient = useMemo(() => new Vapi(vapiPublicKey, undefined, {
    alwaysIncludeMicInPermissionPrompt: true,
  }), []);

... rest is the same