---
title: "Artifact surface"
description: "Artifact surface は durable side-panel view の body を所有します。安定した app namespace の artifactKind を宣言し、Core は open 時にその app lane の current native module を resolve します。"
url: "https://sotaagents.ai/ja/manual/developer-guide/artifact-surfaces"
generated_by: "sotaagents-ldp"
docs_index: "https://sotaagents.ai/manual/llms.txt"
locale: "ja"
---

# Artifact surface

Artifact surface は durable side-panel view の body を所有します。安定した app namespace の `artifactKind` を宣言し、Core は open 時にその app lane の current native module を resolve します。

YAML

```
contributes:
  ui:
    - id: report-viewer
      kind: nativeModule
      surface: artifact
      slot: artifact.slot.reports-viewer
      artifactKind: reports.viewer
      module:
        entry: dist/ui/app.js
        export: ReportViewer
        styles: dist/ui/app.css
```

TSX

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

type ArtifactProps = {
  artifact: { artifactKind: string; context?: Record<string, unknown> };
};

export function ReportViewer({ artifact }: ArtifactProps) {
  const { ui } = useAppContext();
  const title = typeof artifact.context?.title === 'string'
    ? artifact.context.title
    : 'Report';
  return <button type="button" onClick={ui.closeArtifact}>Close {title}</button>;
}
```

同じ app lane の surface から `ui.openArtifact('reports.viewer', context)` で開きます。Lane の現在の app が `artifact.context` を描画し、過去の release が作った payload との互換性は app が管理します。`core.*` namespace は予約済みです。

TSX

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

export function OpenReportButton({ reportId }: { reportId: string }) {
  const { ui } = useAppContext();
  return <button type="button" onClick={() => ui.openArtifact('reports.viewer', {
    reportId, title: 'Quarterly report',
  })}>Open report</button>;
}
```

`artifact.context` は利用前に検証します。Transport data であり、authoritative record は app backend から load します。