@vaniai/chat-ui-sdk

v0.1.1

Published

19 days ago

Unified SDK for Vani AI Chat UI (core, react, and vanilla) with subpath exports.

0High
0Medium
0Low

devricon

ayushr

chat ui chatbot ai vani react vanilla sdk widget

Vani AI Chat UI SDK

A comprehensive, embeddable chat UI SDK for integrating Vani AI conversations into your web applications. Supports multiple frameworks and vanilla JavaScript.

📦 Installation

npm install @vaniai/chat-ui-sdk
# or
yarn add @vaniai/chat-ui-sdk

🚀 Quick Start

React

import { VaniChat } from '@vaniai/chat-ui-sdk/react';
import '@vaniai/chat-ui-sdk/react/styles.css';

function App() {
  return (
    <VaniChat
      agentId="your-agent-id"
      publicApiKey="your-public-key"
      baseUrl="https://api.vaniai.com"
      mode="embedded"
    />
  );
}

Vanilla JavaScript

<!DOCTYPE html>
<html>
<head>
  <script type="module">
    import { VaniAIChat } from '@vaniai/chat-ui-sdk/vanilla';
    
    VaniAIChat.init({
      agentId: 'your-agent-id',
      publicApiKey: 'your-public-key',
      baseUrl: 'https://api.vaniai.com',
      mode: 'floating'
    });
  </script>
</head>
<body>
  <!-- Chat widget will be injected here -->
</body>
</html>

Core API (Headless)

import { VaniChatClient } from '@vaniai/chat-ui-sdk';

const client = new VaniChatClient({
  agentId: 'your-agent-id',
  publicApiKey: 'your-public-key',
  baseUrl: 'https://api.vaniai.com'
});

await client.ready();

await client.streamMessage({
  message: 'Hello!',
  onDelta: (delta) => console.log(delta),
  onDone: (response) => console.log('Complete:', response)
});

📚 Documentation

Configuration Options

interface VaniChatConfig {
  agentId?: string;
  publicApiKey?: string;
  baseUrl?: string;
  mode?: 'floating' | 'embedded' | 'inline' | 'popup';
  position?: 'bottom-right' | 'bottom-left' | 'top-right' | 'top-left';
  theme?: {
    mode?: 'light' | 'dark' | 'system';
    colors?: {
      primary?: string;
      background?: string;
      surface?: string;
      text?: string;
      // ... more color options
    };
  };
  messages?: {
    title?: string;
    subtitle?: string;
    welcomeMessage?: string;
    placeholder?: string;
    // ... more message customization
  };
  onReady?: () => void;
  onOpen?: () => void;
  onClose?: () => void;
  onMessage?: (message: VaniChatMessage) => void;
  onError?: (error: Error) => void;
}

🏗️ Project Structure

This is a monorepo containing three packages:

@vaniai/chat-ui-core - Core client library and utilities
@vaniai/chat-ui-react - React components
@vaniai/chat-ui-vanilla - Vanilla JavaScript implementation

All packages are bundled together as @vaniai/chat-ui-sdk with subpath exports:

@vaniai/chat-ui-sdk (core)
@vaniai/chat-ui-sdk/react
@vaniai/chat-ui-sdk/vanilla

🛠️ Development

Setup

yarn install
yarn build

Build

# Build all packages
yarn build

# Build individual packages
yarn build:packages

# Build unified SDK
yarn build:sdk

Clean

yarn clean

Testing

# Test imports
node test-sdk.mjs

📦 Publishing

Individual Packages

Each package can be published separately:

cd packages/core && npm publish
cd packages/react && npm publish
cd packages/vanilla && npm publish

Unified SDK

To publish the unified SDK:

Remove "private": true from root package.json
Run npm publish or yarn publish

📄 License

MIT License - see LICENSE file for details.

🤝 Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

📧 Support

For support, email [email protected] or open an issue in the repository.