Bounding Box Citations

Forms 50

About

An extraction citation panel connected to source bounding boxes and editable values. Review extracted fields in a form or JSON diff view, hover to highlight source locations, and edit values inline.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Bounding Box Citations to your project and fits it to your theme.

Code

How Bounding Box Citations is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

"use client";

import { HumanReviewPanel } from "@/components/ui/bounding-box-citations";

export default function Default() {
  return (
    <div className="mx-auto flex w-full max-w-2xl items-center justify-center p-6">
      <div className="w-full overflow-hidden rounded-lg border bg-background shadow-sm">
        <HumanReviewPanel className="!h-[680px]" />
      </div>
    </div>
  );
}