> ## Documentation Index
> Fetch the complete documentation index at: https://docs.morph-data.io/llms.txt
> Use this file to discover all available pages before exploring further.

# <Chat />

<Frame>
  <img src="https://mintcdn.com/queue-4c50ebb3/_HQi-05AKdEsS8di/assets/images/pages/llm-component.jpg?fit=max&auto=format&n=_HQi-05AKdEsS8di&q=85&s=7d8824a0724d7b24e0dfb5f29dffdd61" width="1280" height="720" data-path="assets/images/pages/llm-component.jpg" />
</Frame>

`<Chat />` コンポーネントは、Open AIやAnthropicのAPIを用いて、カスタムAIチャットを実現するためのコンポーネントです。

```tsx theme={"dark"}
<Chat
  postData="ai-chat"
  height={300}
/>
```

## `<Chat />` のデータ仕様

`<Chat />` コンポーネントは `postData` で指定されたPython関数に対して、以下のデータをデフォルトで送信します。

* `prompt`: ユーザーが入力したテキスト

* `thread_id`: AIとの会話のスレッドID。 "Start new thread" ボタンをユーザーが押した際などに新しい値に更新されます。

* `is_new_conversation`: 新しい会話が始まったかどうか。 "Start new thread" ボタンをユーザーが押した際などに `true` に更新されます。

これらのデータに加えて送りたいデータや、デフォルトのデータを上書きしたい場合には、 `variables` プロパティを使用してください。

## プロパティ

<ParamField path="postData" type="string" required>
  Python関数やSQLファイルの name
</ParamField>

<ParamField path="variables" type="{ [key: string]: any }">
  Python関数やSQLファイルに渡す変数。 `defineState()`関数 を使って宣言してください。
</ParamField>

<ParamField path="height" type="number">
  コンポーネントの高さ。単位はpxです。
</ParamField>
