chatbotify

v0.1.0

Published

2 months ago

A starter kit to build and embed themeable, multi-provider chatbots into any website or app.

0High
0Medium
0Low

akashadubey

chatbot embed openai claude google ai react vue sdk

🤖 Chatbotify SDK

Framework-agnostic starter kit to embed multi-provider AI chatbots with real-time streaming, secure API key handling, and a beautiful customizable UI.

🚀 Features

✅ Multi-Provider Support – OpenAI (GPT), Google (Gemini), Anthropic (Claude)
🔄 Real-time Streaming – Token-by-token response delivery with native ReadableStream
🔐 Secure by Design – Production-ready Express.js proxy to protect API keys
🎨 Customizable UI – Theme with CSS variables for colors, fonts, border-radius, and more
⚛️ Framework Adapters – Works in plain HTML/JS or React applications
🧩 Extensible Plugin System – Add custom message logic, analytics, or token hooks

📆 Installation

# Using npm
npm install chatbotify react

# Using yarn
yarn add chatbotify react

🔧 Usage

Plain JavaScript

<!DOCTYPE html>
<html>
<head>
  <title>Chatbot Test</title>
  <link rel="stylesheet" href="node_modules/chatbotify/dist/styles.css">
</head>
<body>
  <div id="chat-container" style="width: 400px; height: 600px; border: 1px solid #ccc;"></div>

  <script type="module">
    import { ChatUI, GoogleProvider } from 'chatbotify';

    const googleProvider = new GoogleProvider({ model: 'gemini-2.5-flash' });

    const chatUI = new ChatUI({
      target: document.getElementById('chat-container'),
      provider: googleProvider,
      proxyUrl: 'http://localhost:3001/proxy/google',
    });
  </script>
</body>
</html>

React

import React, { useMemo } from 'react';
import { ChatWidget } from 'chatbotify/react';
import { OpenAIProvider } from 'chatbotify';
import 'chatbotify/dist/styles.css';

function App() {
  const openAIProvider = useMemo(
    () => new OpenAIProvider({ model: 'gpt-4-turbo' }),
    []
  );

  return (
    <div style={{ width: '400px', height: '600px', margin: 'auto' }}>
      <ChatWidget
        provider={openAIProvider}
        proxyUrl="http://localhost:3001/proxy/openai"
      />
    </div>
  );
}

export default App;

🔐 How It Works

Secure Proxy – Protects API keys on the backend using Express.js
Provider – Streams responses from OpenAI, Google, or Anthropic models
Chatbot Instance – Handles real-time streaming, token hooks, and plugins
UI Component – Displays the chat widget and manages user interaction

⚙️ Environment Setup

Create a .env file in your project root:

# Google API
GOOGLE_API_KEY="your-google-api-key"

# OpenAI API
OPENAI_API_KEY="your-openai-api-key"
OPENAI_PROJECT_ID="your-openai-project-id"

# Anthropic API
CLAUDE_API_KEY="your-claude-api-key"

⚠️ Never expose your API keys in client-side code or version control.

🧪 Plugins

Extend Chatbotify with custom hooks:

import { ChatUI, GoogleProvider } from 'chatbotify';

const loggingPlugin = {
  name: 'ConsoleLogger',
  onBeforeSend: (message) => {
    console.log('Sending to AI:', message.content);
    return message;
  },
  onToken: (token) => {
    console.log('Received token:', token);
    return token;
  },
};

const chatUI = new ChatUI({
  target: document.getElementById('chat-container'),
  provider: new GoogleProvider(),
  proxyUrl: 'http://localhost:3001/proxy/google',
  plugins: [loggingPlugin],
});

🎨 Theming

Customize the chat widget with CSS variables:

:root {
  --chatbot-font-family: 'Georgia', serif;
  --chatbot-primary-color: #2c3e50;
  --chatbot-background-color: #ecf0f1;
  --chatbot-user-message-bg: #3498db;
  --chatbot-bot-message-bg: #ffffff;
  --chatbot-border-radius: 8px;
}

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme