JadeProvider

The JadeProvider component provides Jade SDK context to your application. Wrap your app with this provider to use Jade hooks.

Import

React / Next.js
React Native

import { JadeProvider } from '@gr33n-ai/jade-sdk-client';

import { JadeProvider } from '@gr33n-ai/jade-sdk-rn-client';

Basic Usage

React / Next.js
React Native

import { JadeProvider } from '@gr33n-ai/jade-sdk-client';

function App() {
  return (
    <JadeProvider
      config={{
        endpoint: 'https://api.gr33n.ai',
        getAuthToken: () => 'your-api-key',
      }}
    >
      <YourApp />
    </JadeProvider>
  );
}

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

const storage = createAsyncStorageAdapter(AsyncStorage);

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

Props

config

JadeClientConfig

required

Configuration object for the Jade client.

interface JadeClientConfig {
  endpoint: string;
  getAuthToken: () => string | null | Promise<string | null>;
  organizationId?: string;
  fetchOptions?: RequestInit;
}

Property	Type	Required	Description
`endpoint`	`string`	Yes	The Jade API endpoint URL
`getAuthToken`	`() => string \| null \| Promise<string \| null>`	Yes	Function that returns the API key
`organizationId`	`string`	No	Organization ID for org-scoped operations
`fetchOptions`	`RequestInit`	No	Additional options for fetch requests (web only)

storage (React Native only)

StorageAdapter

Storage adapter for persisting data locally. Required for React Native to enable session persistence.

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

const storage = createAsyncStorageAdapter(AsyncStorage);

<JadeProvider config={config} storage={storage}>

See React Native Guide for more storage options.

pauseOnBackground (React Native only)

boolean

default:"true"

Whether to pause streaming when the app goes to background.

<JadeProvider
  config={config}
  storage={storage}
  pauseOnBackground={true}  // Default: true
>

Configuration Options

Async Authentication

React / Next.js
React Native

<JadeProvider
  config={{
    endpoint: 'https://api.gr33n.ai',
    getAuthToken: async () => {
      // Fetch token from your backend
      const res = await fetch('/api/auth/jade-token');
      const { token } = await res.json();
      return token;
    },
  }}
>

<JadeProvider
  config={{
    endpoint: 'https://api.gr33n.ai',
    getAuthToken: async () => {
      // Get from secure storage
      const credentials = await Keychain.getGenericPassword();
      return credentials ? credentials.password : null;
    },
  }}
  storage={storage}
>

Organization Context

<JadeProvider
  config={{
    endpoint: 'https://api.gr33n.ai',
    getAuthToken: () => apiKey,
    organizationId: 'org_abc123',
  }}
>

Custom Fetch Options (Web only)

<JadeProvider
  config={{
    endpoint: 'https://api.gr33n.ai',
    getAuthToken: () => null, // Using cookies instead
    fetchOptions: {
      credentials: 'include',
      headers: {
        'X-Custom-Header': 'value',
      },
    },
  }}
>

Accessing the Client

Use the client hook to access the underlying client directly:

React / Next.js
React Native

import { useAgentClient } from '@gr33n-ai/jade-sdk-client';

function SessionManager() {
  const client = useAgentClient();

  const listSessions = async () => {
    const { sessions } = await client.listSessions();
    return sessions;
  };

  // ...
}

import { useJadeClient } from '@gr33n-ai/jade-sdk-rn-client';

function SessionManager() {
  const client = useJadeClient();

  const listSessions = async () => {
    const { sessions } = await client.listSessions();
    return sessions;
  };

  // ...
}

React Native-Specific Hooks

The React Native provider also exposes these additional hooks:

useStorage

Get the storage adapter:

import { useStorage } from '@gr33n-ai/jade-sdk-rn-client';

function Settings() {
  const storage = useStorage();

  const saveSetting = async (key: string, value: string) => {
    if (storage) {
      await storage.setItem(key, value);
    }
  };
}

useAppState

Get the current app state:

import { useAppState } from '@gr33n-ai/jade-sdk-rn-client';

function StreamingIndicator() {
  const appState = useAppState();

  // appState is 'active', 'background', or 'inactive'
  if (appState !== 'active') {
    return <Text>Paused (app in background)</Text>;
  }

  return <StreamingUI />;
}

Multiple Providers

You can use multiple providers for different configurations:

function App() {
  return (
    <JadeProvider config={personalConfig}>
      <PersonalWorkspace />
    </JadeProvider>
  );
}

function TeamSection() {
  return (
    <JadeProvider config={teamConfig}>
      <TeamWorkspace />
    </JadeProvider>
  );
}

Each JadeProvider creates its own client instance. Hooks will use the nearest provider in the component tree.

TypeScript

Import types from the appropriate package:

React / Next.js
React Native

import type { JadeClientConfig } from '@gr33n-ai/jade-sdk-client';

const config: JadeClientConfig = {
  endpoint: 'https://api.gr33n.ai',
  getAuthToken: () => process.env.JADE_API_KEY!,
};

import type { AgentClientConfig, StorageAdapter } from '@gr33n-ai/jade-sdk-rn-client';

const config: AgentClientConfig = {
  endpoint: 'https://api.gr33n.ai',
  getAuthToken: async () => await AsyncStorage.getItem('@gr33n-ai/api-key'),
};

Hooks Reference - Session and media hooks
React Native Guide - Storage and app state

Getting Started

Guides

Integration

Examples

Import

Basic Usage

Props

config

storage (React Native only)

pauseOnBackground (React Native only)

Configuration Options

Async Authentication

Organization Context

Custom Fetch Options (Web only)

Accessing the Client

React Native-Specific Hooks

useStorage

useAppState

Multiple Providers

TypeScript

​Import

​Basic Usage

​Props

​config

​storage (React Native only)

​pauseOnBackground (React Native only)

​Configuration Options

​Async Authentication

​Organization Context

​Custom Fetch Options (Web only)

​Accessing the Client

​React Native-Specific Hooks

​useStorage

​useAppState

​Multiple Providers

​TypeScript

​Related

Import

Basic Usage

Props

config

storage (React Native only)

pauseOnBackground (React Native only)

Configuration Options

Async Authentication

Organization Context

Custom Fetch Options (Web only)

Accessing the Client

React Native-Specific Hooks

useStorage

useAppState

Multiple Providers

TypeScript

Related