npx tool-agent "integrate the link preview component for rich link previews with Open Graph data"npx shadcn@latest add @tool-ui/link-previewEvery 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.
Run this once from your project root.
npx tool-agent "integrate the link preview component for rich link previews with Open Graph data"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 { 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 <LinkPreview {...parsed} />; }, },};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
Prop
Type
Use ToolUI.LocalActions to compose external actions next to LinkPreview.