Document Reference

AI chats

About

A source card that preserves document identity, location, metadata, and the cited excerpt.

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

Code

How Document Reference is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import DocumentReference from '@/components/ui/document-reference'

export default function Demo() {
  return (
    <DocumentReference
      className="w-full max-w-lg"
      excerpt="A permission request should expose capability, scope, duration, and the exact action that proceeds after consent."
      location="Page 14"
      metadata="Updated Sep 2026"
      title="Agent interface design guide.pdf"
    />
  )
}