OpenAIのAPIを使って極限までシンプルなチャットボットを作ってみる

# Streamlitで簡単なチャットアプリを作る方法

こんにちは！　すごろく初めのサイコロを振ってみます。1マスでも進めばいいやと思いつつ、サイコロを振ると平気で６マス進んでしまったのではないかと思うくらい、簡単にアプリが作れます。ただ、コードが簡単なだけであって、それを可能にしてくれているのはライブラリ「Streamlit」です。　この記事では、初心者でも簡単に使えるPythonライブラリ「Streamlit」を使って、シンプルなチャットアプリを作る方法をご紹介します。きわめてシンプルです。見栄えを良くするためにいろいろな工夫ができそうですので、ぜひ試してください。

なお、このコードは
ML_Bear 「生成AIアプリ＆エージェント開発入門」(マイナビ　2024) 
を参考にしつつ、それをさらにシンプルにしています。

---

## Streamlitとは？

[Streamlit](https://streamlit.io/)は、Pythonで簡単にウェブアプリを作成できるライブラリです。

---

## 今回作るアプリ

今回作るのは、**ユーザーの入力に対してAIが応答するチャットアプリ**で、普通のChatGPTと思ってください。以下の特徴があります。

- とにかくシンプルに作った
- Streamlitの`st.chat_input`や`st.chat_message`を活用
- ChatGPTを利用した応答機能

![スクリーンショット 2025-01-04 010241.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3973582/9f49601d-a2cc-8581-b2ec-50f2560cddde.png)


---

## 必要なライブラリ

以下のライブラリを使います。

1. **Streamlit**: アプリのUI作成
2. **LangChain**: ChatGPTとの連携

インストールしていない場合は、以下のコマンドでインストールしてください。

```bash
pip install streamlit langchain_openai
```

LangChainがなくても作れますがシンプルにコードを書くにはこっちのほうがいいなと思いました。LangChainを使わない方法も試しましたが、API経由の返答はいわゆる返答だけでなく、それ以外の情報も含まれており、必要なところだけを抽出するという処理を入れたり（仕組みを理解するには大事だと思いますけど）コードがだらだらする感じです。　

---

## 環境変数の設定（こういうのが初心者にはよくわからなかったりする。レベルアップのためと思って乗り越えましょう！）
OpenAI APIを使用するためには、APIキーを取得し環境変数として設定する必要があります。このキーはOpenAIの公式ページで取得できます。Windowsでの環境変数の設定方法は以下の通りです：

1⃣「スタート」メニューから「環境変数」と検索し、「システム環境変数の編集」を選択します。
2⃣「環境変数」をクリックします。
3⃣「ユーザー環境変数」のセクションで「新規」をクリックします。
4⃣「変数名」にOPENAI_API_KEY、「変数値」にAPIキーを入力します。
5⃣「OK」をクリックして設定を保存します。

環境変数を設定することで、コード内でAPIキーを直接記述する必要がなくなり、セキュリティが向上します。

## コード全体

以下が今回のアプリのコードです。

```python
import streamlit as st
from langchain_openai import ChatOpenAI
from langchain_core.prompts import ChatPromptTemplate
from langchain_core.output_parsers import StrOutputParser

def main():
    if "message_history" not in st.session_state:
        st.session_state.message_history = [
            ("system", "You are helpful assistant.")
        ]

    llm = ChatOpenAI(temperature=0)

    prompt = ChatPromptTemplate.from_messages([
        *st.session_state.message_history,
        ("user", "{user_input}")
    ])

    output_parser = StrOutputParser()

    chain = prompt | llm | output_parser

    if user_input := st.chat_input("質問を書いてください"):
        response = chain.invoke({"user_input": user_input})
        st.session_state.message_history.append(("user", user_input))
        st.session_state.message_history.append(("ai", response))

    for role, message in st.session_state.get("message_history", []):
        st.chat_message(role).markdown(message)

if __name__ == '__main__':
    main()
```

私が一番驚いたのは、チャット形式のインターフェースが、ほぼ

```
 st.chat_message(role).markdown(message)
```
だけで実装されていることです・・・・。

---

## コードの解説

### 1. セッション状態の初期化

以下のコードでセッション状態を初期化しています。これにより、チャット履歴を保持できます。

```python
if "message_history" not in st.session_state:
    st.session_state.message_history = [
        ("system", "You are helpful assistant.")
    ]
```

---

### 2. ChatGPTの初期化とプロンプトの作成

LangChainを使って、ChatGPTを初期化し、プロンプトテンプレートを設定します。

```python
llm = ChatOpenAI(temperature=0)

prompt = ChatPromptTemplate.from_messages([
    *st.session_state.message_history,
    ("user", "{user_input}")
])
```

---

### 3. ユーザー入力と応答処理

Streamlitの`st.chat_input`を使って、ユーザーからの入力を受け取り、それに対するAIの応答を生成します。

```python
if user_input := st.chat_input("質問を入力してください。"):
    response = chain.invoke({"user_input": user_input})
    st.session_state.message_history.append(("user", user_input))
    st.session_state.message_history.append(("ai", response))
```

---

### 4. チャットメッセージの表示

チャット履歴を`st.chat_message`で表示します。

```python
for role, message in st.session_state.get("message_history", []):
    st.chat_message(role).markdown(message)
```

---

## アプリの起動方法

コードを保存したら、以下のコマンドを実行してアプリを起動します。

```bash
streamlit run your_file_name.py
```

ブラウザで表示されるアプリで、質問を入力するとAIが応答してくれます！

---

## まとめ

Streamlitを使うことで、初心者でも簡単にインタラクティブなアプリを作ることができます。LangChainと組み合わせることで、きわめて簡単にAIチャット機能を実現できました。

ぜひ試してみてください！ちょっとちがうよ、とかあればコメントで教えていただけると嬉しいです 😊