AI Floating Chat Widget

A customizable floating chat widget for React applications that integrates with multiple AI providers (OpenAI, Claude, Cohere) and supports tool-based function calling.

Features

• 💬 Floating chat widget that can be positioned at different corners of the viewport
• 🤖 Integration with multiple AI providers (OpenAI, Claude, Cohere)
• 🛠️ Support for tool-based function calling with custom callbacks
• 🎯 Intent matching system to map user queries to specific tools
• 🎨 Fully customizable theme and styling
• 📱 Responsive design for both desktop and mobile
• 🔔 Unread message notifications
• ⚙️ Easy-to-use API with sensible defaults

Installation

npm install ai-floating-chat
# or
yarn add ai-floating-chat

Basic Usage

import React from 'react';
import { AIFloatingChat } from 'ai-floating-chat';
import 'ai-floating-chat/dist/index.css';

const App = () => {
    return (
        <div>
            <h1>My Application</h1>

            <AIFloatingChat aiProvider="openai" apiKey="your-api-key-here" welcomeMessage="Hi there! How can I help you today?" />
        </div>
    );
};

Advanced Usage with Tools

The following example demonstrates how to use the chat widget with custom tools and intent matching:

import React from 'react';
import { AIFloatingChat } from 'ai-floating-chat';
import 'ai-floating-chat/dist/index.css';

const App = () => {
    // Define your tools
    const tools = [
        {
            name: 'search_products',
            description: 'Search for products in the catalog',
            parameters: {
                type: 'object',
                properties: {
                    query: {
                        type: 'string',
                        description: 'Search query for products',
                    },
                    category: {
                        type: 'string',
                        description: 'Optional category to filter by',
                    },
                },
                required: ['query'],
            },
            execute: async (params) => {
                // Simulate an API call
                return `Searching for products with query: ${params.query} in category: ${params.category || 'all'}`;
            },
        },
        // Add more tools as needed
    ];

    // Intent matcher function
    const matchIntent = async (message, tools) => {
        // Your logic to match user message to tool intents
        if (message.toLowerCase().includes('find') || message.toLowerCase().includes('search')) {
            return {
                tool: 'search_products',
                params: {
                    query: message.split('for ')[1] || 'product',
                    category: message.includes('electronics') ? 'electronics' : null,
                },
            };
        }
        return null; // No intent match
    };

    return (
        <div>
            <h1>My E-commerce App</h1>

            <AIFloatingChat
                aiProvider="claude"
                apiKey="your-claude-api-key"
                modelName="claude-3-opus-20240229"
                welcomeMessage="Hello! I'm your shopping assistant. How can I help?"
                position="bottom-right"
                theme={{
                    primaryColor: '#6366f1',
                    secondaryColor: '#f3f4f6',
                    textColor: '#111827',
                }}
                tools={tools}
                intentMatcher={matchIntent}
            />
        </div>
    );
};

Props Reference

Prop	Type	Default	Description
aiProvider	string	'openai'	The AI provider to use ('openai', 'claude', or 'cohere')
apiKey	string	-	Your API key for the selected provider
modelName	string	Provider-specific default	Model name for the provider (e.g., 'gpt-4', 'claude-3-opus-20240229')
welcomeMessage	string	'Hey there! How can I help you today?'	Initial message displayed in the chat
position	string	'bottom-right'	Position of the chat widget ('bottom-right', 'bottom-left', 'top-right', 'top-left')
theme	object	See below	Theme customization object
tools	array	[]	Array of tool objects for function calling
intentMatcher	function	null	Function to match user input to tool intents
avatar	string	null	URL to the avatar image for the assistant
chatBubbleIcon	string	null	URL to the chat icon for the widget
customStyles	object	{}	Custom styles for various components

Default Theme

{
  primaryColor: '#007bff',
  secondaryColor: '#f8f9fa',
  textColor: '#212529'
}

Custom Styles

You can customize specific components with the customStyles prop:

{
  container: {
    // Styles for the main container
  },
  chatBubble: {
    // Styles for the chat bubble button
  },
  chatWindow: {
    // Styles for the chat window
  }
}

Tool Format

Each tool should follow this format:

{
  name: 'tool_name',
  description: 'Description of what the tool does',
  parameters: {
    type: 'object',
    properties: {
      // Define parameters here
      paramName: {
        type: 'string', // or number, boolean, etc.
        description: 'Description of the parameter'
      }
    },
    required: ['requiredParam1', 'requiredParam2']
  }
  execute: async (params) => {
    // Function to execute the tool
    // This can be an API call or any other logic
    return `Executed ${name} with params: ${JSON.stringify(params)}`;
  }
}

Intent Matcher Function

The intent matcher function should have this signature:

async function intentMatcher(message, tools) {
    // Analyze the message and determine if it matches a tool intent
    // Return null if no match, or an object with tool and params if matched:
    return {
        tool: 'tool_name',
        params: {
            // Parameter values for the tool
        },
    };
}

Provider-Specific Notes

OpenAI

• Default model: 'gpt-4'
• Requires an OpenAI API key

Claude (Anthropic)

• Default model: 'claude-3-opus-20240229'
• Requires a Claude API key

Cohere

• Default model: 'command'
• Requires a Cohere API key

Contributing

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

License

MIT License.

Contact

For any questions or support, please open an issue on the GitHub repository or contact the maintainer.

Acknowledgments

• Thanks to Thayalan for suggesting this approach.

Changelog

• v1.0.7: Initial release with basic functionality.