From 37791a99038a611f5dad5f51f3830d0d6f4ffbdb Mon Sep 17 00:00:00 2001
From: Devin Chasanoff <devchas@google.com>
Date: Fri, 4 Apr 2025 12:31:05 -0400
Subject: [PATCH 1/2] Add Angular quickstart guide

---
 README.md         |   1 +
 docs/_guides.yaml |   2 +
 docs/angular.md   | 227 ++++++++++++++++++++++++++++++++++++++++++++++
 3 files changed, 230 insertions(+)
 create mode 100644 docs/angular.md

diff --git a/README.md b/README.md
index ac76b62b0c..7803240ef9 100644
--- a/README.md
+++ b/README.md
@@ -31,6 +31,7 @@ While developed by the [Firebase](https://firebase.google.com) team, Genkit can
 ## Get started
 
 - [Node.js quickstart](https://firebase.google.com/docs/genkit/get-started)
+- [Angular quickstart](https://firebase.google.com/docs/genkit/angular)
 - [Next.js quickstart](https://firebase.google.com/docs/genkit/nextjs)
 - [Go quickstart](https://firebase.google.com/docs/genkit-go/get-started-go)
 
diff --git a/docs/_guides.yaml b/docs/_guides.yaml
index a4a69e7c38..a370c4c8f2 100644
--- a/docs/_guides.yaml
+++ b/docs/_guides.yaml
@@ -105,6 +105,8 @@ toc:
     path: /docs/genkit/plugins/firebase
 
   - break: true
+  - title: Using Genkit with Angular
+    path: /docs/genkit/angular
   - title: Using Genkit with Next.js
     path: /docs/genkit/nextjs
 
diff --git a/docs/angular.md b/docs/angular.md
new file mode 100644
index 0000000000..728dbd3d9b
--- /dev/null
+++ b/docs/angular.md
@@ -0,0 +1,227 @@
+# Use Genkit in an Angular app
+
+This page shows how you can use Genkit flows in Angular apps.
+
+## Before you begin
+
+You should be familiar with Genkit's concept of [flows](flows), and how to write
+them.
+
+## Create an Angular project
+
+This guide will use an Angular app with
+[SSR with server routing](https://angular.dev/guide/hybrid-rendering).
+
+You can create a new project with server-side routing with the
+[Angular CLI](https://angular.dev/installation#install-angular-cli):
+
+```posix-terminal
+ng new --ssr --server-routing
+```
+
+You can also add server-side routing to an existing project with the `ng add` command:
+
+```posix-terminal
+ng add @angular/ssr --server-routing
+```
+
+## Install Genkit dependencies
+
+Install the Genkit dependencies into your Angular app, the same way you would
+for any Genkit project:
+
+1.  Install the core Genkit library:
+
+    ```posix-terminal
+    npm i --save genkit
+    ```
+
+1.  Install at least one model plugin.
+
+    For example, to use Google AI:
+
+    ```posix-terminal
+    npm i --save @genkit-ai/googleai
+    ```
+
+    Or to use Vertex AI:
+
+    ```posix-terminal
+    npm i --save @genkit-ai/vertexai
+    ```
+
+1.  Install the Genkit Express library:
+
+    ```posix-terminal
+    npm i --save @genkit-ai/express
+    ```
+
+1.  Install Zod:
+
+    ```posix-terminal
+    npm i --save zod
+    ```
+
+1.  If you didn't install the Genkit CLI globally, you can install it as a
+    development dependency. The tsx tool is also recommended, as it makes
+    testing your code more convenient. Both of these dependencies are optional,
+    however.
+
+    ```posix-terminal
+    npm i --save-dev genkit-cli tsx
+    ```
+
+## Define Genkit flows
+
+Create a new file in your Angular project to contain your Genkit flows: for
+example, `src/genkit.ts`. This file can contain your flows without
+modification.
+
+For example:
+
+```ts
+import { gemini20Flash, googleAI } from "@genkit-ai/googleai";
+import { genkit } from "genkit";
+import { z } from "zod";
+
+const ai = genkit({
+  plugins: [googleAI()],
+  model: gemini20Flash,
+});
+
+export const menuSuggestionFlow = ai.defineFlow(
+  {
+    name: "menuSuggestionFlow",
+    inputSchema: z.string(),
+    outputSchema: z.string(),
+  },
+  async (restaurantTheme) => {
+    const { text } = await ai.generate(`Invent a menu item for a ${restaurantTheme} themed restaurant.`);
+    return text;
+  }
+);
+```
+
+## Add server routes
+
+Add the following imports to `src/server.ts`:
+
+```ts
+import { expressHandler } from '@genkit-ai/express';
+import { menuSuggestionFlow } from './genkit';
+```
+
+Add the following line following your `app` variable initialization:
+
+```ts
+app.use(express.json());
+```
+
+Then, add a route to serve your flow:
+
+```ts
+app.post('/menu', expressHandler(menuSuggestionFlow));
+```
+
+## Call your flows
+
+Now, you can run your flows from your client application.
+
+For example, you can replace the contents of
+`src/app/app.component.ts` with the following:
+
+```ts
+import { Component, resource, signal } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import { runFlow } from 'genkit/beta/client';
+
+@Component({
+  selector: 'app-root',
+  imports: [FormsModule],
+  templateUrl: './app.component.html',
+})
+export class AppComponent {
+  menuInput = '';
+  theme = signal('');
+
+  menuResource = resource({
+    request: () => this.theme(),
+    loader: ({request}) => runFlow({ url: 'menu', input: request })
+  });
+}
+```
+
+Make corresponding updates to `src/app/app.component.html`:
+
+```ts
+<h3>Generate a custom menu item</h3>
+<input type="text" [(ngModel)]="menuInput" />
+<button (click)="this.theme.set(menuInput)">Generate</button>
+<br />
+@if (menuResource.isLoading()) {
+  Loading...
+} @else {
+  <pre>{{menuResource.value()}}</pre>
+}
+```
+
+## Test your app locally
+
+If you want to run your app locally, you need to make credentials for the model
+API service you chose available.
+
+- {Gemini (Google AI)}
+
+  1.  Make sure Google AI is
+      [available in your region](https://ai.google.dev/available_regions).
+
+  1.  [Generate an API key](https://aistudio.google.com/app/apikey) for the
+      Gemini API using Google AI Studio.
+
+  1.  Set the `GOOGLE_GENAI_API_KEY` environment variable to your key:
+
+      ```posix-terminal
+      export GOOGLE_GENAI_API_KEY=<your API key>
+      ```
+
+- {Gemini (Vertex AI)}
+
+  1.  In the Cloud console,
+      [Enable the Vertex AI API](https://console.cloud.google.com/apis/library/aiplatform.googleapis.com?project=_)
+      for your project.
+
+  1.  Set some environment variables and use the
+      [`gcloud`](https://cloud.google.com/sdk/gcloud) tool to set up application
+      default credentials:
+
+      ```posix-terminal
+      export GCLOUD_PROJECT=<your project ID>
+
+      export GCLOUD_LOCATION=us-central1
+
+      gcloud auth application-default login
+      ```
+
+Then, run your app locally as normal:
+
+```posix-terminal
+ng serve
+```
+
+All of Genkit's development tools continue to work as normal. For example, to
+load your flows in the developer UI:
+
+```posix-terminal
+npx genkit start -- ng serve
+```
+
+## Deploy your app 
+
+When you deploy your app, you will need to make sure the credentials for any
+external services you use (such as your chosen model API service) are available
+to the deployed app. See the following pages for information specific to your
+chosen deployment platform:
+
+- [Cloud Functions for Firebase](firebase)
+- [Cloud Run](cloud-run)
+- [Other Node.js platforms](deploy-node)

From 5c9b124d378c7a19f1990e0a5b605deaa0b0839d Mon Sep 17 00:00:00 2001
From: Devin Chasanoff <devchas@google.com>
Date: Mon, 7 Apr 2025 09:54:48 -0400
Subject: [PATCH 2/2] Update GEMINI env var

---
 docs/angular.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/docs/angular.md b/docs/angular.md
index 728dbd3d9b..847cd2ccb8 100644
--- a/docs/angular.md
+++ b/docs/angular.md
@@ -178,10 +178,10 @@ API service you chose available.
   1.  [Generate an API key](https://aistudio.google.com/app/apikey) for the
       Gemini API using Google AI Studio.
 
-  1.  Set the `GOOGLE_GENAI_API_KEY` environment variable to your key:
+  1.  Set the `GEMINI_API_KEY` environment variable to your key:
 
       ```posix-terminal
-      export GOOGLE_GENAI_API_KEY=<your API key>
+      export GEMINI_API_KEY=<your API key>
       ```
 
 - {Gemini (Vertex AI)}