@gradio/core 0.22.0 → 0.23.0

package/CHANGELOG.md

@@ -1,5 +1,36 @@
 # @gradio/core
 
+## 0.23.0
+
+### Features
+
+- [#11578](https://github.com/gradio-app/gradio/pull/11578) [`872798a`](https://github.com/gradio-app/gradio/commit/872798a780dd81c834a44b05277f6c9ebe09de8b) - Add an `api_description` parameter for API and MCP server.  Thanks @abidlabs!
+- [#11543](https://github.com/gradio-app/gradio/pull/11543) [`ac95ac0`](https://github.com/gradio-app/gradio/commit/ac95ac0d8c2e65d1632376e632fb7d16131334b6) - Connection handling messaging.  Thanks @aliabid94!
+- [#11508](https://github.com/gradio-app/gradio/pull/11508) [`f5a6fa8`](https://github.com/gradio-app/gradio/commit/f5a6fa8c52bcb8f508e10ea54a3427f3dab8e3f8) - Handle uploading files in mcp server automatically.  Thanks @freddyaboulton!
+- [#11515](https://github.com/gradio-app/gradio/pull/11515) [`2c24ca7`](https://github.com/gradio-app/gradio/commit/2c24ca709396291a344d981c19ed1655028b5d64) - Making it easier for MCP developers call APIs with user credentials.  Thanks @freddyaboulton!
+- [#11584](https://github.com/gradio-app/gradio/pull/11584) [`78428cb`](https://github.com/gradio-app/gradio/commit/78428cb29bf6dc66d583b7cf93dd404aef737e75) - Fix reload mode.  Thanks @aliabid94!
+
+### Fixes
+
+- [#11590](https://github.com/gradio-app/gradio/pull/11590) [`33b6057`](https://github.com/gradio-app/gradio/commit/33b6057dc5cbdfdab15b1ee000b0f0b3d9f3fff6) - Add Gradio File Input keyword to gradio file inputs.  Thanks @freddyaboulton!
+
+### Dependency updates
+
+- @gradio/video@0.14.21
+- @gradio/client@1.15.6
+- @gradio/statustracker@0.10.15
+- @gradio/button@0.5.7
+- @gradio/upload@0.16.11
+- @gradio/checkbox@0.4.26
+- @gradio/image@0.22.13
+- @gradio/gallery@0.15.27
+- @gradio/plot@0.9.20
+- @gradio/textbox@0.10.17
+- @gradio/file@0.12.24
+- @gradio/code@0.14.11
+- @gradio/paramviewer@0.7.13
+- @gradio/column@0.2.1
+
 ## 0.22.0
 
 ### Features

package/dist/src/Blocks.svelte

@@ -35,6 +35,7 @@ export let api_prefix = "";
 export let max_file_size = void 0;
 export let initial_layout = void 0;
 export let css = null;
+let broken_connection = false;
 let {
   layout: _layout,
   targets,
@@ -203,11 +204,13 @@ export function add_new_message(title2, message, type) {
   messages = [new_message(title2, message, -1, type), ...messages];
 }
 let _error_id = -1;
-let user_left_page = false;
 const MESSAGE_QUOTE_RE = /^'([^]+)'$/;
 const DUPLICATE_MESSAGE = $_("blocks.long_requests_queue");
 const MOBILE_QUEUE_WARNING = $_("blocks.connection_can_break");
-const MOBILE_RECONNECT_MESSAGE = $_("blocks.lost_connection");
+const LOST_CONNECTION_MESSAGE = "Connection to the server was lost. Attempting reconnection...";
+const CHANGED_CONNECTION_MESSAGE = "Reconnected to server, but the server has changed. You may need to <a href=''>refresh the page</a>.";
+const RECONNECTION_MESSAGE = "Connection re-established.";
+const SESSION_NOT_FOUND_MESSAGE = "Session not found - this is likely because the machine you were connected to has changed. <a href=''>Refresh the page</a> to continue.";
 const WAITING_FOR_INPUTS_MESSAGE = $_("blocks.waiting_for_inputs");
 const SHOW_DUPLICATE_MESSAGE_ON_ETA = 15;
 const SHOW_MOBILE_QUEUE_WARNING_ON_ETA = 10;
@@ -322,6 +325,42 @@ async function trigger_api_call(dep_index, trigger_id = null, event_data = null)
       }
     }
   }
+  async function reconnect() {
+    const connection_status = await app.reconnect();
+    if (connection_status === "broken") {
+      setTimeout(reconnect, 1e3);
+    } else if (connection_status === "changed") {
+      broken_connection = false;
+      messages = [
+        new_message(
+          "Changed Connection",
+          CHANGED_CONNECTION_MESSAGE,
+          -1,
+          "info",
+          3,
+          true
+        ),
+        ...messages.map(
+          (m) => m.message === LOST_CONNECTION_MESSAGE ? { ...m, visible: false } : m
+        )
+      ];
+    } else if (connection_status === "connected") {
+      broken_connection = false;
+      messages = [
+        new_message(
+          "Reconnected",
+          RECONNECTION_MESSAGE,
+          -1,
+          "success",
+          null,
+          true
+        ),
+        ...messages.map(
+          (m) => m.message === LOST_CONNECTION_MESSAGE ? { ...m, visible: false } : m
+        )
+      ];
+    }
+  }
   async function make_prediction(payload2, streaming = false) {
     if (allow_video_trim) {
       screen_recorder.markRemoveSegmentStart();
@@ -439,6 +478,34 @@ async function trigger_api_call(dep_index, trigger_id = null, event_data = null)
       }
     }
     function handle_status_update(message) {
+      if (message.broken && !broken_connection) {
+        messages = [
+          new_message(
+            "Broken Connection",
+            LOST_CONNECTION_MESSAGE,
+            -1,
+            "error",
+            null,
+            true
+          ),
+          ...messages
+        ];
+        broken_connection = true;
+        setTimeout(reconnect, 1e3);
+      }
+      if (message.session_not_found) {
+        messages = [
+          new_message(
+            "Session Not Found",
+            SESSION_NOT_FOUND_MESSAGE,
+            -1,
+            "error",
+            null,
+            true
+          ),
+          ...messages
+        ];
+      }
       const { fn_index, ...status } = message;
       if (status.stage === "streaming" && status.time_limit) {
         dep.inputs.forEach((id) => {
@@ -492,16 +559,7 @@ async function trigger_api_call(dep_index, trigger_id = null, event_data = null)
         });
         submit_map.delete(dep_index);
       }
-      if (status.broken && is_mobile_device && user_left_page) {
-        window.setTimeout(() => {
-          messages = [
-            new_message("Error", MOBILE_RECONNECT_MESSAGE, fn_index, "error"),
-            ...messages
-          ];
-        }, 0);
-        wait_then_trigger_api_call(dep.id, payload2.trigger_id, event_data);
-        user_left_page = false;
-      } else if (status.stage === "error") {
+      if (status.stage === "error" && !broken_connection && !message.session_not_found) {
         if (status.message) {
           const _message = status.message.replace(
             MESSAGE_QUOTE_RE,
@@ -672,11 +730,6 @@ function isCustomEvent(event) {
 }
 let is_screen_recording = writable(false);
 onMount(() => {
-  document.addEventListener("visibilitychange", function() {
-    if (document.visibilityState === "hidden") {
-      user_left_page = true;
-    }
-  });
   is_mobile_device = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(
     navigator.userAgent
   );

package/dist/src/api_docs/ApiDocs.svelte

@@ -65,16 +65,83 @@ get_js_info().then((js_api_info) => {
 const dispatch = createEventDispatcher();
 const mcp_server_url = `${root}gradio_api/mcp/sse`;
 let tools = [];
+let headers = [];
+let mcp_json_sse;
+let mcp_json_stdio;
+let file_data_present = false;
+const upload_file_mcp_server = {
+  command: "uvx",
+  args: [
+    "--from",
+    "gradio[mcp]",
+    "gradio",
+    "upload-mcp",
+    root,
+    "<UPLOAD_DIRECTORY>"
+  ]
+};
 async function fetchMcpTools() {
   try {
     const response = await fetch(`${root}gradio_api/mcp/schema`);
     const schema = await response.json();
+    file_data_present = schema.map((tool) => tool.meta?.file_data_present).some((present) => present);
     tools = schema.map((tool) => ({
       name: tool.name,
       description: tool.description || "",
       parameters: tool.inputSchema?.properties || {},
       expanded: false
     }));
+    headers = schema.map((tool) => tool.meta?.headers || []).flat();
+    if (headers.length > 0) {
+      mcp_json_sse = {
+        mcpServers: {
+          gradio: {
+            url: mcp_server_url,
+            headers: headers.reduce((accumulator, current_key) => {
+              accumulator[current_key] = "<YOUR_HEADER_VALUE>";
+              return accumulator;
+            }, {})
+          }
+        }
+      };
+      mcp_json_stdio = {
+        mcpServers: {
+          gradio: {
+            command: "npx",
+            args: [
+              "mcp-remote",
+              mcp_server_url,
+              "--transport",
+              "sse-only",
+              ...headers.map((header) => [
+                "--header",
+                `${header}: <YOUR_HEADER_VALUE>`
+              ]).flat()
+            ]
+          }
+        }
+      };
+    } else {
+      mcp_json_sse = {
+        mcpServers: {
+          gradio: {
+            url: mcp_server_url
+          }
+        }
+      };
+      mcp_json_stdio = {
+        mcpServers: {
+          gradio: {
+            command: "npx",
+            args: ["mcp-remote", mcp_server_url, "--transport", "sse-only"]
+          }
+        }
+      };
+      if (file_data_present) {
+        mcp_json_sse.mcpServers.upload_files_to_gradio = upload_file_mcp_server;
+        mcp_json_stdio.mcpServers.upload_files_to_gradio = upload_file_mcp_server;
+      }
+    }
   } catch (error) {
     console.error("Failed to fetch MCP tools:", error);
     tools = [];
@@ -180,7 +247,7 @@ onMount(() => {
 									<div class="mcp-url">
 										<label
 											><span class="status-indicator active">●</span>MCP Server
-											URL</label
+											URL (SSE)</label
 										>
 										<div class="textbox">
 											<input type="text" readonly value={mcp_server_url} />
@@ -239,45 +306,42 @@ onMount(() => {
 								</div>
 								<p>&nbsp;</p>
 
-								<strong>Integration</strong>: To add this MCP to clients that
+								<strong>SSE Transport</strong>: To add this MCP to clients that
 								support SSE (e.g. Cursor, Windsurf, Cline), simply add the
-								following configuration to your MCP config:
+								following configuration to your MCP config.
 								<p>&nbsp;</p>
 								<Block>
 									<code>
 										<div class="copy">
 											<CopyButton
-												code={JSON.stringify(
-													{
-														mcpServers: {
-															gradio: {
-																url: mcp_server_url
-															}
-														}
-													},
-													null,
-													2
-												)}
+												code={JSON.stringify(mcp_json_sse, null, 2)}
 											/>
 										</div>
 										<div>
-											<pre>{JSON.stringify(
-													{
-														mcpServers: {
-															gradio: {
-																url: mcp_server_url
-															}
-														}
-													},
-													null,
-													2
-												)}</pre>
+											<pre>{JSON.stringify(mcp_json_sse, null, 2)}</pre>
 										</div>
 									</code>
 								</Block>
-								<p>&nbsp;</p>
-								<em>Experimental stdio support</em>: For clients that only
-								support stdio, first
+								{#if file_data_present}
+									<p>&nbsp;</p>
+									<em>Note about files</em>: Gradio MCP servers that have files
+									as inputs need the files as URLs, so the
+									<code>upload_files_to_gradio</code>
+									tool is included for your convenience. This tool can upload files
+									located in the specified <code>UPLOAD_DIRECTORY</code>
+									argument (an absolute path in your local machine) or any of its
+									subdirectories to the Gradio app. You can omit this tool if you
+									are fine manually uploading files yourself and providing the URLs.
+									Before using this tool, you must have
+									<a
+										href="https://docs.astral.sh/uv/getting-started/installation/"
+										target="_blank">uv installed</a
+									>.
+									<p>&nbsp;</p>
+								{/if}
+
+								<strong>STDIO Transport</strong>: For clients that only support
+								stdio (e.g. Claude Desktop), first
 								<a href="https://nodejs.org/en/download/" target="_blank"
 									>install Node.js</a
 								>. Then, you can use the following command:
@@ -286,43 +350,11 @@ onMount(() => {
 									<code>
 										<div class="copy">
 											<CopyButton
-												code={JSON.stringify(
-													{
-														mcpServers: {
-															gradio: {
-																command: "npx",
-																args: [
-																	"mcp-remote",
-																	mcp_server_url,
-																	"--transport",
-																	"sse-only"
-																]
-															}
-														}
-													},
-													null,
-													2
-												)}
+												code={JSON.stringify(mcp_json_stdio, null, 2)}
 											/>
 										</div>
 										<div>
-											<pre>{JSON.stringify(
-													{
-														mcpServers: {
-															gradio: {
-																command: "npx",
-																args: [
-																	"mcp-remote",
-																	mcp_server_url,
-																	"--transport",
-																	"sse-only"
-																]
-															}
-														}
-													},
-													null,
-													2
-												)}</pre>
+											<pre>{JSON.stringify(mcp_json_stdio, null, 2)}</pre>
 										</div>
 									</code>
 								</Block>
@@ -398,21 +430,22 @@ onMount(() => {
 				{/if}
 
 				{#if current_language !== "mcp"}
-					{#each dependencies as dependency, dependency_index}
+					{#each dependencies as dependency}
 						{#if dependency.show_api && info.named_endpoints["/" + dependency.api_name]}
 							<div class="endpoint-container">
 								<CodeSnippet
-									named={true}
 									endpoint_parameters={info.named_endpoints[
 										"/" + dependency.api_name
 									].parameters}
 									{dependency}
-									{dependency_index}
 									{current_language}
 									{root}
 									{space_id}
 									{username}
 									api_prefix={app.api_prefix}
+									api_description={info.named_endpoints[
+										"/" + dependency.api_name
+									].description}
 								/>
 
 								<ParametersSnippet

package/dist/src/api_docs/CodeSnippet.svelte

@@ -3,14 +3,13 @@ import { represent_value, is_potentially_nested_file_data } from "./utils";
 import { Block } from "@gradio/atoms";
 import EndpointDetail from "./EndpointDetail.svelte";
 export let dependency;
-export let dependency_index;
 export let root;
 export let api_prefix;
 export let space_id;
 export let endpoint_parameters;
-export let named;
 export let username;
 export let current_language;
+export let api_description = null;
 let python_code;
 let js_code;
 let bash_post_code;
@@ -29,11 +28,10 @@ $:
 </script>
 
 <div class="container">
-	{#if named}
-		<EndpointDetail {named} api_name={dependency.api_name} />
-	{:else}
-		<EndpointDetail {named} fn_index={dependency_index} />
-	{/if}
+	<EndpointDetail
+		api_name={dependency.api_name}
+		description={api_description}
+	/>
 	{#if current_language === "python"}
 		<Block>
 			<code>
@@ -86,9 +84,9 @@ const example{component} = await response_{i}.blob();
 const client = await Client.connect(<span class="token string"
 							>"{space_id || root}"</span
 						>{#if username !== null}, &lbrace;auth: ["{username}", **password**]&rbrace;{/if});
-const result = await client.predict({#if named}<span class="api-name"
-								>"/{dependency.api_name}"</span
-							>{:else}{dependency_index}{/if}, &lbrace; <!--
+const result = await client.predict(<span class="api-name"
+							>"/{dependency.api_name}"</span
+						>, &lbrace; <!--
 -->{#each endpoint_parameters as { label, parameter_name, type, python_type, component, example_input, serializer }, i}<!--
 		-->{#if blob_components.includes(component)}<!--
 	-->

package/dist/src/api_docs/CodeSnippet.svelte.d.ts

@@ -3,14 +3,13 @@ import type { Dependency } from "../types";
 declare const __propDef: {
     props: {
         dependency: Dependency;
-        dependency_index: number;
         root: string;
         api_prefix: string;
         space_id: string | null;
         endpoint_parameters: any;
-        named: boolean;
         username: string | null;
         current_language: "python" | "javascript" | "bash";
+        api_description?: (string | null) | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/dist/src/api_docs/EndpointDetail.svelte

@@ -1,19 +1,12 @@
 <script>export let api_name = null;
-export let fn_index = null;
-export let named;
+export let description = null;
 </script>
 
-{#if named}
-	<h3>
-		api_name:
-		<span class="post">{"/" + api_name}</span>
-	</h3>
-{:else}
-	<h3>
-		fn_index:
-		<span class="post">{fn_index}</span>
-	</h3>
-{/if}
+<h3>
+	API name:
+	<span class="post">{"/" + api_name}</span>
+	<span class="desc">{description}</span>
+</h3>
 
 <style>
 	h3 {
@@ -33,4 +26,10 @@ export let named;
 		color: var(--color-accent);
 		font-weight: var(--weight-semibold);
 	}
+
+	.desc {
+		color: var(--body-text-color-subdued);
+		font-size: var(--text-lg);
+		margin-top: var(--size-1);
+	}
 </style>

package/dist/src/api_docs/EndpointDetail.svelte.d.ts

@@ -2,8 +2,7 @@ import { SvelteComponent } from "svelte";
 declare const __propDef: {
     props: {
         api_name?: (string | null) | undefined;
-        fn_index?: (number | null) | undefined;
-        named: boolean;
+        description?: (string | null) | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/dist/src/init.js

@@ -48,8 +48,12 @@ export function create_components(initial_layout) {
         if (instance_map) {
             // re-render in reload mode
             components.forEach((c) => {
-                if (c.props.value == null && c.id in instance_map) {
-                    c.props.value = instance_map[c.id].props.value;
+                if (c.props.value == null && c.key) {
+                    // If the component has a key, we preserve its value by finding a matching instance with the same key
+                    const matching_instance = Object.values(instance_map).find((instance) => instance.key === c.key);
+                    if (matching_instance) {
+                        c.props.value = matching_instance.props.value;
+                    }
                 }
             });
         }

package/package.json

@@ -1,67 +1,67 @@
 {
   "name": "@gradio/core",
-  "version": "0.22.0",
+  "version": "0.23.0",
   "type": "module",
   "devDependencies": {
-    "@gradio/accordion": "^0.5.19",
     "@gradio/atoms": "^0.16.3",
-    "@gradio/audio": "^0.17.20",
+    "@gradio/audio": "^0.17.21",
+    "@gradio/accordion": "^0.5.20",
+    "@gradio/annotatedimage": "^0.9.25",
     "@gradio/box": "^0.2.21",
-    "@gradio/annotatedimage": "^0.9.24",
-    "@gradio/button": "^0.5.6",
-    "@gradio/chatbot": "^0.26.17",
-    "@gradio/checkboxgroup": "^0.6.24",
-    "@gradio/checkbox": "^0.4.25",
-    "@gradio/code": "^0.14.10",
-    "@gradio/client": "^1.15.5",
-    "@gradio/colorpicker": "^0.4.24",
+    "@gradio/button": "^0.5.7",
+    "@gradio/chatbot": "^0.26.18",
+    "@gradio/checkbox": "^0.4.26",
+    "@gradio/checkboxgroup": "^0.6.25",
+    "@gradio/client": "^1.15.6",
+    "@gradio/code": "^0.14.11",
+    "@gradio/colorpicker": "^0.4.25",
+    "@gradio/dataset": "^0.4.27",
+    "@gradio/datetime": "^0.3.18",
     "@gradio/column": "^0.2.1",
-    "@gradio/dataframe": "^0.18.2",
-    "@gradio/dataset": "^0.4.26",
-    "@gradio/datetime": "^0.3.17",
-    "@gradio/downloadbutton": "^0.4.6",
-    "@gradio/dropdown": "^0.9.24",
-    "@gradio/fallback": "^0.4.24",
-    "@gradio/fileexplorer": "^0.5.34",
+    "@gradio/dataframe": "^0.18.3",
+    "@gradio/downloadbutton": "^0.4.7",
+    "@gradio/dropdown": "^0.9.25",
+    "@gradio/fallback": "^0.4.25",
+    "@gradio/file": "^0.12.24",
+    "@gradio/fileexplorer": "^0.5.35",
     "@gradio/form": "^0.2.21",
-    "@gradio/gallery": "^0.15.26",
-    "@gradio/file": "^0.12.23",
     "@gradio/group": "^0.2.0",
-    "@gradio/highlightedtext": "^0.9.7",
+    "@gradio/gallery": "^0.15.27",
+    "@gradio/highlightedtext": "^0.9.8",
+    "@gradio/html": "^0.6.17",
     "@gradio/icons": "^0.12.0",
-    "@gradio/image": "^0.22.12",
-    "@gradio/html": "^0.6.16",
-    "@gradio/imageeditor": "^0.16.0",
-    "@gradio/imageslider": "^0.2.8",
-    "@gradio/label": "^0.5.16",
+    "@gradio/image": "^0.22.13",
+    "@gradio/imageeditor": "^0.16.1",
+    "@gradio/imageslider": "^0.2.9",
+    "@gradio/json": "^0.5.27",
     "@gradio/browserstate": "^0.3.2",
-    "@gradio/json": "^0.5.26",
-    "@gradio/markdown": "^0.13.17",
-    "@gradio/model3d": "^0.14.19",
-    "@gradio/nativeplot": "^0.7.1",
-    "@gradio/multimodaltextbox": "^0.10.12",
-    "@gradio/number": "^0.6.1",
-    "@gradio/paramviewer": "^0.7.12",
-    "@gradio/plot": "^0.9.19",
-    "@gradio/radio": "^0.7.7",
+    "@gradio/model3d": "^0.14.20",
+    "@gradio/markdown": "^0.13.18",
+    "@gradio/label": "^0.5.17",
+    "@gradio/nativeplot": "^0.7.2",
+    "@gradio/number": "^0.6.2",
+    "@gradio/paramviewer": "^0.7.13",
+    "@gradio/multimodaltextbox": "^0.10.13",
+    "@gradio/plot": "^0.9.20",
+    "@gradio/radio": "^0.7.8",
     "@gradio/row": "^0.2.1",
-    "@gradio/sidebar": "^0.1.17",
-    "@gradio/simpledropdown": "^0.3.24",
-    "@gradio/simpleimage": "^0.8.34",
-    "@gradio/simpletextbox": "^0.3.25",
-    "@gradio/sketchbox": "^0.6.12",
+    "@gradio/sidebar": "^0.1.18",
+    "@gradio/simpletextbox": "^0.3.26",
+    "@gradio/simpleimage": "^0.8.35",
+    "@gradio/sketchbox": "^0.6.13",
+    "@gradio/slider": "^0.6.14",
+    "@gradio/simpledropdown": "^0.3.25",
     "@gradio/state": "^0.1.2",
-    "@gradio/slider": "^0.6.13",
-    "@gradio/statustracker": "^0.10.14",
-    "@gradio/tabitem": "^0.5.0",
+    "@gradio/statustracker": "^0.10.15",
     "@gradio/tabs": "^0.4.5",
-    "@gradio/textbox": "^0.10.16",
+    "@gradio/textbox": "^0.10.17",
+    "@gradio/tabitem": "^0.5.0",
     "@gradio/theme": "^0.4.0",
     "@gradio/timer": "^0.4.5",
-    "@gradio/upload": "^0.16.10",
-    "@gradio/uploadbutton": "^0.9.6",
+    "@gradio/upload": "^0.16.11",
+    "@gradio/uploadbutton": "^0.9.7",
     "@gradio/utils": "^0.10.2",
-    "@gradio/video": "^0.14.20",
+    "@gradio/video": "^0.14.21",
     "@gradio/wasm": "^0.18.1"
   },
   "msw": {

package/src/Blocks.svelte

@@ -56,6 +56,7 @@
 	export let max_file_size: number | undefined = undefined;
 	export let initial_layout: ComponentMeta | undefined = undefined;
 	export let css: string | null | undefined = null;
+	let broken_connection = false;
 
 	let {
 		layout: _layout,
@@ -275,13 +276,17 @@
 
 	let _error_id = -1;
 
-	let user_left_page = false;
-
 	const MESSAGE_QUOTE_RE = /^'([^]+)'$/;
 
 	const DUPLICATE_MESSAGE = $_("blocks.long_requests_queue");
 	const MOBILE_QUEUE_WARNING = $_("blocks.connection_can_break");
-	const MOBILE_RECONNECT_MESSAGE = $_("blocks.lost_connection");
+	const LOST_CONNECTION_MESSAGE =
+		"Connection to the server was lost. Attempting reconnection...";
+	const CHANGED_CONNECTION_MESSAGE =
+		"Reconnected to server, but the server has changed. You may need to <a href=''>refresh the page</a>.";
+	const RECONNECTION_MESSAGE = "Connection re-established.";
+	const SESSION_NOT_FOUND_MESSAGE =
+		"Session not found - this is likely because the machine you were connected to has changed. <a href=''>Refresh the page</a> to continue.";
 	const WAITING_FOR_INPUTS_MESSAGE = $_("blocks.waiting_for_inputs");
 	const SHOW_DUPLICATE_MESSAGE_ON_ETA = 15;
 	const SHOW_MOBILE_QUEUE_WARNING_ON_ETA = 10;
@@ -424,6 +429,43 @@
 			}
 		}
 
+		async function reconnect(): Promise<void> {
+			const connection_status = await app.reconnect();
+			if (connection_status === "broken") {
+				setTimeout(reconnect, 1000);
+			} else if (connection_status === "changed") {
+				broken_connection = false;
+				messages = [
+					new_message(
+						"Changed Connection",
+						CHANGED_CONNECTION_MESSAGE,
+						-1,
+						"info",
+						3,
+						true
+					),
+					...messages.map((m) =>
+						m.message === LOST_CONNECTION_MESSAGE ? { ...m, visible: false } : m
+					)
+				];
+			} else if (connection_status === "connected") {
+				broken_connection = false;
+				messages = [
+					new_message(
+						"Reconnected",
+						RECONNECTION_MESSAGE,
+						-1,
+						"success",
+						null,
+						true
+					),
+					...messages.map((m) =>
+						m.message === LOST_CONNECTION_MESSAGE ? { ...m, visible: false } : m
+					)
+				];
+			}
+		}
+
 		async function make_prediction(
 			payload: Payload,
 			streaming = false
@@ -567,6 +609,35 @@
 
 			/* eslint-disable complexity */
 			function handle_status_update(message: StatusMessage): void {
+				if (message.broken && !broken_connection) {
+					messages = [
+						new_message(
+							"Broken Connection",
+							LOST_CONNECTION_MESSAGE,
+							-1,
+							"error",
+							null,
+							true
+						),
+						...messages
+					];
+
+					broken_connection = true;
+					setTimeout(reconnect, 1000);
+				}
+				if (message.session_not_found) {
+					messages = [
+						new_message(
+							"Session Not Found",
+							SESSION_NOT_FOUND_MESSAGE,
+							-1,
+							"error",
+							null,
+							true
+						),
+						...messages
+					];
+				}
 				const { fn_index, ...status } = message;
 				if (status.stage === "streaming" && status.time_limit) {
 					dep.inputs.forEach((id) => {
@@ -636,16 +707,11 @@
 					});
 					submit_map.delete(dep_index);
 				}
-				if (status.broken && is_mobile_device && user_left_page) {
-					window.setTimeout(() => {
-						messages = [
-							new_message("Error", MOBILE_RECONNECT_MESSAGE, fn_index, "error"),
-							...messages
-						];
-					}, 0);
-					wait_then_trigger_api_call(dep.id, payload.trigger_id, event_data);
-					user_left_page = false;
-				} else if (status.stage === "error") {
+				if (
+					status.stage === "error" &&
+					!broken_connection &&
+					!message.session_not_found
+				) {
 					if (status.message) {
 						const _message = status.message.replace(
 							MESSAGE_QUOTE_RE,
@@ -851,12 +917,6 @@
 	let is_screen_recording = writable(false);
 
 	onMount(() => {
-		document.addEventListener("visibilitychange", function () {
-			if (document.visibilityState === "hidden") {
-				user_left_page = true;
-			}
-		});
-
 		is_mobile_device =
 			/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(
 				navigator.userAgent

package/src/api_docs/ApiDocs.svelte

@@ -112,11 +112,30 @@
 	}
 
 	let tools: Tool[] = [];
+	let headers: string[] = [];
+	let mcp_json_sse: any;
+	let mcp_json_stdio: any;
+	let file_data_present = false;
+
+	const upload_file_mcp_server = {
+		command: "uvx",
+		args: [
+			"--from",
+			"gradio[mcp]",
+			"gradio",
+			"upload-mcp",
+			root,
+			"<UPLOAD_DIRECTORY>"
+		]
+	};
 
 	async function fetchMcpTools() {
 		try {
 			const response = await fetch(`${root}gradio_api/mcp/schema`);
 			const schema = await response.json();
+			file_data_present = schema
+				.map((tool: any) => tool.meta?.file_data_present)
+				.some((present: boolean) => present);
 
 			tools = schema.map((tool: any) => ({
 				name: tool.name,
@@ -124,6 +143,62 @@
 				parameters: tool.inputSchema?.properties || {},
 				expanded: false
 			}));
+			headers = schema.map((tool: any) => tool.meta?.headers || []).flat();
+			if (headers.length > 0) {
+				mcp_json_sse = {
+					mcpServers: {
+						gradio: {
+							url: mcp_server_url,
+							headers: headers.reduce((accumulator, current_key) => {
+								// @ts-ignore
+								accumulator[current_key] = "<YOUR_HEADER_VALUE>";
+								return accumulator;
+							}, {})
+						}
+					}
+				};
+				mcp_json_stdio = {
+					mcpServers: {
+						gradio: {
+							command: "npx",
+							args: [
+								"mcp-remote",
+								mcp_server_url,
+								"--transport",
+								"sse-only",
+								...headers
+									.map((header) => [
+										"--header",
+										`${header}: <YOUR_HEADER_VALUE>`
+									])
+									.flat()
+							]
+						}
+					}
+				};
+			} else {
+				mcp_json_sse = {
+					mcpServers: {
+						gradio: {
+							url: mcp_server_url
+						}
+					}
+				};
+				mcp_json_stdio = {
+					mcpServers: {
+						gradio: {
+							command: "npx",
+							args: ["mcp-remote", mcp_server_url, "--transport", "sse-only"]
+						}
+					}
+				};
+				if (file_data_present) {
+					mcp_json_sse.mcpServers.upload_files_to_gradio =
+						upload_file_mcp_server;
+					mcp_json_stdio.mcpServers.upload_files_to_gradio =
+						upload_file_mcp_server;
+				}
+			}
 		} catch (error) {
 			console.error("Failed to fetch MCP tools:", error);
 			tools = [];
@@ -235,7 +310,7 @@
 									<div class="mcp-url">
 										<label
 											><span class="status-indicator active">●</span>MCP Server
-											URL</label
+											URL (SSE)</label
 										>
 										<div class="textbox">
 											<input type="text" readonly value={mcp_server_url} />
@@ -294,45 +369,42 @@
 								</div>
 								<p>&nbsp;</p>
 
-								<strong>Integration</strong>: To add this MCP to clients that
+								<strong>SSE Transport</strong>: To add this MCP to clients that
 								support SSE (e.g. Cursor, Windsurf, Cline), simply add the
-								following configuration to your MCP config:
+								following configuration to your MCP config.
 								<p>&nbsp;</p>
 								<Block>
 									<code>
 										<div class="copy">
 											<CopyButton
-												code={JSON.stringify(
-													{
-														mcpServers: {
-															gradio: {
-																url: mcp_server_url
-															}
-														}
-													},
-													null,
-													2
-												)}
+												code={JSON.stringify(mcp_json_sse, null, 2)}
 											/>
 										</div>
 										<div>
-											<pre>{JSON.stringify(
-													{
-														mcpServers: {
-															gradio: {
-																url: mcp_server_url
-															}
-														}
-													},
-													null,
-													2
-												)}</pre>
+											<pre>{JSON.stringify(mcp_json_sse, null, 2)}</pre>
 										</div>
 									</code>
 								</Block>
-								<p>&nbsp;</p>
-								<em>Experimental stdio support</em>: For clients that only
-								support stdio, first
+								{#if file_data_present}
+									<p>&nbsp;</p>
+									<em>Note about files</em>: Gradio MCP servers that have files
+									as inputs need the files as URLs, so the
+									<code>upload_files_to_gradio</code>
+									tool is included for your convenience. This tool can upload files
+									located in the specified <code>UPLOAD_DIRECTORY</code>
+									argument (an absolute path in your local machine) or any of its
+									subdirectories to the Gradio app. You can omit this tool if you
+									are fine manually uploading files yourself and providing the URLs.
+									Before using this tool, you must have
+									<a
+										href="https://docs.astral.sh/uv/getting-started/installation/"
+										target="_blank">uv installed</a
+									>.
+									<p>&nbsp;</p>
+								{/if}
+
+								<strong>STDIO Transport</strong>: For clients that only support
+								stdio (e.g. Claude Desktop), first
 								<a href="https://nodejs.org/en/download/" target="_blank"
 									>install Node.js</a
 								>. Then, you can use the following command:
@@ -341,43 +413,11 @@
 									<code>
 										<div class="copy">
 											<CopyButton
-												code={JSON.stringify(
-													{
-														mcpServers: {
-															gradio: {
-																command: "npx",
-																args: [
-																	"mcp-remote",
-																	mcp_server_url,
-																	"--transport",
-																	"sse-only"
-																]
-															}
-														}
-													},
-													null,
-													2
-												)}
+												code={JSON.stringify(mcp_json_stdio, null, 2)}
 											/>
 										</div>
 										<div>
-											<pre>{JSON.stringify(
-													{
-														mcpServers: {
-															gradio: {
-																command: "npx",
-																args: [
-																	"mcp-remote",
-																	mcp_server_url,
-																	"--transport",
-																	"sse-only"
-																]
-															}
-														}
-													},
-													null,
-													2
-												)}</pre>
+											<pre>{JSON.stringify(mcp_json_stdio, null, 2)}</pre>
 										</div>
 									</code>
 								</Block>
@@ -453,21 +493,22 @@
 				{/if}
 
 				{#if current_language !== "mcp"}
-					{#each dependencies as dependency, dependency_index}
+					{#each dependencies as dependency}
 						{#if dependency.show_api && info.named_endpoints["/" + dependency.api_name]}
 							<div class="endpoint-container">
 								<CodeSnippet
-									named={true}
 									endpoint_parameters={info.named_endpoints[
 										"/" + dependency.api_name
 									].parameters}
 									{dependency}
-									{dependency_index}
 									{current_language}
 									{root}
 									{space_id}
 									{username}
 									api_prefix={app.api_prefix}
+									api_description={info.named_endpoints[
+										"/" + dependency.api_name
+									].description}
 								/>
 
 								<ParametersSnippet

package/src/api_docs/CodeSnippet.svelte

@@ -15,14 +15,13 @@
 	}
 
 	export let dependency: Dependency;
-	export let dependency_index: number;
 	export let root: string;
 	export let api_prefix: string;
 	export let space_id: string | null;
 	export let endpoint_parameters: any;
-	export let named: boolean;
 	export let username: string | null;
 	export let current_language: "python" | "javascript" | "bash";
+	export let api_description: string | null = null;
 
 	let python_code: HTMLElement;
 	let js_code: HTMLElement;
@@ -42,11 +41,10 @@
 </script>
 
 <div class="container">
-	{#if named}
-		<EndpointDetail {named} api_name={dependency.api_name} />
-	{:else}
-		<EndpointDetail {named} fn_index={dependency_index} />
-	{/if}
+	<EndpointDetail
+		api_name={dependency.api_name}
+		description={api_description}
+	/>
 	{#if current_language === "python"}
 		<Block>
 			<code>
@@ -99,9 +97,9 @@ const example{component} = await response_{i}.blob();
 const client = await Client.connect(<span class="token string"
 							>"{space_id || root}"</span
 						>{#if username !== null}, &lbrace;auth: ["{username}", **password**]&rbrace;{/if});
-const result = await client.predict({#if named}<span class="api-name"
-								>"/{dependency.api_name}"</span
-							>{:else}{dependency_index}{/if}, &lbrace; <!--
+const result = await client.predict(<span class="api-name"
+							>"/{dependency.api_name}"</span
+						>, &lbrace; <!--
 -->{#each endpoint_parameters as { label, parameter_name, type, python_type, component, example_input, serializer }, i}<!--
 		-->{#if blob_components.includes(component)}<!--
 	-->

package/src/api_docs/EndpointDetail.svelte

@@ -1,20 +1,13 @@
 <script lang="ts">
 	export let api_name: string | null = null;
-	export let fn_index: number | null = null;
-	export let named: boolean;
+	export let description: string | null = null;
 </script>
 
-{#if named}
-	<h3>
-		api_name:
-		<span class="post">{"/" + api_name}</span>
-	</h3>
-{:else}
-	<h3>
-		fn_index:
-		<span class="post">{fn_index}</span>
-	</h3>
-{/if}
+<h3>
+	API name:
+	<span class="post">{"/" + api_name}</span>
+	<span class="desc">{description}</span>
+</h3>
 
 <style>
 	h3 {
@@ -34,4 +27,10 @@
 		color: var(--color-accent);
 		font-weight: var(--weight-semibold);
 	}
+
+	.desc {
+		color: var(--body-text-color-subdued);
+		font-size: var(--text-lg);
+		margin-top: var(--size-1);
+	}
 </style>

package/src/init.ts

@@ -114,8 +114,14 @@ export function create_components(initial_layout: ComponentMeta | undefined): {
 		if (instance_map) {
 			// re-render in reload mode
 			components.forEach((c) => {
-				if (c.props.value == null && c.id in instance_map) {
-					c.props.value = instance_map[c.id].props.value;
+				if (c.props.value == null && c.key) {
+					// If the component has a key, we preserve its value by finding a matching instance with the same key
+					const matching_instance = Object.values(instance_map).find(
+						(instance) => instance.key === c.key
+					);
+					if (matching_instance) {
+						c.props.value = matching_instance.props.value;
+					}
 				}
 			});
 		}