Spell Tome of the React SDK

'use client';
import { CStarChatProvider, CStarLibraryProvider } from '@cstar.help/react';

export function Providers({ children }) {
  return (
    <CStarLibraryProvider teamSlug="acme">
      <CStarChatProvider teamSlug="acme">
        {children}
      </CStarChatProvider>
    </CStarLibraryProvider>
  );
}

Both providers are 'use client'. Mount at your client boundary.

const { categories } = useCategories();
const { articles, refetch } = useArticles({ categorySlug: 'billing' });
const { article } = useArticle(slug);
const { results, totalCount } = useArticleSearch(query);

Public, no auth. Safe everywhere in the tree.

const { isIdentified, customer, identify, logout } = useChat();

const { tickets, create } = useTickets({ status: 'open' });

const { messages, send } = useMessages(ticketId);
const { agents } = useTyping(ticketId);

// Server: sign the customer payload with your chat-secret
import { createHmac } from 'node:crypto';
const sig = createHmac('sha256', secret).update(JSON.stringify(customer)).digest('hex');

// Client
const { identify } = useChat();
await identify(customer, sig);

• Always wrap in providers. The hooks throw if no context is found.
• Hooks fetch in the browser. Loading state during SSR; data after mount.
• useMessages auto-subscribes to realtime on mount; tear-down on unmount is automatic.
• RSC: mount providers in a 'use client' boundary, not inside a Server Component.
• Turbopack HMR warnings in Next 16 dev console are upstream — not the SDK.

• data / tickets / articles — array, empty until fetched.
• isLoading — boolean. True during initial fetch + refetches.
• error — Error | null.
• refetch() — Promise. Bypass auto-refresh cadence.
• create() / send() — Promise. Auto-refetches on success.