import { LinkPreview } from "@/components/tool-ui/link-preview"; 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](/docs/design-guidelines) for how component roles work. ## Getting Started Run this once from your project root. Render `LinkPreview` in your UI with tool-compatible props.

```tsx import { LinkPreview } from "@/components/tool-ui/link-preview"; export function Example() { return ( ); } ```

Registration tells assistant-ui which component to render when a tool returns link metadata. Without it, tool results appear as raw JSON. ```tsx import { type Toolkit } from "@assistant-ui/react"; import { LinkPreview } from "@/components/tool-ui/link-preview"; import { safeParseSerializableLinkPreview } from "@/components/tool-ui/link-preview/schema"; export const toolkit: Toolkit = { showLinkPreview: { type: "backend", render: ({ result }) => { const parsed = safeParseSerializableLinkPreview(result); if (!parsed) { return null; } return ; }, }, }; ``` ## Key Features Title, description, and image pulled from Open Graph tags Site favicon next to the domain name Auto, 1:1, 4:3, 16:9, and 9:16 image crops Compose action buttons below the preview card ## Props Use [`ToolUI.LocalActions`](/docs/actions) to compose external actions next to `LinkPreview`. ## Related - [Citation](/docs/citation): both surface external references, but Citation is optimized for source attribution with snippets - [Image](/docs/image): for when the link target is primarily visual content

Tool UI

A brief history of computing hardware

A brief history of computing hardware