Skip to content

Latest commit

 

History

History

genkit-angular-starter-kit

README.md

Genkit x Angular Starter Kit

This repository contains everything you need to create an application using Genkit with Angular to build your next great application.

This example demonstrates how to use Genkit flows to create a persistent chat session with an agent. However, you can use the same patterns in this repository to create an application that runs any arbitrary Genkit flow you create, which can leverage the full Genkit API (learn more).

Here's an example of the running application: Alt text

How to get started

In order to run this example, make sure that your development environment meets the following requirements:

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

  1. Get an API key from Google AI Studio
  2. 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>
  3. Clone this repository or download the code to your local machine
  4. cd into the root folder (e.g., cd genkit-angular-starter-kit)
  5. Install the dependencies with npm install
  6. Serve the app with ng serve
  7. Navigate to the development server to use the application

Explore and build

This application uses server-side rendering and demonstrates how to add integrate 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 persistent chat sessions 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.

The client calls the route from src/agent.service.ts using the runFlow helper method exposed by the Genkit client.

You can customize this flow or even add new flows following this same pattern. We're excited to see what you build! Happy coding!

Looking for inspiration?

For a more advanced example of using Genkit with Angular, check out the genkit-angular-story-generator repo, which is an interactive graphic novel builder.

Here's an example screenshot from the running application: Alt text

Genkit Developer UI

The Genkit Developer UI is a local web app that lets you interactively work with models, flows, prompts, and other elements in your Genkit project. It can also serve as a useful tool for inspecting and debugging Genkit flows in your application. You can run your app locally with the Genkit Developer UI enabled by

  1. Installing the Genkit Command Line Interface (CLI)
  2. Running npm run start:with-genkit-ui