Build an add-on for Web using the Google Meet Add-ons SDK

This tutorial shows how to build an add-on using the Google Meet Add-ons Software Development Kit (SDK) for Web. This lets you share and collaborate within a web app without leaving Google Meet.

The side panel of the Meet Add-ons SDK for Web.
The main stage of the Meet Add-ons SDK for Web where users collaborate.

Objectives

Create and deploy a Meet Add-ons SDK for Web in the Google Cloud console.
Create a main stage and side panel for the Meet Add-ons SDK for Web.

Prepare your environment

This section shows how to create and configure a Google Cloud project for Meet Add-ons SDK for Web.

Create a Google Cloud project

Google Cloud console

In the Google Cloud console, go to Menu > IAM & Admin > Create a Project.
Go to Create a Project
In the Project Name field, enter a descriptive name for your project.
Optional: To edit the Project ID, click Edit. The project ID can't be changed after the project is created, so choose an ID that meets your needs for the lifetime of the project.
In the Location field, click Browse to display potential locations for your project. Then, click Select.
Caution: Can't find your Google Workspace organization?
This means you aren't signed in to a Google Workspace account. Some of the features described in Google Workspace developer documentation are only available to projects associated with an organization.
Click Create. The Google Cloud console navigates to the Dashboard page and your project is created within a few minutes.

gcloud CLI

In one of the following development environments, access the Google Cloud CLI (`gcloud`):

Cloud Shell: To use an online terminal with the gcloud CLI already set up, activate Cloud Shell.
Activate Cloud Shell
Local Shell: To use a local development environment, install and initialize the gcloud CLI.
To create a Cloud project, use the `gcloud projects create`command:
```
gcloud projects create PROJECT_ID
```
Replace PROJECT_ID by setting the ID for the project you want to create.

Enable the APIs

Console

In the Google Cloud console, enable the Google Workspace Marketplace SDK and Google Workspace Add-ons API.

Enable the APIs
Confirm that you're enabling the APIs in the correct Cloud project, then click Next.
Confirm that you're enabling the correct APIs, then click Enable.

gcloud CLI

If necessary, set the current Google Cloud project to the one you created with the gcloud config set project command:
```
gcloud config set project PROJECT_ID
```
Replace PROJECT_ID with the Project ID of the Cloud project you created.
Enable the Google Workspace Marketplace SDK and Google Workspace Add-ons API with the gcloud services enable command:
```
gcloud services enable appsmarket-component.googleapis.com gsuiteaddons.googleapis.com
```

Create and deploy the web app

In the following section, you will copy and update an entire web application project (built using Firebase) that contains all the required application code for your Meet Add-ons SDK for Web. First, you need to configure and deploy the web application.

Review the sample code

You can view and download the base web application on GitHub.

View on GitHub

Here's an overview of the base code:

It's built using Next.js which is a React-based framework.
It uses Tailwind CSS for styling.
src/components contains the bulk of the application logic. There isn't anything to update or modify here.
src/firebase contains the Firebase configuration and initialization code.
src/app contains the web app entry points.
src/app/page.tsx is the main page or project list.
src/app/project/[id]/page.tsx is the page for an individual project and task list.
.env contains the environment configuration.

Set up the Firebase project and CLI

Firebase is a mobile and web application development platform that helps developers build apps. Firestore is a NoSQL document database that allows users to store, sync, and query data for mobile and web apps. Firestore is where we'll store the to-do list information. Since the app will use Firebase features, the Firebase project along with the Firebase CLI should be set up. To do this:

Create a Firebase project.
Create a Cloud Firestore database.
Install the Firebase CLI or update to its latest version.
Go to the root directory of your base app.
Initialize your project.

Connect your local project files to to your Firebase project:
```
firebase init firestore
```
During project initialization, from the Firebase CLI prompts:
1. Select an option:
  
  Select Use an existing project and then choose the Firebase project you created.
  
  The selected Firebase project is your "default" Firebase project for your local project directory.
2. What file should be used for Firestore Rules?
  
  If it displays (firestore.rules), press Enter. If not, type firestore.rules before you press Enter.
3. File firestore.rules already exists. Do you want to overwrite it with the Firestore Rules from the Firebase Console? (Y/N)
  
  Type "N" and press Enter.
4. What file should be used for Firestore indexes?
  
  If it displays (firestore.indexes.json), press Enter. If not, type firestore.indexes.json before you press Enter.

The Firestore database is now set up and ready to be used for the app.

Authenticate Firebase with Google

Next, enable the authentication with Google provider. To do this:

In the Firebase console, go to the Authentication page.

Go to Firebase Authentication
If this is your first time setting up a provider, click Set up sign-in method. Otherwise, click Add new provider.
Select Google and make sure the status is set to Enable.

Create a web app in Firebase

Lastly, create a web app inside your Firebase project and get the configuration. To do this:

In the Firebase console, register your web app in your Firebase project.
Go to Project settings.
In Your apps, find and click your registered web app.
Take note of the values in firebaseConfig. You will use them in the following section in updating the environment variables.

Find your Google Cloud project number

Open the Google Cloud console.

Go to Google Cloud console
Next to Google Cloud console, click the Down arrow and select your project.
Click Menu > Cloud Overview.
In the Project Info section, note the value of the Project number. You will use it in the following section to update the environment variables.

Update the environment variables

In the .env file of the base code, fill in the following with the details gathered from the previous steps:

NEXT_PUBLIC_GOOGLE_PROJECT_NUMBER=GOOGLE_PROJECT_NUMBER
NEXT_PUBLIC_GOOGLE_PROJECT_ID=PROJECT_ID
NEXT_PUBLIC_GOOGLE_API_KEY=API_KEY
NEXT_PUBLIC_GOOGLE_AUTH_DOMAIN=AUTH_DOMAIN
NEXT_PUBLIC_GOOGLE_STORAGE_BUCKET=STORAGE_BUCKET
NEXT_PUBLIC_GOOGLE_MSG_SENDER_ID=MSG_SENDER_ID
NEXT_PUBLIC_GOOGLE_APPID=APP_ID

Replace the following using the firebaseConfig values and project number gathered in the earlier steps:

GOOGLE_PROJECT_NUMBER: the project number of your Google Cloud project
PROJECT_ID: the projectId of your Firebase web app
API_KEY: the apiKey of your Firebase web app
AUTH_DOMAIN: the authDomain of your Firebase web app
STORAGE_BUCKET: the storageBucket of your Firebase web app
MSG_SENDER_ID: the messagingSenderId of your Firebase web app
APP_ID: the appId of your Firebase web app

Set up your app credentials

To set up your Google application credentials, do the following:

In the Firebase console, go to the Project settings page.

Go to Project settings
In the Service accounts tab, select the Firebase Admin SDK tab.
Click Generate new private key and note the path for the downloaded JSON file.
In your terminal, run the command:
```
export GOOGLE_APPLICATION_CREDENTIALS="JSON_PATH"
```
Replace JSON_PATH with the path where the downloaded JSON file is located.

Deploy to your development server

Now that the code and environment is in place, you can now deploy the web app to your local development server. To do this, go to your web app directory and do the following:

Run the command: npm install and wait for the node modules to download and install.
Run the command: npm run dev.
Go to http://localhost:3000/ to validate that the web app is up and running.

Use the Meet Add-ons SDK for Web

The next step is to make the required code updates to integrate the code and make it a Google Meet Add-on. To do this:

Create the file src/meet/meet.d.ts
1. You can get the latest types from https://www.gstatic.com/meetjs/addons/0.7.0/index.d.ts and save the file locally.

Create the file src/meet/utils.ts

Add the function createAddonSession. This is where the session is established to communicate within Google Meet.

export function createAddonSession() {
  let session;

  session = window.meet.addon.createAddonSession({
    cloudProjectNumber: `${process.env.NEXT_PUBLIC_GOOGLE_PROJECT_NUMBER}`,
  });
  return session;
}

Create the directory src/app/meet. This will serve as the dedicated directory for all meet-specific routes.

Create the file src/app/meet/layout.tsx

The common layout for all Meet-related pages. This is where you inject the Meet SDK script and make sure the SDK is loaded before rendering any of the content.

"use client";

import Script from "next/script";
import { useState } from "react";

type LayoutProps = {
  children: React.ReactNode;
};

/**
* Layout for the add-on pages. Injects the Meet SDK script.
*/
export default function RootLayout({ children }: LayoutProps) {
  const [sdkAvailable, setSdkAvailable] = useState(false);
  return (<>
  <Script
    src="https://www.gstatic.com/meetjs/addons/0.7.0/meet.addons.js"
    onReady={() => setSdkAvailable(true)}
  />
  {sdkAvailable ? children : <div>Loading...</div>}
  </>);
}

Create the file src/app/meet/sidepanel/page.tsx

The side panel content for the Meet Add-on. This page specifically handles content selection and setting the collaboration starting state when content is selected.

"use client";

import { firebaseApp } from "@/firebase/config";
import { getAuth } from "firebase/auth";
import { ProjectList } from "@/components/ProjectList";
import { createAddonSession } from "@/meet/utils";
import { DocumentReference } from "firebase/firestore";
import { useSearchParams } from "next/navigation";
import { useAuthState, useSignInWithGoogle } from "react-firebase-hooks/auth";
import GoogleButton from "react-google-button";

const auth = getAuth(firebaseApp);

async function startCollaboration(ref: DocumentReference) {
  const url = new URL(window.location.href);

  // Initializing session
  const session = await createAddonSession();
  const client = await session.createSidePanelClient();

  client.setCollaborationStartingState({
    mainStageUrl: `${url.protocol}//${url.host}/meet/project/${ref.id}`,
    sidePanelUrl: `${url.protocol}//${url.host}/meet/sidepanel?participant=true`,
  });
}

export default function Home() {
  const params = useSearchParams();
  const [user] = useAuthState(auth);
  const [signInWithGoogle] = useSignInWithGoogle(auth);

  const handleProjectSelect = async (ref: DocumentReference) => {
    // Before navigating, make sure project selection is saved
    // for when a shared activity is started.
    await startCollaboration(ref);
  };

  if (!user) {
    return (
      <GoogleButton
        onClick={() => signInWithGoogle()}
      ></GoogleButton>
    );
  }

  if (params.get("participant")) {
    return <div>You may now close this panel.</div>;
  }

  return (
    <div className="px-4">
      <ProjectList onSelect={handleProjectSelect} />
    </div>
  );
}

Create the file src/app/meet/project/\[id\]/page.tsx

The main stage content for the Meet Add-on. It displays the contents of the chosen project from the side panel.

"use client";

import { Project } from "@/components/Project";
import { createAddonSession } from "@/meet/utils";
import { firebaseApp } from "@/firebase/config";
import { getAuth, User } from "firebase/auth";
import { useRouter } from "next/navigation";
import { useAuthState, useSignInWithGoogle } from "react-firebase-hooks/auth";
import GoogleButton from "react-google-button";

const auth = getAuth(firebaseApp);

// Monitor auth state changes.
if (typeof window !== "undefined") {
  auth.onAuthStateChanged(() => {
    onAuthStateSettled(auth.currentUser);
  });

  auth.authStateReady().then(() => {
    onAuthStateSettled(auth.currentUser);
  });
}

/**
* Check for auth & doc access when auth state changes.
*/
async function onAuthStateSettled(user: User | null | undefined) {
  const session = await createAddonSession();
  const client = await session.createMainStageClient();

  // For participants, side panel should be closed after authentication
  await client.unloadSidePanel();
}

type PageParams = {
  params: {
    id: string;
  };
};

  export default function Page({ params }: PageParams) {
  const router = useRouter();
  const [user, isUserLoading] = useAuthState(auth);

  if (window.meet.addon.getFrameType() === "MAIN_STAGE") {
    if (isUserLoading) {
      return <div>Loading...</div>;
    }
  }

  if (!user) {
    return (
        <GoogleButton
          onClick={() => signInWithGoogle()}
        ></GoogleButton>
      );
  }

  let backButton = null;
  if (window.meet.addon.getFrameType() === "SIDE_PANEL") {
    backButton = (
      <div className="px-2 pb-2 -my-2">
        <button className="flex flex-row" onClick={() => router.back()}>
          <span className="material-icons">arrow_back</span>previous screen
          <div className="sr-only">navigate back</div>
        </button>
      </div>
    );
  }

  return (
    <div className="w-full min-h-screen px-2">
      {backButton}
      <div className="flex flex-col min-h-screeen">
        <Project id={params.id} />
      </div>
    </div>
  );
}

Create a deployment

Set up the deployment of the add-on:

In the Google Cloud console, go to Google Workspace Add-ons API.

Go to Google Workspace Add-ons API
Click the Alternate Runtimes tab.
Click Create new deployment and enter the deployment ID of the add-on. The deployment ID is an arbitrary string that helps the add-on developer identify the deployment containing the add-on manifest. Deployment IDs are required and can have at most 100 characters.
Click Next.

A side panel opens for you to submit the specification of the add-on manifest in JSON format. Use this panel to input the following as your manifest file:

{
"addOns": {
  "common": {
    "name": "My First Meet Web Add-on",
    "logoUrl": "https://fonts.gstatic.com/s/i/googlematerialicons/markunread_mailbox/v6/black-24dp/1x/gm_markunread_mailbox_black_24dp.png"
  },
  "meet": {
    "web": {
      "sidePanelUri": "http://localhost:3000/meet/sidepanel",
      "addOnOrigins": ["http://localhost:3000"]
    }
  }
}
}

Click Submit. If the add-on is deployed successfully, the following message should appear: Deployment "ID" created.
Verify the deployment under the Deployments section of the page.

Test the Meet Add-ons SDK for Web

To test the complete Meet Add-ons SDK for Web, run Google Meet and verify the app works as expected. To do this:

Go to Meet and start a new meeting.
Click Activities.
In the Your add-ons section, you should see My First Meet Web add-on. Select it to run the add-on.
Once the add-on runs, the side panel opens.
Sign in to the app using your Google Account. Once signed in, click New Project.
Select the Untitled Project that was created.
Click Start Activity on the side panel.
Once started, the side panel closes and the main stage opens.

The add-on now runs as expected, but only for the user who signed in through the app (Step 5). Other participants joining the activity through Meet are not able to collaborate within the app as they cannot share the same session with the first user. There's a need for further implementation (such as a token sharing mechanism) to share the content with others.

Clean up

To avoid incurring charges to your Google Cloud account for the resources used in this tutorial, we recommend that you delete the Cloud project.

In the Google Cloud console, go to the Manage resources page. Click Menu > IAM & Admin > Manage Resources.
Go to Resource Manager
In the project list, select the project you want to delete and then click Delete .
In the dialog, type the project ID and then click Shut down to delete the project.

Build an add-on for Web using the Google Meet Add-ons SDK

Objectives

Prepare your environment

Create a Google Cloud project

Google Cloud console

gcloud CLI

Enable the APIs

Console

gcloud CLI

Create and deploy the web app

Review the sample code

Set up the Firebase project and CLI

Authenticate Firebase with Google

Create a web app in Firebase

Find your Google Cloud project number

Update the environment variables

Set up your app credentials

Deploy to your development server

Use the Meet Add-ons SDK for Web

Create a deployment

Test the Meet Add-ons SDK for Web

Clean up

Related topics