Claude CodeでGradioデモの作り方 — MLモデルのUIを素早く公開
Claude CodeにGradioコードを書かせ、機械学習モデルやPython関数のデモUIを数分で立ち上げて共有する手順を解説します。
Claude CodeとGradioを組み合わせる利点
Gradioは、機械学習モデルやAPI、任意のPython関数に対してブラウザ上のデモUIを数行のコードで作れるOSSのPythonパッケージです。JavaScriptやCSS、Webホスティングの知識は不要で、gr.Interfaceにひとつの関数を渡すだけでフォーム入力と結果表示を備えた画面が立ち上がります。
Claude Codeを使うと、この「数行のコード」を書く部分自体を自然言語の指示で済ませられます。関数のシグネチャを伝えるだけでGradioのInterfaceやBlocksを組み立てさせたり、UIのレイアウト変更やエラー対応をその場で頼んだりできます。前提として、ターミナルが使えることとPython 3.10以上がインストール済みであることの2点だけ確認してください。
ステップ1: Gradioをインストールしプロジェクトを準備する
まず作業用ディレクトリを作り、Claude Codeのセッションを開始します。Gradioの公式ガイドは仮想環境での利用を推奨しているため、Claude Codeに仮想環境の作成まで含めて指示すると1コマンドで済みます。
mkdir gradio-demo && cd gradio-demo
claudeセッション内では、次のように自然言語で環境構築を依頼します。
Python の仮想環境を作って有効化し、pip install --upgrade gradio を実行してClaude Codeはbashツールで仮想環境の作成とインストールを実行します。Pro・Max・Teamプランの対話セッションでは、Auto modeという組み込みの権限モードが既定になっており、分類器がコマンドの安全性を判定してほとんどの操作を確認なしで進めます。それ以外のプランではManualモードが既定で、コマンドの実行前に承認を求められます。この分類器の判定はv2.1.278でClaude APIやBedrock等でもサーバー側の既定に切り替わりました。有効かどうかは/statusで確認できます。
ステップ2: Claude Codeに最初のデモを書かせる
環境が整ったら、実際に動かしたい関数を伝えてデモコードを書かせます。Gradio公式ガイドのサンプルと同じ「名前とスライダーを受け取って挨拶文を返す」関数を例にすると、依頼文はこうなります。
name(文字列)とintensity(スライダー)を受け取り、
「Hello, 」+ name + 「!」を intensity 回繰り返す関数を作り、
gr.Interface でUIを付けて app.py に保存してClaude Codeが生成するコードは、Gradio公式ガイドの構造とほぼ同じ形になります。
import gradio as gr
def greet(name, intensity):
return "Hello, " + name + "!" * int(intensity)
demo = gr.Interface(
fn=greet,
inputs=["text", "slider"],
outputs=["text"],
)
demo.launch()Interfaceクラスはfn(UIを付ける関数)・inputs(入力コンポーネント)・outputs(出力コンポーネント)の3つの引数で構成されます。inputs・outputsに渡すコンポーネントの数は、関数の引数の数・戻り値の数とそれぞれ一致させる必要があります。inputs・outputsには"text"のような文字列名か、gr.Textbox()のようなインスタンスのどちらでも渡せます。Gradioにはgr.Image()やgr.Audio()、gr.HTML()など30種類を超える組み込みコンポーネントが用意されています。扱いたいデータの型をClaude Codeに伝えれば、適切なコンポーネントを選ばせられます。ファイルができたら、Claude Codeに実行も任せられます。
python app.pyファイルから実行した場合、デモはhttp://localhost:7860でブラウザに開きます。Jupyter Notebook内で実行した場合は、ノートブックに埋め込まれた形で表示されます。
Claude Codeでの反復編集はホットリロードと相性がよい
Claude Codeにコードを直させながら動作を確認する場面では、python app.pyの代わりにgradio app.pyで起動します。ファイルを保存するたびにアプリが自動で再読み込みされるため、Claude Codeがapp.pyを書き換えるたびの手動再起動が要りません。「レイアウトを直して」「エラーメッセージを追加して」といった往復のやり取りを、そのまま画面に反映しながら進められます。
なお、Gradio自体にもgradio --vibe app.pyという、ブラウザ内のチャットで自然言語からUIを編集できる独自のvibeモードがあります。これはGradio側の機能であり、Claude Codeのセッションとは別物です。両方を同時に起動すると同じファイルを2つのエージェントが編集することになるため、Claude Codeで進める間はvibeモードを併用しないほうが混乱を避けられます。
ステップ3: gr.Blocksでレイアウトを組み替える
gr.Interfaceは入力と出力を自動配置する高水準クラスです。コンポーネントの配置場所を自分で決めたい、複数の処理を連鎖させたい、といった要件が出てきたらgr.Blocksに切り替えます。Blocksはより低水準なクラスです。コンポーネントの表示位置・複雑なデータフロー(ある出力を別の関数の入力にする等)・ユーザー操作に応じたプロパティや表示・非表示の更新まで、すべてPythonのコードで制御できます。
Claude Codeへの指示は「このInterfaceをBlocksで書き直して、入力欄を左、出力欄を右の2カラムに配置して」のように、変更したいレイアウトを具体的に伝える形が効きます。既存のapp.pyを読み込んだ状態のセッションであれば、Claude Codeはfnのロジックを保ったままUI部分だけを書き換えます。
チャットボットのUIが目的なら、gr.Blocksよりgr.ChatInterfaceのほうが近道です。Interfaceと同様に関数を渡すだけで、Chatbot向けの完成したUIをGradioが組み立てます。
デモを外部に共有する
ローカルで動かしたデモを他の人に見せたい場合は、launch()にshare=Trueを渡すだけで公開URLが発行されます。
import gradio as gr
def greet(name):
return "Hello " + name + "!"
demo = gr.Interface(fn=greet, inputs="textbox", outputs="textbox")
demo.launch(share=True)実行するとhttps://xxxxxxxxxxxx.gradio.liveのようなURLが数秒で生成され、世界中の誰でもブラウザからデモを試せるようになります。ここで見落としやすいのは、機械学習モデルの推論や計算自体は公開後もローカルのマシン上で実行され続けるという点です。共有URLは通信の窓口であって、モデルをクラウドに移すわけではありません。
継続的に外部公開したい場合は、Hugging Face Spacesへの無料ホスティングもGradioエコシステムの一部として用意されています。動作確認だけなら、Claude Codeが発行した公開URLをBrowserbase MCPサーバーでクラウドブラウザから自動テストする方法も使えます。
Interface・Blocks・ChatInterfaceの使い分け
GradioにはInterface以外にも複数の作り方があり、Claude Codeに頼む段階でどのクラスを指定するかによって出てくるコードの複雑さが変わります。
| クラス | 向いている場面 | Claude Codeへの伝え方の例 |
|---|---|---|
gr.Interface | 向いている場面1つの関数に入出力を素早く付けたい | Claude Codeへの伝え方の例「この関数にInterfaceでUIを付けて」 |
gr.Blocks | 向いている場面レイアウトや複数コンポーネント間の連携を自分で制御したい | Claude Codeへの伝え方の例「2カラムのBlocksレイアウトにして」 |
gr.ChatInterface | 向いている場面チャットボット形式のUIが欲しい | Claude Codeへの伝え方の例「この応答関数をChatInterfaceでラップして」 |
gradio_client / @gradio/client | 向いている場面既存のGradioアプリをPythonやJavaScriptから呼び出したい | Claude Codeへの伝え方の例「このGradioアプリをPythonクライアントから叩くコードを書いて」 |
用途に迷ったら、まずgr.Interfaceで最小構成を作り、レイアウトの要件が出た段階でgr.Blocksに書き換えるのが遠回りになりません。Claude Codeは既存コードを読んだ上での書き換えが得意なので、最初から作り込みすぎない方が指示の往復が減ります。
よくあるつまずき
- Pythonのバージョンが古い: GradioはPython 3.10以上を前提にしています。
python --versionで確認し、古い場合はClaude Codeにpyenvや公式インストーラーでの切り替えを依頼します - 仮想環境を作らずグローバルにインストールしてしまう: 別プロジェクトのパッケージと衝突しやすいので、
pip installの前に仮想環境の作成をセットで指示します demo.launch()を呼び忘れる:InterfaceやBlocksのオブジェクトを作っただけでは画面は開きません。launch()の呼び出しまでコードに含まれているかを確認します- 複数のデモを同時に起動してポートが衝突する: 既定では同じポートを使おうとするため、前のプロセスを終了するか、Claude Codeに
launch(server_port=...)での明示指定を頼みます - Auto modeでの実行を確認せずに承認してしまう: 分類器がコマンドを進めるAuto modeでも、
rmや外部送信を伴う操作は内容を見てから進めます。権限モードは対話中にShift+Tabでいつでも切り替えられます
複数ファイルにまたがる設計や、要件定義から実装まで一貫させたい複雑なデモでは、進め方自体を型化する方法もあります。cc-sddで仕様駆動開発を実践するは、要件の整理からClaude Codeの実装まで一貫させる手順をまとめています。
まとめ
Claude CodeとGradioの組み合わせは、「動かしたいPython関数はあるが、UIを書く時間は割きたくない」という場面に向いています。pip install --upgrade gradioからデモコードの生成、gr.Blocksでのレイアウト調整、share=Trueでの公開まで、すべて自然言語の指示で進められます。Auto modeが既定のプランではコマンド実行の確認がほとんど省かれる分、共有URLの公開範囲や実行するコマンドの内容は都度目を通す習慣をつけると安全です。まずはgr.Interfaceで最小構成を作り、要件に応じてgr.Blocksやgr.ChatInterfaceに育てていく流れが遠回りになりません。デモが完成した後にプログラムから呼び出したくなったら、gradio_clientをClaude Codeに使わせて動作確認まで任せる進め方もあります。