---
title: "Message part"
description: "Native message-part は該当 chat message の下に mount される inline tool surface です。Tool view と同じ ToolResultSurfaceProps、state、producer lane context、toolNames、任意の renderBeforeOutput contr…"
url: "https://sotaagents.ai/ja/manual/developer-guide/message-parts"
generated_by: "sotaagents-ldp"
docs_index: "https://sotaagents.ai/manual/llms.txt"
locale: "ja"
---

# Message part

Native `message-part` は該当 chat message の下に mount される inline tool surface です。Tool view と同じ `ToolResultSurfaceProps`、state、producer lane context、`toolNames`、任意の `renderBeforeOutput` contract を使います。

YAML

```
contributes:
  ui:
    - id: source-summary
      kind: nativeModule
      surface: message-part
      slot: chat.message.inline.below
      toolNames: [searchSources]
      renderBeforeOutput: true
      module:
        entry: dist/ui/app.js
        export: SourceSummary
```

TSX

```
import type { ToolResultSurfaceProps } from '@sota/platform';

type SearchOutput = { sources: Array<{ title: string; url: string }> };

export function SourceSummary({ toolResult }: ToolResultSurfaceProps<unknown, SearchOutput>) {
  if (toolResult.state === 'output-pending') {
    return <aside aria-live="polite">Waiting for the app…</aside>;
  }
  if (toolResult.state !== 'output-available') return null;
  return <aside aria-label="Sources">{toolResult.result?.sources.map((source) => (
    <a key={source.url} href={source.url} rel="noreferrer" target="_blank">
      {source.title}
    </a>
  ))}</aside>;
}
```

> [!NOTE]
> Declarative message renderer とは別です。
>
> `kind: messageRenderer` は matched text を citation、mention、pill として装飾し、`surface: message-part` は named tool call に app React を load します。