TypeScriptだけでAIエージェントを作る フロント・エージェント・インフラのフルスタック実践

2026/05/22(金) TSKaigi 2026 Day1 / 15:50 ~ 16:20 （RightTouchトラック）での登壇資料です

Transcript

1. TSKAIGI 2026 / 2026.05.22 TypeScriptだけで AIエージェントを作る フロント・エージェント・インフラのフルスタック実践 福地 開 / @har1101mony
2. 自己紹介 福地 開 ふくち はるき @har1101mony 所属 NECソリューションイノベータ / JAWS-UG 東京支部 業務 AWSエンジニア / エージェントビルダー 表彰 AWS Community Builder (AI Engineering) 2025 Japan AWS Jr. Champions 2025 Japan All AWS Certifications Engineers
3. 今日話すこと / 話さないこと 想定聴衆 これからAIエージェントを構築していきたいTypeScriptエンジニア AIにTypeScriptを書かせる話ではなく、 TypeScriptを使ってAIエージェントをAWS上に構築する話です。 話すこと TypeScriptだけでフルスタックAIエージェントシステムをAWS上に構築する方法 AIエージェントをプロダクトとして公開・運用するためのAWSアーキテクチャ例 話さないこと TypeScriptそのものの深掘り 型についての深掘り AIコーディングツールの使い方 AI駆動開発とTypeScript
4. 目次 01 なぜ今 Agent Builder なのか 02 社内ナレッジサイトを例にした TypeScript × AWS アーキテクチャ 03 AWS × フロントエンドのアーキテクチャパターン 04 AWS Lambda × Hono を用いたバックエンドAPI構築 05 AIエージェント構築フレームワークの比較 06 AWS CDKを用いたインフラ構築 今回扱う要素 Amplify Gen2 / Lambda Web Adapter Hono on Lambda Strands + AgentCore MCP Server AWS CDK
5. なぜ今 Agent Builder なのか AIエージェントの普及に伴い、 以下のようなことが求められるようになります 業務を AI エージェントに安全に委譲できる形へ分解する インターフェース・エージェント・インフラをまとめて設計・実装する 特にAIエージェントが実行主体になっていくにつれ、 Web UI経由だけでなく、 APIやMCP経由でセキュアにアクセスできる仕組みは当たり前に なっていく こういったエージェントや、 その周りのシステムを提案・設計・実装できる人材が求められるようになる 人間 Web UI 認証認可 エージェント API MCP 認証認可 認証認可 既存システム
6. 次に話すこと 01 なぜ今 Agent Builder なのか 02 社内ナレッジサイトを例にした TypeScript × AWS アーキテクチャ 03 AWS × フロントエンドのアーキテクチャパターン 04 AWS Lambda × Hono を用いたバックエンドAPI構築 05 AIエージェント構築フレームワークの比較 06 AWS CDKを用いたインフラ構築 今回扱う要素 Amplify Gen2 / Lambda Web Adapter Hono on Lambda Strands + AgentCore MCP Server AWS CDK
7. 社内ナレッジ共有エージェントのアーキテクチャ例 フロントエンド・バックエンド・エージェント・インフラまで TypeScript で実装しています Web UI からの利用もコーディングエージェントからの MCP 利用も可能な形にしています
8. アーキテクチャ解説：フロントエンド エージェントとのチャットアプリケーションを用意 Web UI は Next.js で実装し、 Lambda Web Adapter でホスティング CloudFront + Function URL + Lambda Edge で セキュアにアクセス可能
9. アーキテクチャ解説：バックエンド Web UI からエージェントを呼び出すための Backend API を置く API Gateway + Lambda のシンプルなサーバーレス構成 Lambda 上の Hono が認証済みリクエストを受ける Hono からエージェントを呼び出し、 レスポンスを Web UI 向けに整える
10. アーキテクチャ解説：エージェント エージェントは判断とツール利用に集中させる AgentCore Runtime 上に Web UI 用エージェントを実装 ナレッジ検索ツールは MCP サーバー側で実装 MCP サーバーはローカルのコーディングエージェントからも使えるようにしている
11. AgentCore Runtimeとは AIエージェントや MCP サーバーを AWS 上で動かすサーバーレスなコンピュートサービス 2025年10月にGA。 AIエージェントも、 MCP サーバーもホスティング可能 全機能がサーバーレスで提供されているため、 エージェント開発に集中できる AgentCoreシリーズは他にもツール集約・記憶管理・認証認可・トレース観測など、 AIエージェントを構築・運用していくために必要 なものが用意されている。 システムの構成に合わせて必要な部品だけを選んで組み合わせられるのがGood！
12. Strands Agents SDKとは AWSが提供しているエージェント開発フレームワーク(OSS) 最小たった3行でAIエージェントを作ることができる エージェントのシステムプロンプトとツールを実装すれば、 それだけでエージェントが完成する Python版が先行だが、 TypeScript版も昨年12月にプレビュー版が公開され、 2026年5月に v1.0.0 へ import { Agent } from '@strands-agents/sdk' const agent = new Agent() const result = await agent.invoke('TypeScript って何？') Strands エージェントを AgentCore Runtime 上で動かすのが、 現在のAWSではよくある構成 JAWS-UG東京支部 StrandsとAgentCoreに入門＆宇宙最速で新機能ハンズオン！ AWSコミュニティで入門ハンズオンなども開催したことがあるので、 良ければご覧ください
13. アーキテクチャ解説：インフラ これらの構成すべてをAWS CDKで定義し、 CI/CDパイプライン経由でデプロイしている こうすることでフロント・バック・エージェント・インフラをすべて TypeScript で実装できる
14. AWS CDK(Cloud Development Kit)とは コードでAWSリソースを定義する、 ソフトウェア/クラウド開発フレームワーク(OSS) AWS Black Belt: AWS CDK Basic #1 Overview TypeScript製IaCツールのAWS CDKが様々な言語で実装できる理由 ～他言語変換の仕組み〜 (k.goto) TypeScript / JavaScript / Python / Java / C#/.NET / Go に対応しているが、 TypeScript がスタンダード アプリケーションエンジニアは、 使い慣れた言語でインフラ構築もできるようになった 昨年のTSKaigiでAWS Heroの後藤さんが他言語変換の仕組みについて解説しているのでご興味ある方はぜひ
15. 次に話すこと 01 なぜ今 Agent Builder なのか 02 社内ナレッジサイトを例にした TypeScript × AWS アーキテクチャ 03 AWS × フロントエンドのアーキテクチャパターン 04 AWS Lambda × Hono を用いたバックエンドAPI構築 05 AIエージェント構築フレームワークの比較 06 AWS CDKを用いたインフラ構築 今回扱う要素 Amplify Gen2 / Lambda Web Adapter Hono on Lambda Strands + AgentCore MCP Server AWS CDK
16. AWS×フロントエンドのアーキテクチャパターン AWS上のフロントエンドは、 ビルド成果物と実行場所で選ぶ 静的SPA/SSGで済むのか、 SSRやNode.jsサーバーが必要なのかで構成が変わる ここではサーバーレスの3パターンに絞って解説 Amplify Gen 2 + Hosting Gen 2 は フルスタックアプリケーション開発用フレー ムワーク Hosting は Webサイトをサーバーレスでホスティン グしつつ、 自動でアプリケーションをCDNにデプロイす る仕組み これらを組み合わせることで、 簡単にWebアプリケーシ ョンが公開可能 SPA / SSG / SSR に対応している CloudFront + S3 最もスタンダードな静的コンテンツ配信の構成 SPA / SSG に対応している APIや認証は別途実装が必要だが、 UI実装を最小運用 で配信できるのがメリット Lambda Web Adapter (LWA) ExpressやNext.jsなどのWebフレームワークを Lambdaで動かすための橋渡しを自動で行ってくれる もの LWA + Next.js などで、 Webアプリケーションをサ ーバーレスに動かすことができる 他2つと比べると少し難易度は上がるが、 自由度は最も 高い
17. Amplify Gen 2 + Hosting Amplify Docs: Set up Amplify Auth TypeScriptだけでフルスタックアプリケーションが開発・デプロイできる Amplify Gen2 はフルスタックアプリケーション構築フレームワーク アプリのデータモデル、 ビジネスロジック、 認証、 認可ルールをすべて TypeScript で記述するだけで、 クラウドインフラのデプロイまで一気通貫で行うことができる 非常に抽象化された部分が多く、 僅かなコードでフロントエンドとAWSリソースが作成される // amplify/auth/resource.ts import { defineAuth } from '@aws-amplify/backend' export const auth = defineAuth({ loginWith: { email: true, }, }) Frontend Amazon Cognito User Pool
18. Amplify Gen 2 + Hosting 各種AWSサービスを AWS CDK で追加管理できる 参考：Amplify & AgentCoreのAIエージェントをAWS CDKでデプロイしよう！ (みのるん) Amplify Gen2 の裏側ではAWS CDK が用いられている したがって、 追加したいAWSリソースがある場合は簡単に追加定義が可能 ここでAgentCore Runtimeを定義すれば、 簡単にフルスタックAIエージェントアプリケーションを作ることができる Hosting の仕組みと制限 Why doesn’t streaming(ReadableStream) work for Next.js API routes on AWS Amplify Hosting? 裏側の仕組みとしては CloudFront + S3 と同じ。 Git連携やビルドパイプラインがマネージドな機能として用意されている Next.js も対応しているが、 機能面で制限がいくつかあり、 特にStreamingに対応していないことには注意が必要
19. CloudFront + S3 (静的 SPA) AWS Docs: Restrict access to an Amazon S3 origin 最もスタンダードな静的コンテンツ配信の構成 コンテンツ を S3(ストレージ) に置き、 CloudFront(CDN) でコンテンツを公開する SPA / SSR のみ対応 UI と API の境界をはっきり分ける構成 バックエンドの処理・認証・ビルドパイプラインなどは別途自前実装が必要 エージェントアプリにおいては、 必然的に認証済みAPI・エージェント呼び出し・ストリーミング応答などをバックエンドの処理へ分離する形になる
20. Lambda Web Adapter (LWA) とは Lambda Web Adapter でウェブアプリを (ほぼ) そのままサーバーレス化する (2025 年改訂版) LWAとは、 普通のWebアプリをコード修正なしでサーバーレス化できる便利ツール Lambdaは以下のような実行方法でないと動かないという制限があるため、 普通のWebアプリをそのまま乗せても動いてくれない export const handler = async (event, context) => { // ここに処理を記述 } そこで LWA を使うと、 ExpressやNext.jsなどのWebフレームワークをLambdaで動かすための橋渡しを自動で行ってくれる Lambda のイベントを HTTP リクエストへ変換し、 アプリが返した HTTP レスポンスを Lambda の応答へ戻す
21. Lambda Web Adapter (LWA) + Next.js GitHub: aws-lambda-web-adapter 今回のフロントエンドは LWA + Next.js + CloudFront で公開している ベースとなる Next.js のプロジェクトは普通に作成してOK LWA を導入するには、 以下のおまじないを1行 Dockerfile に追加してデプロイするだけ FROM public.ecr.aws/docker/library/node:24-slim AS runner WORKDIR /app # 以下1 行でLambda Web Adapter を設定 COPY --from=public.ecr.aws/awsguru/aws-lambda-adapter:1.0.0 /lambda-adapter /opt/extensions/lambda-adapter COPY --from=builder /app/.next/standalone ./ COPY --from=builder /app/.next/static ./.next/static EXPOSE 3000 CMD ["node", "server.js"] この1行を外せばECSなどのコンテナオーケストレーションサービスに簡単に移動できるので、 ポータビリティも非常に高い
22. 応用編：CloudFront + S3 + LWA フロントエンド SSR 環境構築の悩みを解決！最新 React Router v7 と Next.js 15 のサーバーレス環境構築方法 S3 + LWA で SSR と静的ファイルを分ける構成も取れる CloudFront を入口にして静的コンテンツは S3 へ、 動的コンテンツ は Function URL + Lambda Web Adapterへ、 それぞれパスで振り分 ける Function URL は IAM 認証にし、 GET は OAC、 POST/PUT は Lambda@Edge で SigV4 署名を補う構成例 React Router v7 / Next.js 15 の SSR アプリを、 ECS常時起動ではなく Lambda 上で扱う選択肢として見られる
23. 次に話すこと 01 なぜ今 Agent Builder なのか 02 社内ナレッジサイトを例にした TypeScript × AWS アーキテクチャ 03 AWS × フロントエンドのアーキテクチャパターン 04 AWS Lambda × Hono を用いたバックエンドAPI構築 05 AIエージェント構築フレームワークの比較 06 AWS CDKを用いたインフラ構築 今回扱う要素 Amplify Gen2 / Lambda Web Adapter Hono on Lambda Strands + AgentCore MCP Server AWS CDK
24. AWS Lambda × Hono を用いたバックエンドAPI構築 HonoとLambda AWSユーザのためのHono入門 (watany) Hono とは、 TypeScript で書ける、 超高速な Web フレームワーク AWS コミュニティの方が Hono を Lambda で動かせるようにコントリビュート Lambda のストリーミングレスポンスにも対応している import { Hono } from 'hono' import { streamHandle } from 'hono/aws-lambda' const app = new Hono() app.get('/stream', async (c) => { return c.streamText(async (stream) => { for (let i = 0; i < 3; i++) { await stream.writeln(`${i}`) await stream.sleep(1) } }) }) const handler = streamHandle(app) 自前実装を除けば、 LWA か Hono のみ対応している
25. API Gateway REST API + Lambda + Hono でストリーミング ストリーミングレスポンスといえばこんなの TypeScriptって何？ TypeScriptは、 JavaScriptに型システムを加えた言語です。 実行時はJavaScriptとして動きますが、 実装時に型で入力・出力を確認できます。 API、 ツール、 インフラの境界もコードレビューしやすくなります。 こういった回答出力形式は、 AIエージェントとのやり取りにおいてほぼ必須になっている したがって、 Web UI付きのAIエージェントシステムを実装する際は、 これをどのように実装するか考えておく必要がある ちなみにAgentCore Runtimeはデフォルトでストリーミングレスポンスに対応しているので、 ブラウザから直接 API コールするのも一つの手 段
26. API Gateway REST API + Lambda + Hono でストリーミング 昨年、 API Gateway + Lambda の王道サーバーレス構成で手軽に実現可能になった API Gateway REST API が2025年11月にストリーミングレスポンスに対応。 統合タイムアウトの延長も組み合わせる Lambda のストリーミングレスポンスは Node.js ランタイムのみ対応。 Hono なら問題なし AWS CDK で実装する API Gateway const streamingIntegration = new apigateway.LambdaIntegration(fn, { proxy: true, timeout: cdk.Duration.seconds(120), responseTransferMode: apigateway.ResponseTransferMode.STREAM, }) Lambda const fn = new NodejsFunction(this, 'lambda', { entry: 'lambda/index.ts' handler: 'handler', runtime: lambda.Runtime.NODEJS_22_X, }) responseTransferMode: STREAM を指定 timeout も伸ばしておく 公式手順通り、NodejsFunction を使う .ts のコードを書くだけで、 ビルドからデプロイまで任せられる
27. 次に話すこと 01 なぜ今 Agent Builder なのか 02 社内ナレッジサイトを例にした TypeScript × AWS アーキテクチャ 03 AWS × フロントエンドのアーキテクチャパターン 04 AWS Lambda × Hono を用いたバックエンドAPI構築 05 AIエージェント構築フレームワークの比較 06 AWS CDKを用いたインフラ構築 今回扱う要素 Amplify Gen2 / Lambda Web Adapter Hono on Lambda Strands + AgentCore MCP Server AWS CDK
28. AIエージェント構築フレームワークの比較 TypeScriptで書ける、 AIエージェント構築フレームワークの代表4選 Strands Agents 4つの中で最も AWS ネイティブ モデル呼び出しや AgentCore シリーズとの連携が楽 AWS サービスの裏側で実際に本番適用されている実績あり モデルとツールを自然に組み合わせて動かす、 モデル駆動型アプ ローチ Mastra 4つの中では最古参のエージェントフレームワーク(2025/03~) 自律型エージェントだけでなくワークフローも構築可能 Next.js などフルスタック Web アプリに寄せやすい Deep Agents LangGraph スタイルの長時間タスク向け プランニング・作業記憶管理・サブエージェントが中核 調査、 計画、 成果物作成など複数ステップをまたぐ用途に向く ミドルウェアで挙動をカスタマイズできる(ハーネスの一部) Claude Agent SDK 裏側で Claude Code を動かす、 少し特殊なフレームワーク 自律的なコーディングはもちろん汎用的なタスクを遂行可能 ローカルのCLAUDE.mdやSkillといった資産をクラウド上の Claude Codeで使えるイメージ
29. Strands Agents TypeScript Strands Agents SDK: TypeScript Quickstart const model = new BedrockModel({ region, modelId: MODEL_ID }) const agent = new Agent({ model, tools: [frameworkNotesTool], }) 裏側の仕組み：エージェンティックループについて プロンプトによって提供されたタスクを完了するまで、 モデルとツールのループを繰り返す機能 モデルがタスクを認識する→使うツールを決定する→ツールを使う→モデルが結果を確認する→ モデルが次のタスクを確認する→使うツールを決定する…というループ
30. Mastra Mastra: Build AI Agents With a Modern TypeScript Stack const bedrock = createAmazonBedrock({ region }) const agent = new Agent({ name: 'mastra-bedrock-agent', model: bedrock(MODEL_ID), tools: { frameworkNotes }, }) TypeScriptネイティブなフレームワーク Agent / Tool / Memory / MCP / Workflow / Evals / Observability を同じ設計単位で扱う エージェントだけでなく、 人間の承認を含む業務フローなどのAIプロダクト構成にも対応しやすい Pythonなど他の言語では対応していないので、 TypeScriptに全振りされている 開発者目線では Web アプリ + AI を一体で育てたい時に強い Next.js / React など、 既存のTS WebアプリへAI機能を組み込みやすい もちろん AgentCore Runtime 上でも簡単に動かすことができる
31. Deep Agents LangChain Docs: Deep Agents overview const model = new ChatBedrockConverse({ model: MODEL_ID, region, }) const agent = createDeepAgent({ model, tools: [frameworkNotesTool], }) 複雑で長いタスク向けのエージェントハーネス 計画、 仮想ファイルシステム、 サブエージェント、 長期記憶を最初から前提にしている LangChainの部品とLangGraphの実行基盤を使い、 長い作業を複数ステップで進める ミドルウェアというものを使って、 エージェントの挙動をより細かく制御できる (ToDoリスト作成、 サブエージェント委任、 コンテキスト圧縮など) 単なるチャットアプリというより、 1リクエストで終わらない作業を扱う時に採用する 調査、 計画、 成果物作成、 コード生成のように、 途中状態を持ちながら進む用途に向く 短いAPI応答やWeb UIの同期的なリクエストには重くなりやすい
32. Claude Agent SDK Claude Docs: Agent SDK reference - TypeScript for await (const message of query({ prompt, options: { permissionMode: 'dontAsk', maxTurns: 1, tools: [], }, })) { // result message をアプリ側へ返す } Claude Code を裏側で使って動かすことができる SDK ローカルの Claude Code で実行していることを、 システムに組み込んで使うことができる特殊なフレームワーク CLAUDE.md や Skills, Hooks, MCP といった Claude Code の仕組みをそのまま横展開できる あらゆるタスクを実行できる汎用エージェント CI/CD、 開発支援、 リポジトリ操作のように、 コーディングエージェント的な作業をアプリから呼びたい時にはもちろん有用 それだけでなく、 ローカルで実行している日常的なタスクを遂行するためにも使える
33. 今回のノウハウ共有エージェントの実装例 const sigv4Fetch = createSigV4Fetch({ // IAM 認証でMCP サーバーに接続する自前関数 service: 'bedrock-agentcore', region: 'ap-northeast-1', }); const transport = new StreamableHTTPClientTransport(new URL(GATEWAY_URL), { fetch: sigv4Fetch, // MCP SDK のfetch をIAM 認証版に差し替え }); const mcpClient = new McpClient({ transport }); // MCP サーバーの設定を定義 const model = new BedrockModel({ modelId: 'jp.anthropic.claude-sonnet-4-6', region: 'ap-northeast-1', stream: true, }); const agent = new Agent({ model, tools: [mcpClient], // MCP クライアントをツールプロバイダとして登録 systemPrompt: DEFAULT_SYSTEM_PROMPT, }); for await (const event of agent.stream(prompt)) { /* レスポンスを返す */ } 使用したのはStrands Agents SDK エージェントと MCP サーバーで実装を分離していた エージェント側はエージェント本体と、 接続する MCP サーバーの設定のみ定義(下記参照) MCP サーバー側に検索処理などを実装
34. 次に話すこと 01 なぜ今 Agent Builder なのか 02 社内ナレッジサイトを例にした TypeScript × AWS アーキテクチャ 03 AWS × フロントエンドのアーキテクチャパターン 04 AWS Lambda × Hono を用いたバックエンドAPI構築 05 AIエージェント構築フレームワークの比較 06 AWS CDKを用いたインフラ構築 今回扱う要素 Amplify Gen2 / Lambda Web Adapter Hono on Lambda Strands + AgentCore MCP Server AWS CDK
35. AIエージェント時代にAWS CDKを使う理由 コーディングエージェントが当たり前になってきた今、 すべてをコードで管理するケースが増えてきている AI Agent 時代のソフトウェア開発の型 〜 Everything as Code で叡智を伝える 〜 (AWS) Everything as Code というのが AWS のベストプラクティスの1つとして記載されている 開発ライフサイクル全体における保守性・拡張性・自動化を向上させるためのコード中心のアプローチ アプリケーションもインフラもエージェントそれ以外もすべてコードで管理するべし、 という教え
36. AIエージェント時代にAWS CDKを使う理由 // infra/cdk/test/agent-runtime-stack.test.ts describe('AgentRuntimeStack', () => { test.each(variants)('snapshot: $name', (variant) => { const app = new cdk.App(); const stack = new AgentRuntimeStack(app, 'AgentRuntimeStack', { stage: variant.stage, env: { region: 'ap-northeast-1' }, gatewayUrl: 'https://gateway.example.com/mcp', /* ... 省略 */ }); expect(snapshotTemplate(stack)).toMatchSnapshot(); }); }); // variants = staging / production を test.each で展開 // デプロイせず CloudFormation 差分を検知する // infra/cdk/lib/stacks/AgentRuntimeStack.ts this.runtime = new agentcore.Runtime(this, 'Runtime', { agentRuntimeArtifact: agentcore.AgentRuntimeArtifact.fromImageUri(imageUri), protocolConfiguration: agentcore.ProtocolType.HTTP, networkConfiguration: agentcore.RuntimeNetworkConfiguration.usingPublicNetwork(), executionRole: this.executionRole, environmentVariables: { GATEWAY_URL: gatewayUrl, /* ... */ }, }); // リソース間の関係を1 行で表現できる // IAM Policy は CDK が自動生成 agentRuntimeRepository.grantPull(this.executionRole); // TS199 行 / 出力CFn1381 行、約7 倍の差 Testable かつ Readable AIエージェントが書くのなら直接CloudFormationを書かせればいいじゃないですか何故AWS CDKを使う必要があるのさ (watany) コーディングエージェントがコードを書く昨今、 大事なのはエージェントへのフィードバックサイクルと、 人間の読みやすさ AWS CDK を使えば、 TypeScript の恩恵による型チェックや Linter によるフィードバックに加えて、 オフラインテストも書きやすい (スナップショットテスト、 アサーションテストなど) AWS CDK は最終的に CloudFormation テンプレート(yaml / json)に変換されてデプロイされるが、 その yaml / json を直接書こうとする と行数が多すぎてレビューが困難 AWS CDK を使えば抽象化されていて行数を抑えられるのと、 リソースの関係性を表す記法が充実しているのでレビューがしやすい
37. まとめ TypeScriptでのエージェント開発、 楽しんでいきましょう！ AIエージェントシステムをAWS上で、 かつ TypeScript のみを使って構築する方法をお話しました 従来エージェント開発といえば Python が主流な部分もありましたが、 TypeScript も非常に現実的な選択肢になってきている 最終的にどんなエージェントを作るかはユースケース次第。 それに合わせて構成を柔軟に変化できるのが AWS × AIエージェントの良いところ
38. Special Thanks 大いに参考にさせていただきました！ 脱 雰囲気実装！ AgentCoreを良い感じに WEBアプリケーションに組み込むために