@@ -16,7 +16,7 @@ import {
1616 ResourceTemplate ,
1717 Root ,
1818 ServerNotification ,
19- Tool
19+ Tool ,
2020} from "@modelcontextprotocol/sdk/types.js" ;
2121import { useEffect , useRef , useState } from "react" ;
2222
@@ -124,10 +124,7 @@ const App = () => {
124124 const [ nextToolCursor , setNextToolCursor ] = useState < string | undefined > ( ) ;
125125 const progressTokenRef = useRef ( 0 ) ;
126126
127- const {
128- height : historyPaneHeight ,
129- handleDragStart
130- } = useDraggablePane ( 300 ) ;
127+ const { height : historyPaneHeight , handleDragStart } = useDraggablePane ( 300 ) ;
131128
132129 const {
133130 connectionStatus,
@@ -136,7 +133,7 @@ const App = () => {
136133 requestHistory,
137134 makeRequest : makeConnectionRequest ,
138135 sendNotification,
139- connect : connectMcpServer
136+ connect : connectMcpServer ,
140137 } = useConnection ( {
141138 transportType,
142139 command,
@@ -145,18 +142,21 @@ const App = () => {
145142 env,
146143 proxyServerUrl : PROXY_SERVER_URL ,
147144 onNotification : ( notification ) => {
148- setNotifications ( prev => [ ...prev , notification as ServerNotification ] ) ;
145+ setNotifications ( ( prev ) => [ ...prev , notification as ServerNotification ] ) ;
149146 } ,
150147 onStdErrNotification : ( notification ) => {
151- setStdErrNotifications ( prev => [ ...prev , notification as StdErrNotification ] ) ;
148+ setStdErrNotifications ( ( prev ) => [
149+ ...prev ,
150+ notification as StdErrNotification ,
151+ ] ) ;
152152 } ,
153153 onPendingRequest : ( request , resolve , reject ) => {
154- setPendingSampleRequests ( prev => [
154+ setPendingSampleRequests ( ( prev ) => [
155155 ...prev ,
156- { id : nextRequestId . current ++ , request, resolve, reject }
156+ { id : nextRequestId . current ++ , request, resolve, reject } ,
157157 ] ) ;
158158 } ,
159- getRoots : ( ) => rootsRef . current
159+ getRoots : ( ) => rootsRef . current ,
160160 } ) ;
161161
162162 const makeRequest = async < T extends z . ZodType > (
@@ -345,26 +345,40 @@ const App = () => {
345345 { mcpClient ? (
346346 < Tabs
347347 defaultValue = {
348- Object . keys ( serverCapabilities ?? { } ) . includes ( window . location . hash . slice ( 1 ) ) ?
349- window . location . hash . slice ( 1 ) :
350- serverCapabilities ?. resources ? "resources" :
351- serverCapabilities ?. prompts ? "prompts" :
352- serverCapabilities ?. tools ? "tools" :
353- "ping"
348+ Object . keys ( serverCapabilities ?? { } ) . includes (
349+ window . location . hash . slice ( 1 ) ,
350+ )
351+ ? window . location . hash . slice ( 1 )
352+ : serverCapabilities ?. resources
353+ ? "resources"
354+ : serverCapabilities ?. prompts
355+ ? "prompts"
356+ : serverCapabilities ?. tools
357+ ? "tools"
358+ : "ping"
354359 }
355360 className = "w-full p-4"
356361 onValueChange = { ( value ) => ( window . location . hash = value ) }
357362 >
358363 < TabsList className = "mb-4 p-0" >
359- < TabsTrigger value = "resources" disabled = { ! serverCapabilities ?. resources } >
364+ < TabsTrigger
365+ value = "resources"
366+ disabled = { ! serverCapabilities ?. resources }
367+ >
360368 < Files className = "w-4 h-4 mr-2" />
361369 Resources
362370 </ TabsTrigger >
363- < TabsTrigger value = "prompts" disabled = { ! serverCapabilities ?. prompts } >
371+ < TabsTrigger
372+ value = "prompts"
373+ disabled = { ! serverCapabilities ?. prompts }
374+ >
364375 < MessageSquare className = "w-4 h-4 mr-2" />
365376 Prompts
366377 </ TabsTrigger >
367- < TabsTrigger value = "tools" disabled = { ! serverCapabilities ?. tools } >
378+ < TabsTrigger
379+ value = "tools"
380+ disabled = { ! serverCapabilities ?. tools }
381+ >
368382 < Hammer className = "w-4 h-4 mr-2" />
369383 Tools
370384 </ TabsTrigger >
@@ -388,7 +402,9 @@ const App = () => {
388402 </ TabsList >
389403
390404 < div className = "w-full" >
391- { ! serverCapabilities ?. resources && ! serverCapabilities ?. prompts && ! serverCapabilities ?. tools ? (
405+ { ! serverCapabilities ?. resources &&
406+ ! serverCapabilities ?. prompts &&
407+ ! serverCapabilities ?. tools ? (
392408 < div className = "flex items-center justify-center p-4" >
393409 < p className = "text-lg text-gray-500" >
394410 The connected server does not support any MCP capabilities
0 commit comments