Kiro x Amplify Gen 2 - テンプレートのサンプルプログラムを動かしてみた

Posted at 2026-04-04

はじめに

前回の記事では、Kiro x Amplify Gen 2のテンプレートを紹介しました。

本記事では、テンプレートに含まれているサンプルプログラムの利用手順を解説します。

サンプルの概要

テンプレートには2つのサンプルプログラムが含まれています。

Todoリスト — Amplify Data（AppSync + DynamoDB）とのCRUD連携デモ
エージェントチャット — AgentCore RuntimeとのHTTP SSEストリーミング対話デモ

アーキテクチャ図としては次のようになっています。

Cognitoで認証を受けて、Amplify HostingのCloudFrontがフロントエンドを担います。
Todoリストのサンプルでは、AppSyncを介してDynamoDBにメモ情報を登録します。
エージェントチャットのサンプルでは、BedrockAgentCore Runtime上で動作するエージェントとSSEによるストリーミングでの会話を確認することができます。

事前準備

AWS CLI
Node.js（v18以上）
Python 3.10+（エージェントチャットを使う場合）

AWSリージョンはオレゴンを想定しています。他のリージョンでも動作するはずですが、動作未確認です。
特にサンドボックスではAWS configureで設定されているリージョンにサンドボックス環境をデプロイしますので、事前にご確認ください。

デプロイ手順

サンドボックスでフロントエンド実行
ローカル環境でエージェント実行
Amplifyにデプロイ
AgentCore Runtimeにデプロイ
お片付け

サンドボックスを立ち上げてみる

1. リポジトリの作成とセットアップ

GitHubで「Use this template」からご自身のGitHubアカウント内にリポジトリを作成し、ローカルにクローンします。

git clone <リポジトリURL>
cd <プロジェクト名>
npm ci

npm ciは、ローカルプロジェクト内にNode.jsの依存パッケージをインストールするコマンドです。

実行すると以下のようになります。

2. Amplify sandboxの起動

まずはAmplifyのサンドボックス環境を起動します。
サンドボックスは起動したままにする必要があるため、ターミナルを2つ利用します。

ターミナル1

# ターミナル1: Amplify sandboxを起動（初回は数分かかります）
npx ampx sandbox

次のようになればOK。サンドボックス用にCognitoやDynamoDBなどが立ち上がります。

ターミナル2

# ターミナル2: 開発サーバーを起動
npm run dev

ターミナル右上の「＋」ボタンでターミナルを追加できます。
コマンドを入力して、次のようにReadyとなればOK。

3. サンプルページにアクセス

ブラウザで http://localhost:3000/sample にアクセスすると、Todoリストが動作します。

ユーザ認証

まずはCognito認証画面が開きますので、Create Accountからユーザを作成します。

サンプルページ

サンプルページは次のようになっています。
画面下側のエージェントチャットは、エージェントが未設定のため動きません。

Todoリスト

メモを入力→追加すると、Todoリストが追加されていきます。

完了ステータスに変更したり、削除したりできます(CRUD操作)。

ひと通りの動作確認が可能です。

エージェントチャットをローカルで確認してみる

エージェントチャットを動かすには、追加でAgentCore Runtimeのデプロイが必要となりますが、ローカルでの動作確認では不要です。
次の手順でターミナル上で動作確認できます。

1. エージェントのセットアップ

cd agents
python -m venv .venv
source .venv/bin/activate
pip install -e ".[dev]"

上から順にコマンドを実行します。

端末の環境を汚さないためにvenv利用前提としてますが、ご自身の環境に合わせて調整ください。Pythonコマンドに関しても、自分の環境だとpython3で進めました。

エラーなく終われば、OK。

2. 環境変数の設定

envファイルを作成します。

cp .env.example .env
# .envを編集して必要な値を設定

以下スクリーンショットのように、3つのコメントアウトを外してください。

3. ローカルでの動作確認

AgentCore Runtimeなしでエージェント単体の動作を確認できます。
質問はスクリプトにあらかじめ埋め込まれています。

python scripts/run_local.py

ターミナル上にエージェントからの回答が表示されます。

Amplifyにデプロイする

それでは、Amplifyにデプロイしてみます。今回は本番環境ですが、開発環境でも手順は同じです。

1. Amplify Hosting（フロントエンド）へのデプロイ

AWS コンソールで Amplify を開いて、「新しいアプリを作成」を選択します。
「GitHub」を選択して次へ。
リポジトリとブランチを選択して次へ。
特に何も設定せず、次へ。
「保存してデプロイ」を押すと、デプロイが始まります。
10分ほど待つとデプロイが完了します。URLも払い出されます。

2. フロントエンドの動作確認

URLにアクセスすると、Cognitoログイン画面が表示されます。
先ほどのサンドボックスとは違う環境が立ち上がっていますので、再度アカウント作成します。
ログインするとトップ画面が表示されます。
画面下の、サンプルページへのリンクをクリックします。
サンプルページが開きます。
先ほどと同様に、エージェントチャットは未設定のため動きません。

エージェントチャットを動かしてみる

エージェントチャットを動かすために、AgentCore Runtimeへのデプロイを進めます。

1. 認証情報の確認

AWSコンソールでCognitoを開いて、今回作成したユーザプールを選択します。
ユーザプールID（例: us-west-2_xxxxxxxx）を取得します。

同じユーザプールのアプリケーションクライアントを選択します。
クライアント ID（例: 7nxxxxxxxxxxxxxxxxxxxxxxxx）を取得します。

2. デプロイ準備

以降の作業はターミナルに戻ります。
デプロイ用のStarter Toolkitが入っていなければ、まずはインストールしてください。

pip install bedrock-agentcore-starter-toolkit

うまくインストールできない場合は、ご自身の環境に合わせてインストールを進めてください。
自分の場合は、以下手順にてインストールできました。

brew install pipx
pipx install bedrock-agentcore-starter-toolkit

pipx listでインストール状況が確認できます。

最近、AgentCore CLIも出てきましたが、今回はStarter Toolkitでのデプロイを想定しています。

3. コンフィグ設定

Cognito の情報を使って JWT 認証を設定します。
<User Pool ID> と <Client ID> はあらかじめ確認した値に置き換えてください。

cd agents
agentcore configure \
  --entrypoint sample_agent/app.py \
  --name sample_agent \
  --authorizer-config '{"customJWTAuthorizer":{"discoveryUrl":"https://cognito-idp.us-west-2.amazonaws.com/<User Pool ID>/.well-known/openid-configuration","allowedClients":["<Client ID>"]}}' \
  --region us-west-2

コマンドを実行するといくつか設定を聞かれます。
基本的にはデフォルト設定のままエンターを押して進めてください。

AgentCore Memoryのところだけご自身の状況に合わせて変更してください。
Memory作成が不要な場合は、sでスキップ。

Detected dependency file: requirements.txt (デフォルト)

Select deployment type: 1 (デフォルト)

Select Python runtime version: 2 (デフォルト)

Execution Role: Enter (自動作成)

S3 Bucket: Enter (自動作成)

Request Header Allowlist: Enter (デフォルト: no)

AgentCore Memory: s (作成をスキップする場合)