Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

AI blocks

Pro

Document Q&A AI Block for Ark UI

A document question-and-answer window with a six-page lease summary beside the chat: each answer ends with page badges that turn the viewer to that page and mark the sentences it quotes.

Framework
UI library

Preview

Preview width

Installation

Part of Pro
Pro unlocks the code and one-line install of every Pro button and text effect, plus the MCP for your AI editor.
Get ProSign in
Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

Overview

Let people ask a document and see the passage, with this document Q&A for React with Ark UI. A hairline frame with a plus mark on each corner holds a window of fixed height for Folioquery, a document reader: a typed six-page lease summary for the flats at Fieldstone House at the start, the conversation at the end. The viewer shows one page at a time in a scroll region, with Previous and Next buttons and "Page 3 of 6" under it. Every answer ends with page badges (p. 3): pressing one turns the viewer to that page and marks the sentences the answer quotes, scrolling the viewer and nothing else. Three sample questions sit above the composer. Messages are Message and Bubble rows with a Typing Indicator Text, the composer is a Textarea with the Shine Button, the only colored control, and Send turns into Stop while a reply arrives. Guides draw the frame; everything moves with CSS only. For contract readers, manuals and any assistant that answers from one document.

FAQ

What stays in the page, and how do I make it real?

Everything. The lease summary is typed in the file, and a reply is picked by words in your question ("deposit", "notice", "pets"). Nothing is uploaded, read or sent, and no model runs. To wire it for real, send the question and the document text to your model where the code says so, and have it return the sentences it quoted as a page and a range; the badges, the jump and the mark are all built from that Cite shape.

How do I put in my own document?

Edit RAW_PAGES: each page is a title and a list of paragraphs, each paragraph a list of sentences. Sentence numbers are counted from the top of the page, and a cite names a page and the first and last sentence it quotes. Pages of any length work: the viewer scrolls.

What exactly does a page badge do?

It sets the viewer's page, marks the quoted sentences with a solid tint and scrolls the viewer so the first one sits near the top. The page itself does not move. The status line says which page is showing and how many sentences are marked, and on a phone the switch moves to the Document view.

What does Stop do, and what about reduced motion?

While a reply arrives, the Send button is replaced by an outline Stop button in the same place. Stop keeps the words that arrived, marks the turn "Stopped" and adds no page badges. With reduced motion the typing line still shows for its short wait and the whole reply lands at once.

Does it work in a right-to-left language?

Yes. The viewer sits at the start and the chat at the end in either direction, the send arrow and the page arrows mirror, and amounts, dates and page numbers keep their own order inside the text.

How does it look on a phone?

The window keeps its height. A Document and Chat switch in the top bar shows one side at a time, the composer stays with the chat, and pressing a page badge switches to the document so the marked sentences are what you see.

All 100 ai blocks