@@ -45,10 +45,7 @@ import Sidebar from "./components/Sidebar";
45
45
import ToolsTab from "./components/ToolsTab" ;
46
46
import { DEFAULT_INSPECTOR_CONFIG } from "./lib/constants" ;
47
47
import { InspectorConfig } from "./lib/configurationTypes" ;
48
- import {
49
- getMCPProxyAddress ,
50
- getMCPServerRequestTimeout ,
51
- } from "./utils/configUtils" ;
48
+ import { getMCPProxyAddress } from "./utils/configUtils" ;
52
49
import { useToast } from "@/hooks/use-toast" ;
53
50
54
51
const params = new URLSearchParams ( window . location . search ) ;
@@ -98,10 +95,21 @@ const App = () => {
98
95
const [ config , setConfig ] = useState < InspectorConfig > ( ( ) => {
99
96
const savedConfig = localStorage . getItem ( CONFIG_LOCAL_STORAGE_KEY ) ;
100
97
if ( savedConfig ) {
101
- return {
98
+ // merge default config with saved config
99
+ const mergedConfig = {
102
100
...DEFAULT_INSPECTOR_CONFIG ,
103
101
...JSON . parse ( savedConfig ) ,
104
102
} as InspectorConfig ;
103
+
104
+ // update description of keys to match the new description (in case of any updates to the default config description)
105
+ Object . entries ( mergedConfig ) . forEach ( ( [ key , value ] ) => {
106
+ mergedConfig [ key as keyof InspectorConfig ] = {
107
+ ...value ,
108
+ label : DEFAULT_INSPECTOR_CONFIG [ key as keyof InspectorConfig ] . label ,
109
+ } ;
110
+ } ) ;
111
+
112
+ return mergedConfig ;
105
113
}
106
114
return DEFAULT_INSPECTOR_CONFIG ;
107
115
} ) ;
@@ -152,7 +160,7 @@ const App = () => {
152
160
serverCapabilities,
153
161
mcpClient,
154
162
requestHistory,
155
- makeRequest : makeConnectionRequest ,
163
+ makeRequest,
156
164
sendNotification,
157
165
handleCompletion,
158
166
completionsSupported,
@@ -168,6 +176,7 @@ const App = () => {
168
176
headerName,
169
177
proxyServerUrl : getMCPProxyAddress ( config ) ,
170
178
requestTimeout : getMCPServerRequestTimeout ( config ) ,
179
+ config,
171
180
onNotification : ( notification ) => {
172
181
setNotifications ( ( prev ) => [ ...prev , notification as ServerNotification ] ) ;
173
182
} ,
@@ -288,13 +297,13 @@ const App = () => {
288
297
setErrors ( ( prev ) => ( { ...prev , [ tabKey ] : null } ) ) ;
289
298
} ;
290
299
291
- const makeRequest = async < T extends z . ZodType > (
300
+ const sendMCPRequest = async < T extends z . ZodType > (
292
301
request : ClientRequest ,
293
302
schema : T ,
294
303
tabKey ?: keyof typeof errors ,
295
304
) => {
296
305
try {
297
- const response = await makeConnectionRequest ( request , schema ) ;
306
+ const response = await makeRequest ( request , schema ) ;
298
307
if ( tabKey !== undefined ) {
299
308
clearError ( tabKey ) ;
300
309
}
@@ -312,7 +321,7 @@ const App = () => {
312
321
} ;
313
322
314
323
const listResources = async ( ) => {
315
- const response = await makeRequest (
324
+ const response = await sendMCPRequest (
316
325
{
317
326
method : "resources/list" as const ,
318
327
params : nextResourceCursor ? { cursor : nextResourceCursor } : { } ,
@@ -325,7 +334,7 @@ const App = () => {
325
334
} ;
326
335
327
336
const listResourceTemplates = async ( ) => {
328
- const response = await makeRequest (
337
+ const response = await sendMCPRequest (
329
338
{
330
339
method : "resources/templates/list" as const ,
331
340
params : nextResourceTemplateCursor
@@ -342,7 +351,7 @@ const App = () => {
342
351
} ;
343
352
344
353
const readResource = async ( uri : string ) => {
345
- const response = await makeRequest (
354
+ const response = await sendMCPRequest (
346
355
{
347
356
method : "resources/read" as const ,
348
357
params : { uri } ,
@@ -355,7 +364,7 @@ const App = () => {
355
364
356
365
const subscribeToResource = async ( uri : string ) => {
357
366
if ( ! resourceSubscriptions . has ( uri ) ) {
358
- await makeRequest (
367
+ await sendMCPRequest (
359
368
{
360
369
method : "resources/subscribe" as const ,
361
370
params : { uri } ,
@@ -371,7 +380,7 @@ const App = () => {
371
380
372
381
const unsubscribeFromResource = async ( uri : string ) => {
373
382
if ( resourceSubscriptions . has ( uri ) ) {
374
- await makeRequest (
383
+ await sendMCPRequest (
375
384
{
376
385
method : "resources/unsubscribe" as const ,
377
386
params : { uri } ,
@@ -386,7 +395,7 @@ const App = () => {
386
395
} ;
387
396
388
397
const listPrompts = async ( ) => {
389
- const response = await makeRequest (
398
+ const response = await sendMCPRequest (
390
399
{
391
400
method : "prompts/list" as const ,
392
401
params : nextPromptCursor ? { cursor : nextPromptCursor } : { } ,
@@ -399,7 +408,7 @@ const App = () => {
399
408
} ;
400
409
401
410
const getPrompt = async ( name : string , args : Record < string , string > = { } ) => {
402
- const response = await makeRequest (
411
+ const response = await sendMCPRequest (
403
412
{
404
413
method : "prompts/get" as const ,
405
414
params : { name, arguments : args } ,
@@ -411,7 +420,7 @@ const App = () => {
411
420
} ;
412
421
413
422
const listTools = async ( ) => {
414
- const response = await makeRequest (
423
+ const response = await sendMCPRequest (
415
424
{
416
425
method : "tools/list" as const ,
417
426
params : nextToolCursor ? { cursor : nextToolCursor } : { } ,
@@ -424,29 +433,42 @@ const App = () => {
424
433
} ;
425
434
426
435
const callTool = async ( name : string , params : Record < string , unknown > ) => {
427
- const response = await makeRequest (
428
- {
429
- method : "tools/call" as const ,
430
- params : {
431
- name,
432
- arguments : params ,
433
- _meta : {
434
- progressToken : progressTokenRef . current ++ ,
436
+ try {
437
+ const response = await sendMCPRequest (
438
+ {
439
+ method : "tools/call" as const ,
440
+ params : {
441
+ name,
442
+ arguments : params ,
443
+ _meta : {
444
+ progressToken : progressTokenRef . current ++ ,
445
+ } ,
435
446
} ,
436
447
} ,
437
- } ,
438
- CompatibilityCallToolResultSchema ,
439
- "tools" ,
440
- ) ;
441
- setToolResult ( response ) ;
448
+ CompatibilityCallToolResultSchema ,
449
+ "tools" ,
450
+ ) ;
451
+ setToolResult ( response ) ;
452
+ } catch ( e ) {
453
+ const toolResult : CompatibilityCallToolResult = {
454
+ content : [
455
+ {
456
+ type : "text" ,
457
+ text : ( e as Error ) . message ?? String ( e ) ,
458
+ } ,
459
+ ] ,
460
+ isError : true ,
461
+ } ;
462
+ setToolResult ( toolResult ) ;
463
+ }
442
464
} ;
443
465
444
466
const handleRootsChange = async ( ) => {
445
467
await sendNotification ( { method : "notifications/roots/list_changed" } ) ;
446
468
} ;
447
469
448
470
const sendLogLevelRequest = async ( level : LoggingLevel ) => {
449
- await makeRequest (
471
+ await sendMCPRequest (
450
472
{
451
473
method : "logging/setLevel" as const ,
452
474
params : { level } ,
@@ -648,9 +670,10 @@ const App = () => {
648
670
setTools ( [ ] ) ;
649
671
setNextToolCursor ( undefined ) ;
650
672
} }
651
- callTool = { ( name , params ) => {
673
+ callTool = { async ( name , params ) => {
652
674
clearError ( "tools" ) ;
653
- callTool ( name , params ) ;
675
+ setToolResult ( null ) ;
676
+ await callTool ( name , params ) ;
654
677
} }
655
678
selectedTool = { selectedTool }
656
679
setSelectedTool = { ( tool ) => {
@@ -665,7 +688,7 @@ const App = () => {
665
688
< ConsoleTab />
666
689
< PingTab
667
690
onPingClick = { ( ) => {
668
- void makeRequest (
691
+ void sendMCPRequest (
669
692
{
670
693
method : "ping" as const ,
671
694
} ,
0 commit comments