Skip to content

Angular tutorial

In this tutorial, you’ll build Bargain Chef, a full-stack Angular app where one Angular SSR project serves both your Genkit backend and the UI. It uses two AI patterns Genkit simplifies: streaming structured output and tool calling.

What you’ll build

Section titled “What you’ll build”

The user types what they’re craving, Gemini drafts a recipe, and the model calls a tool to look up mock grocery sale prices so it can prefer on-sale ingredients. The recipe streams into the UI incrementally, so users see progress before the full recipe is ready.

You can find the finished code on GitHub.

Keeping the backend and UI in one project gives you shared TypeScript types, no CORS configuration during local development, and a single deployment path.

Prerequisites

Section titled “Prerequisites”
  • Node.js v20 or later
  • Angular CLI
  • Familiarity with Angular and TypeScript

Set up the application

Section titled “Set up the application”

Create the Angular SSR project

Section titled “Create the Angular SSR project”
Terminal window
ng new --ssr my-genkit-angular
cd my-genkit-angular

Install packages

Section titled “Install packages”
Terminal window
npm install genkit @genkit-ai/google-genai @genkit-ai/express
npm install -D genkit-cli tsx

These packages include:

  • genkit: Core Genkit SDK.
  • @genkit-ai/google-genai: Plugin that connects Genkit to Google’s Gemini models.
  • @genkit-ai/express: Express server integration for serving the flow from your Angular SSR server.
  • genkit-cli: Genkit CLI tool that enables local testing and observability.

Configure a model API key

Section titled “Configure a model API key”

This tutorial uses the Gemini API from Google AI Studio.

Get a Gemini API Key

Set the GEMINI_API_KEY environment variable to your key:

Terminal window
export GEMINI_API_KEY=<your API key>

Create the backend

Section titled “Create the backend”

The backend prompts Gemini to draft a recipe, lets the model call a tool to look up mock grocery sale prices, and streams the partial recipe back to the browser as it’s generated.

The core AI logic lives in a flow, which is a Genkit-managed function that adds observability, type safety, and tooling integration on top of a regular async function.

You’ll build the backend in four parts:

  1. Initialize Genkit and register Gemini as the model provider.
  2. Define a tool the model can call to fetch sale prices.
  3. Describe the recipe shape with Zod so Genkit can validate the final output and stream partial recipe chunks.
  4. Define the flow that ties everything together.

Create src/genkit/bargainChefFlow.ts:

src/genkit/bargainChefFlow.ts
import { googleAI } from '@genkit-ai/google-genai';
import { genkit, z } from 'genkit';


const ai = genkit({
  plugins: [googleAI()],
});


const getIngredientsOnSale = ai.defineTool(
  {
    name: 'getIngredientsOnSale',
    description:
      'Returns the ingredients on sale at the local grocery store, with prices. The sale set differs between weekdays and weekends.',
    inputSchema: z.object({
      dayType: z
        .enum(['weekday', 'weekend'])
        .describe('Whether to fetch weekday or weekend sale prices.'),
    }),
    outputSchema: z.array(
      z.object({
        name: z.string(),
        price: z.string(),
      }),
    ),
  },
  async ({ dayType }) => {
    // Mock data: in a real app, query a pricing database.
    return dayType === 'weekend'
      ? [
          { name: 'chicken breast', price: '$2.99/lb' },
          { name: 'pasta', price: '$0.79' },
          { name: 'canned tomatoes', price: '$0.99' },
          { name: 'garlic', price: '$0.50 / head' },
          { name: 'olive oil', price: '$6.99' },
        ]
      : [
          { name: 'eggs', price: '$3.49 / dozen' },
          { name: 'spinach', price: '$1.99' },
          { name: 'parmesan', price: '$4.99' },
          { name: 'lemons', price: '$0.50 each' },
          { name: 'rice', price: '$2.49' },
          { name: 'butter', price: '$3.99' },
        ];
  },
);


const BargainChefInputSchema = z.object({
  craving: z.string().describe('What the user feels like eating right now.'),
});


const RecipeSchema = z.object({
  title: z.string(),
  description: z.string(),
  servings: z.number(),
  ingredients: z.array(
    z.object({
      name: z.string(),
      quantity: z.string(),
      onSale: z.boolean(),
    }),
  ),
  steps: z.array(z.string()),
});


// Exported for the frontend to import as types.
export type BargainChefInput = z.infer<typeof BargainChefInputSchema>;
export type Recipe = z.infer<typeof RecipeSchema>;
export type PartialRecipe = Partial<Recipe>;


export const bargainChefFlow = ai.defineFlow(
  {
    name: 'bargainChefFlow',
    inputSchema: BargainChefInputSchema,
    outputSchema: RecipeSchema,
    streamSchema: RecipeSchema.partial(),
  },
  async ({ craving }, { sendChunk }) => {
    const today = new Date().toLocaleDateString('en-US', { weekday: 'long' });


    const { stream, response } = ai.generateStream({
      model: googleAI.model('gemini-flash-latest', {
        temperature: 0.7,
        thinkingConfig: { thinkingLevel: 'MINIMAL' },
      }),
      prompt: `Today is ${today}. The user is craving: ${craving}.


Call the getIngredientsOnSale tool with the dayType that matches today. Saturday and Sunday are weekends; all other days are weekdays. Then propose ONE recipe that takes advantage of those deals. For each ingredient, set onSale=true if it appears in the tool's response, false otherwise.`,
      tools: [getIngredientsOnSale],
      output: { schema: RecipeSchema },
    });


    for await (const chunk of stream) {
      if (chunk.output) sendChunk(chunk.output);
    }


    const { output } = await response;
    if (!output) throw new Error('Failed to generate recipe');
    return output;
  },
);

A few details are worth noting before you connect the UI:

  • Final output and streamed chunks: outputSchema is the complete recipe the flow returns at the end. streamSchema is the same shape with every field optional (RecipeSchema.partial()), because early chunks might only include the title or description.
  • Shared TypeScript types: Recipe, PartialRecipe, and BargainChefInput are inferred from the Zod schemas with z.infer<...> and re-exported for the Angular component to import. Because the component imports them with import type, Genkit and the model plugin stay out of the browser bundle.
  • The getIngredientsOnSale tool: The model decides when to call it based on the prompt, and the typed inputSchema forces the model to pass dayType: 'weekday' or 'weekend'. In a real app, the tool would query a pricing database, inventory system, or third-party API.
  • sendChunk: Each call pushes the latest partial recipe to the browser, giving the UI a typed view of the generated JSON as it grows.

Add the server route

Section titled “Add the server route”

Wire up the Genkit backend in src/server.ts. The highlighted lines are what you add to the file Angular generated. Keep the flow route above the Angular catchall handler, since the catchall would otherwise swallow /api/* requests.

src/server.ts
import {
  AngularNodeAppEngine,
  createNodeRequestHandler,
  isMainModule,
  writeResponseToNodeResponse,
} from '@angular/ssr/node';
import { expressHandler } from '@genkit-ai/express';
import express from 'express';
import { join } from 'node:path';
import { bargainChefFlow } from './genkit/bargainChefFlow';


const browserDistFolder = join(import.meta.dirname, '../browser');


const app = express();
const angularApp = new AngularNodeAppEngine();


app.use(express.json());


/**
 * Genkit flow route. Must be registered BEFORE the Angular catchall handler
 * below, otherwise it will swallow /api/* requests.
 */
app.post('/api/bargainChefFlow', expressHandler(bargainChefFlow));


/**
 * Serve static files from /browser
 */
app.use(
  express.static(browserDistFolder, {
    maxAge: '1y',
    index: false,
    redirect: false,
  }),
);


/**
 * Handle all other requests by rendering the Angular application.
 */
app.use((req, res, next) => {
  angularApp
    .handle(req)
    .then((response) =>
      response ? writeResponseToNodeResponse(response, res) : next(),
    )
    .catch(next);
});


/**
 * Start the server if this module is the main entry point.
 * The server listens on the port defined by the `PORT` environment variable, or defaults to 4000.
 */
if (isMainModule(import.meta.url)) {
  const port = process.env['PORT'] || 4000;
  app.listen(port, () => {
    console.log(`Node Express server listening on http://localhost:${port}`);
  });
}


/**
 * Request handler used by the Angular CLI (for dev-server and during build) or Firebase Cloud Functions.
 */
export const reqHandler = createNodeRequestHandler(app);

At this point, your Angular app has a Genkit flow served at /api/bargainChefFlow.

Check the project layout

Section titled “Check the project layout”

Verify that your project layout matches the structure below:

  • package.json
  • … other Angular config files
  • Directorysrc
    • Directoryapp
      • app.css
      • app.html
      • app.ts
      • … other component files
    • Directorygenkit
      • bargainChefFlow.ts
    • server.ts
    • … other Angular source files

Optional: install the Genkit agent skills

Section titled “Optional: install the Genkit agent skills”

If you’re coding with an AI assistant, install the Genkit Agent Skills so it has structured guidance on Genkit APIs, patterns, and common errors:

Terminal window
npx skills add genkit-ai/skills

See Develop with AI for tool-specific installation instructions.

Build the Angular UI

Section titled “Build the Angular UI”

The Angular side calls the flow with streamFlow from genkit/beta/client, then stores each partial recipe in a signal so the template re-renders as fields arrive.

Update the component class

Section titled “Update the component class”

Replace the contents of src/app/app.ts with the following. The component imports the flow’s TypeScript types with import type, so the UI and backend stay in sync without adding server code to the browser bundle:

src/app/app.ts
import { Component, signal } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { streamFlow } from 'genkit/beta/client';
import type {
  BargainChefInput,
  PartialRecipe,
  Recipe,
} from '../genkit/bargainChefFlow';


// API route where your bargainChefFlow is served.
const FLOW_URL = '/api/bargainChefFlow';


@Component({
  selector: 'app-root',
  imports: [FormsModule],
  templateUrl: './app.html',
  styleUrl: './app.css',
})
export class App {
  craving = signal('something warm with chicken');
  recipe = signal<PartialRecipe | null>(null);
  isStreaming = signal(false);


  async generateRecipe() {
    if (!this.craving().trim()) return;
    this.recipe.set(null);
    this.isStreaming.set(true);
    try {
      const input: BargainChefInput = { craving: this.craving() };
      // streamFlow's generics are <FinalOutput, StreamChunk>.
      const result = streamFlow<Recipe, PartialRecipe>({
        url: FLOW_URL,
        input,
      });
      // result.stream is an async iterable of partial recipes.
      // Each chunk is the accumulated output so far.
      for await (const partial of result.stream) {
        this.recipe.set(partial);
      }
      // Wait for the final validated output and surface any errors.
      await result.output;
    } catch (err) {
      console.error('Failed to generate recipe', err);
    } finally {
      this.isStreaming.set(false);
    }
  }
}

streamFlow returns an object with two useful properties: stream, an async iterable of partial recipe objects, and output, a promise that resolves with the final validated recipe. The component stores each partial recipe in an Angular signal, so the template re-renders on every update.

Update the template

Section titled “Update the template”

Replace the contents of src/app/app.html with the following:

src/app/app.html
<main>
  <h1>Bargain Chef</h1>
  <p class="tagline">
    Tell me what you feel like eating and I'll suggest a recipe built around
    today's grocery deals.
  </p>


  <form class="prompt" (submit)="$event.preventDefault(); generateRecipe()">
    <input
      type="text"
      [ngModel]="craving()"
      (ngModelChange)="craving.set($event)"
      name="craving"
      placeholder="What are you in the mood for?"
      [disabled]="isStreaming()"
    />
    <button type="submit" [disabled]="isStreaming()">
      {{ isStreaming() ? 'Cooking…' : 'Suggest a recipe' }}
    </button>
  </form>


  @if (recipe(); as r) {
    <article>
      @if (r.title) {
        <h2>{{ r.title }}</h2>
      }
      @if (r.description) {
        <p class="description">{{ r.description }}</p>
      }
      @if (r.servings) {
        <p class="serves"><strong>Serves:</strong> {{ r.servings }}</p>
      }


      @if (r.ingredients?.length) {
        <h3>Ingredients</h3>
        <ul class="ingredients">
          @for (ing of r.ingredients; track $index) {
            <li>
              {{ ing.quantity }} {{ ing.name }}
              @if (ing.onSale) {
                <span class="badge">on sale</span>
              }
            </li>
          }
        </ul>
      }


      @if (r.steps?.length) {
        <h3>Steps</h3>
        <ol class="steps">
          @for (step of r.steps; track $index) {
            <li>{{ step }}</li>
          }
        </ol>
      }
    </article>
  }
</main>

Each recipe section is wrapped in @if so it only renders once that field arrives in the stream. The result is a UI that fills in progressively instead of waiting for the full recipe. Wrapping the input and button in a <form> lets the user submit by pressing Enter, and the (submit) handler calls preventDefault() so the browser doesn’t reload the page before starting the streaming request.

Add styles

Section titled “Add styles”

Replace the contents of src/app/app.css with the following.

src/app/app.css
:host {
  display: block;
  font-family:
    -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue',
    Arial, sans-serif;
  color: #1a1a1a;
  background: #fafafa;
  min-height: 100vh;
  padding: 3rem 1.5rem;
}


main {
  max-width: 640px;
  margin: 0 auto;
}


h1 {
  font-size: 2rem;
  margin: 0 0 0.25rem;
  letter-spacing: -0.01em;
}


.tagline {
  color: #555;
  margin: 0 0 2rem;
}


.prompt {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 2.5rem;
}


.prompt input {
  flex: 1;
  font: inherit;
  font-size: 1rem;
  padding: 0.75rem 1rem;
  border: 1px solid #d0d0d0;
  border-radius: 8px;
  background: #fff;
  transition:
    border-color 120ms ease,
    box-shadow 120ms ease;
}


.prompt input:focus {
  outline: none;
  border-color: #2563eb;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}


.prompt input:disabled {
  background: #f1f1f1;
  color: #888;
}


.prompt button {
  font: inherit;
  font-size: 1rem;
  font-weight: 500;
  padding: 0.75rem 1.25rem;
  border: 0;
  border-radius: 8px;
  background: #1a1a1a;
  color: #fff;
  cursor: pointer;
  transition: background 120ms ease;
  white-space: nowrap;
}


.prompt button:hover:not(:disabled) {
  background: #2563eb;
}


.prompt button:disabled {
  background: #999;
  cursor: not-allowed;
}


article {
  background: #fff;
  border: 1px solid #e5e5e5;
  border-radius: 12px;
  padding: 1.5rem 1.75rem;
}


article h2 {
  font-size: 1.5rem;
  margin: 0 0 0.5rem;
}


article h3 {
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #666;
  margin: 1.5rem 0 0.5rem;
}


.description {
  color: #444;
  margin: 0 0 1rem;
}


.serves {
  color: #555;
  margin: 0;
  font-size: 0.95rem;
}


.ingredients,
.steps {
  padding-left: 1.25rem;
  line-height: 1.6;
}


.ingredients li {
  margin-bottom: 0.25rem;
}


.steps li {
  margin-bottom: 0.5rem;
}


.badge {
  display: inline-block;
  margin-left: 0.4rem;
  padding: 0.05rem 0.5rem;
  font-size: 0.75rem;
  font-weight: 500;
  background: #e8f5e9;
  color: #2e7d32;
  border-radius: 999px;
}


@media (max-width: 480px) {
  .prompt {
    flex-direction: column;
  }
  .prompt button {
    width: 100%;
  }
}

Run the app

Section titled “Run the app”

Start the Angular development server:

Terminal window
npm start

Open http://localhost:4200, enter a craving like something warm with chicken, and submit. The title should appear first, followed by the description, ingredients, and steps. Ingredients that the model sourced from the getIngredientsOnSale tool will show an “on sale” badge.

Test and inspect the app

Section titled “Test and inspect the app”

The Genkit Developer UI is a local console for testing flows and inspecting traces. It records every tool call, model invocation, and streamed chunk, so you can see what the model called, what it received back, and how the recipe was assembled.

Start the Developer UI from your project root:

Terminal window
npx genkit start -- tsx --watch src/genkit/bargainChefFlow.ts

This launches the Developer UI at http://localhost:4000 by default.

In the Developer UI:

  • The Traces tab shows every invocation of bargainChefFlow, including the ones triggered by your Angular app. Open one and you’ll see the getIngredientsOnSale tool call with the dayType the model chose, the model invocation, and each streamed chunk that the browser received.

  • The Flows tab lets you run bargainChefFlow directly with custom input, which is useful for iterating on the prompt without round-tripping through the UI. Try sample input like:

    { "craving": "something warm with chicken" }

Or call the flow with curl

Section titled “Or call the flow with curl”

You can also test the SSR route directly. Use the -N flag and an Accept: text/event-stream header to consume the streamed response:

Terminal window
curl -N -X POST http://localhost:4200/api/bargainChefFlow \
  -H "Content-Type: application/json" \
  -H "Accept: text/event-stream" \
  -d '{"data":{"craving":"something warm with chicken"}}'

The { "data": ... } wrapper is required: Genkit’s HTTP handler reads the flow input from the request body’s data field.

The response arrives as a series of SSE data: events, each containing the partial recipe accumulated so far.

Use a standalone backend instead

Section titled “Use a standalone backend instead”

This tutorial uses Angular SSR for the shortest first-run path. To use the same UI against a standalone backend instead, change four things:

  1. Create a regular Angular project (drop the --ssr flag):

    Terminal window
    ng new my-genkit-angular
    cd my-genkit-angular

  2. Install the Genkit web client:

    Terminal window
    npm install genkit

  3. In src/app/app.ts, define local TypeScript interfaces matching your flow’s streamed output instead of importing shared types.

  4. Point FLOW_URL at your backend route:

    const FLOW_URL = 'http://localhost:8080/bargainChefFlow';

Then enable CORS on your backend so it accepts requests from http://localhost:4200:

What you built

Section titled “What you built”

You now have a working Genkit app that streams structured output from Gemini into an Angular UI incrementally, calls a tool during generation to ground the model’s response in mock sale-price data, validates input and output against schemas, and surfaces every step in a local trace UI.

Next steps

Section titled “Next steps”
  • Creating flows: Compose multi-step flows, branch on input, and chain model calls.
  • Generating content: Swap Gemini for another provider, tune sampling parameters, and work with multimodal input.
  • Deploy your app: Ship to Cloud Run, Vercel, Firebase, or your own infrastructure.
  • Developer tools: Dig deeper into the Developer UI, tracing, and evaluation.