AWS Amplify Gen 2のAI キットで生成AI機能を簡単に実装する方法

開発チームがお届けするブログリレーです！既に公開されている記事もありますので、こちらから他のメンバーの投稿もぜひチェックしてみてください！

はじめに

AWS Amplify Gen 2で新しいAIキットを使用すると、生成AI機能をアプリケーションに簡単に統合できます。このブログでは、AWS AmplifyのAIキットの基本的な使い方と、実際のアプリケーションへの実装方法について解説します。

AWS Amplify AIキットとは

AWS AmplifyのAIキットは、生成AIモデルをフロントエンドアプリケーションに簡単に統合するためのツールセットです。現在、以下の機能を提供しています。

• 会話（Conversation）: チャットベースのAI体験を構築するための多ターン型ストリーミングAPI
• 生成（Generation）: データ生成や変換などの単一リクエスト・レスポンス型のAPI

Amazon Bedrock が提供する強力なAIモデルを活用したアプリケーションを簡単に構築できます。

実装手順

AI機能の追加

既存のAWS Amplify Gen 2のプロジェクトにAI機能を追加するには、Amplify Data スキーマでAIルートを定義します。以下は amplify/data/resource.ts の例です。

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

const schema = a.schema({
  // 会話ルートの追加
  chat: a.conversation({
    aiModel: a.ai.model('Claude 3.5 Sonnet v2'),
    systemPrompt: 'あなたは日本語で対応する親切なアシスタントです。',
  })
  .authorization((allow) => allow.owner()),

  // 生成ルートの追加
  generateRecipe: a.generation({
    aiModel: a.ai.model('Claude 3.5 Sonnet v2'),
    systemPrompt: 'あなたは日本語でレシピを生成する料理の専門家です。',
  })
  .arguments({
    description: a.string(),
  })
  .returns(
    a.customType({
      name: a.string(),
      ingredients: a.string().array(),
      instructions: a.string(),
    })
  )
  .authorization((allow) => allow.authenticated()),
});

// 認証モードの設定
export const data = defineData({
  schema,
  authorizationModes: {
    defaultAuthorizationMode: "apiKey",
    apiKeyAuthorizationMode: {
      expiresInDays: 30,
    },
  },
});

会話ルートは現在、オーナーベースの認証のみをサポートし、生成ルートはオーナー以外の認証（authenticated、guest、group、publicApiKey）のみをサポートしています。

フロントエンドの接続

ライブラリの設定

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

Amplify.configure(outputs);

データクライアントの生成

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

// APIクライアントを生成
export const client = generateClient<Schema>();

// 会話生成用の認証モードのクライアント
export const authClient = generateClient<Schema>({ authMode: "userPool" });

// AIフックを作成
export const { useAIConversation, useAIGeneration } = createAIHooks(authClient);

生成機能の使用

// src/RecipeGenerator.tsx
import * as React from 'react';
import { Flex, TextAreaField, Loader, Text, View, Button, Heading } from "@aws-amplify/ui-react";
import { useAIGeneration } from "./client";

export default function RecipeGenerator() {
  const [description, setDescription] = React.useState("");
  const [{ data, isLoading }, generateRecipe] = useAIGeneration("generateRecipe");

  const handleClick = async () => {
    generateRecipe({ description });
  };

  return (
    <Flex direction="column" gap="1rem">
      <Heading level={2}>AIレシピ生成</Heading>
      <TextAreaField
        value={description}
        onChange={(e) => setDescription(e.target.value)}
        label="料理の説明"
      />
      <Button onClick={handleClick}>レシピを生成</Button>
      {isLoading ? (
        <Loader variation="linear" />
      ) : (
        data && (
          <>
            <Text fontWeight="bold">{data.name}</Text>
            <View as="ul">
              {data.ingredients?.map((ingredient, index) => (
                <View as="li" key={index}>
                  {ingredient}
                </View>
              ))}
            </View>
            <Text>{data.instructions}</Text>
          </>
        )
      )}
    </Flex>
  );
}

会話機能の使用

// src/ChatComponent.tsx
import { AIConversation } from '@aws-amplify/ui-react-ai';
import { useAIConversation } from './client';
import { Heading, Flex } from '@aws-amplify/ui-react';

export default function ChatComponent() {
  const [
    {
      data: { messages },
      isLoading,
    },
    handleSendMessage,
  ] = useAIConversation('chat');

  return (
    <Flex direction="column" gap="1rem">
      <Heading level={2}>AIチャット</Heading>
      <AIConversation
        messages={messages}
        isLoading={isLoading}
        handleSendMessage={handleSendMessage}
        welcomeMessage="こんにちは！何かお手伝いできることはありますか？"
      />
    </Flex>
  );
}

制限事項と課題

AWS Amplify AIキットの大きな制限の一つは、使用できるAIモデルのバージョンが最新でない点です。Amplify AI キットは最新のAIモデルの対応が遅れがちであり、Amazon Bedrock で利用可能な最新モデルがすぐに使えないため、最新の機能や性能向上を活用できないことがあります。この辺りは同じAWSのサンプルであるgenerative-ai-use-cases-jp (GenU) と比べても大きく遅れをとっています。

具体的には、現時点（2025年5月）では、Amplify Backendの最新バージョンは1.16.1で、サポートされている最新のClaudeモデルは Claude 3.5 Sonnet v2 です。しかし、Amazon Bedrockでは既に Claude 4 Opus や Claude 4 Sonnet といった最新世代のモデルが利用可能になっています。これらの最新モデルは従来のモデルに比べて大幅に性能が向上しており、特にコーディング能力やエージェント機能が強化されています。

次々に新しいモデルがリリースされている現在の状況から考えると、最新モデルへの追随が待たれるところであります。今後のアップデートでこの課題が解決されることを期待しています。

まとめ

AWS Amplify AIキットを使用すると、複雑なAIインフラストラクチャの設定や管理を心配することなく、生成AI機能をアプリケーションに統合できます。数行のコードで強力なAI機能を実装できます。

注目すべき点は以下の通りです。

• 宣言的なデータモデリング: スキーマファイルでAIモデルとその動作を宣言的に定義
• タイプセーフなAPI: フロントエンドとバックエンドの間でタイプセーフな通信
• ユーザー認証の統合: Amplify Authとシームレスに連携
• UIコンポーネント: 美しく使いやすいUIコンポーネントが用意されている

Amplify AI キットは現在も進化し続けており、今後もさらに多くの機能が追加されることを期待しています！

参考リンク

• Amplify AI キットの公式ドキュメント
• Amazon Bedrock ドキュメント
• Amplify Gen 2 ドキュメント