Skip to content
AI frontend advisor

About the advisor

What the advisor does, how it produces an answer, what the site is built from, and where the data stops.

What this is

An AI advisor that helps you pick a front-end UI library. It answers from one controlled comparison: eight UI libraries each built the same tickets screen, and every build was measured the same way for bundle size, accessibility defaults, ergonomics and first render.

It names no overall winner and it ranks nothing. When you describe your project it can order a short list of two or three libraries against the needs you state, and it says which need decided the order.

How an answer is made

Your question goes to a serverless function, which calls OpenAI with a system prompt carrying the write-up, the screen spec, every build’s result file and a short note per build about a problem it hit. The model key never reaches your browser, and the model is given nothing else to read.

Every figure an answer quotes has to appear in those files. A test fails the build if the notes hold a figure the results and the write-up do not, and a fixed set of questions is run against the live model by hand, where a reply fails if it invents a figure, names a winner, lists too many picks, or skips saying so when a question goes past the data.

What it is built from

React, TypeScript, Vite, Tailwind CSS and shadcn/ui, rendered to static HTML at build time. Nothing on these pages hydrates. The chat drawer is the one piece of the site that ships React to your browser, and it downloads only when you reach for it.

The eight screens under this site are the real applications, built and served as they were measured. The comparison itself, the fixture, the criteria and the measuring scripts live in the repository.

The tickets on every screen are made up: 240 rows from a seeded generator, the same rows for every library. Nothing you type into a screen is saved, and the next visitor sees the same data you do.

What the data does not cover

The comparison is one screen, built once per library by one worker, at one point in time. It says nothing about a library outside the eight, about a framework other than React and Vue, or about server rendering.

The accessibility checks are automated, so they cover what a machine can see. No manual screen reader pass was done, and colour contrast is not checked in that environment. First render is a median of Lighthouse runs from one machine, so read the figures against each other rather than as absolute numbers.

Read the evidence yourself, or ask the advisor about your project.