---
title: "Workspace card"
description: "card は workspace assistant 領域に置く compact app UI です。Card 固有 props はなく、context、data、action は platform hook から取得します。"
url: "https://sotaagents.ai/ja/manual/developer-guide/workspace-cards"
generated_by: "sotaagents-ldp"
docs_index: "https://sotaagents.ai/manual/llms.txt"
locale: "ja"
---

# Workspace card

`card` は workspace assistant 領域に置く compact app UI です。Card 固有 props はなく、context、data、action は platform hook から取得します。

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 <button type="button" onClick={() => ui.openArtifact('reports.viewer', {
    filter: 'needs-review',
  })}>Review reports</button>;
}
```

Page size を仮定せず host に合わせて responsive にします。大きな canvas には workspace page または artifact を使います。