---
title: "Workspace cards"
description: "A card is compact app UI placed in the workspace assistant area. It receives no card-specific props; use platform hooks for context, data, and actions."
url: "https://sotaagents.ai/manual/developer-guide/workspace-cards"
generated_by: "sotaagents-ldp"
docs_index: "https://sotaagents.ai/manual/llms.txt"
locale: "en"
---

# Workspace cards

A `card` is compact app UI placed in the workspace assistant area. It receives no card-specific props; use platform hooks for context, data, and actions.

YAML

```
contributes:
  ui:
    - id: reports-card
      kind: nativeModule
      surface: card
      slot: workspace.assistant-card
      module:
        entry: dist/ui/app.js
        export: ReportsCard
```

TSX

```
import { useAppContext } from '@sota/platform';

export function ReportsCard() {
  const { ui } = useAppContext();
  return (
    <section aria-label="Reports">
      <p>Three reports need review.</p>
      <button type="button" onClick={() => ui.openArtifact('reports.viewer', {
        filter: 'needs-review',
      })}>Review</button>
    </section>
  );
}
```

Keep the component responsive to its host instead of assuming page dimensions. Use a workspace page or artifact when the workflow needs a full canvas.