Claude CodeでGradioデモの作り方 — MLモデルの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ツールで仮想環境の作成とインストールを実行します。承認の挟まり方は権限モードで決まります。v2.1.283以降は、ターミナルとVS Codeの対話セッションでauto modeが組み込みの開始モードです。分類器がコマンドの安全性を判定し、ほとんどの操作を確認なしで進めます。

v2.1.282以前では、auto modeが開始モードになるのはPro・Max・Teamプランの一部のセッションだけで、それ以外はManualモードから始まります。モデルが非対応の場合や組織が無効にしている場合も、Manualで始まります。

いまどのモードかは、画面下のステータスバーで分かります。⏵⏵ auto mode onならauto mode、⏸ manual mode onならManualです。分類器の判定は、Claude APIやEnterprise、Bedrockなどでv2.1.278からサーバー側が既定になり、/statusにはAuto mode serverの行が加わりました。この行が示すのは分類器がサーバーで動いているかどうかで、auto modeが有効かどうかではありません。

ステップ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()のようなインスタンスのどちらでも渡せます。画像ならgr.Image()、音声ならgr.Audio()のように、扱うデータの型に合うコンポーネントがあります。依頼文には入力と出力のデータ型を書いておくと、コンポーネントの選択まで任せられます。

ファイルができたら、Claude Codeに実行も任せられます。

python app.py

ファイルから実行した場合、デモはhttp://localhost:7860でブラウザに開きます。Jupyter Notebook内で実行した場合は、ノートブックに埋め込まれた形で表示されます。

起動コマンドで直しの往復が変わる

Claude Codeにコードを直させながら画面を見るなら、起動コマンドはgradio app.pyです。python app.pyとは、ファイルを書き換えたときの挙動が違います。

Gradio 6.29.1で上のサンプルをgradio app.pyで起動したときの出力例です。ファイルを保存すると最終行が出ます。

Watching: '/path/to/gradio-demo'
 
Watching demo: demo
* Running on local URL:  http://127.0.0.1:7860
* To create a public link, set `share=True` in `launch()`.
Changes detected in: /path/to/gradio-demo/app.py

Watching: の行は監視対象のディレクトリです。gradioコマンドの引数はdemo_pathが必須で、--demo-nameでファイル内の変数名を、--watch-dirsで追加の監視先を指定できます。demo以外の名前でアプリを作らせたときは、--demo-nameが必要になります。

Gradio自体にもgradio --vibe app.pyという、ブラウザ内のチャットで自然言語からUIを編集するvibeモードがあります。これはGradio側の機能で、Claude Codeのセッションとは別です。同じapp.pyを2つの編集役が書き換えることになるので、Claude Codeで進める間は併用しません。

ステップ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はGradioの共有サーバーが発行する、ローカルのアプリへのトンネルです。共有サーバーはアプリをホストせず、通信を中継するだけです。モデルの推論や計算は、公開後も自分のマシンで動き続けます。

共有リンクには期限があります。Gradioの共有ガイドでは有効期間は1週間、共有リンクの仕組みの解説では公式の共有サーバー経由のリンクに72時間のタイムアウトがあると書かれています。長く見せたいなら期限の長さに頼らず、自前の共有サーバーを立てれば期限の制約を外せます。常時公開したいデモには向かないので、次のHugging Face Spacesか自前のホスティングを選びます。

Gradioの共有ガイドには、share=Trueの起動時に必要な補助バイナリ(FRPクライアント)の話もあります。このバイナリは初回に自動でダウンロードされます。アンチウイルスソフト(特にWindows Defender)が止めると、Could not create share link. Missing file: ...というエラーが出ます。手動で取得して所定の場所に置くか、アンチウイルスの許可リストに入れる手順がエラー文に書かれています。依頼文には、このエラーが出たらエラー文をそのまま貼って直すよう頼むと流れが止まりません。

継続的に外部公開したい場合は、Hugging Face SpacesへのホスティングがGradioのガイドに載っています。発行された公開URLの動作確認だけなら、Browserbase MCPサーバーでクラウドブラウザから自動テストする方法もあります。公開したGradioアプリをClaudeの会話からツールとして呼ぶ手順はClaudeとHugging Faceの連携にあります。

Interface・Blocks・ChatInterfaceの使い分け

GradioにはInterface以外にも複数の作り方があり、Claude Codeに頼む段階でどのクラスを指定するかによって出てくるコードの複雑さが変わります。

用途に迷ったら、まずgr.Interfaceで最小構成を作り、レイアウトの要件が出た段階でgr.Blocksに書き換える順序が無駄の少ない進め方です。

よくあるつまずき

• Pythonのバージョンが古い: Gradioの仮想環境ガイドはPython 3.10以上を求めています。python --versionで確認し、古い場合はClaude Codeにpyenvや公式インストーラーでの切り替えを依頼します
• 仮想環境を作らずグローバルにインストールしてしまう: 別プロジェクトのパッケージと衝突しやすいので、pip installの前に仮想環境の作成をセットで指示します
• demo.launch()を呼び忘れる: InterfaceやBlocksのオブジェクトを作っただけでは画面は開きません。launch()の呼び出しまでコードに含まれているかを確認します
• 2つ目のデモが7860で開かない: 同じポートが使用中のとき、Gradioは別の空きポートで起動します。2つ目はhttp://127.0.0.1:7862のように別ポートで起動します。URLは起動時の出力で確かめます。ポートを固定したいときだけlaunch(server_port=...)をClaude Codeに頼みます
• auto modeのまま作業が進んでいく: 分類器が確認を肩代わりするので、実行されたコマンドは後から画面で読み返します。確認を挟みたいときはShift+Tabを押すと、auto modeからManualに切り替わります。claude --permission-mode manualで最初からManualにもできます

複数ファイルにまたがる設計や、要件定義から実装まで一貫させたい複雑なデモでは、進め方自体を型化する方法もあります。cc-sddで仕様駆動開発を実践するは、要件の整理からClaude Codeの実装まで一貫させる手順をまとめています。

まとめ

Claude Codeに頼めば、Gradioのデモは依頼文1つから動く画面まで持っていけます。判断が要るのは2点です。直しの往復があるならgradio app.pyで起動し、共有するならshare=Trueのリンクが数日で切れ、誰にでも開かれる点を前提に選びます。