如果您想要結合 Bedrock AgentCore 和 Amplify 來製作 AI 應用，這種結構或許是適合的。AI SDK 真的非常方便。

不過，這個架構因為 Amplify Hosting 的限制，無法進行串流輸出。

我們的 Hero 也感到非常不滿。😭😭😭

但是，不要放棄。

這是 Hero 的挑戰書！！

AWS 肯定能做到。畢竟，它是構建積木嘛🧱🧱🧱

所以，成功了🎉🎉🎉

useChat 的功能可以直接使用，因此開發體驗幾乎與單獨的 Next.js 沒有區別。

這裡是要點。

• 將前端和後端作為兩個獨立的 Next.js 應用進行構建
• 前端使用 Amplify，後端則直接容器化並部署到 AgentCore Runtime
• 後端需符合 AgentCore Runtime 的規範
  • 埠號為 8080
  • API 為 /invocations（POST）和 /ping（GET）
• 使用 useChat 呼叫 /invocations
• 將 Amplify 的認證功能與 AgentCore 的入站認證進行整合

聊天的外觀是使用這裡介紹的 AI Elements。真有型～

源代碼的完整內容在這裡。（請給個 Star！還有請為這篇文章點贊！）

雖然還沒驗證過，但在相同的結構下，Next.js + Mastra 也有可能在 AgentCore 上運行。

構建後端

我們將新建一個後端用的 Next.js 專案。

npx -y create-next-app@latest backend --yes

安裝一些庫。

cd backend/
npm add ai @ai-sdk/amazon-bedrock @aws-sdk/credential-providers

將創建兩個 API（/invocations 和 /ping）。

由於需要在 8080 埠啟動，因此需修正 package.json 中的腳本。

{
  "scripts": {
    "dev": "next dev --port 8080",
    "build": "next build",
    "start": "next start",
    "lint": "eslint"
  }
}

在本地環境動作確認時，由於跨原點的問題，需添加 CORS 設定。

import type { NextConfig } from "next";

const nextConfig: NextConfig = {
  /* config options here */
  async headers() {
    return [
      {
        source: "/invocations",
        headers: [
          { key: "Access-Control-Allow-Credentials", value: "true" },
          { key: "Access-Control-Allow-Origin", value: "*" },
          { key: "Access-Control-Allow-Methods", value: "GET,DELETE,PATCH,POST,PUT" },
          { key: "Access-Control-Allow-Headers", value: "X-CSRF-Token, X-Requested-With, Accept, Accept-Version, Content-Length, Content-MD5, Content-Type, Date, X-Api-Version" },
        ],
      },
    ];
  },
};

export default nextConfig;

構建前端

接著新建一個前端用的 Next.js 專案。

npx -y create-next-app@latest frontend --yes

安裝相關庫。

cd frontend
npm add ai @ai-sdk/react

安裝 AI Elements。

npx -y ai-elements@latest

創建 Chatbot 組件。在 useChat 的選項中明確指定後端 API 的 URL。

若未指定，則預設使用與前端相同主機的 /api/chat。

const transportOptions: HttpChatTransportInitOptions<UIMessage> = {
    api: 'http://localhost:8080/invocations',
};

const { messages, sendMessage, status } = useChat({
    transport: new DefaultChatTransport(transportOptions),
});

Chatbot.tsx 的完整內容如下。

在 app/page.tsx 中調用 Chatbot 組件。

本地環境動作確認

現在，我們來確認本地環境的運作。首先啟動後端。後端 API 使用 8080 埠。

# 在 backend 目錄執行
npm run dev

> [email protected] dev
> next dev --port 8080

   ▲ Next.js 16.0.0 (Turbopack)
   - Local:        http://localhost:8080
   - Network:      http://172.17.0.2:8080

 ✓ Starting...
 ✓ Ready in 675ms

接著啟動前端。前端使用 3000 埠。

# 在 frontend 目錄執行
npm run dev

> [email protected] dev
> next dev

   ▲ Next.js 16.0.0 (Turbopack)
   - Local:        http://localhost:3000
   - Network:      http://172.17.0.2:3000

 ✓ Starting...
 ✓ Ready in 1293ms

在瀏覽器中訪問 http://localhost:3000。如果能在聊天的輸入對應的串流格式下收到回應，則為成功。

在前端添加 Amplify Gen2

現在將 Amplify Gen2 添加到前端。

npm create amplify@latest

添加庫。

npm add @aws-amplify/ui-react

啟動 Amplify Gen2 的沙盒，也會創建 Cognito。

npx ampx sandbox

只要能創建出 Cognito，這時可以停止沙盒。

部署後端到 AgentCore Runtime

將容器映像註冊到 ECR

為了部署到 AgentCore Runtime，需要進行容器化。

當將 Next.js 應用部署為 Docker 容器時，建議指定 standalone。

參考
https://nextjs.org/docs/app/getting-started/deploying#docker
https://github.com/vercel/next.js/tree/canary/examples/with-docker

import type { NextConfig } from "next";

const nextConfig: NextConfig = {
  /* config options here */
  output: "standalone",
};

export default nextConfig;

構建容器並推送到 ECR。
根據 AgentCore 的要求，以 arm64 架構來創建容器映像。

ACCOUNT_ID=$(aws sts get-caller-identity --query Account --output text)
AWS_REGION=us-west-2

AGENT_NAME=agentcore-amplify-nextjs-backend

docker buildx create --use

aws ecr create-repository --repository-name ${AGENT_NAME} --region ${AWS_REGION}
aws ecr get-login-password --region ${AWS_REGION} | docker login --username AWS --password-stdin ${ACCOUNT_ID}.dkr.ecr.${AWS_REGION}.amazonaws.com

docker buildx build --platform linux/arm64 -t ${ACCOUNT_ID}.dkr.ecr.${AWS_REGION}.amazonaws.com/${AGENT_NAME}:latest --push .

這樣就將容器映像註冊到 ECR 了。

將後端註冊到 AgentCore Runtime

在管理控制台中進行註冊。

進行入站 ID 的設定。

1. 入站 ID 類型選擇「使用 JSON Web Tokens（JWT）」。
2. JWT 架構設定選擇「使用現有的 ID 提供者的設定」。
3. 偵測 URL 輸入 https://cognito-idp.{リージョン名}.amazonaws.com/{Cognito的ユー圏池ID}/.well-known/openid-configuration。
4. 允許的客戶端輸入 Cognito 的客戶端 ID。

Cognito 的設定位於 frontend/amplify_outputs.json。

在前端實施認證功能

在 page.tsx 中添加 Amplify 的認證功能。登入後獲取訪問令牌，然後將其傳遞給 Chatbot。

在 Chatbot 組件中接收令牌，若環境變數中有 AgentCore Runtime 的設定，則發送到 AgentCore，否則則發送到 localhost。

同時還需添加 headers。

function buildApiUrl() {
  if (process.env.NEXT_PUBLIC_AGENT_ARN) {
    const agentArn = process.env.NEXT_PUBLIC_AGENT_ARN!;
    const region = process.env.NEXT_PUBLIC_AWS_REGION!;
    const escapedArn = encodeURIComponent(agentArn);
    const qualifier = process.env.NEXT_PUBLIC_QUALIFIER;
    return `https://bedrock-agentcore.${region}.amazonaws.com/runtimes/${escapedArn}/invocations?qualifier=${qualifier}`;
  } else {
    return 'http://localhost:8080/invocations';
  }
}

const ChatBot = ({ token }: { token: string }) => {
  const [input, setInput] = useState('');
  const [model, setModel] = useState<string>(models[0].value);
  const [reasoning, setReasonings] = useState(reasonings[1].value);

  const [sessionId] = useState(() => `session-${Date.now()}-${Math.random().toString(36)}`);

  const transportOptions: HttpChatTransportInitOptions<UIMessage> = {
    api: buildApiUrl(),
    headers: {
      'Authorization': `Bearer ${token}`,
      'X-Amzn-Trace-Id': `trace-${Date.now()}`,
      'Content-Type': 'application/json',
      'X-Amzn-Bedrock-AgentCore-Runtime-Session-Id': sessionId,
    },
  };
};

創建 .env.local 文件，並記錄 AgentCore Runtime 的設定。

NEXT_PUBLIC_AGENT_ARN=arn:aws:bedrock-agentcore:{リージョン名}:{アカウントID}:runtime/{ランタイム名}
NEXT_PUBLIC_AWS_REGION=us-west-2
NEXT_PUBLIC_QUALIFIER=DEFAULT

驗證從本地環境的前端呼叫 AgentCore Runtime 的後端功能

啟動前端。

# 在 frontend 目錄執行
npm run dev

會顯示 Cognito 的登錄畫面，請創建一個新賬戶。登錄後，應該能看到同樣的聊天功能運作。

將前端部署到 Amplify Hosting

因 AI Elements 更新的關係，截止目前為止，npm run build 無法通過。所以請讓 Q 開發者協助調整，使其可以通過。
https://github.com/moritalous/agentcore-amplify-nextjs/commit/e2816cd6bde2da0b2317b3d939741f8160c0a2e9

從 GitHub 進行部署。

在本次的目錄結構中，選擇單一庫，並輸入 frontend。

在應用程序設置的底部有「詳細設置」，請展開它。

輸入三個環境變數。

• NEXT_PUBLIC_AGENT_ARN
• NEXT_PUBLIC_AWS_REGION
• NEXT_PUBLIC_QUALIFIER

進行部署。

部署完成後，確保創建的 Cognito 資源。

進入 Cognito 的管理介面，獲取用戶池 ID 和客戶端 ID，並覆蓋 AgentCore 的入站 ID 設定。

這樣，Amplify + AgentCore 的環境就完成了！

總結

這是一次很好的學習！謝謝你，Hero！

使用 AgentCore SDK 時，需要移除串流回應中的「data:」這段奇怪的代碼，但當使用 Next.js 進行託管時，則保持原樣格式。

此外，一直想做的使用 Cognito 的令牌來進行 AgentCore 的入站認證，也意外地簡單。

AgentCore，真的很深奧。

（再次發布）

源代碼的完整內容在這裡。（請給個 Star！還有請為這篇文章點贊！）

原文出處：https://qiita.com/moritalous/items/ea695f8a328585e1313b