Skip to content

Commit a94f4c2

Browse files
jenhjenh
committed
Add first draft callable function for Remote Config server, Vertex AI, and App Check. h/t to @hsubox76 for vertexai sample client example.
1 parent fdb9d14 commit a94f4c2

File tree

12 files changed

+482
-0
lines changed

12 files changed

+482
-0
lines changed

‎Node/call-vertex-remote-config-server/README.md

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
# Use server-side Remote Config with Cloud Functions and Vertex AI
2+
3+
This Cloud Function (`generateWithVertex`) demonstrates how to generate text
4+
using Google's Vertex AI Gemini API, protected by Firebase App Check. It uses
5+
the Firebase Admin SDK for Node.js and Remote Config to manage model parameters,
6+
safety settings, and feature flags.
7+
8+
## Setting up the sample
9+
10+
Follow the [User server-side Remote Config with Cloud Functions and Vertex AI
11+
guide](https://firebase.google.com/docs/remote-config/solution-server) to:
12+
13+
* Set up your Firebase project.
14+
* Enable required APIs and SDKs.
15+
* Configure IAM permissions.
16+
* Test your function in the Firebase emulator.
17+
* Deploy your function.
18+
19+
Important: App Check, Vertex AI and Cloud Functions require a billing
20+
account. Review
21+
[Vertex AI pricing](https://cloud.google.com/vertex-ai/pricing) and
22+
[Firebase pricing](https://firebase.google.com/pricing) before running
23+
this function. If you're new to Firebase and Google Cloud, check to see if
24+
you're eligible for a
25+
[$300 credit](https://firebase.google.com/support/faq#pricing-free-trial) and
26+
a Free Trial Cloud Billing account.
27+
28+
## Next steps
29+
30+
Learn more about Remote Config server implementations at
31+
[Use Remote Config in server
32+
environments](https://firebase.google.com/docs/remote-config/server).

‎Node/call-vertex-remote-config-server/client/README.md

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
Test client for Remote Config server with Vertex AI and Firebase App Check callable function
2+
============================================================================================
3+
4+
Introduction
5+
------------
6+
7+
This is a sample app to run with the Remote Config server with Vertex AI Node.js SDK, secured
8+
with Firebase App Check.
9+
10+
<!-- Introduction
11+
------------
12+
13+
[Read more about Remote Config for servers](https://firebase.google.com/docs/remote-config/server).
14+
15+
Getting Started
16+
---------------
17+
18+
1. Create your project on the [Firebase Console](https://console.firebase.google.com).
19+
2. Create a ReCAPTCHA Enterprise key in the same project.
20+
3. Enable App Check in the Firebase console with the ReCAPTCHA Enterprise site key you created.
21+
4. Copy your Firebase project config and your ReCAPTCHA Enterprise site key into the appropriate places in `config.ts` in this directory.
22+
5. Set up the function as described in the readme in the ../functions directory.
23+
5. In this directory, run `npm install`
24+
6. In this directory, run `npm run dev`
25+
26+
To run this app against the generateWithVertex function running in an emulator, set
27+
`testMode` to true.
28+
29+
<!-- Support
30+
-------
31+
32+
- [Firebase Support](https://firebase.google.com/support/) -->
33+
34+
License
35+
-------
36+
37+
© Google, 2024. Licensed under an [Apache-2](../LICENSE) license.

‎Node/call-vertex-remote-config-server/client/config.ts

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
export const firebaseConfig = {
2+
${YOUR_FIREBASE_CONFIG}
3+
};
4+
5+
// Your ReCAPTCHA Enterprise site key (must be from the same project
6+
// as the Firebase config above).
7+
export const RECAPTCHA_ENTERPRISE_SITE_KEY =
8+
"${YOUR_RECAPTCHA_KEY}";

‎Node/call-vertex-remote-config-server/client/index.html

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>Client app for Remote Config server function with Vertex AI and App Check</title>
7+
</head>
8+
<body>
9+
<script type="module" src="main.ts"></script>
10+
</body>
11+
</html>

‎Node/call-vertex-remote-config-server/client/main.ts

Lines changed: 93 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,93 @@
1+
/**
2+
* @license
3+
* Copyright 2024 Google LLC
4+
*
5+
* Licensed under the Apache License, Version 2.0 (the "License");
6+
* you may not use this file except in compliance with the License.
7+
* You may obtain a copy of the License at
8+
*
9+
* http://www.apache.org/licenses/LICENSE-2.0
10+
*
11+
* Unless required by applicable law or agreed to in writing, software
12+
* distributed under the License is distributed on an "AS IS" BASIS,
13+
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
14+
* See the License for the specific language governing permissions and
15+
* limitations under the License.
16+
*/
17+
18+
import { initializeApp } from "firebase/app";
19+
import { firebaseConfig, RECAPTCHA_ENTERPRISE_SITE_KEY } from "./config";
20+
import {
21+
initializeAppCheck,
22+
ReCaptchaEnterpriseProvider,
23+
} from "firebase/app-check";
24+
import {
25+
getFunctions,
26+
httpsCallable,
27+
connectFunctionsEmulator,
28+
} from "firebase/functions";
29+
30+
// Set to true to test in emulator.
31+
const testMode = false;
32+
33+
// Use showdown to convert Gemini-provided Markdown to HTML
34+
import { Converter } from "showdown";
35+
const converter = new Converter();
36+
37+
// Set up output elements.
38+
const outputDiv = document.createElement("div");
39+
document.body.appendChild(outputDiv);
40+
41+
// Initialize Firebase app.
42+
const app = initializeApp(firebaseConfig);
43+
44+
// Initialize App Check.
45+
initializeAppCheck(app, {
46+
provider: new ReCaptchaEnterpriseProvider(RECAPTCHA_ENTERPRISE_SITE_KEY),
47+
});
48+
49+
// Define generateWithVertex as a call to the generateWithVertex function.
50+
const generateWithVertex = httpsCallable(getFunctions(), "generateWithVertex", {
51+
limitedUseAppCheckTokens: true,
52+
});
53+
54+
// Enable emulator so that it can be used in test mode.
55+
const functions = getFunctions(app, "us-central1"); // Replace with your region
56+
57+
if (testMode) {
58+
connectFunctionsEmulator(functions, "localhost", 5001);
59+
}
60+
61+
// Generate body for index.html.
62+
document.body.innerHTML += `
63+
<form id="promptForm">
64+
<label for="promptInput">Prompt:</label><br>
65+
<input type="text" id="promptInput" name="prompt"><br><br>
66+
<input type="submit" value="Submit">
67+
</form>
68+
<br/>
69+
<p id="generatedText"></p>
70+
71+
`;
72+
73+
const promptForm = document.getElementById("promptForm") as HTMLFormElement;
74+
75+
promptForm.addEventListener("submit", async (event) => {
76+
event.preventDefault();
77+
const promptInput = document.getElementById(
78+
"promptInput"
79+
) as HTMLInputElement;
80+
const prompt = promptInput.value;
81+
82+
try {
83+
const { data } = await generateWithVertex({ prompt });
84+
const generatedTextElement = document.getElementById("generatedText"); // Access the element
85+
const htmlContent = converter.makeHtml(data);
86+
if (!generatedTextElement){
87+
throw new Error("Missing generated text.");
88+
}
89+
generatedTextElement.innerHTML = htmlContent; // Set the element's content
90+
} catch (error) {
91+
console.error("Error calling generateWithVertex:", error);
92+
}
93+
});

‎Node/call-vertex-remote-config-server/client/package.json

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
{
2+
"name": "call-vertex-remote-config-server-client",
3+
"version": "1.0.0",
4+
"description": "JavaScript quickstart for Vertex AI, Firebase Remote Config server, and App Check.",
5+
"repository": {
6+
"type": "git",
7+
"url": "git+https://github.com/firebase/functions-samples.git"
8+
},
9+
"author": "",
10+
"license": "Apache-2.0",
11+
"bugs": {
12+
"url": "https://github.com/firebase/functions-samples/issues"
13+
},
14+
"engines": {
15+
"npm": ">=9.0.0 <10.0.0",
16+
"node": ">=18.0.0 <=20.0.0"
17+
},
18+
"homepage": "https://github.com/firebase/functions-samples#readme",
19+
"devDependencies": {
20+
"typescript": "^5.1.6",
21+
"vite": "^4.4.9"
22+
},
23+
"scripts": {
24+
"dev": "vite",
25+
"build": "vite build",
26+
"format": "prettier --write ."
27+
},
28+
"dependencies": {
29+
"@firebase/functions": "^0.11.5",
30+
"@types/firebase": "^3.2.1",
31+
"firebase": "^10.12.1",
32+
"showdown": "^2.1.0"
33+
}
34+
}

‎Node/call-vertex-remote-config-server/client/vite-env.d.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
/// <reference types="vite/client" />

‎Node/call-vertex-remote-config-server/client/vite.config.js

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
import { defineConfig } from 'vite';
2+
3+
export default defineConfig({
4+
base: '/',
5+
build: {
6+
rollupOptions: {
7+
input: ['index.html'],
8+
},
9+
},
10+
logLevel: 'info',
11+
});

‎Node/call-vertex-remote-config-server/firebase.json

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
{
2+
"functions": [
3+
{
4+
"source": "functions",
5+
"codebase": "call-vertex-remote-config-server",
6+
"ignore": [
7+
"node_modules",
8+
".git",
9+
"firebase-debug.log",
10+
"firebase-debug.*.log",
11+
"*.local",
12+
"*.bak",
13+
]
14+
}
15+
]
16+
}

‎Node/call-vertex-remote-config-server/functions/README.md

Lines changed: 54 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
Example callable function that uses Remote Config server with Vertex AI and Firebase App Check
2+
============================================================================================
3+
4+
Introduction
5+
------------
6+
7+
This is a sample function that provides a basic web form to interact with Google Gemini models
8+
using Vertex AI Gemini API. Parameters are controlled by Remote Config server templates, and
9+
the function is secured with App Check.
10+
11+
<!-- Introduction
12+
------------
13+
14+
[Read more about Remote Config for servers](https://firebase.google.com/docs/remote-config/server).
15+
16+
Getting Started
17+
---------------
18+
19+
1. Create your project on the [Firebase Console](https://console.firebase.google.com).
20+
2. Follow the instructions in client/README.md to set up the app client, ReCAPTCHA Enterprise,
21+
and Firebase App Check.
22+
3. Ensure that the service account running the function has the following IAM roles:
23+
- Remote Config Viewer
24+
- AI platform developer
25+
- Vertex AI user
26+
- Cloud Run Invoker
27+
4. Configure a Remote Config server template on the Firebase console
28+
(see [Use Remote Config in server environments](https://firebase.google.com/remote-config/server)
29+
and
30+
[Use server side Remote Config with Cloud Functions and Vertex AI](https://firebase.google.com/remote-config/solutions-server)
31+
for more information.
32+
33+
To run this function and skip accessing the Vertex AI API (for testing), set is_vertex_enabled to false in
34+
the Remote Config server template.
35+
36+
Important: Vertex AI, Cloud Functions, and Firebase App Check require a
37+
billing account. Review
38+
[Vertex AI pricing](https://cloud.google.com/vertex-ai/pricing) and
39+
[Firebase pricing](https://firebase.google.com/pricing) before running
40+
this function. If you're new to Firebase and Google Cloud, check to see if
41+
you're eligible for a
42+
[$300 credit](https://firebase.google.com/support/faq#pricing-free-trial) and
43+
a Free Trial Cloud Billing account.
44+
45+
46+
<!-- Support
47+
-------
48+
49+
- [Firebase Support](https://firebase.google.com/support/) -->
50+
51+
License
52+
-------
53+
54+
© Google, 2024. Licensed under an [Apache-2](../LICENSE) license.

0 commit comments

Comments
 (0)