【Python】VSCode × StreamlitでAzure OpenAIチャットアプリを構築する方法

Posted at 2025-04-16

user:

初学者向けにVSCodeを使ってAzureOpenAIとチャットできるStreamlitアプリを作るガイドを書いてください。

assistant:

もちろん、初学者向けに VSCode を使って Azure OpenAI とチャットできる Streamlit アプリ を作るための、丁寧なステップバイステップガイドを書きます！

🌟 初心者向けガイド：VSCode + Streamlit + Azure OpenAI でチャットアプリを作ろう！

このガイドでは、プログラミング初心者でも理解できるように、VSCode を使って Azure OpenAI のチャット機能を活用する Web アプリを Streamlit で作る方法を解説します。

🔧 前提条件

1. アカウント

Microsoft アカウント
Azure アカウント
Azure OpenAI サブスクリプション（GPT-4やGPT-3.5を使うため）

2. ソフトウェア

Python（公式サイト）（バージョン3.8以上）
Visual Studio Code（VSCode）
コマンドライン（ターミナルや PowerShell など）

🧱 ステップ 1：Python環境を準備しよう

① Pythonのインストール

python.org から最新版をダウンロードしてインストール。
インストール時に「Add Python to PATH」にチェックを入れるのを忘れずに！

② VSCodeのインストール

VSCode公式サイトからインストール。
初回起動後、「Python」拡張機能をインストールしておこう。

🗂 ステップ 2：作業フォルダと仮想環境を作成

# 任意の場所でプロジェクト用フォルダを作成
mkdir azure-chat-app
cd azure-chat-app

# 仮想環境を作成
python -m venv venv

# 仮想環境を有効化（Windows）
venv\Scripts\activate

# Mac/Linux の場合
source venv/bin/activate

📦 ステップ 3：必要なライブラリをインストール

pip install streamlit openai python-dotenv

streamlit: Webアプリを作るライブラリ
openai: Azure OpenAI にアクセスするライブラリ
python-dotenv: .envファイルでAPIキーなどを安全に管理するため

🔑 ステップ 4：Azure OpenAIのAPIキーを取得

Azureポータルから次の情報を確認します：

リソース名（例：my-openai-resource）
デプロイ名（例：gpt-35-turbo）
エンドポイント URL（例：https://xxx.openai.azure.com/）
APIキー（Keys and Endpoint で確認可能）

これらを .env ファイルに保存：

OPENAI_API_KEY=ここにAPIキー
OPENAI_API_BASE=https://xxx.openai.azure.com/
OPENAI_API_VERSION=2023-05-15
OPENAI_DEPLOYMENT_NAME=gpt-35-turbo

💻 ステップ 5：チャットアプリのコードを書く

ファイル構成

azure-chat-app/
│
├── .env
├── app.py
└── venv/

`app.py`

import streamlit as st
import openai
import os
from dotenv import load_dotenv

# .envから環境変数を読み込む
load_dotenv()

openai.api_key = os.getenv("OPENAI_API_KEY")
openai.api_base = os.getenv("OPENAI_API_BASE")
openai.api_type = "azure"
openai.api_version = os.getenv("OPENAI_API_VERSION")
deployment_name = os.getenv("OPENAI_DEPLOYMENT_NAME")

st.title("💬 Azure OpenAI チャットアプリ")

# ユーザーの入力
user_input = st.text_input("あなたのメッセージを入力してください：")

# チャット履歴を保存
if "messages" not in st.session_state:
    st.session_state.messages = [
        {"role": "system", "content": "あなたは親切なAIアシスタントです。"}
    ]

# メッセージが入力されたら送信
if user_input:
    st.session_state.messages.append({"role": "user", "content": user_input})

    with st.spinner("考え中..."):
        response = openai.ChatCompletion.create(
            engine=deployment_name,
            messages=st.session_state.messages,
        )
        reply = response["choices"][0]["message"]["content"]
        st.session_state.messages.append({"role": "assistant", "content": reply})
        st.success("AIの返答：" + reply)

▶️ ステップ 6：Streamlitアプリを起動！

streamlit run app.py

ブラウザが開いて、チャット画面が表示されます！

🎁 オプション：UIを少しカスタマイズ

st.chat_message() を使えば、チャットUIがさらにリアルに！
背景色やフォントサイズも調整可能

✅ トラブルシューティング

openai.error.AuthenticationError: APIキーが間違っている可能性があります。
.envが読み込まれない：ファイル名が間違っていないか確認。
streamlit: command not found：仮想環境が有効になっているか確認。

📚 次にやること

チャット履歴の保存
複数人用のチャット対応
画像生成や音声対応などのマルチモーダル機能追加（DALL·E, TTS）

必要なら、このガイドをPDF化することもできますし、演習付きの教材にもできます。どうします？

user:

ありがとうございます。アプリは立ち上がりましたが、「こんにちは」と入力すると次のエラーが出ました。

openai.lib._old_api.APIRemovedInV1: You tried to access openai.ChatCompletion, but this is no longer supported in openai>=1.0.0 - see the README at https://github.com/openai/openai-python for the API. You can run `openai migrate` to automatically upgrade your codebase to use the 1.0.0 interface. Alternatively, you can pin your installation to the old version, e.g. `pip install openai==0.28` A detailed migration guide is available here: https://github.com/openai/openai-python/discussions/742
Traceback:
File "/Users/ikemen/azure-chat-app/venv/lib/python3.10/site-packages/streamlit/runtime/scriptrunner/exec_code.py", line 121, in exec_func_with_error_handling
    result = func()
File "/Users/ikemen/azure-chat-app/venv/lib/python3.10/site-packages/streamlit/runtime/scriptrunner/script_runner.py", line 640, in code_to_exec
    exec(code, module.__dict__)
File "/Users/ikemen/azure-chat-app/app.py", line 31, in <module>
    response = openai.ChatCompletion.create(
File "/Users/ikemen/azure-chat-app/venv/lib/python3.10/site-packages/openai/lib/_old_api.py", line 39, in __call__
    raise APIRemovedInV1(symbol=self._symbol)

assistant:

ありがとうございます！エラー内容から察するに、openai ライブラリの バージョンが 1.0.0 以降になっていて、以前のコード（openai.ChatCompletion.create）が 非推奨かつ削除されたために起きている問題です。

✅ 解決方法：どちらかを選べます

✅ 方法1：最新の openai ライブラリ用にコードを書き換える（おすすめ）

OpenAI ライブラリ v1.0.0以降では、APIの使い方が変更されています。

以下のようにコードを修正してください。

🔧 `app.py` 修正版（新API対応）

import streamlit as st
import os
from openai import AzureOpenAI
from dotenv import load_dotenv

# .envの読み込み
load_dotenv()

# AzureOpenAIクライアントの初期化
client = AzureOpenAI(
    api_key=os.getenv("OPENAI_API_KEY"),
    api_version=os.getenv("OPENAI_API_VERSION"),
    azure_endpoint=os.getenv("OPENAI_API_BASE"),
)

deployment_name = os.getenv("OPENAI_DEPLOYMENT_NAME")

st.title("💬 Azure OpenAI チャットアプリ")

user_input = st.text_input("あなたのメッセージを入力してください：")

if "messages" not in st.session_state:
    st.session_state.messages = [
        {"role": "system", "content": "あなたは親切なAIアシスタントです。"}
    ]

if user_input:
    st.session_state.messages.append({"role": "user", "content": user_input})

    with st.spinner("考え中..."):
        response = client.chat.completions.create(
            model=deployment_name,
            messages=st.session_state.messages,
        )
        reply = response.choices[0].message.content
        st.session_state.messages.append({"role": "assistant", "content": reply})
        st.success("AIの返答：" + reply)

✅ 方法2：古いバージョンの openai をインストールする

pip uninstall openai
pip install openai==0.28

ただし、将来的にサポートされないため、基本は方法1をおすすめします。

🔍 バージョン確認方法

pip show openai

🔁 補足：Streamlit 再起動

コードを変更したら、再度アプリを起動しましょう：

streamlit run app.py

これで問題は解決するはずです！他にも不明な点があれば何でも聞いてくださいね。

user:

解決しました。ありがとうございます。では、上記コードをベースに「チャット履歴の保存」ができるようにして、会話のキャッチボールができるようにしてください。

assistant:

よかったです！🎉
では次のステップとして、「チャット履歴の保存」と「会話のキャッチボール（継続的なやり取り）」ができるように改良しましょう。

✅ 改良ポイント

会話履歴を st.session_state.messages に保存（すでにOK！）
過去の会話を表示する（UI上で表示されるようにする）
入力と返答を画面に表示する（キャッチボール）
（オプション）リセットボタンでチャット履歴をクリアできるようにする

💡 改良版コード（`app.py`）

import streamlit as st
import os
from openai import AzureOpenAI
from dotenv import load_dotenv

# .envの読み込み
load_dotenv()

# AzureOpenAIクライアントの初期化
client = AzureOpenAI(
    api_key=os.getenv("OPENAI_API_KEY"),
    api_version=os.getenv("OPENAI_API_VERSION"),
    azure_endpoint=os.getenv("OPENAI_API_BASE"),
)

deployment_name = os.getenv("OPENAI_DEPLOYMENT_NAME")

st.set_page_config(page_title="Azure Chat", page_icon="💬")
st.title("💬 Azure OpenAI チャットアプリ")

# チャット履歴を保存（セッションごと）
if "messages" not in st.session_state:
    st.session_state.messages = [
        {"role": "system", "content": "あなたは親切なAIアシスタントです。"}
    ]

# チャット履歴の表示
for msg in st.session_state.messages:
    if msg["role"] != "system":  # システムメッセージは表示しない
        with st.chat_message(msg["role"]):
            st.markdown(msg["content"])

# 入力欄
user_input = st.chat_input("あなたのメッセージを入力してください")

if user_input:
    # ユーザーの発言を記録 & 表示
    st.session_state.messages.append({"role": "user", "content": user_input})
    with st.chat_message("user"):
        st.markdown(user_input)

    # Azure OpenAI への問い合わせ
    with st.chat_message("assistant"):
        with st.spinner("考え中..."):
            response = client.chat.completions.create(
                model=deployment_name,
                messages=st.session_state.messages,
            )
            reply = response.choices[0].message.content
            st.markdown(reply)

    # AIの返答を記録
    st.session_state.messages.append({"role": "assistant", "content": reply})

# チャット履歴をクリアするボタン（オプション）
if st.button("🔄 チャット履歴をリセット"):
    st.session_state.messages = [
        {"role": "system", "content": "あなたは親切なAIアシスタントです。"}
    ]
    st.experimental_rerun()

✅ 改良内容まとめ

機能	説明
💬 会話の表示	`st.chat_message()`で人間とAIの発言を吹き出し風に表示
💾 履歴の保存	`st.session_state.messages` でやり取りを保持
🔁 履歴のリセット	「チャット履歴をリセット」ボタンで初期化可能

これで、会話のキャッチボールができる本格的なチャットアプリになりました！

必要であれば、次のような追加機能も組み込めますよ：

Markdown・絵文字・コードブロック対応
チャットログをファイルに保存（例：CSV, JSON）
名前をつけたユーザー切り替え
音声入力や読み上げ機能

やってみたいものがあれば、どんどん教えてください😊

user:

ありがとうございます。チャットアプリができました。今のコードをベースに、チャットログをファイルに保存（例：CSV, JSON）する機能を追加してください。

assistant:

素晴らしいですね！🎉
では、**今のチャットアプリに「チャットログを CSV または JSON ファイルに保存する機能」**を追加しましょう。

✅ 機能概要

チャット終了後、ユーザーがボタンを押すことで
✅ CSV形式または
✅ JSON形式で
チャット履歴をダウンロードできるようにします。

📦 追加ライブラリ（必要なし）

標準ライブラリの csv と json を使うので、追加インストールは不要です。

🧩 追加されたコードの主な場所

st.download_button でダウンロードリンクを作成
session_state.messages から "system" ロールを除外して書き出し

✅ 最終版：`app.py`

import streamlit as st
import os
import json
import csv
import io
from openai import AzureOpenAI
from dotenv import load_dotenv

# .envの読み込み
load_dotenv()

# AzureOpenAIクライアントの初期化
client = AzureOpenAI(
    api_key=os.getenv("OPENAI_API_KEY"),
    api_version=os.getenv("OPENAI_API_VERSION"),
    azure_endpoint=os.getenv("OPENAI_API_BASE"),
)

deployment_name = os.getenv("OPENAI_DEPLOYMENT_NAME")

st.set_page_config(page_title="Azure Chat", page_icon="💬")
st.title("💬 Azure OpenAI チャットアプリ")

# チャット履歴の初期化
if "messages" not in st.session_state:
    st.session_state.messages = [
        {"role": "system", "content": "あなたは親切なAIアシスタントです。"}
    ]

# チャット履歴の表示
for msg in st.session_state.messages:
    if msg["role"] != "system":
        with st.chat_message(msg["role"]):
            st.markdown(msg["content"])

# 入力欄
user_input = st.chat_input("あなたのメッセージを入力してください")

if user_input:
    st.session_state.messages.append({"role": "user", "content": user_input})
    with st.chat_message("user"):
        st.markdown(user_input)

    with st.chat_message("assistant"):
        with st.spinner("考え中..."):
            response = client.chat.completions.create(
                model=deployment_name,
                messages=st.session_state.messages,
            )
            reply = response.choices[0].message.content
            st.markdown(reply)

    st.session_state.messages.append({"role": "assistant", "content": reply})

# 🔁 チャット履歴のリセット
if st.button("🔄 チャット履歴をリセット"):
    st.session_state.messages = [
        {"role": "system", "content": "あなたは親切なAIアシスタントです。"}
    ]
    st.experimental_rerun()

# 💾 チャット履歴の保存（JSON形式）
def save_chat_as_json():
    # "system" メッセージを除外
    messages_to_save = [m for m in st.session_state.messages if m["role"] != "system"]
    return json.dumps(messages_to_save, ensure_ascii=False, indent=2)

st.download_button(
    label="💾 JSONで保存",
    data=save_chat_as_json(),
    file_name="chat_log.json",
    mime="application/json",
)

# 💾 チャット履歴の保存（CSV形式）
def save_chat_as_csv():
    messages_to_save = [m for m in st.session_state.messages if m["role"] != "system"]
    output = io.StringIO()
    writer = csv.DictWriter(output, fieldnames=["role", "content"])
    writer.writeheader()
    writer.writerows(messages_to_save)
    return output.getvalue()

st.download_button(
    label="💾 CSVで保存",
    data=save_chat_as_csv(),
    file_name="chat_log.csv",
    mime="text/csv",
)

✅ 保存される内容の例

JSONファイル：

[
  {
    "role": "user",
    "content": "こんにちは"
  },
  {
    "role": "assistant",
    "content": "こんにちは！どうされましたか？"
  }
]

CSVファイル：

role,content
user,こんにちは
assistant,こんにちは！どうされましたか？

✨ 応用アイデア（必要に応じて）

自動でファイルに保存（日時付きファイル名で）
ユーザー名やセッションIDを含める
チャット履歴の読み込み・再開機能

何か他にやってみたいことがあれば、どんどんカスタマイズできますよ！
PDF出力・チャット検索・テーマ変更なども可能です 😊

user:

ありがとうございます。チャットアプリができました。今のコードをベースに、チャットログをマークダウン形式ファイルに保存する機能を追加してください。

assistant:

素晴らしい進捗ですね！✨
では今度は、チャットログを Markdown（.md）形式で保存できるように機能を追加します。

✅ 目的

チャット履歴を Markdown 形式で整形し、
**User:** や **Assistant:** のように強調表示する形で保存
st.download_button() で .md ファイルをダウンロード

📄 Markdown ファイルの形式（例）

**User:** こんにちは  
**Assistant:** こんにちは！どうされましたか？

**User:** 今日の天気は？  
**Assistant:** 天気は晴れです☀️

✅ 追加コード：Markdown保存機能

🔧 既存の `app.py` に以下の関数とボタンを追加してください：

# 💾 チャット履歴の保存（Markdown形式）
def save_chat_as_markdown():
    messages_to_save = [m for m in st.session_state.messages if m["role"] != "system"]
    lines = []
    for m in messages_to_save:
        role_label = "**User:**" if m["role"] == "user" else "**Assistant:**"
        content = m["content"].replace("\n", "  \n")  # Markdown改行
        lines.append(f"{role_label} {content}")
    return "\n\n".join(lines)

st.download_button(
    label="📝 Markdownで保存",
    data=save_chat_as_markdown(),
    file_name="chat_log.md",
    mime="text/markdown",
)

✅ フル機能のまとめ（CSV / JSON / Markdown）

これで以下の保存形式に対応したチャットアプリになります：

保存形式	拡張子	ボタンラベル
JSON	`.json`	💾 JSONで保存
CSV	`.csv`	💾 CSVで保存
Markdown	`.md`	📝 Markdownで保存

💡 補足：Markdown はメモやブログ執筆にも便利

スマートに記録を残したいときや、Notion・Obsidianに貼る用としても最適です
コードブロックや見出し付き保存も可能です（ご希望があれば追加可能）

必要であれば、保存ファイルに「日時」や「タイトル」をつけることもできますよ！
他にも改良したい点があれば、お気軽にどうぞ 😊

user:

いいですね、保存ファイル名に何年何月何日何時何分何秒の情報を含めるようにしてください。

assistant:

了解です！📂
それでは、保存するファイル名に「年月日時分秒」のタイムスタンプを付けて、一意のファイル名になるようにしましょう。

✅ ファイル名にタイムスタンプを付ける方法

Python の datetime モジュールを使って、次のような形式でファイル名を生成します：

chat_log_2025-04-16_14-23-45.md

🔧 変更点まとめ

from datetime import datetime を追加
datetime.now().strftime("%Y-%m-%d_%H-%M-%S") で現在時刻を取得
各ファイルの file_name= に適用

✅ 修正後コードの追加部分

from datetime import datetime  # ← これを先頭で追加！

# 現在の日時を取得してファイル名に使う
timestamp = datetime.now().strftime("%Y-%m-%d_%H-%M-%S")

# 💾 JSON保存ボタン
st.download_button(
    label="💾 JSONで保存",
    data=save_chat_as_json(),
    file_name=f"chat_log_{timestamp}.json",
    mime="application/json",
)

# 💾 CSV保存ボタン
st.download_button(
    label="💾 CSVで保存",
    data=save_chat_as_csv(),
    file_name=f"chat_log_{timestamp}.csv",
    mime="text/csv",
)

# 📝 Markdown保存ボタン
st.download_button(
    label="📝 Markdownで保存",
    data=save_chat_as_markdown(),
    file_name=f"chat_log_{timestamp}.md",
    mime="text/markdown",
)

🧪 出力されるファイル例（2025年4月16日 14時23分45秒）

chat_log_2025-04-16_14-23-45.json
chat_log_2025-04-16_14-23-45.csv
chat_log_2025-04-16_14-23-45.md

これでログが時系列で整理しやすくなりますね！📚
他にも日付を日本語表記にしたり、フォルダを分けたりもできますので、必要に応じてアレンジ可能です！何かやりたいことがあればぜひ 😊

user:

ありがとうございます。最終的に app.py はどうなるか、全コードを書いてください。

assistant:

こちらが、チャット履歴を CSV / JSON / Markdown 形式で日時付きファイル名で保存できる機能を備えた最終版 app.py 全コードです ✅

✅ 最終版 `app.py`

import streamlit as st
import os
import json
import csv
import io
from datetime import datetime
from openai import AzureOpenAI
from dotenv import load_dotenv

# .env の読み込み
load_dotenv()

# Azure OpenAI クライアントの初期化
client = AzureOpenAI(
    api_key=os.getenv("OPENAI_API_KEY"),
    api_version=os.getenv("OPENAI_API_VERSION"),
    azure_endpoint=os.getenv("OPENAI_API_BASE"),
)

deployment_name = os.getenv("OPENAI_DEPLOYMENT_NAME")

st.set_page_config(page_title="Azure Chat", page_icon="💬")
st.title("💬 Azure OpenAI チャットアプリ")

# チャット履歴の初期化
if "messages" not in st.session_state:
    st.session_state.messages = [
        {"role": "system", "content": "あなたは親切なAIアシスタントです。"}
    ]

# チャット履歴の表示
for msg in st.session_state.messages:
    if msg["role"] != "system":
        with st.chat_message(msg["role"]):
            st.markdown(msg["content"])

# 入力欄
user_input = st.chat_input("あなたのメッセージを入力してください")

if user_input:
    # ユーザー入力を保存・表示
    st.session_state.messages.append({"role": "user", "content": user_input})
    with st.chat_message("user"):
        st.markdown(user_input)

    # OpenAI への問い合わせ
    with st.chat_message("assistant"):
        with st.spinner("考え中..."):
            response = client.chat.completions.create(
                model=deployment_name,
                messages=st.session_state.messages,
            )
            reply = response.choices[0].message.content
            st.markdown(reply)

    # アシスタントの返答を保存
    st.session_state.messages.append({"role": "assistant", "content": reply})

# 🔁 チャット履歴のリセットボタン
if st.button("🔄 チャット履歴をリセット"):
    st.session_state.messages = [
        {"role": "system", "content": "あなたは親切なAIアシスタントです。"}
    ]
    st.experimental_rerun()

# ✅ チャット履歴の保存機能
messages_to_save = [m for m in st.session_state.messages if m["role"] != "system"]
timestamp = datetime.now().strftime("%Y-%m-%d_%H-%M-%S")

# JSON形式で保存
def save_chat_as_json():
    return json.dumps(messages_to_save, ensure_ascii=False, indent=2)

st.download_button(
    label="💾 JSONで保存",
    data=save_chat_as_json(),
    file_name=f"chat_log_{timestamp}.json",
    mime="application/json",
)

# CSV形式で保存
def save_chat_as_csv():
    output = io.StringIO()
    writer = csv.DictWriter(output, fieldnames=["role", "content"])
    writer.writeheader()
    writer.writerows(messages_to_save)
    return output.getvalue()

st.download_button(
    label="💾 CSVで保存",
    data=save_chat_as_csv(),
    file_name=f"chat_log_{timestamp}.csv",
    mime="text/csv",
)

# Markdown形式で保存
def save_chat_as_markdown():
    lines = []
    for m in messages_to_save:
        role_label = "**User:**" if m["role"] == "user" else "**Assistant:**"
        content = m["content"].replace("\n", "  \n")  # Markdownの改行
        lines.append(f"{role_label} {content}")
    return "\n\n".join(lines)

st.download_button(
    label="📝 Markdownで保存",
    data=save_chat_as_markdown(),
    file_name=f"chat_log_{timestamp}.md",
    mime="text/markdown",
)

✅ 機能一覧まとめ

機能	説明
💬 チャットUI	Streamlit の `st.chat_message()` で会話表示
🧠 Azure OpenAI 連携	`openai.ChatCompletion.create()` の新形式に対応
💾 チャットログ保存（3形式）	JSON / CSV / Markdown に対応、日時付きファイル名付き
🔁 履歴リセット	セッション状態を初期化

必要であれば：

ユーザー名の入力や表示
PDF保存、チャット検索、タグ付けなど
も可能です。次に追加したい機能があれば気軽に教えてくださいね！😊

user:

ありがとうございました。今回の記事をブログにしたいと思います。タイトル案をいくつか提案していただけますか？

assistant:

もちろんです！ブログ記事の雰囲気や読者層にもよりますが、以下のようなタイトル案はいかがでしょうか？技術寄り、親しみやすい系、SEOを意識したパターンも混ぜています。

🧠 技術的・実用寄り

Azure OpenAI + Streamlit で作る！簡単チャットアプリ開発ガイド
【Python】VSCode×StreamlitでAzure OpenAIチャットアプリを構築する方法
チャットログをMarkdownで保存！Azure OpenAI活用型チャットアプリ開発記録
Azure OpenAIを使ってChatGPT風アプリを自作しよう（保存機能付き）
ゼロから始めるStreamlit × Azure OpenAI チャットアプリ制作ガイド

🎯 初心者・入門者向けトーン

はじめてのAIチャットアプリ作り：VSCodeとStreamlitで簡単構築！
プログラミング初心者でもできた！Azure OpenAI × Streamlit でチャットアプリ
誰でもできるAIアプリ：Streamlitで作る会話型アシスタント入門

🔍 SEO・検索を意識した構成

Streamlitでチャットアプリを作る方法【Azure OpenAI / Markdown保存対応】
Azure OpenAIでオリジナルChatGPTを作る方法【Streamlit / ログ保存付き】
【2025年最新版】Azure OpenAI + Streamlitでチャットアプリ開発入門

✨ キャッチー・遊び心あり

推しAIと会話ログが残せる！Streamlit製チャットアプリの作り方
「こんにちは」から始まるAIとの対話：Azure OpenAIで作るチャットアプリ
AIとの会話を日記にしよう：Markdownで残すチャットログのススメ

ご希望があれば、本文の導入文や見出し構成もご提案できます！
どんな読者をターゲットにしたいかなどもあれば、それに合わせて調整できますよ〜 😊

user:

ありがとうございます。「【Python】VSCode×StreamlitでAzure OpenAIチャットアプリを構築する方法」にしようと思います。今回の議論のまとめを書いてください。

assistant:

いいタイトルですね！シンプルで検索性も高く、内容がしっかり伝わります 👍

📝 議論のまとめ

【Python】VSCode×StreamlitでAzure OpenAIチャットアプリを構築する方法

🔧 概要

本記事では、Python初心者でも取り組める VSCode × Streamlit 環境を使って、Azure OpenAI API と連携したチャットアプリを構築する手順を丁寧に解説しました。

🪜 実装した主な機能

✅ 1. チャットアプリの基本構造

VSCode上で Streamlit アプリとして動作
chat_input() でユーザー入力を受け取り、Azure OpenAI に送信
chat_message() で会話を視覚的に表示

✅ 2. Azure OpenAI の新API形式（v1）に対応

openai.ChatCompletion.create() の旧形式エラーを解決
AzureOpenAI クラス（v1形式）を使用し、client.chat.completions.create() でメッセージ送信

✅ 3. チャット履歴の保持とキャッチボール

st.session_state を用いて、ユーザーとアシスタントのメッセージを保持
会話の流れを維持した応答が可能に

✅ 4. チャットログの保存機能（3形式対応）

JSON: 構造化データとして保存
CSV: 表形式での保存・分析に便利
Markdown: 整った形でブログや日記向けに保存可能
各保存ファイルに 日付＋時刻（年月日時分秒）付きのファイル名 を自動付加

✅ 5. リセット機能

ボタン1つでチャット履歴を初期化

🌱 学べること

Azure OpenAI の基本的な使い方
Streamlit を使ったシンプルなUIの構築法
Pythonによるセッション管理とファイル出力
Markdown形式でのテキスト整形と保存処理

🧩 応用アイデア

ユーザー名の入力・管理機能
過去のチャットを再読み込みして再開
PDF形式やNotion連携などの高度な保存
日本語での自然なプロンプト調整（例：「フレンドリーなアシスタント」など）

📌 まとめ

「会話を形として残すAIチャットアプリ」という体験は、ただの技術デモを超えて、日記、学習支援、カスタマーサポートなど多くの場面に応用可能です。

Python・Streamlit・Azure OpenAI の組み合わせで、あなたも 自分だけのチャット体験 を構築してみましょう！

必要があれば、記事用の**見出し構成（h2/h3）**や、導入文・結語の文章もお手伝いできます！お気軽にどうぞ 😊

user:

ありがとうございます。大変満足です。また今度、よろしくお願いします！

assistant:

こちらこそ、楽しいやり取りをありがとうございました！🙌
無事にチャットアプリが完成して、ブログ化もスムーズに進んで何よりです 😊

またいつでも気軽に相談してくださいね。技術ネタ、ブログ構成、ちょっとした疑問まで何でもOKです！

お疲れさまでした＆またお会いできるのを楽しみにしてます〜！🌟
良い開発＆執筆ライフを ✨

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up

【Python】VSCode × StreamlitでAzure OpenAIチャットアプリを構築する方法

user:

assistant:

🌟 初心者向けガイド：VSCode + Streamlit + Azure OpenAI でチャットアプリを作ろう！

🔧 前提条件

1. アカウント

2. ソフトウェア

🧱 ステップ 1：Python環境を準備しよう

① Pythonのインストール

② VSCodeのインストール

🗂 ステップ 2：作業フォルダと仮想環境を作成

📦 ステップ 3：必要なライブラリをインストール

🔑 ステップ 4：Azure OpenAIのAPIキーを取得

💻 ステップ 5：チャットアプリのコードを書く

ファイル構成

app.py

▶️ ステップ 6：Streamlitアプリを起動！

🎁 オプション：UIを少しカスタマイズ

✅ トラブルシューティング

📚 次にやること

user:

assistant:

✅ 解決方法：どちらかを選べます

✅ 方法1：最新の openai ライブラリ用にコードを書き換える（おすすめ）

🔧 app.py 修正版（新API対応）

✅ 方法2：古いバージョンの openai をインストールする

🔍 バージョン確認方法

🔁 補足：Streamlit 再起動

user:

assistant:

✅ 改良ポイント

💡 改良版コード（app.py）

✅ 改良内容まとめ

user:

assistant:

✅ 機能概要

📦 追加ライブラリ（必要なし）

🧩 追加されたコードの主な場所

✅ 最終版：app.py

✅ 保存される内容の例

JSONファイル：

CSVファイル：

✨ 応用アイデア（必要に応じて）

user:

assistant:

✅ 目的

📄 Markdown ファイルの形式（例）

✅ 追加コード：Markdown保存機能

🔧 既存の app.py に以下の関数とボタンを追加してください：

✅ フル機能のまとめ（CSV / JSON / Markdown）

💡 補足：Markdown はメモやブログ執筆にも便利

user:

assistant:

✅ ファイル名にタイムスタンプを付ける方法

🔧 変更点まとめ

✅ 修正後コードの追加部分

🧪 出力されるファイル例（2025年4月16日 14時23分45秒）

user:

assistant:

✅ 最終版 app.py

✅ 機能一覧まとめ

user:

assistant:

🧠 技術的・実用寄り

🎯 初心者・入門者向けトーン

🔍 SEO・検索を意識した構成

✨ キャッチー・遊び心あり

user:

assistant:

📝 議論のまとめ

🔧 概要

🪜 実装した主な機能

✅ 1. チャットアプリの基本構造

✅ 2. Azure OpenAI の新API形式（v1）に対応

✅ 3. チャット履歴の保持とキャッチボール

✅ 4. チャットログの保存機能（3形式対応）

✅ 5. リセット機能

🌱 学べること

🧩 応用アイデア

📌 まとめ

`app.py`

🔧 `app.py` 修正版（新API対応）

💡 改良版コード（`app.py`）

✅ 最終版：`app.py`

🔧 既存の `app.py` に以下の関数とボタンを追加してください：

✅ 最終版 `app.py`