Components
Link card
Title, description, and href as one navigation affordance. Component key `link-card`.
Link card
link-card is a single navigation surface: title, optional description, required portable href, optional CTA label. Emits open with the URL.
Live preview
Link card
Title, description, and href as a single navigation affordance.
link-cardDemos use docs host CSS. Package primitives are intentionally unstyled so your product theme owns the look.
When to use
- Deep-link to docs, tickets, dashboards, or external resources
- When one destination is enough (not a citation list)
Prefer something else when
- Multiple citations →
source-list - Downloadable file metadata →
file-attachment
Props (schema)
| Field | Type | Notes |
|---|---|---|
title | string | Card title |
description | string? | Supporting text |
href | portable URL | Relative or http(s); no credentials |
label | string? | Optional CTA label |
Frame example
code
{
"protocol": "agentskit.chat.component",
"version": 1,
"type": "render",
"componentKey": "link-card",
"instanceId": "link-card-fixture",
"props": {
"title": "Guide",
"description": "Read the guide.",
"href": "https://example.com/guide",
"label": "Open guide"
},
"fallback": {
"kind": "link-card",
"summary": "Guide link."
}
}Events
| Event | Value | Meaning |
|---|---|---|
open | url | The href that was opened |
Host wiring
code
import { LinkCardComponent, defineComponentManifest, defineChat } from '@agentskit/chat'
import { AgentChat } from '@agentskit/chat/react'
const definition = defineChat({
id: 'app',
components: defineComponentManifest([LinkCardComponent]),
chat: { adapter },
})
export function App() {
return (
<AgentChat
definition={definition}
onComponentInteract={(event) => {
// event === 'open'; value is href
// { type: 'interact', componentKey: 'link-card', instanceId, event: 'open', value: href }
}}
/>
)
}For agents
| Field | Value |
|---|---|
componentKey | link-card |
| Export | LinkCardComponent |
| Protocol | agentskit.chat.component v1 |
| Envelope | type: "render" + instanceId + props + fallback |
| Events | open (url) |
| Host callback | onComponentInteract |
| Event shape | type always interact; event is open; value is href |
| Fallback | Always include fallback.kind + fallback.summary |
Do not invent props or events outside the schema. Unknown keys and invalid props stay inert.
Shells
| Shell | Notes |
|---|---|
| React / Vue / Svelte / Solid / Angular | Same frame; replaceable slots |
| React Native | Accessibility roles from the catalog definition |
| Ink | Terminal-safe fallback when interactive chrome is limited |
Related
- Source list — Multiple citations
- File attachment — Downloadable files
- Catalog index — All keys
- Live lab — all components side-by-side