OpenAI Chatbot UI SDK

A lightweight and customizable SDK for integrating OpenAI-powered chatbots into your web applications.

Features

• Easy integration with OpenAI's API
• Customizable UI with light and dark themes
• Simple API for sending and receiving messages
• Ready-to-use chat interface
• Fully responsive design

Installation

npm install openai-chatbot-ui-sdk

Usage

Basic Example

<!DOCTYPE html>
<html>
<head>
  <title>Chatbot Example</title>
</head>
<body>
  <div id="chatbot-container"></div>
  
  <script src="node_modules/openai-chatbot-ui-sdk/dist/chatbot-sdk.js"></script>
  <script>
    const chatbot = new ChatbotSDK.Chatbot({
      apiKey: 'your-openai-api-key',
      container: '#chatbot-container',
      model: 'gpt-3.5-turbo'
    });
  </script>
</body>
</html>

Via ES Module Import

import Chatbot from 'openai-chatbot-ui-sdk';

const chatbot = new Chatbot({
  apiKey: 'your-openai-api-key',
  container: document.getElementById('chatbot-container'),
  model: 'gpt-3.5-turbo'
});

API Reference

Chatbot Class

The main class for integrating the chatbot.

Constructor Options

Option	Type	Default	Description
apiKey	string	''	Your OpenAI API key
model	string	'gpt-3.5-turbo'	The OpenAI model to use
container	string|Element	null	The container element or selector for the chatbot UI
initialMessages	array	[]	Initial messages to populate the chat
onMessage	function	null	Callback function when a message is sent or received
uiOptions	object	{}	UI customization options

Methods

• sendMessage(message, options): Send a message to the chatbot
• setApiKey(apiKey): Update the API key
• setModel(model): Change the model
• getMessages(): Get all messages in the conversation
• clearMessages(): Clear all messages
• initUI(container, uiOptions): Initialize the UI

UI Customization

The UI can be customized with the following options:

const chatbot = new Chatbot({
  // ... other options
  uiOptions: {
    theme: 'dark', // 'light' or 'dark'
    position: 'bottom-right', // 'bottom-right' or 'relative'
    width: '350px',
    height: '500px',
    headerText: 'Custom Chatbot',
    placeholder: 'Type a message...',
    sendButtonText: 'Send'
  }
});

Building from Source

1. Clone the repository
2. Install dependencies: npm install
3. Build the project: npm run build

The bundled output will be in the dist directory.

Examples

Check the examples directory for more usage examples.

License

MIT