翻訳は機械翻訳により提供されています。提供された翻訳内容と英語版の間で齟齬、不一致または矛盾がある場合、英語版が優先します。

# Amazon Bedrock を使用して AI テキストサマリアプリを構築する
<a name="tutorial-conversational-bedrock"></a>

このチュートリアルでは、Amazon Bedrock を使用してエンドユーザーからのテキスト入力の簡潔な概要を提供するアプリケーションを App Studio で構築します。アプリケーションには、ユーザーが要約したいテキストを入力できるシンプルなユーザーインターフェイスが含まれています。これには、会議メモ、記事の内容、調査結果、またはその他のテキスト情報が含まれます。ユーザーがテキストを入力したら、ボタンを押してテキストを Amazon Bedrock に送信できます。Amazon Bedrock は Claude 3 Sonnet モデルを使用してテキストを処理し、要約されたバージョンを返します。

**Contents**
+ [前提条件](#tutorial-conversational-bedrock-prerequisites)
+ [ステップ 1: IAM ロールと App Studio コネクタを作成して設定する](#tutorial-conversational-bedrock-steps-create-role-connector)
+ [ステップ 2: アプリケーションを作成する](#tutorial-conversational-bedrock-steps-create-application)
+ [ステップ 3: オートメーションを作成して設定する](#tutorial-conversational-bedrock-steps-create-automation)
+ [ステップ 4: ページとコンポーネントを作成する](#tutorial-conversational-bedrock-steps-user-interface)
  + [デフォルトページの名前を変更する](#tutorial-conversational-bedrock-steps-user-interface-create-page)
  + [ページにコンポーネントを追加する](#tutorial-conversational-bedrock-steps-user-interface-add-components)
  + [ページコンポーネントを設定する](#tutorial-conversational-bedrock-steps-user-interface-configure-components)
+ [ステップ 5: アプリケーションを**テスト**環境に公開する](#tutorial-conversational-bedrock-steps-publish)
+ [(オプション) クリーンアップする](#tutorial-conversational-bedrock-steps-cleanup)

## 前提条件
<a name="tutorial-conversational-bedrock-prerequisites"></a>

開始する前に、以下の前提条件を確認して完了してください。
+  AWS App Studio へのアクセス。このチュートリアルでは、コネクタを作成するには管理者ロールが必要です。
+ オプション: [AWS App Studio の概念](concepts.md)と を確認して[チュートリアル: 空のアプリから構築を開始する](getting-started-tutorial-empty.md)、App Studio の重要な概念を理解します。

## ステップ 1: IAM ロールと App Studio コネクタを作成して設定する
<a name="tutorial-conversational-bedrock-steps-create-role-connector"></a>

App Studio に Amazon Bedrock モデルへのアクセスを提供するには、以下を行う必要があります。

1. アプリで使用する Amazon Bedrock モデルを有効にします。このチュートリアルでは **Claude 3 Sonnet **を使用するため、そのモデルを有効にしてください。

1. Amazon Bedrock への適切なアクセス許可を持つ IAM ロールを作成します。

1. アプリで使用する IAM ロールを使用して App Studio コネクタを作成します。

詳細な手順[Amazon Bedrock に接続する](connectors-bedrock.md)については、「」を参照してください。ステップに従ってコネクタを作成したら、このチュートリアルに戻ります。

## ステップ 2: アプリケーションを作成する
<a name="tutorial-conversational-bedrock-steps-create-application"></a>

テキストサマリアプリに組み込む App Studio で空のアプリを作成するには、次の手順に従います。

1. App Studio にサインインします。

1. ビルダーハブに移動し、**\$1 アプリケーション**の作成を選択します。

1. **[最初から開始]** を選択します。

1. **アプリ名**フィールドに、 などのアプリの名前を入力します**Text Summarizer**。

1. データソースまたはコネクタを選択するように求められた場合は、このチュートリアルの目的で**スキップ**を選択します。

1. **次へ** をクリックして先に進みます。

1. (オプション): App Studio でアプリケーションを構築する方法の概要については、ビデオチュートリアルをご覧ください。

1. **「アプリの編集**」を選択すると、アプリケーションスタジオに移動します。

## ステップ 3: オートメーションを作成して設定する
<a name="tutorial-conversational-bedrock-steps-create-automation"></a>

App Studio アプリのロジックと動作を*オートメーションで定義します*。自動化は、*アクション*と呼ばれる個々のステップ、他のリソースからアクションにデータを渡すために使用される*パラメータ*、および他の自動化やコンポーネントで使用できる*出力*で構成されます。このステップでは、以下を使用して Amazon Bedrock とのやり取りを処理するオートメーションを作成します。
+ 入力: ユーザーからオートメーションにテキスト入力を渡すパラメータ。
+ アクション: Amazon Bedrock にテキスト入力を送信し、出力テキストの概要を返す 1 つの **GenAI プロンプト**アクション。
+ 出力: アプリで使用できる Amazon Bedrock から処理された概要で構成される自動化出力。

**Amazon Bedrock にプロンプトを送信し、概要を処理して返すオートメーションを作成して設定するには**

1. キャンバスの上部にある**オートメーション**タブを選択します。

1. **「\$1 オートメーションの追加**」を選択します。

1. 右側のパネルで、**プロパティ**を選択します。

1. 鉛筆アイコンを選択してオートメーション名を更新します。**InvokeBedrock** を入力して **Enter** を押します。

1. 以下のステップを実行して、ユーザーからのテキストプロンプト入力を Amazon Bedrock へのリクエストで使用するオートメーションに渡すために使用されるパラメータをオートメーションに追加します。

   1. キャンバスのパラメータボックスで \$1 **追加** を選択します。

   1. [**名前**] に「**input**」と入力します。

   1. **説明** に、 などの説明を入力します**Text to be sent to Amazon Bedrock**。

   1. Type で****、**String** を選択します。

   1. **追加** を選択して パラメータを作成します。

1. 次の手順を実行して **GenAI プロンプト**アクションを追加します。

   1. 右側のパネルで、**アクション**を選択します。

   1. **GenAI プロンプト**を選択してアクションを追加します。

1. 次の手順を実行して、 アクションを設定します。

   1. キャンバスからアクションを選択して、右側の**プロパティ**メニューを開きます。

   1. 鉛筆アイコン**PromptBedrock**を選択し、名前を入力し、Enter キーを押して、アクションの名前を に変更します。

   1. **Connector** で、 で作成されたコネクタを選択します[ステップ 1: IAM ロールと App Studio コネクタを作成して設定する](#tutorial-conversational-bedrock-steps-create-role-connector)。

   1. **Model** で、プロンプトの処理に使用する Amazon Bedrock モデルを選択します。このチュートリアルでは、**Claude 3.5 Sonnet **を選択します。

   1. **ユーザープロンプト**で、「」と入力します`{{params.input}}`。これは、前に作成した `input`パラメータを表し、アプリユーザーによるテキスト入力が含まれます。

   1. **システムプロンプト**で、Amazon Bedrock に送信するシステムプロンプトの指示を入力します。このチュートリアルでは、次のように入力します。

      ```
      You are a highly efficient text summarizer. Provide a concise summary of the prompted text, capturing the key points and main ideas.
      ```

   1. **リクエスト設定**を選択して展開し、次のフィールドを更新します。
      + **「温度**」に「」と入力します`0`。テンピアリングは、0～10 のスケールで出力のランダム性または創造性を決定します。数値が大きいほど、レスポンスはよりクリエイティブになります。
      + **最大トークン**で、 と入力`4096`してレスポンスの長さを制限します。

1. この自動化の出力は要約されたテキストになりますが、デフォルトでは自動化は出力を作成しません。次のステップを実行して、オートメーション出力を作成するようにオートメーションを設定します。

   1. 左側のナビゲーションで、**InvokeBedrock** オートメーションを選択します。

   1. 右側の**プロパティ**メニューの**出力**で、 **\$1 追加**を選択します。

   1. Output ****に と入力します**\$1\$1results.PromptBedrock.text\$1\$1**。この式は、 `processResults`アクションの内容を返します。

## ステップ 4: ページとコンポーネントを作成する
<a name="tutorial-conversational-bedrock-steps-user-interface"></a>

App Studio では、各ページは、ユーザーが操作するアプリケーションのユーザーインターフェイス (UI) の画面を表します。これらのページ内で、テーブル、フォーム、ボタンなどのさまざまなコンポーネントを追加して、必要なレイアウトと機能を作成できます。

### デフォルトページの名前を変更する
<a name="tutorial-conversational-bedrock-steps-user-interface-create-page"></a>

このチュートリアルのテキストサマリアプリには、1 ページのみが含まれます。新しく作成されたアプリケーションにはデフォルトのページがあるため、追加するのではなく名前を変更します。

**デフォルトページの名前を変更するには**

1. 上部のバーナビゲーションメニューで、**ページ**を選択します。

1. 左側のパネルで Page**Page1** を選択し、右側のパネルで **Properties** パネルを選択します。

1. 鉛筆アイコンを選択し、 と入力し**TextSummarizationTool**、**Enter **キーを押します。

1. **ナビゲーションラベル**に「」と入力します**TextSummarizationTool**。

### ページにコンポーネントを追加する
<a name="tutorial-conversational-bedrock-steps-user-interface-add-components"></a>

このチュートリアルでは、テキストサマリアプリに次のコンポーネントを含む 1 ページがあります。
+ エンドユーザーが要約されるプロンプトの入力に使用する**テキスト入力**コンポーネント。
+ Amazon Bedrock にプロンプトを送信するために使用される**ボタン**コンポーネント。
+ Amazon Bedrock の概要を表示する**テキストエリア**コンポーネント。

要約される**テキストプロンプトの入力**にユーザーが使用するページにテキスト入力コンポーネントを追加します。

**テキスト入力コンポーネントを追加するには**

1. 右側の**コンポーネント**パネルで、**テキスト入力**コンポーネントを見つけ、キャンバスにドラッグします。

1. キャンバス内のテキスト入力を選択して選択します。

1. 右側の**プロパティ**パネルで、次の設定を更新します。

   1. 鉛筆アイコンを選択して、テキスト入力の名前を に変更します**inputPrompt**。

   1. Label に****「」と入力します**Prompt**。

   1. **プレースホルダー**に「」と入力します**Enter text to be summarized**。

次に、ユーザーがプロンプトを Amazon Bedrock に送信することを選択する**ボタン**コンポーネントを追加します。

**ボタンコンポーネントを追加するには**

1. 右側の**コンポーネント**パネルで、**ボタン**コンポーネントを見つけてキャンバスにドラッグします。

1. キャンバス内のボタンを選択して選択します。

1. 右側の**プロパティ**パネルで、次の設定を更新します。

   1. 鉛筆アイコンを選択して、ボタンの名前を に変更します**sendButton**。

   1. **ボタンラベル**に「」と入力します**Send**。

ここで、Amazon Bedrock から返された概要を表示する**テキストエリア**コンポーネントを追加します。

**テキストエリアコンポーネントを追加するには**

1. 右側の**コンポーネント**パネルで、**テキストエリア**コンポーネントを見つけ、キャンバスにドラッグします。

1. キャンバス内のテキスト領域を選択して選択します。

1. 右側の**プロパティ**パネルで、次の設定を更新します。

   1. 鉛筆アイコンを選択して、ボタンの名前を に変更します**textSummary**。

   1. Label に****「」と入力します**Summary**。

### ページコンポーネントを設定する
<a name="tutorial-conversational-bedrock-steps-user-interface-configure-components"></a>

アプリケーションにコンポーネントを含むページが含まれているので、次のステップは、適切な動作を実行するようにコンポーネントを設定することです。ボタンなどのコンポーネントが操作されたときにアクションを実行するように設定するには、*トリガー*を追加する必要があります。このチュートリアルのアプリでは、`sendButton`ボタンに 2 つのトリガーを追加して、以下を実行します。
+ 最初のトリガーは、分析する`textPrompt`コンポーネント内のテキストを Amazon Bedrock に送信します。
+ 2 番目のトリガーでは、Amazon Bedrock から返された概要が`textSummary`コンポーネントに表示されます。

**プロンプトを Amazon Bedrock に送信するトリガーを追加するには**

1. キャンバス内のボタンを選択して選択します。

1. 右側の **Properties** パネルの **Triggers** セクションで \$1 **Add** を選択します。

1. **オートメーションの呼び出し** を選択します。

1. 設定するために作成された **InvokeAutomation1** トリガーを選択します。

1. **「アクション名**」に「」と入力します**invokeBedrockAutomation**。

1. **Invoke Automation **で、前に作成した **InvokeBedrock** オートメーションを選択します。

1. パラメータボックスに、前に作成した**入力**パラメータに、`inputPrompt`テキスト入力コンポーネントのコンテンツを**\$1\$1ui.inputPrompt.value\$1\$1**渡す と入力します。

1. パネルの上部にある左矢印を選択して、コンポーネントプロパティメニューに戻ります。

これで、ボタンがクリックされたときに Amazon Bedrock にリクエストを送信する自動化を呼び出すトリガーを設定しました。次のステップは、`textSummary`コンポーネントに結果を表示する 2 番目のトリガーを設定することです。

**Amazon Bedrock の結果をテキストエリアコンポーネントに表示するトリガーを追加するには**

1. ボタンの右側にある **Properties** パネルの **Triggers** セクションで \$1 **Add** を選択します。

1. **コンポーネントの実行アクション**を選択します。

1. 設定するために作成された **Runcomponentaction1** トリガーを選択します。

1. **「アクション名**」に「」と入力します**setTextSummary**。

1. **コンポーネント**で、**textSummary** コンポーネントを選択します。

1. Action で****、Set **value **を選択します。

1. **Set value to** に「」と入力します**\$1\$1results.invokeBedrockAutomation\$1\$1**。

## ステップ 5: アプリケーションを**テスト**環境に公開する
<a name="tutorial-conversational-bedrock-steps-publish"></a>

通常、アプリケーションの構築中は、プレビューして外観を確認し、その機能の初期テストを実行することをお勧めします。ただし、アプリケーションはプレビュー環境で外部サービスとやり取りしないため、代わりにアプリケーションをテスト環境に公開して、Amazon Bedrock からの送信リクエストと受信レスポンスをテストできるようにします。

**アプリケーションをテスト環境に公開するには**

1. App Builder の右上隅で、**発行**を選択します。

1. テスト環境のバージョンの説明を追加します。

1. SLA に関するチェックボックスを確認して選択します。

1. **[開始]** を選択します。発行には最大 15 分かかる場合があります。

1. (オプション) 準備ができたら、**共有**を選択し、プロンプトに従って他のユーザーにアクセスを許可できます。App Studio アプリの共有の詳細については、「」を参照してください[公開されたアプリケーションの共有](application-share.md)。

アプリケーションをテストしたら、再度**発行**を選択してアプリケーションを本番環境に昇格させます。本番稼働環境のアプリは、エンドユーザーが共有されるまで利用できないことに注意してください。さまざまなアプリケーション環境の詳細については、「」を参照してください[アプリケーション環境](applications-publish.md#application-environments)。

## (オプション) クリーンアップする
<a name="tutorial-conversational-bedrock-steps-cleanup"></a>

これで、チュートリアルは正常に完了し、Amazon Bedrock を使用して App Studio にテキスト要約アプリを構築しました。アプリを引き続き使用することも、このチュートリアルで作成したリソースをクリーンアップすることもできます。次のリストには、クリーンアップするリソースのリストが含まれています。
+ App Studio で作成された Amazon Bedrock コネクタ。詳細については、「[コネクタの表示、編集、削除](viewing-deleting-connectors.md)」を参照してください。
+ App Studio のテキストサマリアプリ。詳細については、「[Deleting an application](applications-delete.md)」を参照してください。
+ IAM コンソールで作成された IAM ロール。詳細については、「 *AWS Identity and Access Management ユーザーガイド*」の[「ロールまたはインスタンスプロファイルの削除](https://docs.aws.amazon.com/IAM/latest/UserGuide/id_roles_manage_delete.html)」を参照してください。
+ Claude 3 Sonnet を使用するようにモデルアクセスをリクエストし、アクセスを元に戻す場合は、[「Amazon Bedrock ユーザーガイド」の「Amazon Bedrock 基盤モデルへのアクセスを管理する](https://docs.aws.amazon.com/bedrock/latest/userguide/model-access.html)」を参照してください。 **