---
title: "Composite"
slug: "ai-application-service-chatbot-composite"
updated: 2026-09-17T09:57:17Z
published: 2026-09-17T09:57:17Z
canonical: "api.ncloud-docs.com/ai-application-service-chatbot-composite"
---

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

# Composite

Classic/VPC環境で利用できます。

チャットボット返答のレスポンスコンポーネントのうち、Composite Componentについて説明します。

Compositeコンポーネントは、次の2つの基本コンポーネントで構成されます。

- [Template](/docs/ja/ai-application-service-chatbot-composite#Template%EC%BB%B4%ED%8F%AC%EB%84%8C%ED%8A%B8)
- [Carousel](/docs/ja/ai-application-service-chatbot-composite#Carousel%EC%BB%B4%ED%8F%AC%EB%84%8C%ED%8A%B8) (Compositeコンポーネントは[Persistent Menu](/docs/ja/ai-application-service-chatbot-composite#PersistentMenu%EC%BB%B4%ED%8F%AC%EB%84%8C%ED%8A%B8)コンポーネントを含む)

上記のコンポーネントはそれぞれの特徴に合わせてチャットボットのレスポンスをチャットボットビルダで設定することができ、チャットボットビルダで設定したレスポンス結果を JSON形式で返します。

## Templateコンポーネント

Templateコンポーネントは、カバー(Cover)、コンテンツテーブル(Content Table)、フットテーブル(Foot Table)で構成されます。

### Templateコンポーネントのレスポンスボディ

Templateコンポーネントのレスポンスボディは次の通りです。

| フィールド | タイプ | 必須の有無 | 説明 |
| --- | --- | --- | --- |
| `type` | String | - | コンポーネントのタイプ - Templateコンポーネントの場合、2つの基本コンポーネントのうち`template`のみ使用可能 |
| `title` | String | - | コンポーネントのタイトル - 太字の短文テキスト(Short bold text) |
| `subTitle` | String | - | 下位コンポーネントのタイトル - グレーの短文テキスト(Short gray text) |
| `data` | Object | - | テンプレート(Template)コンポーネントの構成情報 |
| `data.cover` | Object | - | カバー(Cover)情報 |
| `data.description` | String | - | コンポーネントの詳細説明 - 長文のテキスト |
| `data.contentBackgroundImage` | String | - | コンテンツテーブル領域に表示されるバック画像の URL - `https`形式の URLが必要 |
| `data.contentTable` | Array | - | [contentTableの詳細情報](/docs/ja/ai-application-service-chatbot-composite#Table) - 2次元セル配列 - 最大3行まで設定可能 - 詳細は[Basicコンポーネント](/docs/ja/ai-application-service-chatbot-component-basic)を参照 |
| `data.footBackgroundImage` | String | - | フット(Foot)テーブル領域に表示されるバック画像の URL - `https`形式の URLが必要 |
| `data.footTable` | Array | - | [footTableの詳細情報](/docs/ja/ai-application-service-chatbot-composite#Table) - 構成要素は`contentTable`と同じだが、`contentTable`が存在しないと表示できない |
| `data.footTableShowRows` | Integer | - | 最大行数 - 行数が最大値より多い場合、最大行を表示して折りたたんで拡張ボタンを追加 - 設定しないと全行を表示 |
| `data.action` | Action | - | コンポーネントアクション(Action)情報 - 各アクションの詳細内容が異なるので、詳細は[Actionコンポーネント](/docs/ja/ai-application-service-chatbot-component-commonaction)を参照 |

#### `Table`

`Table`の説明は次の通りです。

| フィールド | タイプ | 必須の有無 | 説明 |
| --- | --- | --- | --- |
| `rowSpan` | Integer | - | 表のセルが占める(Span)行の数 |
| `colSpan` | Integer | - | 表のセルが占める(Span)列の数 |
| `data` | Object | - | Templateコンポーネントの`data`領域情報 - 詳細は[Basicコンポーネント](/docs/ja/ai-application-service-chatbot-component-basic)を参照 - `text`、`image`、`button` |
| `data.type` | String | - | コンポーネントのタイプ |
| `data.title` | String | - | コンポーネントの名前 |
| `data.subTitle` | String | - | 下位コンポーネントの名前 |
| `data.data` | Object | - | 下位コンポーネントの構成情報 |
| `data.data.type` | String | - | 下位コンポーネントのタイプ |
| `data.data.iconUrl` | String | - | アイコン URLアドレス |
| `data.data.action` | Object | - | コンポーネントのアクション(Action)情報 |
| `data.data.action.type` | String | - | コンポーネントアクションのタイプ - `postback` \| `utterance` \| `link` \| `phone` \| `welcome` - `postback`: [Postbackコンポーネント](/docs/ja/ai-application-service-chatbot-component-commonaction#Postback%EC%BB%B4%ED%8F%AC%EB%84%8C%ED%8A%B8)を参照 - `utterance`: [Utteranceコンポーネント](/docs/ja/ai-application-service-chatbot-component-commonaction#Utterance%EC%BB%B4%ED%8F%AC%EB%84%8C%ED%8A%B8)を参照 - `link`: [Linkコンポーネント](/docs/ja/ai-application-service-chatbot-component-commonaction#Link%EC%BB%B4%ED%8F%AC%EB%84%8C%ED%8A%B8)を参照 - `phone`: [Phoneコンポーネント](/docs/ja/ai-application-service-chatbot-component-commonaction#Phone%EC%BB%B4%ED%8F%AC%EB%84%8C%ED%8A%B8)を参照 - `welcome`: [Welcomeコンポーネント](/docs/ja/ai-application-service-chatbot-component-commonaction#Welcome%EC%BB%B4%ED%8F%AC%EB%84%8C%ED%8A%B8)を参照 |
| `data.data.action.data` | Object | - | コンポーネントアクションの詳細情報 - 各アクションの詳細内容が異なるので、詳細は[Actionコンポーネント](/docs/ja/ai-application-service-chatbot-component-commonaction)を参照 |

### Templateコンポーネントのレスポンス例

Templateコンポーネントのレスポンスのサンプルコードは次の通りです。

```
{
    "type": "template",
    "title": "optional, short bold text",
    "subTitle": "optional, short gray text",
    "data":{
        "cover":{
            "contentTableShowRows": 3, 
            "contentTable":
            [ 
                "colSpan": 1,
                "rowSpan": 2,
                "data":{}
            ]
        }
    },
    "footTableShowRows":3, 
    "footBackgroundImage":"https://ssl.pstatic.net/CloudFunctions.png",
    "footTable":[] 
}
```

### Persistent Menuコンポーネント

固定メニュー(Persistent Menu)コンポーネントはユーザーがチャットバーでメニューボタンをタッチすると表示され、常に[`Open`レスポンス](/docs/ja/ai-application-service-chatbot-open)に含まれます。`utils`を変更しなかった他のレスポンスに`permanentMenu`コンテンツが含まれます。

#### Persistent Menuのレスポンスボディ

Persistent Menuのレスポンスボディは次の通りです。

| フィールド | タイプ | 必須の有無 | 説明 |
| --- | --- | --- | --- |
| `type` | String | - | 固定メニューのタイプ - Templateコンポーネントの場合、2つの基本コンポーネントのうち`template`のみ使用可能 |
| `title` | String | - | 固定メニュー名 - チャットバーに表示される |
| `data` | Object | - | 固定メニューの構成情報 - `cover`は使用しない |
| `data.contentBackgroundImage` | String | - | コンテンツテーブル領域に表示されるバック画像の URL - `contentTable`に`image`コンポーネントがある場合にのみ表示 - `https`形式の URLが必要 |
| `data.contentTable` | Array | - | [contentTableの詳細情報](/docs/ja/ai-application-service-chatbot-composite#contentTable) - `footTable`は使用されない |

#### `contentTable`

`data.contentTable`の説明は次の通りです。

| フィールド | タイプ | 必須の有無 | 説明 |
| --- | --- | --- | --- |
| `rowSpan` | Integer | - | 表のセルが占める(Span)行の数 |
| `colSpan` | Integer | - | 表のセルが占める(Span)列の数 |
| `data` | Object | - | コンポーネントの構成情報 - 詳細は[Basicコンポーネント](/docs/ja/ai-application-service-chatbot-component-basic)を参照 |
| `data.type` | String | - | コンポーネントのタイプ |
| `data.title` | String | - | コンポーネントの名前 |
| `data.subTitle` | String | - | 下位コンポーネントの名前 |
| `data.data` | Object | - | 下位コンポーネントの構成情報 |
| `data.data.type` | String | - | 下位コンポーネントのタイプ |
| `data.data.action` | Object | - | コンポーネントのアクション(Action)情報 |
| `data.data.action.type` | String | - | コンポーネントアクションのタイプ - `postback` \| `utterance` \| `link` \| `phone` \| `welcome` - `postback`: [Postbackコンポーネント](/docs/ja/ai-application-service-chatbot-component-commonaction#Postback%EC%BB%B4%ED%8F%AC%EB%84%8C%ED%8A%B8)を参照 - `utterance`: [Utteranceコンポーネント](/docs/ja/ai-application-service-chatbot-component-commonaction#Utterance%EC%BB%B4%ED%8F%AC%EB%84%8C%ED%8A%B8)を参照 - `link`: [Linkコンポーネント](/docs/ja/ai-application-service-chatbot-component-commonaction#Link%EC%BB%B4%ED%8F%AC%EB%84%8C%ED%8A%B8)を参照 - `phone`: [Phoneコンポーネント](/docs/ja/ai-application-service-chatbot-component-commonaction#Phone%EC%BB%B4%ED%8F%AC%EB%84%8C%ED%8A%B8)を参照 - `welcome`: [Welcomeコンポーネント](/docs/ja/ai-application-service-chatbot-component-commonaction#Welcome%EC%BB%B4%ED%8F%AC%EB%84%8C%ED%8A%B8)を参照 |
| `data.data.action.data` | Object | - | コンポーネントアクションの詳細情報 - 各アクションの詳細内容が異なるので、詳細は[Actionコンポーネント](/docs/ja/ai-application-service-chatbot-component-commonaction)を参照 |

#### Persistent Menuのレスポンス例

Persistent Menuのレスポンスのサンプルコードは次の通りです。

```
{
    "type": "template",
    "title": "persistentMenu",
    "data": {
        "contentBackgroundImage": "url",
        "contentTable": []
    }
}
```

## Carouselコンポーネント

Carouselコンポーネントは同じ形式が繰り返されるカルーセル(Carousel)返答が構成されます。

### Carouselコンポーネントのレスポンスボディ

Carouselコンポーネントのレスポンスボディは次の通りです。

| フィールド | タイプ | 必須の有無 | 説明 |
| --- | --- | --- | --- |
| `type` | String | - | コンポーネントのタイプ - Carouselコンポーネントの場合、2つの基本コンポーネントのうち`carousel`のみ使用可能 |
| `title` | String | - | コンポーネントのタイトル - 太字の短文テキスト(Short bold text) |
| `subTitle` | String | - | 下位コンポーネントのタイトル - グレーの短文テキスト(Short gray text) |
| `data` | Object | - | カルーセル(Carousel)コンポーネントの構成情報 |
| `data.cards` | Array | - | カルーセルを構成するカード(Card)情報 - カードごとに詳細内容が異なるので、詳細は[Basicコンポーネント](/docs/ja/ai-application-service-chatbot-composite#Basic%EC%BB%B4%ED%8F%AC%EB%84%8C%ED%8A%B8)、[Compositeコンポーネント](/docs/ja/ai-application-service-chatbot-composite#Composite%EC%BB%B4%ED%8F%AC%EB%84%8C%ED%8A%B8)、[Flexコンポーネント](/docs/ja/ai-application-service-chatbot-composite#Flex%EC%BB%B4%ED%8F%AC%EB%84%8C%ED%8A%B8)を参照 |

### Carouselコンポーネントのレスポンス例

Carouselコンポーネントのレスポンスのサンプルコードは次の通りです。

```
{
    "type": "carousel",
    "title": "optional, short bold text",
    "subTitle": "optional, short gray text",
    "data" : 
    {
        "cards": [{}]
    }
}
```