Scrim UI

Structured Extraction TemplatePro

Stream a zod schema into a form: partial objects rendered without flicker or layout shift, per-field confidence and evidence, correction, and honest validation failure.

Next.js 16React 19AI SDK 7zod 4Tailwind v4TypeScript
status: submitted

Extracted

0%
Vendor
Invoice number
Issued
Due
Currency
Subtotal
Tax
Total

Line items

Watch the Total row: rule, then shimmer, then the number — never a smaller number on its way to the real one. Text reveals under a caret because a half-typed name still reads as a name; money does not, because a half-arrived total is wrong rather than partial. Scripted at reading speed; there is no model behind this page.

Every file in it

The full file list, with line counts — nothing is hidden about what you are getting, only the contents are.

19 files, 1,214 lines

Every file below is real and readable once you have Pro — downloaded as a zip, installed with one shadcn command, or read here in the browser. $49 once, for this and every other Pro item.

.env.example

Built on these components

All free, all documented on their own pages. The template is what wires them together.

Running it

  1. Download the zip and unpack it, or install it with the shadcn command above — either way the app lands in its own directory. Then npm install.
  2. Add an AI_GATEWAY_API_KEY to .env.local — one key reaches every model the template uses.
  3. npm run dev. To use a provider directly instead, install its package and change one line in the chat route.