@stigmer/react
v0.0.77
Published
React provider and client hook for the Stigmer platform SDK
Maintainers
whysosureshReadme
@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/protosPeer 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.ai",
getAccessToken: () => auth.getToken(),
});
function App() {
return (
<StigmerProvider client={client} preset="corporate">
<YourApp />
</StigmerProvider>
);
}Three things are required:
- A
Stigmerclient — see@stigmer/sdkfor configuration options. <StigmerProvider>— distributes the client to all descendant components and scopes styles.@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.stgmcontainer. - Container scoping.
StigmerProviderrenders a<div class="stgm">wrapper. The CSS reset (box-sizing,border-style, font smoothing) is scoped to.stgmand 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