​

Landing shells: SDK demo vs conversation operators

​

Why two shells, two audiences

​

The SDK demo surface

• Proof before embed — run one call in the dashboard before you ship the softphone in your own app, so the failure you are debugging is your code, not the chain.
• Support reproduction — when a customer report says “calls fail,” this page is the fastest same-account repro an engineer can run without touching the dialer UI.

​

TypeScript + React wiring — bootstrap example only

import { SoftphoneProvider, useSoftphone } from "@/lib/softphone/softphone-context";

// Mount the provider once at the app layout level — it owns the
// LiveKit room, the persistent remote-audio element, and DTMF wiring.
export function AppShell({ children }: { children: React.ReactNode }) {
  return <SoftphoneProvider>{children}</SoftphoneProvider>;
}

// In a component, dial through the context:
export function CallButton({ to }: { to: string }) {
  const { dial, hangUp, state } = useSoftphone();
  return (
    <button onClick={() => (state === "idle" ? dial(to) : hangUp())}>
      {state === "idle" ? "Call" : "Hang up"}
    </button>
  );
}

​

Access and gating: who can open it, and why the hub won’t feature it

​

Where to go from here

• Developer console map — the full tile inventory this page is a footnote to
• Test your browser calling setup with the SDK demo — the end-to-end walk of /developer/sdk-demo
• SDK catalogue guide — the install and type surface the demo deliberately skips
• Run the conversation-intelligence operator console — the operator lifecycle the Inbox settings shell exposes