JarvisProvider

The root provider of a JARVIS app. It starts the audio engine for UI sounds, provides toasts and exposes app-level controls through useJarvis(). Wrap your app in it once.

import { JarvisProvider } from 'jarvis-react-ui';

Setup

import 'jarvis-react-ui/style.css';
import { createRoot } from 'react-dom/client';
import { JarvisProvider } from 'jarvis-react-ui';
import { App } from './App';

createRoot(document.getElementById('root') as HTMLElement).render(
    <JarvisProvider>
        <App />
    </JarvisProvider>,
);

Everything below it can use useToast, useJarvis() and the sound hooks, and all interactive components play their sounds.

import { Button, Panel, useJarvis, useToast } from 'jarvis-react-ui';

export default function Everything() {
    const { isMuted } = useJarvis();
    const { toast } = useToast();

    return (
        <Panel title="SYSTEM" className="w-[280px]">
            <div className="flex flex-col items-start gap-3">
                <span className="text-[11px] text-text-secondary">
                    Sound {isMuted ? 'off' : 'on'} · toasts ready
                </span>
                <Button
                    variant="primary"
                    onClick={() =>
                        toast({ variant: 'success', title: 'Diagnostics passed', duration: 3000 })
                    }
                >
                    Run diagnostics
                </Button>
            </div>
        </Panel>
    );
}

Sound

Sound is on by default. Browsers only start audio after the first click or key press.

• sfx={false} starts muted. Users can still switch sound on, e.g. with a toggle bound to useJarvis().
• useJarvis() returns { isMuted, toggleMute }. The user's choice is stored in localStorage and wins over the sfx prop on the next visit.
• soundBaseUrl points the engine at your copy of the sound files or a CDN, see Sound effects.

import { Button, Pill, Switch, useJarvis } from 'jarvis-react-ui';

export default function MuteToggle() {
    const { isMuted, toggleMute } = useJarvis();

    return (
        <>
            <Switch label="UI sound" checked={!isMuted} onCheckedChange={toggleMute} />
            <Pill variant={isMuted ? 'default' : 'info'}>{isMuted ? 'muted' : 'live'}</Pill>
            <Button>Hover and click me</Button>
        </>
    );
}

<JarvisProvider sfx={false} soundBaseUrl="/assets/sounds/">
    <App />
</JarvisProvider>

Assistant state

orbState, connected and heartbeat feed the audio engine's state sounds (ambient loop, scan while listening, offline alerts). Pass your assistant's current state to keep the soundscape in sync with the orb.

Toasts

toastPlacement, toastMax and toastDuration configure the built-in ToastProvider.

Without JarvisProvider

The building blocks stay available on their own: SfxProvider with useAudioEngine for sound and ToastProvider for toasts.

API