How to embed Glim in React and Next.js

Glim is a browser-first library with a tiny API. In React and Next.js you mount it inside a layout effect, drive states from your data layer, and destroy on unmount.

Install

npm i @axaylabs/glim

Or load https://getglim.dev/glim.js and use window.Glim.

React client component

'use client';
import { useEffect, useRef } from 'react';
import { Glim } from '@axaylabs/glim';

export function Companion({ state = 'idle' }) {
  const ref = useRef(null);
  const pRef = useRef(null);

  useEffect(() => {
    pRef.current = Glim.mount(ref.current, 'wisp', { size: 140 });
    return () => pRef.current?.destroy();
  }, []);

  useEffect(() => {
    pRef.current?.setState(state);
  }, [state]);

  return <div ref={ref} aria-hidden="true" />;
}

Next.js notes

• Mark the companion file 'use client' — it needs DOM + RAF.
• Do not import Glim into a Server Component.
• For App Router, keep the companion in the chat shell, not in every RSC page payload.

Wire to a fetch / stream

setMind('thinking');
const res = await fetch('/api/chat', { method: 'POST', body });
setMind('talking');
// ... read stream ...
setMind('idle');

Try the offline path

Download the starter from getglim.dev if you want a zero-bundler proof before touching React.