カテゴリ一 AWS サーバーレスブログ開発構築 AI クラウド

2024-12-14 #AWS #AWS Amplify #Amazon Bedrock #生成系AI

こんにちは、エンジニアの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

// 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"
  }

// 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

上のリンクの手順に沿って、今回プロジェクトを作成するディレクトリで以下のコマンドを実行します。

npm create amplify@latest

1 2	npm create amplify@latest

コマンドが走り切ると以下のようなリソースが作成されます。

Amplify Gen2では開発者ごとにバックエンドのサンドボックス環境を構築することができるので、

以下のコマンドでそのサンドボックス環境をデプロイします。

npx ampx sandbox --profile {profile_name}

1 2	npx ampx sandbox --profile {profile_name}

AWS CLIの認証を個別のプロファイル名で行っている場合はprofileオプションで指定します。

コマンドの初回実行時は↓のようにブラウザの画面が起動し、デプロイ前のbootstrapの確認が行われます。

bootstrap中・・・

bootstrapの完了後にCloudFormationのコンソールを見てみると、

サンドボックス環境のCDKToolkitがデプロイされていることがわかります。

bootstrapが完了したので、もう一度サンドボックスのデプロイコマンドを実行します。

npx ampx sandbox --profile {profile_name}

1 2	npx ampx sandbox --profile {profile_name}

すると今度はデプロイそのものが走ってサンドボックスが構築されるとともに、ターミナルでファイルの変更がウォッチされます。

バックエンドのスタックが変更されるたびにサンドボックス環境にリアルタイムに反映されるようになります。

AIバックエンドの構築

バックエンドの基礎ができたので続いてAI機能のバックエンドを構築します。

バックエンドのデータ定義を行っているファイルamplify/data/resource.tsを以下のように記述します。

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) =&gt; allow.owner()),
});

export type Schema = ClientSchema&lt;typeof schema&gt;;

export const data = defineData({
  schema,
  authorizationModes: {
    defaultAuthorizationMode: "userPool",
  },
});

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で作成します

# 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プロジェクトの作成

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を上書きしてしまいました。

以下のコマンドで再度マニュアルインストールします。

npm add --save-dev @aws-amplify/backend@latest @aws-amplify/backend-cli@latest typescript

1 2	npm add --save-dev @aws-amplify/backend@latest @aws-amplify/backend-cli@latest typescript

バックエンドとの接続

Amplify Backendと接続するための設定を読み込むために以下のコードをsrc/main.tsxに追記します

import { Amplify } from 'aws-amplify';
import '@aws-amplify/ui-react/styles.css';
import outputs from '../amplify_outputs.json';

Amplify.configure(outputs);

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ファイルを作成します。

import { generateClient } from "aws-amplify/api";
import { Schema } from "../amplify/data/resource";
import { createAIHooks } from "@aws-amplify/ui-react-ai";

export const client = generateClient&lt;Schema&gt;({ authMode: "userPool" });
export const { useAIConversation, useAIGeneration } = createAIHooks(client);

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コンポーネントを記述します。

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 (
    &lt;Authenticator&gt;
      &lt;AIConversation
        messages={messages}
        isLoading={isLoading}
        handleSendMessage={handleSendMessage}
      /&gt;
    &lt;/Authenticator&gt;
  );
}

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 (

<AIConversation

messages={messages}

isLoading={isLoading}

handleSendMessage={handleSendMessage}

</Authenticator>

);

}

デモ

以上で構築は完了です。

ローカルでビルドして動きを確認してみます。

npm run dev

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がデータソースに設定されています。

お片付け

最後にサンドボックス環境のお片づけをして終わりにしましょう

npx ampx delete --profile {profile_name}

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

この記事を書いた人
最近の記事

サイト管理者

株式会社ギークフィードのサイト編集担当者です。弊社へのお問い合わせ・質問は、お問い合わせページからお願いいたします。

サイト管理者 (全て見る)

中級figma教室 - 2024-12-24
おすすめガジェット紹介！2024年12月編 - 2024-12-21
Amazon ConnectでNGワードをリアルタイムに検知してSlackに通知する - 2024-12-16
AWS Amplify AI KitでAIチャットアプリを爆速で作ってみる - 2024-12-14
AWS LambdaをC#で実装する（ついでにラムダ式を書く） - 2024-12-09

【採用情報】一緒に働く仲間を募集しています

2024-12-14 #AWS #AWS Amplify #Amazon Bedrock #生成系AI

AWS Amplify AI KitでAIチャットアプリを爆速で作ってみる

AWS Amplify AI Kitとは？

概要

アーキテクチャ

デモアプリの構築

構成情報

バックエンドの構築

Bedrockのモデルアクセス有効化

Amplify backendの構築・Sandboxの起動

AIバックエンドの構築

フロントエンドの構築

プロジェクトの作成&Amplify クライアントライブラリのインストール

バックエンドとの接続

Conversationフック

デモ

バックエンドのリソース確認

CloudFormation

Auth系のリソース

Data系のリソース

お片付け

おわりに

参考

【採用情報】一緒に働く仲間を募集しています

エンジニア募集

カテゴリー

月別で見る

投稿者から見る

サイト内検索

AWS Amplify AI KitでAIチャットアプリを爆速で作ってみる

AWS Amplify AI Kitとは？

概要

アーキテクチャ

デモアプリの構築

構成情報

バックエンドの構築

Bedrockのモデルアクセス有効化

Amplify backendの構築・Sandboxの起動

AIバックエンドの構築

フロントエンドの構築

プロジェクトの作成&Amplify クライアントライブラリのインストール

バックエンドとの接続

Conversationフック

デモ

バックエンドのリソース確認

CloudFormation

Auth系のリソース

Data系のリソース

お片付け

おわりに

参考

【採用情報】一緒に働く仲間を募集しています

関連投稿

過去に開発したアプリをKiroのスペック駆動で再開発してみた

Amazon Q Developerで理想の家計簿アプリを作ってみた

My Journey as a Japan AWS Jr. Champion

【夏の自由研究】Raspberry Piを使って色々試してみた② ～電子工作編～

ロングネイル女子エンジニア、筋トレとピラティスで最強になった話

【夏の自由研究】Raspberry Piを使って色々試してみた① ～セットアップ編～

エンジニア募集

カテゴリー

月別で見る

投稿者から見る

サイト内検索