feat: add online sharing functionality and library build support

- Add SidebarShare component for copying shareable inspector links
- Add library build configuration with Vite and DTS plugin
- Update OAuth callback paths for online deployment (/inspector/oauth/callback)
- Change default connection type from "proxy" to "direct"
- Change default transport type from "stdio" to "sse"
- Update app title to "Online MCP Inspector"
- Add MCP Servers navigation button
- Add getProxyMCPURL utility function for proxy URL generation
- Export App component and TooltipProvider for library usage
- Update GitHub repository reference to web-mcp/online-mcp-inspector

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>

Author: baotlake

client/package.json

@@ -16,6 +16,7 @@
   ],
   "scripts": {
     "dev": "vite --port 6274",
+    "lib": "vite build -c vite.library.ts",
     "build": "tsc -b && vite build",
     "lint": "eslint .",
     "preview": "vite preview --port 6274",
@@ -77,6 +78,7 @@
     "ts-jest": "^29.4.0",
     "typescript": "^5.5.3",
     "typescript-eslint": "^8.38.0",
-    "vite": "^7.1.11"
+    "vite": "^7.1.11",
+    "vite-plugin-dts": "^4.5.4"
   }
 }

client/src/App.tsx

@@ -113,7 +113,7 @@ const App = () => {
     () => {
       return (
         (localStorage.getItem("lastConnectionType") as "direct" | "proxy") ||
-        "proxy"
+        "direct"
       );
     },
   );
@@ -858,7 +858,7 @@ const App = () => {
     </TabsContent>
   );
 
-  if (window.location.pathname === "/oauth/callback") {
+  if (window.location.pathname === "/inspector/oauth/callback") {
     const OAuthCallback = React.lazy(
       () => import("./components/OAuthCallback"),
     );
@@ -869,7 +869,7 @@ const App = () => {
     );
   }
 
-  if (window.location.pathname === "/oauth/callback/debug") {
+  if (window.location.pathname === "/inspector/oauth/callback/debug") {
     const OAuthDebugCallback = React.lazy(
       () => import("./components/OAuthDebugCallback"),
     );

client/src/components/OAuthCallback.tsx

@@ -71,7 +71,7 @@ const OAuthCallback = ({ onConnect }: OAuthCallbackProps) => {
     };
 
     handleCallback().finally(() => {
-      window.history.replaceState({}, document.title, "/");
+      window.history.replaceState({}, document.title, "/inspector");
     });
   }, [toast, onConnect]);
 

client/src/components/Sidebar.tsx

@@ -14,6 +14,7 @@ import {
   RefreshCwOff,
   Copy,
   CheckCheck,
+  Compass,
 } from "lucide-react";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
@@ -40,6 +41,7 @@ import {
 import CustomHeaders from "./CustomHeaders";
 import { CustomHeaders as CustomHeadersType } from "@/lib/types/customHeaders";
 import { useToast } from "../lib/hooks/useToast";
+import SidebarShare from "./SidebarShare";
 
 interface SidebarProps {
   connectionStatus: ConnectionStatus;
@@ -233,7 +235,7 @@ const Sidebar = ({
       <div className="flex items-center justify-between p-4 border-b border-gray-200 dark:border-border">
         <div className="flex items-center">
           <h1 className="ml-2 text-lg font-semibold">
-            MCP Inspector v{version}
+            Online MCP Inspector v{version}
           </h1>
         </div>
       </div>
@@ -598,7 +600,9 @@ const Sidebar = ({
                       <Input
                         readOnly
                         placeholder="Redirect URL"
-                        value={window.location.origin + "/oauth/callback"}
+                        value={
+                          window.location.origin + "/inspector/oauth/callback"
+                        }
                         className="font-mono"
                       />
                       <label className="text-sm font-medium">Scope</label>
@@ -803,6 +807,15 @@ const Sidebar = ({
                 </Select>
               </div>
             )}
+
+            <SidebarShare
+              sseUrl={sseUrl}
+              transportType={transportType}
+              command={command}
+              args={args}
+              connectionStatus={connectionStatus}
+              connectionType={connectionType}
+            />
           </div>
         </div>
       </div>
@@ -839,17 +852,27 @@ const Sidebar = ({
                 href="https://modelcontextprotocol.io/docs/tools/debugging"
                 target="_blank"
                 rel="noopener noreferrer"
+                className="hidden"
               >
                 <Bug className="w-4 h-4 text-foreground" />
               </a>
             </Button>
+            <Button variant="ghost" title="MCP Servers" asChild>
+              <a
+                href="/docs/inspector/MCP-Servers"
+                target="_blank"
+                rel="noopener noreferrer"
+              >
+                <Compass className="w-4 h-4 text-foreground" />
+              </a>
+            </Button>
             <Button
               variant="ghost"
               title="Report bugs or contribute on GitHub"
               asChild
             >
               <a
-                href="https://github.com/modelcontextprotocol/inspector"
+                href="https://github.com/web-mcp/online-mcp-inspector"
                 target="_blank"
                 rel="noopener noreferrer"
               >

client/src/components/SidebarShare.tsx

@@ -0,0 +1,63 @@
+import { Button } from "@/components/ui/button";
+import { ConnectionStatus } from "@/lib/constants";
+import { cn } from "@/lib/utils";
+import { Copy, CheckCheck } from "lucide-react";
+import { useState } from "react";
+
+type Props = {
+  sseUrl: string;
+  transportType: "stdio" | "sse" | "streamable-http";
+  command?: string;
+  args?: string;
+  connectionStatus?: ConnectionStatus;
+  connectionType?: "direct" | "proxy";
+};
+const SidebarShare = ({
+  sseUrl,
+  transportType,
+  command,
+  args,
+  connectionStatus,
+  connectionType,
+}: Props) => {
+  const [copied, setCopied] = useState(false);
+
+  const handleCopy = () => {
+    const u = new URL(location.origin + "/inspector");
+    u.searchParams.set("serverUrl", sseUrl);
+    u.searchParams.set("transport", transportType);
+    if (transportType === "stdio") {
+      u.searchParams.set("serverCommand", command || "");
+      u.searchParams.set("serverArgs", args || "");
+    }
+
+    navigator.clipboard.writeText(u.toString());
+    setCopied(true);
+    setTimeout(() => setCopied(false), 2000);
+  };
+
+  return (
+    <div className={cn("mt-5", {})}>
+      <Button
+        variant={
+          connectionType == "direct" &&
+          connectionStatus == "connected" &&
+          sseUrl
+            ? "default"
+            : "outline"
+        }
+        onClick={handleCopy}
+        className="w-full"
+      >
+        {copied ? (
+          <CheckCheck className="h-4 w-4 mr-2" />
+        ) : (
+          <Copy className="h-4 w-4 mr-2" />
+        )}
+        Copy Shareable Link
+      </Button>
+    </div>
+  );
+};
+
+export default SidebarShare;

client/src/index.ts

@@ -0,0 +1,4 @@
+import "./index.css";
+
+export { default as App } from "./App";
+export { TooltipProvider } from "./components/ui/tooltip.tsx";

client/src/lib/auth.ts

@@ -114,11 +114,11 @@ export class InspectorOAuthClientProvider implements OAuthClientProvider {
   scope: string | undefined;
 
   get redirectUrl() {
-    return window.location.origin + "/oauth/callback";
+    return window.location.origin + "/inspector/oauth/callback";
   }
 
   get debugRedirectUrl() {
-    return window.location.origin + "/oauth/callback/debug";
+    return window.location.origin + "/inspector/oauth/callback/debug";
   }
 
   get redirect_uris() {

client/src/lib/hooks/useConnection.ts

@@ -394,7 +394,7 @@ export function useConnection({
         await checkProxyHealth();
       } catch {
         setConnectionStatus("error-connecting-to-proxy");
-        return;
+        // return;
       }
     }
 

client/src/utils/configUtils.ts

@@ -27,6 +27,49 @@ export const getMCPProxyAddress = (config: InspectorConfig): string => {
   return `${window.location.protocol}//${window.location.hostname}:${proxyPort}`;
 };
 
+export const getProxyMCPURL = (
+  config: InspectorConfig,
+  option: {
+    transportType?: "stdio" | "sse" | "streamable-http";
+    sseUrl?: string;
+    command?: string;
+    args?: string;
+    env?: Record<string, string>;
+  },
+) => {
+  let mcpProxyServerUrl: URL;
+  const { transportType = "sse", sseUrl, command, args, env } = option;
+
+  if (!config.MCP_PROXY_FULL_ADDRESS.value && transportType != "stdio") {
+    mcpProxyServerUrl = new URL(sseUrl || "http://localhost:3000/sse");
+    return mcpProxyServerUrl;
+  }
+
+  switch (transportType) {
+    case "stdio":
+      mcpProxyServerUrl = new URL(`${getMCPProxyAddress(config)}/stdio`);
+      mcpProxyServerUrl.searchParams.append("command", command || "");
+      mcpProxyServerUrl.searchParams.append("args", args || "");
+      mcpProxyServerUrl.searchParams.append("env", JSON.stringify(env));
+      break;
+    case "sse":
+      mcpProxyServerUrl = new URL(`${getMCPProxyAddress(config)}/sse`);
+      mcpProxyServerUrl.searchParams.append("url", sseUrl || "");
+      break;
+    case "streamable-http":
+      mcpProxyServerUrl = new URL(`${getMCPProxyAddress(config)}/mcp`);
+      mcpProxyServerUrl.searchParams.append("url", sseUrl || "");
+      break;
+    default:
+      mcpProxyServerUrl = new URL(`${getMCPProxyAddress(config)}/sse`);
+      mcpProxyServerUrl.searchParams.append("url", sseUrl || "");
+      break;
+  }
+
+  mcpProxyServerUrl.searchParams.append("transportType", transportType);
+  return mcpProxyServerUrl;
+};
+
 export const getMCPServerRequestTimeout = (config: InspectorConfig): number => {
   return config.MCP_SERVER_REQUEST_TIMEOUT.value as number;
 };
@@ -67,7 +110,7 @@ export const getInitialTransportType = ():
     (localStorage.getItem("lastTransportType") as
       | "stdio"
       | "sse"
-      | "streamable-http") || "stdio"
+      | "streamable-http") || "sse"
   );
 };
 

client/tsconfig.json

@@ -6,6 +6,7 @@
   ],
   "compilerOptions": {
     "baseUrl": ".",
+    "jsx": "react-jsx",
     "paths": {
       "@/*": ["./src/*"]
     }