構築から埋め込みへ：AWS Amplify、AWS CDK、Amazon Q Business を使用した生成 AI アプリの作成と埋め込み

企業の環境では、カスタムアプリケーションが業務の改善、生産性の向上、組織内の知識の集中化において重要な役割を果たします。しかし、これらのツールは多くの場合、関連する情報にユーザーが素早く直感的にアクセスできるような賢い会話型インターフェイスが備わっていません。膨大な組織データから文脈に応じた洞察を把握したり、複雑なクエリを解釈したりするには、従来のダッシュボードや検索バーでは限界があります。

生成 AI は、この課題に対する強力なソリューションを提供します。開発者が制御できるアプリケーションに会話型エクスペリエンスを直接埋め込むことで、組織は、ユーザーが自然言語で質問をし、正確で行動可能な回答を受け取れるようにできます。Amazon Q Business は、大規模な言語モデルのインフラストラクチャを管理する負担なしに、この機能をセキュアな埋め込み可能な HTML インラインフレーム (iframe) 経由で提供します。

このブログは、ナレッジポータル、サポートダッシュボード、社内向け Web ツールなどのカスタムアプリケーションやエンタープライズ向けアプリケーションを構築する開発者を対象としています。Amazon Q Business、AWS Amplify Gen 2、および AWS Cloud Development Kit (CDK) を使用して、生成 AI 搭載の会話型エクスペリエンスをアプリケーションに埋め込む方法を示します。Amazon Q Business をアプリケーションに埋め込むには、アプリケーションのソースコードへのアクセスが必要となり、カスタムコードの埋め込みが不可能なサードパーティ SaaS プラットフォームでは利用できません。

このブログでは以下について紹介します。

社内文書やナレッジベースへの会話形式によるアクセス
企業の ID 管理システムとの安全な統合
複雑なバックエンド実装なしで、スケーラブルな AI 駆動型検索の実現
AWS Amplify のフロントエンドおよびバックエンド開発機能を使用したスピーディーなデプロイ

Amazon Q Business と AWS Amplify を使えば、アプリに生成 AI を素早く追加でき、生産性を向上、手作業を削減、意思決定を加速できます。

Figure 1 Submitting a prompt to Amazon Q Business iframe.

内部アプリケーションに生成 AI アシスタントを組み込むには、以下の AWS サービスを活用します。

AWS Amplify: セキュアなフルスタックアプリケーションを構築、デプロイ、管理するための包括的なツールとサービスのセットです。認証には Amazon Cognito、ストレージには Amazon S3、その他の AWS インフラストラクチャ構築には CDK とタイトに統合されていることで、フロントエンドとバックエンドの開発を簡素化します。
Amazon Cognito: アプリケーションに認証と承認機能を追加するためのマネージドサービスです。Cognito は、ユーザー登録、サインイン、アクセス制御をサポートし、エンタープライズアクセス管理のために外部のアイデンティティプロバイダー (IdP) と連携することができます。
AWS IAM Identity Center: IAM Identity Center は、内部ユーザーに対してセキュアで集中管理されたアクセス管理を可能にします。Okta、Microsoft Entra ID、Ping Identity などのエンタープライズプロバイダーとのアイデンティティ連携をサポートしており、組織が統一された認証ポリシーを適用し、埋め込み型 AI アシスタントへのアクセスを許可されたユーザーのみに制限することができます。
Amazon Q Business: 内部アプリケーションに iframe 経由で埋め込むことができるマネージド型の生成 AI サービスです。Amazon Q Business は Amazon S3 などのエンタープライズデータソースに接続し、インテリジェントなアシスタントインターフェースを通じて自然言語のクエリを可能にします。セキュアなアクセスをサポートしており、IAM Identity Center と統合することでエンタープライズでの連携利用が可能です。
Amazon Simple Storage Service (S3): 内部文書、PDF、マニュアル、その他の非構造化コンテンツを保存するための、耐久性とスケーラビリティに優れたオブジェクトストレージサービスです。これらのファイルが Amazon Q Business アシスタントのナレッジベースとなり、従業員からの問い合わせに対してコンテキストを含む応答を可能にします。

Figure 2 From Build to Embed Architecture Diagram

前提条件

AWS アカウント: AWS Amplify は AWS フリーティアの一部であることに注意してください。
インストール: npm (v9 以降)、git (v2.14.1 以降)。
テキストエディタ: このガイドでは VSCode を使用しますが、お好みの IDE を使用できます。
サンプルデータセット: PDF をアップロードするか、Kaggle で利用可能なサンプルデータセットを確認してください。
IAM Identity Center : IAM ID センターインスタンスを有効化し、ID センターディレクトリにユーザーを追加する必要があります。

リポジトリのクローン

ステップ 1: AWS サンプルのリポジトリに移動し、自分の GitHub リポジトリにフォークしてください。

ステップ 2: ターミナルで以下のコマンドを実行して、アプリをクローンしてください。

git clone https://github.com//sample-build-and-embed-genai-apps.git

ステップ3：以下のコマンドをターミナルで実行して、新しくクローンしたリポジトリをVSCodeでアクセスします。

cd sample-build-and-embed-genai-apps 
code . -r

VSCode は、リポジトリフォルダを開き、次のセクションで確認するアプリのコードを含む Amplify フォルダが表示されます。

Figure 3 Opening code in VSCode.

ステップ4：以下のコマンドを実行して、Amplify Gen 2 パッケージを含む必要なパッケージをインストールします。

npm install

Amplify のバックエンド

最終的なアプリ (投稿の冒頭の GIF 動画で確認できます) では、ユーザーはアプリケーションにログインし、チャットボットアイコンをクリックして、連携アクセス認証を行います (これは iframe を通して Amazon Q Business の Web エクスペリエンスにアクセスするためです)。その後、Amazon Q Business に質問を開始できるようになります。このコードは、クローンしたリポジトリにあります。ここでは、Amplify で開発およびホストされた検索エンジンアプリを作成する主要なステップを説明します。

Figure 4 Amplify Gen 2 Project Folder Structure.

amplify/auth/resource.ts ファイル (図 5) では、アプリケーションにアクセスしファイルをアップロードするために、ユーザーがメールアドレスでログインする必要がある認証が設定されています。メール認証によってログインを有効にすることで、機密データと機能にアクセスできるのが認証されたユーザーのみという制限を設けています。

import { defineAuth } from '@ aws-amplify/backend';
 
 export const auth = defineAuth({
    loginWith: {
        email: true,
    },
});

Figure 5 defineAuth in amplify/auth/resource.ts

amplify/storage/resource.ts ファイル (図 6) では、Amplify ストレージを構成して、セキュアでユーザー固有のファイル管理を有効にしています。
defineStorage 関数は、ストレージリソースを分かりやすい名前 q-datasource-bucket でインスタンス化し、protected/{entity_id}/* パスにアクセス制御を適用します。
この構成により、認証済みのユーザーは自身のスコープ付きディレクトリ内のファイルを読み取ることができ、ファイル所有者には読み取り、書き込み、削除のアクセス権限が付与されます。

import { defineStorage } from "@ aws-amplify/backend";
 
 export const storage = defineStorage({
    name: "q-datasource-bucket",
    access: (allow) => ({
        'protected/{entity_id}/*': [ 
            allow.authenticated.to(['read']),
            allow.entity('identity').to(['read', 'write', 'delete'])
        ] 
    })
});

Figure 6 defineStorage in amplify/storage/resource.ts

amplify/backend.ts（図7）ファイルでは、アプリケーションの重要な側面を設定するために CDK ライブラリをインポートします。aws-iam モジュールは権限管理に使用され、aws-kms は暗号化とキー管理を処理し、aws-qbusiness は Amazon Q Business をスタックにインテグレーションします。各ライブラリは、アプリケーションが安全であり、AWSサービスと適切に統合されるよう、特定の役割を果たしています。

import * as iam from 'aws-cdk-lib/aws-iam';
 import * as kms from 'aws-cdk-lib/aws-kms';
 import * as q from 'aws-cdk-lib/aws-qbusiness';

Figure 7 import CDK libraries in amplify/backend.ts

次に、backend.createStack() (図 8) メソッドを使用して、カスタムリソースを格納するための新しい CloudFormation スタックの生成をバックエンドに指示します。AWS Amplify Gen 2 では、CDK を使用してカスタムリソースを作成できるため、Amplify ライブラリ以外のサービスを利用でき、スケーラビリティを備えた CloudFormation テンプレートでスタックをバックアップできます。たとえば、Generative AI スタックを作成し、カスタム AWS リソースを追加する前に AI 関連サービスの論理的な構成をすることができます。これでカスタム AWS リソースの定義を開始できます!

export const customResource = backend.createStack("CustomResourceStack");

Figure 8 define backend stack for custom resources in amplify/backend.ts

CustomResourceStack のデプロイ中に、複数のIAMロール、信頼ポリシー、インラインアクセスポリシーが作成されるのが確認できます。これらはすべて、Amazon Q Businessが安全に機能し、他のAWSサービスと連携するために不可欠なものです。これらには以下が含まれます。

サービスアクセスロール (QApplicationServiceAccessRole) は、Amazon Q Business が CloudWatch を経由してログとメトリクスを出力できるようにするためのロールです。
Web エクスペリエンスロール (QWebExperienceRole と QWebExperienceRole) は、埋め込みアシスタントがフルアプリケーションコンテキストとユーザーインタラクションで動作できるようにするためのロールです。
データソースロール (QBusinessS3Role) は、Amazon Q Business が Amplify ストレージによってプロビジョニングされた S3 バケットからドキュメントを読み取ることを許可するための専用のロールです。

各ロールには、誰がそのロールを引き受けられるかを定義するトラストポリシーと、特定のアクションとリソースへのアクセス権を付与する詳細なアクセス許可が含まれています。Amazon Q Business データソース向けの必要なポリシー構造の詳細は、Amazon Q Business コネクタの IAM ロールドキュメントで確認できます。

Amazon Q Business のセットアップ

すべての基盤となる IAM ロールとポリシーが整ったところで、埋め込み型生成 AI アシスタントを動かす中核コンポーネントである Amazon Q Business アプリケーションを定義する準備が整いました。amplify/backend.ts ファイル（図9）で、CDK を使用して、必要な設定、サブスクリプションプラン、IAM 統合を宣言的にインスタンス化できます。

export const qapp = new q.CfnApplication(customResource, "Qapp", {
  displayName: "Qapp",
  description: "CDK instantiated Amazon Q Business App",
  autoSubscriptionConfiguration: {
    autoSubscribe: "ENABLED",
    defaultSubscriptionType: "Q_LITE"
  },
  identityType: "AWS_IAM_IDC",
  roleArn: `arn:aws:iam::${ customResource.account }:role/aws-service-role/qbusiness.amazonaws.com/AWSServiceRoleForQBusiness`,
  /* REPLACE WITH YOUR IAM IDENTITY CENTER ARN */
  // identityCenterInstanceArn: "arn:aws:sso:::instance/",
});

Figure 9 defining Q Business Application in amplify/backend.ts

このステップでは正式に Amazon Q Business アプリケーションを作成し、サービスリンクロール (AWSServiceRoleForQBusiness) と関連付けます。デプロイ前に必ず IAM Identity Center ARN を置き換えて、ユーザーのフェデレーションアクセスを有効にしてください。

インデックスの作成

Amazon Q Business のインデックスは、企業データを効率的に保存、整理、取得するために使用されます。保存されたドキュメントの構造化されたクエリを可能にするためにインデックスが必要であり、これによりチャットボットはユーザークエリに基づいて関連する回答を取得できます。amplify/backend.ts（図10）の以下の CDK コードは、Amazon Q Business アプリケーション内にインデックスを設定します。

export const qIndex = new q.CfnIndex(customResource, "QIndex", {
  displayName: "QIndex",
  description: "CDK instantiated Amazon Q Business App index",
  applicationId: qapp.attrApplicationId,
  capacityConfiguration: {
    units: 1,
  },
  type: "STARTER",
});

Figure 10 defining Q Business Index in amplify/backend.ts

ここでは、STARTER インデックスタイプが選択されています。これはテストや小規模なデプロイメントに適した基本的な構成です。本番環境での使用には、スケーラビリティ、可用性、高度な機能のサポートを確保するために、ENTERPRISE などの上位ティアが必要です。詳細は Amazon Q Business の料金とティアのガイダンスを参照してください。

Retriever の作成

Retriever はインデックスから関連ドキュメントを取得することで検索機能を強化します。Amazon Q Business では、Retriever はインデックスに接続し、クエリが意味のある応答を返すことを保証します。amplify/backend.ts（図11）の次の CDK コードは、Amazon Q Business アプリケーション内に Retriever を設定します：

export const qRetriever = new q.CfnRetriever(customResource, "QRetriever", {
  displayName: "QRetriever",
  applicationId: qapp.attrApplicationId,
  type: "NATIVE_INDEX",
  configuration: {
    nativeIndexConfiguration: {
      indexId: qIndex.attrIndexId,
    },
  }
});

Figure 11 defining Q Business Retriever in amplify/backend.ts

この Retriever は、以前に作成された qIndex と連携するように構成されており、Amazon Q Business のインデックス付きコンテンツを効率的に取得することを保証します。

データソースの定義

データソースは、Amazon Q Business アプリケーションがその知識ベースのためにデータを取得する場所です。この場合、データソースは、以前に Amplify Storage の設定 amplify/storage/resource.ts で定義され、amplify/backend.ts（図12）ファイルで参照されているAmazon S3バケットです。このバケットには、Amazon Q Businessがインデックスを作成して分析するドキュメントが保存されています。

export const qDataSource = new q.CfnDataSource(customResource, "QDataSource", {
  displayName: ` ${ backend.storage.resources.bucket.bucketName } `,
  applicationId: qapp.attrApplicationId,
  indexId: qIndex.attrIndexId,
  configuration: {
    type: "S3",
    syncMode: "FULL_CRAWL",
    connectionConfiguration: {
      repositoryEndpointMetadata: {
        BucketName: backend.storage.resources.bucket.bucketName 
      }
    },
    repositoryConfigurations: {
      document: {
        fieldMappings: [ 
          {
            indexFieldName: "s3_document_id",
            indexFieldType: "STRING",
            dataSourceFieldName: "s3_document_id"
          }
        ] 
      }
    },
  },
  roleArn: qBusinessS3Role.roleArn 
});

Figure 12 defining Q Business Data Source in amplify/backend.ts

このセットアップの主要要素

syncMode: “FULL_CRAWL” は、S3バケット内のすべてのドキュメントがインデックス化されることを保証します。
フィールドマッピングは、インデックス作成のためのドキュメントメタデータの構造を定義します。

Amazon Q Business Web エクスペリエンスの作成

Amazon Q Businessの Web エクスペリエンスは、ユーザーがカスタマイズされたチャットボットに組み込まれた Amazon Q Business とやり取りできるようにするフロントエンドです。このコンポーネントはamplify/backend.ts（図13）ファイルで定義されており、許可された Web サイトのオリジン、ブランディング、認証を含め、チャットボットインターフェースがどのように表示され機能するかを定義します。

export const qWebExperience = new q.CfnWebExperience(customResource, "QWebExperience", {
  applicationId: qapp.attrApplicationId,
  origins: [ 
    /* REPLACE WITH YOUR AMPLIFY DOMAIN URL */
    "https://main..amplifyapp.com",
  ],
  samplePromptsControlMode: "ENABLED",
  subtitle: "AnyCompany Generative AI Assistant",
  title: "AnyCompany Q App",
  welcomeMessage: "Welcome to your Amazon Q Business Application !",
  roleArn: qWebExperienceRole.roleArn 
});

Figure 13 defining Q Business Web Experience in amplify/backend.ts

Web エクスペリエンス設定

origins：チャットボットを<iframe>経由で埋め込むことを許可する Web サイトドメインを指定します。Amplify アプリのデプロイされた URL がここに正しく記載されていることを確認してください。
samplePromptsControlMode：チャットボット UI 内に事前定義されたサンプルプロンプトを保存できるようにします。
title & subtitle：チャットボットの表示名と追加の説明を設定します。
welcomeMessage：ユーザーがチャットウィンドウを開いたときに最初に表示されるメッセージです。

Amazon Q Business とフロントエンドの統合

Web エクスペリエンスを設定した後、iframe を使用して Amazon Q Business Web エクスペリエンスを埋め込むことができます。src/components/qframe.tsx（図14）では、src は amplify_outputs.json ファイルから動的に取得されます。このファイルにはバックエンドによってエクスポートされた Q Web エクスペリエンスのデプロイされた URL が含まれています。ユーザーは新しいブラウザタブで認証を求められ、その後チャットセッションは埋め込まれた iframe 内で続行されます。

import React from 'react';
 import rawOutputs from '../../amplify_outputs.json';
 
 const outputs = rawOutputs as unknown as {
    custom: {
        q_business_url: string ;
    };
};
 
 const QFrame: React.FC = () => {
    const qBusinessDeployedURL = outputs.custom.q_business_url ;
 
    return (
        
    );
};
 
 export default QFrame ;

Figure 14 Embeds Amazon Q Business via iframe using config URL.

アプリの実行

ステップ1：Amplifyは各開発者に個人用のクラウドサンドボックス環境を提供し、迅速な構築、テスト、反復のための隔離された開発スペースを提供します。クラウドサンドボックス環境を開始するには、新しいターミナルウィンドウを開き、次のコマンドを実行します。

npx ampx sandbox

ステップ2：以下のコマンドを実行して、localhost の開発サーバーを起動します。

npm run dev

前述のコマンドを実行してアプリケーションを起動した後、Amplify Authenticator コンポーネントの「Create Account」機能を使用し、メールアドレスとパスワードを入力します。確認メールを通じてユーザー設定を完了した後、ログインしてアプリケーションにアクセスします。（図15）

Figure 15 Logging in using the Amplify Authenticator component during local development testing.

開発サーバーでアプリを操作した後、ターミナルで Ctrl + C を押してサンドボックス環境を停止します。その後、「npx ampx sandbox delete」と入力し、サンドボックス環境のリソースを削除するよう求められたら「Y」と入力して確認します。（図16）

Figure 16 Deleting all resources in the Amplify sandbox environment

バックエンドリソースのデプロイ

アプリが期待通りに機能することを確認したら、「Amplify Hosting へのアプリのデプロイを開始する」の手順に従ってバックエンドリソースをデプロイします。デプロイのリポジトリとして GitHub が選択されていることを確認してください。

Amplify ドメインエンドポイントの更新

バックエンド CDK コードで、amplify/backend.ts に移動し、origins フィールドのプレースホルダーを実際の Amplify ドメインに置き換えます。このドメインは、前のセクションで作成したアプリ名の Amplify コンソールで確認できます。（図17）

origins: [ 
  "https://main..amplifyapp.com",
 ],

Figure 17 Updating the origins field in the CDK backend code with your Amplify app ’ s deployed domain.

サンプルデータのアップロード

デプロイしてアプリケーションにサインインした後、Amplify によって生成されたアプリのドメイン URL にアクセスしてサンプルデータをアップロードします。ファイルをアップロードした後、AWS Amplify コンソールのストレージセクション内の public/フォルダを確認してアップロードを確認します。（図18）

Figure 18 Uploading sample data in deployed app.

Amazon Q Business Web エクスペリエンスへのユーザーアクセスの設定

次に、Qapp では、埋め込まれた Web エクスペリエンスにログインできるユーザーを割り当てる必要があります。このユーザーは、前提条件の間に IAM Identity Center を使用して作成されているはずです。新規または既存のユーザーを追加するには、Amazon Q Business コンソールで、Qapp を選択し、「User access」セクションに移動して「Manage user access」をクリックし、続いて「Add groups and users」をクリックします。（図19）

Figure 19 Assigning user access via IAM Identity Center.

ユーザーがすでに存在する場合は、「Assign existing users and groups」を選択し、割り当てたいユーザーを検索します。追加したら、選択を確認して Amazon Q Business Web エクスペリエンスへのアクセスを許可します。（図20）

Figure 20 Granting access to existing IAM Identity Center users.

S3データをQ Businessインデックスに同期する

サンプルドキュメントをアップロードした後、Amazon S3 バケットを Amazon Q Business インデックスと同期して、データを保存および取得します。Amazon Q Business コンソールから、「Data Sources」に移動し、「amplify-your-unique-bucket-name」を選択します。次に、「Sync now」を選択します（図21）。

Figure 21 Syncing uploaded S3 data to Q Business index.

データソースの同期が完了し、最後の同期ステータスが「Completed」と表示されたら、Amazon Q Business Web エクスペリエンスの使用を開始する準備がほぼ整いました。続行する前に、サインインしていることを確認してください。サインインが成功すると、「サインイン完了」というメッセージが表示されます。その時点でアプリケーションに戻ることができます—認証が完了しました。（図22）

Figure 22 Confirming sign-in completion for authentication.

サインインしたので、アプリケーションを通じて Amazon Q Business Web エクスペリエンスに直接クエリを開始できます！（図23）

Figure 23 Querying Amazon Q Business in your application.

クリーンアップ

AWS Identity Center コンソールインスタンスを削除するには、「Settings」に移動し、「Management」タブを開きます。「Delete IAM Identity Center Instance」セクションで、「Delete」を選択してインスタンスを削除します。

最後に、AWS Amplify コンソール内で、このブログに従って作成したアプリケーションの「View App」を選択します。次に、「App Settings」を選択し、「General Settings」を選択します。最後に、「Delete App」を選択して、アプリケーションと関連するバックエンドリソースを削除します。なお、Amplify はプロジェクトの一部として作成されたすべてのバックエンドリソースを削除します。

まとめ

このブログでは、Amazon Q Business をカスタムアプリケーションに統合するための主要なステップについて説明しました。AWS Amplify を使用したフロントエンドのセットアップ、CDK を使用したQ Business アプリケーションの構成、iframe を介したチャットボットの埋め込みです。これらの AWS サービスとツールを活用することで、ユーザーの対話と知識へのアクセシビリティを向上させるAI駆動の検索体験を作成できます。

さあ、あなたの番です！会話型 AI をアプリケーションに埋め込み、Amazon Q Business で新しいレベルの生産性と意思決定を解き放ちましょう。そして、Amazon Q Developer で開発ワークフローを強化しましょう。生成 AI とクラウドコンピューティングのパワーを活用して、開発を加速し、イノベーションを推進するモダンなアプリケーションを迅速に構築しましょう。

本記事は「From Build to Embed: Creating and Embedding GenAI Apps with AWS Amplify, CDK, and Amazon Q Business」翻訳したものです。

Amazon Web Services ブログ