SSR & RSC

Both providers are 'use client' components — they own browser-only state (SSE connection, identify state, query cache). Mount them in your client boundary; render the rest of your tree as RSC.

Next App Router (RSC)

app/providers.tsx

'use client';

import { CStarChatProvider, CStarLibraryProvider } from '@cstar.help/react';
import type { ReactNode } from 'react';

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

app/layout.tsx

import { Providers } from './providers';

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body>
        <Providers>{children}</Providers>
      </body>
    </html>
  );
}

Server Components inside <Providers> stay on the server. Hooks like useArticles only run inside Client Components below them.

Pages Router

pages/_app.tsx

import type { AppProps } from 'next/app';
import { CStarChatProvider, CStarLibraryProvider } from '@cstar.help/react';

export default function App({ Component, pageProps }: AppProps) {
  return (
    <CStarLibraryProvider teamSlug="acme">
      <CStarChatProvider teamSlug="acme">
        <Component {...pageProps} />
      </CStarChatProvider>
    </CStarLibraryProvider>
  );
}

Hydration notes

The hooks mount in a loading: true state and don't fire fetches during SSR — no hydration mismatches.
The first paint shows your loading UI; the data lands after mount. If you need data on the server, fetch it via the JS client in your loader and pass it down.
Public library data (categories, articles) is safe to prerender via your build pipeline if you call the JS client at build time and feed the result through props.

Next.js 16 + Turbopack note

You may see WebSocket connection to 'ws://127.0.0.1:3000/_next/webpack-hmr...' failed in the dev console. That's Next's HMR client, not the cStar SDK. Goes away with next dev --no-turbo or when Turbopack ships its WebSocket fix upstream.

Next up

Providers The provider API itself. useArticles The most common SSR pairing.