// In an app: import { setupLinkCard } from '@aparte/plugin-cards/link';
const { setupLinkCard } = window.apartePlugins.cards.link;
// A card shows only http(s) pictures: these are served by this site, which its image
// policy lets load. Without it they wait behind "Show images", as any picture would.
window.aparte.aparteGlobalConfig.setImagePolicy(['self']);
const picture = (name) => new URL('/demo-pictures/' + name + '.svg', location.href).href;
setupLinkCard({ tool: 'web_search', variant: 'compact' });
document.querySelector('aparte-chat-bubble').setSegments([{
id: 's1', type: 'tool_call', status: 'resolved',
toolCall: { id: 'c-s1', name: 'web_search', input: { query: 'rich cards in a chat' } },
structuredResult: {
title: 'Rich cards in a chat',
links: [
{ url: 'https://apartejs.dev/guides/cards/', siteName: 'aparté', type: 'article', image: picture('share-guide'),
title: 'Show a tool’s result as a card', description: 'Draw what a tool returns as a rich card, in variants, from your tool’s own fields.' },
{ url: 'https://github.com/apartejs/apartejs', siteName: 'GitHub', type: 'repo', image: picture('share-repo'),
title: 'apartejs/apartejs', description: 'AI chat and agent UI components, built as Web Components, with the runtime inside.' },
{ url: 'https://talks.example.org/2026/cards-not-rows', type: 'video', image: picture('share-talk'), author: 'R. Okoye',
title: 'Cards, not rows: drawing tool results', description: 'Twenty minutes on what a person reads when an agent calls a tool.',
publishedAt: Date.now() - 12 * 86400000 },
{ url: 'https://journal.example.org/notes/read-the-weather', type: 'article', image: picture('coast'), author: 'C. Marchetti',
title: 'Read the weather, not the JSON', description: 'Why the first card every chat ships is the forecast.',
publishedAt: Date.now() - 3 * 86400000 },
],
},
}]);