What You Will Build: ShopLens

A product page for the Kestrel X2 wireless headphones has 214 reviews and an average of 4.1 stars. Almost nobody reads 214 reviews. Most shoppers read the first three, glance at the stars, and either buy or leave. The useful information, such as "the battery is great but the ear cushions get hot after two hours", is buried on page nine.

In this course you build ShopLens, a review-insights panel that sits on that product page and tells a shopper, in about ten seconds, what the buyers actually think. It is a small product, but it contains almost every problem you will meet when you put a model behind a real UI: output that has the wrong shape, answers that take seconds, text that is fluent but false, and a bill that grows with every page view.

This lesson shows you the finished panel first, so you always know where each later lesson fits.

The panel, feature by feature

Here is the finished panel, drawn as text:

+------------------------------------------------------------+| What buyers say                                    [Stop]  || Most buyers praise the battery, which lasts a full work    || week for many [r1042]. Comfort is mixed: several find the  || cushions warm after two hours [r0988] [r1107]. A few ...   ||                                                            || Compare with: [ Wren Air  v ]                              ||  Aspect        | Kestrel X2        | Wren Air              ||  Battery       | 20+ hours, praised| 14 hours, complaints  ||  Comfort       | warm after 2 h    | light, praised        ||                                                            || Reviews                                                    ||  ***** "Best battery I have owned"            [Positive]   ||  ***   "Great sound, hot ears"                [Mixed]      |+------------------------------------------------------------+

ShopLens has three features, and you build them in this order:

1. The sentiment badge. Each review gets a small label: Positive, Mixed or Negative. The output is tiny, the calls are many, so it uses a small, fast model and classifies a whole page of 20 reviews in one call.
2. The "what buyers say" summary. Three or four sentences that stream in word by word, with a Stop button, a hard length limit and citations back to real reviews.
3. Compare two products. The shopper picks a second product and gets a table of up to six aspects, such as battery and comfort, with what buyers say about each product.

Throughout the course we use two example prices: a small, fast model at $1 per million input tokens and $5 per million output tokens, and a larger model at $5 and $25. These match real models at the time of writing; check your provider's price page before you budget. A token is roughly three quarters of an English word.

Those costs come from simple arithmetic. The summary sends the 40 most helpful reviews, about 3,600 input tokens: 3,600 × $5 / 1,000,000 = $0.018. It writes about 110 output tokens: 110 × $25 / 1,000,000 = $0.00275. Together that is about two cents, which is cheap once and expensive fifty thousand times a day. Section 5 deals with that.

The path of one request

Every ShopLens feature follows the same path. Learn it once and the three features become variations.

1. Component — <BuyerSummary> mounts and calls the hook useStreamingSummary("p-310").
2. Typed client — the hook calls streamText("/api/summary", ...) from src/api/client.ts, passing an AbortController signal.
3. Backend-for-frontend (BFF) — an Express route validates the request, loads reviews for p-310 from the database, and builds the prompt.
4. Model — the BFF calls the model with its secret key and a token limit.
5. Back through the BFF — the BFF checks the output (length, shape, citations) and streams or returns it.
6. State and render — the hook updates a small state machine and the component renders the right state.

Notice what the browser sends: a product id. It never sends review text, a prompt or a key. That single decision, explained in the fourth lesson of this section, removes a whole class of security and cost bugs.

What stays the same, and what changes

You do not need a new framework. ShopLens is plain React 18, TypeScript, fetch, and Zod for runtime validation. The server is a small Express app. What changes is the set of assumptions your code can make about the data it receives.

The course map

Each lesson adds one piece. The file names stay the same from lesson to lesson: server/llm.ts, server/routes/summary.ts, shared/schemas.ts, src/api/client.ts, src/hooks/useStreamingSummary.ts and so on. By the end of section 3 the whole panel runs; sections 4 and 5 make it something you can ship.