AutoGineer
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
Download ZIP

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://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

CLI Usage (recommended)

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/agents.md

Agents (Beta)

Beta / preview API. Agents are not yet stable. Server APIs come from genkit/beta; the browser client comes from genkit/beta/client. Import paths and signatures may change. Always use genkit/beta, not genkit, for agents.

Requires genkit >= 1.39.0.

An agent is a persistent, multi-turn conversation primitive built on top of prompts + tools. Compared to a bare ai.generate/ai.definePrompt loop, an agent adds:

  • Sessions: multi-turn history tracked as immutable snapshots.

  • State: typed session state (messages + custom data + artifacts).

  • Interrupts: human-in-the-loop pause/resume.

  • Branching: fork a conversation from any snapshot.

  • Detaching: run a turn in the background and poll for the result.

Progressive disclosure — read the file for the level you need:

Setup

// genkit.ts — note the `genkit/beta` import (required for agents)
import { genkit } from 'genkit/beta';
import { googleAI } from '@genkit-ai/google-genai';

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

Define an agent

ai.defineAgent combines prompt + tool config + (optional) session store into a single registered action.

import { z } from 'genkit';
import { ai } from './genkit.js';

const getWeather = ai.defineTool(
  {
    name: 'getWeather',
    description: 'Look up the current weather for a city.',
    inputSchema: z.object({ city: z.string() }),
    outputSchema: z.object({ tempC: z.number(), summary: z.string() }),
  },
  async ({ city }) => ({ tempC: 21, summary: 'Sunny' })
);

export const weatherAgent = ai.defineAgent({
  name: 'weatherAgent',
  system:
    'You are a helpful weather assistant. Use the getWeather tool. Be concise.',
  tools: [getWeather],
  // `store` is optional. Omit it for client-managed state (see below).
});

Common defineAgent options:

  • name (required): action name.

  • system / prompt / dotprompt fields: same as definePrompt.

  • tools: tools and interrupts available to the agent.

  • model: override the default model.

  • store: a SessionStore for server-side persistence. See sessions.

  • stateSchema: a z.ZodType<State> describing custom session state. When set, State is inferred and validated at load time.

  • input / inputSchema: input variables for the prompt template.

Agents and middleware go hand in hand

Agents and middleware are built for each other: the use: [...] array is where you layer in sophisticated behavior without writing it yourself. Most agent capabilities — sub-agent delegation, artifacts, filesystem access, skill loading, tool approval, retries — are just middleware you drop in.

For example, a full coding assistant is mostly configuration:

import { filesystem, retry, skills, toolApproval } from '@genkit-ai/middleware';
import { FileSessionStore } from 'genkit/beta';
import { ai } from './genkit.js';

export const codingAgent = ai.defineAgent({
  name: 'codingAgent',
  system: 'You are an expert AI coding assistant working in a sandboxed workspace.',
  tools: [runShell, askUser], // your own custom tools/interrupts
  use: [
    // Require user approval (interrupt) before risky tools; reads auto-approved.
    // Order matters: keep toolApproval before filesystem.
    toolApproval({
      approved: ['list_files', 'read_file', 'use_skill', 'run_shell', 'ask_user'],
    }),
    // list_files / read_file / write_file / search_and_replace, sandboxed.
    filesystem({ rootDirectory: WORKSPACE_DIR, allowWriteAccess: true }),
    // Load coding conventions on demand via a use_skill tool.
    skills({ skillPaths: [SKILLS_DIR] }),
    // Automatic retry on transient model errors.
    retry(),
  ],
  store: new FileSessionStore('./.snapshots-coding'), // needed for tool approval
  maxTurns: 30,
});

That single use array gives the agent filesystem tools, an on-demand skills library, human-in-the-loop approval for writes, and retries — each is one line. See using middleware for the full catalog and building custom middleware to write your own.

Chat with an agent (server-side)

agent.chat() opens a conversation. A single chat carries state forward automatically across turns.

const chat = weatherAgent.chat();

// Non-streaming turn:
const res = await chat.send('Weather in Tokyo?');
console.log(res.text);
console.log(res.snapshotId); // immutable checkpoint id for this turn

// Follow-up turn — history is carried automatically:
const res2 = await chat.send('What about Paris?');

// Streaming turn:
const turn = chat.sendStream('And London?');
for await (const chunk of turn.stream) {
  process.stdout.write(chunk.text ?? '');
}
const final = await turn.response;

Verify an agent from the CLI (flow:run)

genkit flow:run only runs flows, not agents, so you can't flow:run an agent directly. To exercise an agent from the CLI (e.g. a quick, self-terminating check), wrap one turn in a throwaway flow and run that:

import { z } from 'genkit';
import { weatherAgent } from './weather-agent.js';
import { ai } from './genkit.js';

export const tryWeatherAgent = ai.defineFlow(
  { name: 'tryWeatherAgent', inputSchema: z.string(), outputSchema: z.string() },
  async (message) => (await weatherAgent.chat().send(message)).text
);
// genkit flow:run tryWeatherAgent '"Weather in Tokyo?"' -- npx tsx src/index.ts

Serve an agent over HTTP

Use expressHandler from @genkit-ai/express. Optionally expose the agent's companion getSnapshotDataAction (for state lookup/restore) and abortAgentAction (for background aborts).

import { expressHandler } from '@genkit-ai/express';
import express from 'express';
import { weatherAgent } from './weather-agent.js';

const app = express();
app.use(express.json());

// Main turn endpoint:
app.post('/api/weatherAgent', expressHandler(weatherAgent));

// Optional companions (needed for snapshot restore / branching / background):
app.post(
  '/api/weatherAgent/getSnapshot',
  expressHandler(weatherAgent.getSnapshotDataAction)
);
app.post(
  '/api/weatherAgent/abort',
  expressHandler(weatherAgent.abortAgentAction)
);

app.listen(8080);

For serving multiple agents, CORS/streaming headers for browser clients, a static web UI, and other host frameworks (Next.js, Firebase), see Deploying agents.

Consume an agent from a client (remoteAgent)

The browser/Node client lives in genkit/beta/client. remoteAgent returns a typed HTTP client; getSnapshotUrl/abortUrl default to ${url}/getSnapshot and ${url}/abort.

import { remoteAgent, AgentError } from 'genkit/beta/client';

const weather = remoteAgent({ url: 'http://localhost:8080/api/weatherAgent' });

const chat = weather.chat();
const turn = chat.sendStream('Weather in Tokyo?');
for await (const chunk of turn.stream) {
  process.stdout.write(chunk.text ?? '');
}
const res = await turn.response;
console.log(res.snapshotId, chat.snapshotId, chat.state);

// Multi-turn — the client carries state forward automatically:
await chat.send('What about Paris?');

// Errors surface as AgentError with an HTTP-ish status:
try {
  await remoteAgent({ url: '/api/nope' }).chat().send('hi');
} catch (err) {
  if (err instanceof AgentError) console.log(err.status);
}

Client-managed state (no server store)

If the agent has no store, the server is fully stateless and the session state blob (messages + custom + artifacts) is owned by the caller. The remoteAgent client tracks it and round-trips it on every turn automatically — no SessionStore, no snapshot ids to manage.

// Server: no `store` → stateless. Client owns the state blob.
export const weatherAgentStateless = ai.defineAgent({
  name: 'weatherAgentStateless',
  system: 'You are a helpful weather assistant. Use getWeather. Be concise.',
  tools: [getWeather],
});
// Client: reuse one `chat` and the state threads automatically.
import { remoteAgent, type AgentChat } from 'genkit/beta/client';

const agent = remoteAgent({ url: '/api/weatherAgentStateless' });
const chat: AgentChat = agent.chat();

await chat.send('Weather in London?');
await chat.send('Is it sunny in Tokyo?'); // remembers prior turns

// The full state blob is available after each turn:
const res = await chat.send('And Paris?');
console.log(JSON.stringify(res.raw.state, null, 2));

If you call the stateless agent directly (e.g. from a flow) instead of via remoteAgent, you must round-trip the state yourself:

async function turn(state: unknown | undefined, text: string) {
  // Resume from prior state, or start fresh on the first turn.
  const chat = weatherAgentStateless.chat(state ? { state } : undefined);
  const res = await chat.send(text);
  // Return the updated state so the caller can pass it back next turn.
  return { state: res.raw.state, text: res.text };
}

Use client-managed state when you don't want to run server-side storage (e.g. the client persists history itself). Use a session store when the server should own history, or when you need branching or background execution. (Interrupts work either way.)

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

Download ZIP

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