🚀

Codex CLI：30分クッキング-AIチャットポッドDEMO-１

に公開
ChatGPT
Codex
idea

💡 Codex CLI でAIチャットポッドのDEMOを３０分で実装

Codex CLI の実装DEMOとして、AIチャットポッドを30分クッキングで実装してみた。

🧠　ChatGPTにAIチャットポッドのおすすめ構成を聞く

最短で動くWebアプリ構成（ChatGPTのおすすめ）

  • フロント/フルスタック: Next.js 15（App Router, TypeScript）
  • UI: Tailwind CSS + shadcn/ui（Radix UI）
  • ストリーミング: Vercel AI SDK（React Server Components/Edge対応）
  • モデル接続: プラガブル（OpenAI / Azure OpenAI / Anthropic / AWS Bedrock を切替）
  • ベクトルDB: 開発中は SQLite + pgvector(Postgres) or Chroma、社内向けは OpenSearch Serverless
  • 認証: NextAuth.js（GitHub OAuth or Azure AD / Cognito）
  • 運用: Vercel or Netlify（まずはVercelが楽）

「PoC速度重視。まずはサーバーレス(Edge)でストリーミングがサクッと動く体験を作り、RAGなどは最小構成で後付け。」だそうです。
なので、ChatGPTに上記を元にして、人手で行った方が良い作業と、codexに任せる作業を切り分けてもらう。

⚙️　人手で行った方が良い作業

nvm、Node LTS、pnpmはインストールされている前提（githubとNetlifyのアカウントもあり）

(1) プロジェクトの作成（雛形）

  • Next.jsの雛形をTypeScript/ESLint/Tailwind込みで作成し、プロジェクトへ移動します。
pnpm create next-app@latest ai-chat-poc --ts --eslint --app --tailwind
cd ai-chat-poc

(2) APIキーの準備

  • Google AI Studio からAPIキーを取得（無料枠）geminiが無料枠を一番使えそう。。。
  • 作成したキーを .env.local に記入
GEMINI_API_KEY = <APIキー>
GEMINI_MODEL = gemini-2.0-flash
GEMINI_API_BASE_URL = https://generativelanguage.googleapis.com/v1beta

(3) ローカル起動の確認

pnpm dev
# http://localhost:3000 にアクセス
  • 開発サーバを起動（デフォルト http://localhost:3000）。
  • ブラウザでアクセスして動作確認します。

(4) Gitリポジトリ初期化と最初のコミット

git init -b main
echo -e ".env*\n.next\nnode_modules" >> .gitignore
git add -A
git commit -m "chore: init"
  • 新しいGitリポジトリを作成し、デフォルトブランチ名をmainにします。
  • 機密（.env*）と巨大ディレクトリ（ビルド成果物.next、依存node_modules）をコミット対象外にします。
  • すべての変更をステージング＆最初のコミットを作成します。

GitHubで空のリポジトリ<repo>を作成後、pushします。

git remote add origin https://github.com/<your-account>/<repo>.git
git push -u origin main

(5) Netlifyでビルド

フリーのホスティングサイトであるNetlifyでGitHub連携してビルドします
https://www.netlify.com/

  • NetlifyのWeb管理画面で「Add new site → Import an existing project → GitHub」を選択
  • 対象リポジトリを選ぶ
  • 「Build command」→ pnpm build、「Publish directory」→ .next に設定（自動検出でも可）
  • 「Deploy site」をクリック

以下の Hello World 的な画面が表示される
1
ここからCodex CLI に調理してもらいます。

🤖　Codex CLIでの作業

作成した"ai-chat-poc"ディレクトリでcodexを起動

Codexへの指示

ここにTypeScript + ESLint + App Router + Tailwind CSSを使った
Next.jsプロジェクトの雛形があります
AIチャットボットのデモを作成したいです。
APIはgoogleを使用します。.env.localにAPIキーがあります。

Codexの回答

### 想定プランです。
- 既存構成と依存関係を確認し、必要パッケージ（Vercel AI SDK等）を整理
- チャットUI（履歴・入力欄・ローディング表示）を実装し、Tailwindで調整
- Google APIを使った会話ロジックとエラーハンドリングを実装・検証
この流れで進めてよいかご確認ください。

- 依存追加のため npm install ai @ai-sdk/google を実行してよいでしょうか？
- npm install が失敗しました。代わりに pnpm add ai @ai-sdk/google を試してよいでしょうか？

Vercel AI SDKライブラリ　と　Google Geminiモデル用のプロバイダ　をインストールした模様

### 以下の編集を行ってよいかご確認ください。
- src/app/api/chat/route.ts を新規作成し、Vercel AI SDK + Google(Gemini)でストリーミング応答するAPIエンドポイントを実装
- src/app/page.tsx をチャットUI（履歴表示・入力フォーム・ローディング/エラー表示）へ差し替え、useChat を利用
- 必要に応じて src/app/layout.tsx のメタデータをチャットデモ向けに更新

実装完了

こんな感じで実装完了。（15分くらいですかね）

### 実装内容
- src/app/api/chat/route.ts に Gemini を利用したストリーミング API を追加し、GEMINI_API_KEY を参照するようにしました（未設定時のエラー応答も実装）。
- src/app/page.tsx を @ai-sdk/react の useChat ベースのチャット UI に置き換え、履歴表示・ステータス表示・停止ボタン・エラーハンドリングを実装しました。
- src/app/layout.tsx のメタデータをチャットデモ向けの内容に更新しました。
- package.json / pnpm-lock.yaml に ai, @ai-sdk/google, @ai-sdk/react を追加しました。
検証
- pnpm lint
次のステップ
- pnpm dev を実行してブラウザでチャットの動作を確認してください。

💬　チャット画面

エラー解消して無事に起動完了
1
こんな感じでチャット画面が表示され
チャットを打つとGemini先生から俊速で回答が返ってくる。
2

ということで本日の30分クッキングは終了。

技術スタック、Netlifyでのデプロイはまた次回。。。

Discussion