@aichatbot-saas/react-native

A native React Native chat UI kit for the AIChatbot SaaS. Drop in one component, give it your API key, and get a fully native chat screen — message list, input bar, suggestion chips, and thumbs up/down feedback — themed automatically from your backend config.

No external UI libraries. Pure React Native primitives. Strict TypeScript.

Install

npm install @aichatbot-saas/react-native
# or
yarn add @aichatbot-saas/react-native

For conversation persistence across app restarts, also install AsyncStorage (optional — the SDK degrades gracefully without it):

npm install @react-native-async-storage/async-storage

react and react-native are peer dependencies and should already be in your app.

Usage

import React from 'react';
import { SafeAreaView } from 'react-native';
import { AIChatbot } from '@aichatbot-saas/react-native';

export default function Support() {
  return (
    <SafeAreaView style={{ flex: 1 }}>
      <AIChatbot apiKey="pk_live_xxx" apiUrl="https://api.you.com" />
    </SafeAreaView>
  );
}

Only apiKey is required. The bot name, greeting, colors, languages, and suggestions all come from your backend config — the same one that powers the web widget.

Props

| Prop | Type | Required | Description | |-------------|----------------------|----------|-----------------------------------------------------------------------------| | apiKey | string | yes | Your publishable API key (sent as X-API-Key). | | apiUrl | string | no | Backend base URL. Trailing slash is stripped. Defaults to the hosted API. | | language | string | no | Force a language. Otherwise config.languages[0] → "en". | | theme | Partial<ChatTheme> | no | Local theme overrides; win over backend config and defaults. | | sessionId | string | no | Stable device/session id forwarded to the backend for threading. | | style | ViewStyle | no | Extra style for the root container. |

Theming & overrides

The backend sends raw config (primary_color, etc.); the SDK normalizes it into a ChatTheme so the native UI matches the web widget. Override precedence is:

client override  →  backend config  →  built-in default

Force any token locally via the theme prop:

<AIChatbot
  apiKey="pk_live_xxx"
  apiUrl="https://api.you.com"
  theme={{
    primaryColor: '#16a34a', // overrides whatever the backend says
    bubbleRadius: 18,
  }}
/>

Resolvable tokens: primaryColor, secondaryColor, onPrimaryColor, backgroundColor, surfaceColor, botBubbleColor, botBubbleTextColor, botBubbleBorderColor, userBubbleColor, userBubbleTextColor, mutedTextColor, bubbleRadius, inputRadius, fontFamily.

You can also resolve a theme yourself:

import { resolveTheme, DEFAULT_THEME } from '@aichatbot-saas/react-native';

const theme = resolveTheme(config, { primaryColor: '#16a34a' });

Headless client

Need full control over the UI? Use AIChatbotClient directly — it implements the entire REST contract and is what <AIChatbot /> uses internally.

import { AIChatbotClient, suggestionLabel } from '@aichatbot-saas/react-native';

const client = new AIChatbotClient({
  apiKey: 'pk_live_xxx',
  apiUrl: 'https://api.you.com',
});

const config = await client.fetchConfig();
const starters = await client.fetchSuggestions(config.languages[0]);
console.log(starters.map(suggestionLabel));

const reply = await client.sendMessage({
  text: 'What are your hours?',
  conversationId: null, // persist reply.conversation_id for the next call
  language: 'en',
});
console.log(reply.response, reply.conversation_id);

await client.sendFeedback(reply.message_id, 'positive');

| Method | Returns | |----------------------------------------------------------|--------------------------| | fetchConfig() | Promise<ChatConfig> | | fetchSuggestions(language?) | Promise<Suggestion[]> | | sendMessage({ text, conversationId?, language?, sessionId? }) | Promise<ChatResponse> | | sendFeedback(messageId, feedback) | Promise<{ success }> |

Non-2xx responses throw Error(data.error).

License

MIT