Display

LinkCard

Rich link preview with Open Graph metadata, favicon, domain, and optional AI reasoning. Turns a bare URL into a visual, trustworthy reference.

State

react.dev·Dec 2024

React Server Components

Server Components are a new type of Component that renders ahead of time, before bundling, in an environment separate from your client app or SSR server.

React Docs· current

Installation

Terminal

npx taw-ui add link-card

This copies the component source and schema into your project. You own the code — customize anything.

Usage

server — define tool

import { tool } from "ai"
import { LinkCardSchema } from "@/components/taw/link-card"

export const showLink = tool({
  description: "Show a rich link preview",
  parameters: z.object({ url: z.string().url() }),
  outputSchema: LinkCardSchema,
  execute: async ({ url }) => {
    const og = await fetchOpenGraph(url)
    return {
      id: slugify(url),
      url,
      title: og.title,
      description: og.description,
      image: og.image,
      domain: new URL(url).hostname,
      favicon: og.favicon,
      reason: "Relevant to your question",
      confidence: 0.94,
      source: { label: "Web Search" },
    }
  },
})

client — render

import { LinkCard } from "@/components/taw/link-card"
import type { TawToolPart } from "taw-ui"

function ToolOutput({ part }: { part: TawToolPart }) {
  // Handles loading, error, and success states
  return <LinkCard part={part} />
}

Props

Field	Type	Description
part*	TawToolPart	Tool call lifecycle state — handles loading, error, and success
animate	boolean	Enable entrance animations and image hover (default: true)
className	string	Additional CSS classes on the wrapper

Schema

LinkCardSchema

Field	Type	Description
id*	string	Stable identifier
url*	string	Target URL
title*	string	Page title
description	string	Meta description or excerpt
image	string	Open Graph image URL
favicon	string	Site favicon URL
domain	string	Display domain (auto-extracted if omitted)
reason	string	Why the AI is sharing this link
publishedAt	string	Publication date
confidence	number (0-1)	AI confidence this link is relevant
caveat	string	Uncertainty note
source	Source	Data provenance (label + freshness)

Features

OG metadata

Title, description, and image from Open Graph tags

Favicon + domain

Visual trust signal with site identity

AI reasoning

Optional callout explaining why this link matters

Confidence scoring

Visual indicator of link relevance

Auto domain extraction

Parses domain from URL if not provided

Hover interaction

Border glow + image scale on hover

InsightCardStructured AI analysis

KpiCardAnimated metric display

ConceptsLifecycle, receipts, actions