---
title: "Composer action"
description: "composer-action は chat input control の横に置く compact な app-owned action です。"
url: "https://sotaagents.ai/ja/manual/developer-guide/composer-actions"
generated_by: "sotaagents-ldp"
docs_index: "https://sotaagents.ai/manual/llms.txt"
locale: "ja"
---

# Composer action

`composer-action` は chat input control の横に置く compact な app-owned action です。

YAML

```
contributes:
  ui:
    - id: report-action
      kind: nativeModule
      surface: composer-action
      slot: chat.composer.actions
      module:
        entry: dist/ui/app.js
        export: ReportAction
```

TSX

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

export function ReportAction() {
  const { ui } = useAppContext();
  return <button type="button" onClick={() => ui.openArtifact('reports.viewer')}>Reports</button>;
}
```

`useComposer` はここでは使用できません。Draft を読み書きする UI は `composer-panel` として宣言し、Core private store へアクセスしません。