AIチャットアプリを作ってみよう (準備編)

この記事は某有志アドベントカレンダー 2023の 7 日目の記事です。

---

「AIチャットアプリを作ってみよう」シリーズ

• 準備編(この記事)
• AI チャット実装編
• インフラ構築編

---

こんにちは。あべです。

弊社のアドベントカレンダーに参加することになったので、
せっかくなので手を動かして何か作ってみようと思います！

題材

ユーザーの入力に対して１問１答してくれるシンプルなチャットアプリを作ります！

触りたい技術

最近気になるあれやこれや、、、

• Bun: 流行りのJS実行エンジンですね。パッケージ管理とかもできる！
• Hono: Bunに対応したWebフレームワークです。
• AWS App Runner: フルマネージドなコンテナサービスです。
• OpenAI API: Open AIの自然言語モデルが使用できるAPIです。

構成

サーバーサイド

TypeScript(Bun) × Hono

1. リクエストでチャットの内容を受け取って、OpenAI APIに投げる。
2. Open AI API の返答をクライアントに返す。

インフラ

DockerコンテナをAWS App Runnerで実行する。
せっかくなのでAWS CDKでデプロイしてみようと思います。

フロントエンド

TBD
(AIにフロントエンドのデザインしてもらって実装してみようかな、、、)

準備

Bunのインストール

curl -fsSL https://bun.sh/install | bash

Honoのプロジェクト作成

$ npm create hono@latest ai-chat-app

もろもろファイルが生成されて、エントリポイントがこんな感じになっています。

// src/index.ts

import { Hono } from "hono";
const app = new Hono();

app.get("/", (c) => c.text("Hello World!"));

export default app;

早速Hello Worldしてみましょう。

$ cd ai-chat-app
$ bun install
$ bun run dev

あとは適宜以下を行なっていきます　（詳細は割愛）

• AWSアカウント作成
• AWS CLI, AWS CDKのインストール
• Open AI　のアカウント作成 & Open AI APIのクレジットチャージ

次回予告

とりあえずローカルで開発する準備ができましたね。
次回はOpen AI APIを叩いて、実際にLLMからの返答をもらう実装を進めようと思います。

それではー。