apteva 0.4.31 → 0.4.41

package/src/web/components/mcp/IntegrationsPanel.tsx

@@ -10,6 +10,12 @@ interface IntegrationApp {
   logo: string | null;
   categories: string[];
   authSchemes: string[];
+  providerSlug?: string;
+  credentialFields?: {
+    name: string;
+    description?: string;
+    required?: boolean;
+  }[];
 }
 
 interface ConnectedAccount {
@@ -68,9 +74,10 @@ export function IntegrationsPanel({
   const [error, setError] = useState<string | null>(null);
   // For auth method selection (when app supports both OAuth and API Key)
   const [authMethodModal, setAuthMethodModal] = useState<{ app: IntegrationApp } | null>(null);
-  // For API Key modal
+  // For API Key / credential modal
   const [apiKeyModal, setApiKeyModal] = useState<{ app: IntegrationApp } | null>(null);
   const [apiKeyInput, setApiKeyInput] = useState("");
+  const [credentialInputs, setCredentialInputs] = useState<Record<string, string>>({});
   // For MCP config creation modal
   const [mcpConfigModal, setMcpConfigModal] = useState<{ app: IntegrationApp } | null>(null);
   const [mcpConfigName, setMcpConfigName] = useState("");
@@ -153,17 +160,18 @@ export function IntegrationsPanel({
   }, [pendingConnection, authFetch, providerId, projectId, fetchData, onConnectionComplete]);
 
   // Initiate connection
-  const connectApp = async (app: IntegrationApp, apiKey?: string, forceOAuth?: boolean) => {
+  const connectApp = async (app: IntegrationApp, apiKey?: string, forceOAuth?: boolean, fields?: Record<string, string>) => {
     // If app supports multiple auth methods and user hasn't chosen, show choice
-    if (hasMultipleAuthMethods(app) && !apiKey && !forceOAuth) {
+    if (hasMultipleAuthMethods(app) && !apiKey && !fields && !forceOAuth) {
       setAuthMethodModal({ app });
       return;
     }
 
-    // If app supports API key (and user didn't choose OAuth), show API key modal
-    if (supportsApiKey(app) && !apiKey && !forceOAuth) {
+    // If app supports API key (and user didn't choose OAuth), show credential modal
+    if (supportsApiKey(app) && !apiKey && !fields && !forceOAuth) {
       setApiKeyModal({ app });
       setApiKeyInput("");
+      setCredentialInputs({});
       return;
     }
 
@@ -173,7 +181,13 @@ export function IntegrationsPanel({
     try {
       // Build request body
       const body: any = { appSlug: app.slug };
-      if (apiKey) {
+      if (fields && Object.keys(fields).length > 0) {
+        // Multi-field credentials
+        body.credentials = {
+          authScheme: "API_KEY",
+          fields,
+        };
+      } else if (apiKey) {
         body.credentials = {
           authScheme: "API_KEY",
           apiKey,
@@ -231,11 +245,21 @@ export function IntegrationsPanel({
     }
   };
 
-  // Handle API key form submission
+  // Handle API key / credential form submission
   const handleApiKeySubmit = (e: React.FormEvent) => {
     e.preventDefault();
-    if (!apiKeyModal || !apiKeyInput.trim()) return;
-    connectApp(apiKeyModal.app, apiKeyInput.trim());
+    if (!apiKeyModal) return;
+    const hasFields = apiKeyModal.app.credentialFields && apiKeyModal.app.credentialFields.length > 0;
+    if (hasFields) {
+      // Check required fields are filled
+      const requiredFields = apiKeyModal.app.credentialFields!.filter(f => f.required !== false);
+      const allFilled = requiredFields.every(f => credentialInputs[f.name]?.trim());
+      if (!allFilled) return;
+      connectApp(apiKeyModal.app, undefined, false, credentialInputs);
+    } else {
+      if (!apiKeyInput.trim()) return;
+      connectApp(apiKeyModal.app, apiKeyInput.trim());
+    }
   };
 
   // Disconnect (called after confirmation)
@@ -291,6 +315,20 @@ export function IntegrationsPanel({
         return;
       }
 
+      // Auto-add the server locally
+      let autoAdded = false;
+      if (data.config?.id) {
+        try {
+          const addRes = await authFetch(
+            `/api/integrations/${providerId}/configs/${data.config.id}/add${projectParam}`,
+            { method: "POST" }
+          );
+          autoAdded = addRes.ok;
+        } catch {
+          // Non-fatal — server was still created on the provider
+        }
+      }
+
       setMcpConfigSuccess(mcpConfigName);
       onConnectionComplete?.();
     } catch (e) {
@@ -311,17 +349,23 @@ export function IntegrationsPanel({
     });
   };
 
-  // Check if app is connected
-  const isConnected = (appSlug: string) => {
+  // Check if app is connected (also matches via providerSlug for multi-toolkit providers)
+  const isConnected = (app: IntegrationApp) => {
     return connectedAccounts.some(
-      (a) => a.appId === appSlug && a.status === "active"
+      (a) => a.status === "active" && (
+        a.appId === app.slug ||
+        (app.providerSlug && a.appId === app.providerSlug)
+      )
     );
   };
 
-  // Get connection for app (prefer active account)
-  const getConnection = (appSlug: string) => {
-    return connectedAccounts.find((a) => a.appId === appSlug && a.status === "active")
-      || connectedAccounts.find((a) => a.appId === appSlug);
+  // Get connection for app (prefer active account, also matches via providerSlug)
+  const getConnection = (app: IntegrationApp) => {
+    return connectedAccounts.find((a) => a.appId === app.slug && a.status === "active")
+      || (app.providerSlug && connectedAccounts.find((a) => a.appId === app.providerSlug && a.status === "active"))
+      || connectedAccounts.find((a) => a.appId === app.slug)
+      || (app.providerSlug && connectedAccounts.find((a) => a.appId === app.providerSlug))
+      || undefined;
   };
 
   // Filter apps
@@ -337,8 +381,8 @@ export function IntegrationsPanel({
   });
 
   // Group by connected/not connected
-  const connectedApps = filteredApps.filter((app) => isConnected(app.slug));
-  const availableApps = filteredApps.filter((app) => !isConnected(app.slug));
+  const connectedApps = filteredApps.filter((app) => isConnected(app));
+  const availableApps = filteredApps.filter((app) => !isConnected(app));
 
   if (loading) {
     return <div className="text-center py-8 text-[#666]">Loading apps...</div>;
@@ -369,6 +413,7 @@ export function IntegrationsPanel({
                   setAuthMethodModal(null);
                   setApiKeyModal({ app: authMethodModal.app });
                   setApiKeyInput("");
+                  setCredentialInputs({});
                 }}
                 className="w-full text-left p-3 bg-[#0a0a0a] hover:bg-[#1a1a1a] border border-[#333] hover:border-[#f97316] rounded-lg transition"
               >
@@ -400,7 +445,7 @@ export function IntegrationsPanel({
         </div>
       )}
 
-      {/* API Key Modal */}
+      {/* API Key / Credentials Modal */}
       {apiKeyModal && (
         <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50">
           <div className="bg-[#111] border border-[#333] rounded-lg p-6 w-full max-w-md mx-4">
@@ -414,18 +459,46 @@ export function IntegrationsPanel({
               )}
               <div>
                 <h3 className="font-medium">Connect {apiKeyModal.app.name}</h3>
-                <p className="text-xs text-[#666]">Enter your API key to connect</p>
+                <p className="text-xs text-[#666]">
+                  {apiKeyModal.app.credentialFields?.length
+                    ? "Enter your credentials to connect"
+                    : "Enter your API key to connect"}
+                </p>
               </div>
             </div>
             <form onSubmit={handleApiKeySubmit}>
-              <input
-                type="password"
-                value={apiKeyInput}
-                onChange={(e) => setApiKeyInput(e.target.value)}
-                placeholder="Enter API Key..."
-                className="w-full bg-[#0a0a0a] border border-[#333] rounded-lg px-4 py-2 mb-4 focus:outline-none focus:border-[#f97316]"
-                autoFocus
-              />
+              {apiKeyModal.app.credentialFields && apiKeyModal.app.credentialFields.length > 0 ? (
+                <div className="space-y-3 mb-4">
+                  {apiKeyModal.app.credentialFields.map((field, idx) => (
+                    <div key={field.name}>
+                      <label className="block text-xs text-[#888] mb-1">
+                        {field.name.replace(/([A-Z])/g, " $1").replace(/[-_]/g, " ").replace(/\b\w/g, c => c.toUpperCase()).trim()}
+                        {field.required !== false && <span className="text-red-400 ml-0.5">*</span>}
+                      </label>
+                      {field.description && (
+                        <p className="text-[10px] text-[#555] mb-1">{field.description}</p>
+                      )}
+                      <input
+                        type="password"
+                        value={credentialInputs[field.name] || ""}
+                        onChange={(e) => setCredentialInputs(prev => ({ ...prev, [field.name]: e.target.value }))}
+                        placeholder={`Enter ${field.name}...`}
+                        className="w-full bg-[#0a0a0a] border border-[#333] rounded-lg px-4 py-2 focus:outline-none focus:border-[#f97316]"
+                        autoFocus={idx === 0}
+                      />
+                    </div>
+                  ))}
+                </div>
+              ) : (
+                <input
+                  type="password"
+                  value={apiKeyInput}
+                  onChange={(e) => setApiKeyInput(e.target.value)}
+                  placeholder="Enter API Key..."
+                  className="w-full bg-[#0a0a0a] border border-[#333] rounded-lg px-4 py-2 mb-4 focus:outline-none focus:border-[#f97316]"
+                  autoFocus
+                />
+              )}
               <div className="flex gap-2">
                 <button
                   type="button"
@@ -436,7 +509,12 @@ export function IntegrationsPanel({
                 </button>
                 <button
                   type="submit"
-                  disabled={!apiKeyInput.trim() || connecting === apiKeyModal.app.slug}
+                  disabled={
+                    connecting === apiKeyModal.app.slug ||
+                    (apiKeyModal.app.credentialFields?.length
+                      ? !apiKeyModal.app.credentialFields.filter(f => f.required !== false).every(f => credentialInputs[f.name]?.trim())
+                      : !apiKeyInput.trim())
+                  }
                   className="flex-1 text-sm bg-[#f97316] hover:bg-[#ea580c] text-white px-4 py-2 rounded transition disabled:opacity-50"
                 >
                   {connecting === apiKeyModal.app.slug ? "Connecting..." : "Connect"}
@@ -459,10 +537,7 @@ export function IntegrationsPanel({
                   </div>
                   <h3 className="font-medium text-lg">MCP Config Created!</h3>
                   <p className="text-sm text-[#888] mt-2">
-                    "{mcpConfigSuccess}" has been created successfully.
-                  </p>
-                  <p className="text-xs text-[#666] mt-2">
-                    You can now add it to your agents from the MCP Configs tab.
+                    "{mcpConfigSuccess}" has been created and added to your servers.
                   </p>
                 </div>
                 <button
@@ -589,14 +664,19 @@ export function IntegrationsPanel({
               <AppCard
                 key={app.id}
                 app={app}
-                connection={getConnection(app.slug)}
+                connection={getConnection(app)}
                 onConnect={() => connectApp(app)}
                 onDisconnect={() => {
-                  const conn = getConnection(app.slug);
+                  const conn = getConnection(app);
                   if (conn) handleDisconnect(conn);
                 }}
                 onCreateMcpConfig={hideMcpConfig ? undefined : () => openMcpConfigModal(app)}
                 onBrowseTriggers={onBrowseTriggers ? () => onBrowseTriggers(app.slug) : undefined}
+                onUpdateKey={supportsApiKey(app) ? () => {
+                  setApiKeyModal({ app });
+                  setApiKeyInput("");
+                  setCredentialInputs({});
+                } : undefined}
                 connecting={connecting === app.slug}
               />
             ))}
@@ -643,6 +723,7 @@ function AppCard({
   onDisconnect,
   onCreateMcpConfig,
   onBrowseTriggers,
+  onUpdateKey,
   connecting,
 }: {
   app: IntegrationApp;
@@ -651,6 +732,7 @@ function AppCard({
   onDisconnect?: () => void;
   onCreateMcpConfig?: () => void;
   onBrowseTriggers?: () => void;
+  onUpdateKey?: () => void;
   connecting: boolean;
 }) {
   const isConnected = connection?.status === "active";
@@ -739,6 +821,15 @@ function AppCard({
                 Browse Triggers
               </button>
             )}
+            {onUpdateKey && (
+              <button
+                onClick={onUpdateKey}
+                className="text-xs text-[#666] hover:text-[#f97316] transition px-2"
+                title="Update API Key"
+              >
+                Key
+              </button>
+            )}
             {onDisconnect && (
               <button
                 onClick={onDisconnect}

package/src/web/components/mcp/McpPage.tsx

@@ -251,7 +251,16 @@ export function McpPage() {
                         onStart={() => startServer(server.id)}
                         onStop={() => stopServer(server.id)}
                         onDelete={() => deleteServer(server.id)}
-                        onEdit={() => setEditingServer(server)}
+                        onEdit={async () => {
+                          // Fetch full server details (with decrypted env/headers) for editing
+                          try {
+                            const res = await authFetch(`/api/mcp/servers/${server.id}`);
+                            const data = await res.json();
+                            setEditingServer(data.server || server);
+                          } catch {
+                            setEditingServer(server);
+                          }
+                        }}
                       />
                     );
                   })}

package/src/web/components/meta-agent/MetaAgent.tsx

@@ -1,6 +1,6 @@
-import React, { useState, useEffect, useMemo, createContext, useContext, type ReactNode } from "react";
+import React, { useState, useEffect, useMemo, useCallback, createContext, useContext, type ReactNode } from "react";
 import { Chat } from "@apteva/apteva-kit";
-import { useAuth, useProjects } from "../../context";
+import { useAuth, useProjects, useTriggerRefresh } from "../../context";
 
 interface MetaAgentStatus {
   enabled: boolean;
@@ -130,6 +130,7 @@ export function MetaAgentButton() {
 export function MetaAgentPanel() {
   const ctx = useMetaAgent();
   const { currentProjectId, currentProject } = useProjects();
+  const triggerRefresh = useTriggerRefresh();
   if (!ctx?.isAvailable || !ctx.isOpen) return null;
 
   const { agent, isRunning, error, isStarting, startAgent, close } = ctx;
@@ -181,6 +182,7 @@ export function MetaAgentPanel() {
               variant="terminal"
               showHeader={false}
               context={chatContext}
+              onToolResult={triggerRefresh}
             />
           ) : (
             <div className="flex-1 flex flex-col items-center justify-center p-6 text-center">

package/src/web/components/settings/SettingsPage.tsx

@@ -406,7 +406,7 @@ function ProvidersSettings() {
 
         <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
           {browserProviders.map(provider => (
-            <ProviderKeyCard
+            <IntegrationKeyCard
               key={provider.id}
               provider={provider}
               isEditing={selectedProvider === provider.id}
@@ -423,14 +423,14 @@ function ProvidersSettings() {
               onCancelEdit={() => {
                 setSelectedProvider(null);
                 setApiKey("");
-                setExtraField("");
                 setError(null);
               }}
               onApiKeyChange={setApiKey}
               onSave={saveKey}
               onDelete={() => deleteKey(provider.id)}
-              extraField={extraField}
-              onExtraFieldChange={setExtraField}
+              projectsEnabled={projectsEnabled}
+              projects={projects}
+              onRefresh={fetchProviders}
             />
           ))}
         </div>
@@ -956,20 +956,47 @@ function ProviderKeyCard({
   onExtraFieldChange,
 }: ProviderKeyCardProps) {
   const isOllama = provider.id === "ollama";
-  const isUrlBased = isOllama || provider.id === "browserengine" || provider.id === "chrome";
+  const isCDP = provider.id === "cdp";
+  const isUrlBased = isOllama || isCDP;
   const isBrowser = provider.type === "browser";
   const isMultiField = provider.id === "browserbase";
-  const [ollamaStatus, setOllamaStatus] = React.useState<{ connected: boolean; modelCount?: number } | null>(null);
+  const [ollamaStatus, setOllamaStatus] = React.useState<{ connected: boolean; modelCount?: number; isDocker?: boolean } | null>(null);
+  const [installing, setInstalling] = React.useState(false);
+  const [installResult, setInstallResult] = React.useState<{ success: boolean; message: string } | null>(null);
+
+  // Check Ollama status when configured or after install
+  const checkOllamaStatus = React.useCallback(() => {
+    fetch("/api/providers/ollama/status")
+      .then(res => res.json())
+      .then(data => setOllamaStatus({ connected: data.connected, modelCount: data.modelCount, isDocker: data.isDocker }))
+      .catch(() => setOllamaStatus({ connected: false }));
+  }, []);
 
-  // Check Ollama status when configured
   React.useEffect(() => {
-    if (isOllama && provider.hasKey) {
-      fetch("/api/providers/ollama/status")
-        .then(res => res.json())
-        .then(data => setOllamaStatus({ connected: data.connected, modelCount: data.modelCount }))
-        .catch(() => setOllamaStatus({ connected: false }));
+    if (isOllama) {
+      checkOllamaStatus();
+    }
+  }, [isOllama, provider.hasKey, checkOllamaStatus]);
+
+  const handleInstallOllama = async () => {
+    setInstalling(true);
+    setInstallResult(null);
+    try {
+      const res = await fetch("/api/providers/ollama/install", { method: "POST" });
+      const data = await res.json();
+      if (data.success) {
+        setInstallResult({ success: true, message: data.message });
+        // Auto-save the default URL and refresh status
+        checkOllamaStatus();
+      } else {
+        setInstallResult({ success: false, message: data.error || "Installation failed" });
+      }
+    } catch {
+      setInstallResult({ success: false, message: "Failed to connect to server" });
+    } finally {
+      setInstalling(false);
     }
-  }, [isOllama, provider.hasKey]);
+  };
 
   return (
     <div className={`bg-[#111] border rounded-lg p-4 ${
@@ -1049,22 +1076,17 @@ function ProviderKeyCard({
                 onChange={e => onApiKeyChange(e.target.value)}
                 placeholder={isOllama
                   ? "http://localhost:11434"
-                  : provider.id === "browserengine"
-                    ? "http://localhost:8098"
-                    : provider.id === "chrome"
-                      ? "http://localhost:9222"
-                      : provider.hasKey ? "Enter new API key..." : "Enter API key..."}
+                  : isCDP ? "ws://localhost:9222"
+                  : provider.hasKey ? "Enter new API key..." : "Enter API key..."}
                 autoFocus
                 className="w-full bg-[#0a0a0a] border border-[#333] rounded px-3 py-2 focus:outline-none focus:border-[#f97316]"
               />
             )}
             {isUrlBased && (
               <p className="text-xs text-[#666]">
-                {isOllama
-                  ? "Enter your Ollama server URL. Default is http://localhost:11434"
-                  : provider.id === "browserengine"
-                    ? "Enter your BrowserEngine service URL (e.g., http://localhost:8098)"
-                    : "Enter your Chrome DevTools URL (e.g., http://localhost:9222)"}
+                {isCDP
+                  ? "Enter the CDP URL of your browser (e.g., ws://localhost:9222)"
+                  : "Enter your Ollama server URL. Default is http://localhost:11434"}
               </p>
             )}
             {error && <p className="text-red-400 text-sm">{error}</p>}
@@ -1086,7 +1108,24 @@ function ProviderKeyCard({
             </div>
           </div>
         ) : provider.hasKey ? (
-          <div className="flex items-center justify-between">
+          <div>
+            {isOllama && ollamaStatus && !ollamaStatus.connected && !ollamaStatus.isDocker && (
+              <div className="mb-3">
+                <button
+                  onClick={handleInstallOllama}
+                  disabled={installing}
+                  className="w-full px-3 py-1.5 bg-yellow-500/20 text-yellow-400 hover:bg-yellow-500/30 rounded text-sm font-medium transition disabled:opacity-50 disabled:cursor-wait"
+                >
+                  {installing ? "Starting Ollama..." : "Start Ollama"}
+                </button>
+                {installResult && (
+                  <p className={`text-xs mt-1.5 ${installResult.success ? "text-green-400" : "text-red-400"}`}>
+                    {installResult.message}
+                  </p>
+                )}
+              </div>
+            )}
+            <div className="flex items-center justify-between">
             {provider.docsUrl ? (
               <a
                 href={provider.docsUrl}
@@ -1094,7 +1133,7 @@ function ProviderKeyCard({
                 rel="noopener noreferrer"
                 className="text-sm text-[#3b82f6] hover:underline"
               >
-                {isOllama ? "Download Ollama" : "View docs"}
+                {isOllama ? "Ollama docs" : "View docs"}
               </a>
             ) : (
               <span />
@@ -1113,27 +1152,46 @@ function ProviderKeyCard({
                 Remove
               </button>
             </div>
+            </div>
           </div>
         ) : (
-          <div className="flex items-center justify-between">
-            {provider.docsUrl ? (
-              <a
-                href={provider.docsUrl}
-                target="_blank"
-                rel="noopener noreferrer"
-                className="text-sm text-[#3b82f6] hover:underline"
-              >
-                {isOllama ? "Download Ollama" : isBrowser ? "View docs" : "Get API key"}
-              </a>
-            ) : (
-              <span />
+          <div>
+            {isOllama && !ollamaStatus?.isDocker && (
+              <div className="mb-3">
+                <button
+                  onClick={handleInstallOllama}
+                  disabled={installing}
+                  className="w-full px-3 py-2 bg-[#3b82f6]/20 text-[#3b82f6] hover:bg-[#3b82f6]/30 rounded text-sm font-medium transition disabled:opacity-50 disabled:cursor-wait"
+                >
+                  {installing ? "Installing Ollama..." : ollamaStatus?.connected ? "Ollama Running" : "Install Ollama"}
+                </button>
+                {installResult && (
+                  <p className={`text-xs mt-1.5 ${installResult.success ? "text-green-400" : "text-red-400"}`}>
+                    {installResult.message}
+                  </p>
+                )}
+              </div>
             )}
-            <button
-              onClick={onStartEdit}
-              className="text-sm text-[#f97316] hover:text-[#fb923c]"
-            >
-              {isUrlBased ? "Configure" : "+ Add key"}
-            </button>
+            <div className="flex items-center justify-between">
+              {provider.docsUrl ? (
+                <a
+                  href={provider.docsUrl}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="text-sm text-[#3b82f6] hover:underline"
+                >
+                  {isOllama ? "Manual install" : isBrowser ? "View docs" : "Get API key"}
+                </a>
+              ) : (
+                <span />
+              )}
+              <button
+                onClick={onStartEdit}
+                className="text-sm text-[#f97316] hover:text-[#fb923c]"
+              >
+                {isUrlBased ? "Configure" : "+ Add key"}
+              </button>
+            </div>
           </div>
         )}
       </div>
@@ -1180,8 +1238,11 @@ function IntegrationKeyCard({
   const [expanded, setExpanded] = useState(false);
   const [localError, setLocalError] = useState<string | null>(null);
   const [localSaving, setLocalSaving] = useState(false);
+  const [bbProjectId, setBbProjectId] = useState(""); // Browserbase project ID (their internal ID)
   const { confirm, ConfirmDialog } = useConfirm();
 
+  const isBrowserbase = provider.id === "browserbase";
+
   // Fetch all keys for this provider
   const fetchKeys = async () => {
     try {
@@ -1212,12 +1273,18 @@ function IntegrationKeyCard({
     setLocalSaving(true);
     setLocalError(null);
 
+    // For Browserbase, combine API key + BB project ID into JSON
+    let keyToSave = apiKey;
+    if (isBrowserbase && bbProjectId) {
+      keyToSave = JSON.stringify({ api_key: apiKey, project_id: bbProjectId });
+    }
+
     try {
       const res = await authFetch(`/api/keys/${provider.id}`, {
         method: "POST",
         headers: { "Content-Type": "application/json" },
         body: JSON.stringify({
-          key: apiKey,
+          key: keyToSave,
           project_id: selectedProjectId || null,
         }),
       });
@@ -1226,6 +1293,7 @@ function IntegrationKeyCard({
 
       if (res.ok) {
         onApiKeyChange("");
+        setBbProjectId("");
         setSelectedProjectId("");
         onCancelEdit();
         fetchKeys();
@@ -1288,10 +1356,10 @@ function IntegrationKeyCard({
           {isEditing ? (
             <div className="space-y-3">
               <input
-                type="password"
+                type={inputType}
                 value={apiKey}
                 onChange={e => onApiKeyChange(e.target.value)}
-                placeholder={provider.hasKey ? "Enter new API key..." : "Enter API key..."}
+                placeholder={provider.hasKey ? `Enter new ${isUrlBased ? "URL" : "API key"}...` : inputPlaceholder}
                 autoFocus
                 className="w-full bg-[#0a0a0a] border border-[#333] rounded px-3 py-2 focus:outline-none focus:border-[#f97316]"
               />
@@ -1361,6 +1429,13 @@ function IntegrationKeyCard({
     );
   }
 
+  // Determine input type and placeholder based on provider
+  const isUrlBased = provider.isLocal;
+  const inputType = isUrlBased ? "text" : "password";
+  const inputPlaceholder = isUrlBased
+    ? (provider.id === "cdp" ? "ws://localhost:9222" : "http://localhost:11434")
+    : "Enter API key...";
+
   // Enhanced view with project support
   return (
     <>
@@ -1441,14 +1516,24 @@ function IntegrationKeyCard({
         {isEditing ? (
           <div className="space-y-3">
             <input
-              type="password"
+              type={inputType}
               value={apiKey}
               onChange={e => onApiKeyChange(e.target.value)}
-              placeholder="Enter API key..."
+              placeholder={inputPlaceholder}
               autoFocus
               className="w-full bg-[#0a0a0a] border border-[#333] rounded px-3 py-2 focus:outline-none focus:border-[#f97316]"
             />
 
+            {isBrowserbase && (
+              <input
+                type="text"
+                value={bbProjectId}
+                onChange={e => setBbProjectId(e.target.value)}
+                placeholder="Browserbase Project ID (optional)"
+                className="w-full bg-[#0a0a0a] border border-[#333] rounded px-3 py-2 focus:outline-none focus:border-[#f97316] text-sm"
+              />
+            )}
+
             <Select
               value={selectedProjectId}
               onChange={setSelectedProjectId}