UI Components (React)

A set of React components for seamlessly integrating Lateral content into your application.

Installation

npm install @lateral-ai/ui-react @lateral-ai/telemetry

Initialization

Before using the UI components, you need to initialize both the Telemetry and UI libraries:

import { initTelemetry } from "@lateral-ai/telemetry";
import LateralUI from "@lateral-ai/ui-react";

// Initialize telemetry
const client = initTelemetry({
  apiKey: LATERAL_API_KEY,
  userId: user.id,
  mode: LATERAL_MODE,
});

// Initialize UI
LateralUI.init(client);

This initialization sets up the Lateral telemetry client and prepares the UI components for use.

Usage

Once initialized, you can use the components in your React application:

import LateralUI from "@lateral-ai/ui-react";

// ... in your component
return (
  <LateralUI.Frame lateralLocationId="componentIdConfiguredInLateral">
    <div>
      <h1 data-lateral-field-id="idConfiguredInLateral">My content</h1>
      <p data-lateral-field-id="idConfiguredInLateral">
        Default text if backend is not reachable
      </p>
    </div>
  </LateralUI.Frame>
);

The LateralUI.Frame component allows you to easily integrate the content you've created in Lateral into your application.

Related

• @lateral-ai/telemetry: Telemetry package for Lateral, required for UI initialization.

Support

For any issues or questions, please contact support or open an issue in this repository.