1. 今回の目的

アサーションCheckのフロントエンドに、ユーザーがコミュニケーションで困った場面を入力できる画面を実装する。

また、入力した内容をバックエンドのアサーション分析APIへ送信し、Amazon Bedrockによる分析結果を画面に表示できるところまで実装する。

2. 今回実装した機能

入力フォーム

以下の2項目を入力できるようにした。

• 困った場面
• そのとき取った対応

それぞれ最大500文字とし、現在の入力文字数も表示する。

分析ボタン

入力内容が空の場合は分析ボタンを無効化する。

また、スペースのみ入力されている場合も未入力として扱うため、trim() を利用して判定する。

const canAnalyze =
  situation.trim().length > 0 && response.trim().length > 0;

分析APIとの連携

「分析する」ボタンを押すと、Next.jsからHonoの分析APIへPOSTリクエストを送信する。

const apiResponse = await fetch(`${env.apiBaseUrl}/api/analysis`, {
  method: "POST",
  headers: {
    "Content-Type": "application/json",
  },
  body: JSON.stringify({
    situation,
    response,
  }),
});

処理の流れは以下。

ユーザー
  ↓
Next.js
  ↓ POST /api/analysis
Hono
  ↓
Amazon Bedrock
  ↓
Claudeによる分析
  ↓
Hono
  ↓ JSON
Next.js
  ↓
分析結果を画面表示

ローディング表示