Matrix42 AI Studio · Oct – Nov 2026

AI Studio: the control plane for enterprise AI

An admin console where a company sets up agents, deterministic workflows, channels, connectors, model providers, budgets and approval policies, with full audit. Built spec-first by three people; I own how it looks and behaves.

Role: UI/UX owner, design-system lead
Period: Oct – Nov 2026, GA in release 27.1
Stack: Lit 3React@lit/reactTypeScriptViteVitestPlaywrightaxe-coreFastifyPostgres

commits
ADRs in the spec
generated lines in 4 weeks
per workflow run at the first design partner

AI Studio is not an end-user product. Administrators use it to decide which agents exist, which tools and connectors they may use, who can talk to them on which channel, how much they may spend, and what needs a human approval. End users only ever see a chat. The goal is least spend, most value, full governance, and the first design partner's software-ordering workflow runs at six to seven cents per execution because AI is used only where a decision is ambiguous.

AI Studio home with the assistant question box, Needs you, cost pacing and recent changes — Home: one question box, what needs you, cost pace for the month, agents and recent changes. Sample tenant.

The shell

I wrote the console blueprint after the shells people already trust: an icon rail, a sidebar when a section needs one, and an inset panel. Header = breadcrumbs plus the page's own actions, nothing else. One centred column with one intro line. One look for loading, empty and error. One save cue. URL-driven state so every view is linkable. The first pass was a spike across every page; the engineering owner then ported it in twelve waves while I did the visual QA (14 recurring token and component gaps, 41 page-level gaps, two bugs) against a side-by-side bench.

Agents list with state, model, what it still needs and cost this month — Agents: state, model, what each still needs, cost this month.

An agent's overview: conversations, people, helpful answers, cost, and where it runs — An agent: what is live, how the deployment stands, each channel's address.

Human in the loop, by design

Every agent can be tried beside its settings in a test chat. When it wants to run a tool that changes something, the run stops and asks: the card says what will run, on whom, with which arguments, and offers Reject or Approve. The same approval policies apply in production channels. Version compare shows exactly what changed between a draft and what is live, and any version can be restored as the draft.

Test chat beside the agent settings; the agent waits for approval to reset a password — Test chat: the agent found the user and waits for approval before it runs a write tool.

Side-by-side diff of two agent versions — Compare any two versions; restore one as the draft.

Governance you can read

Usage is tracked from day zero by agent, workflow, person, department and model, in cost rather than tokens, with what-stands-out notes and budget pacing. Every admin action, operator access request, model call and workflow run lands in the audit log with its content available on request. Six built-in roles separate access administration, auditing, building, deployment, FinOps and tenant administration.

Usage page: cost, tokens, what stands out, cost per day by agent, budgets and a when-it-is-used heatmap — Usage: cost first, what stands out, budgets with pace, when it is used.

One audit event: time, type, operation, actor, resource, outcome, source — An audit event, and its content on request.

Command palette: search, go to or create — ⌘K: search, go to, or create any resource.

Design system

The console runs on a Lit 3 web-component library with typed React wrappers, design tokens including motion tokens, light and dark themes, CSP and Trusted Types compliance, axe checks in CI and WCAG 2.2 AA as the acceptance bar. I brought it to parity with the spike and wrote the decision record that separates look ownership (mine) from technical ownership (the platform's). UI changes now go through a dedicated lane: no spec round-trip for look and behaviour, a short plan whose design source is a recorded piece of feedback, tests that name the behaviour, review, PR.