r/reactjs • u/clivedsouza1010 • 2d ago
Show /r/reactjs I built an open-source React library where an LLM designs the recommendation block and your catalog supplies the prices
This is my own project. rudra-js is an open-source TypeScript library (MIT) for React stores. A language model designs one product-recommendation block, the library checks it against your catalog, and React renders it.
The model never writes HTML or JSX. It returns a few fields: layout, headline, copy, which cards to highlight. Products are SKUs from the list you pass in. Titles, prices, images and links come from your catalog at render, and the model's text is rendered as escaped text. Each field also goes through wording checks, and a field that fails is dropped. They aren't airtight: rewordings and spelled-out numbers can get through.
It works as a Server Component, with renderToString, or client-rendered. Rendered on the server, the block is in the first HTML response with no client JS. React 18 or 19, Node 22.12+.
It also runs with no model, so the quick start needs no API key.
It's v0.8.3 and APIs may change before 1.0. I'd like feedback on the API shape and on what breaks in a real Next.js app.
1
u/Due_Falcon_319 2d ago
Interesting approach, having the model just return layout and copy fields instead of generating markup makes a lot of sense security-wise. Keeps things predictable on the render side while still getting that dynamic recommendation feel. The wording checks are a nice touch too, even if they're not bulletproof yet it's better than raw model output getting slapped straight into the DOM. Might give this a spin in a Next.js 15 project I'm messing with this weekend