feat(inspector): integrate MCP UI client and enhance ToolsTab functionality

- Add @mcp-ui/client dependency to inspector package
- Implement PromptsTab and ResourcesTab components for improved layout
- Enhance ToolsTab to display MCP UI resources and JSON content conditionally
- Update Layout component to support new tab functionality and server connection states
- Refactor code for better readability and maintainability

Author: tonxxd

packages/inspector/package.json

@@ -49,6 +49,7 @@
   },
   "dependencies": {
     "@hono/node-server": "^1.19.5",
+    "@mcp-ui/client": "^5.12.1",
     "@modelcontextprotocol/sdk": "1.12.1",
     "@radix-ui/react-alert-dialog": "^1.1.15",
     "@radix-ui/react-dialog": "^1.1.15",

packages/inspector/src/client/components/Layout.tsx

@@ -25,6 +25,8 @@ import {
   DropdownMenuTrigger,
 } from '../../components/ui/dropdown-menu'
 import { useMcpContext } from '../context/McpContext'
+import { PromptsTab } from './PromptsTab'
+import { ResourcesTab } from './ResourcesTab'
 import { ServerIcon } from './ServerIcon'
 import { ToolsTab } from './ToolsTab'
 
@@ -311,9 +313,25 @@ export function Layout({ children }: LayoutProps) {
                   isConnected={selectedServer.state === 'ready'}
                 />
               )
-            : (
-                children
-              )}
+            : selectedServer && activeTab === 'prompts'
+              ? (
+                  <PromptsTab
+                    prompts={selectedServer.prompts}
+                    callPrompt={selectedServer.callTool} // Using callTool for now, should be callPrompt when available
+                    isConnected={selectedServer.state === 'ready'}
+                  />
+                )
+              : selectedServer && activeTab === 'resources'
+                ? (
+                    <ResourcesTab
+                      resources={selectedServer.resources}
+                      readResource={(uri: string) => selectedServer.callTool('read_resource', { uri })} // Using callTool for now, should be readResource when available
+                      isConnected={selectedServer.state === 'ready'}
+                    />
+                  )
+                : (
+                    children
+                  )}
         </main>
       </div>
     </TooltipProvider>

packages/inspector/src/client/components/McpUIRenderer.tsx

@@ -0,0 +1,63 @@
+import { UIResourceRenderer } from '@mcp-ui/client'
+import type { Resource } from '@modelcontextprotocol/sdk/types.js'
+
+interface McpUIRendererProps {
+  resource: Resource
+  onUIAction?: (action: any) => void
+  className?: string
+}
+
+/**
+ * Helper function to check if a resource is an MCP UI resource
+ */
+export function isMcpUIResource(resource: any): boolean {
+  if (!resource?.mimeType) return false
+  
+  const mimeType = resource.mimeType.toLowerCase()
+  return (
+    mimeType === 'text/html' ||
+    mimeType === 'text/uri-list' ||
+    mimeType.startsWith('application/vnd.mcp-ui.remote-dom')
+  )
+}
+
+/**
+ * Helper function to convert MCP SDK Resource to MCP UI Resource format
+ */
+function convertToMcpUIResource(resource: Resource): any {
+  return {
+    uri: resource.uri,
+    mimeType: resource.mimeType,
+    text: resource.text,
+    blob: resource.blob,
+  }
+}
+
+/**
+ * Component to render MCP UI resources
+ */
+export function McpUIRenderer({ resource, onUIAction, className }: McpUIRendererProps) {
+  const handleUIAction = (action: any) => {
+    console.log('MCP UI Action:', action)
+    onUIAction?.(action)
+  }
+
+  const uiResource = convertToMcpUIResource(resource)
+
+  return (
+    <div className={className}>
+      <UIResourceRenderer
+        resource={uiResource}
+        onUIAction={handleUIAction}
+        htmlProps={{
+          autoResizeIframe: { width: true, height: true },
+          style: {
+            width: '100%',
+            minHeight: '200px',
+          },
+        }}
+      />
+    </div>
+  )
+}
+