[レポート] Building Agent-powered Apps with AWS Bedrock + Vercel に参加してきました! #AIM127-S #AWSreInvent

[レポート] Building Agent-powered Apps with AWS Bedrock + Vercel に参加してきました! #AIM127-S #AWSreInvent

2025.12.02

こんにちは!
運用イノベーション部の大野です。
re:Invent 2025 の Workshop「Building Agent-powered Apps with AWS Bedrock + Vercel」に参加してきましたので、内容をご紹介いたします。

セッション概要

セッションタイトル

AIM127-S | Building Agent-powered Apps with AWS Bedrock + Vercel (sponsored by Vercel)

説明

このハンズオンワークショップでは、AWSとのパートナーシップで構築されたVercel AI Cloudを使用して、エージェント理論を実践に移します。開発者は、AWS Bedrockを主要なモデルプロバイダーとして、AI SDKとAI Gatewayを使用して、エンドツーエンドのエージェントアプリケーションを設計・デプロイします。AIモデルへのアクセス、エージェントループの実装、外部ツールの統合から、AWSを利用したVercelのサーバーレスコンピュート上でのフルWebインターフェースのデプロイまで、すべてをカバーします。スライドの代わりに、実際に動作するプロトタイプと、エージェント開発を加速させる実践的なスキルを持ち帰っていただけます。最終的には、本番環境レベルのAIエージェントを設計、構築、立ち上げる準備が整います。このプレゼンテーションは、AWSパートナーであるVercelによって提供されます。

スピーカー

  • Josh Singh(Software Engineer, Vercel)

セッションカテゴリなど

  • Type: Workshop
  • Level: 100 – Foundational
  • Features: AWS Partners, Hands-on, Interactive
  • Topic: Artificial Intelligence
  • Area of Interest: Agentic AI
  • Role: Developer / Engineer

IMG_1806

セッションサマリ

このセッション(ワークショプ)では、Vercel AI GatewayとAI SDKおよびAWS Bedrockを活用して、 自然言語で指示を入力するだけでGitクローン〜ファイル修正、プルリクエストの作成まで一貫して自動で実行してくれる実用的なAIエージェントアプリケーションを構築しました。
ワークショップの手順にはSlack(Discord)連携まで記載あったのですが、諸事情ありそちらは未実施です。
(※主目的のアプリ構築は実施できましたのでご容赦ください...)

実施内容

ワークショップは以下の構成で進めました。

  1. Welcome - 環境セットアップ
  2. Local Coding Agent - ローカル環境でのエージェント構築・動作確認
  3. Moving to Production - Vercel Sandboxへの移行とデプロイ

1. 環境セットアップ

提示されたテスト用リポジトリをローカルにクローンし、Vercel CLIをセットアップしました。
git clone は記載省略します。

pnpm setup
export PNPM_HOME="/Users/ono.ikumi/Library/pnpm"
export PATH="$PNPM_HOME:$PATH"
pnpm i -g vercel
vercel link

vercel link実行後、ブラウザでデバイス認証を行いました。

ディレクトリ構成

reinvent-coding-agent/
├── api/                    # Vercel Serverless Functions
│   ├── agent.ts           # メインAPIエンドポイント(POST /api/agent)
│   ├── slack.ts           # Slack Bot連携
│   └── discord.ts         # Discord Bot連携
├── utils/                  # コアロジック
│   ├── agent.ts           # エージェント実装(generateText + ツール定義)
│   ├── sandbox.ts         # Vercel Sandbox操作(ファイル操作、PR作成)
│   └── test.ts            # テストスクリプト
├── package.json           # 依存関係(ai, @ai-sdk/gateway, @vercel/sandbox等)
├── tsconfig.json          # TypeScript設定
├── vercel.json            # Vercel設定
└── .env.local             # 環境変数(VERCEL_OIDC_TOKEN, GITHUB_TOKEN)

2. 環境変数の設定

cp .env.example .env.local
vercel env pull

設定した環境変数:

  • VERCEL_OIDC_TOKEN: AI GatewayとSandbox認証用(vercel env pullで取得)
  • GITHUB_TOKEN: PR作成用(GitHub Personal Access Tokenを手動追加)

vercel env pullを実行すると.env.localが上書きされるため、GITHUB_TOKENを再設定する必要がありました。
対策としてsandbox.tsの先頭にdotenv.config({ path: ".env.local" })を追加し、明示的に環境変数を読み込むよう修正しています。

3. Vercel AI Gatewayの有効化

テスト実行時にエラー発生

$ pnpm run test

> reinvent-agents-workshop@1.0.0 test
> tsx utils/test.ts

GatewayInternalServerError: AI Gateway requires a valid credit card on file to service requests.
Please visit https://vercel.com/d?to=xxxxxxxxxxxxxxxxxxxxxxxxxxxxxdd-credit-card to add a card and unlock your free credits.

Vercelアカウントにクレジットカードが登録されていないためでした。
登録後、$5分の無料クレジットが付与され、エラー解消されました。

エージェントはVercel AI Gatewayを通じてAWS Bedrockにアクセスします。
以下の設定により、Bedrockを優先プロバイダーとして使用し、利用できない場合はAnthropicにフォールバックするようです。

const result = await generateText({
  model: gateway("anthropic/claude-sonnet-4"),
  providerOptions: {
    gateway: { order: ["bedrock", "anthropic"] }
  },
  // ...
});

4. ローカルエージェントの動作確認

エージェントには3つのツールが実装されています:

  • list_files: ディレクトリ一覧取得
  • read_file: ファイル読み取り
  • edit_file: ファイル編集(文字列置換)

クレジットカード登録後にテストを再実行すると、エージェントが正常に動作しました。

$ pnpm run test

> reinvent-agents-workshop@1.0.0 test
> tsx utils/test.ts

Listing files at '.'
Reading file at 'package.json'
Reading file at 'README.md'
Listing files at 'api'
Listing files at 'utils'
Reading file at 'tsconfig.json'
{
  response: '## Project Overview\n' +
    "This is **reinvent-agents-workshop** - an AI-powered coding agent built with modern TypeScript...\n" +
    '### Core Functionality\n' +
    '- **AI Coding Agent**: Uses AI SDK to read and modify GitHub repositories\n' +
    '- **Multi-Platform**: Accessible via API, Slack bot, or Discord bot\n' +
    '- **Automated PRs**: Creates pull requests with code changes based on natural language prompts\n'
}

エージェントに「このプロジェクトについて説明して」と指示すると、list_filesread_fileツールを使って自律的にファイルを探索し、プロジェクト概要を生成しました。

5. Vercel Sandboxへの移行とPR作成

ローカル環境ではセキュリティリスク(LLM生成コードの直接実行)の問題があるため、Vercel Sandboxへの移行が推奨されています。

Sandboxへの移行により、以下が実現できます。

  • ファイル操作は隔離されたSandbox VM内で実行
  • 変更を永続化するためcreate_prツールを追加(GitHub API経由でPull Request作成)

「READMEにContributingセクションを追加して」と指示すると、エージェントは以下を自動実行します。

  1. ファイル構造の確認
  2. README.mdの読み取り
  3. Contributingセクションの追加
  4. Pull Request作成

Sandbox環境でのファイル操作ログ:

repoUrl: https://github.com/xxxxxxxx/reinvent-coding-agent
GITHUB_TOKEN exists: true
Using auth URL: [authenticated]
Listing files in: .
Files listed successfully for: .
total 76
drwxr-x---  5 vercel-sandbox vercel-sandbox   179 Dec  2 07:01 .
-rw-r--r--  1 vercel-sandbox vercel-sandbox  4381 Dec  2 07:01 README.md
drwxr-xr-x  2 vercel-sandbox vercel-sandbox    56 Dec  2 07:01 api
...

Reading file: README.md
File read successfully: README.md # AI SDK Coding Agent...
Editing file: README.md
File edited successfully: README.md
Creating PR with title: Add "hey were so back" to README...

vercel-sandboxユーザーで実行されていることから、Sandbox VM内で動作していることがわかります。

PR作成時にエラーが発生:

No GitHub account was found matching the commit author email address

原因はsandbox.tscreatePR関数でgit configに設定しているメールアドレス(ai-agent@example.com)がGitHubアカウントに紐づいていなかったためで、自分のGitHubアカウントのメールアドレスに変更して解決しました。

6. APIエンドポイントのテストとデプロイ

api/agent.tsにPOSTハンドラーを実装し、HTTP経由でエージェントを呼び出せるようにしました。

ローカルでのテスト:

# 開発サーバー起動
$ vercel dev
Vercel CLI 48.9.0
> Ready! Available at http://localhost:3000

# 別ターミナルからリクエスト送信
$ curl -X POST localhost:3000/api/agent \
  -H "Content-Type: application/json" \
  -d '{"prompt":"READMEを更新して","repoUrl":"https://github.com/xxxxxxxx/reinvent-coding-agent"}'

レスポンス:

{
  "response": "Done! I've successfully added a Contributing section to the README with standard formatting and guidelines. The section includes:\n- Getting started instructions for new contributors\n- Guidelines for making changes\n- Process for submitting pull requests\n- Code of conduct reminder\n- Information on how to get help\n\nThe pull request has been created and is available at: https://github.com/xxxxxxxx/reinvent-coding-agent/pull/1"
}

エージェントがREADMEにContributingセクションを追加し、自動的にPull Requestを作成しました。

感想

AIエージェントの有用性と活用幅の広さを改めて実感できたワークショップでした!
プロンプトを与えるだけで、エージェントが自律的にファイルを探索し、必要な情報を収集し、適切なアクションを実行する様子は見ていても面白いですね。

また、昨今のセキュリティ脅威の対策として、Vercel Sandboxによって、GitHubリポジトリを安全な環境でクローン・操作できる仕組みは大変良いと感じました。
エージェントがファイルを読み書きし、Pull Requestを作成するまでの一連の操作をサーバーレス環境で完結できます。

ワークショップとしては自前のVercelアカウント(+クレジット連携)が必要だったり、提供されたコードやコマンドがコピペだけでは動かなかったりと一癖ある内容でしたが、総じていい勉強になりました。

まとめ

100レベル(Foundational)のワークショップでしたが、実際に動作するAIエージェントを構築できる充実した内容でした。
他にもまだまだ参加予定のワークショップがありますので、今後もお読みいただけますと幸いです!

以上、大野でした!


参考リンク:

この記事をシェアする

FacebookHatena blogX

関連記事