@gradio/core 0.23.2 → 0.25.0

package/package.json

@@ -1,67 +1,68 @@
 {
   "name": "@gradio/core",
-  "version": "0.23.2",
+  "version": "0.25.0",
   "type": "module",
   "devDependencies": {
-    "@gradio/atoms": "^0.16.3",
     "@gradio/accordion": "^0.5.20",
-    "@gradio/annotatedimage": "^0.9.25",
-    "@gradio/audio": "^0.17.21",
+    "@gradio/atoms": "^0.16.3",
+    "@gradio/annotatedimage": "^0.9.27",
     "@gradio/box": "^0.2.21",
-    "@gradio/button": "^0.5.7",
     "@gradio/browserstate": "^0.3.2",
-    "@gradio/chatbot": "^0.26.18",
-    "@gradio/checkbox": "^0.4.26",
+    "@gradio/audio": "^0.17.23",
+    "@gradio/chatbot": "^0.26.20",
+    "@gradio/button": "^0.5.9",
     "@gradio/checkboxgroup": "^0.6.25",
-    "@gradio/client": "^1.15.6",
-    "@gradio/code": "^0.14.11",
-    "@gradio/dataset": "^0.4.28",
-    "@gradio/dataframe": "^0.18.3",
-    "@gradio/datetime": "^0.3.18",
+    "@gradio/checkbox": "^0.4.26",
+    "@gradio/client": "^1.16.0",
+    "@gradio/code": "^0.14.13",
     "@gradio/colorpicker": "^0.4.25",
-    "@gradio/downloadbutton": "^0.4.7",
-    "@gradio/dropdown": "^0.9.25",
     "@gradio/column": "^0.2.1",
-    "@gradio/file": "^0.12.24",
+    "@gradio/dataset": "^0.4.30",
+    "@gradio/dataframe": "^0.18.5",
+    "@gradio/downloadbutton": "^0.4.9",
+    "@gradio/datetime": "^0.3.18",
+    "@gradio/dropdown": "^0.10.0",
+    "@gradio/file": "^0.12.26",
+    "@gradio/fileexplorer": "^0.5.37",
     "@gradio/fallback": "^0.4.25",
-    "@gradio/fileexplorer": "^0.5.35",
     "@gradio/form": "^0.2.21",
-    "@gradio/gallery": "^0.15.27",
+    "@gradio/gallery": "^0.15.29",
     "@gradio/group": "^0.2.0",
     "@gradio/highlightedtext": "^0.9.8",
     "@gradio/html": "^0.6.17",
     "@gradio/icons": "^0.12.0",
-    "@gradio/image": "^0.22.13",
-    "@gradio/imageslider": "^0.2.9",
-    "@gradio/imageeditor": "^0.16.1",
-    "@gradio/json": "^0.5.27",
+    "@gradio/image": "^0.22.15",
+    "@gradio/imageeditor": "^0.16.3",
+    "@gradio/imageslider": "^0.2.11",
     "@gradio/label": "^0.5.17",
+    "@gradio/multimodaltextbox": "^0.10.15",
     "@gradio/markdown": "^0.13.18",
-    "@gradio/model3d": "^0.14.21",
-    "@gradio/multimodaltextbox": "^0.10.13",
+    "@gradio/model3d": "^0.14.23",
+    "@gradio/json": "^0.5.27",
     "@gradio/nativeplot": "^0.7.2",
     "@gradio/number": "^0.6.2",
     "@gradio/paramviewer": "^0.7.13",
-    "@gradio/radio": "^0.7.8",
     "@gradio/plot": "^0.9.20",
-    "@gradio/simpledropdown": "^0.3.25",
+    "@gradio/radio": "^0.7.8",
+    "@gradio/row": "^0.2.1",
     "@gradio/sidebar": "^0.1.18",
+    "@gradio/simpleimage": "^0.8.37",
     "@gradio/simpletextbox": "^0.3.26",
-    "@gradio/row": "^0.2.1",
-    "@gradio/simpleimage": "^0.8.35",
+    "@gradio/simpledropdown": "^0.3.25",
     "@gradio/sketchbox": "^0.6.13",
-    "@gradio/statustracker": "^0.10.15",
     "@gradio/slider": "^0.6.14",
     "@gradio/state": "^0.1.2",
     "@gradio/tabitem": "^0.5.0",
     "@gradio/tabs": "^0.4.5",
+    "@gradio/statustracker": "^0.10.15",
     "@gradio/textbox": "^0.10.18",
     "@gradio/theme": "^0.4.0",
     "@gradio/timer": "^0.4.5",
-    "@gradio/upload": "^0.16.11",
-    "@gradio/uploadbutton": "^0.9.7",
     "@gradio/utils": "^0.10.2",
-    "@gradio/video": "^0.14.21",
+    "@gradio/vibeeditor": "^0.2.0",
+    "@gradio/uploadbutton": "^0.9.9",
+    "@gradio/video": "^0.14.23",
+    "@gradio/upload": "^0.16.13",
     "@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;
+	export let vibe_mode = false;
 	let broken_connection = false;
 
 	let {
@@ -92,6 +93,8 @@
 		old_dependencies = dependencies;
 	}
 
+	let vibe_editor_width = 350;
+
 	async function run(): Promise<void> {
 		await setupi18n(app.config?.i18n_translations || undefined);
 
@@ -121,6 +124,7 @@
 	let ApiDocs: ComponentType<ApiDocs> | null = null;
 	let ApiRecorder: ComponentType<ApiRecorder> | null = null;
 	let Settings: ComponentType<Settings> | null = null;
+	let VibeEditor: ComponentType | null = null;
 
 	async function loadApiDocs(): Promise<void> {
 		if (!ApiDocs || !ApiRecorder) {
@@ -145,6 +149,13 @@
 		}
 	}
 
+	async function loadVibeEditor(): Promise<void> {
+		if (!VibeEditor) {
+			const vibe_editor_module = await import("@gradio/vibeeditor");
+			VibeEditor = vibe_editor_module.default;
+		}
+	}
+
 	async function set_api_docs_visible(visible: boolean): Promise<void> {
 		api_recorder_visible = false;
 		if (visible) {
@@ -945,6 +956,15 @@
 			}
 		);
 
+		const handleVibeEditorResize = (event: CustomEvent): void => {
+			vibe_editor_width = event.detail.width;
+		};
+
+		window.addEventListener(
+			"vibeEditorResize",
+			handleVibeEditorResize as EventListener
+		);
+
 		// Load components if they should be visible on initial page load
 		if (api_docs_visible) {
 			loadApiDocs();
@@ -955,6 +975,9 @@
 		if (settings_visible) {
 			loadSettings();
 		}
+		if (vibe_mode) {
+			loadVibeEditor();
+		}
 	});
 
 	function screen_recording(): void {
@@ -976,7 +999,11 @@
 </svelte:head>
 
 <div class="wrap" style:min-height={app_mode ? "100%" : "auto"}>
-	<div class="contain" style:flex-grow={app_mode ? "1" : "auto"}>
+	<div
+		class="contain"
+		style:flex-grow={app_mode ? "1" : "auto"}
+		style:margin-right={vibe_mode ? `${vibe_editor_width}px` : "0"}
+	>
 		{#if $_layout && app.config}
 			<MountComponents
 				rootNode={$_layout}
@@ -1132,6 +1159,10 @@
 	<Toast {messages} on:close={handle_error_close} />
 {/if}
 
+{#if vibe_mode && VibeEditor}
+	<svelte:component this={VibeEditor} {app} {root} />
+{/if}
+
 <style>
 	.wrap {
 		display: flex;

package/src/api_docs/ApiBanner.svelte

@@ -15,7 +15,7 @@
 <h2>
 	<img src={api_logo} alt="" />
 	<div class="title">
-		API documentation
+		{#if current_language === "mcp"}MCP{:else}API{/if} documentation
 		<div class="url">
 			{root}
 		</div>

package/src/api_docs/ApiDocs.svelte

@@ -20,6 +20,7 @@
 	import bash from "./img/bash.svg";
 	import ResponseSnippet from "./ResponseSnippet.svelte";
 	import mcp from "./img/mcp.svg";
+	import MCPSnippet from "./MCPSnippet.svelte";
 
 	export let dependencies: Dependency[];
 	export let root: string;
@@ -109,7 +110,27 @@
 
 	const dispatch = createEventDispatcher();
 
-	const mcp_server_url = `${root}gradio_api/mcp/sse`;
+	$: selected_tools_array = Array.from(selected_tools);
+	$: selected_tools_without_prefix =
+		selected_tools_array.map(remove_tool_prefix);
+	$: mcp_server_url = `${root}gradio_api/mcp/sse`;
+	$: mcp_server_url_streamable =
+		selected_tools_array.length > 0 &&
+		selected_tools_array.length < tools.length
+			? `${root}gradio_api/mcp/?tools=${selected_tools_without_prefix.join(",")}`
+			: `${root}gradio_api/mcp/`;
+
+	$: if (mcp_json_sse && selected_tools.size > 0) {
+		const baseUrl =
+			selected_tools_array.length > 0 &&
+			selected_tools_array.length < tools.length
+				? `${root}gradio_api/mcp/sse?tools=${selected_tools_without_prefix.join(",")}`
+				: `${root}gradio_api/mcp/sse`;
+		mcp_json_sse.mcpServers.gradio.url = baseUrl;
+		if (mcp_json_stdio) {
+			mcp_json_stdio.mcpServers.gradio.args[1] = baseUrl;
+		}
+	}
 
 	interface ToolParameter {
 		title?: string;
@@ -131,6 +152,15 @@
 	let mcp_json_sse: any;
 	let mcp_json_stdio: any;
 	let file_data_present = false;
+	let selected_tools: Set<string> = new Set();
+	let tool_prefix = space_id ? space_id.split("/").pop() + "_" : "";
+
+	function remove_tool_prefix(toolName: string): string {
+		if (tool_prefix && toolName.startsWith(tool_prefix)) {
+			return toolName.slice(tool_prefix.length);
+		}
+		return toolName;
+	}
 
 	const upload_file_mcp_server = {
 		command: "uvx",
@@ -144,9 +174,10 @@
 		]
 	};
 
-	async function fetchMcpTools() {
+	async function fetch_mcp_tools() {
 		try {
-			const response = await fetch(`${root}gradio_api/mcp/schema`);
+			let schema_url = `${root}gradio_api/mcp/schema`;
+			const response = await fetch(schema_url);
 			const schema = await response.json();
 			file_data_present = schema
 				.map((tool: any) => tool.meta?.file_data_present)
@@ -158,17 +189,20 @@
 				parameters: tool.inputSchema?.properties || {},
 				expanded: false
 			}));
+			selected_tools = new Set(tools.map((tool) => tool.name));
 			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;
-							}, {})
+							headers: headers.reduce(
+								(accumulator: Record<string, string>, current_key: string) => {
+									accumulator[current_key] = "<YOUR_HEADER_VALUE>";
+									return accumulator;
+								},
+								{}
+							)
 						}
 					}
 				};
@@ -236,7 +270,7 @@
 			.then((response) => {
 				mcp_server_active = response.ok;
 				if (mcp_server_active) {
-					fetchMcpTools();
+					fetch_mcp_tools();
 					if (!is_valid_language(lang_param)) {
 						current_language = "mcp";
 					}
@@ -335,135 +369,18 @@
 								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 (SSE)</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">
-															{#each Object.entries(tool.parameters) as [name, param]}
-																<div class="parameter">
-																	<code>{name}</code>
-																	<span class="parameter-type">
-																		({param.type}{param.default !== undefined
-																			? `, default: ${JSON.stringify(param.default)}`
-																			: ""})
-																	</span>
-																	<p class="parameter-description">
-																		{param.description
-																			? param.description
-																			: "⚠︎ No description for this parameter in function docstring"}
-																	</p>
-																</div>
-															{/each}
-														</div>
-													{:else}
-														<p>Takes no input parameters</p>
-													{/if}
-												</div>
-											{/if}
-										</div>
-									{/each}
-								</div>
-								<p>&nbsp;</p>
-
-								<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.
-								<p>&nbsp;</p>
-								<Block>
-									<code>
-										<div class="copy">
-											<CopyButton
-												code={JSON.stringify(mcp_json_sse, null, 2)}
-											/>
-										</div>
-										<div>
-											<pre>{JSON.stringify(mcp_json_sse, null, 2)}</pre>
-										</div>
-									</code>
-								</Block>
-								{#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:
-								<p>&nbsp;</p>
-								<Block>
-									<code>
-										<div class="copy">
-											<CopyButton
-												code={JSON.stringify(mcp_json_stdio, null, 2)}
-											/>
-										</div>
-										<div>
-											<pre>{JSON.stringify(mcp_json_stdio, null, 2)}</pre>
-										</div>
-									</code>
-								</Block>
-								<p>&nbsp;</p>
-								<p>
-									<a href={mcp_docs} target="_blank">
-										Read more about MCP in the Gradio docs
-									</a>
-								</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}
+							<MCPSnippet
+								{mcp_server_active}
+								{mcp_server_url}
+								{mcp_server_url_streamable}
+								tools={tools.filter((tool) => selected_tools.has(tool.name))}
+								all_tools={tools}
+								bind:selected_tools
+								{mcp_json_sse}
+								{mcp_json_stdio}
+								{file_data_present}
+								{mcp_docs}
+							/>
 						{:else}
 							1. Confirm that you have cURL installed on your system.
 						{/if}
@@ -637,6 +554,7 @@
 		color: var(--body-text-color);
 		line-height: 1;
 		user-select: none;
+		font-size: var(--text-lg);
 	}
 
 	.current-lang {
@@ -657,7 +575,8 @@
 
 	.snippet img {
 		margin-right: var(--size-1-5);
-		width: var(--size-3);
+		width: var(--size-4);
+		height: var(--size-4);
 	}
 
 	.header {
@@ -756,136 +675,4 @@
 	.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>