Koah-react-native NPM

Prerequisites

Before you begin, make sure you have:

React Native >= 0.60.0
A publisher ID from app.koah.ai

Installation

Expo Apps

npx expo install koah-react-native expo-file-system expo-application expo-device

React Native Apps

yarn add koah-react-native @react-native-async-storage/async-storage react-native-device-info react-native-webview
# or
npm i -s koah-react-native @react-native-async-storage/async-storage react-native-device-info react-native-webview

React Native Web and macOS

If you are using React Native Web or React Native macOS, do not use the expo-file-system package since the Web and macOS targets aren't supported. Instead, use the @react-native-async-storage/async-storage package instead.

Configuration

Provider & Browser Modal

Initialize the SDK by wrapping your parent component with the KoahProvider component and adding the KoahBrowserModal component as a top-level component.

import { KoahProvider, KoahBrowserModal } from "koah-react-native";

export default function App() {
  return (
    <KoahProvider publisherId="YOUR_PUBLISHER_ID">
      <YourApp />

      {/* Top-level component that will render the browser modal when a user clicks on an ad */}
      <KoahBrowserModal />
    </KoahProvider>
  );
}

Render the Ad

To render the ad, surround the component used to display the LLM generated response with the KoahTextAdComponent component. This component will render the ad in the UI and handle the ad click event.

<KoahTextAdComponent
  key={index}
  adFormat="suffix"
  question={messages[index - 1]?.content}
  response={msg.content}
  isResponseReady={!isStreaming && msg.content.length > 0}
  shouldGenerateAd={index !== 0}
  didReceiveAd={ad => { console.log(ad) }}
  styles={{ adContainer: { backgroundColor: "red" }, adText: { color: "white" } }}
>
  <LLMResponseBubble />
</KoahTextAdComponent>

Demo Application

There are 2 demo applications available in this repository: one for Expo and one for React Native applications. Each demo application provides a comprehensive example of how to integrate and use the KOAH React Native SDK in different environments.

For more details on how to set up and run these demo applications, please refer to their respective README files:

Getting a Publisher ID

To use the Koah LLM Ad Network SDK, you'll need a publisher ID. Visit app.koah.ai to create an account and obtain your publisher ID.

Workflow

Your development workflow will most likely be a 2 step process.

Make changes to the SDK in src
See changes in the demo app

To make sure the demo app is aware of the changes you made to the SDK, follow these steps:

Start npm run dev-watch in the root of the repository.
- This watches for changes to the SDK and automatically push them to the demo app using yalc.
Make changes to the SDK
- As you mutate and save the files in src, yalc will automatically push the changes to the demo app, causing it to reload.
See the changes in the demo application.
Repeat