AINative SDKs for React, Vue, Svelte & Next.js

npm install @ainative/react-sdk

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

// Wrap your app:
<AINativeProvider config={{ apiKey: 'your-key' }}>
  <App />
</AINativeProvider>

// Inside a component:
const { messages, isLoading, sendMessage } = useChat({
  model: 'llama-3.3-70b-instruct',
});
const { balance } = useCredits();

npm install @ainative/vue-sdk

// main.ts — provide config once:
import { AINativeConfigKey } from '@ainative/vue-sdk';
app.provide(AINativeConfigKey, { apiKey: 'your-key' });

// Inside a component:
<script setup lang="ts">
import { useChat } from '@ainative/vue-sdk';
const { messages, isLoading, sendMessage } = useChat({
  model: 'claude-sonnet-4-6',
});
</script>

npm install @ainative/svelte-sdk

import { setAINativeConfig, createChat } from '@ainative/svelte-sdk';

// Set config once (e.g. in +layout.ts):
setAINativeConfig({ apiKey: 'your-key' });

// Create a reactive chat store:
const chat = createChat({ model: 'claude-sonnet-4-6' });
// In template: $chat.messages, $chat.isLoading, $chat.sendMessage

npm install @ainative/next-sdk

// Server component — never ships the key to the client:
import { createServerClient, getApiKey } from '@ainative/next-sdk/server';
const client = createServerClient({ apiKey: await getApiKey() });
const balance = await client.credits.balance();

// Protected API route:
import { withAuth, createServerClient } from '@ainative/next-sdk/server';
export const POST = withAuth(async (req, { apiKey }) => {
  const client = createServerClient({ apiKey });
  const body = await req.json();
  return Response.json(
    await client.chat.completions.create({ messages: body.messages }),
  );
});