当初、私たちは動画をインデックスしてAIに質問できるシステムの構築を目指していた。しかし、チームが結成されたばかりの野良チームであることに加え、開発期間がわずか2日間という制約を踏まえると、動画を多段階的に前処理するパイプラインを安定的に構築・完成させることは現実的に難しいと判断した。そこで、比較的前処理がシンプルな画像をインデックスする設計へと方針を転換し、限られたリソースの中で完成度を高める戦略を選択した。また、短期間での開発を乗り切るための方針として、サーバーレスアーキテクチャとOSSをフル活用する方針を採用した。インフラの運用管理に割くリソースを最小化しつつ、すでに実績のあるOSSを積極的に取り入れることで、限られた時間の中でも本質的な機能の実装に集中できる環境を整えた。実際の開発では、 1、フロントエンドと検索ロジックの構築 2、CDKを使ったインフラの整備 3、アップロードされた画像ファイルのS3への保存とイベント発火 4、Bedrockによるインデックス処理 5、開発体験を整備するDevOps という形でパイプライン・処理ごとに役割を明確に分担し、最終日の1日で各コンポーネントの繋ぎ込みを行うギリギリのスケジューリングで実装を進めた。各メンバーがそれぞれ異なる強みの領域を持っていたことが功を奏し、各々が自律的に自分の役割を推進できたことで、分業体制が自然かつ効果的に機能した。そして、コンポーネント同士を繋ぎ合わせる最終フェーズでは密なコミュニケーションが不可欠であり、チーム全員が同じ空間に集まってオフラインで開発していたことが、迅速な意思疎通と問題解決に大きく貢献した。

🎯 概要

Hitode ChatBot は、Amazon Bedrock の Knowledge Base 機能を活用して構築された画像検索が可能なAI チャットボットです。Vercel AI SDKをベースにしたNext.js フロントエンドと、AWS CDK によるインフラストラクチャで、モダンでスケーラブルなアーキテクチャを実現しています。

🚀 主な機能

Amazon Bedrock Knowledge Base との統合
リアルタイムチャット機能（AI SDK）
チャット履歴の保存（PostgreSQL）
ファイルストレージ（S3）
TypeScript による型安全性

🏗 アーキテクチャ

主要コンポーネント

Web アプリケーション: Next.js 16 + Vercel AI SDK
ナレッジベース: Amazon Bedrock Knowledge Bases
データベース: Amazon Aurora PostgreSQL（チャット履歴）

🛠 技術スタック

Web アプリケーション

Next.js 16 - React フレームワーク
React 19 - UI ライブラリ
AI SDK - LLM 統合ライブラリ
Tailwind CSS 4 - CSS フレームワーク
TypeScript 5 - 型付き JavaScript
Biome - Linter & Formatter
Drizzle ORM - データベース ORM
S3 - ファイルストレージ

インフラストラクチャ

AWS CDK - Infrastructure as Code
Amazon Bedrock - AI/ML サービス
Amazon S3 Vector - ベクトルストア
Amazon Aurora PostgreSQL - データベース
AWS Lambda - サーバーレス関数
TypeScript - CDK の実装言語

📋 前提条件

Node.js 20.x 以上
pnpm 10.x 以上
AWS CLI
AWS アカウント
Amazon Bedrock へのアクセス権限

📦 プロジェクト構成

hitode/
├── web/                    # Next.js アプリケーション（Vercel AI Chatbot ベース）
│   ├── app/               # Next.js App Router
│   ├── components/        # React コンポーネント
│   ├── lib/               # ユーティリティとビジネスロジック
│   ├── public/            # 静的ファイル
│   ├── package.json       # 依存関係
│   └── README.md          # アプリの詳細
│
├── infra/                 # AWS CDK インフラストラクチャ
│   ├── lib/              # CDK スタック定義
│   │   ├── constructs/   # 再利用可能な Construct
│   │   └── stacks/       # CDK スタック
│   ├── bin/              # CDK エントリーポイント
│   ├── test/             # テストファイル
│   ├── package.json      # 依存関係
│   └── README.md         # インフラの詳細
│
├── doc/                   # ドキュメント
│   └── architecture.dio.svg  # システム構成図
│
└── README.md             # このファイル

Hitode Chatbot

画像について検索が可能なAIチャットボット

推しアイデア

作った背景

推し技術

プロジェクト詳細

Hitode Chatbotの紹介

画像検索が可能なAI チャットボットアプリケーション

🎨 Hitode Chatbot 開発への道