From 7ae3ea88c34e747ffd749f080433fe0940899ce3 Mon Sep 17 00:00:00 2001 From: samedson Date: Mon, 4 Aug 2025 09:57:58 -0400 Subject: [PATCH 1/2] Prototype adding Resources / Prompts to Firebase MCP --- src/mcp/tools/core/index.ts | 2 + .../tools/core/instrument_with_analytics.ts | 57 +++++++++++++++++++ 2 files changed, 59 insertions(+) create mode 100644 src/mcp/tools/core/instrument_with_analytics.ts diff --git a/src/mcp/tools/core/index.ts b/src/mcp/tools/core/index.ts index 7476304edad..be29631d0e0 100644 --- a/src/mcp/tools/core/index.ts +++ b/src/mcp/tools/core/index.ts @@ -12,6 +12,7 @@ import { get_environment } from "./get_environment"; import { update_environment } from "./update_environment"; import { list_projects } from "./list_projects"; import { consult_assistant } from "./consult_assistant"; +import { instrument_with_analytics } from "./instrument_with_analytics"; export const coreTools: ServerTool[] = [ get_project, @@ -26,4 +27,5 @@ export const coreTools: ServerTool[] = [ get_environment, update_environment, init, + instrument_with_analytics, ]; diff --git a/src/mcp/tools/core/instrument_with_analytics.ts b/src/mcp/tools/core/instrument_with_analytics.ts new file mode 100644 index 00000000000..fb6de82f298 --- /dev/null +++ b/src/mcp/tools/core/instrument_with_analytics.ts @@ -0,0 +1,57 @@ +import { z } from "zod"; +import { tool } from "../../tool"; +import { toContent } from "../../util"; + +const resourceContent = ` +To instrument an app with Google Analytics, you'll need to integrate the appropriate SDK and configure it to track user interactions. The process differs slightly between web and mobile apps. + +### For Mobile Apps: + +Google recommends using the Firebase SDK to integrate Google Analytics 4 (GA4) with mobile apps. Here's a general overview of the steps: + +1. **Set up a Firebase project**. If you don't have one already, create a new project in the Firebase console. +2. **Add your app to the project**. Register your iOS or Android app within the Firebase project, providing your app's bundle ID (for iOS) or package name (for Android). +3. **Download the configuration file**. Firebase will provide a GoogleService-Info.plist file for iOS or a google-services.json file for Android. Add this file to your app's project. +4. **Integrate the Firebase SDK**. Add the necessary Firebase dependencies to your app's build files. +5. **Enable Google Analytics**. In your Firebase project settings, ensure that Google Analytics is enabled. +6. **Start logging events**. You can now use the Firebase SDK to log both automatically collected and custom events in your app. + +### For Web Apps: + +For websites, you can add Google Analytics using either the Global Site Tag (gtag.js) or Google Tag Manager. + +**Using the Global Site Tag (gtag.js):** + +1. **Get your Measurement ID**. In your Google Analytics account, find your unique Measurement ID, which starts with "G-". +2. **Add the gtag.js snippet**. Copy the provided JavaScript snippet and paste it into the section of every page on your website you want to track. + +**Using Google Tag Manager:** + +1. **Set up a Google Tag Manager account**. +2. **Create a new tag**. In your Tag Manager container, create a new tag and select "Google Analytics: GA4 Configuration". +3. **Enter your Measurement ID**. +4. **Set up a trigger**. Configure a trigger to fire the tag on all pages. + +### Key Concepts: + +* **Events**: User interactions with your app, such as screen views, button clicks, or purchases. +* **User properties**: Attributes you define to describe segments of your user base, like language preference or geographic location. +* **Data Streams**: A flow of data from your app or website to Google Analytics. + +By following these steps, you can start collecting valuable data about how users interact with your app, which can help you make informed decisions to improve your app's performance and user experience. +`; + +export const instrument_with_analytics = tool( + { + name: "instrument_with_analytics", + description: "Describes how to instrument an app with Google Analytics.", + inputSchema: z.object({}), + annotations: { + title: "How to instrument an app with Google Analytics", + readOnlyHint: true, + }, + }, + async () => { + return toContent(resourceContent); + }, +); From 8347f53bd359285546b77614cd070772b5daf68d Mon Sep 17 00:00:00 2001 From: samedson Date: Mon, 4 Aug 2025 10:39:06 -0400 Subject: [PATCH 2/2] Updates --- src/mcp/tools/analytics/add_analytics.ts | 131 ++++++++++++++++++ src/mcp/tools/core/index.ts | 4 +- .../tools/core/instrument_with_analytics.ts | 57 -------- 3 files changed, 133 insertions(+), 59 deletions(-) create mode 100644 src/mcp/tools/analytics/add_analytics.ts delete mode 100644 src/mcp/tools/core/instrument_with_analytics.ts diff --git a/src/mcp/tools/analytics/add_analytics.ts b/src/mcp/tools/analytics/add_analytics.ts new file mode 100644 index 00000000000..4c6ee6dac62 --- /dev/null +++ b/src/mcp/tools/analytics/add_analytics.ts @@ -0,0 +1,131 @@ +import { z } from "zod"; +import { tool } from "../../tool"; +import { toContent } from "../../util"; + +const resourceContent = ` +# Firebase Google Analytics Setup Guide + +This guide provides step-by-step instructions for integrating Google Analytics into your web and mobile applications using the Firebase SDK. In addition, this guide gives you information on how to instrument the user's app with Google Analytics. You may skip any setup steps if you find that the user's app is already setup to run Firebase Analytics. + +We will cover the initial setup and provide best practices for instrumenting your code to collect meaningful data. To instrument an app with Google Analytics, you'll need to integrate the appropriate SDK and configure it to track user interactions. The process differs slightly between web and mobile apps. + +--- + +## Prerequisites + +Before you begin, ensure you have the following: + +1. **A Firebase Project**: If you don't have one, create a project in the [Firebase Console](https://console.firebase.google.com/). +2. **Google Analytics Enabled**: In your Firebase Project settings, navigate to the **Integrations** tab and ensure Google Analytics is enabled. You may need to create a new Google Analytics property or link an existing one. +3. **Node.js & Firebase CLI**: Make sure you have Node.js installed. Then, install the Firebase CLI globally to manage your projects from the command line: + \`\`\`bash + npm install -g firebase-tools + firebase login + \`\`\` +4. **Your App's Codebase**: Have your web or mobile application code ready in your development environment. + +--- + +## Common Setup Instructions + +No matter what platform, you will need to first determine the Firebase Project and Firebase App, and fetch the Firebase Config for the user. + +Before going through this step, check if the user already has firebase configuration code for Firebase in their app by searching for \`firebaseConfig\`. If it's already included in their app, skip this step. + +### Step 1: Firebase Project + + - Use the tool \`firebase_get_project\` to determine if there's an active project. + - If there is, fetch the active configuration via \`firebase_list_apps\` and then \`firebase_get_sdk_config\` + - If there isn't an active project, ask the user if they'd like to use an existing project, or create a new one + - If create a new one, use \`firebase_create_project\` to create it + - If use an existing one, use the command line tool \`firebase use \` (you can use \`firebase_list_projects\` to list project IDs if the user doesn't specify an ID). + +### Step 2: Fetch the Firebase Configuration + +Then, we will need to determine the Firebase App, and fetch its configuration. + +Use \`firebase_list_apps\` to see what apps are available, and choose one that is approapriate to the current app in the directory (eg. by comparing the name against the user's \`package.json\`). + - If there are no available web apps, use \`firebase_create_app\` to create one. + +Finally, use \`firebase_get_sdk_config\` to get the App's Firebase Config. + +## Setup for Web Apps +### Step 1: Install the Firebase SDK + +First, check if the user already has \`firebase\` installed by checking their \`package.json\` file. If it's already installed, you can skip this step. + +Using npm (or your preferred package manager), install the Firebase SDK into your project. + +\`\`\`bash +npm install firebase +\`\`\` + +### Step 2: Initialize Firebase + +Before going through this step, check if the user already has initialization code for Firebase Analytics by searching for \`initializeApp\` and \`getAnalytics\` separately. If it's already setup, skip this step. + +\`\`\`js +// Import the functions you need from the SDKs +import { initializeApp } from "firebase/app"; +import { getAnalytics } from "firebase/analytics"; + +// Your web app's Firebase configuration, from the result of \`firebase_get_sdk_config\` +const firebaseConfig = { + apiKey: "AIza....", + authDomain: "your-project-id.firebaseapp.com", + projectId: "your-project-id", + storageBucket: "your-project-id.appspot.com", + messagingSenderId: "...", + appId: "1:...", + measurementId: "G-..." // This is the Google Analytics measurement ID +}; + +// Initialize Firebase +const app = initializeApp(firebaseConfig); + +// Initialize Analytics and get a reference to the service +const analytics = getAnalytics(app); +\`\`\` + +# Instrumenting Your Code for Analytics +### Logging Custom Events + +Use the logEvent function to send custom events. This helps you understand what users are doing in your app. Firebase has a list of recommended events that come with pre-built reporting, but you can also create your own. More information can be found at https://firebase.google.com/docs/analytics/events?platform=web. + +\`\`\` +import { getAnalytics, logEvent } from "firebase/analytics"; + +const analytics = getAnalytics(); +logEvent(analytics, 'share_item', { + item_name: 'Summer T-Shirt', + method: 'Twitter' +}); +\`\`\` + +# Setting User Properties +User properties are attributes you define to describe segments of your user base, such as language preference or geographic location. + +\`\`\` +import { getAnalytics, setUserProperty } from "firebase/analytics"; + +const analytics = getAnalytics(); +setUserProperty(analytics, 'user_tier', 'premium'); +\`\`\` + + +`; + +export const add_analytics = tool( + { + name: "add_analytics", + description: "Describes how to setup and instrument an app with Google Analytics. This tool may be run more than once if the user would like to continue instrumenting their app.", + inputSchema: z.object({}), + annotations: { + title: "How to setup and instrument an app with Google Analytics", + readOnlyHint: true, + }, + }, + async () => { + return toContent(resourceContent); + }, +); diff --git a/src/mcp/tools/core/index.ts b/src/mcp/tools/core/index.ts index be29631d0e0..9a0c62aa64f 100644 --- a/src/mcp/tools/core/index.ts +++ b/src/mcp/tools/core/index.ts @@ -12,7 +12,7 @@ import { get_environment } from "./get_environment"; import { update_environment } from "./update_environment"; import { list_projects } from "./list_projects"; import { consult_assistant } from "./consult_assistant"; -import { instrument_with_analytics } from "./instrument_with_analytics"; +import { add_analytics } from "../analytics/add_analytics"; export const coreTools: ServerTool[] = [ get_project, @@ -27,5 +27,5 @@ export const coreTools: ServerTool[] = [ get_environment, update_environment, init, - instrument_with_analytics, + add_analytics, ]; diff --git a/src/mcp/tools/core/instrument_with_analytics.ts b/src/mcp/tools/core/instrument_with_analytics.ts deleted file mode 100644 index fb6de82f298..00000000000 --- a/src/mcp/tools/core/instrument_with_analytics.ts +++ /dev/null @@ -1,57 +0,0 @@ -import { z } from "zod"; -import { tool } from "../../tool"; -import { toContent } from "../../util"; - -const resourceContent = ` -To instrument an app with Google Analytics, you'll need to integrate the appropriate SDK and configure it to track user interactions. The process differs slightly between web and mobile apps. - -### For Mobile Apps: - -Google recommends using the Firebase SDK to integrate Google Analytics 4 (GA4) with mobile apps. Here's a general overview of the steps: - -1. **Set up a Firebase project**. If you don't have one already, create a new project in the Firebase console. -2. **Add your app to the project**. Register your iOS or Android app within the Firebase project, providing your app's bundle ID (for iOS) or package name (for Android). -3. **Download the configuration file**. Firebase will provide a GoogleService-Info.plist file for iOS or a google-services.json file for Android. Add this file to your app's project. -4. **Integrate the Firebase SDK**. Add the necessary Firebase dependencies to your app's build files. -5. **Enable Google Analytics**. In your Firebase project settings, ensure that Google Analytics is enabled. -6. **Start logging events**. You can now use the Firebase SDK to log both automatically collected and custom events in your app. - -### For Web Apps: - -For websites, you can add Google Analytics using either the Global Site Tag (gtag.js) or Google Tag Manager. - -**Using the Global Site Tag (gtag.js):** - -1. **Get your Measurement ID**. In your Google Analytics account, find your unique Measurement ID, which starts with "G-". -2. **Add the gtag.js snippet**. Copy the provided JavaScript snippet and paste it into the section of every page on your website you want to track. - -**Using Google Tag Manager:** - -1. **Set up a Google Tag Manager account**. -2. **Create a new tag**. In your Tag Manager container, create a new tag and select "Google Analytics: GA4 Configuration". -3. **Enter your Measurement ID**. -4. **Set up a trigger**. Configure a trigger to fire the tag on all pages. - -### Key Concepts: - -* **Events**: User interactions with your app, such as screen views, button clicks, or purchases. -* **User properties**: Attributes you define to describe segments of your user base, like language preference or geographic location. -* **Data Streams**: A flow of data from your app or website to Google Analytics. - -By following these steps, you can start collecting valuable data about how users interact with your app, which can help you make informed decisions to improve your app's performance and user experience. -`; - -export const instrument_with_analytics = tool( - { - name: "instrument_with_analytics", - description: "Describes how to instrument an app with Google Analytics.", - inputSchema: z.object({}), - annotations: { - title: "How to instrument an app with Google Analytics", - readOnlyHint: true, - }, - }, - async () => { - return toContent(resourceContent); - }, -);