React SDK

npm i @ainative/react-sdk

Setup

Wrap your app with AINativeProvider:

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

function App() {
  return (
    <AINativeProvider 
      apiKey="your-api-key"
      projectId="your-project-id"
    >
      <YourApp />
    </AINativeProvider>
  );
}

useChat Hook

Stream chat completions with automatic message state management.

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

function Chat() {
  const { 
    messages,
    sendMessage,
    isLoading,
    error,
    clearMessages 
  } = useChat({
    model: 'meta-llama/llama-3.3-70b-instruct',
    systemPrompt: 'You are a helpful assistant.',
  });

  return (
    <div>
      {messages.map(m => (
        <div key={m.id}>
          <strong>{m.role}:</strong> {m.content}
        </div>
      ))}
      <button 
        onClick={() => sendMessage('Hello!')}
        disabled={isLoading}
      >
        Send
      </button>
    </div>
  );
}

useChat Options

Option	Type	Default	Description
model	string	"meta-llama/llama-3.3-70b-instruct"	Model ID
systemPrompt	string	null	System message
temperature	number	0.7	Sampling temperature
maxTokens	number	4096	Max response tokens
onMessage	function	null	Callback per message chunk
onError	function	null	Error callback

useChat Returns

Field	Type	Description
messages	Message[]	Conversation history
sendMessage	function	Send a user message
isLoading	boolean	True while streaming
error	Error | null	Last error
clearMessages	function	Reset conversation

useCredits Hook

Monitor API credit balance.

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

function CreditDisplay() {
  const { balance, isLoading } = useCredits();
  
  if (isLoading) return <span>Loading...</span>;
  return <span>Credits: {balance}</span>;
}

TypeScript Support

All hooks are fully typed. Import types:

import type { Message, ChatOptions, CreditBalance } from '@ainative/react-sdk';

Next Steps

• Next.js SDK — Server-side client and auth middleware
• API Reference — REST API documentation