I want to download VAPI calls and transcripts through react, Currently I don't find any resource available. Pls help

Could you please provide additional context, your usage/purpose, and use case example? This will help me better understand your situation and assist you in finding solutions that align with your requirements.

Sure i'm building a platform that utilizes VAPI to make calls and have a conversation and I want to allow the user to download call recording within my web app itself

@ishaan p. Please note that this is not considered VAPI-related work. VAPI stores call artifacts including recordings and transcripts in the Artifact interface. To enable recordings, you need to configure your assistant's artifactPlan with: - recordingEnabled: true - For audio recordings - transcriptPlan.enabled: true - For transcripts Here's how you can implement downloading functionality: a) Create a component to handle downloads:

ts
const CallDownloader = ({ callId }) => {
  const downloadRecording = async () => {
    // Fetch call data to get artifact URLs
    const call = await vapiClient.calls.get(callId);
    
    if (call.artifact?.recordingUrl) {
      // Trigger browser download
      window.open(call.artifact.recordingUrl);
    }
  };

  const downloadTranscript = async () => {
    const call = await vapiClient.calls.get(callId);
    
    if (call.artifact?.transcript) {
      // Create and trigger download of transcript file
      const blob = new Blob([call.artifact.transcript], { type: 'text/plain' });
      const url = window.URL.createObjectURL(blob);
      const a = document.createElement('a');
      a.href = url;
      a.download = `transcript-${callId}.txt`;
      document.body.appendChild(a);
      a.click();
      window.URL.revokeObjectURL(url);
      document.body.removeChild(a);
    }
  };

  return (
    <div>
      <button onClick={downloadRecording}>Download Recording</button>
      <button onClick={downloadTranscript}>Download Transcript</button>
    </div>
  );
};

b) Integration with VAPI Events

ts
  useEffect(() => {
    const handleMessage = (message) => {
      if (message.type === 'transcript' && message.transcriptType === 'final') {
        const { type, ...payload } = message;
        setMessages((prevMessages) => [
          ...prevMessages,
          { role: payload.role, content: payload.transcript },
        ]);
      }
    };

    const handleCallEnd = () => {
      setMessages([]);
    };

    vapi.on('message', handleMessage);
    vapi.on('call-end', handleCallEnd);

    // Cleanup function to remove the listeners
    return () => {
      vapi.off('message', handleMessage);
      vapi.off('call-end', handleCallEnd);
    };
  }, [vapi]);

With this you can also listen for call end events to automatically trigger downloads.

Apologies for inconvenience and thanks for helping me out. Kudos!

Marking this ticket as solved.