Encyclopedia Snippet

When to useCopy Anchor Link

• The user asks who someone was, what something is, or about a place: "Who was Ada Lovelace?", "What is a heat pump?", "Tell me about Lisbon".
• You retrieved a reference article for the topic and can credit it.

When not to useCopy Anchor Link

• You have no source to credit. Answer in text.
• The question is about current events or live data. Use Citations.
• The user needs one fact. Say it in a sentence.
• The user wants a long document. Use an Article.

How the agent should use itCopy Anchor Link

• Take every fact from the retrieved source, quoted or condensed. Never add facts it doesn't state. title, subtitle, summary, facts, image, sections and source are all data-bound.
• Keep the summary to the lead: 900 characters at most, in 1–3 paragraphs separated by a blank line. **bold** and [n] reference markers are allowed.
• Always set source with its name and URL, and license when the source has one. The credit line is always shown.
• Only include facts, image and sections that appear in the source. Up to 8 facts and 6 sections.
• Offer related topics only when they're natural next questions, up to 5.
• Lifecycle: reference text doesn't expire, so don't set expiresAt. If your host shows staleness, set fetchedAt to when the article was retrieved with a long staleAfterMs (days, not minutes).

How it worksCopy Anchor Link

• Layout: on a wide card the summary sits on the left and an infobox on the right, with the image on top of the facts. On a narrow card (it uses a container query, so it follows the card's width, not the window's) they stack: summary, infobox, then the links.
• Inline markup is parsed by a small tokenizer, never injected as HTML. [n] markers show as superscript references to the full article.
• Attribution reads "From source.name · license", with the source name linking to the full article (reported as open). It's always visible, even while streaming. The retrieval date goes into the copied text, not the card.
• Sections of the full article show as one row of links under the summary; related topics follow as chips.
• Copy puts the title, the summary as plain text and the credit line with the link on the clipboard.
• Related topics ask the agent about that topic. A chip that was asked shows a check and isn't sent twice; the others stay usable, and the snippet never locks.
• language sets the lang attribute on the source text, so screen readers pronounce it correctly.

SafetyCopy Anchor Link

• Only http: and https: URLs become links. The image accepts http(s) or an inline data:image (PNG, JPEG, GIF, WebP, AVIF or SVG); anything else is left out, as is an image that fails to load.
• External links open in a new tab with rel="noopener noreferrer nofollow", and images load with referrerPolicy="no-referrer".

InstallationCopy Anchor Link

npx shadcn@latest add https://your-site.com/r/encyclopedia-snippet.json

UsageCopy Anchor Link

import { tool } from "ai"
import { encyclopediaSnippetTool } from "@/components/genui/encyclopedia-snippet.schema"

const tools = {
  [encyclopediaSnippetTool.name]: tool({
    description: encyclopediaSnippetTool.description,
    inputSchema: encyclopediaSnippetTool.inputSchema,
    execute: async () => ({ shown: true }),
  }),
}

The snippet is the whole answer, so the tool returns immediately. Each related-topic tap and each click on the source link calls onResult:

{ action: "explore", topic: "Charles Babbage" } // send as the user's next question
{ action: "open" }                               // the link opened; for analytics

<EncyclopediaSnippet
  {...part.input}
  status={part.state === "input-streaming" ? "streaming" : "ready"}
  result={askedTopics[part.toolCallId]}
  onResult={(r) => {
    if (r.action === "explore") {
      saveAsked(part.toolCallId, r)
      sendMessage({ text: `Tell me about ${r.topic}` })
    }
  }}
/>

With LangGraphCopy Anchor Link

Push it from a graph node with ui.push({ name: "show_encyclopedia", props }, { message }), and render the thread's UI messages with the Renderer.

Restoring from historyCopy Anchor Link

The snippet never locks. Pass the topics the user already explored as result (one result or an array) and those chips render as asked, so they aren't sent again.

SchemaCopy Anchor Link

Host props: status (streaming or ready), onResult, result and className.

SourceCopy Anchor Link