6
6

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

【開発効率アップ】生成AIアプリ「Bedrock Engineer」を使ってみた ~AWS100本ノック~ 29/100

Posted at

はじめに

開発をする上で、ChatGPTなどの生成AIを使わない人の方が少ないくらいの昨今で、AWSがBedrock Engineerという生成AIアプリを作ってくれたので、試してみました。
※本記事は2025年3月の内容になり、機能は定期的に更新・アップロードされています

みなさん、システム開発をする上でChatGPTを使ってどんなことをしていますか?
私自身は、何かエラーが出た際の原因と解決策を聞いたり、AWS CDKのサンプルコードを書いてもらったりしています。

そういった中で、以下のようなことがAWSで出来たらいいなーと思っていましたが、Bedrock Engineerの登場により、そういったことが簡単に出来るようになりました。

  • AWS構成図やER図を書く
  • サンプルアプリケーションをまるっと作ってくれる
  • 作ったアプリケーションを改修してくれる
  • 既存のアプリケーションの処理をまとめてくれる

今回説明しないこと

  • AWS Bedrockの詳しい機能の説明
  • Bedrock Engineer以外の設定

Bedrock Engineerで出来ること

こちらのGithubに記載があるように、Bedrock Engineerでは以下のようなことが出来ます。

💬 人間のような Amazon Nova、Claude、Meta llama モデルを使用したインタラクティブなチャット インターフェース
📁 ファイルシステム操作(フォルダー、ファイルの作成、ファイルの読み取り/書き込み)
🔍 Tavily API を使用した Web 検索機能
🏗️ プロジェクト構造の作成と管理
🧐 コード分析と改善提案
📝 コードの生成と実行
📊 データ分析と視覚化
💡 エージェントのカスタマイズと管理
🛠️ ツールのカスタマイズと管理
🔄 チャット履歴の管理
🌐 多言語サポート

これらを行うために大きく4つの機能が提供されています。

  • Chat:用途に応じた以下の3つのAIエージェントを使って開発サポートが可能。カスタムエージェントを作ることも可能
    • Software Developer:ソフトウェアプロジェクトの構造を理解し、ファイルやフォルダを作成するためのAIエージェント
    • Programming Mentor:初心者に優しいプログラミングメンターとして、プログラミングタスクのサポートと学習ガイダンスを提供するためのAIエージェント
    • Product Designer:ユーザーインターフェースとUXの専門家として、魅力的で使いやすいデザインを提案するためのAIエージェント
  • Website Generator:ウェブサイトを作成するソースコードを生成
  • Step Functions Generator:AWS StepFunctionsのASL定義を生成
  • Diagram Generator:draw.io形式でAWS構成図などを作成

使ってみた

では、実際に色々試していきましょう。
※今回はWindowsで試していきます

Bedrock Engineerを使えるようにするために

まずは、ツールのインストールや初期設定を行っていきます。

# リポジトリのクローン
git clone https://github.com/aws-samples/bedrock-engineer.git

# 必要なパッケージのインストール
cd bedrock-engineer
npm install

## 各OS毎のビルドコマンドの実行
npm run build:mac
npm run build:win
npm run build:linux

ビルドが完了し、dist/win-unpacked/Bedrock Engineer.exeを実行するとBedrock Engineerが立ち上がるはずです。
VSCodeなどのIDEに依存しない別アプリケーションとして立ち上がるのは良い点だと思います:smile:

image.png

設定

次に必要な設定を行っていきます。⚙アイコンをクリックします。

Tavilyの設定

AIエージェント用に構築された検索エンジンであるTavilyのAPIキーを入力します。
Googleなどの任意のアカウントでサインインして利用します。
Freeプランであればクレジットカードの登録が不要で、1000APIコール/月の利用が可能なので個人利用であれば、これで十分だと思います。

4.png

AWSの設定

Bedrockを利用するAWSアカウントの認証情報(アクセスキー、シークレットアクセスキー、セッショントークン)と、リージョンを入力します。
IAMユーザで永続的な認証情報を発行して利用するよりは、IAM Identiy Centerで一時的な認証情報を発行して利用することが安全だとは思います。

1.png

Bedrockの設定

利用するBedrockのLLMを選択します。
事前にBedrock側で許可したものしか使うことは出来ません。
許可の仕方については以前書いたこちらの記事をご確認ください。

2.png

準備が終わったので、それぞれの機能を使っていきます:smile:

Chat

Software Developer

ソフトウェアプロジェクトの構造を理解し、ファイルやフォルダを作成するためのAIエージェントです。
任意の命令をすることも出来ますが、あらかじめ以下のようなユースケースが用意されています。

  • Amazon Bedrockとは:Bedrockに関する最新情報を検索して、何ができるか簡潔にまとめる
  • フォルダの整理:ローカルの指定したフォルダの操作
  • シンプルなウェブサイト:指定した言語を使ったウェブサイトの作成
  • シンプルなAPI:指定した言語を使ったAPIの作成
  • CDKプロジェクト:指定した要件を満たすCDKファイルの作成
  • ソースコードの理解:指定したディレクトリのソースコードを分析し、その構造と機能を図解を含めて説明
  • リファクタリング:指定したディレクトリのコードを分析し、改善やリファクタリングの機会を提案
  • テストコード:指定したディレクトリのコードに対するテストケースの作成

実際にいくつか試してみます。

シンプルなウェブサイト

Webアプリのフロントエンドを作るために、以下の命令をしてみます。

HTML、CSS、JavaScriptを使用して書籍管理のウェブサイトを作成してください。
デザインは、「amazon」をイメージしてください。
ウェブサイトの名前は、「Book Management」です。

image.png

すると、book-managementディレクトリが作成され、Amazon風の書籍管理サイトを作るための各ファイルが作られました。
3.png

作った機能の概要や使い方についても以下のように説明してくれます。

これで、Amazon風の書籍管理ウェブサイトが完成しました。主な機能は以下の通りです:

書籍の一覧表示

グリッドレイアウトで書籍を表示
書籍カードには画像、タイトル、著者、価格を表示
書籍の検索機能

タイトルや著者名での検索が可能
リアルタイムでの検索結果表示
カテゴリーによるフィルタリング

サイドバーでカテゴリーを選択可能
すべての書籍/プログラミング/ビジネス/科学/小説
書籍の追加/編集/削除

モーダルウィンドウでの書籍情報の編集
書籍の削除機能(確認ダイアログ付き)
レスポンシブデザイン

モバイルデバイスにも対応したレイアウト
フレキシブルなグリッドシステム
使用方法:

index.htmlファイルをブラウザで開く
「新規書籍登録」ボタンで新しい書籍を追加
検索バーで書籍を検索
サイドバーのカテゴリーでフィルタリング
各書籍カードの「編集」「削除」ボタンで書籍情報を管理
デザインの特徴:

Amazonライクな色使い(ダークブルーのヘッダー、オレンジのアクセント)
クリーンでモダンなカードデザイン
使いやすい検索バーとナビゲーション
ホバーエフェクトによる視覚的フィードバック
このウェブサイトは、クライアントサイドのみで動作する簡単なデモ版です。実際の運用では、バックエンドサーバーとデータベースを追加し、データの永続化を行うことをお勧めします。

シンプルなAPI

Webアプリのバックエンドを作るために、以下の命令をしてみます。

Node.jsとExpressを使用して、基本的なCRUD操作を備えたシンプルなREST APIを作成してください。

すると、simple-rest-apiディレクトリが作成され、ユーザのCRUDを行うAPIが作成されました。

image.png

ソースコードの理解

先ほど作成したAPIを分析してもらうために、以下の命令をしてみます。

C:\Users\m_nakazato\Desktop\project_repositry\m.nakazato\simple-rest-apiのソースコードを分析し、その構造と機能を図解を含めて説明してください。

すると、simple-rest-apiの処理説明と、流れを説明する図を作成してくれました。

image.png

image.png

テストコード

先ほど作成したAPIのテストコードを作るために、以下の命令をしてみます。

C:\Users\m_nakazato\Desktop\project_repositry\m.nakazato\simple-rest-apiのコードに対するテストケースの作成を手伝ってください。

すると、simple-apiにtestsディレクトリが追加され、jestでテストを行うためのコードが追加されます。

image.png

Programming Mentor

プログラミングメンターとして、プログラミングタスクのサポートと学習ガイダンスを提供するためのAIエージェントです。
任意の命令をすることも出来ますが、あらかじめ以下のようなユースケースが用意されています。

  • JavaScript基礎学習:JavaScriptの基礎を例を交えて学習を支援してくれます
  • 関数の理解:JavaScriptの関数の仕組みを理解する手助けをしてくれます
  • DOM操作:JavaScriptを使用したDOMの操作方法について学習を支援してくれます
  • JavaScriptのデバッグ:JavaScriptコードのデバッグを手伝い、エラーについて説明してくれます
  • シンプルなウェブアプリ開発:HTML、CSS、JavaScriptを使用したシンプルなWebアプリケーションの構築プロセスを段階的に説明しながら、穴埋め問題を出してくれます
  • Python学習:Pythonの基本的な文法、データ型、制御構造を含む、言語の入門を提供してくれます
  • オブジェクト指向プログラミング:Pythonを使用したオブジェクト指向プログラミングの概念を説明してくれます
  • Pythonでデータ可視化:Pythonライブラリを使用した基本的なデータ可視化の作成方法を教えてくれます

実際にいくつか試してみます。

JavaScript基礎学習

JSに付いた学ぶために以下の命令をしてみます。

完全な初心者向けに、JavaScriptの基礎(変数、データ型、演算子、制御フロー)を例を交えて学習を支援してください。

すると複数のレッスンに分かれて、JSについて教えてくれます。

image.png
image.png
image.png
image.png

シンプルなウェブアプリ開発

Webアプリケーション作成を教えてもらいながら作るために、以下の説明をしてみます。

HTML、CSS、Vuejsを使用したシンプルなWebアプリケーションの構築プロセスを段階的に説明しながら穴埋め問題を出してください。

すると説明と穴埋め問題を出しながら、アプリケーションを作成してくれます。

image.png
image.png
image.png

また、以下のような機能追加の提案もしてくれ、追加した機能のボタンをクリックすると実際にコードを追加してくれます。
任意の機能追加命令も、もちろん可能です。

  • カウンターを減らすボタン
  • アニメーション効果の追加
  • SVGアニメーションの追加
  • モーションパスアニメーション

👇実際に作ってくれたカウンターアプリはこちら
ダウンロード.gif

Product Designer

UIとUXの専門家として、魅力的で使いやすいデザインを提供するためのAIエージェントです。
任意の命令をすることも出来ますが、あらかじめ以下のようなユースケースが用意されています。

今回こちらは試しませんでした:bow:

  • モバイルアプリのワイヤーフレーム:毎日の水分摂取量を記録するための新しいモバイルアプリの低忠実度ワイヤーフレームを作成してくれます
  • ランディングページのデザイン:コンバージョン最適化のベストプラクティスに従って、SaaS製品のモダンで視覚的に魅力的なランディングページをデザインしてくれます
  • ユーザー体験の改善:既存のECサイトのユーザー体験を分析し、改善のための提案を行ってくれます
  • デザインシステムの作成:コンポーネント、パターン、デザイントークンを含む、大規模エンタープライズアプリケーション向けの包括的なデザインシステムを開発してください
  • アクセシビリティ評価:Webアプリケーションのユーザーインターフェースをレビューし、障害を持つユーザーのためにアクセシビリティを改善できる箇所を特定してくれます
  • インターフェースのプロトタイピング:プロジェクト管理ツールの新機能のために、使いやすさと直感的な操作に重点を置いたインタラクティブなプロトタイプを作成してくれます
  • デザインの引き渡し:新機能のデザイン仕様とアセットを準備し、開発チームへのスムーズな引き渡しを確保してくれます
  • デザイントレンド調査:最新のデザイントレンドを調査し、今後の製品リデザインにどのように取り入れるかの提案を行ってくれます

新規エージェントの作成

新しくAIエージェントを自分で作ることが可能です。
エージェントのプロンプトは自分で書くことも出来ますし、名前と説明からそれに応じたプロンプトを自動的に作ることも可能です。

image.png

image.png

あなたはAWSに特化したAIメンターです。クラウドコンピューティングの基礎からAWSの高度な機能まで、実践的な知識と経験に基づいて指導を行います。

主な役割と特徴:
1. AWSサービスの基本概念と使用方法の説明
2. アーキテクチャ設計のベストプラクティス指導
3. セキュリティとコスト最適化の提案
4. Infrastructure as Code(IaC)の実装支援
5. AWSソリューションアーキテクト試験対策のサポート
6. トラブルシューティングとベストプラクティスの指導
7. マイクロサービスとコンテナ化の支援

指導方針:
- AWS Well-Architected Frameworkに基づく設計指導
- 実践的なユースケースを用いた説明
- コスト効率とセキュリティのバランスを重視
- スケーラブルで信頼性の高いシステム設計の指導
- 最新のAWSアップデートと機能の紹介
- ハンズオン演習を通じた実践的な学習支援

重点分野:
1. コンピューティング(EC2, Lambda)
2. ストレージ(S3, EBS)
3. データベース(RDS, DynamoDB)
4. ネットワーキング(VPC, Route 53)
5. セキュリティ(IAM, Security Groups)
6. 監視とロギング(CloudWatch, CloudTrail)
7. デプロイメント(CloudFormation, CDK)

使用可能なツール:
1. readFiles: 設定ファイルやIaCコードの解析
2. writeToFile: テンプレートやサンプルコードの作成
3. listFiles: プロジェクト構造の確認
4. tavilySearch: 最新のAWS情報やベストプラクティスの検索
5. generateImage: アーキテクチャ図やシステム構成図の生成
6. applyDiffEdit: 設定ファイルやコードの修正
7. executeCommand: AWS CLIコマンドの実行(許可されたコマンドのみ: {{allowedCommands}})

知識ベースとエージェントの活用:
- 利用可能な知識ベース: {{knowledgeBases}}
- 利用可能なBedrock Agents: {{bedrockAgents}}

作業ディレクトリ:
- 基準となるディレクトリ: {{projectPath}}

アーキテクチャ設計支援:
- Mermaid.jsを使用したアーキテクチャ図の作成
- AWSアーキテクチャのベストプラクティス提案
- マイクロサービスアーキテクチャの設計支援
- サーバーレスアプリケーションの設計指導

セキュリティとコンプライアンス:
- IAMポリシーの設計と実装
- セキュリティグループとNACLの設定
- 暗号化とキー管理の指導
- コンプライアンス要件への対応

コスト最適化:
- リソースのサイジング推奨
- 料金体系の説明
- コスト削減策の提案
- リザーブドインスタンスとSavings Plansの活用

最重要ルール:
- 設定やコードは必ず完全な形で提示
- コマンド実行は必ずユーザーの許可を得る
- セキュリティのベストプラクティスを常に考慮
- 最新のAWSアップデートを反映した指導を行う

現在の日時: {{date}}

チャット画面に表示されるボタン(シナリオ)についても同様に、自動的に書いてもらえます。
image.png

image.png

では、作ったカスタムエージェントを使ってみましょう。

AWSサーバーレスアプリケーションの設計相談

Webアプリケーションを新規開発する予定です。Lambda、API Gateway、DynamoDBを使用したサーバーレスアーキテクチャを検討していますが、以下の要件に基づいて最適な設計アドバイスをお願いします:
- 月間アクティブユーザー約10,000人
- ユーザー認証が必要
- 画像のアップロード機能あり
- レスポンスタイムは1秒以内

上記の命令を実行すると、必要なAWSサービスやその説明を行ってくれます。

image.png

アーキテクチャの詳細な説明と推奨事項をテキストで提供させていただきます。

推奨アーキテクチャと設計のポイント:

1. 認証基盤(Amazon Cognito)
- Amazon Cognitoを使用してユーザー認証を実装
- ソーシャルログイン連携も容易に追加可能
- JWTトークンベースの認証で、APIリクエストの認証を管理
- User Poolsでユーザー管理、Identity Poolsでリソースアクセス制御

2. APIレイヤー(Amazon API Gateway)
- RESTful APIの実装
- リクエストスロットリングの設定(デフォルトで10,000 req/秒)
- APIキャッシング機能を有効化してレスポンスタイムを改善
- Cognitoオーソライザーと連携した認証・認可の実装

3. バックエンド処理(AWS Lambda)
- 機能ごとに個別のLambda関数を作成(マイクロサービス的アプローチ)
- メモリサイズ: 1024MB(レスポンスタイム要件を満たすため)
- タイムアウト: 10秒
- 推奨ランタイム: Node.js 18.x または Python 3.11

4. データストア(Amazon DynamoDB)
- オンデマンドキャパシティモードを推奨(初期段階)
- GSI(Global Secondary Index)を活用した効率的なクエリ設計
- TTL(Time to Live)機能でセッション管理
- DynamoDB Accelerator (DAX)の導入検討(キャッシュ層)

5. 画像ストレージ(Amazon S3 + CloudFront)
- S3バケットで画像を保存
- CloudFrontでコンテンツ配信
- 画像の圧縮とリサイズにLambdaを使用
- S3のライフサイクルポリシーで古いファイルを管理

パフォーマンスとスケーリングの考慮点:

1. レスポンスタイム最適化
- API Gatewayのキャッシング設定
- DynamoDBのGSI活用
- CloudFrontによる画像配信の高速化
- Lambda関数のメモリサイズ最適化

2. コスト最適化
- Lambda関数の実行時間最適化
- DynamoDBオンデマンドキャパシティの使用
- S3のインテリジェント階層化
- CloudFrontのキャッシュ設定最適化

セキュリティ考慮点:

1. 認証・認可
- Cognitoによる厳密なユーザー認証
- IAMロールとポリシーの最小権限原則
- API Gatewayでのリクエスト制限

2. データ保護
- S3バケットの暗号化(SSE-S3)
- DynamoDBの暗号化
- HTTPS通信の強制
- WAF統合によるセキュリティ強化

監視と運用:

1. CloudWatchによる監視
- Lambda関数のエラーレート
- API Gatewayのレイテンシー
- DynamoDBのスロットリング
- カスタムメトリクスの設定

2. X-Rayによるトレーシング
- エンドツーエンドのパフォーマンス分析
- ボトルネックの特定
- サービス間の依存関係の可視化

開発ベストプラクティス:

1. Infrastructure as Code (IaC)
- AWS CDKまたはCloudFormationの使用
- 環境の一貫性維持
- バージョン管理との統合

2. CI/CD
- AWS CodePipelineを使用した自動デプロイ
- 段階的なデプロイメント戦略
- 自動テストの組み込み

この設計で、月間アクティブユーザー10,000人規模のワークロードを十分にサポートでき、1秒以内のレスポンスタイム要件も満たすことができます。

追加の検討事項や具体的な実装についてのアドバイスが必要な場合は、お気軽にお申し付けください。また、特定の機能やコンポーネントについて、より詳細な説明が必要な場合もご質問ください。

Website Generator

ウェブサイトを作成するソースコードを生成してくれます。
React、Vue、Svelteを選択できますが、今回はReactを選択して以下の命令をしてみます。

次の条件で、健康とフィットネスのウェブサイトの基本構造とレイアウトを作成してください。
<Conditions>
- レイアウトは Amazon.com のようなものにする。
- ウェブサイトの名前は "FitLife" とする。
- 赤い配色テーマを使用する。
- 健康とフィットネスのブログを表示するセクションを追加する。
- キーワードで健康とフィットネスのコンテンツを検索する機能を作成する。
- ブログにコメントを追加する機能を作成する。
- 記事にはサムネイル画像をつける
</Conditions>

すると、それっぽい画面が出来ました。
image.png

機能を追加するために、以下の命令をしてみます。

・チャット画面を追加し、導線を「ホーム」の横につけてください。
・おすすめのフィットネスのyoutubeをトップ画面に表示するようにしてください。

命令した通りに、機能を追加してくれました。
image.png

もう1つ追加してみましょう。

「運動」ボタンを押すと、別画面に遷移し、
・その日の運動量を表示
・運動記録を登録
出来るようにしてください

ちゃんと追加してくれましたね:smile:
image.png

なお、コードを実際に見ながら画面表示したり、コードを修正しながらプレビューすることも可能です。
image.png

Step Functions Generator

StepFunctionsのASL定義を修正しながら、プレビューすることが出来る機能です。
StepFunctions専用なので使う機会は少ない気はします...が試してみます。

以下の命令をしてみます。

注文処理ワークフローを作成する

image.png

すると、注文処理で行うような一連の流れのワークフローを作ってくれます。

{
  "Comment": "注文処理ワークフロー",
  "StartAt": "来店",
  "States": {
    "来店": {
      "Type": "Task",
      "Resource": "${OrderProcessingFunction}",
      "Next": "注文受付"
    },
    "注文受付": {
      "Type": "Task",
      "Resource": "${OrderProcessingFunction}",
      "Next": "在庫確認"
    },
    "在庫確認": {
      "Type": "Task",
      "Resource": "${CheckInventoryFunction}",
      "Next": "在庫判定"
    },
    "在庫判定": {
      "Type": "Choice",
      "Choices": [
        {
          "Variable": "$.stockAvailable",
          "BooleanEquals": true,
          "Next": "支払い処理"
        },
        {
          "Variable": "$.stockAvailable",
          "BooleanEquals": false,
          "Next": "在庫切れ通知"
        }
      ]
    },
    "支払い処理": {
      "Type": "Task",
      "Resource": "${PaymentProcessFunction}",
      "Next": "出荷処理"
    },
    "出荷処理": {
      "Type": "Task",
      "Resource": "${ShippingFunction}",
      "Next": "注文完了通知"
    },
    "在庫切れ通知": {
      "Type": "Task",
      "Resource": "${NotifyOutOfStockFunction}",
      "End": true
    },
    "注文完了通知": {
      "Type": "Task",
      "Resource": "${NotifyOrderCompletionFunction}",
      "End": true
    }
  }
}

なお、ワークフローにパラメータを渡して実際に動かすことは出来ないようです・・・:cry:
実際に動かしたい場合は、作成したASL定義をStepfunctions Localか、実際のAWS環境で実行することになると思います。

Diagram Generator

AWS構成図やER図、シーケンス図などをdraw.io形式で作成する機能です。
個人的には、この機能が一番うれしいです:smile:

では、実際に試してみます。

AWS構成図を書いてみる

よくあるWebアプリケーションの構成図を作るために、以下の命令をしてみます。

「ALB、ECS、Aurora」を使用したバックエンド、「CloudFront + S3」を使用したフロントエンド、DBはAurora(PostgreSQL)

すると、それっぽい感じで構成図を作ってくれました。
image.png

次に、構成を追加してみましょう。

・HTTPS化してください。
・カスタムドメインを利用できるようにRoute53を追加してください。

image.png

矢印が変だったりしますが、それっぽい感じになりました。
次に、VPC周りを追加してみます。

VPCを追加し、パブリックサブネットとプライベートサブネットで適切なネットワーク分離を行ってください。

image.png

最後に可用性を考慮した構成に変更してみます。

ECSクラスターとAuroraデータベースを3つのアベイラビリティーゾーンに分散配置し、高可用性を確保してください。

image.png

矢印が消えてしまったので、追加する命令をしてみます。

各サービス間の矢印を適切に記載して

image.png

まぁ、それっぽい感じで出来ましたね!
手直しは必要になるとは思いますが、最初にひな形を作るには便利そうです!

それ以外も書いてみた

AWS構成図以外も

ワイヤーフレームを書いてもらったり

以下の機能を持つシステムのワイヤーフレームを書いて
・ログイン
・トップページ
・書籍一覧
・書籍登録
・書籍編集

image.png

作成したワイヤーフレームのER図を書いてもらったり

この機能を満たすために、ER図を書いて

image.png

機能追加に対するER図の追記をしてもらったりできます

以下の機能を作成したいので、テーブルを追加して
・管理者機能
・日記機能
・チャット機能

image.png

おわりに

今回はAWS製の生成AIアプリ「Bedrock Engineer」の機能について説明しました。
これだけで全てが出来るわけではないし、手直しも必要ではありますが、開発初期段階など必要に応じて利用することで開発すぴーどは上がっていきそうです:smile:

参考

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

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?