Hermes AI Integration Demo
This page demonstrates all the ways you can integrate Hermes AI into your website using uncloseai.js. Each example is isolated and can be used independently.
📋 Table of Contents
1. 📦 Basic Installation
The simplest way to add AI features to your website:
📄 Code Example
Installation Code
Add this single line to your HTML to get a floating AI button:
<script src="https://uncloseai.com/uncloseai.js" type="module"></script>🎯 Live Example
This page demonstrates the basic installation - notice the floating AI button in the bottom right corner!
✅ Active Demo: The floating Hermes button on this page is created by the basic installation code above.
Try clicking the floating button to test the AI chat functionality!
2. ⚙️ Configuration Options
Customize the behavior before loading the script:
📄 Code Example
Configuration Code
Customize the behavior before loading the script:
<script>
// Disable custom styling (use your CSS framework)
window.UNCLOSEAI_CUSTOM_STYLING = false;
// Disable floating button (API functions only)
window.UNCLOSEAI_FLOATING_BUTTON = false;
</script>
<script src="https://uncloseai.com/uncloseai.js" type="module"></script>🎯 Live Example
This page uses these configuration options:
✅ Active Demo: This page has:
UNCLOSEAI_CUSTOM_STYLING = false- Uses PicoCSS styling insteadUNCLOSEAI_FLOATING_BUTTON = false- Floating button disabled for embedded examples
3. 💬 System Message Customization
Customize the AI's behavior by appending additional instructions:
📄 Code Example
System Message Customization Code
Customize the AI's behavior by appending instructions:
<script type="module">
import { setSystemMessageAppend } from './src/config.js';
setSystemMessageAppend(`
Additional context for this demo page:
- You're helping users test AI features
- Provide clear, helpful examples
- Be encouraging about trying different features
`);
</script>🎯 Live Example
This page uses custom system message instructions:
✅ Active Demo: The AI on this page has been customized to:
- Help users explore and test AI features
- Provide clear, helpful examples
- Be encouraging about trying different features
Try asking the AI about the features on this page to see the customization in action!
4. 🤖 Full AI Interface
Complete AI chat with all features enabled:
📄 Code Example
Full Interface Code
Embed a complete AI interface with all features:
<div class="uncloseai" data-features="full"></div>🎯 Live Example
Try the full AI interface below:
5. 💬 Chat Interface Only
Pure chat interface without extra buttons:
📄 Code Example
Chat Only Code
Embed just the chat interface:
<div class="uncloseai" data-features="chat"></div>🎯 Live Example
Try the chat-only interface below:
7. 🔊 Text-to-Speech Only
Just the TTS functionality:
📄 Code Example
TTS Only Code
Embed just the text-to-speech button:
<div class="uncloseai" data-features="tts"></div>🎯 Live Example
Try the TTS-only interface below:
8. 🌐 Translation Options
Two ways to translate: Modal interface and Smart AI dropdown:
📄 Code Example
Translation Code
Choose between two translation approaches:
<!-- Traditional Modal (full options) -->
<div class="uncloseai" data-features="translate"></div>
<!-- Smart Dropdown (quick translate) -->
<div class="uncloseai" data-features="smart-translate"></div>
<!-- Both options together -->
<div class="uncloseai" data-features="translate,smart-translate"></div>🎯 Live Examples
🌐 Translation Modal
Traditional modal interface for translations:
Features:
- 📝 Custom text translation
- 📄 Full page translation
- ⚙️ Advanced options
- 📋 Copy translated content
🤖 Smart AI Dropdown (New!)
AI-powered quick translation:
✨ Smart Features:
- 🤖 AI detects page language automatically
- 🌐 Triple format: code • English • Native (es • Spanish • Español)
- 📋 Quick dropdown selection
- 🚀 Opens in new tab instantly
- 🎨 Dark/light mode themed
9. 🌐 Omni-Directional Translation
Translate page content or custom text into 20+ languages with code block preservation:
📄 Code Example
Translation Code
Add translation capabilities to any interface:
// Import translation functions
import { translateText, translateCurrentPage, SUPPORTED_LANGUAGES } from './src/translation.js';
// Translate custom text
const translatedText = await translateText('Hello world!', 'es'); // Spanish
// Translate current page content
const translatedPage = await translateCurrentPage('fr'); // French
// Available languages
console.log(SUPPORTED_LANGUAGES);
// { 'en': 'English', 'es': 'Spanish', 'fr': 'French', ... }🎯 Live Example
Try the translation feature below - it preserves code blocks and formatting:
💡 Tip: The translation feature automatically detects and preserves:
- Code blocks (```code```)
- Inline code (`code`)
- URLs and links
- HTML tags
- Technical formatting
10. 🛠️ Direct API Usage
Call uncloseai.js functions from your own JavaScript:
📄 Code Example
Direct API Code
Call uncloseai.js functions from your own JavaScript:
// Send a message to AI
for await (const chunk of sendMessage('Your question here')) {
console.log(chunk);
}
// Convert text to speech
const result = await speakText('Hello world', 'alloy', 0.9);
document.body.appendChild(result.audio);
// Upload and analyze files
const response = await uploadFile(fileInput.files[0]);
console.log(response);
// Read page content with AI
await readPageWithHermes();🎯 Live Example
The custom API examples below demonstrate direct API usage:
11. 🎨 Custom API Examples
Build your own interface using uncloseai.js functions:
🎯 Live Examples
Try these custom implementations built with the Direct API:
💬 Custom AI Chat
Your own chat interface:
🔊 Custom Text-to-Speech
Your own TTS interface:
📁 Custom File Analysis
Your own file upload interface:
📖 Custom Page Analysis
Analyze page content with custom prompts:
🌐 Custom Translation
Translate text with code preservation: