diff --git a/examples/inspector/eslint.config.js b/examples/inspector/eslint.config.js index 092408a..91d3441 100644 --- a/examples/inspector/eslint.config.js +++ b/examples/inspector/eslint.config.js @@ -19,10 +19,7 @@ export default tseslint.config( }, rules: { ...reactHooks.configs.recommended.rules, - 'react-refresh/only-export-components': [ - 'warn', - { allowConstantExport: true }, - ], + 'react-refresh/only-export-components': ['warn', { allowConstantExport: true }], }, - }, + } ) diff --git a/examples/inspector/index.html b/examples/inspector/index.html index 7216a94..7f54b78 100644 --- a/examples/inspector/index.html +++ b/examples/inspector/index.html @@ -5,34 +5,43 @@ - + MCP Inspector - use-mcp React Hook Demo - - + + - + - + - + - + - + diff --git a/examples/inspector/src/App.tsx b/examples/inspector/src/App.tsx index aa3ce2f..846ed89 100644 --- a/examples/inspector/src/App.tsx +++ b/examples/inspector/src/App.tsx @@ -7,28 +7,31 @@ function App() { } /> - -
-
-

MCP Inspector

-

- Minimal demo showcasing the{' '} - - use-mcp - {' '} - React hook -

+ +
+
+

MCP Inspector

+

+ Minimal demo showcasing the{' '} + + use-mcp + {' '} + React hook +

+
+
-
-
- } /> + } + /> ) diff --git a/examples/inspector/src/components/McpServers.tsx b/examples/inspector/src/components/McpServers.tsx index c4cae8f..16780bd 100644 --- a/examples/inspector/src/components/McpServers.tsx +++ b/examples/inspector/src/components/McpServers.tsx @@ -2,15 +2,8 @@ import { useState, useRef, useEffect } from 'react' import { useMcp, type Tool } from 'use-mcp/react' import { Info, X, ChevronRight, ChevronDown } from 'lucide-react' - // MCP Connection wrapper that only renders when active -function McpConnection({ - serverUrl, - onConnectionUpdate, -}: { - serverUrl: string - onConnectionUpdate: (data: any) => void -}) { +function McpConnection({ serverUrl, onConnectionUpdate }: { serverUrl: string; onConnectionUpdate: (data: any) => void }) { // Use the MCP hook with the server URL const connection = useMcp({ url: serverUrl, @@ -22,23 +15,13 @@ function McpConnection({ // Update parent component with connection data useEffect(() => { onConnectionUpdate(connection) - }, [ - connection.state, - connection.tools, - connection.error, - connection.log.length, - connection.authUrl, - ]) + }, [connection.state, connection.tools, connection.error, connection.log.length, connection.authUrl]) // Return null as this is just a hook wrapper return null } -export function McpServers({ - onToolsUpdate, -}: { - onToolsUpdate?: (tools: Tool[]) => void -}) { +export function McpServers({ onToolsUpdate }: { onToolsUpdate?: (tools: Tool[]) => void }) { const [serverUrl, setServerUrl] = useState(() => { return sessionStorage.getItem('mcpServerUrl') || '' }) @@ -53,8 +36,7 @@ export function McpServers({ retry: () => {}, disconnect: () => {}, authenticate: () => Promise.resolve(undefined), - callTool: (_name: string, _args?: Record) => - Promise.resolve(undefined), + callTool: (_name: string, _args?: Record) => Promise.resolve(undefined), clearStorage: () => {}, }) const [toolForms, setToolForms] = useState>>({}) @@ -64,8 +46,7 @@ export function McpServers({ const executionLogRefs = useRef>({}) // Extract connection properties - const { state, tools, log, authUrl, disconnect, authenticate } = - connectionData + const { state, tools, log, authUrl, disconnect, authenticate } = connectionData // Notify parent component when tools change useEffect(() => { @@ -73,9 +54,8 @@ export function McpServers({ onToolsUpdate( tools.map((t: Tool) => ({ ...t, - callTool: (args: Record) => - connectionData.callTool(t.name, args), - })), + callTool: (args: Record) => connectionData.callTool(t.name, args), + })) ) } }, [tools, onToolsUpdate]) @@ -99,8 +79,7 @@ export function McpServers({ retry: () => {}, disconnect: () => {}, authenticate: () => Promise.resolve(undefined), - callTool: (_name: string, _args?: Record) => - Promise.resolve(undefined), + callTool: (_name: string, _args?: Record) => Promise.resolve(undefined), clearStorage: () => {}, }) } @@ -127,48 +106,20 @@ export function McpServers({ switch (state) { case 'discovering': - return ( - - Discovering - - ) + return Discovering case 'authenticating': - return ( - - Authenticating - - ) + return Authenticating case 'connecting': - return ( - - Connecting - - ) + return Connecting case 'loading': - return ( - - Loading - - ) + return Loading case 'ready': - return ( - - Connected - - ) + return Connected case 'failed': - return ( - - Failed - - ) + return Failed case 'not-connected': default: - return ( - - Not Connected - - ) + return Not Connected } } @@ -203,28 +154,28 @@ export function McpServers({ // Handle form input changes const handleFormChange = (toolName: string, fieldName: string, value: any) => { - setToolForms(prev => ({ + setToolForms((prev) => ({ ...prev, [toolName]: { ...prev[toolName], - [fieldName]: value - } + [fieldName]: value, + }, })) } // Helper function to clean and update execution log const updateExecutionLog = (toolName: string, newContent: string) => { - setToolExecutionLogs(prev => { + setToolExecutionLogs((prev) => { const currentLog = prev[toolName] || '' const updatedLog = currentLog + newContent // Remove blank lines and rejoin const cleanedLog = updatedLog .split('\n') - .filter(line => line.trim() !== '') + .filter((line) => line.trim() !== '') .join('\n') return { ...prev, - [toolName]: cleanedLog + '\n' + [toolName]: cleanedLog + '\n', } }) } @@ -233,11 +184,11 @@ export function McpServers({ const handleRunTool = async (tool: Tool) => { const args = toolForms[tool.name] || {} const argsStr = JSON.stringify(args) - + // Add execution start message const startMessage = `Calling ${tool.name}(${argsStr})\n` updateExecutionLog(tool.name, startMessage) - + try { const result = await connectionData.callTool(tool.name, args) const resultStr = typeof result === 'string' ? result : JSON.stringify(result, null, 2) @@ -249,7 +200,7 @@ export function McpServers({ // Auto-scroll execution logs to bottom when they change useEffect(() => { - Object.keys(toolExecutionLogs).forEach(toolName => { + Object.keys(toolExecutionLogs).forEach((toolName) => { const textarea = executionLogRefs.current[toolName] if (textarea) { textarea.scrollTop = textarea.scrollHeight @@ -259,24 +210,24 @@ export function McpServers({ // Clear execution log for specific tool const clearExecutionLog = (toolName: string) => { - setToolExecutionLogs(prev => ({ + setToolExecutionLogs((prev) => ({ ...prev, - [toolName]: '' + [toolName]: '', })) } // Toggle tool expanded state const toggleTool = (toolName: string) => { - setExpandedTools(prev => ({ + setExpandedTools((prev) => ({ ...prev, - [toolName]: !prev[toolName] + [toolName]: !prev[toolName], })) } // Render form field based on schema const renderFormField = (toolName: string, fieldName: string, schema: any, isRequired: boolean) => { const value = toolForms[toolName]?.[fieldName] || '' - + if (schema.type === 'number' || schema.type === 'integer') { return ( { - const newValue = e.target.value === '' ? '' : - (schema.type === 'integer' ? parseInt(e.target.value) || 0 : parseFloat(e.target.value) || 0) + const newValue = + e.target.value === '' ? '' : schema.type === 'integer' ? parseInt(e.target.value) || 0 : parseFloat(e.target.value) || 0 handleFormChange(toolName, fieldName, newValue) }} /> @@ -324,8 +275,7 @@ export function McpServers({

- Connect to Model Context Protocol (MCP) servers to access additional AI - capabilities. + Connect to Model Context Protocol (MCP) servers to access additional AI capabilities.

@@ -342,9 +292,8 @@ export function McpServers({ }} disabled={isActive && state !== 'failed'} /> - - {state === 'ready' || - (isActive && state !== 'not-connected' && state !== 'failed') ? ( + + {state === 'ready' || (isActive && state !== 'not-connected' && state !== 'failed') ? ( - + {/* Per-tool execution log - only show if there's content */} {toolExecutionLogs[tool.name] && (
@@ -484,7 +415,9 @@ export function McpServers({