Report output

A long answer laid out as a report: sections with a contents list, figures and numbered sources, with a short version that opens into the full one.

Loading preview…

Install

  1. 1

    Run this command in your Tailwind CSS project. It adds components/ai/report-output-document.tsx and installs its dependencies.

    $ npx shadcn@latest add https://gradientdeck.com/ai-components/r/report-output-document.json

Usage & API

Example

report-output-document.tsx
import { ResearchReport } from "@/components/ai/report-output-document"

<ResearchReport
  report={report}
  shareUrl="…"
  onExport={() => {}}
/>

Props ResearchReport

PropType & descriptionRequired
reportReportRequired
shareUrlstringLink shown in the share popover.Required
onExport(format: ExportFormat) => Promise<void>Resolve when the file is ready. The toolbar shows progress while it's pending.Required
onBack() => voidOptional
backLabelstringText for the back button, e.g. the chat title.Optional

Dependencies

  • React
  • Tailwind CSS
  • motion
  • lucide-react
Implementation notes

The full report is a window with a back button, the label Research report, and the question in the toolbar. Copy as Markdown flips to Copied. Export opens a menu for PDF, Word document and Markdown, then shows Preparing and a downloaded filename while the promise you passed is pending. Share opens a link field, a Copy button, and a switch for anyone at the workspace versus only you. A contents list on the left, and a sticky contents menu on a narrow screen, jumps to Summary, each numbered section and Sources. A bar under the toolbar and a minutes-left line follow the scroll. The preview is a Frankfurt-region report with a summary box, six sections, a chart, a table and eight sources.

Choosing a layout

Use the document when the answer is something a person will read for several minutes, scroll, export or hand to someone who should not see the chat. Use the brief when the same material has to stay inside a thread, with a short version first and the sections one click away. Both assume you already have sections and numbered sources.

A single quoted passage beside the answer is the source viewer. A queue of agent runs is the agent inbox. If the model only returned a paragraph, neither variant earns its chrome. The contents list, the confidence marks and the export menu are for a report that already has a shape.

What does Export actually download?

The menu offers PDF, a Word document and Markdown, and the toolbar shows progress until the onExport promise resolves. The component does not build the file. Copy as Markdown does write text, from the report already on the page, and puts it on the clipboard.

Do the confidence chips mean the model scored the point?

They show the confidence and the basis you put on each point of the brief. The document variant has no confidence chips. It has a summary, sections and numbered citations instead.