Ship a web client

Web clients share @briefs/web-shared for UI and theme. Each client is a Next.js app in client/web/ that calls the same System API.

Workspace setup

Add the client to root package.json workspaces:

package.json

"workspaces": [
  "shared",
  "system",
  "client/web/shared",
  "client/web/docs",
  "client/web/daily",
  "client/web/example"
]

Client package.json

client/web/example/package.json

{
  "name": "@briefs/example",
  "dependencies": {
    "@briefs/shared": "*",
    "@briefs/web-shared": "*",
    "next": "16.3.0",
    "react": "19.2.8",
    "react-dom": "19.2.8"
  }
}

Next.js config

next.config.ts

import type { NextConfig } from "next";

const nextConfig: NextConfig = {
  transpilePackages: ["@briefs/shared", "@briefs/web-shared"],
};

export default nextConfig;

Theme

Import the shared theme from your client's globals.css:

globals.css

@import "tailwindcss";
@source "../../../shared/src/**/*.{js,ts,jsx,tsx}";
@import "../../../shared/src/styles/theme.css";

Use AppShell, SkyBackground, and UI primitives from the package:

page.tsx

import { AppShell, Button, SkyBackground, cn } from "@briefs/web-shared";

API client

Each client owns its API client module (see client/web/daily/src/lib/briefs-api.ts). Server components and server actions call the REST API with X-Briefs-User-Id — avoid browser-side fetches unless you add CORS to the API.

Reference apps

@briefs/daily is the reference client and @briefs/docs (this site) documents the platform. New clients should follow the same pattern: shared UI, an owned API client, and client-specific pages.