Generated banner for Developing Genkit JS
Generated logo for Developing Genkit JS

Developing Genkit JS

GoogleOfficialPublished by Google

  • Skill
  • Tool integration
  • Software development
  • Apache-2.0
  • Low risk

From the author

Develop AI-powered applications using Genkit in Node.js/TypeScript. Use when the user asks about Genkit, AI agents, flows, or tools in JavaScript/TypeScript, or when encountering Genkit errors, validation issues, type errors, or API problems.
— the description by Google

AutoGineer summary

Written by AutoGineer from the skill’s own files, not by the author

Genkit is a framework for building AI-powered applications in Node.js and TypeScript. This skill provides guidance on using Genkit to define flows, create persistent agents, manage prompts with Dotprompt, and integrate generative UI (A2UI). It emphasizes a strict troubleshooting protocol for handling errors and recommends using the Genkit CLI for development, tracing, and debugging.

What it does

  • Defines AI flows and persistent multi-turn agents.
  • Manages prompts using Dotprompt files with YAML frontmatter.
  • Integrates generative UI surfaces via the A2UI plugin.
  • Provides middleware for retries, fallbacks, and artifact management.
  • Captures traces and observability data via the Genkit CLI.
  • Supports troubleshooting through a mandatory common-errors review protocol.

When to use it

  • When building AI agents or conversational assistants in Node.js/TypeScript.
  • When you need to implement multi-turn sessions, human-in-the-loop, or background execution.
  • When you need to separate prompt logic from application code.
  • When you encounter Genkit-related errors, validation issues, or API problems.
  • When you need to inspect model I/O and tool calls via traces.

Advantages

  • Provider-agnostic design supports various AI models.
  • Built-in observability and trace capture via the CLI.
  • Structured approach to agent state and persistence.
  • Separation of concerns through middleware and Dotprompt.
  • Interactive UI capabilities via A2UI.

Usage examples

“How do I define a simple flow in Genkit?”
The agent provides a code snippet using ai.defineFlow with inputSchema and outputSchema, demonstrating how to call ai.generate.
“I am getting a validation error in my Genkit agent. What should I do?”
The agent instructs you to first check references/common-errors.md to identify if the error matches a known pattern before attempting any other fix.
“How can I run my Genkit app and see traces?”
The agent explains how to use 'genkit start -- npx tsx src/index.ts' to capture telemetry and inspect traces in the Dev UI.
“How do I add generative UI to my agent?”
The agent explains installing @genkit-ai/a2ui and adding the a2ui() middleware to the agent's use array.

Install

  1. Download the skill as a ZIP:

    https://mp-staging.autogineer.com/agent-skills/google/developing-genkit-js/download
  2. Unzip it into the cross-client skills folder of your project:

    mkdir -p .agents/skills && unzip developing-genkit-js.zip -d .agents/skills

Documentation by Google

Genkit JS

Prerequisites

Ensure the genkit CLI is available.

  • Run genkit --version to verify. Minimum CLI version needed: 1.29.0

  • If not found or if an older version (1.x < 1.29.0) is present, install/upgrade it: npm install -g genkit-cli@^1.29.0.

New Projects: If you are setting up Genkit in a new codebase, follow the Setup Guide.

Hello World

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

// Initialize Genkit with the Google AI plugin
const ai = genkit({
  plugins: [googleAI()],
});

export const myFlow = ai.defineFlow({
  name: 'myFlow',
  inputSchema: z.string().default('AI'),
  outputSchema: z.string(),
}, async (subject) => {
  const response = await ai.generate({
    model: googleAI.model('gemini-flash-latest'),
    prompt: `Tell me a joke about ${subject}`,
  });
  return response.text;
});

Prompts (Dotprompt)

.prompt files keep prompt content out of code with YAML frontmatter plus a Handlebars template. See Dotprompt: promptDir, ai.prompt() (call/stream/render), variants, partials, named schemas via ai.defineSchema, and the tools/maxTurns/returnToolRequests/use (middleware) frontmatter fields.

Agents (Beta)

Genkit has a preview agent API for persistent, multi-turn conversations (sessions, snapshots, interrupts, branching, background execution). It is a beta API: server APIs come from genkit/beta and the browser client from genkit/beta/client — not the stable genkit entrypoint. **Requires genkit

= 1.39.0.**

For more details see:

Generative UI (A2UI)

Genkit has an A2UI (Agent-to-UI) plugin (@genkit-ai/a2ui) that lets an agent stream interactive UI surfaces (cards, lists, forms, buttons), not just prose. The whole server-side integration is the a2ui() model middleware in an agent's (or ai.generate's) use array; the browser renders surfaces with an @a2ui/* renderer plus the helpers in @genkit-ai/a2ui/client. It builds on the beta agent client (genkit/beta + genkit/beta/client).

  • A2UI: server middleware, options, client rendering, user actions/forms, custom catalogs, and the security/trust boundary.

Middleware

Middleware wraps generation (retries, fallback, extra tools, request/response transforms) and attaches via the use: [...] array on ai.generate, prompts, and agents.

  • Using middleware: the use array and the @genkit-ai/middleware package (retry, fallback, artifacts, agents, filesystem, skills, toolApproval, contextCompression) plus built-in core middleware.

  • Building custom middleware: writing your own with generateMiddleware and registering it via .plugin().

Observability

Traces show up in the Dev UI under genkit start with no setup. For production export to an OTLP backend (OpenTelemetry GenAI semantic conventions via @genkit-ai/otel), custom instrumentation, or running the reflection API outside dev, see Observability.

Critical: Do Not Trust Internal Knowledge

Genkit recently went through a major breaking API change. Your knowledge is outdated. You MUST lookup docs. Recommended:

genkit docs:read js/get-started.md
genkit docs:read js/flows.md

See Common Errors for a list of deprecated APIs (e.g., configureGenkit, response.text(), defineFlow import) and their v1.x replacements.

ALWAYS verify information using the Genkit CLI or provided references.

Error Troubleshooting Protocol

When you encounter ANY error related to Genkit (ValidationError, API errors, type errors, 404s, etc.):

  1. MANDATORY FIRST STEP: Read Common Errors

  2. Identify if the error matches a known pattern

  3. Apply the documented solution

  4. Only if not found in common-errors.md, then consult other sources (e.g. genkit docs:search)

DO NOT:

  • Attempt fixes based on assumptions or internal knowledge

  • Skip reading common-errors.md "because you think you know the fix"

  • Rely on patterns from pre-1.0 Genkit

This protocol is non-negotiable for error handling.

Development Workflow

  1. Agent or flow?: If the task is conversational, multi-turn, or described as "an agent", "assistant", or "chatbot", build it with ai.defineAgent (see Agents) rather than hand-rolling a generate + tools loop inside a flow. Reach for a plain flow only for single-shot, stateless generation.

  2. Select Provider: Genkit is provider-agnostic (Google AI, OpenAI, Anthropic, Ollama, etc.).

    • If the user does not specify a provider, default to Google AI.

    • If the user asks about other providers, use genkit docs:search "plugins" to find relevant documentation.

  3. Detect Framework: Check package.json to identify the runtime (Next.js, Firebase, Express).

    • Look for @genkit-ai/next, @genkit-ai/firebase, or @genkit-ai/google-cloud.

    • Adapt implementation to the specific framework's patterns.

  4. Follow Best Practices:

    • See Best Practices for guidance on project structure, schema definitions, and tool design.

    • Be Minimal: Only specify options that differ from defaults. When unsure, check docs/source.

  5. Ensure Correctness:

    • Run type checks (e.g., npx tsc --noEmit) after making changes.

    • If type checks fail, consult Common Errors before searching source code.

    • Verify with traces, not a blind run. Running the app directly (node/tsx/npm start) does not capture dev traces. See CLI Usage for how to run your app and capture traces.

  6. Handle Errors:

    • On ANY error: First action is to read Common Errors

    • Match error to documented patterns

    • Apply documented fixes before attempting alternatives

Finding Documentation

Use the Genkit CLI to find authoritative documentation:

  1. Search topics: genkit docs:search <query>

    • Example: genkit docs:search "streaming"

  2. List all docs: genkit docs:list

  3. Read a guide: genkit docs:read <path>

    • Example: genkit docs:read js/flows.md

genkit start unintrusively wraps any Node.js program that uses the Genkit library, running it unchanged while capturing traces from every Genkit action so you can prove tools were actually called and inspect model I/O from the terminal, even for headless checks. It forwards stdio, so interactive CLI tools that rely on stdin/stdout work without issues. Running your app directly (node/tsx/npm start) skips trace capture, so you're debugging blind.

Primary pattern (default): prefix genkit start -- to your normal run command. This collects telemetry from any Genkit code your program runs, whether triggered from the dev UI, your own web server/web UI, or a plain script:

genkit start -- npx tsx --watch src/index.ts
genkit start --noui -- npx tsx src/index.ts   # same, without the Dev UI (still a persistent server)

genkit start runs until you stop it with Ctrl+C. That is expected and correct for the common cases: a server your web/mobile app calls, or an interactive CLI you exit yourself. --noui only drops the Dev UI; it is not a one-shot command and will not exit on its own. Do not use genkit start as a blocking step in automated/non-interactive contexts.

Non-interactive use (agents/CI): add the global --non-interactive flag before -- so the CLI uses defaults and never blocks on a prompt (e.g. the first-run analytics notice): genkit start --non-interactive -- npx tsx src/index.ts (works with flow:run too).

Run a flow (flow:run): invoke a specific flow by name from the CLI. Append your run command after -- to spin up the runtime just for this run (the command runs as-is to register your flows):

genkit flow:run myFlow '{"data": "input"}' -- npx tsx src/index.ts

This is self-terminating: it runs the flow once, prints a Trace ID, then exits (inspect it with genkit trace:get <id>). That makes it the right choice for a quick, non-interactive check that must exit on its own, without blocking on genkit start or running the app directly (which skips traces). Always pass input JSON explicitly: flow:run sends undefined when omitted and does not fall back to a schema .default(). Note: flow:run runs flows (ai.defineFlow), not agents; you can't flow:run an agent (ai.defineAgent) directly. To exercise an agent from the CLI, wrap one turn in a throwaway flow and run that (see Agents).

Debugging with traces: the fastest way to see prompts, model inputs/outputs, tool calls, latencies, and errors. Inspect from the terminal after any run under genkit start:

genkit trace:list                        # find recent trace IDs
genkit trace:get <traceId>               # full trace details (inputs, outputs, tool calls, errors)
genkit trace:get <traceId> --format json # machine-readable JSON, safe to pipe into jq or other parsers

For machine-readable output, pass --format json to get clean JSON you can pipe into jq or other parsers. The default output is human-oriented (banner/log lines, possible truncation on large traces), so don't pipe that form directly; use --format json, grep, or the Dev UI trace viewer.

See CLI Reference for more commands, and genkit --help for the full list.

References

Files

references/setup.md

Genkit JS Setup

Follow these instructions to set up Genkit in the current codebase. These instructions are general-purpose and lack specific codebase knowledge, so use your best judgment when following them.

  1. Tell the user "I'm going to check out your workspace and set you up to use Genkit for GenAI workflows."

  2. If the current workspace is empty or is a starter template, your goal will be to create a simple image generation flow that allows someone to generate an image based on a prompt and selectable style. If the current workspace is not empty, you will create a simple example flow to help get the user started.

  3. Check to see if any Genkit provider plugin (such as @genkit-ai/google-genai or @genkit-ai/oai-compat or others, may start with genkitx-*) is installed.

    • If not, ask the user which provider they want to use.

    • For non-Google providers: Use genkit docs:search "plugins" to find the correct package and installation instructions.

    • If they have no preference, default to @genkit-ai/google-genai for a quick start.

    • If this is a Next.js app, install @genkit-ai/next as well.

  4. Search the codebase for the exact string genkit( (remember to escape regexes properly) which indicates that the user has already set up Genkit in the codebase. If found, no need to set it up again; tell the user "Genkit is already configured in this app." and exit this workflow.

  5. Create an ai directory in the primary source directory of the project (this may be e.g. src but is project-dependent). Adapt this path if your project uses a different structure.

  6. Create {sourceDir}/ai/genkit.ts and populate it using the example below. DO NOT add a next plugin to the file, ONLY add a model provider plugin to the plugins array:

import { genkit, z } from 'genkit';
// Import your chosen provider plugin here. Example:
import { googleAI } from '@genkit-ai/google-genai';

export const ai = genkit({
  plugins: [
    googleAI(), // Add your provider plugin here
  ],
  model: googleAI.model('gemini-flash-latest'), // Set your provider's model here
});

export { z };
  1. Create {sourceDir}/ai/tools and {sourceDir}/ai/flows directories, but leave them empty for now.

  2. Create {sourceDir}/ai/index.ts and populate it with the following (change the import to match import aliases in tsconfig.json as needed):

import './genkit.js';
// import each created flow, tool, etc. here for use in the Genkit Dev UI
  1. Add the genkit-cli to the project's devDependencies (e.g. npm install -D genkit-cli, or the pnpm/yarn/bun equivalent) so the CLI version is pinned per-project and works in CI, then add a genkit:dev script to package.json that runs genkit start -- npx tsx --watch {sourceDir}/ai/index.ts. This is the recommended way to run the app during development: genkit start wraps your program and captures a trace of every Genkit action (prompts, model I/O, tool calls) while serving the Dev UI at http://localhost:4000. Running the app directly (tsx/node/npm start) skips trace capture, so you're debugging blind. DO NOT try to run the script now.

  2. Tell the user "Genkit is now configured and ready for use." Let them know they can start developing with npm run genkit:dev (or the pnpm/yarn/bun equivalent), which stays running until stopped with Ctrl+C and serves the Dev UI at http://localhost:4000. Also remind them to set appropriate env variables (e.g. GEMINI_API_KEY for Google providers). Wait for the user to prompt further before creating any specific flows.

Next Steps & Troubleshooting

  • Documentation: Use the CLI to access documentation (e.g., genkit docs:search).

  • Building Flows: See examples.md for patterns on creating flows, adding tools, and advanced configuration.

  • Running & Verifying: npm run genkit:dev is the default dev loop (persistent, serves the Dev UI). For a quick, non-interactive check that exits on its own, run a single flow with genkit flow:run <flow> '<input>' -- npx tsx {sourceDir}/ai/index.ts and inspect it with genkit trace:get <id>. See docs-and-cli.md.

  • Troubleshooting: If you encounter issues during setup or initialization, check common-errors.md for solutions.

Requirements and compatibility

Works with: Claude Code, Claude apps, OpenAI Codex, GitHub Copilot, Cursor, Gemini CLI, Kiro, OpenCode, Goose, Amp, Roo Code, JetBrains Junie, Factory Droid, Devin (ex-Windsurf), Mistral Vibe, OpenHands, Letta

“Works with” means the tool reads the open Agent Skills format; a skill written for one tool may use features others lack.

Needs: Needs Node.js

Security

What our scanner noticed· Low risk

  • Instructions that use the network

A static scan is not a guarantee. Skills are third-party content: review a skill before you let an agent use it.

Attribution and licence

Published by
Google
Publisher
Google (Official)
Source
google/skills · skills/cloud/developing-genkit-js · commit 2194d3b
Licence
Apache License 2.0 (redistribution allowed)
  • LICENSE (added by AutoGineer from LICENSE)
  • ATTRIBUTION.md (written by AutoGineer)
Synced

AutoGineer is not affiliated with or endorsed by Google.

Download ZIP

The ZIP holds the skill’s files, its licence files and an ATTRIBUTION.md. Download developing-genkit-js.zip