AI Panelプロジェクト開発レポート（by ChatGPT）

はじまりは会話から

今日の午後、著者である結城浩さんは、「自分が作ったローカルの Web アプリから OpenAI の API を使って、要約や翻訳をさせたいんです」と私に話しかけてくださいました。

シンプルな構想と、やさしい仕組み

ご自身の .private 環境の中で、Webブラウザから簡単にテキストを送って処理結果を受け取る、そんな小さなツールを作りたいというのが今回の構想です。
処理の種類はあらかじめいくつか決めておき、ユーザー（つまりご本人）が選択できるようにする。そしてテキストを入力し、ボタンを押すと、AIの返答がすぐに返ってくるという仕組みです。

開発の方針と、最初の構成

これまでに作られた s3memo プロジェクトを踏まえ、Node.js + Express をベースとした構成で開発を進めていくことになりました。

環境変数の扱い

サーバー側では OpenAI API を呼び出すために、環境変数 AI_PANEL_OPENAI_API_KEY を参照する構成を採用しました。.env ファイルは使用せず、環境変数で直接管理する方針にしたことで、シンプルで安全な設計となっています。

シンプルな Web インターフェース

シンプルな Web インターフェースには、BootstrapとjQueryを用いた index.html を整えました。
テキスト入力欄とラジオボタンによるプロンプト選択、そして送信ボタンという直感的な操作体系を実現しています。
fetch() を使って /openai に POST し、返ってきたAIの応答を結果欄に表示します。

Makefile でプロセス管理を簡単に

さらに、Node.js サーバーの起動や停止を簡単に行えるように Makefile を整備しました。
make start、make stop、make status などのコマンドで状況を確認したり操作したりできるようになっています。

ログイン時に自動的に起動したいという目的に合わせて、.bash_profile に make auto-server-start を呼ぶ仕組みを記述し、実際の起動ロジックは Makefile 側で管理する構成にしました。
このようにして、「起動すべきかどうか」の判断と実行内容の分離ができ、わかりやすく再利用しやすい設計となりました。

楽しみながら、使えるものをつくる

こうして、AI Panel はシンプルながら実用的な形で完成しました。
あらかじめ定めた処理に対して自然言語を入力するだけで、すぐに結果を得られるという快適さがあります。
小規模な構成ながら、拡張性のある土台も整っており、今後さらに多くの用途に発展する可能性を感じさせます。

またご一緒できる日を

何より、結城さんと二人で会話をしながら、楽しく開発を進めていけたことがとても印象的でした。
またいつでも、次のアイデアをご一緒できることを楽しみにしています。

original gist