How to Connect React to an Open-Source LLM
One of the simplest approaches is to run an open-source model through a local or self-hosted inference server.
Tools such as Ollama make this easier because they expose an API that applications can communicate with. Ollama also provides compatibility with parts of the OpenAI API, which means developers familiar with OpenAI-style requests can reuse a similar programming pattern.
For example, your React application might send a request to your own backend:
const response = await fetch(“/api/chat”, {
method: “POST”,
headers: {
“Content-Type”: “application/json”,
},
body: JSON.stringify({
message: userMessage,
}),
});
const data = await response.json();
setAnswer(data.answer);
The important part is what happens behind /api/chat.
Your backend receives the request, sends it to the selected model, and returns the generated response to React.
That separation is important. You generally don’t want to expose model infrastructure, credentials, or sensitive application logic directly inside client-side JavaScript.
How React Communicates With a Local LLM
For development, you can run an LLM locally and have your application communicate with it through its HTTP API.
With Ollama, for example, an OpenAI-compatible client can be configured to use a local endpoint rather than OpenAI’s servers. Its documentation currently shows the /v1/chat/completions endpoint and support for features including streaming and JSON responses.
The workflow becomes straightforward:
User enters a question in React.
- React sends the request to your backend.
- The backend forwards the prompt to the local or hosted model.
- The model generates a response.
- Your backend returns the result.
- React updates the interface.
From the user’s perspective, it simply feels like another feature of the application.
That is exactly what you want.