wikipedia.org
A brief history of computing hardware
Mechanical calculators, vacuum tubes, transistors, microprocessors — and what came next.
Link Preview
Rich link previews with Open Graph data.
<LinkPreview id="link-preview-image" href="https://en.wikipedia.org/wiki/History_of_computing_hardware" title="A brief history of computing hardware" description="Mechanical calculators, vacuum tubes, transistors, microprocessors — and what came next." image="https://images.unsplash.com/photo-1562408590-e32931084e23?auto=format&fit=crop&q=80&w=2046" domain="wikipedia.org" ratio="16:9"/>Every shared link is a black box until someone clicks it. The user has no idea if the URL leads to documentation, a blog post, or a 404. LinkPreview renders fetched URLs as clickable cards with the page title, description, image, and favicon, the same kind of rich embed you see in Slack or iMessage. Without it, the user sees a bare href or a blob of Open Graph JSON.
Role: Information. For displaying data without user input. See Design Guidelines for how component roles work.
Getting Started
Run this once from your project root.
npx shadcn@latest add @tool-ui/link-previewRender LinkPreview in your UI with tool-compatible props.
import { LinkPreview } from "@/components/tool-ui/link-preview";export function Example() { return ( <LinkPreview id="link-preview-example" href="https://react.dev/reference/rsc/server-components" title="React Server Components" description="Server Components are a new type of Component that renders ahead of time." image="https://images.unsplash.com/photo-1633356122544-f134324a6cee" domain="react.dev" ratio="16:9" /> );}Registration tells assistant-ui which component to render when a tool returns link metadata. Without it, tool results appear as raw JSON.
import { type Toolkit } from "@assistant-ui/react";import { LinkPreview } from "@/components/tool-ui/link-preview";import { createResultToolRenderer } from "@/components/tool-ui/shared";export const toolkit: Toolkit = { showLinkPreview: { type: "backend", render: createResultToolRenderer({ render: (parsedResult) => <LinkPreview {...parsedResult} />, }), },};Key Features
Open Graph metadata
Title, description, and image pulled from Open Graph tags
Domain with favicon
Site favicon next to the domain name
Flexible aspect ratios
Auto, 1:1, 4:3, 16:9, and 9:16 image crops
External actions
Compose action buttons below the preview card
Props
Prop
Type
Use ToolUI.LocalActions to compose external actions next to LinkPreview.