JSPM

  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 61
  • Score
    100M100P100Q96616F
  • License Apache-2.0

React provider and client hook for the Stigmer platform SDK

Package Exports

  • @stigmer/react
  • @stigmer/react/styles.css

Readme

@stigmer/react

React provider and client hook for the Stigmer platform SDK. Provides the foundational wiring for connecting React applications to a Stigmer backend — style-isolated and theme-aware.

Feature components (agent picker, execution stream, session history, etc.) have been removed as part of the session-first UX redesign and will be rebuilt with a platform-for-platforms architecture.

Install

npm install @stigmer/react @stigmer/sdk @stigmer/protos

Peer dependencies (install alongside):

Package Version
react ^19.0.0
react-dom ^19.0.0
@stigmer/sdk *
@stigmer/protos *
@bufbuild/protobuf ^2.0.0

Quick Start

import { Stigmer } from "@stigmer/sdk";
import { StigmerProvider } from "@stigmer/react";
import "@stigmer/react/styles.css";

const client = new Stigmer({
  baseUrl: "https://api.stigmer.io",
  getAccessToken: () => auth.getToken(),
});

function App() {
  return (
    <StigmerProvider client={client} preset="corporate">
      <YourApp />
    </StigmerProvider>
  );
}

Three things are required:

  1. A Stigmer client — see @stigmer/sdk for configuration options.
  2. <StigmerProvider> — distributes the client to all descendant components and scopes styles.
  3. @stigmer/react/styles.css — the compiled stylesheet. Import once at your application root.

Provider

StigmerProvider wraps your component tree, supplies the SDK client via React context, and renders a <div class="stgm"> container that scopes all Stigmer styles.

Props

Prop Type Required Description
client Stigmer Yes A configured @stigmer/sdk client instance.
preset ThemePresetId No Built-in theme preset to apply. Omit for the default Stigmer palette.
className string No Additional CSS classes on the scoping container.

useStigmer() Hook

Access the client from any descendant component:

import { useStigmer } from "@stigmer/react";

function MyComponent() {
  const stigmer = useStigmer();
  // stigmer.agent.get(id), stigmer.session.list(...), etc.
}

Throws if called outside a <StigmerProvider>.

Theming

Built-in Presets

Pass a preset prop to apply a complete design language — colors, border radius, shadows, transitions, and sidebar appearance for both light and dark modes.

<StigmerProvider client={client} preset="fintech">
  {children}
</StigmerProvider>
Preset Archetype Description
"default" Stigmer identity Teal palette, balanced radius (omit the prop for this)
"corporate" Enterprise SaaS Tight radius, blue accent, cool grays, dark sidebar
"startup" Dev tools Monochrome, violet accent, minimal shadows, snappy transitions
"friendly" Consumer SaaS Very rounded, warm coral, cream surfaces, soft shadows
"fintech" Premium financial Sharp corners, indigo accent, crisp shadows, precise transitions

Each preset overrides the full token surface. See @stigmer/theme README for the complete token reference and preset details.

Custom Token Overrides

Override any --stgm-* CSS custom property to match your product's design language. Only override what you need — everything else falls through to defaults (or the active preset).

.my-brand {
  --stgm-primary: oklch(0.6 0.2 220);
  --stgm-primary-foreground: oklch(0.985 0 0);
  --stgm-radius: 0.5rem;
  --stgm-shadow-md: 0 4px 12px rgb(0 0 0 / 0.08);
  --stgm-transition-duration: 120ms;
}

.my-brand.dark,
.dark .my-brand {
  --stgm-primary: oklch(0.75 0.18 220);
  --stgm-primary-foreground: oklch(0.145 0 0);
  --stgm-shadow-md: 0 4px 12px rgb(0 0 0 / 0.3);
}

Apply the class via className:

<StigmerProvider client={client} className="my-brand">
  {children}
</StigmerProvider>

You can combine preset and className. The className overrides cascade on top of the preset.

Dark Mode

Stigmer components respond to the .dark class on <html> (or any ancestor). The provider uses a descendant selector (&:is(.dark *)) so dark mode works regardless of where the provider is mounted in the DOM.

<!-- Host application controls dark mode -->
<html class="dark">
  <body>
    <!-- StigmerProvider inherits dark mode automatically -->
  </body>
</html>

No additional configuration is needed. If your host application toggles .dark on document.documentElement, Stigmer components follow automatically.

Style Isolation

@stigmer/react is designed to embed inside any host application without style conflicts.

  • CSS layer scoping. All Stigmer styles live inside @layer stgm. Host styles in higher-priority layers (or no layer) take precedence over Tailwind's base resets — Stigmer's reset only applies inside the .stgm container.
  • Container scoping. StigmerProvider renders a <div class="stgm"> wrapper. The CSS reset (box-sizing, border-style, font smoothing) is scoped to .stgm and its descendants. Host elements outside this container are unaffected.
  • Token namespacing. All design tokens use the --stgm-* prefix. No collision with host application CSS variables.

This means you can mount <StigmerProvider> inside a sidebar, modal, or any section of your page and Stigmer's styles stay contained.

Exports

Import path Content
@stigmer/react StigmerProvider, StigmerContext, useStigmer
@stigmer/react/styles.css Compiled stylesheet (import once at app root)

License

Apache-2.0