AWS Amplify AI KitでAIとのチャット機能をサクッと作ってみる

AWS Amplify AI Kitとは？

2024年11月、AWSから「AWS Amplify AI Kit」の一般提供が発表されました。

Amplify AI Kit は、AWS Amplify を使用して生成 AI 機能を簡単に実装することができるツールキットで、JavaScriptやTypeScriptなどの知識があればAIを活用したアプリを作成することができます。

会話のレスポンスはAmazon Bedrock AIモデルから取得することができ、専門知識がなくてもAIとのチャットや会話、要約機能を追加することができます。

今回はこのAWS Amplify AI KitでChatGPTのようなAIとのチャットアプリを作りながら、AWS Amplify AI Kitについて紹介したいと思います。

そもそもAWS Amplifyとは?

AWS Amplify AI Kitの紹介の前に「AWS Amplify」について説明します。

ざっくり言ってしまうと、フロントエンドおよびフルスタックのWeb／モバイルアプリの開発を簡素化するためのサービスになります。

たとえば、フロントエンドエンジニアがReact、Vue、Next.jsといったフレームワークを使って開発する際、AWS Amplifyを活用すれば面倒なバックエンド構築をほぼコードレスで済ませられます。数行のコマンドを叩くだけでCognitoによる認証機能を追加したり、GraphQLやREST APIを構築したり、S3バケットに画像をアップロードするストレージ機能を追加することができます。

さらに、Amplify Hostingを使えば、GitHubやBitbucketなどのリポジトリと連携し、プッシュするだけで自動的にビルド・デプロイされるCI/CDパイプラインも構築可能です。

クラウドのインフラやセキュリティ設定に不慣れでも、GUIとコマンドラインの両方から簡単に設定・管理ができるため、開発スピードを大幅に向上させることができます

特に新規のWebサービス・モバイルアプリのプロトタイピングやスタートアップや小規模開発での迅速な立ち上げの際などに使われスピード感を求められる時に適しているサービスです。

チャットアプリを作ってみた

さて、本題です。ここからはチャットアプリを作成するプロセスを説明していきます。

作成するのは、「AIとチャットするアプリ」です。

AWS Amplify AI Kit では、react-uiコンポーネントが提供されておりチャットのUIも簡単に作成することができます。AIからの返答にもUIを適用して、ただのプレーンテキストではない返答にすることができます。

まずは仕組みから解説！

デプロイすると以下のようにサービスが構築されます。

Cognitoで認証を行い、AppSyncからLambdaを介してBedrockのAI機能を利用します。

データはDynamoDBに保存されます。

アプリケーションは AppSync を通じて、クライアントとバックエンドをGraphQLでつなぎます。GraphQLの導入により、クライアント側は必要なデータだけを取得でき、効率的な通信が可能になります。

またAmazon Bedrock を通じて、さまざまな大規模言語モデル（LLM）との連携が可能になります。

作ってみる

Amplifyのバックエンドリソースを定義します。

npm create amplify@latestでamplifyフォルダを作成します。

Claude 3 Sonnetを利用するので以下のように設定します。systemPromptを指定すると指定した役割のように回答してくれます。

また認証方法も指定します。

`amplify/data/resource.ts` 

import { type ClientSchema, a, defineData } from '@aws-amplify/backend';

const schema = a.schema({

 chat: a.conversation({

   model: {

     aiModel: a.ai.model("Claude 3 Sonnet"),

     systemPrompt: 'You are a helpful assistant for programmer',

   }

 })

   .authorization((allow) => [allow.guest()]),

});

export type Schema = ClientSchema<typeof schema>;

export const data = defineData({

 schema,

 authorizationModes: {

   defaultAuthorizationMode: 'iam',

 },

});

AWSコンソールのBedrockのページにてモデルアクセスのタブでアクセス可能なモデルを見ることができます。

次にフロントエンドですが、バックエンドをデプロイするとamplify_outputs.jsonが生成されるので以下のように読み込みます。

import { Amplify } from "aws-amplify";

import outputs from "../../amplify_outputs.json";

Amplify.configure(outputs);

チャットのページを作成します。

createAIHooksのuseAIConversationとaws-amplify/ui-react-aiで提供されているAIConversationタグを使用すると簡単にチャットが作れます。

import "./Chat.css";

import { useAIConversation } from "./client";

import { Avatar, Card, View } from "@aws-amplify/ui-react";

import { AIConversation } from "@aws-amplify/ui-react-ai";

const client = generateClient<Schema>({});

export const App = () => {

 const { useAIConversation } = createAIHooks(client);

 const [

   {

     data: { messages = [] },

     isLoading,

   },

   handleSendMessage,

 ] = useAIConversation("chat");

 return (

   <View className="chat-container">

     <Card variation="elevated" className="chat-card">

       <AIConversation

         messages={messages}

         isLoading={isLoading}

         handleSendMessage={handleSendMessage}

         welcomeMessage={

           <Card variation="outlined" className="welcome-message">

             <p>AIアシスタントです。どのようなご質問でもお答えします！</p>

           </Card>

         }

         avatars={{

           user: {

             avatar: (

               <Avatar

                 src="https://api.dicebear.com/7.x/micah/svg?seed=user"

                 alt="ユーザー"

                 className="user-avatar"

               />

             ),

             username: "ユーザー",

           },

           ai: {

             avatar: (

               <Avatar

                 src="https://api.dicebear.com/7.x/bottts/svg?seed=assistant"

                 alt="AI"

                 className="ai-avatar"

               />

             ),

             username: "AIアシスタント",

           },

         }}

       />

     </Card>

   </View>

 );

};

コードが書けたらバックエンドの構築をします。

以下のコマンドでエフェメラル環境を構築でき、ローカル環境でテストできるようになります。

npx ampx sandbox

次にnpm run devをしてローカルホストで確認します。

できたものが以下になります。

メッセージを送るとこんな感じになります。
（癒しの方法を教えてくれたうえに励ましてくれました😃　頑張れそうです💪）
AIの回答もスタイリングすると、よりいいサービスにできそうです。

感想

ReactとTypescriptだけで簡単にAIを使ったアプリを作りました。簡単なアプリならフロントエンドだけでサクッと作れるので感動しました！！

今後も新機能を色々と触ってみたいと思います。

Amplifyの裏ではAppSyncを経由しBedrockからデータを取得しています。以下の記事で詳しく解説してくださっていましたのでより詳しく知りたい方にはおすすめです！

https://dev.classmethod.jp/articles/amplify-invoke-bedrock

参考

• Create a Customized AI-Based Chat Interface With Your Application Data
• 新しい Amplify AI Kit で、フルスタックの AI アプリを数分で構築
• Build Fullstack AI Apps in Minutes With the New Amplify AI Kit