Utilize GCA Agent Mode & Firebase MCP with FDC VSCode (#8880)

* Implement Firebase MCP agent

* change to use cli code

* feature complete

* update prompt file location

* fixes

* add analytics

* add todo

Author: hlshen

firebase-vscode/CHANGELOG.md

@@ -1,5 +1,7 @@
 ## NEXT
 
+- [Changed] Now integrates with GCA in its agentic mode, powered by the Gemini CLI. This brings the Firebase MCP Server directly into the VS Code environment, enabling developers to use natural language to generate application schemas and queries without manually invoking explicit tools.
+
 ## 1.5.1
 
 - Update internal `firebase-tools` dependency to 14.11.0

firebase-vscode/common/messaging/protocol.ts

@@ -123,6 +123,10 @@ export interface WebviewToExtensionParamsMap {
 
   // called from execution panel
   rerunExecution: void;
+
+  /** Docs clicked for analytics */
+  "docs.mcp.clicked": void;
+  "docs.tos.clicked": void;
 }
 
 export interface DataConnectResults {

firebase-vscode/src/analytics.ts

@@ -39,6 +39,9 @@ export enum DATA_CONNECT_EVENT_NAME {
   GEMINI_SCHEMA_CALL = "gemini_schema_call",
   GEMINI_SUCCESS = "gemini_success",
   TRY_GEMINI_CLICKED = "try_gemini_clicked",
+  TRY_FIREBASE_AGENT_CLICKED = "try_firebase_agent_in_gemini_clicked",
+  MCP_DOCS_CLICKED = "mcp_docs_clicked",
+  GIF_TOS_CLICKED = "gif_tos_clicked",
 }
 
 export class AnalyticsLogger {

firebase-vscode/src/data-connect/ai-tools/firebase-mcp.ts

@@ -0,0 +1,44 @@
+import { gemini, gemini as geminiToolModule } from "../../../../src/init/features/aitools/gemini";
+import * as vscode from "vscode";
+import { firebaseConfig } from "../config";
+import { ExtensionBrokerImpl } from "../../extension-broker";
+import { AnalyticsLogger, DATA_CONNECT_EVENT_NAME } from "../../analytics";
+
+
+
+export function registerFirebaseMCP(broker: ExtensionBrokerImpl, analyticsLogger: AnalyticsLogger): vscode.Disposable {
+  const geminiActivateSub = broker.on("firebase.activate.gemini", async () => {
+    analyticsLogger.logger.logUsage(
+      DATA_CONNECT_EVENT_NAME.TRY_FIREBASE_AGENT_CLICKED,
+    );
+    writeToGeminiConfig();
+    await vscode.commands.executeCommand("cloudcode.gemini.chatView.focus");
+    await vscode.commands.executeCommand("geminicodeassist.agent.chat.new"); // opens a new chat when an old one exists;
+  });
+
+  const mcpDocsSub = broker.on("docs.mcp.clicked", () => {
+    analyticsLogger.logger.logUsage(DATA_CONNECT_EVENT_NAME.MCP_DOCS_CLICKED);
+  });
+  const tosSub = broker.on("docs.tos.clicked", () => {
+    analyticsLogger.logger.logUsage(DATA_CONNECT_EVENT_NAME.GIF_TOS_CLICKED);
+  });
+
+  return vscode.Disposable.from(
+    { dispose: geminiActivateSub },
+    { dispose: mcpDocsSub },
+    { dispose: tosSub },
+  );
+}
+
+// Writes the Firebase MCP server to the gemini code assist config file
+export function writeToGeminiConfig() {
+
+  const config = firebaseConfig.value?.tryReadValue;
+  if (!config) {
+    vscode.window.showErrorMessage("Could not read firebase.json");
+    // TODO: Consider writing to HOME_DIR in case of this failure
+    return;
+  }
+
+  geminiToolModule.configure(config,  config.projectDir, [/** TODO: Create "dataconnect" .md file */]);
+}

firebase-vscode/src/data-connect/index.ts

@@ -35,6 +35,10 @@ import { AnalyticsLogger, DATA_CONNECT_EVENT_NAME } from "../analytics";
 import { emulators } from "../init/features";
 import { GCAToolClient } from "./ai-tools/gca-tool";
 import { GeminiToolController } from "./ai-tools/tool-controller";
+import {
+  registerFirebaseMCP,
+  writeToGeminiConfig,
+} from "./ai-tools/firebase-mcp";
 
 class CodeActionsProvider implements vscode.CodeActionProvider {
   constructor(
@@ -159,23 +163,6 @@ export function registerFdc(
     context,
   );
 
-  /** Gemini Related activations */
-  const toolController = new GeminiToolController(
-    analyticsLogger,
-    fdcService,
-    dataConnectConfigs,
-  );
-  const gcaToolClient = new GCAToolClient(context, toolController);
-
-  gcaToolClient.activate();
-
-  broker.on("firebase.activate.gemini", () => {
-    analyticsLogger.logger.logUsage(DATA_CONNECT_EVENT_NAME.TRY_GEMINI_CLICKED);
-    vscode.commands.executeCommand("cloudcode.gemini.chatView.focus");
-  });
-
-  /** End Gemini activations */
-
   // register codelens
   const operationCodeLensProvider = new OperationCodeLensProvider(
     emulatorController,
@@ -249,6 +236,7 @@ export function registerFdc(
     registerFdcDeploy(broker, analyticsLogger),
     registerFdcSdkGeneration(broker, analyticsLogger),
     registerTerminalTasks(broker, analyticsLogger),
+    registerFirebaseMCP(broker, analyticsLogger),
     operationCodeLensProvider,
 
     vscode.languages.registerCodeLensProvider(
@@ -276,7 +264,6 @@ export function registerFdc(
       [{ scheme: "file", language: "yaml", pattern: "**/connector.yaml" }],
       configureSdkCodeLensProvider,
     ),
-    toolController,
     {
       dispose: () => {
         client.stop();

firebase-vscode/webpack.common.js

@@ -183,6 +183,10 @@ const extensionConfig = {
   plugins: [
     new CopyPlugin({
       patterns: [
+        {
+          from: "../prompts",
+          to: "./prompts",
+        },
         {
           from: "../templates",
           to: "./templates",

firebase-vscode/webviews/SidebarApp.tsx

@@ -167,23 +167,40 @@ function DataConnect() {
         </a>
       </Label>
       <Spacer size="xlarge"></Spacer>
-      <Label level={2}>Generate Schema and Operations (Preview)</Label>
+      <Label level={2}>
+        Develop your app with the Firebase Agent in Gemini (Preview)
+      </Label>
       <Spacer size="medium"></Spacer>
       <VSCodeButton
         appearance="secondary"
         onClick={() => {
           broker.send("firebase.activate.gemini");
         }}
       >
-        Try Gemini with @FirebaseDataConnect
+        Build your schema and queries with AI
       </VSCodeButton>
-      <Spacer size="xsmall" />
+      <Spacer size="small" />
       <Label level={3}>
-        See also:{" "}
-        <a href="https://firebase.google.com/docs/gemini-in-firebase#how-gemini-in-firebase-uses-your-data">
+        <a
+          href="https://firebase.google.com/docs/gemini-in-firebase#how-gemini-in-firebase-uses-your-data"
+          onClick={() => {
+            broker.send("docs.tos.clicked");
+          }}
+        >
           Gemini in Firebase Usage and Terms
         </a>
       </Label>
+      <Label level={3}>
+        See also:{" "}
+        <a
+          href="https://firebase.google.com/docs/cli/mcp-server"
+          onClick={() => {
+            broker.send("docs.mcp.clicked");
+          }}
+        >
+          Learn more about Firebase MCP
+        </a>
+      </Label>
     </>
   );
 }

src/init/features/aitools/promptUpdater.ts

@@ -10,8 +10,11 @@ import { Config } from "../../../config";
 import { confirm } from "../../../prompt";
 import * as utils from "../../../utils";
 import { logger } from "../../../logger";
+import { isVSCodeExtension } from "../../../vsCodeUtils";
+
+const CLI_PROMPTS_DIR = path.join(__dirname, "../../../../prompts");
+const VSCODE_PROMPTS_DIR = path.join(__dirname, "./prompts"); // vscode sits in firebase-vscode/dist/ folder
 
-const PROMPTS_DIR = path.join(__dirname, "../../../../prompts");
 const FIREBASE_TAG_REGEX = /<firebase_prompts(?:\s+hash="([^"]+)")?>([\s\S]*?)<\/firebase_prompts>/;
 
 const PROMPT_FILES: Record<string, string> = {
@@ -149,6 +152,7 @@ export function getFeatureContent(feature: string): string {
   const filename = PROMPT_FILES[feature];
   if (!filename) return "";
 
+  const PROMPTS_DIR = isVSCodeExtension() ? VSCODE_PROMPTS_DIR : CLI_PROMPTS_DIR;
   const content = fs.readFileSync(path.join(PROMPTS_DIR, filename), "utf8");
   return content;
 }