AIアプリ開発入門 その１ — LangChain & Streamlitで作るAIチャットアプリ

この記事の内容

• PythonとLangChain、StreamlitでChatGPTクローンを構築する手順を解説します
• OpenAI APIキーの設定方法（Windows環境）を紹介します
• Streamlitの基本的なウィジェットとセッション状態管理の仕組みを学びます
• LangChainを通じたChatGPT APIの呼び出し方と、Temperatureパラメーターの意味を理解します
• サイドバーやコスト表示など、チャットアプリの作り込み方法も紹介します

概要：今回学ぶ教材について

今回は「作りながら学ぶAIアプリ開発入門 — LangChain & Streamlit（Streamlit）によるChatGPT API徹底活用」という教材をベースに、実際に手を動かしながらAIアプリ開発を学んでいきます。この教材はWeb上で無料公開されており、本文はすべて読むことができます。

教材の構成は以下のようになっています。

1. 環境準備
2. 最初のチャットアプリを作成
3. アプリの作り込み
4. Streamlit Cloudへのデプロイ
5. YouTube動画の要約
6. PDFへの質問応答

使用する技術スタックは以下のとおりです。

• 言語：Python
• フレームワーク：Streamlit（フロントエンド）
• AIライブラリ：LangChain
• API：OpenAI ChatGPT API
• データストア：ベクターデータベース

前提知識として、Pythonの基礎とGitHubリポジトリの基本的な操作が必要です。

環境準備：OpenAI APIキーの設定

APIキーの取得

まずOpenAIのサイトにアクセスし、新しいシークレットキーを作成します。キー名は用途がわかるようにkey_for_studyのような名前をつけておくとよいでしょう。

Windows環境での環境変数設定（PowerShell）

PowerShellで一時的に環境変数を設定するには以下のコマンドを使います。

$env:OPENAI_API_KEY = "ここにAPIキーを入力"

設定を確認するには次のコマンドを実行します。

$env:OPENAI_API_KEY

ただし、この方法はそのターミナルセッションにのみ有効な一時的な設定です。すべてのプロセスで使えるように永続化したい場合は、Windowsのシステム環境変数に登録します。

Windowsシステム環境変数への登録手順：

1. 「環境変数」で検索し、「システム環境変数の編集」を開く
2. 「環境変数」ボタンをクリック
3. ユーザー環境変数に「新規」でOPENAI_API_KEYを追加し、値にAPIキーを入力する
4. PCを再起動する

Streamlitのインストールと起動確認

Streamlitはインストールが非常に簡単です。

pip install streamlit

インストール後、以下のコマンドで動作確認できます。

streamlit run <ファイル名>.py

StreamlitはWebアプリを作るためのPythonフレームワークです。データの可視化やインタラクティブなUIを非常に少ないコードで作成できるため、AIアプリのフロントエンドとして広く使われています。

LangChainのインストール

LangChainは以下のコマンドでインストールします。

pip install langchain

LangChainが提供する主な機能は次のとおりです。

• ChatGPT APIの簡単な呼び出し
• YouTube、Webサイト、PDFなどのコンテンツ取得
• 取得したコンテンツのベクターストアへの格納
• コンテンツの要約処理

最初のAIチャットアプリを作る

アプリの全体構成

チャットアプリは以下のようなデータフローで動作します。

チャットアプリの基本コード

50行未満のコードでチャットアプリが動作します。

from langchain.chat_models import ChatOpenAI
from langchain.schema import SystemMessage, HumanMessage, AIMessage
import streamlit as st

st.set_page_config(page_title="ChatGPT Clone", page_icon="🤖")
st.header("ChatGPT Clone")

llm = ChatOpenAI(temperature=0)

if "messages" not in st.session_state:
    st.session_state.messages = [
        SystemMessage(content="You are a helpful assistant.")
    ]

if user_input := st.chat_input("聞きたいことを入力してね"):
    st.session_state.messages.append(HumanMessage(content=user_input))
    response = llm(st.session_state.messages)
    st.session_state.messages.append(AIMessage(content=response.content))

for message in st.session_state.messages:
    if isinstance(message, AIMessage):
        with st.chat_message("assistant"):
            st.markdown(message.content)
    elif isinstance(message, HumanMessage):
        with st.chat_message("user"):
            st.markdown(message.content)

Streamlitの主要ウィジェット

Streamlitには豊富なウィジェットが用意されており、1行のコードで様々なUI要素を追加できます。

Streamlitは通常のスクリプトのように上から下へ実行されるのではなく、ユーザーの操作に反応して動的に再実行されるという特徴があります。

LangChainによるChatGPT API呼び出しの仕組み

メッセージの種類

LangChainでChatGPT APIを呼び出す際は、3種類のメッセージを使い分けます。

• SystemMessage：ChatGPTへの設定・指示（例：「必ず関西弁で返答してください」）
• HumanMessage：ユーザーからの入力
• AIMessage：ChatGPTからの返答

from langchain.schema import SystemMessage, HumanMessage, AIMessage

messages = [
    SystemMessage(content="絶対に関西弁で返答してください"),
    HumanMessage(content="おはようございます")
]
response = llm(messages)

この例では「おはようございます、ぼちぼちやで」のように関西弁で返答が返ってきます。

Temperatureパラメーターとは

Temperatureは生成テキストのランダム性・多様性を制御するパラメーターです。

同じ質問をしてもTemperature 0では毎回同じ答えが返ってきますが、Temperature 1では毎回異なる答えが返ってきます。

セッションステートによる会話履歴の管理

ChatGPT APIはステートレスなAPIのため、会話の履歴は毎回すべて送信する必要があります。

Streamlitのst.session_stateを使うと、ユーザーごとの状態を管理できます。

# セッションステートの初期化
if "messages" not in st.session_state:
    st.session_state.messages = []

# ユーザーの入力を追加
st.session_state.messages.append(HumanMessage(content=user_input))

# APIレスポンスを追加
response = llm(st.session_state.messages)
st.session_state.messages.append(AIMessage(content=response.content))

Webにデプロイした場合、各ユーザーは独自のセッションステートを持つため、ユーザー間で会話が混ざることはありません。

チャットアプリの作り込み：サイドバーの追加

より実用的なアプリにするため、サイドバーにモデル選択やTemperature調整のUIを追加します。

# サイドバーの設定
with st.sidebar:
    st.title("設定")
    
    # モデル選択（ラジオボタン）
    model = st.radio("モデルを選択", ["gpt-3.5-turbo", "gpt-4"])
    
    # Temperatureスライダー
    temperature = st.slider("Temperature", 0.0, 1.0, 0.0, step=0.1)
    
    # 会話クリアボタン
    if st.button("会話を消去"):
        st.session_state.messages = []

LangChainのコールバック機能：コスト表示とストリーミング

APIコストの取得

LangChainのget_openai_callbackコンテキストマネージャーを使うと、APIの利用コストを取得できます。

from langchain.callbacks import get_openai_callback

with get_openai_callback() as cb:
    response = llm(st.session_state.messages)
    st.sidebar.metric("累計コスト", f"${cb.total_cost:.5f}")

ストリーミング表示

StreamlitCallbackHandlerを使うと、ChatGPTの返答をリアルタイムでストリーミング表示できます。

from langchain.callbacks import StreamlitCallbackHandler

callback = StreamlitCallbackHandler(st.container())
response = llm(st.session_state.messages, callbacks=[callback])

まとめ

この記事では、LangChainとStreamlitを使ったAIチャットアプリの基本的な構築方法を紹介しました。

特に印象的だったのはStreamlitの高い生産性です。チャット入力欄・会話履歴の表示・サイドバーなど、通常なら大量のコードが必要なUI部分を、わずか数行で実装できます。LangChainと組み合わせることで、50行未満のコードでChatGPTクローンが動作する状態になります。

今回学んだポイントは以下のとおりです。

• StreamlitはWebアプリのUIを非常に少ないコードで構築できるPythonフレームワーク
• LangChainはChatGPT APIの呼び出しや各種データソースへのアクセスを簡単にするライブラリ
• Temperatureパラメーターは0に近いほど一貫性が高く、1に近いほどランダム性が高い
• セッションステートでユーザーごとの会話履歴を管理し、ステートレスなAPIと組み合わせる
• コールバック機能でコスト表示やストリーミング表示を実現できる

次回はStreamlit Cloudへのデプロイや、YouTube動画の要約・PDF質問応答といった応用機能に取り組んでいきます。