React Structured Extraction Viewer
The single most common enterprise AI task, done honestly. Never show an extracted value without showing where it came from and how sure the model is — so a reviewer can check the 8% that is wrong instead of trusting the 92% blindly.
Package: PG-TO220-3 · AEC-Q101 qualified · Tj = 175 °C
Electrical Characteristics
Extracted fields
7Hover a field to highlight where it was read from. Low-confidence fields (Id, Package) are flagged red for review.
Installation
Props
| Prop | Type | Description |
|---|---|---|
| documentTitle | string | Label above the document |
| fields | ExtractedField[] | { id, label, value, confidence, region } |
| children | React.ReactNode | The document visual; regions are % of its box |
| reviewThreshold | number | Confidence below this is flagged (default 0.75) |
Provenance, per field
Every extracted field links to the exact region of the source it was read from: hover a field and the matching box lights up on the document, coloured by confidence. That linkage is the whole point — extraction without provenance is just a spreadsheet you have to re-check by hand, while extraction with it lets a reviewer glance from value to source and move on. Regions are percentages of the document box, so the overlay stays aligned at any width and works over a rendered page, an image, or a PDF canvas.
Flag what to check, don't hide it
Fields below the review threshold turn red, both in the list and on the document, and a footer counts how many need a human. This is the honest inversion of a typical extraction UI: instead of presenting every field with equal confidence and hoping the low ones are right, it draws the eye straight to the values worth verifying — the part number read at 63% next to the voltage read at 96%. The live component is language-neutral; wire fields to your extractor and region to its bounding boxes.
New components every week
Get the week's new Kelvin UI components and templates in one short email. No spam, unsubscribe anytime.