File attachment

file-attachment surfaces a file in the transcript: name, mime type, optional size, optional open URL. Emits open with the URL when present.

Live preview

File attachment

Named file with mime type, size, and optional open URL.

file-attachment

report.pdfapplication/pdf1024 bytesOpen

Demos use docs host CSS. Package primitives are intentionally unstyled so your product theme owns the look.

When to use

Generated reports, exports, or uploaded artifacts
When the host should open/download on click

Prefer something else when

Generic external links → link-card
Multi-file citations → source-list

Props (schema)

Field	Type	Notes
`name`	string	File name
`mimeType`	string	MIME type
`sizeBytes`	int ≥ 0?	Optional size
`url`	portable URL?	If set, open/download affordance

Frame example

code

{
  "protocol": "agentskit.chat.component",
  "version": 1,
  "type": "render",
  "componentKey": "file-attachment",
  "instanceId": "file-attachment-fixture",
  "props": {
    "name": "report.pdf",
    "mimeType": "application/pdf",
    "sizeBytes": 1024,
    "url": "/report.pdf"
  },
  "fallback": {
    "kind": "file-attachment",
    "summary": "Attached report.pdf."
  }
}

Events

Event	Value	Meaning
`open`	`url`	URL opened (when `url` is set)

Host wiring

code

import { FileAttachmentComponent, defineComponentManifest, defineChat } from '@agentskit/chat'
import { AgentChat } from '@agentskit/chat/react'

const definition = defineChat({
  id: 'app',
  components: defineComponentManifest([FileAttachmentComponent]),
  chat: { adapter },
})

export function App() {
  return (
    <AgentChat
      definition={definition}
      onComponentInteract={(event) => {
        // event === 'open'; value is url
        // { type: 'interact', componentKey: 'file-attachment', instanceId, event: 'open', value: url }
      }}
    />
  )
}

For agents

Field	Value
`componentKey`	`file-attachment`
Export	`FileAttachmentComponent`
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 url
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

Link card — Generic navigation
Catalog index — All keys
Live lab — all components side-by-side

File attachment

File attachment

Live preview

When to use

Prefer something else when

Props (schema)

Frame example

Events

Host wiring

For agents

Shells

Related

On this page