@lakimi/react-widget-assistant

React + TypeScript version of the Lakimi Assistant Widget.

Installation

npm install @lakimi/react-widget-assistant
# or
pnpm add @lakimi/react-widget-assistant

Usage

As a Widget (with bubble)

import { LakimiAssistantWidget } from "@lakimi/react-widget-assistant";

function App() {
  return (
    <LakimiAssistantWidget
      assistantId="your-assistant-id"
      apiEndpoint="https://api.lakimi.io"
      language="es"
      theme="light"
      onLoad={(data) => console.log("Assistant loaded:", data)}
    />
  );
}

As a Direct Assistant Component

import { LakimiAssistant } from "@lakimi/react-widget-assistant";

function App() {
  return (
    <LakimiAssistant
      assistantId="your-assistant-id"
      apiEndpoint="https://api.lakimi.io"
      language="es"
      theme="light"
      onLoad={(data) => console.log("Assistant loaded:", data)}
    />
  );
}

Props

LakimiAssistantWidget / LakimiAssistant

• assistantId (required): Assistant ID
• apiEndpoint: API endpoint URL (default: "https://api.lakimi.io")
• language: Language code (default: "es")
• environment: Environment ("prod" | "dev", default: "prod")
• authMethod: Authentication method ("integrated" | "managed", default: "integrated")
• clientId: Client ID for authentication
• theme: Theme ("light" | "dark")
• onLoad: Callback when assistant loads
• onAction: Callback for custom actions

Component Managers

ComponentManager

Register custom components to render in chat:

import { componentManager } from "@lakimi/react-widget-assistant";

componentManager.registerComponent({
  name: "my-component",
  description: "My custom component",
  schema: {
    type: "object",
    properties: {
      title: { type: "string" },
      value: { type: "number" },
    },
  },
  component: YourReactComponent,
});

ClientToolsManager

Register client-side tools that the assistant can call:

import { clientToolsManager } from "@lakimi/react-widget-assistant";

clientToolsManager.registerTool(
  "get-location",
  {
    description: "Get user location",
    parameters: {
      type: "object",
      properties: {},
      required: [],
    },
  },
  async (args, toolCallId) => {
    return new Promise((resolve) => {
      navigator.geolocation.getCurrentPosition(
        (position) =>
          resolve({
            lat: position.coords.latitude,
            lng: position.coords.longitude,
          }),
        (error) => resolve({ error: error.message })
      );
    });
  }
);

Development

# Install dependencies
pnpm install

# Start dev server
pnpm dev

# Build library
pnpm build

License

MIT