ArgoChat is a lightweight, customizable chat widget for integrating Argo AI agents into any website. Built with Lit and bundled as a standalone web component, it provides a seamless chat experience with zero external dependencies.
- 🚀 Zero-dependency standalone web component
- 🎨 Fully customizable theme and appearance
- 📱 Responsive design that works on all devices
- 🔌 Simple integration with just a few lines of code
- 💬 Direct integration with Argo AI agents
- 🎯 Flexible positioning options
You can integrate ArgoChat into your website in multiple ways:
Add the following script tag to your HTML:
import { ArgoChat } from 'https://cdn.jsdelivr.net/npm/@hestia.ai/argo-chat@latest/dist/argo-chat.es.js';npm i @hestia.ai/argo-chatThen import with:
import { ArgoChat } from '@hestia.ai/argo-chat'- Create an agent on Argo
- Get your API key from the Argo dashboard
- Add ArgoChat to your website:
<script type="module">
import { ArgoChat } from 'https://cdn.jsdelivr.net/npm/@hestia.ai/argo-chat@latest/dist/argo-chat.es.js';
const chat = new ArgoChat({
apiKey: 'your-argo-api-key',
});
document.body.appendChild(chat);
</script>interface ChatOptions {
title: string; // Title of the chat window
apiKey: string; // Your Argo API key
apiEndpoint: string; // Argo API endpoint
greeting: string; // Greeting message displayed when opened
position: 'bottom-right' | 'bottom-left'; // Chat position
placeholder: string; // Input field placeholder
theme: ThemeOptions; // Theme configuration
user_icon?: string; // User message icon (optional)
assistant_icon?: string; // Assistant message icon (optional)
toggleButton: ToggleButtonOptions; // Toggle button configuration
}interface ThemeOptions {
primaryColor: string; // Primary color (hex format)
textColor: string; // Text color on primary background (hex)
fontFamily: string; // Font family (import separately)
}interface ToggleButtonOptions {
icon: string; // SVG icon string
icon_size: string; // Icon size (CSS units)
btn_size: string; // Button size (CSS units)
}Import your desired font and specify it in the theme options:
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap" rel="stylesheet">theme: {
fontFamily: 'Inter, sans-serif'
}Customize the chat icons:
{
user_icon: '<svg>...</svg>',
assistant_icon: '<svg>...</svg>',
toggleButton: {
icon: '<svg>...</svg>'
}
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ArgoChat Example</title>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap" rel="stylesheet">
</head>
<body>
<script type="module">
import { ArgoChat } from 'argo-chat';
const chat = new ArgoChat({
title: 'AI Assistant',
apiKey: 'your-argo-api-key',
greeting: 'Welcome! How can I help you today?',
position: 'bottom-right',
placeholder: 'Type your message...',
theme: {
primaryColor: '#007bff',
textColor: '#ffffff',
fontFamily: 'Inter, sans-serif'
},
toggleButton: {
icon: '<svg>...</svg>',
icon_size: '24px',
btn_size: '56px'
}
});
document.body.appendChild(chat);
</script>
</body>
</html>Prerequisites:
- Node.js (v16 or higher)
- npm or yarn
- Clone the repository:
git clone https://github.com/hestiaAI/argo-chat.git
cd argo-chat- Install dependencies:
npm install- Start the development server:
npm run dev- Build the package:
npm run build- Test the build:
npm run serveVisit http://localhost:3000 to see the test page.
To publish a new version:
- Login to NPM:
npm login --scope=@hestiaai- Update version in package.json:
npm version patch # or minor or major- Build and test:
npm ci
npm run build
# Pack the package locally
npm pack
# This will create a file like argo-chat-1.0.0.tgz
# You can install it locally in a test project:
npm install ../path/to/hestiaai/argo-chat-1.0.0.tgz- Publish to npm:
npm publishThe new version will automatically be available on the CDN after publishing.
We welcome contributions! Please follow these steps:
- Fork the repository
- Create a feature branch (
git checkout -b feature/amazing-feature) - Commit your changes (
git commit -m 'Add amazing feature') - Push to the branch (
git push origin feature/amazing-feature) - Open a Pull Request
If you encounter any issues or have questions:
- Check the Issues page
- Create a new issue if your problem isn't already listed
- Contact support at support@hestia.ai
Built with ❤️ by Hestia.ai