Passing File Identifier from React App to Vapi Bot Assistant

Frontend
1

I’m building an application with these components:

  • Backend API (FastAPI) that processes file uploads and returns a unique file identifier
  • Vapi conversational assistant that uses uploaded files as its knowledge base
  • React web application for the user interface

Current situation: My file upload workflow works perfectly. Users can upload files through the React frontend, and my FastAPI server successfully processes them and sends back a file identifier. The problem is I can’t figure out how to pass this identifier to my Vapi assistant so it can access the uploaded file.

I’ve been going through the official documentation but haven’t found a clear example of how to send file identifiers from a React application to a Vapi assistant. Has anyone successfully implemented this type of file sharing between React and Vapi? What’s the proper way to pass the file ID to make it available as a knowledge source for the assistant?

2

have you tried vapi’s message variables or context passing? when you say “file identifier” - are you storing the actual file content where vapi can access it, or just passing a reference? the assistant might need the actual file content, not just an id.

3

You need to configure the assistant dynamically when initializing your Vapi client. Once your FastAPI backend returns the file identifier, update the assistant’s knowledge base config before starting the conversation. In your React component, add the file ID to the knowledge base array using the Vapi SDK’s assistant configuration. I encountered a similar issue while building a document analysis tool, and found that updating knowledge sources during initialization is much more effective than modifying them mid-conversation. Ensure your FastAPI endpoint returns the file ID in a format compatible with Vapi’s expectations for knowledge base references.

4

check if your vapi assistant config supports dynamic knowledge updates through api calls. you might need to use vapi’s server-side endpoints to attach the file after uploading - don’t try passing it directly from react. most devs upload to vapi storage first, then just ref the file id.