Add Client Config

mcpjam-inspector/client/src/App.tsx

@@ -17,6 +17,7 @@ import { ViewsTab } from "./components/ViewsTab";
 import { SandboxesTab } from "./components/SandboxesTab";
 import { SettingsTab } from "./components/SettingsTab";
 import { WorkspaceSettingsTab } from "./components/WorkspaceSettingsTab";
+import { ClientConfigTab } from "./components/client-config/ClientConfigTab";
 import { TracingTab } from "./components/TracingTab";
 import { AuthTab } from "./components/AuthTab";
 import { OAuthFlowTab } from "./components/OAuthFlowTab";
@@ -106,10 +107,16 @@ import {
   writeHostedOAuthResumeMarker,
 } from "./lib/hosted-oauth-resume";
 import { handleOAuthCallback } from "./lib/oauth/mcp-oauth";
+import {
+  buildDefaultWorkspaceClientConfig,
+  getEffectiveWorkspaceClientCapabilities,
+} from "./lib/client-config";
 import type {
   BillingRolloutState,
   OrganizationEntitlements,
 } from "./hooks/useOrganizationBilling";
+import { useClientConfigStore } from "./stores/client-config-store";
+import { useUIPlaygroundStore } from "./stores/ui-playground-store";
 
 function getHostedOAuthCallbackErrorMessage(): string {
   const params = new URLSearchParams(window.location.search);
@@ -139,6 +146,7 @@ export default function App() {
     "billing-entitlements-ui",
   );
   const learningEnabled = useFeatureFlagEnabled("mcpjam-learning");
+  const clientConfigEnabled = useFeatureFlagEnabled("client-config-enabled");
   const {
     getAccessToken,
     signIn,
@@ -354,6 +362,7 @@ export default function App() {
     handleSwitchWorkspace,
     handleCreateWorkspace,
     handleUpdateWorkspace,
+    handleUpdateClientConfig,
     handleDeleteWorkspace,
     handleWorkspaceShared,
     saveServerConfigWithoutConnecting,
@@ -367,6 +376,11 @@ export default function App() {
 
   const { sortedOrganizations, isLoading: isLoadingOrganizations } =
     useOrganizationQueries({ isAuthenticated });
+  const playgroundGlobals = useUIPlaygroundStore((s) => s.globals);
+  const playgroundCapabilities = useUIPlaygroundStore((s) => s.capabilities);
+  const playgroundSafeAreaInsets = useUIPlaygroundStore(
+    (s) => s.safeAreaInsets,
+  );
   const currentHash = window.location.hash || "#servers";
   const currentHashRoute = useMemo(
     () => resolveHostedNavigation(currentHash, HOSTED_MODE),
@@ -423,6 +437,14 @@ export default function App() {
 
   // Get the Convex workspace ID from the active workspace
   const activeWorkspace = workspaces[activeWorkspaceId];
+  const isClientConfigSyncPending = useClientConfigStore(
+    (state) =>
+      state.isAwaitingRemoteEcho &&
+      state.pendingWorkspaceId === activeWorkspaceId,
+  );
+  const hostedClientCapabilities = getEffectiveWorkspaceClientCapabilities(
+    activeWorkspace?.clientConfig,
+  ) as Record<string, unknown>;
   const convexWorkspaceId = activeWorkspace?.sharedWorkspaceId ?? null;
   const rawBillingOrganizationId =
     activeOrganizationId ?? activeWorkspace?.organizationId ?? null;
@@ -506,9 +528,29 @@ export default function App() {
       ),
     [appState.servers],
   );
+
+  useEffect(() => {
+    const defaultClientConfig = buildDefaultWorkspaceClientConfig({
+      theme: getInitialThemeMode(),
+      displayMode: playgroundGlobals.displayMode,
+      locale: playgroundGlobals.locale,
+      timeZone: playgroundGlobals.timeZone,
+      deviceCapabilities: playgroundCapabilities,
+      safeAreaInsets: playgroundSafeAreaInsets,
+    });
+
+    useClientConfigStore.getState().loadWorkspaceConfig({
+      workspaceId: activeWorkspaceId,
+      defaultConfig: defaultClientConfig,
+      savedConfig: activeWorkspace?.clientConfig,
+    });
+  }, [activeWorkspaceId, activeWorkspace?.clientConfig]);
+
   useHostedApiContext({
     workspaceId: convexWorkspaceId,
     serverIdsByName: hostedServerIdsByName,
+    clientCapabilities: hostedClientCapabilities,
+    clientConfigSyncPending: isClientConfigSyncPending,
     getAccessToken,
     oauthTokensByServerId,
     guestOauthTokensByServerName,
@@ -641,9 +683,15 @@ export default function App() {
       (learningEnabled !== true || !isAuthenticated)
     ) {
       applyNavigation("servers", { updateHash: true });
+    } else if (
+      activeTab === "client-config" &&
+      (clientConfigEnabled !== true || !isAuthenticated)
+    ) {
+      applyNavigation("servers", { updateHash: true });
     }
   }, [
     ciEvalsEnabled,
+    clientConfigEnabled,
     activeTabBillingFeature,
     activeTabBillingLocked,
     learningEnabled,
@@ -965,6 +1013,13 @@ export default function App() {
               serverName={appState.selectedServer}
             />
           )}
+          {activeTab === "client-config" && (
+            <ClientConfigTab
+              activeWorkspaceId={activeWorkspaceId}
+              workspace={activeWorkspace}
+              onSaveClientConfig={handleUpdateClientConfig}
+            />
+          )}
           {activeTab === "workspace-settings" && (
             <WorkspaceSettingsTab
               activeWorkspaceId={activeWorkspaceId}

mcpjam-inspector/client/src/components/AuthTab.tsx

@@ -23,7 +23,7 @@ import {
 } from "../lib/types/oauth-flow-types";
 import { OAuthFlowProgressSimple } from "./oauth/OAuthFlowProgressSimple";
 import { OAuthStateMachine } from "../lib/oauth/oauth-state-machine";
-import { MCPServerConfig } from "@mcpjam/sdk";
+import type { MCPServerConfig } from "@mcpjam/sdk/browser";
 
 interface StatusMessageProps {
   message: StatusMessage;

mcpjam-inspector/client/src/components/PromptsTab.tsx

@@ -22,7 +22,7 @@ import { EmptyState } from "./ui/empty-state";
 import { ThreePanelLayout } from "./ui/three-panel-layout";
 import { JsonEditor } from "@/components/ui/json-editor";
 import { extractDisplayFromValue } from "@/components/chat-v2/shared/tool-result-text";
-import { MCPServerConfig, type MCPPrompt } from "@mcpjam/sdk";
+import type { MCPPrompt, MCPServerConfig } from "@mcpjam/sdk/browser";
 import {
   getPrompt as getPromptApi,
   listPrompts as listPromptsApi,

mcpjam-inspector/client/src/components/ResourceTemplatesTab.tsx

@@ -12,11 +12,11 @@ import { FileCode, Play, RefreshCw, ChevronRight, Eye } from "lucide-react";
 import { EmptyState } from "./ui/empty-state";
 import { JsonEditor } from "@/components/ui/json-editor";
 import { extractDisplayFromValue } from "@/components/chat-v2/shared/tool-result-text";
-import {
+import type {
+  MCPReadResourceResult,
+  MCPResourceTemplate,
   MCPServerConfig,
-  type MCPResourceTemplate,
-  type MCPReadResourceResult,
-} from "@mcpjam/sdk";
+} from "@mcpjam/sdk/browser";
 import { listResourceTemplates as listResourceTemplatesApi } from "@/lib/apis/mcp-resource-templates-api";
 import { readResource as readResourceTemplateApi } from "@/lib/apis/mcp-resources-api";
 import { LoggerView } from "./logger-view";

mcpjam-inspector/client/src/components/ResourcesTab.tsx

@@ -17,12 +17,12 @@ import { EmptyState } from "./ui/empty-state";
 import { ThreePanelLayout } from "./ui/three-panel-layout";
 import { JsonEditor } from "@/components/ui/json-editor";
 import { extractDisplayFromValue } from "@/components/chat-v2/shared/tool-result-text";
-import {
+import type {
+  MCPReadResourceResult,
+  MCPResource,
+  MCPResourceTemplate,
   MCPServerConfig,
-  type MCPReadResourceResult,
-  type MCPResource,
-  type MCPResourceTemplate,
-} from "@mcpjam/sdk";
+} from "@mcpjam/sdk/browser";
 import {
   listResources,
   readResource as readResourceApi,

mcpjam-inspector/client/src/components/ServersTab.tsx

@@ -28,6 +28,10 @@ import { Skeleton } from "./ui/skeleton";
 import { useConvexAuth } from "convex/react";
 import { Workspace } from "@/state/app-types";
 import { useWorkspaceServers as useRemoteWorkspaceServers } from "@/hooks/useWorkspaces";
+import {
+  getEffectiveServerClientCapabilities,
+  workspaceClientCapabilitiesNeedReconnect,
+} from "@/lib/client-config";
 import {
   DndContext,
   closestCenter,
@@ -78,6 +82,7 @@ function SortableServerCard({
   id,
   dndDisabled,
   server,
+  needsReconnect,
   onDisconnect,
   onReconnect,
   onRemove,
@@ -87,6 +92,7 @@ function SortableServerCard({
   id: string;
   dndDisabled: boolean;
   server: ServerWithName;
+  needsReconnect?: boolean;
   onDisconnect: (name: string) => void;
   onReconnect: (
     name: string,
@@ -117,6 +123,7 @@ function SortableServerCard({
     <div ref={setNodeRef} style={style} {...dragListeners}>
       <ServerConnectionCard
         server={server}
+        needsReconnect={needsReconnect}
         onDisconnect={onDisconnect}
         onReconnect={onReconnect}
         onRemove={onRemove}
@@ -232,6 +239,27 @@ export function ServersTab({
   };
 
   const activeServer = activeId ? workspaceServers[activeId] : null;
+  const reconnectWarningByServerName = useMemo(
+    () =>
+      Object.fromEntries(
+        Object.entries(workspaceServers).map(([serverName, server]) => [
+          serverName,
+          server.connectionStatus === "connected" &&
+            workspaceClientCapabilitiesNeedReconnect({
+              desiredCapabilities: getEffectiveServerClientCapabilities({
+                workspaceClientConfig:
+                  workspaces[activeWorkspaceId]?.clientConfig,
+                serverCapabilities: server.config.capabilities as
+                  | Record<string, unknown>
+                  | undefined,
+              }),
+              initializedCapabilities: server.initializationInfo
+                ?.clientCapabilities as Record<string, unknown> | undefined,
+            }),
+        ]),
+      ),
+    [activeWorkspaceId, workspaceServers, workspaces],
+  );
 
   const detailModalLiveServer = detailModalState.serverName
     ? (workspaceServers[detailModalState.serverName] ?? null)
@@ -478,6 +506,7 @@ export function ServersTab({
                       id={name}
                       dndDisabled={false}
                       server={server}
+                      needsReconnect={reconnectWarningByServerName[name]}
                       onDisconnect={onDisconnect}
                       onReconnect={onReconnect}
                       onRemove={onRemove}
@@ -493,6 +522,9 @@ export function ServersTab({
                 <div style={{ opacity: 0.85 }}>
                   <ServerConnectionCard
                     server={activeServer}
+                    needsReconnect={
+                      reconnectWarningByServerName[activeServer.name]
+                    }
                     onDisconnect={onDisconnect}
                     onReconnect={onReconnect}
                     onRemove={onRemove}
@@ -605,6 +637,7 @@ export function ServersTab({
           isOpen={detailModalState.isOpen}
           onClose={handleCloseDetailModal}
           server={detailModalServer}
+          needsReconnect={reconnectWarningByServerName[detailModalServer.name]}
           defaultTab={detailModalState.defaultTab}
           onSubmit={handleSubmitDetailModal}
           onDisconnect={onDisconnect}

mcpjam-inspector/client/src/components/SettingsTab.tsx

@@ -16,7 +16,7 @@ import { updateThemeMode } from "@/lib/theme-utils";
 import { Plus, Pencil, Trash2 } from "lucide-react";
 import { HOSTED_MODE } from "@/lib/config";
 
-import type { CustomProvider } from "@mcpjam/sdk";
+import type { CustomProvider } from "@mcpjam/sdk/browser";
 
 interface ProviderConfig {
   id: string;

mcpjam-inspector/client/src/components/TasksTab.tsx

@@ -15,7 +15,7 @@ import {
 import { EmptyState } from "./ui/empty-state";
 import { JsonEditor } from "@/components/ui/json-editor";
 import { extractDisplayFromToolResult } from "@/components/chat-v2/shared/tool-result-text";
-import { MCPServerConfig } from "@mcpjam/sdk";
+import type { MCPServerConfig } from "@mcpjam/sdk/browser";
 import {
   Task,
   listTasks,

mcpjam-inspector/client/src/components/ToolsTab.tsx

@@ -40,7 +40,7 @@ import {
 } from "@/lib/apis/mcp-tasks-api";
 import { trackTask } from "@/lib/task-tracker";
 import { validateToolOutput } from "@/lib/schema-utils";
-import { MCPServerConfig } from "@mcpjam/sdk";
+import type { MCPServerConfig } from "@mcpjam/sdk/browser";
 import { detectEnvironment, detectPlatform } from "@/lib/PosthogUtils";
 import { usePostHog } from "posthog-js/react";
 

mcpjam-inspector/client/src/components/__tests__/PromptsTab.test.tsx

@@ -1,7 +1,7 @@
 import { describe, it, expect, vi, beforeEach } from "vitest";
 import { render, screen, fireEvent, waitFor } from "@testing-library/react";
 import { PromptsTab } from "../PromptsTab";
-import type { MCPServerConfig } from "@mcpjam/sdk";
+import type { MCPServerConfig } from "@mcpjam/sdk/browser";
 
 const { mockJsonEditor } = vi.hoisted(() => ({
   mockJsonEditor: vi.fn((props: any) => (

mcpjam-inspector/client/src/components/__tests__/ResourceTemplatesTab.test.tsx

@@ -1,7 +1,7 @@
 import { beforeEach, describe, expect, it, vi } from "vitest";
 import { fireEvent, render, screen, waitFor } from "@testing-library/react";
 import { ResourceTemplatesTab } from "../ResourceTemplatesTab";
-import type { MCPServerConfig } from "@mcpjam/sdk";
+import type { MCPServerConfig } from "@mcpjam/sdk/browser";
 
 const { mockJsonEditor } = vi.hoisted(() => ({
   mockJsonEditor: vi.fn((props: any) => (

mcpjam-inspector/client/src/components/__tests__/ResourcesTab.test.tsx

@@ -1,7 +1,7 @@
 import { describe, it, expect, vi, beforeEach } from "vitest";
 import { render, screen, fireEvent, waitFor } from "@testing-library/react";
 import { ResourcesTab } from "../ResourcesTab";
-import type { MCPServerConfig } from "@mcpjam/sdk";
+import type { MCPServerConfig } from "@mcpjam/sdk/browser";
 
 const { mockJsonEditor } = vi.hoisted(() => ({
   mockJsonEditor: vi.fn((props: any) => (