Zenn
🦥

【初心者向け】ChatGPTが作ったWebアプリ（StreamlitとGemini APIとSQLite）を１日で爆誕させてみた

に公開
Python
初心者向け
Streamlit
Generative AI
Gemini
tech

「AIチャットボットって面白そうだけど、作るの難しそう…？」

そんなあなたに朗報です！実は、ChatGPTの力を借りれば、初心者でも夢のAIWebアプリが作れるんです！

今回、私はStreamlit、Gemini API、SQLiteを使って、生成AIと対話できるようなAIWebアプリを開発してみました。なんと、プログラムはほぼChatGPT先生が書いてくれたんです！

「え、本当に？」

はい、本当です！この記事では、私がAIWebアプリを作る過程を、初心者向けにわかりやすくご紹介します。

AIWebアプリに興味があるけど、何から始めればいいかわからない…
プログラミング初心者だけど、何か面白いものを作ってみたい！
ChatGPTって、コードも書けるの？
そんな疑問を持つあなたにこそ、ぜひ読んでほしい！この記事を読めば、「自分にもできるかも！」と思えるはず。さあ、AIとの新しい冒険を始めましょう！🚀

ChatGPTでコードを書いてもらう

chatgptに聞いてみました。
[Pythonとデータベースとstreamlitと無料のgemini apiでなんかWebアプリ作りたいんだけど、雛形作って]
すると、こんな感じに回答が返ってきました。

了解にゃん！Streamlitを使って、Pythonとデータベース（SQLite）を組み合わせたWebアプリの雛形を作るかえ？
Gemini APIを活用するなら、例えば「テキスト入力 → Gemini APIで応答生成 → データベースに保存＆表示」みたいなシンプルなアプリが良さそうかえ？

とりあえず、基本構造のコードを準備するにゃん！

import streamlit as st
import sqlite3
import google.generativeai as genai

# 設定（Gemini APIキー）
API_KEY = "your_gemini_api_key_here"
genai.configure(api_key=API_KEY)

# データベースのセットアップ
def init_db():
    conn = sqlite3.connect("chat_history.db")
    c = conn.cursor()
    c.execute("""
        CREATE TABLE IF NOT EXISTS chats (
            id INTEGER PRIMARY KEY AUTOINCREMENT,
            user_input TEXT,
            ai_response TEXT
        )
    """
    )
    conn.commit()
    conn.close()

# Gemini API で応答を生成
def get_gemini_response(prompt):
    try:
        model = genai.GenerativeModel("gemini-pro")
        response = model.generate_content(prompt)
        return response.text if response else "エラーが発生しました"
    except Exception as e:
        return f"APIエラー: {e}"

# データベースへ保存
def save_chat(user_input, ai_response):
    conn = sqlite3.connect("chat_history.db")
    c = conn.cursor()
    c.execute("INSERT INTO chats (user_input, ai_response) VALUES (?, ?)", (user_input, ai_response))
    conn.commit()
    conn.close()

# 過去の会話を取得
def load_chats():
    conn = sqlite3.connect("chat_history.db")
    c = conn.cursor()
    c.execute("SELECT user_input, ai_response FROM chats ORDER BY id DESC")
    data = c.fetchall()
    conn.close()
    return data

# Streamlit UI
st.title("Gemini API Chat App")
st.write("Gemini API を使用した簡単なチャットアプリ")

init_db()

user_input = st.text_input("質問を入力してください")
if st.button("送信"):
    if user_input:
        ai_response = get_gemini_response(user_input)
        save_chat(user_input, ai_response)
        st.write("**AIの応答:**", ai_response)

# チャット履歴の表示
st.subheader("チャット履歴")
for chat in load_chats():
    st.write(f"**あなた:** {chat[0]}")
    st.write(f"**AI:** {chat[1]}")

雛形を作ったにゃん！
これは、Streamlitを使ってGemini APIとSQLiteを組み合わせたチャットアプリのベースかえ？

  • Streamlit → Web UI作成
  • SQLite → チャット履歴を保存
  • Gemini API → AI応答生成

APIキーを設定して、streamlit run ファイル名.py で動かせるにゃん！
カスタマイズしたい部分があれば教えてかえ？

ChatGPTに環境構築方法を教えてもらう

コードはわかったけど、streamlitとかgoogle.generativeaiとかをインストールしないといけないので、どうしたらいいかをChatGPTにきいてみました。
[環境設定方法を教えて]
環境設定の方法を教えるにゃん！この手順で進めるかえ？

1. Python環境を準備する

Pythonがインストールされていない場合は、公式サイトからダウンロード＆インストールするにゃん！
バージョンは Python 3.8以上 を推奨するかえ。

2. 仮想環境を作る（推奨）

プロジェクト用のフォルダを作って、仮想環境を作成＆有効化するにゃん！

mkdir streamlit_gemini_app
cd streamlit_gemini_app
python -m venv venv
  • Windows の場合：
    venv\Scripts\activate
  • Mac/Linux の場合：
    source venv/bin/activate

3. 必要なライブラリをインストール

以下のコマンドでライブラリをインストールするにゃん！

pip install streamlit google-generativeai sqlite3

※ sqlite3 はPythonに標準搭載なので、別途インストール不要かえ。

4. Gemini APIキーを取得

  1. Google AI Studio にアクセス
  2. APIキーを発行（Googleアカウントが必要）
  3. your_gemini_api_key_here を発行したAPIキーに置き換える

環境変数に設定する場合（推奨）
ターミナルで次のコマンドを実行してAPIキーを環境変数に設定するかえ：

  • Windows (PowerShell)
    $env:GEMINI_API_KEY="your_api_key"
  • Mac/Linux
    export GEMINI_API_KEY="your_api_key"

Pythonコード内で使う場合：

import os
API_KEY = os.getenv("GEMINI_API_KEY")

5. アプリを起動

アプリのPythonファイルを作成して、Streamlitを実行するにゃん！

streamlit run ファイル名.py

（例: streamlit run app.py）

6. ブラウザでアクセス

起動後、ブラウザで http://localhost:8501 にアクセスするとアプリが表示されるにゃん！

これで環境設定完了にゃん！
問題があれば教えてかえ？

Python仮想環境作成

Python仮想環境(streamlit-venv)という名前で作成して、ライブラリをインストールしました。
仮想環境の作り方は、過去に紹介しているのでこちらを参照してください。
　ライブラリのインストールは、activateした(streamlit-venv)環境で実行します。
sqlite3はanacondaでもあるので、conda installでいけるけど、streamlitとgoogle.generativeaiはpipでしかインストールできないので、pipでインストールしようとしたら、エラーになりました。

chatgptに聞いてみたら、まずはanaconda環境にpipがインストールされているか確認して、インストールされていなかったらインストールする必要があるといわれたので、pipを確認しました。

(streamlit-venv) C:\Users\xxxxx\xxxxxx>conda list pip
・・・
# Name                    Version                   Build  Channel

上記の通り、インストールされていなかったので、インストールしました。

>conda install pip

GeminiAPI（無料版）を取得

Google AI Studioから、GeminiAPIを取得します。
Googleアカウントにログインした状態で、GoogleAIStudioにアクセスして、左上の「Get API Key」をクリックします。

「キーAPIキーを作成」をクリックして、APIキーを作成します。

　APIキーが作成されます。このAPIキーはあとで使います。

pyファイル作成

一番最初にChatGPTが書いてくれたコードを[Streamlit-python.py]というファイル名で保存しました。以下の内容だけ修正しました。
[API_KEY=]に、先ほど取得したAPIキーを設定
[genai.GenerativeModel]を("gemini-2.0-flash")に変更

実行してみる

anaconda promptで、仮想環境(streamlit-venv)をactivateした状態で、以下のコマンドを実行してStreamlitを実行しました。

>streamlit run Streamlit-python.py

そうすると、emailとかでてきたので、またChatGPTに聞きました。

そのままEnterを押したらブラウザが起動して、Streamlitの画面が表示されました。

生成AIが質問の答えを返してくれて、その履歴をデータベースに保存して表示してくれるアプリが作成できました。

最後に（注意事項等）

Streamlitを終了するには、ブラウザを閉じるのではなく、AnacondaPromptでCtrl＋Cで終了してから、ブラウザを閉じないと、プロセスが残って固まってしまうので気を付けて！

GeminiAPIキーが他の人に公開されると、勝手に利用されてしまうかもしれないので、APIキーは公開しないように気を付けて！（特にGitなどでコードを管理する場合にはソースに埋め込まないで。環境変数とか公開環境の秘密の場所に格納するようにしてね！）

Streamlitを呼び出すプログラムはJupyterNotebookで実行できないから気を付けて！

（次は、vsCodeかcursorを入れて開発してみようかな・・・）

１か月くらいかけてじっくり勉強しようと思ってたら、１日でうごくものが作成できたのでびっくりでした！

Discussion