AG Grid
Best JavaScript Grid in the World
AG Charts
Best JavaScript Charts in the World
AG Studio
Best JavaScript Dashboard in the World
Bryntum Gantt
Speed-tuned Gantt chart for project planning
Bryntum Scheduler
Resource scheduling timeline component
PROPRO
Bryntum Scheduler Pro
Scheduler with auto-scheduling and constraints
Bryntum Calendar
Flexible JavaScript event calendar
Bryntum Task Board
Kanban-style task board component
Search⌘ KCtrl K
What's New
Getting Started
OverviewQuick StartBuilding a DashboardMigrationEnterprise Licence
AI Skills
Connecting Data
Data OverviewData ModellingLoading DataSharing & Caching Data
Agent Framework
Agent Framework OverviewAgent Quick Start
WebMCP
Fields & Formatting
Data TypesFormattingExpressionsCalendarsEditable Fields
Appearance & Behaviour
Modes & LayoutThemingTheme BuilderLocalisationStateUndo & RedoExportingFigma Design System
Widgets
Widgets OverviewConfiguring WidgetsCustom WidgetsForm Configuration
Server-Side Data
Custom EngineImplementing Queries
User Guide
Working with AI

Angular Embedded AnalyticsHarness Overview

Version 3.0.0

The harness manages the conversation with the user, orchestrates the agents within AG Studio, and exposes what a UI needs to render.

How it Works Copy Link

A harness manages four things:

  • Conversations: A conversation is a session. The UI reads it through session APIs such as addEventListener, so it is told whenever something changes that the user should see.

  • Agents: The harness holds the roster, names the primary agent, and owns the delegation between them.

  • Persistence: Conversations live in the harness, not in AG Studio state. They are kept in memory by default. Supply a history store to make them durable.

  • Observability: The harness emits a typed stream of boundary events, such as a tool call starting and finishing, or a turn completing. Register observers to drive metrics, cost meters or an eval harness.

Choosing a Harness Copy Link

There are two options. Use the harness AG Studio ships, built with createAiHarness, or write your own against the AgAiHarness interface. Most integrations use the first.

Writing your own replaces the conversation itself, including threads, history and sessions. It is worth doing only when that machinery is already yours.

Choosing a Runner Copy Link

Within Studio's harness, each agent is paired with a runner. The runner decides how much of each turn Studio runs for you:

For most use cases, the Direct LLM Runner is the fastest way to integrate AI into AG Studio. Use the others when you have existing infrastructure, or an agent framework you have already built on.

Comparing the Options Copy Link

The picker below shows how the harness, the runner, the agents and the chat UI combine, and the code for each combination:

Harness
Agent runner
Agents
Chat interface

You provide

  • An adapter reaching your model

Start at Agent Framework

UserChat panelHarnesscreateAiHarnessAgent runnerdirectLlmRunnerTools + contextctx.tools()Agent definitionsbuiltInLLM adapterYou supply itYour model
  • Studio
  • Yours
Copyconst studioProperties = {
    ai: ({ api }) =>
        createAiHarness(api, { adapter, primary: 'lead' }),
};

Changing Approaches Copy Link

Moving between combinations is mostly additive:

  • Swap the agents. Change their instructions and tool sets, or replace the built-ins with your own. The harness and the panel are unaffected.
  • Change the runner. Re-pair the same definitions with directLlmRunner, clientToolRunner, or a plain { ...definition, run }.
  • Move to a harness of your own. Keep listing the same tools, and implement AgAiHarness around your own loop.
  • Drop the harness. Stop providing one and keep the tools. See Without a Harness.

Adopting Studio's chat UI after building your own is the one move that costs real work, because your UI's state model has to be reconciled with the session snapshot the panel reads. If you may want the panel eventually, keep the panel and replace the agents instead.

Next Copy Link