ついにGA🎉AWS Amplify AI Kitをためしてみた🚀 ~ シンプルなチャットで Novaつかってみたよ編~

## Amplify AI Kit とは
2024年11月19日にGAとなった、Ampifyの新機能。Amazon Bedrock向けのAIアプリを爆速で開発できるものです。

**日本語リリース情報**

https://aws.amazon.com/jp/about-aws/whats-new/2024/11/aws-amplify-full-stack-ai-kit-amazon-bedrock/

**リリースブログ**

https://aws.amazon.com/jp/blogs/mobile/build-fullstack-ai-apps-in-minutes-with-the-new-amplify-ai-kit/

**ドキュメント**

https://docs.amplify.aws/react/ai/

Amplify AIはルートという概念に基づいて構築されていて、APIのエンドボイントのように機能します。現在では下記の２つのルートが存在します。

1. Conversation
Chatベースのアプリ作成に利用できます。AppSyncを利用し、LambdaとBedrockと接続され、DynamoDBに会話データが保存されます。
2. Generation
単一のリクエストで構成されるAppSyncのクエリで、要約などやデータ抽出など単一の処理を行います。

:::note warn
ルートごとに利用できるモデルが違います。
例えばClaude系はどちらも利用できますが、Amazon Nova系はConversationしか対応していないようです。[ドキュメント](https://docs.amplify.aws/react/ai/concepts/models/)に記載があります。注意が必要ですね。
:::

開発者プレビュー時より進化しており、主に下記の機能が追加されています。
- [ストリーミングチャット](https://docs.amplify.aws/react/ai/concepts/streaming/)
- [ナレッジベースの利用](https://docs.amplify.aws/react/ai/conversation/knowledge-base/)

プレビューの時にリクエストしていたものが実装されて嬉しい限りです。

### さっそく動作確認
盛りだくさんに進化したAmplify AI Kitを試していきたいと思います。今回は下記のAWS Sampleから動作を確認しています。

https://github.com/aws-samples/amplify-ai-examples

このサンプルには2つのアプリケーションがあります。

1. claude-ai
2. story-teller

今回は前編後編に分けて記事にしたいと思います。今回は前編としてシンプルチャット編
claude-aiアプリをためしてみます。

### claude-ai
このアプリケーションは下記の技術で構成されています。

- Amplify Gen2
- NextJS App router
- Amplify UI components

#### セットアップ

バックエンドの構築とフロントエンドの構築をおこないます。

```sh
## ディレクトリ変更
cd claude-ai
```

```sh
## パッケージをインストール
npm i 
```

```sh
## バックエンド構築
npx ampx sandbox
```

```sh
## フロントの開発環境を立ち上げる
npx run dev
```

### サンプルアプリ
このようなサンプルアプリが作成できます。シンプルですね。

![amplify-ai-kit-01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3831737/cc8f458d-6a33-2179-767d-9ae2823e3a56.png)

会話してみます。

![amplify-ai-kit-02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3831737/c354967b-33c9-3df7-fc93-5ffc2d89120b.png)

Claude 3.5 Sonnetを利用しているのでマルチモーダルです。画像も添付していみます。

![amplify-ai-kit-03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3831737/34baed9c-380c-a496-add4-e8619796e3eb.png)

おお。いい感に特徴を捉えています。

### アプリでのAI Kitの使われ方

このアプリでは２つのAIルートの両方が利用されています。

![amplify-ai-kit-04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3831737/18f55486-84c5-0383-7e71-9a9418eaf0d4.png)

アプリはチャットとサイドバーの大きく二つで構成されています。チャットではConversationルートを使用してチャットを構成しており、サイドバーでは作成したチャットのタイトル作成にGenerationルートを使用しています。

AIルートのスキーマの定義は下記のとおりです。
```tsx
// /amplify/data/resource.ts
  chat: a.conversation({
    aiModel: a.ai.model("Claude 3.5 Sonnet"),
    systemPrompt: `You are a helpful assistant`,
  })
    .authorization((allow) => allow.owner()),

  chatNamer: a
    .generation({
      aiModel: a.ai.model("Claude 3 Haiku"),
      systemPrompt: `You are a helpful assistant that writes descriptive names for conversations. Names should be 2-10 words long`,
    })
    .arguments({
      content: a.string(),
    })
    .returns(
      a.customType({
        name: a.string(),
      })
    )
    .authorization((allow) => [allow.authenticated()]),
```
useContextを利用したりと、このアプリではNext.jsでChatアプリを作成するための手法を学ぶことができます。

### モデルの変更
せっかくなのでモデルを変更してみます。アプリ名はclaude-aiですが、あえて[Amazon Nova](https://docs.aws.amazon.com/nova/latest/userguide/what-is-nova.html)に変更してみます。

モデル名はdataリソースに定義されています。モデル名を指定することでモデルを変更できますが、名前ではなく、IDで指定することもできます。今回はこちらを利用してみます。

```tsx
 chat: a
    .conversation({
      aiModel: {
        resourcePath: "amazon.nova-pro-v1:0",
      },
      systemPrompt: `You are a helpful assistant`,
    })
    .authorization((allow) => allow.owner()),
```


:::note warn
ルートごとに利用できるモデルが違います。
例えばClaude系はどちらも利用できますが、Amazon Nova系はConversationしか対応していないようです。[ドキュメント](https://docs.amplify.aws/react/ai/concepts/models/)に記載があります。
:::


では会話してみます。

![amplify-ai-kit-05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3831737/6a1bbcbc-7ddf-04f1-f609-42bd0d83a3a2.png)

そっけないですね😭 ClaudeはClaudeです。って答えてくれたのに。

:::note info
一応マネコンでもテストしてみたら？？
変わりませんでした。自分の名前はトレーニングされていないのかな？
:::
画像についても聞いてみます。

![amplify-ai-kit-06.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3831737/049907eb-5821-5845-3748-8c957a6c03a9.png)

マルチモーダルなので認識してくれています。

### まとめ
Amplify AI Kitを利用するし爆速でアプリを構築できました🚀モデルの変更もスムーズでいいですね。簡単なアプリを作るだけならバックエンドも気にすることなく良い感じです。コンポーネントを接続するだけで作れちゃいます。

開発者プレビューより動作も安定している気がします。GAされたことでドキュメントやサンプルも充実してきてよいですね。

後編は下記のリンクです。

https://qiita.com/MK_Tech/items/008451a6c4dd95ad370f



### 参考

**AWS Amplify AI Kit**

https://aws.amazon.com/jp/amplify/ai/

**AWS Amplify AI Kit Getting Started**

https://docs.amplify.aws/react/ai/set-up-ai/

**AWS Amplify AI Kit tutorial**

https://github.com/aws-samples/amplify-ai-examples

**AWS Developers Podcast -#141 AWS Amplify AI Kit**

https://www.youtube.com/watch?v=UGKrAsC5-TY