Skip to main content

React SDK

@ainative/react-sdk (v1.0.2, real published npm package) adds AI chat and credit tracking to a React app via a provider and two hooks. The exact code below was installed from npm into a clean Vite + React 18 app and verified with a real npm run build.

Install

npm install @ainative/react-sdk

React version constraint found during live testing

This package declares a peer dependency on react: ^18.0.0 and react-dom: ^18.0.0. A fresh Vite scaffold today defaults to React 19, which fails npm install with an ERESOLVE peer-dependency conflict. Pin React 18 (npm install react@18 react-dom@18) before installing this SDK, or use --legacy-peer-deps if you're committed to React 19.

Quickstart — verified with a real build

This exact App.tsx compiled and built cleanly with tsc -b && vite build.

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

function Chat() {
  const { messages, sendMessage, isLoading, error } = useChat({
    model: 'claude-3-5-sonnet-20241022',
  });

  return (
    <div>
      {messages.map((m, i) => (
        <div key={i}>{m.role}: {m.content}</div>
      ))}
      {error && <div>Error: {error.message}</div>}
      <button
        onClick={() => sendMessage([...messages, { role: 'user', content: 'Hello' }])}
        disabled={isLoading}
      >
        Send
      </button>
    </div>
  );
}

function Credits() {
  const { balance, isLoading } = useCredits();
  if (isLoading) return <div>Loading credits…</div>;
  return <div>Remaining credits: {balance?.remaining_credits}</div>;
}

function App() {
  return (
    <AINativeProvider config={{ apiKey: import.meta.env.VITE_AINATIVE_API_KEY }}>
      <Chat />
      <Credits />
    </AINativeProvider>
  );
}

export default App;
Verified: npm run build (tsc type-check + vite build) succeeds with this exact code.

Environment variables

# .env (Vite)
VITE_AINATIVE_API_KEY=your_api_key

# .env (Create React App)
REACT_APP_AINATIVE_API_KEY=your_api_key

Reference

ZeroDB — part of AINative Studio