Claude CodeでStreamlitアプリを作る手順とstreamlit skillsの導入

Claude CodeでStreamlitアプリを作るとは

結論から言うと、pip install streamlitのあとにstreamlit skillsを実行すれば、Claude Codeに公式スキルを入れられます。あとは要件を自然文で伝えるだけで、app.pyの生成から起動確認まで任せられます。

Claude CodeでStreamlitアプリを作るとは、対話で伝えた要件をもとにClaude Codeがapp.pyを書き、streamlit runで実際に動かしながら仕上げていく作業です。コードを一から書く代わりに、欲しいダッシュボードの中身を自然文で指示し、動作確認と修正をClaude Codeに任せられます。Dashを使う場合はDashのコールバック不具合の直し方を参照してください。

Streamlitとは、Pythonのスクリプトに数行のコマンドを足すだけでブラウザー上のデータアプリを作れるオープンソースのフレームワークです。HTMLやJavaScriptを書かずに、表・グラフ・地図・スライダーなどのUI部品をPythonの関数呼び出しだけで配置できます。

Claude Codeが担う範囲は、app.pyのコード生成だけではありません。ターミナル権限があればpip installやstreamlit runもそのまま実行でき、起動したアプリの挙動を見ながらコードを直す反復作業も任せられます。Agent Skillsの節には、Streamlit 1.64.0でstreamlit skillsを実行して確かめた出力とファイル構成を載せています。

前提条件 — Streamlitのインストール方法

Streamlitアプリを動かすには、Python環境へのStreamlitのインストールが前提です。ローカルにPythonが入っていれば、仮想環境を作ってpipで入れるのが最短です。

公式ドキュメントが挙げる開発環境は4通りあります。

ローカルのコマンドラインで進める場合は、次の手順でインストールします。

python -m venv .venv
source .venv/bin/activate
pip install streamlit
streamlit hello

streamlit helloはStreamlit公式のサンプルアプリを起動するコマンドで、インストールが成功していればブラウザーに新しいタブが開きます。ここまでをClaude Codeに直接実行させれば、環境構築の確認も含めて一度に終わらせられます。

Claude Codeにアプリの雛形を作らせる

Claude Codeにアプリの雛形を作らせるときは、扱うデータと表示したい内容を自然文で伝えるだけで済みます。Claude Codeがそれをimport streamlit as stから始まるapp.pyに落とし込みます。

ファイル名はstreamlit_app.pyにする手もあります。streamlit run --helpによると、引数を省略した場合の実行対象がstreamlit_app.pyだからです。Streamlit同梱のスキルも、ルート直下のstreamlit_app.pyを正規のエントリポイントとして最優先で探し、次にapp.pyを候補にします。

Streamlitのアプリは、画面に何か変化が起きるたびにPythonスクリプトを最初から最後まで再実行する設計です。ウィジェットを操作したときも、コードを保存したときも同じように全体が再実行されます。Claude Codeに書かせるときも、関数やクラスに状態管理を仕込むより、上から読み下せるスクリプトにする方がStreamlitの流儀に合います。

最小構成なら、次のようなコードになります。

import streamlit as st
 
st.title("最初のダッシュボード")
 
x = st.slider("倍率を選んでください", 0, 10)
st.write(f"{x} の2乗は {x * x} です")

st.sliderはウィジェットで、ユーザーが値を動かすたびにスクリプト全体が再実行され、xに現在の値が入り直します。Claude Codeにウィジェットを追加してもらうときは「スライダーを足して」のように部品単位で頼むと、差分が小さく確認しやすくなります。

streamlit runで起動して反復する

streamlit runでアプリを起動すると、ローカルサーバーが立ち上がりブラウザーの新しいタブでアプリが開きます。コードを保存するたびに再実行を促す通知が出るので、書く・保存する・確認するのループをそのまま回せます。

streamlit run app.py

Claude Codeに起動と確認までまとめて任せる場合は/runコマンドが使えます。プロジェクトの構成から起動方法を探して実際にアプリを動かすバンドルスキルです。ブラウザーでの見た目を画面越しに確認したいときは、Claude Code DesktopのBrowserペインでdevサーバーをプレビューする方法も使えます。

動作を確認できたら、公開して共有する選択肢もあります。Streamlit Community Cloudを使う場合、requirements.txtを含めたコード一式をGitHubの公開リポジトリに置き、share.streamlit.ioでリポジトリのURLを指定するとデプロイできます。

データの表示とキャッシュを組み込む

データを表示するだけなら、変数を単独の行に置くかst.write()に渡すだけで済みます。表・グラフ・地図のいずれも、対応するst.*関数を1行呼ぶだけで描画されます。

import streamlit as st
import pandas as pd
import numpy as np
 
df = pd.DataFrame({
    "first column": [1, 2, 3, 4],
    "second column": [10, 20, 30, 40],
})
st.write(df)
 
chart_data = pd.DataFrame(np.random.randn(20, 3), columns=["a", "b", "c"])
st.line_chart(chart_data)

st.write()はテキスト・データフレーム・Matplotlibの図・Altairのチャートまで渡せる汎用の描画関数です。静的な表として描きたいときはst.table()、インタラクティブな表として描きたいときはst.dataframe()と使い分けます。Pandasのstyler機能と組み合わせると、st.dataframe(dataframe.style.highlight_max(axis=0))のように列ごとの最大値を強調表示することもできます。

データの取得や整形に時間がかかる処理は、@st.cache_dataをつけるとスクリプト再実行のたびに実行し直さずに済みます。

@st.cache_data
def load_data(nrows):
    data = pd.read_csv(DATA_URL, nrows=nrows)
    return data

@st.cache_dataは、関数の引数とコードの中身が前回と同じであれば処理を飛ばし、キャッシュ済みの結果を返す仕組みです。入門チュートリアルが挙げる限界のうち、今も当てはまるのは次の2つです。キャッシュの変化検知は作業ディレクトリの中だけが対象で、ライブラリをアップグレードしても作業ディレクトリの外にあれば気づきません。関数が乱数や外部の時系列データのように毎回結果が変わる処理を含む場合も、キャッシュは古い結果を返し続けます。

戻り値の扱いは、@st.cache_dataと@st.cache_resourceで逆になります。st.cache_dataは呼び出しのたびにデータの新しいコピーを返すので、DataFrameを受け取った側で書き換えてもキャッシュの中身は壊れません。機械学習モデルやデータベース接続のように、コピーできない共有オブジェクトにはst.cache_resourceを使います。Claude Codeに「CSV読み込みをキャッシュして」と頼むときは、読み込み関数ならst.cache_dataが出てくれば筋が通っています。

Streamlit公式のAgent Skillsを導入する

Streamlitは、Claude CodeのようなAIコーディングエージェント向けに公式のAgent Skillsをパッケージへ同梱しています。streamlit skillsコマンドを実行するだけで、Claude Codeが現在のStreamlit APIに沿ったコードを書けるよう補助スキルを導入できます。

streamlit skills

Streamlit 1.64.0を入れた空のプロジェクトでstreamlit skills --yesを実行すると、次の出力になりました(インストール先の絶対パスを示す行は省略しています)。

✓ Installed:
  → .agents/skills/developing-with-streamlit
  → .claude/skills/developing-with-streamlit
 
Note: Installed skills are symlinks to your local Streamlit environment.
      They generally should not be committed to git.
 
Recommended .gitignore snippet:
  # Streamlit agent skills (environment-specific symlinks)
  .agents/skills/developing-with-streamlit
  .claude/skills/developing-with-streamlit

.claude/skills/developing-with-streamlitは、シンボリックリンクでした。リンク先は仮想環境のsite-packages/streamlit/.agents/skills/にある実体です。Streamlitをアップグレードすれば、スキルの中身も追随します。一方、リンク先はその環境の中にあります。そのためコマンド自身が、gitにコミットしないよう案内しています。チームで共有するなら、各自がstreamlit skillsを実行する運用になります。Claude Codeは、スキルのフォルダーがほかの場所へのシンボリックリンクでもSKILL.mdを読み込みます。

導入されるスキルは1つだけです。developing-with-streamlitという名前のルーティング用スキルで、SKILL.mdのほかにreferences/が28ファイルあります。dashboards.md・session-state.md・performance.md・chat-ui.md・theme.mdなどがあり、依頼の種類に応じて該当する参照だけを読み込む作りです。descriptionは「Streamlitに関するすべての作業で使う」と宣言しています。トリガー語にはstreamlitやapp.py、dashboardが並びます。

どちらのモードでも、--yes(-y)を付けると確認を省けます。

対応バージョンは入り組んでいます。スキル群は1.57以降のパッケージに同梱され、streamlit skillsコマンドは1.58以降で使えます。さらに、以前スキルを配っていたstreamlit/agent-skillsリポジトリは非推奨となり、アーカイブされました。メタスキルの本体はStreamlit本体に移り、1.60以降はpipパッケージに同梱されています。旧リポジトリ経由のnpx skills addも動き続けます。今から入れるなら、pip install --upgrade streamlitのあとにstreamlit skillsを実行する形です。1.64.0では、Claude Codeが読む場所へスキルを入れる処理が修正されました。導入が不完全なときは、成功ではなく不完全と報告されます。

グラフの配色を整えたいときは、標準の/datavizスキルと組み合わせる手があります。端末セッションのスキルについては、claude.aiのSkill同期の更新も参照してください。

よくあるつまずき

• カスタム引数がstreamlit自身のオプションと解釈される: streamlit run app.py --my-flagのように渡すと、--my-flagはStreamlitへの引数として扱われます。スクリプト側に渡したい引数はstreamlit run app.py -- --my-flagのように--の後に置きます
• キャッシュが古いデータを返し続ける: データソースが動的に変わる処理は、キャッシュの対象から外すか、引数を変えてキャッシュキーを更新します(検知できない範囲は前の節のとおりです)
• ウィジェットの値が意図せずリセットされる: keyを付けていないウィジェットは、ラベルやdefaultなどの引数が変わると別のウィジェットとして扱われ、値が初期状態に戻ります。公式ドキュメントの例では、defaultだけを変えたときkeyなしのスライダーはリセットされ、key付きは状態を保ちました。ただしst.sliderのmin_valueやmax_valueを変えた場合は、key付きでもリセットされます。Claude Codeにラベルを動的に組み立てさせたウィジェットが勝手に戻るときは、keyを固定します
• ページを切り替えるとkeyの値が消える: Streamlit 1.46.0以降、ページ移動時にst.session_stateのウィジェットキーが、移動先のスクリプト実行の冒頭で削除されます。ページをまたいで残したい値は、ウィジェットキーとは別のキーに保存し直します

まとめ

streamlit skillsで入るのは、環境に紐づいたシンボリックリンクです。コミットせず、環境を作り直したら入れ直す前提で扱えば、導入の手間は1コマンドで済みます。ウィジェットの値が戻る症状は、まずラベルや引数の変化とkeyの有無を疑うと原因に早く着きます。