Developing Genkit Dart

GoogleOfficialPublished by Google

Skill
Tool integration
Software development
Apache-2.0
Low risk

From the author

Generates code and provides documentation for the Genkit Dart SDK. Use when the user asks to build AI agents in Dart, use Genkit flows, or integrate LLMs into Dart/Flutter applications.

— the description by Google

AutoGineer summary

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

The Genkit Dart skill provides comprehensive guidance for utilizing the Genkit SDK to develop AI-powered applications. It covers the core framework, including defining flows and agents, managing sessions, handling persistence, and implementing generative UI (A2UI). The skill emphasizes the use of the Genkit CLI for local development, tracing, and debugging, while providing patterns for integrating various LLM plugins and managing type-safe schemas via the schemantic library.

What it does

Generates code and documentation for building AI agents and flows in Dart.
Provides patterns for integrating LLMs into Dart and Flutter applications.
Explains the use of the Genkit CLI for tracing, debugging, and running flows.
Details the implementation of persistent sessions, human-in-the-loop interrupts, and multi-agent orchestration.
Supports A2UI for streaming interactive UI surfaces to Flutter clients.
Guides the use of type-safe schemas with the schemantic library for tool and flow inputs.

When to use it

When building AI agents, chatbots, or assistants in Dart or Flutter.
When you need to integrate LLMs into a Dart backend or Flutter frontend.
When you need to debug model inputs, outputs, and tool calls using traces.
When implementing conversational workflows that require persistent state or human-in-the-loop approval.
When you want to stream interactive UI components from an agent to a Flutter app.

Advantages

Provides a unified interface for code generation, structured outputs, and agentic workflows.
Enables deep visibility into AI execution via the Genkit CLI and trace inspection.
Supports complex agentic behaviors like branching, background execution, and multi-agent delegation.
Facilitates type-safe development through integration with the schemantic library.
Offers a consistent developer experience across different LLM providers via a plugin ecosystem.

Usage examples

“How do I define a simple agent in Genkit Dart?”: The agent will provide a code snippet using ai.defineAgent, including system instructions, tools, and session storage configuration.
“How can I debug my Genkit flow locally?”: The agent will explain how to use 'genkit start -- dart run main.dart' to capture traces and inspect them via the Developer UI at localhost:4000.
“How do I use A2UI to stream a card to my Flutter app?”: The agent will guide you to register the A2uiPlugin, add the a2ui() middleware to your agent, and use the genui package on the Flutter client.
“How do I define a tool with a typed input schema?”: The agent will show how to use the @Schema() annotation and schemantic library to define a type-safe input class for your tool.

Install

Download the skill as a ZIP:
https://autogineer.com/agent-skills/google/developing-genkit-dart/download

Unzip it into the cross-client skills folder of your project:

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

Documentation by Google

Genkit Dart

Genkit Dart is an AI SDK for Dart that provides a unified interface for code generation, structured outputs, tools, flows, and AI agents.

Core Features and Usage

If you need help with initializing Genkit (Genkit()), Generation (ai.generate), Tooling (ai.defineTool), Flows (ai.defineFlow), Embeddings (ai.embed), streaming, or calling remote flow endpoints, please load the core framework reference: references/genkit.md

1.0 vs pre-1.0 APIs

This skill targets Genkit Dart 1.0 (genkit: ^1.0.0). Older code and training data use pre-1.0 names that no longer compile; the common ones:

HTTP: startFlowServer / per-route shelfHandler / shelf_cors_headers are now GenkitRouter + serve() or asShelfHandler(), with CorsOptions; context providers take RequestData (genkit_shelf.md).
StatusCodes.UNAUTHENTICATED is StatusCode.unauthenticated (lowerCamelCase, same for EvalStatus.pass, ToolChoice.required).
No RetryPlugin; retry() is built in and takes Durations (initialDelay, maxDelay, also cacheTtl elsewhere).
Renames: GenerateResponseHelper -> GenerateResult (modelResponse, chunk.modelChunk), ExecutablePrompt -> Prompt<Input, Output>, embedMany -> embed, ToolFnArgs -> ToolFnArg, toolOutputSchema -> outputSchema, underlyingException -> cause, modelInfo: -> info:, RemoteAction.dispose() -> close(), prompt(input, PromptGenerateOptions(config: ...)) -> prompt(input, config: ...) (named options, like generate), defineMiddleware -> ai.defineGenerateMiddleware (app) / generateMiddleware (plugins).
Provider config types are prefixed: GeminiThinkingConfig, GeminiSafetySettings, GeminiGoogleSearch, GeminiSpeechConfig, GoogleGenAiEmbedderOptions, AnthropicThinkingConfig.
Removed: ToolInterruptException / ctx.interrupt() (return .interrupt(...)), GoogleAiModels / OpenAIModels constants (use googleAI.gemini('...'), openAI.model('...')). Simulated constrained output is opt-in via simulateConstrainedGeneration().
.prompt Picoschema is spec-compliant: name: type, description, never name(description): type (dotprompt.md).

Prompts (Dotprompt)

.prompt files keep prompt content out of Dart code with YAML frontmatter plus a Handlebars template. See references/dotprompt.md: promptDir, ai.prompt() (call/stream/render), variants, partials, named schemas via defineSchema, and the tools/maxTurns/returnToolRequests/use (middleware) frontmatter fields. A .prompt file can also back an agent directly via definePromptAgent.

Agents

Genkit Dart has an agent API for persistent, multi-turn conversations (sessions, snapshots, interrupts, branching, background execution, custom state, artifacts, and multi-agent delegation). The agent/session/snapshot APIs are experimental and live behind opt-in imports: server APIs come from package:genkit/experimental.dart (alongside package:genkit/genkit.dart), the browser/HTTP client from package:genkit/experimental_client.dart (alongside package:genkit/client.dart), and dart:io extras like FileSessionStore from package:genkit/experimental_io.dart. These entry points are @experimental, so importing them raises an experimental_member_use analyzer warning you can silence in analysis_options.yaml. The remoteAgent client works from any Dart app, including Flutter, and the backend is fully interchangeable — it can talk to a Genkit agent implemented in Dart, JS/TypeScript, or Go over the same HTTP protocol. A few Dart specifics: interrupts are ai.defineInterrupt(...) or tools that return .interrupt(...) (there is no ctx.interrupt()), sub-agent delegation uses the agents() middleware from package:genkit_middleware, and there is no artifacts() middleware yet (define artifact tools directly).

For more details see:

Agents: defining/serving an agent and client-managed state (start here).
Sessions & persistence: session stores (InMemorySessionStore/FileSessionStore/FirestoreSessionStore).
Human-in-the-loop / interrupts: pausing for approval/input via .interrupt(...) and resuming.
Branching: forking a conversation from a snapshot.
Background agents: detaching long-running turns and polling.
Working with state: typed custom session state, auto-synced to the client.
Artifacts: producing and reading named deliverables.
Multi-agent orchestration: delegating to sub-agents with the agents() middleware.
Advanced custom agents: defineCustomAgent for full turn control.
Deploying agents: serving agents over HTTP with GenkitRouter.addAgent (multiple agents, shelf, CORS).

Generative UI (A2UI)

Genkit Dart has an A2UI (Agent-to-UI) plugin (genkit_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 list; the Flutter client renders surfaces with the genui package plus the helpers in package:genkit_a2ui/client.dart. Dart specific: you must register A2uiPlugin() in Genkit(plugins: [...]) (unlike JS, middleware is resolved by name from the registry).

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

Genkit CLI (recommended)

genkit start unintrusively wraps any Dart 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 the app directly (dart run) skips trace capture, so you're debugging blind. Check install with genkit --version.

Installation:

curl -sL cli.genkit.dev | bash # Native CLI
# OR
npm install -g genkit-cli # Via npm
# OR run commands directly with npx without a global install (prefix every genkit command):
# npx genkit-cli start -- dart run main.dart

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. Starts the Developer UI (usually http://localhost:4000) for running flows, model and agent playground, and browsing traces:

genkit start -- dart run main.dart
genkit start --noui -- dart run main.dart   # 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; use flow:run (below) for that.

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 -- dart run main.dart (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"}' -- dart run main.dart

This is self-terminating: it runs the flow once, prints a Trace ID, then exits, so it's the right choice for a quick, non-interactive check (unlike genkit start). 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). Traces for this run can be inspected using the trace commands below.

Gotcha: top-level final declarations are lazy. Flows and agents defined as top-level final register with Genkit only when the symbol is first evaluated. An empty main() registers nothing, so flow:run fails with Process exited before runtime was ready. Reference the flow/agent symbols from main() (or import a module that does) so their define* calls actually run.

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.

Documentation:

genkit docs:search "streaming" dart
genkit docs:list dart
genkit docs:read dart/flows.md

Plugin Ecosystem

Genkit relies on a large suite of plugins to perform generative AI actions, interface with external LLMs, or host web servers.

When asked to use any given plugin, always verify usage by referring to its corresponding reference below. You should load the reference when you need to know the specific initialization arguments, tools, models, and usage patterns for the plugin:

Plugin Name	Reference Link	Description
`genkit_google_genai`	references/genkit_google_genai.md	Load for Google Gemini plugin interface usage.
`genkit_vertexai`	references/genkit_vertexai.md	Load for Gemini via Vertex AI (Google Cloud auth, versioned model IDs, embeddings incl. multimodal).
`genkit_anthropic`	references/genkit_anthropic.md	Load for Anthropic plugin interface for Claude models.
`genkit_openai`	references/genkit_openai.md	Load for OpenAI plugin interface for GPT models, Groq, and custom compatible endpoints.
`genkit_middleware`	references/genkit_middleware.md	Load for Tooling for specific agentic behavior: `filesystem`, `skills`, and `toolApproval` interrupts.
`genkit_mcp`	references/genkit_mcp.md	Load for Model Context Protocol integration (Server, Host, and Client capabilities).
`genkit_chrome`	references/genkit_chrome.md	Load for Running Gemini Nano locally inside the Chrome browser using the Prompt API.
`genkit_shelf`	references/genkit_shelf.md	Load for serving flows/models/agents over HTTP: `GenkitRouter` (core `package:genkit/io.dart`, standalone `dart:io`) and mounting it into Shelf apps.
`genkit_firebase_ai`	references/genkit_firebase_ai.md	Load for Firebase AI plugin interface (Gemini API via Vertex AI).
`genkit_a2ui`	references/a2ui.md	Load for A2UI (Agent-to-UI): streaming generative UI surfaces via the `a2ui()` middleware, rendered on the client with `genui`.

External Dependencies

Whenever you define schemas mapping inside of Tools, Flows, and Prompts, you must use the schemantic library. To learn how to use schemantic, ensure you read references/schemantic.md for how to implement type safe generated Dart code. This is particularly relevant when you encounter symbols like @Schema(), SchemanticType, or classes with the $ prefix. Genkit Dart uses schemantic for all of its data models so it's a CRITICAL skill to understand for using Genkit Dart.

Best Practices

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.
Always check that code cleanly compiles using dart analyze before generating the final response.
Always use the Genkit CLI for local development and debugging.
Verify with traces, not a blind run. Running the app directly (dart run) does not capture dev traces. See the Genkit CLI section for how to run your app and capture traces.

Files

ATTRIBUTION.mdAdded by AutoGineer862 B
LICENSELicence file added by AutoGineer11.1 KiB
SKILL.md13.4 KiB
references/a2ui.md14.7 KiB
references/agents-artifacts.md5.7 KiB
references/agents-background.md3.8 KiB
references/agents-branching.md3.5 KiB
references/agents-custom.md6.7 KiB
references/agents-deployment.md4.1 KiB
references/agents-human-in-the-loop.md8.0 KiB
references/agents-multi-agent.md5.6 KiB
references/agents-sessions.md6.7 KiB
references/agents-state.md7.1 KiB
references/agents.md14.6 KiB
references/dotprompt.md7.9 KiB
references/genkit.md16.2 KiB
references/genkit_anthropic.md1.7 KiB
references/genkit_chrome.md543 B
references/genkit_firebase_ai.md588 B
references/genkit_google_genai.md3.8 KiB
references/genkit_mcp.md4.3 KiB
references/genkit_middleware.md4.7 KiB
references/genkit_openai.md2.8 KiB
references/genkit_shelf.md4.4 KiB
references/genkit_vertexai.md2.6 KiB
references/schemantic.md4.8 KiB

references/a2ui.md

A2UI (Agent-to-UI) generative UI

The genkit_a2ui package brings

A2UI, a transport-agnostic, JSON-based streaming UI protocol, to Genkit Dart agents.
A2UI builds on the agent client. Server APIs come from package:genkit/genkit.dart; the browser/Flutter client comes from package:genkit/client.dart. Read Agents first if you have not.

An A2UI-enabled agent streams more than prose. It streams interactive UI surfaces (cards, lists, forms, buttons) that a client renders incrementally as the model responds. The entire server-side integration is a single model middleware: add a2ui() to an agent's use list and nothing else changes.

Install

On the server (the shelf app that hosts the agent), add genkit_a2ui alongside the packages the agent already needs. List genkit explicitly even though genkit_a2ui pulls it in transitively, otherwise dart analyze warns with depend_on_referenced_packages (the server code imports package:genkit/genkit.dart directly):

dart pub add genkit genkit_a2ui genkit_google_genai

To render surfaces you also need a renderer. The Flutter renderer for A2UI is genui. On the client Flutter app, add it plus a2ui_core, and genkit + genkit_a2ui for the client helpers (remoteAgent, a2uiEnvelopesFromParts, actionToMessage):

flutter pub add genkit genkit_a2ui 'genui:^0.10.4' 'a2ui_core:^0.1.1'

Pin these versions: the client code below targets the genui 0.10 API with a2ui_core 0.1. An unpinned add can resolve an older genui and a newer, incompatible a2ui_core, and the snippets then fail to compile.

Server: add the `a2ui()` middleware

Add a2ui() to your agent's use list. That is the whole server-side setup.

Dart specific: Dart middleware is resolved by name from the registry, so you MUST register A2uiPlugin() in Genkit(plugins: [...]) before referencing it via a2ui().

import 'package:genkit/genkit.dart';
import 'package:genkit/experimental.dart'; // defineAgent, InMemorySessionStore
import 'package:genkit_a2ui/a2ui.dart';
import 'package:genkit_google_genai/genkit_google_genai.dart';

// A2uiPlugin() registers the a2ui() middleware so `use: [a2ui()]` resolves.
final ai = Genkit(plugins: [googleAI(), A2uiPlugin()]);

final uiAgent = ai.defineAgent(
  name: 'uiAgent',
  model: googleAI.gemini('gemini-flash-latest'),
  system:
      'You help users. Render an A2UI surface whenever a result is clearer '
      'shown than told (weather, comparisons, lists, forms). Keep prose brief; '
      'put the substance in the UI.',
  use: [a2ui()], // defaults to the bundled 'basic' catalog
  store: InMemorySessionStore(),
);

It works identically on a one-shot ai.generate:

final res = await ai.generate(
  model: googleAI.gemini('gemini-flash-latest'),
  prompt: 'Show me the weather in Tokyo',
  use: [a2ui()],
);

Serve the agent over HTTP with GenkitRouter (see Deploying agents). addAgent mounts the turn route plus /getSnapshot and /abort for a server-managed agent:

import 'package:genkit/experimental_io.dart';
import 'package:genkit/io.dart';

void main() async {
  final genkit = GenkitRouter()..addAgent(uiAgent, path: '/api/uiAgent');
  await genkit.serve(
    port: 8080,
    // Flutter web runs on another origin.
    cors: const CorsOptions(
      allowedHeaders: ['Content-Type', 'Accept', 'X-Genkit-Stream-Id'],
    ),
  );
}

Options

Pass options to a2ui(...):

Option	Default	Description
`catalog`	`'basic'`	Id of the catalog describing what the agent may render.
`instructions`	`'system'`	Where to inject catalog capabilities. `'none'` injects nothing (supply your own instructions instead).
`validate`	`'warn'`	Validate emitted envelopes. `'warn'` logs and drops bad blocks; `'strict'` throws; `'off'` skips it.
`surfaceId`	fresh UUID	Surface id policy. Defaults to a new UUID per surface; pass a fixed string to reuse one id per surface.
`version`	`'v0.9'`	Protocol version stamped on envelopes.

Use validate: 'strict' during development to fail fast on malformed JSON or components outside the catalog. See Security for what 'strict' does and does not check.

Client: render surfaces (Flutter + genui)

package:genkit_a2ui/client.dart is browser/Flutter-safe (no dart:io). Consume the agent with remoteAgent, pull A2UI envelopes off each chunk's content with a2uiEnvelopesFromParts, convert each envelope to a genui A2uiMessage, and feed it to a SurfaceController. A2UI travels as data parts on the raw model chunk, so read them from chunk.raw.modelChunk?.content.

import 'package:a2ui_core/a2ui_core.dart' as core;
import 'package:genkit/client.dart';
import 'package:genkit/experimental_client.dart'; // remoteAgent, AgentApi
import 'package:genkit_a2ui/client.dart';
import 'package:genui/genui.dart' hide basicCatalogId, DataPart;

// remoteAgent returns an AgentApi<State> (not a `RemoteAgent`).
final agent = remoteAgent(
  url: 'http://localhost:8080/api/uiAgent',
  getSnapshotUrl: 'http://localhost:8080/api/uiAgent/getSnapshot',
  abortUrl: 'http://localhost:8080/api/uiAgent/abort',
);
final chat = agent.chat();

// genui registers an empty stub for an unknown catalog id, so re-tag its basic
// catalog with the id the plugin's bundled basic catalog advertises.
final catalog = BasicCatalogItems.asCatalog().copyWith(catalogId: basicCatalogId);
final surfaceController = SurfaceController(catalogs: [catalog]);

final turn = chat.sendStream(text: 'What is the weather in Tokyo?');
await for (final chunk in turn.stream) {
  if (chunk.text.isNotEmpty) appendProse(chunk.text);
  for (final envelope in a2uiEnvelopesFromParts(chunk.raw.modelChunk?.content)) {
    surfaceController.handleMessage(core.A2uiMessage.fromJson(envelope));
  }
}
await turn.response;

Dart specific: importing both package:genkit/client.dart and package:genui/genui.dart collides on two symbols, so hide genui's:

basicCatalogId: both packages export one with different values. You want the plugin's; if the ids do not match, genui registers an empty stub and surfaces render blank.
DataPart: genkit's client and genui (via genai_primitives) both export a DataPart class, so referencing DataPart unqualified is ambiguous.

Hence import 'package:genui/genui.dart' hide basicCatalogId, DataPart;.

remoteAgent manages the session id for you, so a single chat keeps the whole conversation server-side (the agent's session store holds history).

In a Flutter app, listen to surfaceController.surfaceUpdates to add a Surface(surfaceContext: surfaceController.contextFor(id)) widget to your chat log when a SurfaceAdded update arrives, and listen to surfaceController.onSubmit to route actions back to the agent (see below).

Handling user actions

When a user interacts with a surface (for example, presses a Button), surfaceController.onSubmit emits a genui ChatMessage. That message is not an A2uiClientAction you can hand straight to actionToMessage: genui reports the interaction as a UiInteractionPart whose payload is a JSON string { "version": ..., "action": { name, surfaceId, widgetId, context } }. Decode that part into an A2uiClientAction, then actionToMessage(...) it and send it as the next turn:

import 'dart:convert';
import 'package:genkit_a2ui/client.dart';
import 'package:genui/genui.dart' hide basicCatalogId, DataPart;

surfaceController.onSubmit.listen((ChatMessage message) {
  final action = _actionFromSubmit(message);
  // Guard against re-entrancy: ignore a new action while a turn is still
  // streaming, otherwise two concurrent turns interleave.
  if (action == null || busy) return;
  final turn = chat.sendStream(message: actionToMessage(action));
  // ...consume turn.stream like above (prose + a2uiEnvelopesFromParts)...
});

/// Extracts an [A2uiClientAction] from a genui onSubmit [ChatMessage].
A2uiClientAction? _actionFromSubmit(ChatMessage message) {
  for (final part in message.parts) {
    final interaction = part.asUiInteractionPart?.interaction;
    if (interaction == null) continue;
    final decoded = jsonDecode(interaction);
    final action = decoded is Map ? decoded['action'] : null;
    if (action is Map) {
      final m = action.cast<String, dynamic>();
      return A2uiClientAction(
        name: (m['name'] as String?) ?? 'action',
        surfaceId: (m['surfaceId'] as String?) ?? '',
        // genui names it `widgetId`; A2uiClientAction calls it sourceComponentId.
        sourceComponentId: (m['widgetId'] as String?) ?? '',
        timestamp: DateTime.now().toUtc().toIso8601String(),
        context: (m['context'] as Map?)?.cast<String, dynamic>() ?? const {},
      );
    }
  }
  return null;
}

The action's name is sent as the user message; the full action (including its context) is attached as an a2ui data part so the agent can react to it.

Forms

Input components (TextField, CheckBox, Slider) do not send their values automatically. To capture what the user entered, the model must:

Bind each input's value to a data-model path ({ "path": "/email" }).
Echo those same paths in the submit Button's action.event.context.

The catalog capabilities injected into the system prompt already instruct the model to do this. Without both steps, the action arrives with an empty context.

Custom catalogs

The catalog option is a catalog id resolved from the Genkit registry. The bundled 'basic' catalog is the default and needs no registration. A catalog describes the components the model may emit:

id: globally-unique URI (also used as catalogId on createSurface).
components: each with name (matches the renderer type), description (one-line summary), and props (a compact, model-facing text description of the component's props, kept as plain text to minimize prompt tokens).

A custom catalog has two halves that MUST agree on a catalog id: the server catalog (what the model is told it may render, and validated against) and the client renderer (the widgets that actually paint the components). Define the id once and share it.

Server: register the catalog

Start from basicCatalog and add your own component, then register it with loadCatalog before serving any turns and reference it by id:

import 'package:genkit_a2ui/a2ui.dart';

const weatherCatalogId = 'com.example.a2ui.weather';

final weatherCatalog = A2uiCatalog(
  id: weatherCatalogId,
  components: [
    ...basicCatalog.components,
    const A2uiCatalogComponent(
      name: 'Gauge',
      description: 'A circular gauge visualizing a single numeric value.',
      props: 'value: number or { path } binding (required); min?: number; '
          'max?: number; label?: string; unit?: string.',
    ),
  ],
);

// Call once at startup, before the agent handles a turn.
Future<void> registerCatalogs() =>
    loadCatalog(ai, id: weatherCatalogId, catalog: weatherCatalog);

final uiAgent = ai.defineAgent(
  name: 'uiAgent',
  model: googleAI.gemini('gemini-flash-latest'),
  use: [a2ui(catalog: weatherCatalogId, validate: 'strict')],
  store: InMemorySessionStore(),
);

You can also load a catalog from a JSON file: loadCatalog(ai, id: 'my-catalog', file: './my-catalog.json').

On the Flutter client, implement the matching component as a genui CatalogItem (a name, a prop dataSchema, and a widgetBuilder) and re-tag the catalog with the SAME id:

final gaugeCatalogItem = CatalogItem(
  name: 'Gauge', // MUST match the server component name
  dataSchema: _gaugeSchema, // built with json_schema_builder's `S`
  widgetBuilder: (itemContext) {
    // Resolve { path } bindings via genui's Bound* widgets, then paint.
    return _GaugeWidget(...);
  },
);

final catalog = BasicCatalogItems.asCatalog().copyWith(
  newItems: [gaugeCatalogItem],
  catalogId: weatherCatalogId, // MUST match the server catalog id
);

If the name or catalog id disagree, the model emits a component the client cannot render, or the client registers widgets under an id no surface references. Catalogs live in the registry under value type a2ui-catalog.

Security and the trust boundary

Generative UI moves model output into the UI, so treat every surface an agent emits as untrusted input. The validate option (including 'strict') checks envelope structure and component type names against the catalog only. It does not validate component props or data-model values: model-controlled values such as Image.url and Text (inline Markdown that a renderer may turn into rich content) pass through untouched. 'strict' is a well-formedness check, not a security boundary.

The renderer/catalog owns prop sanitization. Whatever renders a surface (for example genui plus your Markdown renderer) is responsible for escaping and sanitizing prop values before they reach the UI.
Restrict remote sources at the host. On the web, serve the app with a Content Security Policy that limits img-src and other fetch directives to origins you trust.
Do not put secrets in the data model. Anything bound into a surface's data model can be echoed back through an action's context.

For server-side control over props (for example, allow-listing image hosts), add your own model middleware after a2ui() to inspect and rewrite the emitted a2ui parts.

How it works

A2UI rides on its own part channel: a Genkit data part with mime type application/a2ui+json whose data is { "envelopes": [...] }. On each model call inside the agent's tool loop, a2ui():

Injects the catalog's capabilities into the system prompt (unless instructions: 'none').
Intercepts the model output (streamed chunks and the final message).
Extracts a2ui fenced code blocks from the model's text.
Validates them against the catalog (per validate).
Rewrites them into canonical a2ui data parts.

Inbound a2ui parts (a surface action sent back as the next turn, or replayed history) are summarized into plain text before the underlying model sees them, so a model that does not understand the a2ui mime type can still reason about prior surfaces and user actions.

For a complete, runnable example (a shelf server plus a Flutter genui client with a custom Gauge catalog), see the a2ui testapp in the Genkit Dart repo.

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-dart · commit 2194d3b

Licence

Apache License 2.0 (redistribution allowed)

LICENSE (added by AutoGineer from LICENSE)
ATTRIBUTION.md (written by AutoGineer)

Synced

2026-11-09

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

From the author

AutoGineer summary

What it does

When to use it

Advantages

Usage examples

Install

Documentation by Google

Genkit Dart

Core Features and Usage

1.0 vs pre-1.0 APIs

Prompts (Dotprompt)

Agents

Generative UI (A2UI)

Genkit CLI (recommended)

Plugin Ecosystem

External Dependencies

Best Practices

Files

references/a2ui.md

A2UI (Agent-to-UI) generative UI

Install

Server: add the a2ui() middleware

Options

Client: render surfaces (Flutter + genui)

Handling user actions

Forms

Custom catalogs

Server: register the catalog

Client: register a matching widget

Security and the trust boundary

How it works

Requirements and compatibility

Security

Attribution and licence

Related skills

Implement

Source Driven Development

Write Swift

Cardputer Buddy

Typescript Pro

Scala Pro

Download ZIP

Server: add the `a2ui()` middleware