From 2af3410b8e41444dc7e1e0f8d46f19ff1e6ec622 Mon Sep 17 00:00:00 2001 From: Cliff Hall Date: Thu, 5 Feb 2026 22:02:20 -0500 Subject: [PATCH] Add MCP Apps support to Inspector (#1044) * Fix MCP Apps rendering issue and add comprehensive logging - Fixed AppRenderer useEffect dependency array to include resourceContent This ensures the component re-evaluates when resource content arrives - Added detailed console logging throughout the app lifecycle: * Resource fetch and response tracking in App.tsx * Setup conditions and AppBridge creation in AppRenderer.tsx * HTML parsing and iframe rendering steps * PostMessageTransport and AppBridge connection status * App tool filtering and selection in AppsTab.tsx - Refactored AppsTab selectedTool rendering for better tracking The issue was that resourceContent prop updates weren't triggering the AppRenderer setup effect. Now the effect properly responds to both resourceUri and resourceContent changes. Co-authored-by: Cliff Hall * Fix MCP Apps iframe rendering issue The app was getting stuck on 'Loading MCP App...' because the iframe was hidden (display: none) until the oninitialized event fired. However, the PostMessage handshake requires the iframe to be visible to complete. This fix: - Sets loading to false immediately after writing HTML to the iframe - Makes the iframe visible before establishing PostMessage transport - Allows the AppBridge initialization handshake to complete successfully - Removes redundant setLoading(false) from oninitialized callback The iframe is now visible and ready for PostMessage communication before the AppBridge connect() call, enabling proper initialization. Co-authored-by: Cliff Hall * Fix MCP Apps HTML extraction to match spec The AppRenderer was incorrectly checking for a 'type' field in resource contents, but TextResourceContents objects only have uri, mimeType, and text fields according to the MCP specification. Fixed by checking for the presence of the 'text' field directly instead of checking a non-existent 'type' field. This allows the HTML content to be properly extracted and rendered in the iframe. Co-authored-by: Cliff Hall * Add comprehensive tests for MCP Apps support - Add tests for AppsTab component (13 tests) - Add tests for AppRenderer component (17 tests) - Update jest.config.cjs to handle ES modules from @modelcontextprotocol/ext-apps - All 478 tests pass successfully Co-authored-by: Cliff Hall * Add MCP Apps support to Inspector - Add AppsTab component for detecting and listing MCP apps - Add AppRenderer component with full AppBridge integration - Implement UI resource fetching and sandboxed iframe rendering - Add PostMessage transport for bidirectional JSON-RPC communication - Include comprehensive test coverage (30 new tests) - Auto-populate apps when tab becomes active - Support theme awareness and configurable permissions Co-authored-by: Cliff Hall * Prefer structuredContent over content field in tool responses Some MCP servers return different data in structuredContent vs content fields. This change ensures that when structuredContent is present, it is used exclusively for display instead of showing both fields. Changes: - Modified ToolResults.tsx to only show content when structuredContent is absent - Removed unused checkContentCompatibility function - Updated test cases to reflect new behavior Co-authored-by: Cliff Hall * Revert "Prefer structuredContent over content field in tool responses" This reverts commit 3b054b4da08517cce53ef23e60c07bb32b0fa8f5. Claude did not do the right thing. * feat: integrate @mcp-ui/client for MCP application rendering This commit implements the integration of `@mcp-ui/client` to handle the rendering of Model Context Protocol (MCP) applications within the inspector. It includes refactoring the rendering logic, improving resource fetching in the main application state, and setting up a secure sandbox environment. Changes per file: - client/package.json: - Added `@mcp-ui/client` as a dependency. - client/src/components/AppRenderer.tsx: - Refactored to use `McpUiAppRenderer` from `@mcp-ui/client`. - Implemented HTML parsing logic for MCP resource responses. - Configured host context (theme) and sandbox URL for the renderer. - Replaced iframe-based manual rendering with the official component. - client/src/App.tsx: - Added `fetchingResources` state to prevent duplicate concurrent resource requests. - Enhanced `readResource` with better error handling and state tracking. - Optimized resource content mapping to better support application state. - client/src/components/AppsTab.tsx: - Updated to use `getToolUiResourceUri` utility from `@modelcontextprotocol/ext-apps` instead of manual metadata property access. - Simplified tool filtering and selection logic. - client/public/sandbox_proxy.html: - Added a sandbox proxy page to facilitate secure communication between the inspector and the rendered MCP applications. - client/bin/client.js: - Added server rewrites to ensure `sandbox_proxy.html` is served correctly. - Implemented specific `Cache-Control` headers for `sandbox_proxy.html` to prevent stale cached versions. - client/vite.config.ts: - Explicitly configured `publicDir: "public"` to ensure the sandbox proxy is included in the build output. - client/src/components/__tests__/AppRenderer.test.tsx: - Updated tests to mock the new `@mcp-ui/client` component. - Adjusted assertions to verify correct props are passed to the renderer. - Enhanced mock MCP client to include required methods like `getServerCapabilities`. * Potential fix for code scanning alert no. 37: Client-side cross-site scripting Co-authored-by: Copilot Autofix powered by AI <62310815+github-advanced-security[bot]@users.noreply.github.com> * Update package-lock.json - npm install - npm audit fix * Potential fix for code scanning alert no. 38: Client-side cross-site scripting Co-authored-by: Copilot Autofix powered by AI <62310815+github-advanced-security[bot]@users.noreply.github.com> * Potential fix for code scanning alert no. 39: Client-side cross-site scripting Co-authored-by: Copilot Autofix powered by AI <62310815+github-advanced-security[bot]@users.noreply.github.com> * prettier * Update client/src/components/AppsTab.tsx Co-authored-by: Ola Hungerford * prettier * In AppsTab.test.tsx, fetch button by aria-label * relative imports * Remove sanitization logic from sandbox_proxy.html. It's breaking the app rendering. Will sort out what best practices for this HTML is later * In sandbox_proxy.html,formatting In AppsTab.tsx - Add app window - when an app is selected, - show input form for apps that have an input schema - button shows app - if app is shown, show maximize button - if maximized, - show minimize button - hide app list * In AppsTab.test.tsx - test new layout and controls * In AppRenderer.tsx - accept toolInput - pass to McpUiAppRenderer * In AppsTab.tsx, if an app has no inputSchema, just show it, otherwise show the form and the "back to form" button when showing the app. * In AppsTab.test.tsx - test new behavior * In ListPane.tsx - remove the Clear button * In ListPane.test.tsx - remove test for clear button * In AppRenderer.tsx, - remove onReadResource and resourceContent, not needed since mcpClient is being passed * In App.tsx and AppsTab.tsx, - remove the passing of these variables * In AppRenderer.test.tsx, and AppsTab.test.tsx - remove tests that fail after having removed onReadResource and resourceContent * Serving the sandbox_proxy.html from a separate port, using the proxy instead of the webclient server. * In App.tsx - pass the path to the sandbox endpoint on the proxy to the AppsTab * In AppsTab.tsx - accept the sandboxPath property and pass it to the AppRenderer * In AppRenderer.tsx - accept the sandboxPath property and pass it to the McpUiAppRenderer * In client.js - remove the rewrite and header config for sandbox_proxy.html * In server/src/index.ts - add a /sandbox endpoint that reads and returns the sandbox_proxy.html file with no-cache header * In server/package.json - add shx for cross-platform copy function - in build script, copy static folder to build folder * Moved sandbox_proxy.html from client/public to server/static * In client.js - return to original state * In vite.config.ts - return to original state * Potential fix for code scanning alert no. 41: Missing rate limiting Co-authored-by: Copilot Autofix powered by AI <62310815+github-advanced-security[bot]@users.noreply.github.com> * In AppRenderer.tsx - add open link handler that handles link requests from the UI. Makes sure that the URL starts with http or https * In sandbox_proxy.html - refactor to match [basic-host](https://github.com/modelcontextprotocol/ext-apps/tree/main/examples/basic-host) example - creates an nested iframe for security. - in this implementation, for simplicity the sandbox.ts is inlined in sandbox_proxy.html as javascript * prettier * In AppRenderer.tsx - add support for handling McpUiMessageRequest messages from the UI - show message in a toast * Add logging message handler to AppRenderer In App.tsx - pass an onNotification function to the AppsTab that adds a notification to the notification array In AppsTab.tsx - Accept the onNotification function and pass it to the AppRenderer In AppRenderer.tsx - Accept the onNotification function - added an handleLoggingMessage function that takes a LoggingMessageNotificationParams object, wraps it with a method and params prop to make it a ServerNotification shape, and pass it to the onNotification function - pass handleLoggingMessage to McpUiAppRenderer * In ResourcesTab.test.tsx - fix @ import that wasn't resolving * In AppRenderer.tsx - remove fetch and evaluation of resourceUri, as the mcpClient handles that (review request) * In AppRenderer.test.tsx - remove test for no resourceUri found * Merge branch 'main' into full-apps-support-final Resolved Conflicts: - package-lock.json * Fixed mismatch with sanboxRateLimiter and the express version --------- Co-authored-by: claude[bot] <41898282+claude[bot]@users.noreply.github.com> Co-authored-by: Cliff Hall Co-authored-by: Copilot Autofix powered by AI <62310815+github-advanced-security[bot]@users.noreply.github.com> Co-authored-by: Ola Hungerford --- cli/package.json | 2 +- client/jest.config.cjs | 7 + client/package.json | 2 + client/src/App.tsx | 89 ++- client/src/components/AppRenderer.tsx | 128 ++++ client/src/components/AppsTab.tsx | 530 ++++++++++++++ client/src/components/ListPane.tsx | 20 +- .../components/__tests__/AppRenderer.test.tsx | 115 +++ .../src/components/__tests__/AppsTab.test.tsx | 481 +++++++++++++ .../__tests__/AuthDebugger.test.tsx | 8 +- .../components/__tests__/ListPane.test.tsx | 8 +- .../__tests__/ResourcesTab.test.tsx | 2 +- package-lock.json | 660 +++++++++++++----- server/package.json | 8 +- server/src/index.ts | 29 + server/static/sandbox_proxy.html | 197 ++++++ 16 files changed, 2090 insertions(+), 196 deletions(-) create mode 100644 client/src/components/AppRenderer.tsx create mode 100644 client/src/components/AppsTab.tsx create mode 100644 client/src/components/__tests__/AppRenderer.test.tsx create mode 100644 client/src/components/__tests__/AppsTab.test.tsx create mode 100644 server/static/sandbox_proxy.html diff --git a/cli/package.json b/cli/package.json index ce521bee..52f66b6f 100644 --- a/cli/package.json +++ b/cli/package.json @@ -25,7 +25,7 @@ "test:cli-metadata": "vitest run metadata.test.ts" }, "devDependencies": { - "@types/express": "^5.0.6", + "@types/express": "^5.0.0", "tsx": "^4.7.0", "vitest": "^4.0.17" }, diff --git a/client/jest.config.cjs b/client/jest.config.cjs index 9b793eae..70485296 100644 --- a/client/jest.config.cjs +++ b/client/jest.config.cjs @@ -13,8 +13,15 @@ module.exports = { tsconfig: "tsconfig.jest.json", }, ], + "^.+\\.m?js$": [ + "ts-jest", + { + tsconfig: "tsconfig.jest.json", + }, + ], }, extensionsToTreatAsEsm: [".ts", ".tsx"], + transformIgnorePatterns: ["node_modules/(?!(@modelcontextprotocol)/)"], testRegex: "(/__tests__/.*|(\\.|/)(test|spec))\\.(jsx?|tsx?)$", // Exclude directories and files that don't need to be tested testPathIgnorePatterns: [ diff --git a/client/package.json b/client/package.json index 1feec212..1ac32027 100644 --- a/client/package.json +++ b/client/package.json @@ -25,6 +25,8 @@ "cleanup:e2e": "node e2e/global-teardown.js" }, "dependencies": { + "@mcp-ui/client": "^6.0.0", + "@modelcontextprotocol/ext-apps": "^1.0.0", "@modelcontextprotocol/sdk": "^1.25.2", "@radix-ui/react-checkbox": "^1.1.4", "@radix-ui/react-dialog": "^1.1.3", diff --git a/client/src/App.tsx b/client/src/App.tsx index 39fc2812..5a69495b 100644 --- a/client/src/App.tsx +++ b/client/src/App.tsx @@ -51,6 +51,7 @@ import { import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"; import { Button } from "@/components/ui/button"; import { + AppWindow, Bell, Files, FolderTree, @@ -75,6 +76,7 @@ import SamplingTab, { PendingRequest } from "./components/SamplingTab"; import Sidebar from "./components/Sidebar"; import ToolsTab from "./components/ToolsTab"; import TasksTab from "./components/TasksTab"; +import AppsTab from "./components/AppsTab"; import { InspectorConfig } from "./lib/configurationTypes"; import { getMCPProxyAddress, @@ -126,6 +128,9 @@ const App = () => { const [resourceContentMap, setResourceContentMap] = useState< Record >({}); + const [fetchingResources, setFetchingResources] = useState>( + new Set(), + ); const [prompts, setPrompts] = useState([]); const [promptContent, setPromptContent] = useState(""); const [tools, setTools] = useState([]); @@ -308,11 +313,13 @@ const App = () => { ...(serverCapabilities?.prompts ? ["prompts"] : []), ...(serverCapabilities?.tools ? ["tools"] : []), ...(serverCapabilities?.tasks ? ["tasks"] : []), + "apps", "ping", "sampling", "elicitations", "roots", "auth", + "metadata", ]; if (!validTabs.includes(originatingTab)) return; @@ -440,11 +447,13 @@ const App = () => { ...(serverCapabilities?.prompts ? ["prompts"] : []), ...(serverCapabilities?.tools ? ["tools"] : []), ...(serverCapabilities?.tasks ? ["tasks"] : []), + "apps", "ping", "sampling", "elicitations", "roots", "auth", + "metadata", ]; const isValidTab = validTabs.includes(hash); @@ -473,6 +482,13 @@ const App = () => { // eslint-disable-next-line react-hooks/exhaustive-deps }, [mcpClient, activeTab]); + useEffect(() => { + if (mcpClient && activeTab === "apps" && serverCapabilities?.tools) { + void listTools(); + } + // eslint-disable-next-line react-hooks/exhaustive-deps + }, [mcpClient, activeTab, serverCapabilities?.tools]); + useEffect(() => { localStorage.setItem("lastCommand", command); }, [command]); @@ -757,11 +773,13 @@ const App = () => { ...(serverCapabilities?.prompts ? ["prompts"] : []), ...(serverCapabilities?.tools ? ["tools"] : []), ...(serverCapabilities?.tasks ? ["tasks"] : []), + "apps", "ping", "sampling", "elicitations", "roots", "auth", + "metadata", ]; if (validTabs.includes(originatingTab)) { @@ -851,22 +869,48 @@ const App = () => { }; const readResource = async (uri: string) => { + if (fetchingResources.has(uri) || resourceContentMap[uri]) { + return; + } + + console.log("[App] Reading resource:", uri); + setFetchingResources((prev) => new Set(prev).add(uri)); lastToolCallOriginTabRef.current = currentTabRef.current; - const response = await sendMCPRequest( - { - method: "resources/read" as const, - params: { uri }, - }, - ReadResourceResultSchema, - "resources", - ); - const content = JSON.stringify(response, null, 2); - setResourceContent(content); - setResourceContentMap((prev) => ({ - ...prev, - [uri]: content, - })); + try { + const response = await sendMCPRequest( + { + method: "resources/read" as const, + params: { uri }, + }, + ReadResourceResultSchema, + "resources", + ); + console.log("[App] Resource read response:", { + uri, + responseLength: JSON.stringify(response).length, + hasContents: !!(response as { contents?: unknown[] }).contents, + }); + const content = JSON.stringify(response, null, 2); + setResourceContent(content); + setResourceContentMap((prev) => ({ + ...prev, + [uri]: content, + })); + } catch (error) { + console.error(`[App] Failed to read resource ${uri}:`, error); + const errorString = (error as Error).message ?? String(error); + setResourceContentMap((prev) => ({ + ...prev, + [uri]: JSON.stringify({ error: errorString }), + })); + } finally { + setFetchingResources((prev) => { + const next = new Set(prev); + next.delete(uri); + return next; + }); + } }; const subscribeToResource = async (uri: string) => { @@ -1308,6 +1352,10 @@ const App = () => { Tasks + + + Apps + Ping @@ -1497,6 +1545,19 @@ const App = () => { error={errors.tasks} nextCursor={nextTaskCursor} /> + { + clearError("tools"); + listTools(); + }} + error={errors.tools} + mcpClient={mcpClient} + onNotification={(notification) => { + setNotifications((prev) => [...prev, notification]); + }} + /> { diff --git a/client/src/components/AppRenderer.tsx b/client/src/components/AppRenderer.tsx new file mode 100644 index 00000000..e0c25980 --- /dev/null +++ b/client/src/components/AppRenderer.tsx @@ -0,0 +1,128 @@ +import { useMemo, useState } from "react"; +import { Client } from "@modelcontextprotocol/sdk/client/index.js"; +import { + Tool, + ContentBlock, + ServerNotification, + LoggingMessageNotificationParams, +} from "@modelcontextprotocol/sdk/types.js"; +import { + AppRenderer as McpUiAppRenderer, + type McpUiHostContext, + type RequestHandlerExtra, +} from "@mcp-ui/client"; +import { + type McpUiMessageRequest, + type McpUiMessageResult, +} from "@modelcontextprotocol/ext-apps/app-bridge"; +import { Alert, AlertDescription } from "@/components/ui/alert"; +import { AlertCircle } from "lucide-react"; +import { useToast } from "@/lib/hooks/useToast"; + +interface AppRendererProps { + sandboxPath: string; + tool: Tool; + mcpClient: Client | null; + toolInput?: Record; + onNotification?: (notification: ServerNotification) => void; +} + +const AppRenderer = ({ + sandboxPath, + tool, + mcpClient, + toolInput, + onNotification, +}: AppRendererProps) => { + const [error, setError] = useState(null); + const { toast } = useToast(); + + const hostContext: McpUiHostContext = useMemo( + () => ({ + theme: document.documentElement.classList.contains("dark") + ? "dark" + : "light", + }), + [], + ); + + const handleOpenLink = async ({ url }: { url: string }) => { + let isError = true; + if (url.startsWith("https://") || url.startsWith("http://")) { + window.open(url, "_blank"); + isError = false; + } + return { isError }; + }; + + const handleMessage = async ( + params: McpUiMessageRequest["params"], + // eslint-disable-next-line @typescript-eslint/no-unused-vars + _extra: RequestHandlerExtra, + ): Promise => { + const message = params.content + .filter((block): block is ContentBlock & { type: "text" } => + Boolean(block.type === "text"), + ) + .map((block) => block.text) + .join("\n"); + + if (message) { + toast({ + description: message, + }); + } + + return {}; + }; + + const handleLoggingMessage = (params: LoggingMessageNotificationParams) => { + if (onNotification) { + onNotification({ + method: "notifications/message", + params, + } as ServerNotification); + } + }; + + if (!mcpClient) { + return ( + + + Waiting for MCP client... + + ); + } + + return ( +
+ {error && ( + + + {error} + + )} + +
+ setError(err.message)} + /> +
+
+ ); +}; + +export default AppRenderer; diff --git a/client/src/components/AppsTab.tsx b/client/src/components/AppsTab.tsx new file mode 100644 index 00000000..1943c439 --- /dev/null +++ b/client/src/components/AppsTab.tsx @@ -0,0 +1,530 @@ +import { useEffect, useState, useCallback, useRef } from "react"; +import { TabsContent } from "@/components/ui/tabs"; +import { Button } from "@/components/ui/button"; +import { Alert, AlertDescription } from "@/components/ui/alert"; +import { + AlertCircle, + X, + Play, + ChevronRight, + Maximize2, + Minimize2, +} from "lucide-react"; +import { Tool, ServerNotification } from "@modelcontextprotocol/sdk/types.js"; +import { Client } from "@modelcontextprotocol/sdk/client/index.js"; +import { getToolUiResourceUri } from "@modelcontextprotocol/ext-apps/app-bridge"; +import AppRenderer from "./AppRenderer"; +import ListPane from "./ListPane"; +import IconDisplay, { WithIcons } from "./IconDisplay"; +import { Label } from "@/components/ui/label"; +import { Checkbox } from "@/components/ui/checkbox"; +import { + Select, + SelectContent, + SelectItem, + SelectTrigger, + SelectValue, +} from "@/components/ui/select"; +import { Textarea } from "@/components/ui/textarea"; +import { Input } from "@/components/ui/input"; +import DynamicJsonForm, { DynamicJsonFormRef } from "./DynamicJsonForm"; +import { JsonSchemaType, JsonValue } from "@/utils/jsonUtils"; +import { + generateDefaultValue, + isPropertyRequired, + normalizeUnionType, + resolveRef, +} from "@/utils/schemaUtils"; + +interface AppsTabProps { + sandboxPath: string; + tools: Tool[]; + listTools: () => void; + error: string | null; + mcpClient: Client | null; + onNotification?: (notification: ServerNotification) => void; +} + +// Type guard to check if a tool has UI metadata +const hasUIMetadata = (tool: Tool): boolean => { + return !!getToolUiResourceUri(tool); +}; + +const AppsTab = ({ + sandboxPath, + tools, + listTools, + error, + mcpClient, + onNotification, +}: AppsTabProps) => { + const [appTools, setAppTools] = useState([]); + const [selectedTool, setSelectedTool] = useState(null); + const [params, setParams] = useState>({}); + const [isAppOpen, setIsAppOpen] = useState(false); + const [isMaximized, setIsMaximized] = useState(false); + const [hasValidationErrors, setHasValidationErrors] = useState(false); + const formRefs = useRef>({}); + + // Function to check if any form has validation errors + const checkValidationErrors = useCallback(() => { + const errors = Object.values(formRefs.current).some( + (ref) => ref && !ref.validateJson().isValid, + ); + setHasValidationErrors(errors); + return errors; + }, []); + + // Filter tools that have UI metadata + useEffect(() => { + const filtered = tools.filter(hasUIMetadata); + console.log("[AppsTab] Filtered app tools:", { + totalTools: tools.length, + appTools: filtered.length, + appToolNames: filtered.map((t) => t.name), + }); + setAppTools(filtered); + + // If current selected tool is no longer available, reset selection + if (selectedTool && !filtered.find((t) => t.name === selectedTool.name)) { + setSelectedTool(null); + setIsAppOpen(false); + } + }, [tools, selectedTool]); + + useEffect(() => { + if (selectedTool) { + const initialParams = Object.entries( + selectedTool.inputSchema.properties ?? [], + ).map(([key, value]) => { + // First resolve any $ref references + const resolvedValue = resolveRef( + value as JsonSchemaType, + selectedTool.inputSchema as JsonSchemaType, + ); + return [ + key, + generateDefaultValue( + resolvedValue, + key, + selectedTool.inputSchema as JsonSchemaType, + ), + ]; + }); + setParams(Object.fromEntries(initialParams)); + setHasValidationErrors(false); + formRefs.current = {}; + } else { + setParams({}); + setIsAppOpen(false); + } + }, [selectedTool]); + + const handleRefresh = useCallback(() => { + listTools(); + }, [listTools]); + + const handleCloseApp = useCallback(() => { + setIsAppOpen(false); + }, []); + + const handleOpenApp = useCallback(() => { + if (!checkValidationErrors()) { + setIsAppOpen(true); + } + }, [checkValidationErrors]); + + const handleSelectTool = useCallback((tool: Tool) => { + setSelectedTool(tool); + const hasFields = + tool.inputSchema.properties && + Object.keys(tool.inputSchema.properties).length > 0; + setIsAppOpen(!hasFields); + }, []); + + const handleDeselectTool = useCallback(() => { + setSelectedTool(null); + setIsAppOpen(false); + setIsMaximized(false); + }, []); + + return ( + +
+ {!isMaximized && ( + { + return ( +
+
+ +
+
+ {tool.name} + {tool.description && ( + + {tool.description} + + )} +
+ +
+ ); + }} + title="MCP Apps" + buttonText="Refresh Apps" + /> + )} + +
+
+
+
+ {selectedTool && ( + + )} +

+ {selectedTool ? selectedTool.name : "Select an app"} +

+
+
+ {selectedTool && isAppOpen && ( + + )} + {selectedTool && ( + + )} +
+
+
+ +
+ {error && ( + + + {error} + + )} + + {selectedTool ? ( + (() => { + const hasFields = + selectedTool.inputSchema.properties && + Object.keys(selectedTool.inputSchema.properties).length > 0; + + return ( +
+ {!isAppOpen ? ( +
+ {selectedTool.description && ( +

+ {selectedTool.description} +

+ )} + +
+

App Input

+ {Object.entries( + selectedTool.inputSchema.properties ?? [], + ).map(([key, value]) => { + // First resolve any $ref references + const resolvedValue = resolveRef( + value as JsonSchemaType, + selectedTool.inputSchema as JsonSchemaType, + ); + const prop = normalizeUnionType(resolvedValue); + const inputSchema = + selectedTool.inputSchema as JsonSchemaType; + const required = isPropertyRequired( + key, + inputSchema, + ); + + return ( +
+
+ + {prop.nullable ? ( +
+ + setParams({ + ...params, + [key]: checked + ? null + : prop.type === "array" + ? undefined + : prop.default !== null + ? prop.default + : prop.type === "boolean" + ? false + : prop.type === "string" + ? "" + : undefined, + }) + } + /> + +
+ ) : null} +
+ +
+ {prop.type === "boolean" ? ( +
+ + setParams({ + ...params, + [key]: checked, + }) + } + /> + +
+ ) : prop.type === "string" && prop.enum ? ( + + ) : prop.type === "string" ? ( +