Best approach for bidirectional communication between React and Streamlit

[Vincent6]

I’m a junior developer working on a project where my colleague is using Streamlit to interact with a customized Llama model. I’m building a React front-end to allow users to query the model, but I’m having difficulty setting up bidirectional communication between React and Streamlit.

Here’s what I’ve tried so far (running on a local environment):

1.) Using a Middle Layer (Preferred Solution):

I set up a FastAPI server as a middle layer between React and Streamlit:
React → FastAPI: React sends user queries to FastAPI via POST requests.
FastAPI → Streamlit: FastAPI forwards the queries to Streamlit via the requests library.
Streamlit → FastAPI → React: Streamlit responds, and FastAPI relays the response back to React.
The Streamlit server includes an embedded FastAPI app that exposes a /query endpoint.
Despite configuring CORS and headers (to the best of my knowledge), I ran into consistent 403 Forbidden errors when FastAPI tried to make POST requests to Streamlit.

2.) Streamlit Components:

I used the streamlit-component-lib to create a custom React component. Despite React sending data using Streamlit.setComponentValue, the Streamlit app did not receive or process the data.

I’m not seeking specific debugging help but rather guidance on the best way to approach bidirectional communication between React and Streamlit from scratch. Is using a middle layer like FastAPI or Flask viable, and if so how specifically would this need to be set up, or is there a better pattern recommended by Streamlit for this use case?

[mathcatsand]

If you need to build custom frontend components, Streamlit Components should be the way to go. May I ask what custom UI you are building for Streamlit? (You might have some easier options with existing custom components, either to use as is, or to modify.)

Streamlit Components can definitely be bidirectional. I’d point you to the docs or component templates if you don’t want to specifically discuss your own component.

[Vincent6]

Thanks for the response!

To clarify, my project requires a React front-end and middle layer back-end for a few key reasons, including user authentication, which Streamlit doesn’t natively support. The React front-end will also allow us to extend our app’s functionality and UI beyond Streamlit’s built-in capabilities. The interaction we’re aiming for is:

The React front-end sends user queries to a Streamlit app (where a Llama model runs) and displays the model’s responses in our chatbot interface. The React app needs to send queries and receive responses dynamically which is why the bidirectional communication is needed.

With Streamlit components, my understanding is that they only extend Streamlit’s UI within its framework, but I’ve been trying to integrate a standalone React front-end in a way that enables seamless bidirectional communication with Streamlit. The best solution to me seems like using a middle layer (like Flask/FastAPI), would that be possible and how would I go about that?

[mathcatsand]

For authentication, it’s coming really soon. This is the PR: Auth feature by kajarenc · Pull Request #8786 · streamlit/streamlit · GitHub

As for your described architecture, I’m a little confused. Streamlit as a product is a front-end. Streamlit commands are commands to generate a displayed page for users. I’m not sure what role Streamlit would play if you want a 100% custom front-end.