SageMaker JupyterLab × StreamlitでBedrock Claudeチャットボットを構築してみた！

はじめに

皆さんこんにちは！パーソル＆サーバーワークスの榎本です。
最近よくStreamlitを使っているのですが、簡単にグラフィカルなWebアプリが作れるので感動しています！
Streamlitとは、Pythonコードだけで簡単にWebアプリが作れるツールです！
今回はSageMaker JupyterLab上で、BedrockのClaudeモデルを使った簡易チャットボットアプリをStreamlitで構築してみましたので共有いたします！！

本記事の目的

• SageMaker JupyterLab上でStreamlitを起動して、ローカルPCのブラウザからアクセスしてBedrockのClaudeモデルから回答を得ることができる簡易チャットボットの構築

前提

• SageMakerドメイン作成済み

構築手順

SageMaker JupyterLab起動

1. AWSマネジメントコンソールにて[Amazon SageMaker AI]を検索して開く
   
   
   
2. 左のナビゲーションペインから[Studio]を選択し、自身のユーザープロファイルを選択して[Studioを開く]をクリックする
   
   
   
3. [JupyterLab]をクリックする
   
   
   
4. 右上の[Create JupyterLab space]をクリックする
   
   
   
5. 任意の名前（例：JupyterLab-Streamlit-Test）を入力し、[Private]を選択して[Create space]をクリックする
   
   
   
6. [Run space]をクリックする
   
   
   
7. Statusが「Running」になったことを確認し、[Open JupyterLab]をクリックする
   
   
   

SageMaker JupyterLabログイン後設定

1. Otherの下の[Python File]をクリックする
   
   
   
2. 以下コードをコピー&ペーストして、ファイルを保存する
   

   import streamlit as st
   import boto3
   import json
   from datetime import datetime
   # ページ設定（シンプル化）
   st.setpageconfig(
       pagetitle="Claude Chat",
       pageicon="🤖"
   )
   # タイトル
   st.title("🤖 Claude Chat")
   # サイドバーで最小限の設定
   with st.sidebar:
       st.header("設定")
       # リージョン選択
       region = st.selectbox(
           "リージョン",
           ["us-east-1", "us-west-2", "ap-northeast-1"]
       )
       # モデル選択
       modeloptions = {
           # Claude 4.5 models
           "Claude 4.5 Haiku": "us.anthropic.claude-haiku-4-5-20251001-v1:0",
           "Claude 4.5 Sonnet": "us.anthropic.claude-sonnet-4-5-20250929-v1:0",
           "Claude 4 Sonnet": "us.anthropic.claude-sonnet-4-20250514-v1:0",
           # Claude 3.7 models
           "Claude 3.7 Sonnet": "us.anthropic.claude-3-7-sonnet-20250219-v1:0",
           # Claude 3.5 models
           "Claude 3.5 Sonnet v2": "anthropic.claude-3-5-sonnet-20241022-v2:0",
           "Claude 3.5 Haiku": "anthropic.claude-3-5-haiku-20241022-v1:0",
           # Claude 3 models
           "Claude 3 Sonnet": "anthropic.claude-3-sonnet-20240229-v1:0",
           "Claude 3 Haiku": "anthropic.claude-3-haiku-20240307-v1:0"
       }
       modelname = st.selectbox(
           "モデル",
           list(modeloptions.keys())
       )
       modelid = modeloptions[modelname]
       # 最大トークン数
       maxtokens = st.slider("最大トークン数", 100, 4000, 1000)
       # チャット履歴クリア
       if st.button("🗑️ 履歴クリア"):
           st.sessionstate.messages = []
           st.rerun()
   # チャット履歴の初期化
   if "messages" not in st.sessionstate:
       st.sessionstate.messages = []
   # Bedrockクライアント
   @st.cacheresource
   def getbedrockclient(regionname):
       try:
           return boto3.client('bedrock-runtime', regionname=regionname)
       except Exception as e:
           st.error(f"接続エラー: {str(e)}")
           return None
   # Claude API呼び出し
   def callclaude(client, modelid, messages, maxtokens):
       try:
           body = {
               "anthropicversion": "bedrock-2023-05-31",
               "maxtokens": maxtokens,
               "messages": [{"role": msg["role"], "content": msg["content"]} for msg in messages],
               "temperature": 0.7
           }
           response = client.invokemodel(
               modelId=modelid,
               body=json.dumps(body),
               contentType='application/json'
           )
           responsebody = json.loads(response['body'].read())
           return responsebody['content'][0]['text']
       except Exception as e:
           return f"エラー: {str(e)}"
   # チャット履歴表示
   for message in st.sessionstate.messages:
       with st.chatmessage(message["role"]):
           st.markdown(message["content"])
   # ユーザー入力
   if prompt := st.chatinput("メッセージを入力..."):
       bedrockclient = getbedrockclient(region)
       if bedrockclient is None:
           st.error("AWS認証を確認してください")
           st.stop()
       # ユーザーメッセージ追加・表示
       st.sessionstate.messages.append({"role": "user", "content": prompt})
       with st.chatmessage("user"):
           st.markdown(prompt)
       # Claude応答
       with st.chatmessage("assistant"):
           with st.spinner("考え中..."):
               response = callclaude(bedrockclient, modelid, st.sessionstate.messages, maxtokens)
               st.markdown(response)
               st.sessionstate.messages.append({"role": "assistant", "content": response})
   

3. 保存時に以下ポップアップが表示されたら[app.py]と入力し、[Rename and Save]をクリックする
   
   
   
4. Otherの下の[Terminal]をクリックする
   
   
   
5. 以下コマンドを実行してStreamlitをJupyterLabスペースにインストールする
   

   pip install streamlit 
   
   

   
   
   
6. 以下コマンドを実行してStreamlitを起動する

streamlit run app.py --server.baseUrlPath /jupyterlab/default/proxy/absolute/8501

ローカルPCブラウザ操作（Streamlitアクセス）

1. ローカルPCでブラウザを開き、以下URLをコピー&ペーストして検索する
   
   
   
   • ※JupyterLab画面表示時のURLを参照
     
     
     
2. Streamlitが表示されることを確認する
   
   
   
3. 任意のプロンプトを入力して回答が返ってくることを確認する
   
   
   

まとめ

app.pyを書き換えるだけで、皆さんのオリジナルのWebアプリをStreamlitで構築することができます！
SageMaker、Bedrockなど最近流行りのサービスを一気に触ることができるので、ぜひ皆さんも上記ハンズオンを試してみてください！

この記事は私が書きました

榎本 将希

記事一覧

2024,2025 Japan All AWS Certifications Engineers サッカー観戦とサウナが好きです！ 機械学習とAIを勉強中です！