diff --git a/client/src/App.tsx b/client/src/App.tsx index 186c0c8..a24dd76 100644 --- a/client/src/App.tsx +++ b/client/src/App.tsx @@ -52,6 +52,7 @@ import { Terminal, } from "lucide-react"; +import { toast } from "react-toastify"; import { ZodType } from "zod"; import "./App.css"; import ConsoleTab from "./components/ConsoleTab"; @@ -178,7 +179,7 @@ const App = () => { const makeRequest = async >( request: ClientRequest, schema: T, - tabKey: keyof typeof errors + tabKey?: keyof typeof errors, ) => { if (!mcpClient) { throw new Error("MCP client not connected"); @@ -187,10 +188,19 @@ const App = () => { try { const response = await mcpClient.request(request, schema); pushHistory(request, response); - setErrors(prev => ({ ...prev, [tabKey]: null })); + + if (tabKey !== undefined) { + setErrors((prev) => ({ ...prev, [tabKey]: null })); + } + return response; } catch (e: unknown) { - setErrors(prev => ({ ...prev, [tabKey]: (e as Error).message })); + if (tabKey === undefined) { + toast.error((e as Error).message); + } else { + setErrors((prev) => ({ ...prev, [tabKey]: (e as Error).message })); + } + throw e; } }; @@ -204,7 +214,7 @@ const App = () => { await mcpClient.notification(notification); pushHistory(notification); } catch (e: unknown) { - setError((e as Error).message); + toast.error((e as Error).message); throw e; } }; @@ -216,7 +226,7 @@ const App = () => { params: nextResourceCursor ? { cursor: nextResourceCursor } : {}, }, ListResourcesResultSchema, - 'resources' + "resources", ); setResources(resources.concat(response.resources ?? [])); setNextResourceCursor(response.nextCursor); @@ -231,7 +241,7 @@ const App = () => { : {}, }, ListResourceTemplatesResultSchema, - 'resources' + "resources", ); setResourceTemplates( resourceTemplates.concat(response.resourceTemplates ?? []), @@ -246,7 +256,7 @@ const App = () => { params: { uri }, }, ReadResourceResultSchema, - 'resources' + "resources", ); setResourceContent(JSON.stringify(response, null, 2)); }; @@ -258,7 +268,7 @@ const App = () => { params: nextPromptCursor ? { cursor: nextPromptCursor } : {}, }, ListPromptsResultSchema, - 'prompts' + "prompts", ); setPrompts(response.prompts); setNextPromptCursor(response.nextCursor); @@ -271,7 +281,7 @@ const App = () => { params: { name, arguments: args }, }, GetPromptResultSchema, - 'prompts' + "prompts", ); setPromptContent(JSON.stringify(response, null, 2)); }; @@ -283,7 +293,7 @@ const App = () => { params: nextToolCursor ? { cursor: nextToolCursor } : {}, }, ListToolsResultSchema, - 'tools' + "tools", ); setTools(response.tools); setNextToolCursor(response.nextCursor); @@ -302,7 +312,7 @@ const App = () => { }, }, CompatibilityCallToolResultSchema, - 'tools' + "tools", ); setToolResult(response); }; diff --git a/client/src/main.tsx b/client/src/main.tsx index ef474bf..8ed57a0 100644 --- a/client/src/main.tsx +++ b/client/src/main.tsx @@ -1,10 +1,13 @@ import { StrictMode } from "react"; import { createRoot } from "react-dom/client"; +import { ToastContainer } from 'react-toastify'; +import 'react-toastify/dist/ReactToastify.css'; import App from "./App.tsx"; import "./index.css"; createRoot(document.getElementById("root")!).render( + , );