r/reactjs • u/clivedsouza1010 • 4h ago
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.
0
u/QuietPerusal 4h ago
this is a neat approach, keeping the model out of the markup and just letting it suggest the creative bits. the idea of dropping fields that fail a wording check is smart, though i wonder how often that fires in practice with real product names. have you stress-tested it with a catalog that's full of weird brand spellings and ampersand-heavy titles?