@baguette-studios/kernl-ui

React assistant UI components for Kernl, including the bubble launcher, dock, command bar, approvals, activity timeline, and devtools.

npm install @baguette-studios/kernl-react @baguette-studios/kernl-ui

Import the component styles once in the application entry point:

import { AgentBubbleLauncher } from "@baguette-studios/kernl-ui";
import "@baguette-studios/kernl-ui/styles.css";

<AgentBubbleLauncher title="Assistant" />;

Vite and other browser-aware bundlers retain the package's automatic style loading, while Node ESM and SSR tooling receive a CSS-free JavaScript entry point. Keep the explicit styles.css import shown above as the stable styling contract; bundlers deduplicate the repeated CSS module.

Components read runtime state from the nearest AgentProvider supplied by @baguette-studios/kernl-react. React 18 and 19 are supported.

To make the collapsed launcher movable, configure the provider with ui={{ launcherDraggable: true }}. A drag stays within the viewport and snaps to its nearest edge; regular clicks continue to open the agent.

Optional shared preferences

AgentBubbleLauncher, AgentDock, and useAgentPanelPreferences accept an optional AgentUiPreferencesStore. With no store, behavior remains synchronous and origin-local. An asynchronous store initially renders the local/default value and updates when the store connects.

The Chromium extension integration is an explicit, browser-only import:

import { AgentBubbleLauncher } from "@baguette-studios/kernl-ui";
import { createExtensionAgentUiPreferencesStore } from "@baguette-studios/kernl-ui/preferences-extension";

const preferencesStore = createExtensionAgentUiPreferencesStore();
<AgentBubbleLauncher preferencesStore={preferencesStore} />;

Calling the factory is the host application's opt-in. The extension separately requires the user to approve that exact origin. A missing, denied, outdated, or timed-out extension transparently uses origin-local storage.

Precedence is: application-enforced component/provider props, extension-managed user preferences, origin-local user preferences, then Kernl defaults. Host placement and other product decisions remain component props and are never written to the shared preference document. To lock one of the three user-owned fields, wrap the store with createEnforcedAgentUiPreferencesStore from @baguette-studios/kernl-ui-core/preferences and omit or disable the corresponding host settings control. The wrapper does not write host policy into the extension profile.

Opt-in universal renderer

Applications standardizing on the Web Component renderer can import KernlAgentWebComponent from @baguette-studios/kernl-ui/web-component. The host must separately import @kernl/web/kernl-agent once; this wrapper has no runtime dependency on @kernl/web. It assigns the shared AgentUiController as an element property and bridges ready, open, screen, and error events.

Provider-owned presentation is an explicit render-port boundary: pass renderers callbacks that close over the provider context and return cleanup functions for any React roots they mount. Provider children are not implicitly teleported into the Web Component shadow root.