@ainative/react-sdk

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

Install

npm install @ainative/react-sdk

Setup: AINativeProvider

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

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

function App() {
  return (
    \x3CAINativeProvider config={{ apiKey: 'ak_your_key' }}>
      \x3CYourApp />
    \x3C/AINativeProvider>
  );
}

useChat Hook

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 (
    \x3Cdiv>
      {messages.map((msg, i) => (
        \x3Cdiv key={i} className={`message ${msg.role}`}>
          \x3Cstrong>{msg.role}:\x3C/strong> {msg.content}
        \x3C/div>
      ))}
      {isLoading && \x3Cdiv>Thinking...\x3C/div>}
      {error && \x3Cdiv className="error">Error: {error.message}\x3C/div>}
      \x3Cinput
        onKeyDown={(e) => e.key === 'Enter' && handleSend(e.currentTarget.value)}
        placeholder="Type a message..."
      />
    \x3C/div>
  );
}

useChat Options

useChat Return

useCredits Hook

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

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

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

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

useCredits Return

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

Exports

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)

REACT_APP_AINATIVE_API_KEY=ak_your_key   # CRA
VITE_AINATIVE_API_KEY=ak_your_key        # Vite

\x3CAINativeProvider 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