KDDIアジャイル開発センター株式会社

Amplify ＆ AgentCoreで維持費激安！王道フルスタックなAIエージェントを簡単構築しよう

Last updated at 2026-01-01Posted at 2026-01-01

AWSの最新機能をフルに生かした、フルスタックのAIエージェントWebアプリを作ってみましょう。

フロントエンド： React on Amplify Gen2
バックエンド： Strands Agents on Bedrock AgentCore

完成するアプリのデモは以下から誰でも試せます。

https://main.d32c8uilwurx3w.amplifyapp.com/

AWS Amplify Gen2はとにかく「サーバーレスで安い」「マネージドで楽」なのがメリットです。

フロントエンド苦手な方のために、とにかく不要なファイルやコードを削って、手順数もとことん減らし、認知負荷を大きく下げています。

事前準備

アカウント作成

AWSアカウントを作成

GitHubアカウントを作成

Claudeの利用申請

AWSアカウントにサインイン（https://console.aws.amazon.com）
- リージョンを東京に変更
Claudeモデルの利用申請
- Amazon Bedrockを検索 > チャット/テキストのプレイグラウンド
- モデルを選択 > Anthropic > Claude Haiku 4.5 > 適用
- フォームが出てきたら記入して送信（数分待つ）
- プレイグラウンドでHaikuとチャットできたらOK

このあとのAWS CLI認証で使うので、AWSマネコンにはサインインしたままにしておいてください。

1. フロントエンドの構築

テンプレートから環境作成

Amplifyのクイックスタートにアクセス

テンプレからGitHubリポジトリを作成
- クイックスタート内「Create repositry from template」をクリック
- Repository name： amplify-agentcore
- Choose visibility： Private
開発環境を起動
- Code > Codespaces > Create codespace on main

AWS認証設定

AWS CLIをインストール

# ダウンロード
curl "https://awscli.amazonaws.com/awscli-exe-linux-x86_64.zip" -o "awscliv2.zip"

# 解答
unzip awscliv2.zip

# インストール
sudo ./aws/install

# ゴミ掃除
rm -rf aws awscliv2.zip

AWS認証を行う

aws login --remote

リージョンを聞かれたら ap-northeast-1 と入力
- URLにアクセスして既存セッションを選択
- 検証コードをコピーして、ターミナルに貼り付ける

フロントエンドの開発

フロントエンドはとにかくファイルが大量生成されるのでとっつきにくいですよね。
極限まで不要なファイル・コードを削りながら、認知負荷削減を工夫します。

不要ファイルの削除

rm -rf public amplify/data src/assets .eslintrc.cjs CODE_OF_CONDUCT.md CONTRIBUTING.md LICENSE README.md

amplify ディレクトリ内では、Amplifyで作成したいクラウド機能を定義します。今回はCognitoを用いた認証機能のみ有効にします。

以下ファイルをそれぞれ、下記内容で上書き

amplify/auth/resource.ts

import { defineAuth } from '@aws-amplify/backend';

export const auth = defineAuth({
  loginWith: {
    email: true,
  },
});

amplify/backend.ts

import { defineBackend } from '@aws-amplify/backend';
import { auth } from './auth/resource';

defineBackend({
  auth,
});

src ディレクトリ内には、フロントエンドのメインコードを配置します。

以下ファイルをそれぞれ、下記内容で上書き

フロントエンドのメインコードは上記のTypeScriptファイルです。
極力シンプルなコードで、ストリーミングレスポンスの処理まで含めています。コメントを多めに入れているので、さらっと読んでみてください。

Claude Codeなどのコーディングエージェントを使えば、フロント苦手な方でも簡単に開発できます。

src/index.css

/* グローバルスタイル */

* { box-sizing: border-box; }

body {
  margin: 0;
  background: #fafbfc;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
}

#root {
  height: 100vh;
  width: 100vw;
}

main.tsx

// 必要なパッケージをインポート
import React from "react";
import ReactDOM from "react-dom/client";
import { Amplify } from "aws-amplify";
import { Authenticator } from '@aws-amplify/ui-react';
import App from "./App.tsx";
import outputs from "../amplify_outputs.json";
import '@aws-amplify/ui-react/styles.css';
import "./index.css";

// Amplifyの初期化
Amplify.configure(outputs);

// アプリケーションのエントリーポイント（認証付きでレンダリング）
ReactDOM.createRoot(document.getElementById("root")!).render(
  <React.StrictMode>
    <Authenticator>
      <App />
    </Authenticator>
  </React.StrictMode>
);

必要なパッケージ情報を追加

npm install react-markdown

2. バックエンドの構築

AIエージェント用のディレクトリとコードを作成

mkdir agent
cd agent

touch main.py
touch requirements.txt

以下ファイルをそれぞれ、下記内容で上書き

agent/main.py

# 必要なライブラリをインポート
from strands import Agent
from strands_tools.rss import rss
from bedrock_agentcore.runtime import BedrockAgentCoreApp

# AgentCoreランタイム用のAPIサーバーを作成
app = BedrockAgentCoreApp()


def convert_event(event) -> dict | None:
    """Strandsのイベントをフロントエンド向けJSON形式に変換"""
    try:
        if not hasattr(event, 'get'):
            return None

        inner_event = event.get('event')
        if not inner_event:
            return None

        # テキスト差分を検知
        content_block_delta = inner_event.get('contentBlockDelta')
        if content_block_delta:
            delta = content_block_delta.get('delta', {})
            text = delta.get('text')
            if text:
                return {'type': 'text', 'data': text}

        # ツール使用開始を検知
        content_block_start = inner_event.get('contentBlockStart')
        if content_block_start:
            start = content_block_start.get('start', {})
            tool_use = start.get('toolUse')
            if tool_use:
                tool_name = tool_use.get('name', 'unknown')
                return {'type': 'tool_use', 'tool_name': tool_name}

        return None
    except Exception:
        return None


# エージェント呼び出し関数を、APIサーバーのエントリーポイントに設定
@app.entrypoint
async def invoke_agent(payload, context):

    # フロントエンドで入力されたプロンプトを取得
    prompt = payload.get("prompt")

    # AIエージェントを作成
    agent = Agent(
        model="jp.anthropic.claude-haiku-4-5-20251001-v1:0",
        system_prompt="aws.amazon.com/about-aws/whats-new/recent/feed からRSSを取得して",
        tools=[rss]
    )

    # エージェントの応答をストリーミングで取得
    async for event in agent.stream_async(prompt):
        converted = convert_event(event)
        if converted:
            yield converted


# APIサーバーを起動
if __name__ == "__main__":
    app.run()

Strands Agentsに組み込みのRSSツールを持たせており、AWS What's New RSSから情報取得できるようにしています。

agent/requirements.txt

botocore
bedrock-agentcore

strands-agents
strands-agents[otel]
strands-agents-tools[rss]

GitHubリポジトリへプッシュ

コードスペース左側の「ソース管理」パネルを開く
- コミットメッセージ「フロント開発完了」と入力して「コミット」
- 「すべての変更をステージして、直接コミットしますか?」>「はい」
- 「変更の同期」>「OK」

GitHubリポジトリへコードを置いておけば、この後の手順でそのリポジトリを指定するだけでAmplifyにデプロイできます。超便利！

3. AWSへデプロイ

フロントエンドのデプロイ

AWSマネコンでAmplifyを検索してアクセス > 新しいアプリを作成
- GitHubを選択して「次へ」
- GitHubの認証ポップアップが出たら、画面に従って操作を行う
- リポジトリ amplify-agentcore と main ブランチを選択して「次へ」
- そのまま「次へ」>「保存してデプロイ」して3分ほど待つ

Reactがサーバーレス環境に自動デプロイされ、認証機能として追加したCognitoのユーザープールなども自動作成されます。便利！

Cognito設定の確認

AWSマネコンでCognitoを検索してアクセス
- 作成されたユーザープールのIDをメモしておく
- ユーザープール名をクリック > 左サイドバー「アプリケーションクライアント」より、クライアントIDもメモしておく

バックエンドのデプロイ

コードスペースでデプロイ用の設定ファイルを作成

# バックエンド階層へ移動
cd /workspaces/amplify-agentcore/agent

# AgentCoreスターターキットをインストール
pip install bedrock-agentcore-starter-toolkit "boto3[crt]"

# AgentCoreデプロイ用の設定ファイルを作成
agentcore configure

ウィザードで以下を入力
- Entrypoint： main.py
- Agent name： update_checker
- （途中はEnterでデフォルトのまま進む）
- Configure OAuth authorizer instead? (yes/no) [no]: yes
- Enter OAuth discovery URL: https://cognito-idp.ap-northeast-1.amazonaws.com/ap-northeast-1_XXXXXXXXX/.well-known/openid-configuration
  - ap-northeast-1_XXXXXXXXX 部分はメモしたユーザープールIDを入力
- Enter allowed OAuth client IDs (comma-separated): メモしたクライアントIDを入力
- （途中はEnterでデフォルトのまま進む）
- Your choice： s（メモリーを作成せずスキップ）

AgentCoreランタイムを作成する際、AgentCoreアイデンティティのインバウンド認証を使って、Cognitoで認証したユーザーのリクエストしか受け付けないように設定しています。

agentcore configureコマンドを実行すると .bedrock_agentcore.yaml が生成されます。

Cognitoの情報など機密めな情報を含むため、このあとリポジトリに再プッシュを行う方は .gitignore ファイルに追加しておくのを忘れないでください。
（この手順では、フロントをデプロイ済みのため再プッシュは行いません）

以下コマンドでビルド＆デプロイを実行（1分ほどかかります）

agentcore deploy

デプロイすると、ウィザードで設定した内容に従って以下が自動作成されます。

CodeBuildプロジェクト（コンテナのビルド用）
ECRリポジトリ（コンテナのプッシュ先）
IAMロール（AgentCoreランタイム用）
AgentCoreランタイム

AgentCore設定の確認

AWSマネコンでBedrock AgentCoreを検索してアクセス
- 左サイドバー「エージェントランタイム」> デプロイしたエージェントをクリック
- 「Runtime ARN」をコピー

フロントエンドに環境変数を設定

Amplify > amplify-agentcore から、左サイドバー「ホスティング」>「環境変数」
- 「変数を管理」より以下を新規追加して「保存」
  - 変数： VITE_AGENT_ARN
  - 値：コピーしたRuntime ARNを入力
Amplify > amplify-agentcore に戻り、mainブランチをクリックして「このバージョンを再デプロイ」

AgentCoreランライムのARNがフロントエンドにビルドされるため、アプリの利用者がブラウザで開発者ツールなどを使うとARNが見えてしまうことがあります。

ARNにはAWSアカウントIDが含まれるため、機密情報とまではいきませんがご留意のうえ利用ください。

4. 動作確認

Amplifyから発行された「ドメイン」URLにアクセスして、「Create Account」

「先週のAWSアップデートをサマリーして」などと頼んでみましょう！

AIエージェントは、推論しながら何度もツールを使ったりして自律的に行動するため、途中経過をユーザーにリアルタイム表示することが重要です。

極力シンプルなコードで、ツール利用状況の表示やテキストのストリーミングに対応させています！

おまけ

今回のサンプルコードはこちら

AmplifyとAgentCoreはいずれも、開発中のローカルテストのための便利な機能も充実しています。

今回は最短手順で本番デプロイを行いましたが、ローカル開発したい方は以下も参考にしてみてください。

次のステップ

AgentCoreのメモリーやオブザーバビリティなど、他の機能をStrandsと組み合わせて活用してみたい方はこちら！

AIエージェント構築にちゃんと入門してみたくなった人は、こちらもぜひ！

https://www.sbcr.jp/product/4815636609/

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up

Amplify ＆ AgentCoreで維持費激安！ 王道フルスタックなAIエージェントを簡単構築しよう