2

Human Review

PreviousNext

Review extracted values against expected output with form fields and JSON diffing.

Human Review provides field-level cards for comparing actual and expected extraction output. Use it when reviewers need to correct values while still being able to inspect the raw JSON diff.

See it composed with the PDF Viewer in the Human Review block.

8 fields
"use client";

import * as React from "react";

import { HumanReviewPanel, type ReviewField } from "@/components/ui/human-review";

const fields: ReviewField[] = [
  {
    key: "vendor_name",
    schema: {

Installation

Glide Data Grid renders overlay editors into a root portal. Add this element as the last child of your app's <body> before using the component:

<div id="portal" className="fixed top-0 left-0 z-[9999]" />
pnpm dlx shadcn@latest add https://ui.extend.ai/r/human-review.json

Useful behaviors

  • Actual and expected values displayed side by side for each schema field.
  • Array values rendered with Glide Data Grid, including drill-down for nested arrays and objects.
  • Input controls selected from the JSON schema property type.
  • Object schema properties rendered as nested cards in the scrollable form.
  • Per-field undo and Set to NULL actions.
  • Form and JSON diff views for the same reviewed output state.

API Reference

HumanReviewPanel

The HumanReviewPanel component renders editable review fields and a JSON diff for the same extraction output.

PropTypeDefaultRequired
fieldsReviewField[]sample fieldsNo
activeFieldKeystring-No
classNamestring-No
onFieldFocus(field: ReviewField) => void-No
theme"light" | "dark""light"No

ReviewField

PropTypeDefaultRequired
keystring-Yes
schemaReviewFieldSchema-Yes
actualJsonValue-Yes
expectedJsonValue-Yes
location{ page: number; area: HighlightArea }-No