@gradio/core 0.15.1 → 0.16.0

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @gradio/core
 
+## 0.16.0
+
+### Features
+
+- [#10984](https://github.com/gradio-app/gradio/pull/10984) [`8dab577`](https://github.com/gradio-app/gradio/commit/8dab5771c7d952c76f325681dbf364119c91b0b1) - Let Gradio apps also be MCP Servers.  Thanks @abidlabs!
+
 ## 0.15.1
 
 ### Fixes

package/dist/src/api_docs/ApiBanner.svelte

@@ -4,6 +4,7 @@ import Clear from "./img/clear.svelte";
 import { BaseButton } from "@gradio/button";
 export let root;
 export let api_count;
+export let current_language = "python";
 const dispatch = createEventDispatcher();
 </script>
 
@@ -16,17 +17,20 @@ const dispatch = createEventDispatcher();
 		</div>
 	</div>
 	<span class="counts">
-		<BaseButton
-			size="sm"
-			variant="secondary"
-			elem_id="start-api-recorder"
-			on:click={() => dispatch("close", { api_recorder_visible: true })}
-		>
-			<div class="loading-dot self-baseline"></div>
-			<p class="self-baseline btn-text">API Recorder</p>
-		</BaseButton>
+		{#if current_language !== "mcp"}
+			<BaseButton
+				size="sm"
+				variant="secondary"
+				elem_id="start-api-recorder"
+				on:click={() => dispatch("close", { api_recorder_visible: true })}
+			>
+				<div class="loading-dot self-baseline"></div>
+				<p class="self-baseline btn-text">API Recorder</p>
+			</BaseButton>
+		{/if}
 		<p>
-			<span class="url">{api_count}</span> API endpoint{#if api_count > 1}s{/if}<br
+			<span class="url">{api_count}</span>
+			{#if current_language !== "mcp"}API endpoint{:else}MCP Tool{/if}{#if api_count > 1}s{/if}<br
 			/>
 		</p>
 	</span>

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

@@ -3,6 +3,7 @@ declare const __propDef: {
     props: {
         root: string;
         api_count: number;
+        current_language?: ("python" | "javascript" | "bash" | "mcp") | undefined;
     };
     events: {
         close: CustomEvent<any>;

package/dist/src/api_docs/ApiDocs.svelte

@@ -6,10 +6,13 @@ import ParametersSnippet from "./ParametersSnippet.svelte";
 import InstallSnippet from "./InstallSnippet.svelte";
 import CodeSnippet from "./CodeSnippet.svelte";
 import RecordingSnippet from "./RecordingSnippet.svelte";
+import CopyButton from "./CopyButton.svelte";
+import { Block } from "@gradio/atoms";
 import python from "./img/python.svg";
 import javascript from "./img/javascript.svg";
 import bash from "./img/bash.svg";
 import ResponseSnippet from "./ResponseSnippet.svelte";
+import mcp from "./img/mcp.svg";
 export let dependencies;
 export let root;
 export let app;
@@ -32,11 +35,13 @@ if (!root.endsWith("/")) {
 export let api_calls = [];
 let current_language = "python";
 const langs = [
-  ["python", python],
-  ["javascript", javascript],
-  ["bash", bash]
+  ["python", "Python", python],
+  ["javascript", "JavaScript", javascript],
+  ["bash", "cURL", bash],
+  ["mcp", "MCP", mcp]
 ];
 let is_running = false;
+let mcp_server_active = false;
 async function get_info() {
   let response = await fetch(
     root.replace(/\/$/, "") + app.api_prefix + "/info"
@@ -57,11 +62,36 @@ get_js_info().then((js_api_info) => {
   js_info = js_api_info;
 });
 const dispatch = createEventDispatcher();
+const mcp_server_url = `${root}gradio_api/mcp/sse`;
+let tools = [];
+async function fetchMcpTools() {
+  try {
+    const response = await fetch(`${root}gradio_api/mcp/schema`);
+    const schema = await response.json();
+    tools = Object.entries(schema).map(([name, tool]) => ({
+      name: `${name}`,
+      description: tool.description || "",
+      parameters: tool.properties || {},
+      expanded: false
+    }));
+  } catch (error) {
+    console.error("Failed to fetch MCP tools:", error);
+    tools = [];
+  }
+}
 onMount(() => {
   document.body.style.overflow = "hidden";
   if ("parentIFrame" in window) {
     window.parentIFrame?.scrollTo(0, 0);
   }
+  fetch(mcp_server_url).then((response) => {
+    mcp_server_active = response.ok;
+    if (mcp_server_active) {
+      fetchMcpTools();
+    }
+  }).catch(() => {
+    mcp_server_active = false;
+  });
   return () => {
     document.body.style.overflow = "auto";
   };
@@ -71,26 +101,30 @@ onMount(() => {
 {#if info}
 	{#if api_count}
 		<div class="banner-wrap">
-			<ApiBanner on:close root={space_id || root} {api_count} />
+			<ApiBanner
+				on:close
+				root={space_id || root}
+				{api_count}
+				{current_language}
+			/>
 		</div>
 
 		<div class="docs-wrap">
 			<div class="client-doc">
 				<p style="font-size: var(--text-lg);">
-					Choose a language to see the code snippets for interacting with the
-					API.
+					Choose one of the following ways to interact with the API.
 				</p>
 			</div>
 			<div class="endpoint">
 				<div class="snippets">
-					{#each langs as [language, img]}
+					{#each langs as [language, display_name, img]}
 						<li
 							class="snippet
 						{current_language === language ? 'current-lang' : 'inactive-lang'}"
 							on:click={() => (current_language = language)}
 						>
 							<img src={img} alt="" />
-							{language}
+							{display_name}
 						</li>
 					{/each}
 				</div>
@@ -139,100 +173,256 @@ onMount(() => {
 								href={current_language == "python" ? py_docs : js_docs}
 								target="_blank">docs</a
 							>) if you don't already have it installed.
+						{:else if current_language == "mcp"}
+							{#if mcp_server_active}
+								<Block>
+									<div class="mcp-url">
+										<label
+											><span class="status-indicator active">●</span>MCP Server
+											URL</label
+										>
+										<div class="textbox">
+											<input type="text" readonly value={mcp_server_url} />
+											<CopyButton code={mcp_server_url} />
+										</div>
+									</div>
+								</Block>
+								<p>&nbsp;</p>
+								<strong>Available MCP Tools</strong>
+								<div class="mcp-tools">
+									{#each tools as tool}
+										<div class="tool-item">
+											<button
+												class="tool-header"
+												on:click={() => (tool.expanded = !tool.expanded)}
+											>
+												<span
+													><span class="tool-name">{tool.name}</span> &nbsp;
+													<span class="tool-description"
+														>{tool.description
+															? tool.description
+															: "⚠︎ No description provided in function docstring"}</span
+													></span
+												>
+												<span class="tool-arrow"
+													>{tool.expanded ? "▼" : "▶"}</span
+												>
+											</button>
+											{#if tool.expanded}
+												<div class="tool-content">
+													{#if Object.keys(tool.parameters).length > 0}
+														<div class="tool-parameters">
+															{#if Object.keys(tool.parameters).length > 0}
+																{#each Object.entries(tool.parameters) as [name, param]}
+																	<div class="parameter">
+																		<code>{name}</code>
+																		<span class="parameter-type"
+																			>({param.type})</span
+																		>
+																		<p class="parameter-description">
+																			{param.description
+																				? param.description
+																				: "⚠︎ No description for this parameter in function docstring"}
+																		</p>
+																	</div>
+																{/each}
+															{:else}
+																<p>No parameters</p>
+															{/if}
+														</div>
+													{/if}
+												</div>
+											{/if}
+										</div>
+									{/each}
+								</div>
+								<p>&nbsp;</p>
+
+								<strong>Integration</strong>: To add this MCP to clients that
+								support SSE (e.g. Cursor, Windsurf, Cline), simply add the
+								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
+												)}
+											/>
+										</div>
+										<div>
+											<pre>{JSON.stringify(
+													{
+														mcpServers: {
+															gradio: {
+																url: mcp_server_url
+															}
+														}
+													},
+													null,
+													2
+												)}</pre>
+										</div>
+									</code>
+								</Block>
+								<p>&nbsp;</p>
+								<em>Experimental stdio support</em>: For clients that only
+								support stdio, first
+								<a href="https://nodejs.org/en/download/" target="_blank"
+									>install Node.js</a
+								>. Then, you can use the following command:
+								<p>&nbsp;</p>
+								<Block>
+									<code>
+										<div class="copy">
+											<CopyButton
+												code={JSON.stringify(
+													{
+														mcpServers: {
+															gradio: {
+																command: "npx",
+																args: ["mcp-remote", mcp_server_url]
+															}
+														}
+													},
+													null,
+													2
+												)}
+											/>
+										</div>
+										<div>
+											<pre>{JSON.stringify(
+													{
+														mcpServers: {
+															gradio: {
+																command: "npx",
+																arguments: ["mcp-remote", mcp_server_url]
+															}
+														}
+													},
+													null,
+													2
+												)}</pre>
+										</div>
+									</code>
+								</Block>
+								<p>&nbsp;</p>
+								<p>&nbsp;</p>
+							{:else}
+								This Gradio app can also serve as an MCP server, with an MCP
+								tool corresponding to each API endpoint. To enable this, launch
+								this Gradio app with <code>.launch(mcp_server=True)</code> or
+								set the <code>GRADIO_MCP_SERVER</code> env variable to
+								<code>"True"</code>.
+							{/if}
 						{:else}
 							1. Confirm that you have cURL installed on your system.
 						{/if}
 					</p>
 
-					<InstallSnippet {current_language} />
+					{#if current_language !== "mcp"}
+						<InstallSnippet {current_language} />
 
-					<p class="padded">
-						2. Find the API endpoint below corresponding to your desired
-						function in the app. Copy the code snippet, replacing the
-						placeholder values with your own input data.
-						{#if space_id}If this is a private Space, you may need to pass your
-							Hugging Face token as well (<a
-								href={current_language == "python"
-									? py_docs + spaces_docs_suffix
-									: current_language == "javascript"
-										? js_docs + spaces_docs_suffix
-										: bash_docs}
-								class="underline"
-								target="_blank">read more</a
-							>).{/if}
-
-						Or use the
-						<Button
-							size="sm"
-							variant="secondary"
-							on:click={() => dispatch("close", { api_recorder_visible: true })}
-						>
-							<div class="loading-dot"></div>
-							<p class="self-baseline">API Recorder</p>
-						</Button>
-						to automatically generate your API requests.
-						{#if current_language == "bash"}<br />&nbsp;<br />Making a
-							prediction and getting a result requires
-							<strong>2 requests</strong>: a
-							<code>POST</code>
-							and a <code>GET</code> request. The <code>POST</code> request
-							returns an <code>EVENT_ID</code>, which is used in the second
-							<code>GET</code> request to fetch the results. In these snippets,
-							we've used <code>awk</code> and <code>read</code> to parse the
-							results, combining these two requests into one command for ease of
-							use. {#if username !== null}
-								Note: connecting to an authenticated app requires an additional
-								request.{/if} See
-							<a href={bash_docs} target="_blank">curl docs</a>.
-						{/if}
+						<p class="padded">
+							2. Find the API endpoint below corresponding to your desired
+							function in the app. Copy the code snippet, replacing the
+							placeholder values with your own input data.
+							{#if space_id}If this is a private Space, you may need to pass
+								your Hugging Face token as well (<a
+									href={current_language == "python"
+										? py_docs + spaces_docs_suffix
+										: current_language == "javascript"
+											? js_docs + spaces_docs_suffix
+											: bash_docs}
+									class="underline"
+									target="_blank">read more</a
+								>).{/if}
 
-						<!-- <span
+							Or use the
+							<Button
+								size="sm"
+								variant="secondary"
+								on:click={() =>
+									dispatch("close", { api_recorder_visible: true })}
+							>
+								<div class="loading-dot"></div>
+								<p class="self-baseline">API Recorder</p>
+							</Button>
+							to automatically generate your API requests.
+							{#if current_language == "bash"}<br />&nbsp;<br />Making a
+								prediction and getting a result requires
+								<strong>2 requests</strong>: a
+								<code>POST</code>
+								and a <code>GET</code> request. The <code>POST</code> request
+								returns an <code>EVENT_ID</code>, which is used in the second
+								<code>GET</code> request to fetch the results. In these
+								snippets, we've used <code>awk</code> and <code>read</code> to
+								parse the results, combining these two requests into one command
+								for ease of use. {#if username !== null}
+									Note: connecting to an authenticated app requires an
+									additional request.{/if} See
+								<a href={bash_docs} target="_blank">curl docs</a>.
+							{/if}
+
+							<!-- <span
 							id="api-recorder"
 							on:click={() => dispatch("close", { api_recorder_visible: true })}
 							>🪄 API Recorder</span
 						> to automatically generate your API requests! -->
-					</p>
+						</p>
+					{/if}
 				{/if}
 
-				{#each dependencies as dependency, dependency_index}
-					{#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}
-							/>
-
-							<ParametersSnippet
-								endpoint_returns={info.named_endpoints[
-									"/" + dependency.api_name
-								].parameters}
-								js_returns={js_info.named_endpoints["/" + dependency.api_name]
-									.parameters}
-								{is_running}
-								{current_language}
-							/>
-
-							<ResponseSnippet
-								endpoint_returns={info.named_endpoints[
-									"/" + dependency.api_name
-								].returns}
-								js_returns={js_info.named_endpoints["/" + dependency.api_name]
-									.returns}
-								{is_running}
-								{current_language}
-							/>
-						</div>
-					{/if}
-				{/each}
+				{#if current_language !== "mcp"}
+					{#each dependencies as dependency, dependency_index}
+						{#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}
+								/>
+
+								<ParametersSnippet
+									endpoint_returns={info.named_endpoints[
+										"/" + dependency.api_name
+									].parameters}
+									js_returns={js_info.named_endpoints["/" + dependency.api_name]
+										.parameters}
+									{is_running}
+									{current_language}
+								/>
+
+								<ResponseSnippet
+									endpoint_returns={info.named_endpoints[
+										"/" + dependency.api_name
+									].returns}
+									js_returns={js_info.named_endpoints["/" + dependency.api_name]
+										.returns}
+									{is_running}
+									{current_language}
+								/>
+							</div>
+						{/if}
+					{/each}
+				{/if}
 			</div>
 		</div>
 	{:else}
@@ -306,7 +496,6 @@ onMount(() => {
 		color: var(--body-text-color);
 		line-height: 1;
 		user-select: none;
-		text-transform: capitalize;
 	}
 
 	.current-lang {
@@ -389,4 +578,173 @@ onMount(() => {
 		font-family: var(--font-mono);
 		font-size: var(--text-md);
 	}
+
+	code pre {
+		overflow-x: auto;
+		color: var(--body-text-color);
+		font-family: var(--font-mono);
+		tab-size: 2;
+	}
+
+	.token.string {
+		display: contents;
+		color: var(--color-accent-base);
+	}
+
+	.copy {
+		position: absolute;
+		top: 0;
+		right: 0;
+		margin-top: 5px;
+		margin-right: 5px;
+		z-index: 10;
+	}
+
+	.container {
+		display: flex;
+		flex-direction: column;
+		gap: var(--spacing-xxl);
+		margin-top: var(--size-3);
+		margin-bottom: var(--size-3);
+	}
+
+	.desc {
+		color: var(--body-text-color-subdued);
+	}
+
+	.api-name {
+		color: var(--color-accent);
+	}
+
+	.mcp-url {
+		padding: var(--size-2);
+		position: relative;
+	}
+
+	.mcp-url label {
+		display: block;
+		margin-bottom: var(--size-2);
+		font-weight: 600;
+		color: var(--body-text-color);
+	}
+
+	.mcp-url .textbox {
+		display: flex;
+		align-items: center;
+		gap: var(--size-2);
+		border: 1px solid var(--border-color-primary);
+		border-radius: var(--radius-sm);
+		padding: var(--size-2);
+		background: var(--background-fill-primary);
+	}
+
+	.mcp-url input {
+		flex: 1;
+		border: none;
+		background: none;
+		color: var(--body-text-color);
+		font-family: var(--font-mono);
+		font-size: var(--text-md);
+		width: 100%;
+	}
+
+	.mcp-url input:focus {
+		outline: none;
+	}
+
+	.status-indicator {
+		display: inline-block;
+		margin-right: var(--size-1-5);
+		position: relative;
+		top: -1px;
+		font-size: 0.8em;
+	}
+
+	.status-indicator.active {
+		color: #4caf50;
+		animation: pulse 1s infinite;
+	}
+
+	@keyframes pulse {
+		0% {
+			opacity: 1;
+		}
+		50% {
+			opacity: 0.6;
+		}
+		100% {
+			opacity: 1;
+		}
+	}
+
+	.mcp-tools {
+		margin-top: var(--size-4);
+		border: 1px solid var(--border-color-primary);
+		border-radius: var(--radius-md);
+		overflow: hidden;
+	}
+
+	.tool-item {
+		border-bottom: 1px solid var(--border-color-primary);
+	}
+
+	.tool-item:last-child {
+		border-bottom: none;
+	}
+
+	.tool-header {
+		width: 100%;
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+		padding: var(--size-3);
+		background: var(--background-fill-primary);
+		border: none;
+		cursor: pointer;
+		text-align: left;
+	}
+
+	.tool-header:hover {
+		background: var(--background-fill-secondary);
+	}
+
+	.tool-name {
+		font-family: var(--font-mono);
+		font-weight: 600;
+	}
+
+	.tool-arrow {
+		color: var(--body-text-color-subdued);
+	}
+
+	.tool-content {
+		padding: var(--size-3);
+		background: var(--background-fill-secondary);
+	}
+
+	.tool-description {
+		margin-bottom: var(--size-3);
+		color: var(--body-text-color);
+	}
+	.parameter {
+		margin-bottom: var(--size-2);
+		padding: var(--size-2);
+		background: var(--background-fill-primary);
+		border-radius: var(--radius-sm);
+	}
+
+	.parameter code {
+		font-weight: 600;
+		color: var(--color-accent);
+	}
+
+	.parameter-type {
+		color: var(--body-text-color-subdued);
+		margin-left: var(--size-1);
+	}
+
+	.parameter-description {
+		margin-top: var(--size-1);
+		color: var(--body-text-color);
+	}
 </style>

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

@@ -1,7 +1,7 @@
 import { SvelteComponent } from "svelte";
 declare const __propDef: {
     props: {
-        current_language: "python" | "javascript" | "bash";
+        current_language: "python" | "javascript" | "bash" | "mcp";
     };
     events: {
         [evt: string]: CustomEvent<any>;