@baguette-studios/kernl-react-native-ui

Native, composable React Native UI for Kernl. It renders the semantic product state from @baguette-studios/kernl-ui-core and consumes the headless hooks in @baguette-studios/kernl-react-native. It does not import the DOM UI package, CSS, browser storage, a WebView, or a navigation library.

npm install @baguette-studios/kernl-core \
  @baguette-studios/kernl-react-native \
  @baguette-studios/kernl-react-native-ui \
  react-native-safe-area-context \
  react-native-svg

react-native-safe-area-context is a peer dependency so the host owns its single native installation. react-native-svg renders the same portable Kernl icon definitions used by the web UI packages. Expo projects should install the SDK-compatible versions of both native peers with npx expo install.

import {
  AgentProvider,
  AgentBoundary,
} from "@baguette-studios/kernl-react-native";
import {
  AgentLauncher,
  AgentNativeThemeRoot,
  AgentNativeUiProvider,
} from "@baguette-studios/kernl-react-native-ui";
import { SafeAreaProvider } from "react-native-safe-area-context";

export function App() {
  return (
    <SafeAreaProvider>
      <AgentProvider adapter={adapter} user={{ id: "user-1" }}>
        <AgentBoundary id="invoice" title="Invoice" type="page" tools={tools}>
          <AgentNativeThemeRoot colorScheme="system" theme="comfortable">
            <AgentNativeUiProvider title="Invoice assistant">
              <YourInvoiceScreen />
              <AgentLauncher />
            </AgentNativeUiProvider>
          </AgentNativeThemeRoot>
        </AgentBoundary>
      </AgentProvider>
    </SafeAreaProvider>
  );
}

The stock launcher is optional. A host can own its mascot and open state:

<AgentLauncher
  open={open}
  onOpenChange={setOpen}
  showDefaultTrigger={false}
  renderTrigger={({ toggle }) => <MascotButton onPress={toggle} />}
/>

The stock trigger follows the same launcher contract as the browser UI packages. Use launcherLabel and launcherIcon to customize its shared label and icon without replacing the component.

AgentNativeUiProvider uses the shared createAgentUiController internally for optimistic sends, queue/steer selection, exact-once approval and form commands, conversation history, and screen transitions. useAgentNativeUi exposes a narrow native state and command interface; the broad controller command union is intentionally not re-exported.

When both queue and steer are enabled through the headless provider's submitWhileRunning option, AgentComposer renders their selector as part of the Send control. Configuring only one mode keeps the Send button unsplit and uses that mode automatically for in-flight submissions.

Theme

createAgentNativeTheme accepts the shared AgentThemeInput preset and object shapes, resolves the canonical kernl-ui-core variables to concrete native colors and numbers, and preserves the shared density, typography, radius, message, quick-action, composer, status, and risk language. The theme root supports system dark mode and reduced motion. Ruled and grid conversation presets are drawn with native views; soft gradients use a lightweight native accent wash. Every stock interactive control has a minimum 44-point target.

Components

• AgentLauncher, AgentConversationScreen, AgentComposer, AgentMessageList
• AgentHistoryScreen, AgentSettingsScreen, AgentPromptSuggestions
• AgentActionReview, AgentFormRequestCard, AgentStatusPill
• AgentErrorState, AgentLoadingState, AgentEmptyState
• AgentIcon, plus AgentBubbleLauncher and AgentThemeRoot compatibility names matching the other Kernl UI packages

All components may be composed independently under AgentNativeUiProvider. Applications may also skip this package entirely and build a custom interface from the headless native hooks.

Native deviations

• Message content is rendered as selectable native text. Use renderMessage for a custom structured renderer; HTML/GFM is never rendered in a WebView.
• Browser focus targets, hover, draggable launchers, CSS backgrounds, and global browser shortcuts do not apply. Router navigation and hardware keyboard commands remain host-owned.
• Select and multiselect form controls render as accessible native option lists to avoid imposing a picker library.
• Settings expose backdrop-dismiss behavior and clearly label browser-style shortcuts as host-managed.