Conduit's built-in web UI — observe + operate, not authoring.
This is a React single-page app, generated-from-OpenAPI, that will be embedded into the conduit
binary and served by conduit run. It observes running pipelines (live record flow, per-stage
inspection, a pipeline graph, metrics) and operates them (start/stop). It is not an authoring
surface: pipelines are created and edited as config (YAML → conduit pipelines deploy/apply, MCP,
or the library), which stays the single source of truth. See the design doc in the conduit repo:
docs/design-documents/20260713-greenfield-built-in-ui.md.
This repo is at the UI-1 (bootstrap) stage: scaffold, generated API client + freshness test, design tokens, CI. Feature slices (fleet view, graph, record flow, operate, embedding) follow.
Start Conduit with the UI's dev origin allowed for CORS (the engine denies cross-origin by default):
conduit run --api.http.cors.allowed-origins=http://localhost:5173Then:
npm ci
npm run dev # Vite dev server on http://localhost:5173* is refused on a non-loopback bind — list exact origins for anything but local loopback.
| Command | What it does |
|---|---|
npm run dev |
Vite dev server |
npm run build |
Typecheck + static SPA build to dist/ (embedded into conduit later) |
npm run test |
Vitest (unit + a11y + the generated-client freshness test) |
npm run lint / format |
ESLint (incl. jsx-a11y) / Prettier |
npm run gen:api |
Regenerate the typed API client from the vendored schema |
The typed client (src/api/) is generated from a vendored, byte-identical copy of Conduit's
served OpenAPI schema (src/api/api.swagger.json, Swagger 2.0 from grpc-gateway, converted to
OpenAPI 3.x at generation time). SCHEMA_VERSION records the conduit ref the schema came from.
The generated-client freshness test asserts the checked-in client matches a fresh generation
from the pinned schema — so the client can never silently drift from the schema. It does not
prove the pinned schema matches a live engine; that gap is tracked by SCHEMA_VERSION and the
re-vendor path (copy conduit's proto/api/v1/api.swagger.json here, update SCHEMA_VERSION, run
npm run gen:api). A scheduled drift check is a planned fast-follow.
The 3 Inspect streaming endpoints are excluded from the typed client (grpc-gateway models them
as a single object, not a stream) and use the hand-written websocket wrapper in src/api/streaming.ts.
src/tokens/ holds framework-agnostic CSS custom properties, every one namespaced --conduit-*.
They will later be extracted into a shared @conduitio/design-tokens package used by both this UI
and the connector-registry web UI — keep the folder free of framework/build-tool syntax.