fix(connectors): add "Needs Bearer prefix" checkbox to the connect dialog

Bright Data (and any other header-auth MCP connector, e.g. GitHub, Tavily)
rejected pasted API keys with a 401 because nothing in the Connect/Replace
Key dialog told the user their key needs a `Bearer ` scheme prefix.

Add an explicit, opt-in checkbox to that dialog: when ticked, `Bearer ` is
prepended to the pasted key before it's saved, unless it's already there.
Minimal, single-file change — no new types, no catalog-parsing heuristics,
no change to how keys are stored or resolved server-side.

Fixes #490

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01MxyEPwQ73B27NTr83U69Ba

Author: kristopolous

.changeset/bright-data-bearer-prefix.md

@@ -0,0 +1,5 @@
+---
+"@truefoundry/trueforge-ui": patch
+---
+
+Fix header-auth MCP connectors (e.g. Bright Data) rejecting pasted API keys with 401 because the required `Bearer ` scheme prefix wasn't applied. The Connect / Replace Key dialog now has a "Needs \"Bearer\" prefix" checkbox — when ticked, the prefix is prepended to the pasted key before it's saved, unless it's already present.

packages/trueforge-ui/src/containers/SettingsBuilder/ConnectorSettings.tsx

@@ -44,6 +44,7 @@ const ConnectorSettings = () => {
   const [connectorAwaitingKey, setConnectorAwaitingKey] = useState<ConnectorCatalogEntry | null>(null);
   const [selectedConnector, setSelectedConnector] = useState<ConnectorBase | null>(null);
   const [apiKey, setApiKey] = useState('');
+  const [needsBearerPrefix, setNeedsBearerPrefix] = useState(false);
 
   const connectorIconMap = useMemo(() => {
     return (catalog ?? []).reduce(
@@ -141,6 +142,7 @@ const ConnectorSettings = () => {
   const closeApiKeyModal = () => {
     setConnectorAwaitingKey(null);
     setApiKey('');
+    setNeedsBearerPrefix(false);
     setFormError(null);
   };
 
@@ -166,6 +168,7 @@ const ConnectorSettings = () => {
   const handleConnect = (entry: ConnectorCatalogEntry) => {
     if (entry.auth.type === 'header') {
       setApiKey('');
+      setNeedsBearerPrefix(false);
       setFormError(null);
       setConnectorAwaitingKey(entry);
       return;
@@ -183,9 +186,11 @@ const ConnectorSettings = () => {
     const entry = connectorAwaitingKey;
     setFormError(null);
     void runMutation(async () => {
+      const trimmedKey = apiKey.trim();
+      const keyWithPrefix = needsBearerPrefix && !/^bearer\s/i.test(trimmedKey) ? `Bearer ${trimmedKey}` : trimmedKey;
       const auth: ConnectorAuth = {
         type: 'header',
-        apiKey: apiKey.trim(),
+        apiKey: keyWithPrefix,
         ...(entry.auth.type === 'header' && entry.auth.headerName ? { headerName: entry.auth.headerName } : {}),
       };
       const existing = connectors.ordered.find(({ connector }) => connector.id === entry.id);
@@ -305,6 +310,7 @@ const ConnectorSettings = () => {
                 onClick={event => {
                   event.stopPropagation();
                   setApiKey('');
+                  setNeedsBearerPrefix(false);
                   setConnectorAwaitingKey(connector);
                 }}
               >
@@ -509,6 +515,20 @@ const ConnectorSettings = () => {
                     required
                     className={auiInputClass('h-11')}
                   />
+                  <label className="mt-2 flex w-fit cursor-pointer items-center gap-2 select-none">
+                    <input
+                      type="checkbox"
+                      className="size-4 shrink-0 cursor-pointer accent-primary-button-bg disabled:cursor-not-allowed disabled:opacity-50"
+                      checked={needsBearerPrefix}
+                      disabled={busy}
+                      onChange={event => {
+                        setNeedsBearerPrefix(event.target.checked);
+                      }}
+                    />
+                    <span className="text-sm text-text-secondary">
+                      Needs &quot;Bearer&quot; prefix (some providers reject the raw key otherwise)
+                    </span>
+                  </label>
                 </div>
                 {formError ? <p className="text-failure-bg text-sm">{formError}</p> : null}
               </div>

packages/trueforge-ui/test/containers/SettingsBuilder/ConnectorSettings.test.tsx

@@ -0,0 +1,115 @@
+// @vitest-environment jsdom
+import { fireEvent, render, screen, waitFor, within } from '@testing-library/react';
+import { beforeAll, describe, expect, it } from 'vitest';
+
+import ConnectorSettings from '@/containers/SettingsBuilder/ConnectorSettings.js';
+import { ServerProvider } from '@/server/ServerContext.js';
+import type { ConnectorAuth, ConnectorBase, ConnectorCatalogEntry } from '@/server/types.js';
+import { createMockAgentUIServer, createMockCatalog } from '../../server/mockServer.js';
+
+beforeAll(() => {
+  HTMLDialogElement.prototype.showModal = function showModal() {
+    this.setAttribute('open', '');
+  };
+  HTMLDialogElement.prototype.close = function close() {
+    this.removeAttribute('open');
+    this.dispatchEvent(new Event('close'));
+  };
+});
+
+const brightData: ConnectorCatalogEntry = {
+  id: 'bright-data',
+  name: 'bright-data',
+  description: 'Search the web and scrape pages, including sites behind bot protection.',
+  url: 'https://mcp.brightdata.com/mcp',
+  auth: { type: 'header', headerName: 'Authorization' },
+};
+
+const connectedBrightData: ConnectorBase = {
+  id: 'bright-data',
+  name: 'bright-data',
+  description: brightData.description ?? '',
+  url: brightData.url,
+  auth: { type: 'header', headerName: 'Authorization' },
+  requiresAuth: false,
+  authenticated: true,
+};
+
+function renderConnectorSettings(onCreateConnector: (auth: ConnectorAuth) => void) {
+  const server = createMockAgentUIServer({
+    catalog: createMockCatalog({
+      connectorCatalog: {
+        getConnectorCatalog: async () => [brightData],
+        listConnectors: async () => [],
+        getConnector: async () => connectedBrightData,
+        getToolsByConnectorId: async () => [],
+        createConnector: async req => {
+          onCreateConnector(req.auth);
+          return connectedBrightData;
+        },
+        updateConnector: async () => connectedBrightData,
+        authenticateConnector: async () => ({ authorization_endpoint: '' }),
+        disconnectConnector: async () => connectedBrightData,
+      },
+    }),
+  });
+
+  render(
+    <ServerProvider server={server}>
+      <ConnectorSettings />
+    </ServerProvider>,
+  );
+}
+
+async function openConnectModal() {
+  const row = await screen.findByText('bright-data');
+  const connectButton = within(row.closest('article') as HTMLElement).getByRole('button', { name: 'Connect' });
+  fireEvent.click(connectButton);
+  return within(await screen.findByRole('dialog'));
+}
+
+describe('ConnectorSettings "Needs Bearer prefix" checkbox', () => {
+  it('leaves the key untouched when the checkbox is unticked', async () => {
+    let submittedAuth: ConnectorAuth | undefined;
+    renderConnectorSettings(auth => {
+      submittedAuth = auth;
+    });
+
+    const dialog = await openConnectModal();
+    fireEvent.change(dialog.getByLabelText('API key / token'), { target: { value: 'abc123' } });
+    fireEvent.click(dialog.getByRole('button', { name: 'Connect' }));
+
+    await waitFor(() => expect(submittedAuth).toBeDefined());
+    expect(submittedAuth).toMatchObject({ apiKey: 'abc123' });
+  });
+
+  it('prepends "Bearer " when the checkbox is ticked', async () => {
+    let submittedAuth: ConnectorAuth | undefined;
+    renderConnectorSettings(auth => {
+      submittedAuth = auth;
+    });
+
+    const dialog = await openConnectModal();
+    fireEvent.change(dialog.getByLabelText('API key / token'), { target: { value: 'abc123' } });
+    fireEvent.click(dialog.getByRole('checkbox'));
+    fireEvent.click(dialog.getByRole('button', { name: 'Connect' }));
+
+    await waitFor(() => expect(submittedAuth).toBeDefined());
+    expect(submittedAuth).toMatchObject({ apiKey: 'Bearer abc123' });
+  });
+
+  it('does not double-prefix a key the user already typed with "Bearer "', async () => {
+    let submittedAuth: ConnectorAuth | undefined;
+    renderConnectorSettings(auth => {
+      submittedAuth = auth;
+    });
+
+    const dialog = await openConnectModal();
+    fireEvent.change(dialog.getByLabelText('API key / token'), { target: { value: 'Bearer abc123' } });
+    fireEvent.click(dialog.getByRole('checkbox'));
+    fireEvent.click(dialog.getByRole('button', { name: 'Connect' }));
+
+    await waitFor(() => expect(submittedAuth).toBeDefined());
+    expect(submittedAuth).toMatchObject({ apiKey: 'Bearer abc123' });
+  });
+});