feat: added external mcp integrations

Author: cvolzer3

apps/twig/src/main/services/agent/service.ts

@@ -348,7 +348,9 @@ export class AgentService extends TypedEventEmitter<AgentServiceEvents> {
     return this.currentToken || fallback;
   }
 
-  private buildMcpServers(credentials: Credentials): AcpMcpServer[] {
+  private async buildMcpServers(
+    credentials: Credentials,
+  ): Promise<AcpMcpServer[]> {
     const servers: AcpMcpServer[] = [];
 
     const mcpUrl = this.getPostHogMcpUrl(credentials.apiHost);
@@ -367,9 +369,94 @@ export class AgentService extends TypedEventEmitter<AgentServiceEvents> {
       ],
     });
 
+    // Fetch user-installed MCP servers from the PostHog backend
+    const installations = await this.fetchMcpInstallations(credentials);
+
+    for (const installation of installations) {
+      // Skip the PostHog MCP server since it's already included above
+      if (installation.url === mcpUrl) continue;
+
+      if (installation.auth_type === "none") {
+        servers.push({
+          name:
+            installation.name || installation.display_name || installation.url,
+          type: "http",
+          url: installation.url,
+          headers: [],
+        });
+      } else {
+        // Authenticated servers go through the PostHog proxy so credentials
+        // never leave the backend
+        servers.push({
+          name:
+            installation.name || installation.display_name || installation.url,
+          type: "http",
+          url: installation.proxy_url,
+          headers: [{ name: "Authorization", value: `Bearer ${token}` }],
+        });
+      }
+    }
+
     return servers;
   }
 
+  private async fetchMcpInstallations(credentials: Credentials): Promise<
+    Array<{
+      id: string;
+      url: string;
+      proxy_url: string;
+      name: string;
+      display_name: string;
+      auth_type: string;
+    }>
+  > {
+    const token = this.getToken(credentials.apiKey);
+    const baseUrl = this.getPostHogApiBaseUrl(credentials.apiHost);
+    const url = `${baseUrl}/api/environments/${credentials.projectId}/mcp_server_installations/`;
+
+    try {
+      const response = await fetch(url, {
+        headers: {
+          Authorization: `Bearer ${token}`,
+          "Content-Type": "application/json",
+        },
+      });
+
+      if (!response.ok) {
+        log.warn("Failed to fetch MCP installations", {
+          status: response.status,
+        });
+        return [];
+      }
+
+      const data = (await response.json()) as {
+        results?: Array<{
+          id: string;
+          url: string;
+          proxy_url?: string;
+          name: string;
+          display_name: string;
+          auth_type: string;
+          pending_oauth: boolean;
+          needs_reauth: boolean;
+        }>;
+      };
+      const installations = data.results ?? [];
+
+      return installations
+        .filter((i) => !i.pending_oauth && !i.needs_reauth)
+        .map((i) => ({
+          ...i,
+          proxy_url:
+            i.proxy_url ??
+            `${baseUrl}/api/environments/${credentials.projectId}/mcp_server_installations/${i.id}/proxy/`,
+        }));
+    } catch (err) {
+      log.warn("Error fetching MCP installations", { error: err });
+      return [];
+    }
+  }
+
   private buildSystemPrompt(
     credentials: Credentials,
     customInstructions?: string,
@@ -396,6 +483,11 @@ export class AgentService extends TypedEventEmitter<AgentServiceEvents> {
     return "https://mcp.posthog.com/mcp";
   }
 
+  private getPostHogApiBaseUrl(apiHost: string): string {
+    const host = process.env.POSTHOG_PROXY_BASE_URL || apiHost;
+    return host.endsWith("/") ? host.slice(0, -1) : host;
+  }
+
   async startSession(params: StartSessionInput): Promise<SessionResponse> {
     this.validateSessionParams(params);
     const config = this.toSessionConfig(params);
@@ -516,7 +608,7 @@ export class AgentService extends TypedEventEmitter<AgentServiceEvents> {
       });
 
       const mcpServers =
-        adapter === "codex" ? [] : this.buildMcpServers(credentials);
+        adapter === "codex" ? [] : await this.buildMcpServers(credentials);
 
       let configOptions: SessionConfigOption[] | undefined;
       let agentSessionId: string;

apps/twig/src/renderer/api/posthogClient.ts

@@ -13,6 +13,31 @@ import { createApiClient, type Schemas } from "./generated";
 
 const log = logger.scope("posthog-client");
 
+export interface McpRecommendedServer {
+  name: string;
+  url: string;
+  description: string;
+  icon_url: string;
+  auth_type: "none" | "api_key" | "oauth";
+  oauth_provider_kind?: string;
+}
+
+export interface McpServerInstallation {
+  id: string;
+  server_id: string | null;
+  name: string;
+  display_name: string;
+  url: string;
+  description: string;
+  auth_type: "none" | "api_key" | "oauth";
+  configuration: Record<string, unknown>;
+  needs_reauth: boolean;
+  pending_oauth: boolean;
+  proxy_url: string;
+  created_at: string;
+  updated_at: string;
+}
+
 function isObjectRecord(value: unknown): value is Record<string, unknown> {
   return typeof value === "object" && value !== null;
 }
@@ -734,6 +759,94 @@ export class PostHogAPIClient {
     } as RepoAutonomyStatus;
   }
 
+  async getMcpServers(): Promise<McpRecommendedServer[]> {
+    const teamId = await this.getTeamId();
+    const url = new URL(
+      `${this.api.baseUrl}/api/environments/${teamId}/mcp_servers/`,
+    );
+    const response = await this.api.fetcher.fetch({
+      method: "get",
+      url,
+      path: `/api/environments/${teamId}/mcp_servers/`,
+    });
+
+    if (!response.ok) {
+      throw new Error(`Failed to fetch MCP servers: ${response.statusText}`);
+    }
+
+    const data = await response.json();
+    return data.results ?? data ?? [];
+  }
+
+  async getMcpServerInstallations(): Promise<McpServerInstallation[]> {
+    const teamId = await this.getTeamId();
+    const url = new URL(
+      `${this.api.baseUrl}/api/environments/${teamId}/mcp_server_installations/`,
+    );
+    const response = await this.api.fetcher.fetch({
+      method: "get",
+      url,
+      path: `/api/environments/${teamId}/mcp_server_installations/`,
+    });
+
+    if (!response.ok) {
+      throw new Error(
+        `Failed to fetch MCP server installations: ${response.statusText}`,
+      );
+    }
+
+    const data = await response.json();
+    return data.results ?? data ?? [];
+  }
+
+  async installCustomMcpServer(options: {
+    name: string;
+    url: string;
+    auth_type: "none" | "api_key" | "oauth";
+    api_key?: string;
+    description?: string;
+    oauth_provider_kind?: string;
+  }): Promise<McpServerInstallation & { redirect_url?: string }> {
+    const teamId = await this.getTeamId();
+    const apiUrl = new URL(
+      `${this.api.baseUrl}/api/environments/${teamId}/mcp_server_installations/install_custom/`,
+    );
+    const response = await this.api.fetcher.fetch({
+      method: "post",
+      url: apiUrl,
+      path: `/api/environments/${teamId}/mcp_server_installations/install_custom/`,
+      overrides: {
+        body: JSON.stringify(options),
+      },
+    });
+
+    if (!response.ok) {
+      const errorData = await response.json().catch(() => ({}));
+      throw new Error(
+        (errorData as { detail?: string }).detail ??
+          `Failed to install MCP server: ${response.statusText}`,
+      );
+    }
+
+    return await response.json();
+  }
+
+  async uninstallMcpServer(installationId: string): Promise<void> {
+    const teamId = await this.getTeamId();
+    const url = new URL(
+      `${this.api.baseUrl}/api/environments/${teamId}/mcp_server_installations/${installationId}/`,
+    );
+    const response = await this.api.fetcher.fetch({
+      method: "delete",
+      url,
+      path: `/api/environments/${teamId}/mcp_server_installations/${installationId}/`,
+    });
+
+    if (!response.ok && response.status !== 204) {
+      throw new Error(`Failed to uninstall MCP server: ${response.statusText}`);
+    }
+  }
+
   /**
    * Check if a feature flag is enabled for the current project.
    * Returns true if the flag exists and is active, false otherwise.

apps/twig/src/renderer/features/settings/components/SettingsDialog.tsx

@@ -11,6 +11,7 @@ import {
   GearSix,
   Keyboard,
   Palette,
+  Plugs,
   User,
   Wrench,
 } from "@phosphor-icons/react";
@@ -21,6 +22,7 @@ import { AccountSettings } from "./sections/AccountSettings";
 import { AdvancedSettings } from "./sections/AdvancedSettings";
 import { ClaudeCodeSettings } from "./sections/ClaudeCodeSettings";
 import { GeneralSettings } from "./sections/GeneralSettings";
+import { McpServersSettings } from "./sections/McpServersSettings";
 import { PersonalizationSettings } from "./sections/PersonalizationSettings";
 import { ShortcutsSettings } from "./sections/ShortcutsSettings";
 import { UpdatesSettings } from "./sections/UpdatesSettings";
@@ -43,6 +45,7 @@ const SIDEBAR_ITEMS: SidebarItem[] = [
     icon: <Palette size={16} />,
   },
   { id: "claude-code", label: "Claude Code", icon: <Code size={16} /> },
+  { id: "mcp-servers", label: "MCP Servers", icon: <Plugs size={16} /> },
   { id: "shortcuts", label: "Shortcuts", icon: <Keyboard size={16} /> },
   { id: "updates", label: "Updates", icon: <ArrowsClockwise size={16} /> },
   { id: "advanced", label: "Advanced", icon: <Wrench size={16} /> },
@@ -54,6 +57,7 @@ const CATEGORY_TITLES: Record<SettingsCategory, string> = {
   workspaces: "Workspaces",
   personalization: "Personalization",
   "claude-code": "Claude Code",
+  "mcp-servers": "MCP Servers",
   shortcuts: "Shortcuts",
   updates: "Updates",
   advanced: "Advanced",
@@ -65,6 +69,7 @@ const CATEGORY_COMPONENTS: Record<SettingsCategory, React.ComponentType> = {
   workspaces: WorkspacesSettings,
   personalization: PersonalizationSettings,
   "claude-code": ClaudeCodeSettings,
+  "mcp-servers": McpServersSettings,
   shortcuts: ShortcutsSettings,
   updates: UpdatesSettings,
   advanced: AdvancedSettings,