rich-file-sharing

name: rich-file-sharing description: "Share files and images inline using and component syntax for rich previews in the UI."

Rich File Sharing

Share files and images with rich inline previews using component tags.

Use when

• You need to present images or downloadable files inline in the UI.
• You want rich previews for artifacts or reports.

Don't use when

• The UI does not support <image>/<file> tags.
• You only need to paste raw text or code snippets.

Outputs

• Inline previews (no additional files created).

Templates or Examples

• Use the tag examples below as templates.

Image preview

<image path="./chart.png" alt="Sales chart" />

Renders an inline image thumbnail. Click to expand. Attributes:

• path (required) — relative or absolute path to the image file
• alt (optional) — description shown as alt text

File download card

<file path="./report.pdf" name="Q4 Report" />

Renders a download card with icon, filename, and size. Attributes:

• path (required) — relative or absolute path to the file
• name (optional) — display name (defaults to filename)

Rules

1. Verify the file exists before referencing it — the UI shows an error for missing files
2. Use relative paths from the workspace root (e.g. ./output/chart.png)
3. Tags must be self-closing (/>)
4. Place tags on their own line for best rendering
5. Use <image> for visual content (PNG, JPG, GIF, WebP, SVG)
6. Use <file> for downloads (PDF, CSV, ZIP, code files, etc.)

Examples

After generating a matplotlib chart:

<image path="./output/chart.png" alt="Revenue by quarter" />

After creating a data export:

<file path="./output/data.csv" name="Exported Data" />

Multiple outputs:

Here are the results:

<image path="./plots/figure1.png" alt="Distribution plot" />

<file path="./results/summary.json" name="Full Results" />