Providers

Mount <CStarChatProvider> for authenticated chat, <CStarLibraryProvider> for the public knowledge base. Use one, the other, or both — they don't share state.

CStarLibraryProvider

Public, no auth. Renders fine during SSR; the hooks fetch in the browser. Mount once, near the root.

app/providers.tsx

import { CStarLibraryProvider } from '@cstar.help/react';

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

CStarChatProvider

Authenticated chat. Real-time SSE on by default with a polling fallback — no extra config needed. Identify the customer with HMAC for known users, or skip it for anonymous flows.

app/providers.tsx

import { CStarChatProvider } from '@cstar.help/react';

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

Both at once

Stack them. Order doesn't matter; the hooks find the right context by class identity, not by nesting position.

app/providers.tsx

<CStarLibraryProvider teamSlug="acme">
  <CStarChatProvider teamSlug="acme">
    {children}
  </CStarChatProvider>
</CStarLibraryProvider>

RSC + Pages Router

Both providers are 'use client' components. Mount them in your client boundary (usually a top-level providers.tsx imported by the root layout). See the SSR & RSC recipe for the full setup.

Next up

useChat Identify, send messages, drive a chat UI. useArticles Public knowledge-base lists. SSR & RSC Next App Router, Pages Router, RSC boundaries.