こんにちは、エンジニアのyokomachiです。
この記事はGeekFeed Advent Calendar 2024の14日目のエントリとなります。
今回は2024年11月にリリースされたAWS Amplify AI Kitを使用したAIチャットアプリの開発をやってみます。
AWS Amplify launches the full-stack AI kit for Amazon Bedrock – AWS
AWS Amplify AI Kitとは？
概要
AWS Amplify AI Kitは、アプリケーション開発サービスAWS Amplify向けにAI機能を備えたWebアプリケーションを迅速に開発するために提供されるツールキットのことです。
Amplify Gen2のデータソースにAmazon Bedrockから提供されるLLMを設定することで、AIチャット機能や画像生成機能などの生成AI機能を簡単にWebアプリケーションに統合することができるようになります。
アーキテクチャ
公式のドキュメントを見るとAI Kitで利用するアーキテクチャについて説明されています。
AI KitではAmplifyのバックエンドとして、以下２種類のルートと呼ばれるAPIエンドポイントのようなものを構築することで、認証やルートの選択、LLMへのインプット・アウトプット、LLMがアクセスできるデータなどを定義できるとのことです。
- Conversation（会話）：マルチターンの非同期API。会話履歴はDynamoDBに保存される
- Generation（生成）：単一の同期API。構造化データの精製などを行うAppSyncクエリとして提供される
今回はこのうちConversationに関して実際にデモを構築してみます。
実際に構築されるバックエンドの要素はこの後のデモ構築後に見ていきましょう。
デモアプリの構築
先に完成後の画面をお見せするとこんな感じになっています。
また、今回作成したデモアプリのソースコードについては以下のリポジトリをご参照ください
https://github.com/n-yokomachi/amplify_ai_kit_tutorial
構成情報
今回使用するライブラリなどのバージョンは以下の通りです。
- Windows 11 Home 23H2
- Node.js v23.0.0
- npm 10.9.0
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
// package.jsonから一部引用 "dependencies": { "@aws-amplify/backend": "^1.9.0", "@aws-amplify/backend-cli": "^1.4.3", "@aws-amplify/ui-react": "^6.7.1", "@aws-amplify/ui-react-ai": "^1.1.0", "aws-amplify": "^6.10.2", "react": "^18.3.1", "react-dom": "^18.3.1" }, "devDependencies": { "@eslint/js": "^9.15.0", "@types/react": "^18.3.12", "@types/react-dom": "^18.3.1", "@vitejs/plugin-react": "^4.3.4", "eslint": "^9.15.0", "eslint-plugin-react-hooks": "^5.0.0", "eslint-plugin-react-refresh": "^0.4.14", "globals": "^15.12.0", "typescript": "~5.6.2", "typescript-eslint": "^8.15.0", "vite": "^6.0.1" } |
バックエンドの構築
まずはバックエンドの構築を行います。
Amplify Gen2のCDKによってバックエンドをデプロイします。
Bedrockのモデルアクセス有効化
最初に、今回利用するLLMのモデルアクセスを有効化しておきます。
Amazon BedrockのAWSコンソール上でアクセスリクエストを出します。
今回はAnthropic Claude 3.5 Sonnet（ap-northeast-1）を使用します。
ちなみに特に指定しない場合、Amplifyがデプロイされるリージョンのモデルが使われるようです
Models – React – AWS Amplify Gen 2 Documentation
Your Amplify project must be deployed to a region where the foundation model you specify is available. See Bedrock model support for the supported regions per model.
Amplify backendの構築・Sandboxの起動
続いてローカルPCからAmplify backendの構築を行います。
Manual installation – React – AWS Amplify Gen 2 Documentation
上のリンクの手順に沿って、今回プロジェクトを作成するディレクトリで以下のコマンドを実行します。
|
1 2 |
npm create amplify@latest |
コマンドが走り切ると以下のようなリソースが作成されます。
Amplify Gen2では開発者ごとにバックエンドのサンドボックス環境を構築することができるので、
以下のコマンドでそのサンドボックス環境をデプロイします。
|
1 2 |
npx ampx sandbox --profile {profile_name} |
AWS CLIの認証を個別のプロファイル名で行っている場合はprofileオプションで指定します。
コマンドの初回実行時は↓のようにブラウザの画面が起動し、デプロイ前のbootstrapの確認が行われます。
bootstrap中・・・
bootstrapの完了後にCloudFormationのコンソールを見てみると、
サンドボックス環境のCDKToolkitがデプロイされていることがわかります。
bootstrapが完了したので、もう一度サンドボックスのデプロイコマンドを実行します。
|
1 2 |
npx ampx sandbox --profile {profile_name} |
すると今度はデプロイそのものが走ってサンドボックスが構築されるとともに、ターミナルでファイルの変更がウォッチされます。
バックエンドのスタックが変更されるたびにサンドボックス環境にリアルタイムに反映されるようになります。
AIバックエンドの構築
バックエンドの基礎ができたので続いてAI機能のバックエンドを構築します。
バックエンドのデータ定義を行っているファイルamplify/data/resource.tsを以下のように記述します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
import { a, defineData, type ClientSchema } from '@aws-amplify/backend'; const schema = a.schema({ // Conversation AI route chat: a.conversation({ aiModel: a.ai.model('Claude 3.5 Sonnet'), systemPrompt: '貴方は私の秘書です。日本語に対しては日本語で対応してください。', }) .authorization((allow) => allow.owner()), }); export type Schema = ClientSchema<typeof schema>; export const data = defineData({ schema, authorizationModes: { defaultAuthorizationMode: "userPool", }, }); |
フロントエンドの構築
続いてフロントエンドを構築します
プロジェクトの作成&Amplify クライアントライブラリのインストール
フロントエンドプロジェクトはVite + Reactで作成します
|
1 2 3 4 5 6 |
# Reactプロジェクトの作成 npm create vite@latest amplify_ai_kit_tutorial -- --template react-ts # Amplifyのクライントライブラリのインストール npm add aws-amplify @aws-amplify/ui-react @aws-amplify/ui-react-ai |
ここで１個ミスしました。
何も考えずにReactプロジェクト作成していたら、先に作成していたAmplify Backendのpackage.jsonを上書きしてしまいました。
以下のコマンドで再度マニュアルインストールします。
|
1 2 |
npm add --save-dev @aws-amplify/backend@latest @aws-amplify/backend-cli@latest typescript |
バックエンドとの接続
Amplify Backendと接続するための設定を読み込むために以下のコードをsrc/main.tsxに追記します
|
1 2 3 4 5 6 |
import { Amplify } from 'aws-amplify'; import '@aws-amplify/ui-react/styles.css'; import outputs from '../amplify_outputs.json'; Amplify.configure(outputs); |
Conversationフック
フロントエンドで利用するAI機能のフックをエクスポートするclient.tsファイルを作成します。
|
1 2 3 4 5 6 7 |
import { generateClient } from "aws-amplify/api"; import { Schema } from "../amplify/data/resource"; import { createAIHooks } from "@aws-amplify/ui-react-ai"; export const client = generateClient<Schema>({ authMode: "userPool" }); export const { useAIConversation, useAIGeneration } = createAIHooks(client); |
今回はConversationの機能だけ試してみたいと思うので、使うフックはuseAIConversationとなります。
最後にsrc/App.tsxにAI KitのUIコンポーネントを記述します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
import { Authenticator } from "@aws-amplify/ui-react"; import { AIConversation } from '@aws-amplify/ui-react-ai'; import { useAIConversation } from './client'; export default function App() { const [ { data: { messages }, isLoading, }, handleSendMessage, ] = useAIConversation('chat'); return ( <Authenticator> <AIConversation messages={messages} isLoading={isLoading} handleSendMessage={handleSendMessage} /> </Authenticator> ); } |
デモ
以上で構築は完了です。
ローカルでビルドして動きを確認してみます。
|
1 2 |
npm run dev |
最初はこんな感じのサインイン/サインアップ画面が表示されます。
メールアドレスでサインアップをすると、以下のようなチャット画面が表示されます。
インプットを送ると、ストリーミング形式でニョロニョロと回答を返してくれます。
このストリーミング形式で回答を取得する処理については以下の記事が参考になります。
Build fullstack AI apps in minutes with the new Amplify AI Kit | Front-End Web & Mobile
Amplify AI Kitの黒魔術から学ぶ、Bedrock 生成AIアプリの実装アイディア
バックエンドのリソース確認
今回のAmplify AI Kitのサンドボックスデプロイで作成されたリソースをざっくり確認してみましょう
CloudFormation
CloudFormationには、Amplify Backendで定義したauth, dataごとにスタックが作成されていることがわかります。
Auth系のリソース
今回はUserPoolによる認証を設定したため、CognitoのUserPoolが作成されています。
こんな形で先ほど作成したユーザーが記録されていることが確認できます。
Data系のリソース
AppSync APIが作成されています。
モデルとやり取りするLambda、会話記録を保存するDynamoDBがデータソースに設定されています。
お片付け
最後にサンドボックス環境のお片づけをして終わりにしましょう
|
1 2 |
npx ampx delete --profile {profile_name} |
おわりに
今回はAmplify AI Kitのうち、特にConversation機能に関して実際にデモを環境して確認してみました。
Amplify Gen2自体が初めて触ったのでなにもかも新しい感触でしたが、Tool Kitの形でフックやUIコンポーネントなどが用意されていたおかげですぐにデモアプリの構築ができ、WebアプリとBedrockの連携について手早く確認することができました。
とはいえ、実践的にWebアプリを開発するためにはまだまだAmplify Gen2やAI KitのToolへの理解が足りていないので、もう少し規模の大きいアプリケーションの開発をいずれしてみたいと感じました。
参考
AI kit – AWS Amplify Gen 2 Documentation
Build fullstack AI apps in minutes with the new Amplify AI Kit | Front-End Web & Mobile
[アップデート] AWS Amplify AI kitが公開！ AI 機能を備えた Web アプリを迅速に構築できるようになりました | DevelopersIO
- Amazon ConnectでNGワードをリアルタイムに検知してSlackに通知する - 2024-12-16
- AWS Amplify AI KitでAIチャットアプリを爆速で作ってみる - 2024-12-14
- AWS LambdaをC#で実装する（ついでにラムダ式を書く） - 2024-12-09
- Amazon Connect Tasksの手動作成と自己割り当て、タスクテンプレートを試してみる - 2024-12-07
- Remix SPAモードで静的WebサイトをGithub Pagesにデプロイする - 2024-11-05
【採用情報】一緒に働く仲間を募集しています
