🧭 Frontend Routing#

This page is for the Labs frontend docs and builder navigation. It explains how the static frontend should route users through the developer experience.

Primary Routes#

Route	Purpose
`/`	Product overview and entry points
`/docs/`	Prerendered, crawler-readable documentation index
`/docs.html`	Compatibility alias for `/docs/`
`/builder.html`	Agent Factory and provider-agnostic builder
`/console.html`	Account, usage, logs, keys
`/tester.html`	Oracle/TTS/STT playground
`/get-key.html`	Labs Cloud key signup
`/pricing.html`	Pricing and credits

GitBook docs should mirror those routes with pages for quickstart, Agent Factory, provider framework, BYOK, voices, logs, MCP, and E2E testing.

Builder First Screen#

The first screen should answer one question: "How do I create a working agent with one key?"

Required above-the-fold controls:

Supafone API key.
Inbound/outbound selector.
Agent name and prompt.
Voice provider and voice preview.
Labs on/off with managed/BYOK mode.
Number strategy.
Create agent.
Export TypeScript/Python.
Log stream.

Advanced hosted-delivery credentials should be split into three drawers:

Drawer	Examples
Agent/provider stack	Fourteen audited runtime adapters
Telephony	Twilio, Telnyx, Plivo, SignalWire, SIP/custom trunks
TTS	Cartesia, ElevenLabs, Inworld, Deepgram, custom TTS

Export Panel#

The builder should export:

TypeScript SDK,
Python SDK,
REST/curl,
JSON payload.

The exported config should be the same payload the builder sends. That makes the UI a code generator instead of a demo.

Logs Panel#

The builder should connect to:

text

GET /v1/logs
GET /v1/logs/stream

Show endpoint, provider, model, voice, duration, billed seconds, and detail. Provide a raw JSON drawer per row.

Voice Preview Panel#

Use:

text

GET  /v1/voices
POST /v1/tts

The preview should be available before provisioning the final agent. If the selected engine is not configured or the key has no balance, show the API error directly and keep the rest of the builder usable.

View raw Markdown