@ainative/react-sdk#

React hooks and components for AINative — chat completions, credit tracking, and managed sessions.

Install#

bash

npm install @ainative/react-sdk

Setup: AINativeProvider#

Wrap your app (or a subtree) with the provider:

tsx

import { AINativeProvider } from '@ainative/react-sdk';

function App() {
  return (
    <AINativeProvider config={{ apiKey: 'ak_your_key' }}>
      <YourApp />
    </AINativeProvider>
  );
}

useChat Hook#

tsx

import { useChat } from '@ainative/react-sdk';
import type { Message } from '@ainative/react-sdk';

function ChatUI() {
  const { messages, isLoading, error, sendMessage } = useChat({
    model: 'claude-3-5-sonnet-20241022',
    temperature: 0.7,
    max_tokens: 1024,
  });

  const handleSend = async (input: string) => {
    await sendMessage([
      ...messages,
      { role: 'user', content: input }
    ]);
  };

  return (
    <div>
      {messages.map((msg, i) => (
        <div key={i} className={`message ${msg.role}`}>
          <strong>{msg.role}:</strong> {msg.content}
        </div>
      ))}
      {isLoading && <div>Thinking...</div>}
      {error && <div className="error">Error: {error.message}</div>}
      <input
        onKeyDown={(e) => e.key === 'Enter' && handleSend(e.currentTarget.value)}
        placeholder="Type a message..."
      />
    </div>
  );
}

useChat Options#

OptionTypeDefaultDescriptionmodelstring—Model ID (e.g. claude-3-5-sonnet-20241022)temperaturenumber0.7Randomness (0–1)max_tokensnumber1024Max response tokens

useChat Return#

FieldTypeDescriptionmessages``Message[]Full conversation historyisLoading``booleanTrue while request in flighterror``AINativeError | nullLast error, if anysendMessage``(msgs: Message[]) => Promise<...>Send next message

useCredits Hook#

tsx

import { useCredits } from '@ainative/react-sdk';

function CreditsBar() {
  const { balance, isLoading, error, refetch } = useCredits();

  if (isLoading) return <div>Loading credits...</div>;
  if (error) return <div>Error: {error.message}</div>;

  return (
    <div>
      <span>{balance?.remaining_credits} credits remaining</span>
      <span> | Plan: {balance?.plan}</span>
      <button onClick={refetch}>Refresh</button>
    </div>
  );
}

useCredits Return#

FieldTypeDescriptionbalance``CreditBalance | nullBalance dataisLoading``booleanFetching stateerror``AINativeError | nullError staterefetch``() => voidManually refresh

CreditBalance shape: { remaining_credits: number, plan: string, ... }

Exports#

typescript

import {
  AINativeProvider,
  useChat,
  useCredits,
  useAINativeContext,  // access raw config/baseUrl
  type Message,
  type ChatCompletionResponse,
  type CreditBalance,
  type AINativeError,
  type UseChatOptions,
} from '@ainative/react-sdk';

Environment Variable (CRA / Vite)#

bash

REACT_APP_AINATIVE_API_KEY=ak_your_key   # CRA
VITE_AINATIVE_API_KEY=ak_your_key        # Vite

tsx

<AINativeProvider config={{ apiKey: process.env.REACT_APP_AINATIVE_API_KEY! }}>

References#

• packages/sdks/react/src/hooks/useChat.ts — Hook implementation
• packages/sdks/react/src/hooks/useCredits.ts — Credits hook
• packages/sdks/react/src/AINativeProvider.tsx — Provider context
• packages/sdks/react/src/index.ts — Package exports