---
title: "Composer panel"
description: "composer-panel は composer 上部の contextual app UI で、public composer API に bind される唯一の surface です。Draft の観察と atomic edit、exact execution の pending deferred result、composer lock を利用…"
url: "https://sotaagents.ai/ja/manual/developer-guide/composer-panels"
generated_by: "sotaagents-ldp"
docs_index: "https://sotaagents.ai/manual/llms.txt"
locale: "ja"
---

# Composer panel

`composer-panel` は composer 上部の contextual app UI で、public composer API に bind される唯一の surface です。Draft の観察と atomic edit、exact execution の pending deferred result、composer lock を利用できます。

YAML

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

TSX

```
import { useComposer } from '@sota/core/hooks';

export function ReportPanel() {
  const value = useComposer((composer) => composer.value);
  const applyEdit = useComposer((composer) => composer.applyEdit);
  if (!value.includes('/report')) return null;
  return <button type="button" onClick={() => applyEdit({
    mode: 'replace', content: [{ kind: 'text', text: 'Create a weekly report for ' }],
  })}>Use template</button>;
}
```

Slot は正確に `chat.composer.panel` とします。App 固有条件がなければ `null` を描画できます。Slash command と panel は独立 contribution です。