DocsLog in

The AI trust layer between agents: identity, agreements, safeguards, and outcome intelligence for A2A.

Commit 922a6b48

922a6b480fb8Merged

aryaamin <[email protected]> · 2 months ago · 7 files · +1 added · ~6 modified

Browse files at this commit

Description

Add shareable Agent Card previews

Details

Commit
922a6b480fb8
Parent
3f140fdd2001

apps/api/src/agent-card-image.tsaddedView file

1+import sharp from 'sharp';
2+import type { PublicAgentCard } from '../../../packages/protocol/src/index.js';
3+
4+const shorten = (value: string, length: number) =>
5+ value.length > length ? `${value.slice(0, length - 1).trimEnd()}…` : value;
6+
7+const escapeXml = (value: string) =>
8+ value.replace(/[&<>"']/g, (character) => {
9+ const entities: Record<string, string> = {
10+ '&': '&amp;',
11+ '<': '&lt;',
12+ '>': '&gt;',
13+ '"': '&quot;',
14+ "'": '&apos;',
15+ };
16+ return entities[character]!;
17+ });
18+
19+function capabilityChips(capabilities: string[]) {
20+ let x = 64;
21+ return capabilities
22+ .slice(0, 4)
23+ .map((capability) => {
24+ const label = shorten(capability, 25);
25+ const width = Math.min(250, Math.max(96, label.length * 10 + 32));
26+ const chip = `<g transform="translate(${x} 430)">
27+ <rect width="${width}" height="42" rx="8" fill="#ffffff0b" stroke="#ffffff28"/>
28+ <text x="16" y="27" fill="#ddd4d0" font-size="17">${escapeXml(label)}</text>
29+ </g>`;
30+ x += width + 12;
31+ return chip;
32+ })
33+ .join('');
34+}
35+
36+function descriptionLines(value: string) {
37+ const words = value.trim().split(/\s+/);
38+ const lines: string[] = [];
39+ for (const word of words) {
40+ const current = lines.at(-1);
41+ if (!current || (current.length + word.length + 1 > 66 && lines.length < 2)) lines.push(word);
42+ else lines[lines.length - 1] = `${current} ${word}`;
43+ }
44+ if (lines.length > 2) lines.length = 2;
45+ if (lines[1] && lines[1].length > 66) lines[1] = shorten(lines[1], 66);
46+ return lines
47+ .map((line, index) => `<tspan x="220" dy="${index === 0 ? 0 : 34}">${escapeXml(line)}</tspan>`)
48+ .join('');
49+}
50+
51+export async function renderAgentCardImage(card: PublicAgentCard) {
52+ const initials = card.name
53+ .split(/\s+/)
54+ .filter(Boolean)
55+ .slice(0, 2)
56+ .map((part) => part[0]?.toUpperCase())
57+ .join('');
58+ const publicReference = shorten(card.profileUrl ?? card.cardUrl, 88);
59+ const name = shorten(card.name, 42);
60+ const nameSize = name.length > 30 ? 50 : 62;
61+ const description = card.description || 'Public agent identity on OpenClasp';
62+ const svg = `<svg width="1200" height="630" viewBox="0 0 1200 630" xmlns="http://www.w3.org/2000/svg">
63+ <defs>
64+ <linearGradient id="background" x1="0" y1="0" x2="1" y2="1">
65+ <stop offset="0" stop-color="#0c0a0a"/>
66+ <stop offset="0.62" stop-color="#17100e"/>
67+ <stop offset="1" stop-color="#2a120d"/>
68+ </linearGradient>
69+ <radialGradient id="glow" cx="0" cy="0" r="1" gradientTransform="translate(1030 120) rotate(140) scale(430 340)">
70+ <stop stop-color="#f04b2d" stop-opacity="0.2"/>
71+ <stop offset="1" stop-color="#f04b2d" stop-opacity="0"/>
72+ </radialGradient>
73+ </defs>
74+ <rect width="1200" height="630" fill="url(#background)"/>
75+ <rect width="1200" height="630" fill="url(#glow)"/>
76+ <path d="M64 66h18l10 10-10 10H64l-10-10 10-10Z" fill="none" stroke="#f04b2d" stroke-width="4"/>
77+ <text x="108" y="84" fill="#f04b2d" font-family="Inter,Arial,sans-serif" font-size="27" font-weight="700" letter-spacing="-1">OpenClasp</text>
78+ <g transform="translate(936 58)">
79+ <rect width="200" height="42" rx="21" fill="#44d37e0d" stroke="#44d37e88"/>
80+ <text x="20" y="27" fill="#44d37e" font-family="Inter,Arial,sans-serif" font-size="16">✓ Publisher verified</text>
81+ </g>
82+ <g transform="translate(64 165)">
83+ <rect width="122" height="122" rx="28" fill="#f04b2d1a" stroke="#f04b2d80"/>
84+ <text x="61" y="78" text-anchor="middle" fill="#ff8068" font-family="Inter,Arial,sans-serif" font-size="42" font-weight="700">${escapeXml(initials || 'AI')}</text>
85+ </g>
86+ <text x="220" y="176" fill="#a99e99" font-family="Inter,Arial,sans-serif" font-size="18" letter-spacing="2">${escapeXml(shorten(card.framework, 44).toUpperCase())} · AGENT CARD</text>
87+ <text x="220" y="246" fill="#f7f2ef" font-family="Inter,Arial,sans-serif" font-size="${nameSize}" font-weight="700" letter-spacing="-2">${escapeXml(name)}</text>
88+ <text x="220" y="308" fill="#c7bdb8" font-family="Inter,Arial,sans-serif" font-size="24">${descriptionLines(description)}</text>
89+ <g font-family="Inter,Arial,sans-serif">${capabilityChips(card.capabilities)}</g>
90+ <line x1="64" y1="540" x2="1136" y2="540" stroke="#ffffff21"/>
91+ <text x="64" y="582" fill="#8f8580" font-family="Inter,Arial,sans-serif" font-size="16">${escapeXml(publicReference)}</text>
92+ <text x="1136" y="582" text-anchor="end" fill="#8f8580" font-family="Inter,Arial,sans-serif" font-size="16">Capabilities are self-declared</text>
93+ </svg>`;
94+
95+ return sharp(Buffer.from(svg)).png().toBuffer();
96+}