Voni AI React SDK

The official React SDK for Voni AI - Programmable AI Infrastructure.

Installation

npm install @voniai/react @voniai/nodejs
# or
yarn add @voniai/react @voniai/nodejs

Quick Start

1. Wrap your app with VoniProvider

import { VoniProvider } from '@voniai/react';

function App() {
  return (
    // Option 1: Public Widget (No API Key required)
    <VoniProvider config={{}}>
      <MyChatComponent />
    </VoniProvider>

    // Option 2: Internal Tools (Load API Key from Env)
    // Supports: REACT_APP_VONI_API_KEY, VITE_VONI_API_KEY, NEXT_PUBLIC_VONI_API_KEY
    // <VoniProvider config={{}}>
    //   <MyInternalTool />
    // </VoniProvider>
  );
}

Security Warning: Do NOT include your Secret API Key in client-side code for public applications. Only use API Keys in the frontend for internal tools behind authentication.

2. Use the useChat hook for headless chat

import { useChat } from '@voniai/react';

function MyChatComponent() {
  const { messages, sendMessage, isLoading } = useChat({
    projectId: 'your_project_id'
  });

  return (
    <div>
      <div className="messages">
        {messages.map(m => (
          <div key={m.id} className={m.role}>
            {m.content}
          </div>
        ))}
      </div>
      
      <input 
        onKeyDown={(e) => {
          if (e.key === 'Enter') {
            sendMessage(e.currentTarget.value);
            e.currentTarget.value = '';
          }
        }}
        disabled={isLoading}
      />
    </div>
  );
}

3. Or use the VoniWidget for plug-and-play

import { VoniWidget } from '@voniai/react';

function App() {
  return (
    <div>
      <h1>My Website</h1>
      <VoniWidget projectId="your_project_id" />
    </div>
  );
}

Features

• Headless Hooks: Build your own custom UI using useChat.
• Context Managed: Shared client instance via VoniProvider.
• Type-Safe: Full TypeScript support.
• Plug-and-Play: Easy widget injection with VoniWidget.

Hooks API

useVoni()

Returns the underlying Voni client instance for advanced usage.

useChat({ projectId, sessionId, onMessageReceived, onError })

• messages: Array of message objects.
• sendMessage(content): Async function to send a message.
• isLoading: Boolean indicating if a response is pending.
• sessionId: Current chat session ID.
• clearMessages(): Resets the message history.

License

MIT