@baguette-studios/kernl-react

React 18 and 19 bindings for embedding Kernl agents in an existing application.

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

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

export function App() {
  return (
    <AgentProvider
      client={{
        projectId: "your-project",
        clientKey: "kernlpk_...",
        url: "https://your-kernl-endpoint.example"
      }}
      user={{ id: "current-user-id" }}
      session={{ id: "current-session-id" }}
      ui={{ launcherDraggable: true }}
    >
      <YourApplication />
      <AgentBubbleLauncher />
    </AgentProvider>
  );
}

Register context, tools, prompts, instructions, and navigation near the UI that owns those capabilities. Application tools continue to use the application's authenticated APIs and backend authorization.

Set ui.launcherDraggable to true to let users drag the collapsed launcher around the viewport. When released, it snaps to the closest edge. The option defaults to false.

See the repository quickstart for a complete example.