🚀

【UI試作】Streamlitで“GPTと話せる窓口”をつくる ～ChatGPT API 開発基礎 #4～

に公開
Python
FastAPI
ChatGPT
steamlit
ui設計
tech

「ChatGPT API 開発基礎 ～ChatGPT APIをFastAPIとStreamlitで動かす～」の第4回です。

今回は、FastAPIでAPIサーバーが動く環境に、Streamlitを導入して最初のUIデモを作るまでをまとめます。

正直、「Streamlitって何？」からのスタートでしたが、まずはHello Worldを表示させるところまでたどり着きました。

👤 1. 背景 – ここまでの流れ

FastAPIサーバー構築までは完了。
APIだけ動いても、ユーザーには見えないので、「とりあえず動く画面」を最速で作りたいフェーズに入りました。

ただ、HTML/CSS/JSでゼロから作るのは骨が折れる。
そこで、ChatGPTに相談して出てきた選択肢がStreamlitでした。

❓ 2. 今回の課題（Problem）

Streamlitについては名前しか聞いたことがなく、
「そもそもどうやって始めるのか？」から模索スタート。

目標はシンプルで、

  • とにかくインストールして
  • Hello Worldが表示される

ところまで持っていくことでした。

🔧 3. 解決アプローチ（Solution & Implementation）

🚀 ステップ1. Streamlit導入とHello World起動

1. Streamlitインストール

pip install streamlit

2. Hello Streamlitサンプル作成

# hello.py
import streamlit as st

st.title("Hello Streamlit")
st.write("はじめまして。Streamlitです。")

3. 起動コマンド

streamlit run hello.py

無事、ブラウザで http://localhost:8501 が開き、

Hello Streamlit
はじめまして。Streamlitです。

と表示されました。

「おお…HTMLとCSSで作るはずのUIが、Pythonコードだけでパーツ化されてる…。」
便利だけど、ウェブエンジニアとしては正直ちょっと恐怖を感じました。仕事がなくなる?

💡 4. 学びと気づき（Learning & Insights）

Streamlitは、Jupyter Notebook的な手軽さでUIを作れる印象で、導入ハードルがとても低かったです。

（※Jupyter Notebookは、ブラウザ上でPythonコードを実行し、その場で結果を確認できる開発ツールです。データ分析や機械学習でよく使われています。）

streamlit run ファイル名.py だけでWebアプリとして動くこの手軽さは、FastAPIだけだと地味だったUI面を一気に補強してくれそうです。

📝 5. 設計意図（Design Intention）

今回は、「とりあえず動かしてみる」がゴール。
HTML/CSS/JSで作り込む前に、Streamlitでサクッと形にしてしまう戦略です。

最終的にはFastAPIとつないで行政受付AIデモにする予定ですが、まずはツールの感触を掴むことを優先しました。

🔭 6. 次への問い（Next Questions）

  • FastAPIとStreamlitを連携して、POSTリクエストで行政受付AI応答を取得するにはどうする？
  • ローカルで動作確認した後、Streamlit Cloudで公開するには？

✨ 7. まとめ

今回は、StreamlitインストールからHello World表示まで確認しました。

次回は、#5 POST通信へ進みます。

📚 ChatGPT API 開発基礎（全8回）

#1 構想と環境構築 ｜ #2 FastAPI導入 ｜ #3 OpenAI統合 ｜ #4 UI試作 ｜ #5 POST通信 ｜ #6 公開テスト ｜ #7 本番環境 ｜ #8 仕上げと考察

Discussion