diff --git a/client/src/App.tsx b/client/src/App.tsx index 5650954f6..1ae5250f0 100644 --- a/client/src/App.tsx +++ b/client/src/App.tsx @@ -15,6 +15,7 @@ import { Root, ServerNotification, Tool, + LoggingLevel, } from "@modelcontextprotocol/sdk/types.js"; import React, { Suspense, useEffect, useRef, useState } from "react"; import { useConnection } from "./lib/hooks/useConnection"; @@ -91,6 +92,7 @@ const App = () => { (localStorage.getItem("lastTransportType") as "stdio" | "sse") || "stdio" ); }); + const [logLevel, setLogLevel] = useState("debug"); const [notifications, setNotifications] = useState([]); const [stdErrNotifications, setStdErrNotifications] = useState< StdErrNotification[] @@ -412,6 +414,17 @@ const App = () => { await sendNotification({ method: "notifications/roots/list_changed" }); }; + const sendLogLevelRequest = async (level: LoggingLevel) => { + await makeRequest( + { + method: "logging/setLevel" as const, + params: { level }, + }, + z.object({}), + ); + setLogLevel(level); + }; + return (
{ setBearerToken={setBearerToken} onConnect={connectMcpServer} stdErrNotifications={stdErrNotifications} + logLevel={logLevel} + sendLogLevelRequest={sendLogLevelRequest} + loggingSupported={!!serverCapabilities?.logging || false} />
diff --git a/client/src/components/Sidebar.tsx b/client/src/components/Sidebar.tsx index 48c6ff2af..aa930e5ee 100644 --- a/client/src/components/Sidebar.tsx +++ b/client/src/components/Sidebar.tsx @@ -19,6 +19,10 @@ import { SelectValue, } from "@/components/ui/select"; import { StdErrNotification } from "@/lib/notificationTypes"; +import { + LoggingLevel, + LoggingLevelSchema, +} from "@modelcontextprotocol/sdk/types.js"; import useTheme from "../lib/useTheme"; import { version } from "../../../package.json"; @@ -39,6 +43,9 @@ interface SidebarProps { setBearerToken: (token: string) => void; onConnect: () => void; stdErrNotifications: StdErrNotification[]; + logLevel: LoggingLevel; + sendLogLevelRequest: (level: LoggingLevel) => void; + loggingSupported: boolean; } const Sidebar = ({ @@ -57,6 +64,9 @@ const Sidebar = ({ setBearerToken, onConnect, stdErrNotifications, + logLevel, + sendLogLevelRequest, + loggingSupported, }: SidebarProps) => { const [theme, setTheme] = useTheme(); const [showEnvVars, setShowEnvVars] = useState(false); @@ -290,6 +300,28 @@ const Sidebar = ({ : "Disconnected"}
+ + {loggingSupported && connectionStatus === "connected" && ( +
+ + +
+ )} + {stdErrNotifications.length > 0 && ( <>