UI Integration

You write a plugin's UI in React and access data, notifications, and navigation through the useNiyase() bridge. One plugin = one side-menu entry (what it shows changes by role).

The full useNiyase() surface

Namespace	Use
niyase.data	CRUD on your own plugin's plg_* tables (Data Model)
niyase.core	Read core data (employees, departments, spaces — Core API)
niyase.context	{ spaceId, role, audience, activeIndustry, locale, theme, ... } (reactive)
niyase.i18n	Per-industry term rewording (resolveTerm)
niyase.navigate	Tab / route navigation within your own plugin
niyase.toast	success / error / info notifications
niyase.palette	Register / trigger intents in the unified palette

const niyase = useNiyase();

// Subscribe to reactive context (follows theme / industry / language switches)
useEffect(() => niyase.context.subscribe((ctx) => setTheme(ctx.theme)), []);

// Reword by industry (e.g., default "案件", "工事" with the construction preset)
const itemLabel = niyase.i18n.resolveTerm("itemSingular", "案件");

niyase.toast.success("保存しました");
niyase.navigate.toTab("settings");

audience roles

Declare per-role display in manifest.audiences[].

role	Intended user	Display
executive	Executives, managers	All management + execution tabs
employee	Employees	Execution tabs only
customer	Business partners	The screen handed to customers in the PROVIDER-CLIENT pattern

audience is derived from the current role and can be read via niyase.context.audience.

UI components

Import niyase's UI components from @niyase/plugin-sdk/ui (the host supplies the real ones).

import {
  Button,
  Input,
  Tabs,
  TabsList,
  TabsTrigger,
  TabsContent,
} from "@niyase/plugin-sdk/ui";

You can also write with plain HTML + Tailwind-like classes. To follow niyase.context.theme (light/dark), it is safer to handle colors with semantic tokens.

The same bundle on three apps

The single bundle you build runs on cloud (Web), desktop (Electron), and mobile (Expo). The SDK absorbs the differences in transport (iframe / WebView + postMessage), so the plugin-side code is shared.

Check the look locally

niyase-plugin dev

It renders for real inside the generic shell, and you can check it while switching role, industry, theme, and language in the DevBar (see Setup).