Workflow recipes

Build something real

Endpoints in isolation don't tell you how to build a desk. These recipes do: each is a goal, the surface it uses, a build order, and a copy-paste prompt starter for your AI coding agent. Plan before you prompt; build by component; test each chunk.

Recipe 01 · Trading floor

A trader desk with programmable line keys

Goal

A grid of line keys a trader latches to listen and holds to talk, with live presence and per-line sound routing, rendered from a layout the desk controls.

Use

/users/{id}/layout · /conferences · /conferences/{id}/join · /browser/config · /presence/ws · createLegEngine (sdk-core)

Build order

  1. Load the trader's button matrix from /users/{me}/layout.
  2. Render the grid; bind each key to a conference (line).
  3. Spin up the leg engine; tap = latch (join, mic muted), hold = push-to-talk.
  4. Subscribe to line_state + presence for busy-lamp and speaking.
  5. Route each leg's output to its assigned sound profile.
  6. Handle errors honestly: show "connecting" until the SIP leg is established.

Use this with Claude Code, Replit Agent, or Lovable

# prompt starter
Build a React trader desk using @somvad/sdk-react and @somvad/sdk-ui.
Load the button matrix from useLayout(). Render a grid of line tiles.
Use createLegEngine for multi-channel audio: tap a tile to latch (join,
mic muted), hold to push-to-talk. Show a busy lamp and speaking dot per
line from usePresence() and the line_state WS frame. Honest states only.

The agent still needs from you: the tenant's line conferences, a layout for the trader, and a sound-profile assignment per line.

Recipe 02 · Oversight

A supervisor & compliance console

Goal

A desk head sees every live call on their desk, can monitor or barge in, and watches recording and event activity flow to downstream systems.

Use

/desks · /conferences/{id}/members · /conferences/{id}/barge · /conferences/{id}/events · /recordings · /presence/ws

Build order

  1. List the desk's live conferences; subscribe to activity frames.
  2. Render each call with its participant roster from /members.
  3. Add a barge control: the desk head joins any call, even a locked one.
  4. Stream /conferences/{id}/events as a per-call timeline.
  5. Surface recording status and pipe events to your compliance store.

Use this with Claude Code, Replit Agent, or Lovable

# prompt starter
Build a supervisor console for a desk head. List live calls on the desk,
each with its roster from /conferences/{id}/members. Add a Barge button
that POSTs /conferences/{id}/barge and joins with audio. Render the
/conferences/{id}/events timeline per call and a recording-status badge.
Subscribe to the activity WS frame to keep the call list live.

The agent still needs from you: a desk with a designated head, the supervisor's token, and where recording events should be forwarded.

Recipe 03 · Realtime

Live participant & line state

Goal

A panel that always reflects who is online, who is speaking, and which shared lines are in use, without tight polling.

Use

One socket: /presence/ws (frames presence, line_state, activity) + a slow poll of /users and /conferences for the directory.

Build order

  1. Connect the events socket; reconnect with backoff and ?last_seq=.
  2. Maintain a presence map keyed by subject; apply each frame.
  3. Poll the directory every 5–15s. Presence makes it feel live.
  4. Render busy-lamp from line_state; speaking from presence.

Use this with Claude Code, Replit Agent, or Lovable

# prompt starter
Using @somvad/sdk-react, render a directory panel from useDirectory()
with a live PresenceDot per user. Add a shared-lines list whose lamps
update from the line_state WS frame (idle/in_use/held/locked + speaking).
Don't poll faster than 15s. The WebSocket carries the live deltas.

The agent still needs from you: which lines the user is entitled to, so scoped line_state frames reach them.

Recipe 04 · Calling

Ring, accept, and transfer

Goal

A 1:1 call that rings the callee instantly, can be invited to N-way, and supports a clean blind transfer.

Use

POST /calls · accept / decline / cancel · the signal WS frame · useCall() / useIncomingCall()

Build order

  1. Ring with calls.place({ callee_user_id }).
  2. Callee gets an incoming_call signal; accept → join the conference.
  3. Invite more people: place({ conference_id, kind:'invite' }). A 1:1 becomes N-way.
  4. Transfer: kind:'transfer'; on call_accepted, the transferring client leaves.

Use this with Claude Code, Replit Agent, or Lovable

# prompt starter
With @somvad/sdk-react, wire useCall() for outgoing calls and
useIncomingCall() for the full-screen ring + accept. Add an "Add person"
action that invites into the live call (kind:'invite') and a "Transfer"
that uses kind:'transfer' and leaves once call_accepted arrives.

The agent still needs from you: the directory of callable users and the IncomingCallOverlay mounted once at the app root.

More patterns

Route & record · command consoles · promote to production

Recipes for attaching recording metadata, building a command-and-control console, and promoting a workflow from sandbox to production are in the full developer guide.

Open the developer guide