@qafka/react-native

In-app AI assistant for React Native and Expo. Drop the <Qafka /> component into your app and your users get a chat + voice interface that understands your screens, runs your tools, and guides them through flows you define in the Qafka dashboard.

Quickstart (recommended)

Install the CLI once, log in, then initialize Qafka in your app:

npm install -g qafka

cd your-app
qafka login
qafka init

qafka init installs the SDK, registers the Expo config plugin (when applicable), pulls your API key from the dashboard, and scaffolds a chat screen wired to your project. Re-run it any time you add tools or screens in the dashboard — it's idempotent and safe.

Manual installation

If you'd rather wire things up yourself:

npm install @qafka/react-native
# or: pnpm add / yarn add

Peer dependencies

npm install react-native react-native-safe-area-context

@react-navigation/native is optional — install it only if you want the SDK to navigate between screens for you.

Expo

The package ships an Expo config plugin. Add it to your app.json / app.config.js:

{
  "expo": {
    "plugins": ["@qafka/react-native"]
  }
}

Then run npx expo prebuild (or rebuild your dev client) so the native module is bundled.

Bare React Native

cd ios && pod install

Android autolinking handles the native module. If you plan to use voice mode, add the microphone permission to your app's android/app/src/main/AndroidManifest.xml:

<uses-permission android:name="android.permission.RECORD_AUDIO" />

Expo users get this automatically via the SDK's config plugin.

Usage

When your project is initialized with the Qafka CLI (qafka init), the SDK picks up your development key from the CLI-generated runtime config — no extra props needed:

import { Qafka } from '@qafka/react-native';

export default function App() {
  return <Qafka />;
}

The component renders a floating button that opens the chat UI. Configure tools, screens, and behavior from the dashboard — most updates need no code changes.

Pass projectId when your app has more than one registered project:

<Qafka projectId="proj_abc123" />

Image Generation

Generate images from text descriptions or reframe reference images to target aspect ratios and sizes without distortion. The SDK must be initialized before calling this method.

import { getSDK } from '@qafka/react-native';

const result = await getSDK().generateImage({
  description: 'product photo reframed to 16:9 landscape',
  referenceImage: 'https://example.com/photo.jpg',
  aspectRatio: '16:9',
  quality: 'standard',
  n: 1,
});

Parameters

| Param | Type | Required | Notes | |-------|------|----------|-------| | description | string | Yes | Text description of the desired image or transformation. | | referenceImage | string | string[] | No | Base64 data-URI, URL, or array of either. Used to guide or reframe the output. | | aspectRatio | string | No | Free-form ratio, e.g. "16:9", "7:3", "1:1". Ignored if size is set. | | size | { width: number; height: number } | No | Exact pixel dimensions. Overrides aspectRatio. | | quality | 'standard' \| 'pro' | No | Default: 'standard'. 'pro' requires image generation pro to be enabled on your plan. | | responseType | 'base64' \| 'url' \| 'both' | No | Default: 'base64'. 'url' returns a signed, time-limited link; 'both' returns both. | | n | number | No | Number of variants to generate. Default: 1. When n > 1, result is an array. |

Result

Each generated image is an object with:

{
  base64?: string;        // Returned when responseType includes 'base64'
  url?: string;           // Signed link, time-limited. Returned when responseType includes 'url'
  expiresAt?: string;     // ISO 8601 timestamp. Present when url is returned
  mimeType: string;       // e.g. 'image/png'
}

When n > 1, the result is an array of such objects.

Example

Reframe an uploaded product photo to a banner size and fetch the result as a base64 image:

try {
  const result = await getSDK().generateImage({
    description: 'High-quality product banner, maintaining all product details',
    referenceImage: productPhotoBase64,
    size: { width: 1200, height: 300 },
    responseType: 'base64',
  });
  
  setGeneratedImage(result.base64);
} catch (err) {
  if (err.code === 'not_entitled') {
    showAlert('Image generation is not enabled on your plan.');
  } else if (err.code === 'rate_limited') {
    showAlert('Too many requests. Please try again later.');
  } else if (err.code === 'content_filtered') {
    showAlert('The description or reference image was filtered for policy reasons.');
  } else if (err.code === 'invalid_reference') {
    showAlert('The reference image could not be processed.');
  } else {
    showAlert('Image generation failed. Please try again.');
  }
}

Documentation

Full guides, API reference, theming, voice mode, tools, and advanced configuration:

→ app.qafka.com/docs

Requirements

• React Native ≥ 0.72 (Expo SDK 49+ supported)
• React ≥ 18
• iOS 14+ / Android 6+ (API 23+)
• Node ≥ 20 (for build tooling)

Contributing

This SDK is the public source for a commercial product — see CONTRIBUTING.md for what we accept and how to file issues. For vulnerabilities, see SECURITY.md.

License

MIT © Qafka