Integrate Open-Source LLMs Into Existing React Applications: How to Run an LLM Directly Inside React
There is another interesting option: skip the backend and run the model directly in the browser.
Hugging Face’s Transformers.js allows compatible machine-learning models to run in the browser using ONNX Runtime. It supports tasks including text generation, classification, summarization, translation, and other machine-learning workloads.
This can be attractive when privacy or offline functionality matters.
A simplified setup begins with:
npm install @huggingface/transformers
You can then load a supported model through JavaScript.
Transformers.js can use the CPU through WebAssembly and can also use WebGPU when supported by the browser.
However, there is an important catch.
Browser-based AI can be resource-intensive.
Your users’ devices are doing the computation, and model files can be large. Hugging Face’s React tutorial specifically recommends moving computationally intensive inference into a Web Worker so that model processing does not block the main UI thread.
That is one of those implementation details that can make the difference between an AI feature that feels smooth and one that makes your application feel frozen.
How to Use Web Workers With React AI Features
If your model runs inside the browser, avoid performing heavy inference directly inside the React component.
Instead, create a Web Worker responsible for model loading and inference.
Your architecture becomes:
React Component → Web Worker → Model → Web Worker → React Component
The React interface remains responsible for things such as:
- User input
- Loading indicators
- Error messages
- Conversation history
- Displaying generated text
The worker handles the computational work.
This approach also makes it easier to load the model only when the user actually needs it. Hugging Face’s own React example uses a worker and lazy model initialization rather than downloading and loading the model immediately when the application opens.
From an editorial perspective, this is one of the most sensible architectural choices when experimenting with browser-based LLMs: don’t make every visitor pay the performance cost of an AI feature they may never use.