feat: promote BrowserOS as MCP with UI improvements

packages/browseros-agent/apps/agent/entrypoints/app/ai-settings/AISettingsPage.tsx

@@ -45,6 +45,7 @@ import {
 import type { IncompleteProvider } from './IncompleteProviderCard'
 import { IncompleteProvidersList } from './IncompleteProvidersList'
 import { LlmProvidersHeader } from './LlmProvidersHeader'
+import { McpPromoBanner } from './McpPromoBanner'
 import { NewProviderDialog } from './NewProviderDialog'
 import { ProviderTemplatesSection } from './ProviderTemplatesSection'
 
@@ -347,6 +348,8 @@ export const AISettingsPage: FC = () => {
         onAddProvider={handleAddProvider}
       />
 
+      <McpPromoBanner />
+
       <ProviderTemplatesSection onUseTemplate={handleUseTemplate} />
 
       <ConfiguredProvidersList

packages/browseros-agent/apps/agent/entrypoints/app/ai-settings/McpPromoBanner.tsx

@@ -0,0 +1,57 @@
+import { ArrowRight, Server, X } from 'lucide-react'
+import { type FC, useState } from 'react'
+import { useNavigate } from 'react-router'
+import { Button } from '@/components/ui/button'
+import { MCP_PROMO_BANNER_CLICKED_EVENT } from '@/lib/constants/analyticsEvents'
+import { track } from '@/lib/metrics/track'
+
+export const McpPromoBanner: FC = () => {
+  const [dismissed, setDismissed] = useState(false)
+  const navigate = useNavigate()
+
+  if (dismissed) return null
+
+  const handleClick = () => {
+    track(MCP_PROMO_BANNER_CLICKED_EVENT)
+    navigate('/settings/mcp')
+  }
+
+  return (
+    <div className="relative flex items-center gap-4 rounded-xl border border-border bg-card p-4 shadow-sm transition-all hover:shadow-md">
+      <div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-lg bg-[var(--accent-orange)]/10">
+        <Server className="h-5 w-5 text-[var(--accent-orange)]" />
+      </div>
+      <div className="min-w-0 flex-1">
+        <p className="flex items-center gap-2 font-semibold text-sm">
+          Use BrowserOS with Claude Code, Cursor & more
+          <span className="text-[var(--accent-orange)] text-xs">
+            (66+ tools)
+          </span>
+          <span className="inline-flex items-center gap-1 rounded-full bg-[var(--accent-orange)]/10 px-2.5 py-1 font-semibold text-[var(--accent-orange)] text-xs">
+            <span className="h-1.5 w-1.5 rounded-full bg-[var(--accent-orange)]" />
+            New
+          </span>
+        </p>
+        <p className="text-muted-foreground text-xs">
+          Connect your favorite coding tools to BrowserOS as an MCP server
+        </p>
+      </div>
+      <Button
+        variant="outline"
+        size="sm"
+        onClick={handleClick}
+        className="shrink-0 border-[var(--accent-orange)] bg-[var(--accent-orange)]/10 text-[var(--accent-orange)] hover:bg-[var(--accent-orange)]/20 hover:text-[var(--accent-orange)]"
+      >
+        Set up
+        <ArrowRight className="ml-1 h-3 w-3" />
+      </Button>
+      <button
+        type="button"
+        onClick={() => setDismissed(true)}
+        className="absolute top-2 right-2 rounded-sm p-1 text-muted-foreground opacity-50 transition-opacity hover:opacity-100"
+      >
+        <X className="h-3.5 w-3.5" />
+      </button>
+    </div>
+  )
+}

packages/browseros-agent/apps/agent/entrypoints/app/mcp-settings/MCPServerHeader.tsx

@@ -1,31 +1,40 @@
-import { Check, Copy, ExternalLink, Globe, Server } from 'lucide-react'
-import { type FC, useState } from 'react'
+import {
+  Check,
+  Copy,
+  ExternalLink,
+  Loader2,
+  RefreshCw,
+  Server,
+} from 'lucide-react'
+import { type FC, useCallback, useState } from 'react'
+import { toast } from 'sonner'
 import { Button } from '@/components/ui/button'
+import { MCP_SERVER_RESTARTED_EVENT } from '@/lib/constants/analyticsEvents'
+import { sendServerMessage } from '@/lib/messaging/server/serverMessages'
+import { track } from '@/lib/metrics/track'
 
 interface MCPServerHeaderProps {
   serverUrl: string | null
   isLoading: boolean
   error: string | null
-  title?: string
-  description?: string
-  remoteAccessEnabled?: boolean
+  onServerRestart?: () => void
 }
 
 const DOCS_URL = 'https://docs.browseros.com/features/use-with-claude-code'
+const HEALTH_CHECK_TIMEOUT_MS = 60_000
+const HEALTH_CHECK_INTERVAL_MS = 2_000
 
 export const MCPServerHeader: FC<MCPServerHeaderProps> = ({
   serverUrl,
   isLoading,
   error,
-  title = 'BrowserOS MCP Server',
-  description = 'Connect BrowserOS to MCP clients like claude code, gemini and others.',
-  remoteAccessEnabled = false,
+  onServerRestart,
 }) => {
   const [isCopied, setIsCopied] = useState(false)
+  const [isRestarting, setIsRestarting] = useState(false)
 
   const handleCopy = async () => {
     if (!serverUrl) return
-
     try {
       await navigator.clipboard.writeText(serverUrl)
       setIsCopied(true)
@@ -35,6 +44,57 @@ export const MCPServerHeader: FC<MCPServerHeaderProps> = ({
     }
   }
 
+  const checkServerHealth = useCallback(async (): Promise<boolean> => {
+    try {
+      const result = await sendServerMessage('checkHealth', undefined)
+      return result.healthy
+    } catch {
+      return false
+    }
+  }, [])
+
+  const handleRestart = async () => {
+    setIsRestarting(true)
+    try {
+      const { getBrowserOSAdapter } = await import('@/lib/browseros/adapter')
+      const { BROWSEROS_PREFS } = await import('@/lib/browseros/prefs')
+      const adapter = getBrowserOSAdapter()
+      await adapter.setPref(BROWSEROS_PREFS.RESTART_SERVER, true)
+
+      const startTime = Date.now()
+      const waitForHealth = (): Promise<boolean> =>
+        new Promise((resolve) => {
+          const check = async () => {
+            if (Date.now() - startTime >= HEALTH_CHECK_TIMEOUT_MS) {
+              resolve(false)
+              return
+            }
+            if (await checkServerHealth()) {
+              resolve(true)
+              return
+            }
+            setTimeout(check, HEALTH_CHECK_INTERVAL_MS)
+          }
+          setTimeout(check, HEALTH_CHECK_INTERVAL_MS)
+        })
+
+      const healthy = await waitForHealth()
+      if (healthy) {
+        track(MCP_SERVER_RESTARTED_EVENT)
+        toast.success('Server restarted successfully')
+        onServerRestart?.()
+      } else {
+        toast.error('Server did not respond. Try restarting the browser.')
+      }
+    } catch (err) {
+      toast.error(
+        err instanceof Error ? err.message : 'Failed to restart server',
+      )
+    } finally {
+      setIsRestarting(false)
+    }
+  }
+
   return (
     <div className="rounded-xl border border-border bg-card p-6 shadow-sm transition-all hover:shadow-md">
       <div className="flex items-start gap-4">
@@ -43,18 +103,21 @@ export const MCPServerHeader: FC<MCPServerHeaderProps> = ({
         </div>
         <div className="flex-1">
           <div className="mb-1 flex items-center justify-between">
-            <h2 className="font-semibold text-xl">{title}</h2>
+            <h2 className="font-semibold text-xl">BrowserOS MCP Server</h2>
             <a
               href={DOCS_URL}
               target="_blank"
               rel="noopener noreferrer"
               className="flex items-center gap-1 text-muted-foreground text-sm transition-colors hover:text-[var(--accent-orange)]"
             >
-              Setup a client
+              Docs
               <ExternalLink className="h-3.5 w-3.5" />
             </a>
           </div>
-          <p className="mb-6 text-muted-foreground text-sm">{description}</p>
+          <p className="mb-6 text-muted-foreground text-sm">
+            Connect BrowserOS to MCP clients like Claude Code, Gemini CLI and
+            others.
+          </p>
 
           <div className="flex flex-col gap-2 sm:flex-row sm:items-center">
             <span className="whitespace-nowrap font-medium text-sm">
@@ -76,26 +139,30 @@ export const MCPServerHeader: FC<MCPServerHeaderProps> = ({
                 onClick={handleCopy}
                 disabled={!serverUrl || isLoading}
                 className="shrink-0"
+                title="Copy URL"
               >
                 {isCopied ? (
                   <Check className="h-4 w-4 text-green-600" />
                 ) : (
                   <Copy className="h-4 w-4" />
                 )}
               </Button>
+              <Button
+                variant="outline"
+                size="icon"
+                onClick={handleRestart}
+                disabled={isLoading || isRestarting}
+                className="shrink-0"
+                title="Restart server"
+              >
+                {isRestarting ? (
+                  <Loader2 className="h-4 w-4 animate-spin" />
+                ) : (
+                  <RefreshCw className="h-4 w-4" />
+                )}
+              </Button>
             </div>
           </div>
-
-          {remoteAccessEnabled && serverUrl && !isLoading && (
-            <div className="mt-3 flex items-start gap-2 rounded-lg bg-muted/50 px-3 py-2">
-              <Globe className="mt-0.5 h-3.5 w-3.5 shrink-0 text-muted-foreground" />
-              <p className="text-muted-foreground text-xs">
-                External access is enabled. To connect from another device,
-                replace <span className="font-mono">127.0.0.1</span> with this
-                machine's IP address.
-              </p>
-            </div>
-          )}
         </div>
       </div>
     </div>

packages/browseros-agent/apps/agent/entrypoints/app/mcp-settings/MCPSettingsPage.tsx

@@ -4,16 +4,14 @@ import type { McpTool } from '@/lib/mcp/client'
 import { sendServerMessage } from '@/lib/messaging/server/serverMessages'
 import { MCPServerHeader } from './MCPServerHeader'
 import { MCPToolsSection } from './MCPToolsSection'
-import { ServerSettingsCard } from './ServerSettingsCard'
+import { QuickSetupSection } from './QuickSetupSection'
 
 /** @public */
 export const MCPSettingsPage: FC = () => {
   const [serverUrl, setServerUrl] = useState<string | null>(null)
   const [urlLoading, setUrlLoading] = useState(true)
   const [urlError, setUrlError] = useState<string | null>(null)
 
-  const [remoteAccessEnabled, setRemoteAccessEnabled] = useState(false)
-
   const [tools, setTools] = useState<McpTool[]>([])
   const [toolsLoading, setToolsLoading] = useState(false)
   const [toolsError, setToolsError] = useState<string | null>(null)
@@ -82,14 +80,11 @@ export const MCPSettingsPage: FC = () => {
         serverUrl={serverUrl}
         isLoading={urlLoading}
         error={urlError}
-        remoteAccessEnabled={remoteAccessEnabled}
-      />
-
-      <ServerSettingsCard
         onServerRestart={loadServerUrlAndTools}
-        onRemoteAccessChange={setRemoteAccessEnabled}
       />
 
+      <QuickSetupSection serverUrl={serverUrl} />
+
       <MCPToolsSection
         tools={tools}
         isLoading={toolsLoading}