Skip to main content
Markdown

Customizing the screens in Next.js

The call screen, the chat and the list of who is online can be made part of the design of your app, or changed down to their code, with your AI coding agent or by hand. Each step goes further than the last: making the screens your own has every detail.

Draw them in your own tree​

The ready-made parts (@wordplus/realtime/react) draw in a shadow root, which your CSS cannot reach. To change more than their colours, take the same screens from @wordplus/realtime-ui, which draw in your tree:

npm install @wordplus/realtime-ui
// app/support/screens.tsx
'use client';

import '@wordplus/realtime-ui/calls.css';
import '@wordplus/realtime-ui/presence.css';
import '@wordplus/realtime-ui/chat.css';
import { useRealtime } from '@wordplus/realtime/react';
import { CallScreen, Chat } from '@wordplus/realtime-ui/react';

export function Screens( { room }: { room: string } ) {
    const rt = useRealtime();
    return <>
        <CallScreen rt={ rt } />
        <Chat rt={ rt } room={ room } />
    </>;
}

Use these or the ready-made parts on a page, not both, so that one call screen rings.

1. The look​

/* app/globals.css */
:root {
    --bm-color-accent: 37, 99, 235;      /* red, green, blue */
    --bm-messenger-font: var(--font-sans);
    --bm-radius-card: 14px;
}

2. A piece of your own​

<CallScreen rt={ rt } components={ {
    RingCard: ( { name, onAnswer, onReject } ) => <IncomingCall name={ name } onAnswer={ onAnswer } onReject={ onReject } />,
    controls: ( buttons, call ) => [ ...buttons, <CallControl key="notes" icon="edit" label="Call notes" onClick={ openNotes } /> ],
} } />

Every piece and its props: a piece of your own.

See every state with your pieces and styles, with no call: keep the pieces in a module of their own (export const pieces: Pieces = { … }, passed as components={ pieces }), then

npm i -D esbuild
npx @wordplus/realtime-ui preview --pieces app/support/pieces.tsx#pieces --css app/globals.css

3. The code itself​

npx @wordplus/realtime-ui add call-screen
import { CallView, RingCard } from '@/components/wordplus/call-screen';

<CallScreen rt={ rt } view={ CallView } components={ { RingCard } } />

The view is yours now: components/wordplus/call-screen/. What runs the call stays in the package. Check a change with its tests (npx vitest run components/wordplus) and every state in the preview (npx @wordplus/realtime-ui preview). When ours changes, npx @wordplus/realtime-ui diff shows what to merge: when ours changes.

With your AI coding agent​

The agent skill of the package teaches it all of this. Ask for what you want, such as "make the call controls round and add a button that opens the order", and it changes the screens at the step that does it, then runs the tests and looks at the preview.