Generative UI

The VH3 AI platform returns structured tool outputs alongside every Connie answer, every report, every investigation, and every customer summary. That structure is the foundation for what we call generative UI: a single contract between the intelligence layer and the surfaces your team works from, so the same operational answer renders consistently in a dashboard, an internal tool, a custom application, or an AI-coded prototype. The @vh3/field-service-ui package is the reference implementation of that contract. It is a self-contained React component library, designed to drop into any React application without configuration, that takes a VH3 AI tool response and renders the appropriate operational interface automatically.

Preview. The @vh3/field-service-ui package is in preview. The components, theming system, and contracts shown below are the targeted release surface. Get in touch with VH3 AI if you would like to use it before the public release.

Why this exists

Most AI products either return prose or return raw JSON and leave the rendering problem to the consumer. Both create friction in field service operations. Structured UI lets a coordinator drill into underlying jobs, verify numbers, and compare the picture across accounts without reading raw JSON or parsing a paragraph by hand. The generative UI package solves both. The intelligence layer returns a structured payload. The component library knows how to render that payload. The result is a polished operational interface that looks the same in every application built on the layer, with no custom UI development required.

The contract

The pattern is simple: one tool invocation produces one structured payload, which maps to one renderer.

import { ToolRenderer } from "@vh3/field-service-ui";

<ToolRenderer toolName="investigate" response={apiJson} />;

The renderer dispatches automatically based on the tool name. An investigation response renders as an evidence-cited investigation card. A customer summary response renders as a sectioned customer brief. A report generation response renders as a full dashboard layout. The same JSON your agents already receive becomes a complete interface.

What is in the package

The library includes a set of dedicated components for the most common operational outputs:

Tool name	Component rendered
`jobs_aggregate`	Stats, chart, or comparison card, chosen automatically
`job_lookup`, `job_feed`	Data table
`job_detail`	Job detail card
`weather_check`, `weather_for_job`, `weather_for_site`	Weather widget
`autocomplete`	Option list
`investigate`	Investigation card with evidence list
`generate_report`	Dashboard layout or composite report
`generate_summary`	Customer summary with seven sections
`contact_snapshot`	Composite contact report
`search_outcomes`, `search_intake`	Data table
`case_report`	Case report card

Each component is also exported individually if you want to render a specific layout without going through the dispatcher.

Live components

Browse the full component catalogue:

VH3 AI generative UI components

Live, interactive component gallery covering every component, story variant, and rendered tool output the library produces.

A selection of representative components below.

Dashboard layout

The DashboardLayout component composes a full operational report from a generate_report response. Morning briefings, midday updates, weekly reviews, and account monthlies all render through this single layout.

Investigation card

The InvestigationCard renders an investigate response as a headline, confidence score, recommendations, and a cited evidence list. The same component handles high, medium, and low confidence outputs.

Customer summary

The CustomerSummary component renders the seven-section customer knowledge base in a single navigable interface, suitable for account reviews and pre-call briefings.

Job detail card

The JobDetailCard renders a single job lookup as a complete operational record: status, timing, engineer, site, and outcomes.

SLA gauges

Compact, glanceable visualisations for SLA performance, suitable for embedding in dashboards or briefing emails.

Drop into any React application

The package ships with zero host configuration. All styles, fonts, and runtime dependencies are bundled inside the library. The only peer dependency is React.

npm install @vh3/field-service-ui

import "@vh3/field-service-ui/style.css";
import { ToolRenderer } from "@vh3/field-service-ui";

function OperationsView({ apiJson }) {
  return (
    <div className="vh3-ui">
      <ToolRenderer toolName="generate_report" response={apiJson} />
    </div>
  );
}

It works identically in Next.js, Vite, Create React App, Remix, Bolt, Base44, or any AI coding assistant scaffolding. There is no extra styling setup to copy, no font loading to configure, and no theme provider to wrap.

Use the package inside authenticated apps that enforce the same scoping rules as the API. Do not expose raw tool payloads or internal IDs in public portals without applying your access, PII, and tenant-isolation policy. See Deploying secure apps.

Custom theming

The package ships with the VH3 dark theme by default, but the visual identity is fully customisable through CSS variables. Option A: edit a copied config file.

cp node_modules/@vh3/field-service-ui/dist/theme/vh3-ui.config.css ./styles/vh3-theme.css

Adjust the --vh3-* variables, then import after the main stylesheet:

import "@vh3/field-service-ui/style.css";
import "./styles/vh3-theme.css";

Option B: generate a theme at runtime. This path is designed for rapid customisation and dynamic theming.

import { createTheme, injectTheme } from "@vh3/field-service-ui";

const css = createTheme({
  background: "#0D1117",
  accent: "#FF6B00",
  fontSans: "'JetBrains Mono', monospace",
});

injectTheme(css);

The same components carry your visual identity without any source modification.

Why this matters for builders

A coordinator’s dashboard, a partner portal, an internal account review tool, and an AI-coded prototype can all render the same operational answer in the same way. That consistency is what makes the intelligence layer practical to build on at scale. The platform returns the answer once. The component library renders it everywhere. Your team focuses on the operational workflow around it, not on rebuilding the rendering layer for every surface. This is the visual contract for VH3 AI. As the platform evolves, the package evolves with it. New tool types ship with new renderers. New layouts ship with new components. Every consumer of the intelligence layer gets the upgrade automatically.

Live component catalogue

Full live preview of every component and variant.

Agent observability

The structured tool outputs this library renders.

Building on the layer

Where the package sits in the broader builder story.

Connie API

Response shape returned by the Connie tool surface.

​Generative UI

​Why this exists

​The contract

​What is in the package

​Live components

VH3 AI generative UI components

​Dashboard layout

​Investigation card

​Customer summary

​Job detail card

​SLA gauges

​Drop into any React application

​Custom theming

​Why this matters for builders

​Related

Live component catalogue

Agent observability

Building on the layer

Connie API

Generative UI

Why this exists

The contract

What is in the package

Live components

Dashboard layout

Investigation card

Customer summary

Job detail card

SLA gauges

Drop into any React application

Custom theming

Why this matters for builders

Related