5
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

AWS AmplifyとAWS×フロントエンド #AWSAmplifyJPAdvent Calendar 2024

Day 16

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

Last updated at Posted at 2024-12-17

Amplify AI Kit とは

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

日本語リリース情報

リリースブログ

ドキュメント

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

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

ルートごとに利用できるモデルが違います。
例えばClaude系はどちらも利用できますが、Amazon Nova系はConversationしか対応していないようです。ドキュメントに記載があります。注意が必要ですね。

開発者プレビュー時より進化しており、主に下記の機能が追加されています。

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

さっそく動作確認

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

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

  1. claude-ai
  2. story-teller

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

claude-ai

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

  • Amplify Gen2
  • NextJS App router
  • Amplify UI components

セットアップ

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

## ディレクトリ変更
cd claude-ai
## パッケージをインストール
npm i 
## バックエンド構築
npx ampx sandbox
## フロントの開発環境を立ち上げる
npx run dev

サンプルアプリ

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

amplify-ai-kit-01.png

会話してみます。

amplify-ai-kit-02.png

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

amplify-ai-kit-03.png

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

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

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

amplify-ai-kit-04.png

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

AIルートのスキーマの定義は下記のとおりです。

// /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に変更してみます。

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

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

ルートごとに利用できるモデルが違います。
例えばClaude系はどちらも利用できますが、Amazon Nova系はConversationしか対応していないようです。ドキュメントに記載があります。

では会話してみます。

amplify-ai-kit-05.png

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

一応マネコンでもテストしてみたら??
変わりませんでした。自分の名前はトレーニングされていないのかな?

画像についても聞いてみます。

amplify-ai-kit-06.png

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

まとめ

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

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

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

参考

AWS Amplify AI Kit

AWS Amplify AI Kit Getting Started

AWS Amplify AI Kit tutorial

AWS Developers Podcast -#141 AWS Amplify AI Kit

5
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
5
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?