// 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: 'unfurl' });
const viewport = document.querySelector('aparte-chat-viewport');
viewport.appendMessage({ id: 'u1', role: 'user', content: 'What’s on this page? apartejs.dev/guides/cards', timestamp: Date.now() });
viewport.appendMessage({ id: 'a1', role: 'assistant', timestamp: Date.now(), segments: [{
id: 's1', type: 'tool_call', status: 'resolved',
toolCall: { id: 'c-s1', name: 'unfurl', input: { url: 'https://apartejs.dev/guides/cards/' } },
structuredResult: {
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.',
},
}] });