Update app.py

app.py

@@ -125,12 +125,15 @@ def text_analyzer(text: str) -> str:
 
 # メインアプリケーションの作成
 with gr.Blocks(
-    title="Gradio Streamable HTTP MCP Demo",
+    title="Gradio Streamable HTTP MCP Demo - MakiAi",
     theme=gr.themes.Soft(),
     css="""
     .tab-nav button {
         font-size: 16px !important;
     }
+    .markdown-body h2 {
+        color: #2563eb !important;
+    }
     """
 ) as demo:
     
@@ -139,10 +142,10 @@ with gr.Blocks(
     
     このアプリは、Gradio の新しい **Streamable HTTP Transport for MCP server** 機能のデモです。
     
-    ## 🔗 MCP エンドポイント
-    アプリ起動後、以下のエンドポイントでMCPツールにアクセスできます：
-    - **HTTP Transport**: `{APP_URL}/gradio_api/mcp/http/`
-    - **SSE Transport**: `{APP_URL}/gradio_api/mcp/sse`
+    ## 🔗 ライブ MCP エンドポイント
+    以下のエンドポイントで実際にMCPツールにアクセスできます：
+    - **HTTP Transport**: `https://makiai-gradio-streamable-mcp-demo.hf.space/gradio_api/mcp/http/`
+    - **SSE Transport**: `https://makiai-gradio-streamable-mcp-demo.hf.space/gradio_api/mcp/sse`
     
     ## 🛠️ 利用可能なツール
     """)
@@ -240,43 +243,60 @@ with gr.Blocks(
     gr.Markdown("""
     ## 📋 MCP クライアントでの使用方法
     
-    1. **MCP Inspector** でテスト:
-       ```
-       https://your-app-url/gradio_api/mcp/http/
-       ```
+    ### 🧪 **MCP Inspector でテスト**
+    ```bash
+    npx @modelcontextprotocol/inspector https://makiai-gradio-streamable-mcp-demo.hf.space/gradio_api/mcp/http/
+    ```
     
-    2. **Claude Desktop** での設定例:
-       ```json
-       {
-         "mcpServers": {
-           "gradio-demo": {
-             "command": "curl",
-             "args": ["-X", "POST", "https://your-app-url/gradio_api/mcp/http/"]
-           }
-         }
-       }
-       ```
+    ### 🖥️ **Claude Desktop での設定例**
+    ```json
+    {
+      "mcpServers": {
+        "gradio-mcp-demo": {
+          "command": "npx",
+          "args": [
+            "@modelcontextprotocol/server-everything", 
+            "https://makiai-gradio-streamable-mcp-demo.hf.space/gradio_api/mcp/http/"
+          ]
+        }
+      }
+    }
+    ```
     
-    3. **利用可能なツール**:
-       - `calculator`: 数学計算
-       - `image_processor`: 画像処理
-       - `text_analyzer`: テキスト分析
+    ### 🛠️ **利用可能なツール**
+    - **`calculator`**: 基本的な数学計算（加算、減算、乗算、除算、べき乗、平方根）
+    - **`image_processor`**: 画像エフェクト処理（ぼかし、シャープ化、明度、コントラスト調整）
+    - **`text_analyzer`**: テキスト統計分析（文字数、単語数、文字種別分析）
     
     ## 🔧 技術詳細
     
-    - **Transport**: Streamable HTTP
-    - **Protocol**: MCP (Model Context Protocol)
-    - **Endpoints**: `/gradio_api/mcp/http/` (HTTP), `/gradio_api/mcp/sse` (SSE)
-    - **Features**: ファイル入出力、状態管理、リアルタイム処理
+    - **🌐 Space URL**: [Hugging Face Space](https://huggingface.co/spaces/MakiAi/gradio-streamable-mcp-demo)
+    - **🚀 Transport**: Streamable HTTP (最新機能!)
+    - **📡 Protocol**: MCP (Model Context Protocol)
+    - **🔗 HTTP Endpoint**: `https://makiai-gradio-streamable-mcp-demo.hf.space/gradio_api/mcp/http/`
+    - **📺 SSE Endpoint**: `https://makiai-gradio-streamable-mcp-demo.hf.space/gradio_api/mcp/sse`
+    - **✨ Features**: ファイル入出力対応、リアルタイム処理、状態管理
+    
+    ## 🎯 デモの特徴
+    
+    このアプリは **Gradio PR #11300** で実装された最新の Streamable HTTP Transport 機能を使用しています。
+    従来のSSE（Server-Sent Events）に加えて、より効率的なHTTP通信でMCPツールを利用できます。
+    
+    **🔗 関連リンク**:
+    - [Original PR #11300](https://github.com/gradio-app/gradio/pull/11300)
+    - [MCP Protocol](https://modelcontextprotocol.io/)
+    - [Gradio MCP Documentation](https://gradio.app/docs/mcp)
     """)
 
-# アプリケーションの設定
+# アプリケーションの設定とデプロイ
+# Live Demo: https://huggingface.co/spaces/MakiAi/gradio-streamable-mcp-demo
+# MCP HTTP Endpoint: https://makiai-gradio-streamable-mcp-demo.hf.space/gradio_api/mcp/http/
 if __name__ == "__main__":
     demo.launch(
         server_name="0.0.0.0",
         server_port=7860,
         share=False,
         show_error=True,
-        mcp_server=True,  # MCP server を有効化
+        mcp_server=True,  # 🚀 Streamable HTTP Transport for MCP を有効化！
         inbrowser=False
     )