Case study · 2025 · Voice · Platform

A control plane for the messy reality of voice automation

Voxplane is a multi-tenant operations layer for B2B voice automation — super-admin, company-admin, and user scopes; live call transcripts; agent configuration; and a glass-morphism design system that makes voice ops feel like a real product instead of a debugger.

  • ClientB2B voice automation platform
  • IndustryVoice · SaaS · Multi-tenant
  • Year2025
  • EngagementProduction build · ongoing iteration
Voxplane voice-agent control plane — a list of active agents, a live call transcript, and a 96% call-quality KPI on a desktop dashboard.
01 — At a glance
3-scope
Tenancy modelSuper-admin, company-admin, user — clean isolation per scope.
Live
Call transcriptsStreaming Vapi transcripts with sentiment and intent overlays.
401-safe
Auth postureAxios interceptor with auto-logout on token expiry — no zombie sessions.
Summary

Voice automation platforms ship the agent and ship the API. Everything in between — the company-level configuration, the live operational view, the role boundaries between super-admin and tenant-admin, the moment-by-moment KPI a team needs to know whether their voicebots are working — is left to the customer to build, badly. Voxplane is the control plane that should have shipped with the voice product in the first place: a multi-tenant operational surface for voice ops, built on React with a glass-morphism design system, with Vapi-style voice agent integration wired into the live-call view.

The problem

Procurement was held together with Excel and goodwill.

Voice automation is having a moment, and most teams using it cannot tell whether it's working. The voice agent itself — the API call, the LLM, the TTS — is a commodity that any vendor can ship. What's missing is the *operational* layer: a multi-tenant dashboard where a super-admin manages company customers, a company-admin manages their team's agents and call configurations, and a regular user can listen to a live call or pull a transcript without raising a ticket.

The platform we worked with had a strong voice product and a thin operations surface. Customers were logging into a single-tenant admin tool that didn't model the company-vs-platform boundary cleanly. There was no concept of tenant-scoped role separation. Authentication was a session cookie with no refresh or auto-logout on expiry — which meant a session left open on a laptop overnight was a live security hole.

The voice agent was strong. The operational layer didn't exist. The team was running production voice ops on a session cookie and a git-deployed JSON file.

And the KPI surface was missing entirely. The team running voice operations had to query a database directly to see how many calls had succeeded that day. Call quality was a manual review process. Agents and their configuration lived in JSON files committed to a git repo and deployed via push — which, to be clear, is a perfectly serviceable approach for a five-engineer startup and unsustainable for the customer base they were about to onboard.

We were asked to build the platform that should have been there. Multi-tenant from day one. Role-aware UI throughout. Live call transcripts as a first-class surface. KPIs operators actually read. And a visual identity that signaled a product, not an internal tool.

Voxplane live-call view — streaming voice transcript on the left, sentiment indicator in the middle, transfer and reassign actions on the right.

Live call as a first-class surface. Transcript streams in real time; transfers and reassigns are one click.

02 — Why us

Why they chose Synara

Three things made this engagement land with us. First, multi-tenant role-aware applications are something we've shipped repeatedly — separating super-admin from tenant-admin from user, with clean route guards and a single hook to interrogate the current scope. Second, the visual register the team wanted (modern voice-product aesthetic, glass-morphism, restrained motion) is exactly where we operate. Third, voice integration is hands-on and stateful, and we were comfortable wiring it into a React-Redux-Axios stack without inheriting the bad parts of any of those frameworks.

Voice is also where the cost of small UX mistakes is unusually high. A delayed transcript is unrecoverable; a misrouted agent is a complaint; an ambiguous call-status pill is a support ticket. We treated the operational surface with the same care we'd treat a consumer product — because for the people running voice ops eight hours a day, it *is* a consumer product.

03 — What we built

A three-portal procurement platform — buyer, supplier, admin.

Voxplane voice-agent control plane rendered on a MacBook on a sunlit clay surface — list of active agents, live transcript, 96% call-quality KPI.
01

Three-tier tenancy with clean boundaries

Super-admin manages platform-level concerns (tenant onboarding, billing posture, system health). Company-admin manages their own voice agents, team members, and configuration. Users run day-to-day operations. Each scope has its own routes, its own dashboard, and its own server-enforced permissions.

02

Role-aware route guards

A `SuperAdminRoute` and a `CompanyRoute` component wrap protected screens with explicit role checks. The check runs both client-side (for instant redirects) and server-side (for actual enforcement). Adding a new role is a 20-line change in the AuthContext.

03

Axios interceptor with auto-logout on 401

Every API call passes through a single Axios interceptor that attaches the Bearer token, watches for 401 responses, and triggers an auto-logout on any expired session. No zombie sessions, no manually-handled refresh state per screen.

04

Live call view with streaming transcripts

Voice agent integration mounts a live call panel — streaming transcript on the left, sentiment and intent indicators in the middle, one-click transfer and reassign actions on the right. The whole panel updates in real time without page reloads.

05

Operator-grade KPI dashboards

Recharts dashboards calibrated for operations — call volume, completion rate, average handle time, quality trend, agent utilization. KPI strips at the top of every relevant surface so operators know the state of their world without clicking.

06

Glass-morphism design system

Translucent backdrop-blur surfaces, restrained motion, a typography scale tuned for dense operational reading. Built on Radix + shadcn primitives with a custom theme layer so the same components ship across all three tenant scopes without re-skinning.

Voxplane role-management surface — super-admin, company-admin, and user scopes shown side by side with their respective permissions.

Three tenant scopes. Clean boundaries. Server-enforced, client-mirrored.

04 — Architecture

In plain English, why each choice.

Frontend
Vite + React 18 with the React Router. Radix UI + shadcn/ui as the primitive layer, with a glass-morphism theme layer on top. Recharts for the operational charts. The entire UI was scaffolded with strict tenant-scope as a first-class component prop, not an afterthought passed via React Context.
Auth posture
AuthContext owns identity and role. A single Axios interceptor handles the request side (Bearer attach) and the response side (401 → logout). The interceptor lives in `src/api/apiClient.ts` and is the only place in the codebase that knows about tokens.
Route guards
Two HOC components — `SuperAdminRoute` and `CompanyRoute` — wrap protected screens. They run a role check, redirect on miss, and short-circuit any nested data fetching until the role is confirmed. No screen flashes content before a role check resolves.
Voice integration
Vapi-style voice agent embedded via the platform's Web SDK. The live-call panel subscribes to the agent's transcript and sentiment streams. The integration is wrapped in a custom hook so the rest of the codebase never imports the SDK directly.
State + data
Server data fetched via TanStack-style query patterns; UI state local to each screen. We deliberately avoided global Redux state for this codebase — the operational data is request-scoped, and a Redux store for it would have been overhead without payoff.
Backend interface
Voxplane consumes a clean HTTP API on the platform side. The integration assumes server-side tenancy enforcement; client-side checks are for UX, not security. Every endpoint is documented, every response shape is typed at the boundary.
05 — Outcomes

What changed after launch.

Multi-tenant
From day oneSuper-admin, company-admin, user — no retrofit, no silent migration.
0
Zombie sessionsAuto-logout on 401 eliminated long-lived expired tokens.
Live
Operational KPIsVoice ops team reads state from the dashboard, not the database.
Glass-morphism
Visual registerA coherent product surface across three role scopes.

MethodologyArchitectural outcomes are properties of the deployed codebase. Operational impact is observed by the customer success and operations teams; KPI dashboards are now the primary surface for shift-level decisions.

We stopped opening the database to answer operational questions. The dashboard is the answer. That's the only test that matters for an ops product.

Head of Voice OperationsB2B voice automation platform
06 — What’s next

A deeper analytics surface — call-level outcome tagging, quality trend by agent, model-level A/B testing. A customer-facing portal for the platform's own tenants. And a small mobile companion for on-call supervisors who need to listen to a live call from their phone.

Stack
  • Vite
  • React 18
  • Radix UI
  • shadcn/ui
  • Recharts
  • Axios
  • Vapi AI Web SDK
  • React Router

Running voice automation on a single-tenant admin tool?

Voice ops at scale needs a real control plane — multi-tenant boundaries, role-aware UI, live transcripts, and KPI dashboards calibrated for the team running it. We can scope a Voxplane-shaped layer for your voice product in 10–14 weeks.

Start a conversation