feat: add new Angular and Genkit example applications and configurations

dynamic-sdui-app/package.json

@@ -50,7 +50,8 @@
     "postcss": "^8.5.6",
     "rxjs": "~7.8.0",
     "tailwindcss": "^4.1.15",
-    "tslib": "^2.3.0"
+    "tslib": "^2.3.0",
+    "zod": "4.4.3"
   },
   "devDependencies": {
     "@angular-devkit/build-angular": "^18.1.0-next.1",

dynamic-sdui-app/src/genkit-utils/flows.ts

@@ -5,9 +5,8 @@
  * Use of this source code is governed by an MIT-style license that can be
  * found in the LICENSE file at https://angular.dev/license
  */
-import { genkit, MessageData } from 'genkit/beta';
-import { z } from "zod";
-import { googleAI } from "@genkit-ai/googleai";
+import { genkit, MessageData, z } from 'genkit/beta';
+import { googleAI } from "@genkit-ai/googleai"; // @genkit-ai/google-genai
 import { vertexAI } from '@genkit-ai/vertexai';
 import { systemInstructions } from './prompts';
 import { DATA } from './data-store';

dynamic-sdui-app/tsconfig.app.json

@@ -3,6 +3,7 @@
 {
   "extends": "./tsconfig.json",
   "compilerOptions": {
+    "rootDir": "./src",
     "outDir": "./out-tsc/app",
     "types": [
       "node"

genkit-angular-starter-kit/README.md

@@ -13,11 +13,12 @@ Here's an example of the running application:
 
 In order to run this example, make sure that your development environment meets the following requirements:
 
-* Node.js v20+
-* npm
+- Node.js v20+
+- npm
 
 This example will use the Gemini API which provides a generous free tier and does not require a credit card to get started.
 To use the Gemini API, you'll need an API key. If you don't already have one, create a key in Google AI Studio.
+export GEMINI_API_KEY=
 
 1. [Get an API key from Google AI Studio](https://makersuite.google.com/app/apikey)
 1. After you’ve created an API key, set the `GEMINI_API_KEY` environment variable to your key with the command `export GEMINI_API_KEY=<your API key>`
@@ -33,7 +34,7 @@ This application uses [server-side rendering](https://angular.dev/guide/ssr) and
 how to add integrate [Genkit flows](https://firebase.google.com/docs/genkit/flows) into the
 Node.js Express server Angular uses to render content.
 
-The flow is defined in  `src/flows.ts`. Our flow, named `chatFlow` demonstrates how to use
+The flow is defined in `src/flows.ts`. Our flow, named `chatFlow` demonstrates how to use
 [persistent chat sessions](https://firebase.google.com/docs/genkit/chat) to return a response from
 the agent, as well as several options the user can choose from, if applicable. This application also
 demonstrates how to use of [Genkit tools](https://firebase.google.com/docs/genkit/tool-calling).
@@ -45,7 +46,7 @@ You can customize this flow or even add new flows following this same pattern. W
 
 ## Looking for inspiration?
 
-For a more advanced example of using Genkit with Angular, check out the 
+For a more advanced example of using Genkit with Angular, check out the
 [genkit-angular-story-generator repo](../genkit-angular-story-generator/), which is an interactive
 graphic novel builder.
 
@@ -60,3 +61,5 @@ inspecting and debugging Genkit flows in your application. You can run your app
 
 1. Installing the [Genkit Command Line Interface (CLI)](https://firebase.google.com/docs/genkit/devtools#command_line_interface_cli)
 1. Running `npm run start:with-genkit-ui`
+
+https://firebase.google.com/docs/genkit/plugins/google-genai or https://genkit.dev/docs/js/integrations/google-genai/

genkit-angular-starter-kit/package.json

@@ -13,6 +13,7 @@
   "private": true,
   "dependencies": {
     "@angular/animations": "^19.2.4",
+    "@angular/cdk": "19.2.19",
     "@angular/common": "^19.2.4",
     "@angular/compiler": "^19.2.4",
     "@angular/core": "^19.2.4",
@@ -24,6 +25,7 @@
     "@angular/router": "^19.2.4",
     "@angular/ssr": "^19.2.5",
     "@genkit-ai/express": "^1.0.4",
+    "@genkit-ai/google-genai": "1.40.1",
     "@genkit-ai/googleai": "^1.0.4",
     "data-urls": "^5.0.0",
     "express": "^4.18.2",

genkit-angular-starter-kit/src/flows.ts

@@ -6,14 +6,16 @@
  * found in the LICENSE file at https://angular.dev/license
  */
 import { Chat, genkit, Session } from 'genkit/beta';
-import { googleAI, gemini20Flash } from '@genkit-ai/googleai';
+import { googleAI } from '@genkit-ai/google-genai';
 import { parse } from 'partial-json';
 import { z } from 'zod';
 
-const model = gemini20Flash;
+const model = 'gemini-3.0-pro';
 
 const ai = genkit({
-  plugins: [googleAI()],
+  plugins: [googleAI({
+      apiKey: process.env.GEMINI_API_KEY 
+    })],
   model
 });
 

genkit-angular-starter-kit/tsconfig.json

@@ -5,6 +5,7 @@
   "compilerOptions": {
     "outDir": "./dist/out-tsc",
     "strict": true,
+    "ignoreDeprecations": "5.0",
     "noImplicitOverride": true,
     "noPropertyAccessFromIndexSignature": true,
     "noImplicitReturns": true,

genkit-angular-story-generator/package.json

@@ -13,6 +13,7 @@
   "private": true,
   "dependencies": {
     "@angular/animations": "^19.2.5",
+    "@angular/cdk": "19.2.19",
     "@angular/common": "^19.2.5",
     "@angular/compiler": "^19.2.5",
     "@angular/core": "^19.2.5",

logistics-manager-app/package.json

@@ -24,6 +24,7 @@
   "packageManager": "npm@10.9.3",
   "dependencies": {
     "@angular/aria": "^21.2.5",
+    "@angular/cdk": "21.2.14",
     "@angular/common": "^21.1.0",
     "@angular/compiler": "^21.1.0",
     "@angular/core": "^21.1.0",

streaming-example/.gitignore

@@ -0,0 +1,109 @@
+# See https://docs.github.com/get-started/getting-started-with-git/ignoring-files for more about ignoring files.
+
+# Compiled output
+/dist
+/tmp
+/out-tsc
+/bazel-out
+
+# Node
+/node_modules
+npm-debug.log
+yarn-error.log
+
+# Compiled output
+/dist
+/tmp
+/out-tsc
+/bazel-out
+
+# Node
+/node_modules
+/npm-debug.log
+/yarn-error.log
+
+# IDEs and editors
+.idea/
+.project
+.classpath
+.c9/
+*.launch
+.settings/
+*.sublime-workspace
+.editorconfig
+
+# Visual Studio Code
+.vscode/
+!.vscode/settings.json
+!.vscode/tasks.json
+!.vscode/launch.json
+!.vscode/extensions.json
+.history/*
+
+# Miscellaneous
+/.angular/cache
+.sass-cache/
+/connect.lock
+/coverage
+/libpeerconnection.log
+/apptestem.log
+/typings
+
+# System files
+.DS_Store
+Thumbs.db
+
+# Genkit files
+.genkit/
+
+# Runtime data
+pids
+*.pid
+*.seed
+*.pid.lock
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+
+# nyc test coverage
+.nyc_output
+
+# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# Bower dependency directory (https://bower.io/)
+bower_components
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (http://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directories
+node_modules/
+
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
+
+# Optional REPL history
+.node_repl_history
+
+# Output of 'npm pack'
+*.tgz
+
+# Yarn Integrity file
+.yarn-integrity
+
+# dotenv environment variables file
+.env
+
+# dataconnect generated files
+.dataconnect
+

streaming-example/angular.json

@@ -104,5 +104,8 @@
         }
       }
     }
+  },
+  "cli": {
+    "analytics": false
   }
 }

streaming-example/package.json

@@ -3,7 +3,7 @@
   "version": "0.0.0",
   "scripts": {
     "ng": "ng",
-    "start": "ng serve",
+    "start": "cross-env NODE_OPTIONS='--no-deprecation' ng serve",
     "build": "ng build",
     "watch": "ng build --watch --configuration development",
     "serve:ssr:streaming-xp-app": "node dist/streaming-xp-app/server/server.mjs"
@@ -31,6 +31,7 @@
     "@angular/compiler-cli": "^19.2.0",
     "@types/express": "^4.17.17",
     "@types/node": "^18.18.0",
+    "cross-env": "10.1.0",
     "typescript": "~5.7.2"
   }
 }