npm package: @gr33n-ai/jade-sdk-rn-client
Description: React Native client for Jade AI - generate images, videos, and audio on mobile
Author: gr33n.ai
Latest version: 0.2.2

# @gr33n-ai/jade-sdk-rn-client

React Native client for [Jade AI](https://jade.gr33n.ai) - generate images,
videos, and audio on mobile.

## Installation

```bash
npm install @gr33n-ai/jade-sdk-rn-client @react-native-async-storage/async-storage
# or
yarn add @gr33n-ai/jade-sdk-rn-client @react-native-async-storage/async-storage
```

### iOS

```bash
cd ios && pod install
```

## Quick Start

```tsx
import {
  JadeProvider,
  useJadeSession,
  createAsyncStorageAdapter,
} from '@gr33n-ai/jade-sdk-rn-client';
import AsyncStorage from '@react-native-async-storage/async-storage';

const storage = createAsyncStorageAdapter(AsyncStorage);

function App() {
  return (
    <JadeProvider
      config={{
        endpoint: 'https://api.gr33n.ai',
        getAuthToken: async () => await AsyncStorage.getItem('@gr33n-ai/api-key'),
      }}
      storage={storage}
    >
      <Chat />
    </JadeProvider>
  );
}

function Chat() {
  const { processedConversation, sendMessage, media, isStreaming } = useJadeSession();

  return (
    <View>
      <FlatList
        data={processedConversation}
        renderItem={({ item }) => (
          <View>
            <Text>{item.entry.text}</Text>
            {item.mediaUrls?.map(url => (
              <Image
                key={url}
                source={{ uri: url }}
                style={{ width: 200, height: 200 }}
              />
            ))}
          </View>
        )}
      />
      <Button
        title="Generate"
        onPress={() => sendMessage('Generate an image of a sunset')}
      />
    </View>
  );
}
```

## Examples

See the [jade-sdk-examples][examples] repo for a complete React Native app
with:

[examples]: https://github.com/gr33n-ai/jade-sdk-examples/tree/main/react-native

- Chat UI with streaming
- Media gallery
- Custom tool UI components
- Session management

## Authentication

Create an API key in your [organization dashboard](https://jade.gr33n.ai/dashboard/org/).

## Features

- **Native SSE Streaming**: Uses `react-native-sse` for reliable streaming
- **Media Generation**: Generate images, videos, and audio
- **Persistent Storage**: Support for AsyncStorage, MMKV, and custom adapters
- **Background Handling**: Automatic pause/resume on app state changes
- **Type-Safe**: Full TypeScript support

## Documentation

Full documentation available at [docs.gr33n.ai](https://docs.gr33n.ai)

- [React Native Quickstart](https://docs.gr33n.ai/quickstart/react-native)
- [Storage Adapters](https://docs.gr33n.ai/react-native/storage)
- [App State Handling](https://docs.gr33n.ai/react-native/app-state)

## API

### JadeProvider

Wrap your app with `JadeProvider`:

```tsx
<JadeProvider
  config={{
    endpoint: 'https://api.jade.gr33n.ai',
    getAuthToken: async () => await getApiKey(),
  }}
  storage={storage}
  pauseOnBackground={true}
>
  <App />
</JadeProvider>
```

### useJadeSession

Main hook for chat functionality:

```tsx
const {
  // Conversation state
  processedConversation,  // Processed entries ready for display
  media,                   // All generated media
  sessionId,               // Current session ID

  // Streaming state
  isStreaming,             // Whether AI is responding
  streamingText,           // Text being streamed (live updates)
  streamingToolCall,       // Tool call being streamed
  showTinkering,           // Show "thinking" indicator
  isExecutingTool,         // Whether a tool is being executed
  executingToolName,       // Name of the tool being executed

  // Actions
  sendMessage,             // Send a message
  cancel,                  // Cancel current stream
  clear,                   // Clear conversation
  loadSession,             // Load a previous session
  reconnect,               // Reconnect to active session
} = useJadeSession();
```

### Storage Adapters

```tsx
import {
  createAsyncStorageAdapter,
  createMMKVAdapter,
  createMemoryStorageAdapter,
} from '@gr33n-ai/jade-sdk-rn-client';

// AsyncStorage (recommended)
const storage = createAsyncStorageAdapter(AsyncStorage);

// MMKV (high performance)
const storage = createMMKVAdapter(mmkv);

// In-memory (testing)
const storage = createMemoryStorageAdapter();
```

### Hooks

```tsx
import {
  useJadeClient,  // Access the client
  useStorage,     // Access storage adapter
  useAppState,    // Monitor app state
} from '@gr33n-ai/jade-sdk-rn-client';
```

## Requirements

- React Native 0.72+
- React 18+
- iOS 13+ / Android 6+

## Expo Support

Works with Expo. Install using:

```bash
npx expo install @gr33n-ai/jade-sdk-rn-client @react-native-async-storage/async-storage
```

## License

MIT