--- title: "Basic" slug: "ai-application-service-chatbot-basic" updated: 2026-09-17T09:57:17Z published: 2026-09-17T09:57:17Z canonical: "api.ncloud-docs.com/ai-application-service-chatbot-basic" --- > ## 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. # Basic Classic/VPC環境で利用できます。 チャットボット返答のレスポンスコンポーネントのうち、Basicコンポーネントについて説明します。 Basicコンポーネントは、次の3つの基本コンポーネントで構成されます。 - [Text](/docs/ja/ai-application-service-chatbot-basic#Text%EC%BB%B4%ED%8F%AC%EB%84%8C%ED%8A%B8) - [Image](/docs/ja/ai-application-service-chatbot-basic#Image%EC%BB%B4%ED%8F%AC%EB%84%8C%ED%8A%B8) - [Button](/docs/ja/ai-application-service-chatbot-basic#Button%EC%BB%B4%ED%8F%AC%EB%84%8C%ED%8A%B8) (Buttonコンポーネントは[Quick Buttons](/docs/ja/ai-application-service-chatbot-basic#quickButtons%EC%BB%B4%ED%8F%AC%EB%84%8C%ED%8A%B8)コンポーネントを含みます) 上記のコンポーネントはそれぞれの特徴に合わせてチャットボットのレスポンスをチャットボットビルダで設定することができ、チャットボットビルダで設定したレスポンス結果を JSON形式で返します。 ## Textコンポーネント Textコンポーネントは、タイトル(Title)、サブタイトル(Sub Title)、説明(Description)、URLで構成されます。 ### Textコンポーネントのレスポンスボディ Textコンポーネントのレスポンスボディは次の通りです。 | フィールド | タイプ | 必須の有無 | 説明 | | --- | --- | --- | --- | | `type` | String | - | コンポーネントのタイプ - Textコンポーネントの場合、3つの基本コンポーネントのうち`text`のみ使用可能 | | `title` | String | - | コンポーネントのタイトル - 太字の短文テキスト(Short bold text) | | `subTitle` | String | - | 下位コンポーネントのタイトル - グレーの短文テキスト(Short gray text) | | `data` | Object | - | テキスト(Text)コンポーネントの構成情報 | | `data.description` | String | - | コンポーネントの詳細説明 - 長文のテキスト | | `data.url` | String | - | コンポーネントのハイパーリンク URL - <例> `ncloud.com` | | `data.urlAlias` | String | - | コンポーネントハイパーリンク URLのエイリアス - ハイパーリンクが表示されるテキスト - <例> `NAVERクラウド` | | `data.action` | Action | - | コンポーネントアクション(Action)情報 - 各アクションの詳細内容が異なるので、詳細は[Actionコンポーネント](/docs/ja/ai-application-service-chatbot-component-commonaction)を参照 | ### Textコンポーネントのレスポンス例 Textコンポーネントのレスポンスのサンプルコードは次の通りです。 ``` { "type": "text", "title": "optional, short bold text", "subTitle": "optional, short gray text", "data" : { "description" : "optional, a long text content", "url" : "optional, a hyperlink at the bottom of description", "urlAlias" :"optional, hyperlink show this alias", "action": {Action Data} } } ``` ## Imageコンポーネント Imageコンポーネントは、画像とともにタイトル(Title)、サブタイトル(Sub Title)、説明(Description)、URLで構成されます。 ### Imageコンポーネントのレスポンスボディ Imageコンポーネントのレスポンスボディは次の通りです。 | フィールド | タイプ | 必須の有無 | 説明 | | --- | --- | --- | --- | | `type` | String | - | コンポーネントのタイプ - Imageコンポーネントの場合、3つの基本コンポーネントのうち`image`のみ使用可能 | | `title` | String | - | コンポーネントのタイトル - 太字の短文テキスト(Short bold text) | | `subTitle` | String | - | 下位コンポーネントのタイトル - グレーの短文テキスト(Short gray text) | | `data` | Object | - | 画像(Image)コンポーネントの構成情報 | | `data.imageUrl` | String | - | 画像の URL - `https`形式の URLが必要 | | `data.alt` | String | - | 画像説明のツールチップ - 画像にマウスオーバーすると表示される短いヒント | | `data.imagePosition` | String | - | 画像の位置 - `top`(デフォルト) \| `bottom` \| `left` \| `right` - `top`: 一番上 - `bottom`: 一番下 - `left`: 一番左 - `right`: 一番右 | | `data.description` | String | - | 画像の詳細説明 | | `data.url` | String | - | 画像のハイパーリンク URL - `description`の下に位置 - <例> `ncloud.com` | | `data.urlAlias` | String | - | 画像ハイパーリンク URLのエイリアス - ハイパーリンクが表示されるテキスト - <例> `NAVERクラウド` | | `data.action` | Action | - | コンポーネントアクション(Action)情報 - 各アクションの詳細内容が異なるので、詳細は[Actionコンポーネント](/docs/ja/ai-application-service-chatbot-component-commonaction)を参照 | ### Imageコンポーネントのレスポンス例 Imageコンポーネントのレスポンスのサンプルコードは次の通りです。 ``` { "type": "image", "title": "optional, short bold text", "subTitle": "optional, short gray text", "data" : { "imageUrl" : "https://ssl.pstatic.net/CloudFunctions.png", "alt" : "optional, short hint show when hover on image", "imagePosition" : "top", "description" : "optional, details info of image", "url" : "optional, a hyperlink at the bottom of description", "urlAlias" : "optional, hyperlink show this alias", "action": {Action Data} } } ``` ## Buttonコンポーネント Buttonコンポーネントは、画像とともにタイトル(Title)、サブタイトル(Sub Title)、説明(Description)、URLでボタン(Button)を構成します。Quick Buttonコンポーネントも Buttonコンポーネントに含まれます。 ### Buttonコンポーネントのレスポンスボディ Buttonコンポーネントのレスポンスボディは次の通りです。 | フィールド | タイプ | 必須の有無 | 説明 | | --- | --- | --- | --- | | `type` | String | - | コンポーネントのタイプ - Buttonコンポーネントの場合、3つの基本コンポーネントのうち`button`のみ使用可能 | | `title` | String | - | コンポーネントのタイトル - ボタンに表示される太字の短文テキスト(Short bold text) | | `subTitle` | String | - | 下位コンポーネントのタイトル - グレーの短文テキスト(Short gray text) | | `data` | String | - | ボタン(Button)コンポーネントの構成情報 | | `data.type` | String | - | ボタンの種類 - `basic` \| `imageButton` - `basic`: 基本ボタン - `imageButton`: 画像で構成されたボタン | | `data.iconUrl` | String | - | ボタンアイコン URL - `https`形式の URLが必要 | | `data.action` | Action | - | コンポーネントアクション(Action)情報 - 各アクションの詳細内容が異なるので、詳細は[Actionコンポーネント](/docs/ja/ai-application-service-chatbot-component-commonaction)を参照 | ### Buttonコンポーネントのレスポンス例 Buttonコンポーネントのレスポンスのサンプルコードは次の通りです。 #### Basic Button Basic Buttonのレスポンスのサンプルコードは次の通りです。 ``` { "type": "button", "title": "optional, text show on button", "subTitle": "optional, short gray text", "data" : { "type": "basic", "iconUrl" : "https://ssl.pstatic.net/CloudFunctions.png", "action": {Action Data} } } ``` #### Image Button Image Buttonのレスポンスのサンプルコードは次の通りです。 ``` { "type": "button", "title": "optional, text show on button", "subTitle": "optional, short gray text", "data" : { "type": "imageButton", "iconUrl" : "https://ssl.pstatic.net/CloudFunctions.png", "action": {Action Data} } } ``` ### Quick Buttonsコンポーネント Quick Buttonsコンポーネントを説明します。チャット画面下部にあるグループ固定ボタンです。`button`コンポーネントに含まれます。 #### Quick Buttonsのレスポンスボディ Quick Buttonsnのレスポンスボディは次の通りです。 | フィールド | タイプ | 必須の有無 | 説明 | | --- | --- | --- | --- | | `type` | String | - | コンポーネントのタイプ - Buttonコンポーネントの場合、3つの基本コンポーネントのうち`button`のみ使用可能 | | `title` | String | - | コンポーネントの名前 | | `data` | Object | - | コンポーネントの構成情報 | | `data.type` | String | - | コンポーネントのタイプ - `text` \| `image` \| `button` \| `template` \| `carousel` \| `flex` \| `line_sticker` \| `lineworks_sticker` \| - 各コンポーネントの詳細は[Basicコンポーネントの詳細情報](/docs/ja/ai-application-service-chatbot-component-basic)、[Compositeコンポーネントの詳細情報](/docs/ja/ai-application-service-chatbot-component-composite)、[Flexコンポーネントの詳細情報](/docs/ja/ai-application-service-chatbot-component-flex)を参照 | | `data.action` | Object | - | コンポーネントのアクション(Action)情報 | | `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.action.data` | Object | - | コンポーネントアクション(Action)の詳細情報 - 各アクションの詳細内容が異なるので、詳細は[Actionコンポーネント](/docs/ja/ai-application-service-chatbot-component-commonaction)を参照 | | `data.action.data.postback` | String | - | チャットボットにポストバックしたテキスト | | `data.action.data.displayText` | String | - | チャットボットに表示されるクイックボタン(Quick Button)の名前 | | `data.action.data.postbackFull` | String | - | クイックボタン実行のためにチャットボットにポストバックしたテキスト | #### Quick Buttonsのレスポンス例 Quick Buttonsnのレスポンスのサンプルコードは次の通りです。 ``` { "quickButtons": [ { "type": "button", "title": "Button Name", "data": { "type": "basic", "action": { "type": "postback", "data": { "postback": "UnexpiredForm\u241e47954\u241e0", "displayText": "Button Name", "postbackFull": "_T_UnexpiredForm\u241e47954\u241e0" } } } } ] } ```