RonanCodes/skills/daily-co

Daily.co

Wire Daily.co managed WebRTC video into a Next.js (App Router) app. Daily runs the SFU, TURN, and recording/transcription infrastructure; you call a REST API to create rooms and mint tokens, then drop an iframe (or custom React UI) into the page. Live transcription is first-class and speaker-attributed.

This is the easiest managed video option with first-class transcription, and a sibling to JaaS (hosted Jitsi). Reach for it when you want managed WebRTC video without standing up your own SFU.

When to use

• You need managed WebRTC video (1:1 or group calls) and do not want to self-host an SFU/TURN stack.
• You need first-class transcription — speaker-attributed live captions and/or saved WebVTT — without bolting on a separate speech pipeline.
• You want the least-friction alternative to self-hosted Jitsi/LiveKit: a REST call to create a room, a token, and an iframe is the whole integration.

Do NOT reach for Daily when EU data residency is a hard requirement and you must control where media is processed (self-host LiveKit instead), or when you specifically want hosted Jitsi (use JaaS / 8x8).

vs JaaS / LiveKit (tradeoff note)

• Daily = easiest managed setup + first-class transcription. REST + iframe. Transcription is Deepgram-backed and built in. Paid plan needed for live transcription.
• LiveKit = self-host (or LiveKit Cloud) when you need EU residency / full control over where media is processed, or deep custom media pipelines. More infra to own.
• JaaS = 8x8-hosted Jitsi. Pick when you specifically want the Jitsi UX/ecosystem on a managed plan.

Env

# .env.local — server-side only, never exposed to the client
DAILY_API_KEY=...        # from the Daily dashboard → Developers

The API key is used only in server code (route handlers). The client never sees it — it receives a short-lived meeting token and the room URL instead.

Install

pnpm add @daily-co/daily-js
# optional, for the custom-UI (hooks) path instead of the iframe:
pnpm add @daily-co/daily-react @daily-co/daily-js jotai

Auth

Every REST call authenticates with a bearer token:

Authorization: Bearer ${DAILY_API_KEY}

REST reference

Create a room — POST https://api.daily.co/v1/rooms

Body properties:

| Property | Notes | |----------|-------| | privacy | "private" so only token-holders can join | | exp | Unix seconds; room auto-expires | | enable_prejoin_ui | hair-check / device-select lobby before join | | enable_chat | in-call text chat | | enable_transcription_storage | saves transcripts as WebVTT (separate from live transcription) |

There is NO room-level enable_transcription. Live transcription is controlled by the token (auto_start_transcription) or at runtime via call.startTranscription(). enable_transcription_storage only governs whether transcripts are saved.

Mint a meeting token — POST https://api.daily.co/v1/meeting-tokens

Body properties:

| Property | Notes | |----------|-------| | room_name | the room this token grants access to | | user_name | display name shown to others (and used for speaker attribution) | | is_owner | owner can start/stop transcription, recording, eject | | exp | Unix seconds; token auto-expires | | eject_at_token_exp | force the participant out when the token expires | | auto_start_transcription | begin transcription automatically on join (owner token) | | enable_live_captions_ui | show the in-call captions toggle |

Returns { token }.

Server route handler (room + token)

Copy-pasteable App Router route. POST /api/daily/room creates a private room (or reuses one you pass) and returns a join URL plus a fresh meeting token.

// app/api/daily/room/route.ts
import { NextResponse } from "next/server";

const DAILY = "https://api.daily.co/v1";

function daily(path: string, body: unknown) {
  return fetch(`${DAILY}${path}`, {
    method: "POST",
    headers: {
      Authorization: `Bearer ${process.env.DAILY_API_KEY}`,
      "Content-Type": "application/json",
    },
    body: JSON.stringify(body),
  });
}

export async function POST(req: Request) {
  const { userName, isOwner = false } = await req.json();

  const oneHour = Math.floor(Date.now() / 1000) + 60 * 60;

  // 1. Create a private room (omit `name` to let Daily generate one).
  const roomRes = await daily("/rooms", {
    properties: {
      privacy: "private",
      exp: oneHour,
      enable_prejoin_ui: true,
      enable_chat: true,
      enable_transcription_storage: true, // save WebVTT; NOT the same as live transcription
    },
  });
  if (!roomRes.ok) {
    return NextResponse.json({ error: await roomRes.text() }, { status: 502 });
  }
  const room = (await roomRes.json()) as { name: string; url: string };

  // 2. Mint a meeting token scoped to that room.
  const tokenRes = await daily("/meeting-tokens", {
    properties: {
      room_name: room.name,
      user_name: userName,
      is_owner: isOwner,
      exp: oneHour,
      eject_at_token_exp: true,
      auto_start_transcription: isOwner, // owner token can auto-start live transcription
      enable_live_captions_ui: true,
    },
  });
  if (!tokenRes.ok) {
    return NextResponse.json({ error: await tokenRes.text() }, { status: 502 });
  }
  const { token } = (await tokenRes.json()) as { token: string };

  return NextResponse.json({ url: room.url, token });
}

React embed (iframe)

A client component. @daily-co/daily-js touches window, so it is dynamically imported inside the effect to avoid Next.js SSR window is not defined errors.

// app/components/VideoCall.tsx
"use client";

import { useEffect, useRef } from "react";
import type { DailyCall } from "@daily-co/daily-js";

export function VideoCall({ url, token }: { url: string; token: string }) {
  const containerRef = useRef<HTMLDivElement>(null);
  const callRef = useRef<DailyCall | null>(null);

  useEffect(() => {
    if (!containerRef.current) return;
    let call: DailyCall | null = null;

    (async () => {
      // Browser-only import — keeps `window` access out of the server bundle.
      const DailyIframe = (await import("@daily-co/daily-js")).default;

      call = DailyIframe.createFrame(containerRef.current!, {
        iframeStyle: {
          width: "100%",
          height: "100%",
          border: "0",
          borderRadius: "12px",
        },
        showLeaveButton: true,
      });
      callRef.current = call;

      await call.join({ url, token });
    })();

    return () => {
      call?.destroy(); // tear down on unmount
      callRef.current = null;
    };
  }, [url, token]);

  return <div ref={containerRef} style={{ width: "100%", height: "70vh" }} />;
}

Custom-UI alternative (@daily-co/daily-react)

For a fully custom layout instead of the iframe, wrap the tree in DailyProvider and use the hooks (useParticipantIds, useDailyEvent, useDaily, useMediaTrack). You render your own video tiles and controls; the provider manages the underlying call object. Same join/token model — only the UI surface differs.

Live transcription

Live transcription is Deepgram-backed and emits events on the call object. Start it from an owner token (auto_start_transcription: true) or at runtime (call.startTranscription(...), owner required).

Events:

• transcription-started — transcription is now running.
• transcription-message — an incremental/final transcript chunk.
• transcription-error — failed to start or dropped.

The transcription-message payload:

{
  action: string;
  participantId: string;      // map to a name via call.participants()
  text: string;
  timestamp: string;
  instanceId?: string;
  trackType?: string;
  rawResponse?: unknown;       // raw Deepgram response when present
}

Transcription handler

// inside the same client component, after `call.join(...)`
type TranscriptLine = { name: string; text: string; timestamp: string };

// Owner-only; or set auto_start_transcription:true on the token to skip this call.
await call.startTranscription({
  language: "en",
  model: "nova-2",
  punctuate: true,
});

call.on("transcription-started", () => {
  console.log("transcription running");
});

call.on("transcription-message", (ev) => {
  // Resolve participantId -> display name from the live participant map.
  const participants = call.participants();
  const match = Object.values(participants).find(
    (p) => p.session_id === ev.participantId,
  );
  const line: TranscriptLine = {
    name: match?.user_name ?? "Unknown",
    text: ev.text,
    timestamp: ev.timestamp,
  };
  // append `line` to your transcript state / store
});

call.on("transcription-error", (ev) => {
  console.error("transcription error", ev);
});

GOTCHA: live transcription is paid-plan only

Live transcription (the Deepgram-backed startTranscription / transcription-message flow) is a paid-plan feature and will not start on a free plan — you will see a transcription-error rather than transcription-started. This is separate from enable_transcription_storage, which is the room flag for saving transcripts as WebVTT. Saved-storage and live-streaming transcription are two different switches; do not assume one enables the other.

Checklist

• DAILY_API_KEY is server-side only (route handlers), never shipped to the client.
• Rooms are privacy: "private" and clients join with a short-lived meeting token, not the API key.
• @daily-co/daily-js is dynamically imported inside the effect (no top-level import in a component that can SSR).
• call.destroy() runs on unmount.
• For live transcription: an owner token, a paid plan, and a transcription-error listener to surface the free-plan failure.
• enable_transcription_storage (save WebVTT) is set independently of live transcription.

Sources

• Create room: https://docs.daily.co/reference/rest-api/rooms/create-room
• Create meeting token: https://docs.daily.co/reference/rest-api/meeting-tokens/create-meeting-token
• Start transcription: https://docs.daily.co/reference/daily-js/instance-methods/start-transcription