Ainative React Sdk

---

name: ainative-react-sdk description: Use @ainative/react-sdk to add AI chat and credits to React apps. Use when (1) Installing @ainative/react-sdk, (2) Using the useChat hook for chat completions, (3) Displaying credit balance with useCredits, (4) Setting up AINativeProvider, (5) Handling loading/error states in chat UI. Published npm package v1.0.1.

---

@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 (
    
      
    
  );
}

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 (
    

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

useChat Options

| Option | Type | Default | Description | |--------|------|---------|-------------| | model | string | — | Model ID (e.g. claude-3-5-sonnet-20241022) | | temperature | number | 0.7 | Randomness (0–1) | | max_tokens | number | 1024 | Max response tokens |

useChat Return

| Field | Type | Description | |-------|------|-------------| | messages | Message[] | Full conversation history | | isLoading | boolean | True while request in flight | | error | AINativeError \| null | Last error, if any | | sendMessage | (msgs: Message[]) => Promise<...> | Send next message |

useCredits Hook

import { useCredits } from '@ainative/react-sdk';
function CreditsBar() {
  const { balance, isLoading, error, refetch } = useCredits();
  if (isLoading) return 
Loading credits...
;
  if (error) return 
Error: {error.message}
;
  return (
    

      {balance?.remaining_credits} credits remaining
       | Plan: {balance?.plan}
      Refresh
    
  );
}

useCredits Return

| Field | Type | Description | |-------|------|-------------| | balance | CreditBalance \| null | Balance data | | isLoading | boolean | Fetching state | | error | AINativeError \| null | Error state | | refetch | () => void | Manually refresh |

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

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