Next.js

LIVQENO_API_KEY=rvk_dev_...
LIVQENO_API_URL=https://api.livqeno.com

app/
├── api/
│   ├── join-room/
│   │   └── route.ts      ← mints the call grant (server)
│   └── chat-token/
│       └── route.ts      ← mints the chat token (server)
└── call/
    ├── page.tsx          ← Server Component
    └── call-client.tsx   ← 'use client': <LivqenoRoom> and hooks
lib/
└── livqeno.ts             ← the one shared Livqeno instance (server)

import { livqeno } from '@/lib/livqeno';
import { getCurrentUser } from '@/lib/auth';
 
export async function POST() {
  const user = await getCurrentUser();
  if (!user) return new Response('Unauthorized', { status: 401 });
 
  await livqeno.chat.createConversation({ name: 'general', getOrCreate: true });
  await livqeno.chat.addMember('general', { userId: user.id });
 
  const chatGrant = await livqeno.chat.createToken({
    userId: user.id,
    conversations: ['general'],
  });
 
  return Response.json(chatGrant);
}

'use client';
 
import { useEffect } from 'react';
import { createChatClient } from '@livqeno/chat';
 
export function ChatClient() {
  useEffect(() => {
    let chat: ReturnType<typeof createChatClient> | undefined;
 
    fetch('/api/chat-token', { method: 'POST' })
      .then((res) => res.json())
      .then(async (grant) => {
        chat = createChatClient({ token: grant.token, apiUrl: grant.apiUrl });
        await chat.connect({ room: 'general' });
        chat.on('message', (m) => console.log(`${m.senderId}: ${m.text}`));
      });
 
    return () => chat?.disconnect();
  }, []);
 
  return null;
}

import { createLivqeno } from '@livqeno/live';
 
const livqeno = createLivqeno({
  token: rtc.token,
  endpoint: rtc.endpoint,
  iceServers: rtc.iceServers,
  chatToken: chat.token,
  chatApiUrl: chat.apiUrl,
});
 
const room = await livqeno.join(rtc.roomName);
await room.enableCamera();
await livqeno.chat!.connect({ room: 'general' });
 
// leave() ends the call but keeps chat; dispose() closes both.
await livqeno.leave();
await livqeno.dispose();

import { livqeno } from '@/lib/livqeno';
import { getCurrentUser } from '@/lib/auth';
 
export async function POST() {
  const user = await getCurrentUser();
  if (!user) return new Response('Unauthorized', { status: 401 });
 
  const stream = await livqeno.liveStreams.create({
    title: 'Friday Q&A',
    hostIdentity: user.id,
    visibility: 'PUBLIC',
  });
  await livqeno.liveStreams.start(stream.id); // CREATED → LIVE
 
  return Response.json(stream);
}

import { livqeno } from '@/lib/livqeno';
import { getCurrentUser } from '@/lib/auth';
 
export async function POST(request: Request, { params }: { params: { streamId: string } }) {
  const user = await getCurrentUser();
  if (!user) return new Response('Unauthorized', { status: 401 });
 
  const credentials = userIsHost(user, params.streamId) // your own check
    ? await livqeno.liveStreams.addHost(params.streamId, { identity: user.id })
    : await livqeno.liveStreams.createViewerToken(params.streamId, user.id);
 
  return Response.json(credentials); // { streamId, identity, role, rtc, chat, chatRootMessageId }
}

'use client';
 
import { useEffect, useState } from 'react';
import {
  LivqenoLiveStream,
  ParticipantView,
  useLiveStreamRole,
  useCamera,
  useLocalParticipant,
  useRemoteParticipants,
  type LiveStreamCredentials,
} from '@livqeno/react';
 
export function StreamClient({ streamId }: { streamId: string }) {
  const [credentials, setCredentials] = useState<LiveStreamCredentials>();
 
  useEffect(() => {
    fetch(`/api/streams/${streamId}/join`, { method: 'POST' })
      .then((res) => res.json())
      .then(setCredentials);
  }, [streamId]);
 
  if (!credentials) return <p>Getting a token…</p>;
 
  return (
    <LivqenoLiveStream credentials={credentials} fallback={<p>Connecting…</p>}>
      <Stage />
    </LivqenoLiveStream>
  );
}
 
function Stage() {
  const { isHost } = useLiveStreamRole();
  const camera = useCamera();
  const local = useLocalParticipant();
  const remote = useRemoteParticipants();
 
  return (
    <div>
      {isHost && (
        <button onClick={() => (camera.enabled ? camera.disable() : camera.enable())}>
          Camera: {camera.enabled ? 'on' : 'off'}
        </button>
      )}
      {local && <ParticipantView participant={local} />}
      {remote.map((p) => (
        <ParticipantView key={p.identity} participant={p} />
      ))}
    </div>
  );
}

'use client';
 
import { useEffect } from 'react';
import { createRTCClient, isBrowserSupported } from '@livqeno/rtc';
 
export function CallClient() {
  useEffect(() => {
    if (!isBrowserSupported()) return; // show a "use a newer browser" message instead
 
    let client: ReturnType<typeof createRTCClient> | undefined;
    fetch('/api/join-room', { method: 'POST' })
      .then((res) => res.json())
      .then(async (grant) => {
        client = createRTCClient({
          token: grant.token,
          endpoint: grant.endpoint,
          iceServers: grant.iceServers,
        });
        const room = await client.join(grant.roomName);
        await room.enableCamera();
        await room.enableMicrophone();
      });
 
    return () => void client?.leave();
  }, []);
 
  return null;
}