はじめに

今回は、Next.js（ローカル環境）からAWS Lambdaを直接叩き、Amazon Bedrock（Claude 3）と会話するチャットアプリを作ります。API Gatewayは使いません。複雑なインフラ構築もなし。

「文字がパラパラと流れてくる」リッチなUI体験を、わずかなコード量で実装します。

この記事を読み終える頃には、あなたのローカル環境で「動くAIチャット」が完成しているはずです。それではいきましょう！

この記事を読むと、以下のことができるようになります。

文字がパラパラと流れてくるリッチなUIを作ることができます。
サーバー構築やデプロイなしで、ローカル環境で動くAIチャットシステムの基礎が理解できる
AWS Lambda、Vercel AI SDKの実装方法がわかる

今回の構成

以下の構成で「疎通」と「ストリーミング」の成功体験を目指します。

Frontend: Next.js (Local) + Vercel AI SDK
Backend: AWS Lambda (Node.js 22.x) + Function URL
AI Model: Amazon Bedrock (Claude 3 Haiku)

環境・前提条件

ハンズオンを進めるにあたり、以下が完了していることを前提とします。

AWSのアカウントの作成: 公式リンク
Node.jsのインストール: 公式リンク
- インストールすると npm も自動的に利用可能になります。

検証環境

今回の検証に使用した環境は以下の通りです。

項目	バージョン	備考
OS	macOS Sequoia V15.3.2	-
Runtime	Node.js v22.22.0	LTS推奨
Framework	Next.js v16.x.x	App Router 使用
Frontend Lib	ai v6.0.69	Vercel AI SDK コア (ストリーム処理等)
同上	@ai-sdk/react v3.0.72	React Hooks (useChat 等)
Backend Lib	@ai-sdk/amazon-bedrock v4.0.48	Bedrock用プロバイダー
同上	@aws-sdk/client-bedrock-runtime v3.983.0	AWS公式クライアント (プロバイダーが内部で使用)
AI Model	Claude 3 Haiku	東京リージョン (ap-northeast-1)

ライブラリのバージョンについて（重要）
Vercel AI SDK や AWS SDK はアップデート頻度が高く、**破壊的変更（メソッド名の変更や非推奨化）**が入ることがあります。

本記事のコードは、上記の表に記載されたバージョンで動作確認を行っています。
もし npm install した最新版でエラーが出る場合は、以下のようにバージョンを指定してインストールし直すことを推奨します。
最も推奨するのは公式ドキュメントを参照し、実装方法を確認してください。

# バージョンを固定してインストールする例
npm install ai@6.0.69 @ai-sdk/react@3.0.72 @ai-sdk/amazon-bedrock@4.0.48

1. Amazon Bedrockとは

簡単に言うと、サーバー管理不要で、ClaudeやAmazon Titanなどの高性能モデルをAPI経由で使えるサービスです。様々なこと（Knowledge Baseの構築など）が可能ですが、今回は下記を使用します。

Claude 3 Haiku 公式ドキュメント: Amazon Bedrock

Amazon Bedrock の料金

Bedrockは「使った分だけ（オンデマンド）」の課金です。今回選定している Claude 3 Haiku は、「速くて安い」のが特徴です。

※料金はリージョンや時期により変動しますので、公式をご確認ください。

モデル名	項目	料金 (USD)	料金イメージ (1ドル=150円)
Claude 3 Haiku	入力 (Input)	$0.25 / 100万トークン	約37.5円 / 文庫本約10冊分
同上	出力 (Output)	$1.25 / 100万トークン	約187.5円 / 文庫本約10冊分

公式: Amazon Bedrock 料金

手順1. Bedrockを使用可能にする

AWSの管理画面で「Bedrockのモデルを使う許可」を申請する必要があります。これを忘れると、プログラム実行時にエラーになります。

💡 なぜ申請が必要なの？ Bedrockは使った分だけ料金がかかる従量課金制です。意図しない高額なモデルをうっかり使わないよう、AWS側で初期状態はすべて「無効（OFF）」になっています。使うものだけをONにする、安全設計なのです。

AWSコンソールにログイン:
AWS Management Console にアクセスします。
リージョンの確認:
画面右上のリージョン選択メニューで使用したいRegionを選択してください。今回は、「アジアパシフィック（東京）ap-northeast-1」 を使用します。
この後は、この方が丁寧に解説してくださっているので、参考にしてください。

手順2: Lambda関数の作成

まずは、AIからの返答を生成するLambda関数を作成します。ここでの技術的な挑戦は「Response Streaming」です。従来のLambdaは処理が終わるまでレスポンスを返せませんでしたが、これを使うことで生成された文字を逐次フロントエンドへ送ることができます。

AWSコンソール画面をブラウザで表示し、検索窓に「Lambda」を入力し、Lambda画面へ
右上の「関数を作成」をクリック
関数名: bedrock-chat-stream（任意）
ランタイム: Node.js 22.x (最新のLTS推奨だが、今回は22.xを使用)
アーキテクチャ: x86_64 または arm64
- x86_64より安価で高速なため、こちらを使用します。
💡 開発時のポイント今回は影響しませんが、「開発しているPCのCPUと、Lambdaのアーキテクチャを合わせる」のがトラブル回避の鉄則です。ライブラリによっては、PC（Intel等）とLambda（arm64等）でCPUの種類が食い違っていると、動かない場合があるためです。

「関数を作成」をクリック
作成完了後、作成したLambda関数のダッシュボードに遷移するので、「設定」タブをクリック
右上の「編集」ボタンをクリックし、「タイムアウト」を「1分 00秒」にし、「保存」をクリック。
※生成AIのチャット生成に時間がかかるため。今回は簡易実装のため1分だが、実際に実装する場合は3〜5分の方が良い場合もあるので、用途によって使い分けてください。
左下の「アクセス権限」をクリックし、「ロール名」をクリック
I AMロール編集画面に移動するので「アクセス許可を追加」をクリックし「インラインポリシーを作成」をクリック

JSONタブをクリックし、下記をコピペ

{
	"Version": "2012-10-17",
	"Statement": [
		{
			"Sid": "BedrockAccess",
			"Effect": "Allow",
			"Action": [
				"bedrock:InvokeModel",
				"bedrock:InvokeModelWithResponseStream"
			],
			"Resource": "*"
		}
	]
}

「次へ」をクリックし、ポリシー名に「BedrockPolicy（任意）」と入力し「ポリシーの作成」をクリック。

これでLambdaがBedrockを使えるようになります！

手順3. ローカルでプログラム実装

手順3.1. 必要なパッケージのインストール

まずは、Lambdaにデプロイするためのソースコードを管理するディレクトリを作成し、プロジェクトを初期化します。
今回は**「コールドスタート対策（起動速度の向上）」**を意識し、巨大な aws-sdk 全体をインストールするのではなく、必要な client-bedrock-runtime だけをピンポイントで導入します。

プロジェクトの作成と初期化
ターミナル（Mac/Linux）またはPowerShell（Windows）を開き、以下のコマンドを順に実行してください。
```
mkdir streaming-pro
cd streaming-pro

# package.json の生成（-y オプションで質問をスキップしてデフォルト設定で作成）
npm init -y
```
最小限のAWS SDKをインストール
続いて、Amazon Bedrockを操作するために必要なパッケージのみをインストールします。
```
npm install @aws-sdk/client-bedrock-runtime
npm install ai @ai-sdk/amazon-bedrock
```

ディレクトリ構成の確認
ここまでの作業で、ディレクトリ内は以下のようになっているはずです。

streaming-pro/
├── node_modules/       # インストールされたパッケージ群
├── package.json        # プロジェクト設定ファイル
├── package-lock.json   # 依存関係のバージョン固定ファイル
└── (ここに index.mjs を作成します)

ソースコードの実装
プロジェクトディレクトリ（streaming-pro）の直下に、メインの処理となる index.mjs を作成します。

import { bedrock } from '@ai-sdk/amazon-bedrock';
import { streamText, convertToModelMessages } from 'ai';

export const handler = awslambda.streamifyResponse(async (event, responseStream, _context) => {
  let body = {};
  try {
    body = event.body ? JSON.parse(event.body) : {};
  } catch (e) {
    responseStream.write("Error: Invalid JSON");
    responseStream.end();
    return;
  }

  responseStream.setContentType('text/plain; charset=utf-8');

  const messages = body.messages || [];

  try {
    const result = streamText({
      model: bedrock('anthropic.claude-3-haiku-20240307-v1:0'),
      messages: await convertToModelMessages(messages),
    });

    for await (const chunk of result.textStream) {
      responseStream.write(chunk);
    }
  } catch (error) {
    console.error("Stream Error:", error);
    responseStream.write(`Error: ${error.message}`);
  } finally {
    responseStream.end();
  }
});

手順4. Lambdaへのデプロイ（Zipアップロード）

ローカルで作成したコードを、AWS Lambdaへ反映させます。

ファイルのZip化: index.mjs, node_modules, package.json をまとめてZipファイルに圧縮します。
※フォルダごと圧縮するのではなく、ファイルを選択して圧縮してください。
- Mac/Linux: streaming-proディレクトリ上で、下記コマンドを実行
```
zip -r deploy.zip index.mjs node_modules package.json
```
- Windows: 上記の3ファイル（およびフォルダ）を選択して右クリック → 「Zipファイルに圧縮」
AWSコンソールでアップロード
1. Lambda関数の画面で「コード」タブを開きます。
2. 右側の「アップロード元」 → 「.zipファイル」をクリック。
3. 作成した deploy.zip をアップロードして「保存」をクリックします。

これで、ローカルのコードがLambda上で動く状態になりました。

手順5. 関数URLの発行とCORS設定（★最重要ポイント）

ここが最大のハマりどころです。API Gatewayを使わない代わりに、Lambda関数URLを発行して公開します。

Lambdaコンソールの「設定」タブ -> 「関数URL」を選択。
「関数URLを作成」をクリック。
認証タイプ: 今回はテスト用なので NONE (パブリック) を選択します。
※本番で実装する場合、絶対にAWS_IAM を設定してください！
その他の設定: ここを必ず設定してください！
- 呼び出しモード : 「RESPONSE_STREAM」にチェック
- オリジン間リソース共有 (CORS) を設定: チェック
  - 許可オリジン: * （またはローカル開発環境の http://localhost:3000）
  - 許可ヘッダー: content-type （これがないとNext.jsからのJSON送信がブロックされます）
  - 許可メソッド: POST
「保存」をクリック

これで、https://<ランダム文字列>.lambda-url.ap-northeast-1.on.aws/ のようなURLが発行されました。これをメモしておきます。

手順6: フロントエンドの実装 (Next.js)

続いて、フロントエンドです。Vercel AI SDKのおかげで、実装は驚くほどシンプルです。

ディレクトリ構成の確認
ここまでの作業で、ディレクトリ内は以下のようになっているはずです。

your-root-directory/
├── streaming-pro/  # 今までに作成したディレクトリ
|    ├── node_modules/
|    ├── deploy.zip
|    ├── package.json
|    └── index.mjs
└── my-ai-chat/  # 今から作成するディレクトリ
     ├── node_modules/
     ├── app/
     ├── package.json
     ├── package-lock.json
     └ さまざまなファイルたち

1. Next.jsプロジェクトの作成

your-root-directory上で行ってください。

npx create-next-app@latest my-ai-chat
# 設定はすべてDefault(Yes)でOK
cd my-ai-chat

2. Vercel AI SDKのインストール

npm install ai @ai-sdk/react

3. Chatコンポーネントの実装: `app/page.tsx` に下記をコピペしてください。

"use client";

import { useChat } from "@ai-sdk/react";
import { TextStreamChatTransport } from "ai";
import { useState } from "react";

export default function Chat() {
  const [input, setInput] = useState("");

  const { messages, sendMessage, status } = useChat({
    transport: new TextStreamChatTransport({
      api: process.env.NEXT_PUBLIC_LAMBDA_URL!,
    }),
  });

  const handleSend = async (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault();
    if (!input.trim() || status === "streaming") return;
    sendMessage({ text: input });
    setInput("");
  };

  return (
    <div className="flex flex-col w-full py-24 mx-auto h-screen bg-white px-4 text-black">
      <h1 className="text-2xl font-bold text-center mb-8">Claude 3 Chat</h1>

      <div className="flex-1 overflow-y-auto pb-24">
        {messages.map((m, index) => (
          <div
            key={m.id}
            className={`whitespace-pre-wrap mb-4 p-4 rounded-lg max-w-[80%] ${
              m.role === "user" ? "bg-blue-100 ml-auto" : "bg-gray-100 mr-auto"
            }`}
          >
            <strong>{m.role === "user" ? "User: " : "AI: "}</strong>
            {m.parts.map((part, partIndex) =>
              part.type === "text" ? <span key={partIndex}>{part.text}</span> : null
            )}
            {m.role === "assistant" && index === messages.length - 1 && status === "streaming" && (
              <span className="ml-2 text-gray-500 animate-pulse">▌</span>
            )}
          </div>
        ))}
      </div>

      <form onSubmit={handleSend} className="fixed bottom-0 left-0 right-0 w-full max-w-md mb-8 bg-white p-2 mx-auto">
        <div className="flex items-center gap-2">
          <input
            className="flex-1 p-2 border border-gray-300 rounded shadow-xl"
            value={input}
            placeholder="何か聞いてみて..."
            onChange={(e) => setInput(e.target.value)}
            disabled={status === "streaming"}
            autoFocus
          />
          <button
            type="submit"
            disabled={status === "streaming"}
            className="h-10 bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600 disabled:opacity-50"
          >
            🚀
          </button>
        </div>
      </form>
    </div>
  );
}

4. 環境変数の設定: .env.localファイルを作成

URLをコードに直書きしないよう、環境変数ファイルを作成します。 Next.jsでは、.env.local ファイルを作成し、NEXT_PUBLIC_ プレフィックスをつけることでブラウザ側からアクセス可能になります。
値は、AWSコンソールから「関数URL」をコピーして貼り付けてください。

NEXT_PUBLIC_LAMBDA_URL=ここにペースト

5. 動作確認: ターミナルで以下を実行

npm run dev

http://localhost:3000 でチャットを試してみてください。Claude 3 Haikuが高速にストリーミング返答してくれば成功です！

参照ドキュメント

Stream Protocol Documentation - Data stream protocol uses Server-Sent Events (SSE) format AI SDK
Transport Documentation - useChat transport system provides fine-grained control AI SDK
Lambda + AI SDK Example - Using toDataStream() with Lambda streaming

まとめ

お疲れ様でした！
これで、あなたのローカル環境とAWS上のAIが一本の線で繋がりました。

今回作成したアプリは、見た目こそシンプルですが、裏側では Next.js、AWS Lambda、Amazon Bedrock という現代のモダン開発に欠かせない技術要素がギュッと詰まっています。

今回達成したこと

サーバーレスアーキテクチャの構築: API Gatewayを使わず、Function URLだけでシンプルに公開する方法を習得しました。
ストリーミングの実装: AIチャット特有の「文字がパラパラ流れる」体験を、Vercel AI SDKを使ってわずかなコードで実現しました。
コストパフォーマンス: 常時起動のサーバーを持たず、リクエストがあった時だけ課金される（しかも安価なClaude 3 Haikuを使う）お財布に優しい構成です。

次のステップ（応用編）

このアプリをベースに、さらに機能を拡張してみましょう。

認証機能をつける:
現在は誰でもアクセスできてしまうため、AWS CognitoやClerkなどを導入して、自分だけが使えるようにセキュリティを強化してみましょう（※本番運用の際は必須です！）。
履歴を保存する:
DynamoDBを追加して、過去のチャット履歴を保存できるようにすると、より実用的なアプリになります。
他のモデルを試す:
Lambdaのコードにある modelId を書き換えるだけで、より賢い Claude 3.5 Sonnet や、Amazon独自の Titan モデルなどに瞬時に切り替えられます。

「動くものを作る」ことは、エンジニアリングにおいて最も強力な学習方法です。ぜひ、このチャットアプリを自分好みにカスタマイズして、さらに技術を深掘りしてみてください！

※今回作成したプロジェクトのGitHub repository: URL