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
- npm package: npmjs.com/package/@ainative/react-sdk
- Also exports
useAgent,useTask,useMemory,useThread, and deployment-management hooks — see the package'sindex.d.tsfor the full surface. - Need a Next.js app instead? Next.js SDK
ZeroDB — part of AINative Studio