feat(desktop): add MCP setup in Integrations

Settings → Integrations starts/stops the local HTTP path, shows
URL + token, and copy-ready Claude Code / Codex snippets. Writes
stay off until a second toggle, which writes mcp.json next to the
DB so a running agent picks it up without recopying the snippet.

Author: tomymaritano

apps/desktop/src/main/handlers/localServerHandlers.ts

@@ -13,6 +13,8 @@ import {
   getOrCreateApiToken,
   type LocalServerHandlers,
 } from '../services/localServer.js';
+import { resolveMcpLaunch } from '../services/mcpLaunch.js';
+import { writeMcpWritesConfig } from '../services/mcpWrites.js';
 import { defineIpcHandler } from '../ipc/registry.js';
 import type { SQLiteNoteRepository, DataPaths } from './types.js';
 
@@ -184,6 +186,45 @@ export function registerLocalServerHandlers(deps: LocalServerHandlerDeps): void
       }
     },
   });
+
+  defineIpcHandler({
+    channel: 'localServer:connectionInfo',
+    args: z.tuple([]),
+    handler: async () => {
+      try {
+        if (!apiToken) {
+          apiToken = await getOrCreateApiToken(dataPaths.root);
+        }
+        const launch = resolveMcpLaunch();
+        const port = server.getPort();
+        return {
+          ok: true,
+          running: server.isRunning(),
+          port,
+          url: `http://127.0.0.1:${port}`,
+          token: apiToken,
+          dbPath: dataPaths.database,
+          mcpCommand: launch?.command ?? null,
+          mcpArgs: launch?.args ?? null,
+        };
+      } catch (err) {
+        return { ok: false, error: err instanceof Error ? err.message : String(err) };
+      }
+    },
+  });
+
+  defineIpcHandler({
+    channel: 'localServer:setWrites',
+    args: z.tuple([z.boolean()]),
+    handler: async writes => {
+      try {
+        await writeMcpWritesConfig(dataPaths.root, writes);
+        return { ok: true };
+      } catch (err) {
+        return { ok: false, error: err instanceof Error ? err.message : String(err) };
+      }
+    },
+  });
 }
 
 /**

apps/desktop/src/main/services/mcpLaunch.ts

@@ -0,0 +1,37 @@
+import { existsSync } from 'fs';
+import { join } from 'path';
+import { app } from 'electron';
+
+export interface McpLaunchSpec {
+  command: string;
+  args: string[];
+}
+
+/**
+ * Find a runnable @dripnex/mcp-server entry on this machine.
+ * Packaged builds typically return null — the UI then shows a fallback path.
+ */
+export function resolveMcpLaunch(): McpLaunchSpec | null {
+  const roots = [app.getAppPath(), process.cwd()];
+  const distRels = [
+    'packages/mcp-server/dist/index.js',
+    '../packages/mcp-server/dist/index.js',
+    '../../packages/mcp-server/dist/index.js',
+    '../../../packages/mcp-server/dist/index.js',
+  ];
+  const srcRels = distRels.map(rel => rel.replace('dist/index.js', 'src/index.ts'));
+
+  for (const root of roots) {
+    for (const rel of distRels) {
+      const candidate = join(root, rel);
+      if (existsSync(candidate)) return { command: 'node', args: [candidate] };
+    }
+  }
+  for (const root of roots) {
+    for (const rel of srcRels) {
+      const candidate = join(root, rel);
+      if (existsSync(candidate)) return { command: 'npx', args: ['-y', 'tsx', candidate] };
+    }
+  }
+  return null;
+}

apps/desktop/src/main/services/mcpWrites.ts

@@ -0,0 +1,14 @@
+import { rename, writeFile } from 'fs/promises';
+import { join } from 'path';
+
+export const MCP_WRITES_FILE = 'mcp.json';
+
+export async function writeMcpWritesConfig(dataRoot: string, writes: boolean): Promise<void> {
+  const dest = join(dataRoot, MCP_WRITES_FILE);
+  const tmp = `${dest}.${process.pid}.tmp`;
+  await writeFile(tmp, `${JSON.stringify({ writes }, null, 2)}\n`, {
+    encoding: 'utf-8',
+    mode: 0o600,
+  });
+  await rename(tmp, dest);
+}

apps/desktop/src/preload/api/index.ts

@@ -60,7 +60,7 @@ export type {
 } from './app';
 
 export { createLocalServerApi } from './localServer';
-export type { LocalServerAPI } from './localServer';
+export type { LocalServerAPI, LocalServerConnectionInfo } from './localServer';
 
 export { createIntegrationsApi } from './integrations';
 export type {

apps/desktop/src/preload/api/localServer.ts

@@ -6,11 +6,23 @@
 
 import { ipcRenderer } from 'electron';
 
+export interface LocalServerConnectionInfo {
+  running: boolean;
+  port: number;
+  url: string;
+  token: string;
+  dbPath: string;
+  mcpCommand: string | null;
+  mcpArgs: string[] | null;
+}
+
 export interface LocalServerAPI {
   start: (port?: number) => Promise<{ ok: boolean; port?: number; error?: string }>;
   stop: () => Promise<{ ok: boolean }>;
   status: () => Promise<{ running: boolean; port: number }>;
   getToken: () => Promise<string>;
+  connectionInfo: () => Promise<LocalServerConnectionInfo>;
+  setWrites: (writes: boolean) => Promise<{ ok: boolean; error?: string }>;
 }
 
 export function createLocalServerApi(): LocalServerAPI {
@@ -23,5 +35,19 @@ export function createLocalServerApi(): LocalServerAPI {
       if (!result.ok) throw new Error(result.error ?? 'Failed to get token');
       return result.value as string;
     },
+    connectionInfo: async () => {
+      const result = await ipcRenderer.invoke('localServer:connectionInfo');
+      if (!result.ok) throw new Error(result.error ?? 'Failed to load MCP connection');
+      return {
+        running: result.running as boolean,
+        port: result.port as number,
+        url: result.url as string,
+        token: result.token as string,
+        dbPath: result.dbPath as string,
+        mcpCommand: (result.mcpCommand as string | null) ?? null,
+        mcpArgs: (result.mcpArgs as string[] | null) ?? null,
+      };
+    },
+    setWrites: writes => ipcRenderer.invoke('localServer:setWrites', writes),
   };
 }

apps/desktop/src/renderer/App.tsx

@@ -38,14 +38,14 @@ import { useAppearanceSettings } from './hooks/useAppearanceSettings';
 import { useOfficialThemes } from './hooks/useOfficialThemes';
 import { useResizableLayout } from './hooks/useResizableLayout';
 import { useSyncStore } from './stores/syncStore';
-
 import { useDeepLinks } from './hooks/useDeepLinks';
 import { useAutoSave } from './hooks/useAutoSave';
 import { useNoteActions } from './hooks/useNoteActions';
 import { useAppCommands } from './hooks/useAppCommands';
 import { useEnsureNowBoard } from './hooks/useNowBoard';
 import { useRefreshOnWindowFocus } from './hooks/useRefreshOnWindowFocus';
 import { usePluginRuntime } from './hooks/usePluginRuntime';
+import { useMcpLocalPath } from './hooks/useMcpLocalPath';
 
 /**
  * Main Notes Application
@@ -56,6 +56,7 @@ function NotesApp() {
   useOfficialThemes();
   useEnsureNowBoard();
   useRefreshOnWindowFocus();
+  useMcpLocalPath();
   useThemeOverrides(); // Applies active theme tokens
   useCssVariables();
 

apps/desktop/src/renderer/hooks/useMcpLocalPath.ts

@@ -0,0 +1,57 @@
+import { useEffect, useState } from 'react';
+import { useSettingsStore } from '../stores/settings';
+
+function useSettingsHydrated(): boolean {
+  const [hydrated, setHydrated] = useState(() => {
+    const persist = (useSettingsStore as { persist?: { hasHydrated: () => boolean } }).persist;
+    return persist?.hasHydrated() ?? true;
+  });
+
+  useEffect(() => {
+    const persist = (
+      useSettingsStore as {
+        persist?: {
+          hasHydrated: () => boolean;
+          onFinishHydration: (fn: () => void) => () => void;
+        };
+      }
+    ).persist;
+    if (!persist) {
+      setHydrated(true);
+      return;
+    }
+    if (persist.hasHydrated()) {
+      setHydrated(true);
+      return;
+    }
+    return persist.onFinishHydration(() => setHydrated(true));
+  }, []);
+
+  return hydrated;
+}
+
+/**
+ * Start/stop the local HTTP path and persist the MCP writes sidecar
+ * whenever Integrations settings change. Lives in the main window so a
+ * Settings toggle still takes effect after the settings window closes.
+ */
+export function useMcpLocalPath(): void {
+  const hydrated = useSettingsHydrated();
+  const enabled = useSettingsStore(s => s.settings.integrations?.mcpEnabled ?? false);
+  const writes = useSettingsStore(s => s.settings.integrations?.mcpWrites ?? false);
+
+  useEffect(() => {
+    if (!hydrated) return;
+    const api = window.dripnex?.localServer;
+    if (!api) return;
+    if (enabled) void api.start();
+    else void api.stop();
+  }, [hydrated, enabled]);
+
+  useEffect(() => {
+    if (!hydrated) return;
+    const setWrites = window.dripnex?.localServer?.setWrites;
+    if (!setWrites) return;
+    void setWrites(writes);
+  }, [hydrated, writes]);
+}

apps/desktop/src/renderer/pages/settings/sections/IntegrationsSection.module.css

@@ -62,6 +62,10 @@
   filter: invert(1);
 }
 
+.brandMark svg {
+  color: #fff;
+}
+
 .cardTop {
   display: flex;
   align-items: flex-start;
@@ -285,3 +289,62 @@
   font-size: 11px;
   color: var(--text-muted);
 }
+
+.copyRow {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+  min-width: 0;
+}
+
+.monoValue {
+  min-width: 0;
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  padding: 8px 10px;
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  background: var(--bg-base);
+  color: var(--text-primary);
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+  font-size: 12px;
+}
+
+.snippet {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.snippetBar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--space-2);
+}
+
+.snippetPre {
+  margin: 0;
+  padding: 10px 12px;
+  overflow-x: auto;
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  background: var(--bg-base);
+  color: var(--text-primary);
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+  font-size: 12px;
+  line-height: 1.45;
+  white-space: pre-wrap;
+  word-break: break-all;
+}
+
+.writesRow {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: var(--space-3);
+  padding-top: var(--space-2);
+  border-top: 1px solid var(--border-subtle);
+}

apps/desktop/src/renderer/pages/settings/sections/IntegrationsSection.tsx

@@ -4,6 +4,7 @@ import { OnePasswordMark } from '../../../integrations/OnePasswordMark';
 import { discoverOnePassword, setOnePasswordAccount } from '../../../integrations/onepassword';
 import { Button } from '../../../ui/primitives';
 import { GitHubCard } from './GitHubCard';
+import { McpCard } from './McpCard';
 import styles from './IntegrationsSection.module.css';
 
 interface IntegrationsSectionProps {
@@ -69,6 +70,8 @@ export function IntegrationsSection({ onOpenEncryption }: IntegrationsSectionPro
         <p className={styles.lede}>Connect tools you already use. Secrets stay on this machine.</p>
       </header>
 
+      <McpCard />
+
       <GitHubCard />
 
       <article className={styles.card} data-tone={badgeTone}>