@withdialer/react

The power dialer built for developers. React hooks and components for building agent call UIs.

Install

npm install @withdialer/react

Usage

import { useDialer, CallCard } from "@withdialer/react";

function Agent() {
  const { activeCall, endCall, status } = useDialer({
    authUrl: "/dialer-auth",
  });

  if (!activeCall) {
    return <div>Waiting for a call...</div>;
  }

  return <CallCard call={activeCall} onEnd={endCall} />;
}

Hooks

useDialer(options)

Connects to the Dialer platform via SSE. Returns call state and agent actions.

const {
  status,            // 'connecting' | 'available' | 'on_call' | 'away'
  activeCall,        // Call object or null
  phase,             // 'idle' | 'active' | 'post_call'
  summary,           // AI summary after call ends
  endedCallId,       // ID of just-ended call
  endCall,           // () => void
  submitDisposition, // (disposition, notes?) => void
  setAvailable,      // () => void
  setAway,           // () => void
} = useDialer({ authUrl: "/dialer-auth" });

| Option | Type | Description | |--------|------|-------------| | authUrl | string | Your backend's token endpoint | | token | string | Direct token (testing only) |

Components

All components accept a className prop for styling.

| Component | Props | Description | |-----------|-------|-------------| | CallCard | call, onEnd, children | Active call with contact info, timer, end button | | LiveTranscript | callId | Real-time dual-channel transcript | | DispositionPicker | onSubmit, suggestedDisposition, summaryText | Post-call outcome selector | | AgentStatus | status, onAvailable, onAway | Available/away toggle |

Full example

import {
  useDialer, CallCard, LiveTranscript,
  DispositionPicker, AgentStatus,
} from "@withdialer/react";

function Agent() {
  const {
    activeCall, endCall, status, setAvailable, setAway,
    summary, phase, endedCallId, submitDisposition,
  } = useDialer({ authUrl: "/dialer-auth" });

  return (
    <div>
      <AgentStatus status={status} onAvailable={setAvailable} onAway={setAway} />

      {phase === "post_call" && endedCallId && (
        <DispositionPicker
          onSubmit={(d, notes) => submitDisposition(d, notes)}
          summaryText={summary?.text}
          suggestedDisposition={summary?.suggested_disposition}
        />
      )}

      {activeCall && (
        <CallCard call={activeCall} onEnd={endCall}>
          <LiveTranscript callId={activeCall.id} />
        </CallCard>
      )}

      {!activeCall && status === "available" && (
        <div>Waiting for a call...</div>
      )}
    </div>
  );
}

Backend

Pair with @withdialer/node to mint agent tokens:

npm install @withdialer/node

import { DialerAuth } from "@withdialer/node";

app.use(DialerAuth({
  apiKey: process.env.DIALER_API_KEY,
  getAgentId: (req) => req.user.id,
}));

Links

• Documentation
• Dashboard