Skip to content
Genkit

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, and how to write them.

Create an Angular project

This guide will use an Angular app with SSR with server routing.

You can create a new project with server-side routing with the Angular CLI:

Terminal window
ng new --ssr --server-routing

You can also add server-side routing to an existing project with the ng add command:

Terminal window
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:

    Terminal window
    npm install --save genkit

  2. Install at least one model plugin.

    For example, to use Google AI:

    Terminal window
    npm install --save @genkit-ai/googleai

    Or to use Vertex AI:

    Terminal window
    npm install @genkit-ai/vertexai

  3. Install the Genkit Express library:

    Terminal window
    npm install @genkit-ai/express

  4. Install Zod:

    Terminal window
    npm install zod

  5. Install the Genkit CLI globally. The tsx tool is also recommended as a development dependency, as it makes testing your code more convenient. Both of these dependencies are optional, however.

    Terminal window
    npm install -g genkit-cli
    npm install --save-dev 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:

import { googleAI } from '@genkit-ai/googleai';
import { genkit, z } from 'genkit';


const ai = genkit({
  plugins: [googleAI()],
  model: googleAI.model('gemini-2.0-flash'),
});


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:

import { expressHandler } from '@genkit-ai/express';
import { menuSuggestionFlow } from './genkit';

Add the following line following your app variable initialization:

app.use(express.json());

Then, add a route to serve your flow:

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:

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:

<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.

  1. Generate an API key for the Gemini API using Google AI Studio.

  2. Set the GEMINI_API_KEY environment variable to your key:

    Terminal window
    export GEMINI_API_KEY=<your API key>

Then, run your app locally as normal:

Terminal window
ng serve

All of Genkit’s development tools continue to work as normal. For example, to load your flows in the developer UI:

Terminal window
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:

Next steps