uncloseai.
uncloseai.js: Add Machine Learning to Any Website
uncloseai.js
uncloseai.js is a single-file JavaScript library that adds a floating chat button to any website. One script tag gives your page a full machine learning interface: streaming chat, text-to-speech, page reading, translation, file upload, encrypted settings, and 19 languages. No server, no backend, no API keys.
The core technique is Reverse Retrieval Augmented Generation (Reverse RAG): instead of a server fetching documents to stuff into a prompt, the client extracts live page content and injects it directly into the conversation context. The model always has the freshest data from the page you're viewing, which lets small models punch way above their weight class. No vector database, no embeddings, no indexing pipeline. Just real-time content from the DOM, straight into the prompt. Read the whitepaper.
Works with static sites, CDNs, GitHub Pages, and any hosting that serves HTML. Every feature runs client-side against free community inference endpoints.
Installation
Add one script tag to your HTML:
<script src="https://uncloseai.com/uncloseai.js" type="module"></script>
A floating uncloseai. button appears in the bottom-right corner. Click it to open the modal.
Features
Streaming Chat
- Real-time streaming responses via Server-Sent Events (SSE)
- Markdown rendering with full syntax support
- Code blocks with syntax highlighting (highlight.js, 200+ languages)
- Copy-to-clipboard button on every code block
- Per-page conversation history, encrypted and persisted
- Multi-model support with dynamic model discovery from endpoints
- Reverse RAG: live page content extracted and injected into every conversation for context-aware responses
Text-to-Speech
- 42+ voices across multiple TTS models (standard, HD, cloned)
- Speak any message, paste arbitrary text, or read the whole page aloud
- Adjustable playback speed
- Buffered or streaming audio modes
- Download generated audio as MP3 or WebM+Opus (auto-detected per browser)
- Per-message speak and download buttons on every chat bubble
Translation
- Translate the current page to any of 19 supported languages
- Translate arbitrary text or remote URIs
- Smart Translate widget: one-click dropdown with language picker
- Opens translated content in a new browser tab
Page Reading (Reverse RAG)
- Extracts main content from any webpage intelligently, straight from the live DOM
- Injects page content directly into the conversation context (Reverse RAG): no server-side retrieval, no vector store, no embeddings
- Small models get the full picture of whatever page you're on, producing answers that rival much larger models
- Synthesizes a short summary with the machine learning model
- Reads the summary aloud with selected voice
- Play, pause, and download the audio
Vault Encryption
- All settings and conversations encrypted with AES-256 behind a user-chosen password
- Per-device cryptographic salt for additional security
- Per-origin vaults: each subdomain gets its own encrypted store with its own password
- Session persistence: stays unlocked across page navigations until you lock
- Encrypts: conversation history, model/voice preferences, custom API keys, language settings
- Explicit lock button clears all decrypted data from memory and DOM
File Upload
- Upload files for machine learning analysis
- Progress indicator during processing
- Results displayed inline in the chat
Code Execution
- Optional integration with unsandbox.com for running code
- Configure with your unsandbox API keys in settings
- Execute machine learning generated code in a sandboxed environment
19 Languages
The entire UI (buttons, labels, prompts, errors, placeholders) is translated into 19 languages. The model also responds in the selected language.
Arabic, Bengali, Chinese (Simplified), Chinese (Traditional), English, French, German, Hindi, Indonesian, Japanese, Korean, Marathi, Portuguese, Russian, Spanish, Swahili, Telugu, Turkish, Urdu.
Theme Support
- Automatic dark/light detection from OS preference
- Dynamic color adaptation to host page
- Works with PicoCSS, or ships its own built-in stylesheet
- Mobile-responsive layout with media queries
Message Actions
Every chat message (user and model) has action buttons:
- 📋 Copy Raw: copy as plain markdown
- 📄 Copy HTML: copy as rendered HTML
- 🔊 Speak: synthesize the message as audio
- 💾 Download: save the audio file
- 🗑️ Delete: remove the message from history
Settings Panel
Click the gear icon (⚙️) in the modal header to open settings. All settings are encrypted in your vault.
Model Selection
Choose from dynamically discovered models. The dropdown shows the endpoint and model name. Models are auto-discovered by querying /v1/models on each configured endpoint.
Voice Selection
42+ voices organized by TTS model. Voices are discovered dynamically from the speech endpoint. Includes standard, HD, and cloned voice options.
Language
Switch the UI and model response language. Changes take effect immediately across all text.
Custom API Endpoint
Point uncloseai.js at your own OpenAI-compatible endpoint (vLLM, Ollama, or any compatible server). Configure a base URI and API key. Built-in models remain available alongside your custom endpoint.
Code Execution (Unsandbox)
Enable code execution by providing your unsandbox.com API keys. When enabled, machine learning generated code can be executed in a sandboxed environment.
Configuration
Customize behavior by setting window variables before loading the script:
<script>
// Disable built-in styling to use your own CSS framework
window.UNCLOSEAI_CUSTOM_STYLING = false;
// Hide the floating button (use the JS API instead)
window.UNCLOSEAI_FLOATING_BUTTON = false;
// Force the UI to a specific language
window.UNCLOSEAI_LANGUAGE = "es";
// Add custom instructions to the system prompt
window.UNCLOSEAI_SYSTEM_PROMPT = "You are a helpful coding assistant.";
// Replace the default system prompt entirely
window.UNCLOSEAI_SYSTEM_PROMPT_REPLACE = true;
// Skip full initialization (floating button only, for preview iframes)
window.UNCLOSEAI_SKIP_INIT = true;
</script>
<script src="https://uncloseai.com/uncloseai.js" type="module"></script>
Configuration Reference
| Variable | Type | Default | Description |
|---|---|---|---|
UNCLOSEAI_CUSTOM_STYLING |
Boolean | true |
Enable built-in CSS. Set false to use your own CSS framework (PicoCSS, Tailwind, etc.). |
UNCLOSEAI_FLOATING_BUTTON |
Boolean | true |
Show the floating button. Set false to hide it and trigger the modal programmatically. |
UNCLOSEAI_LANGUAGE |
String | null |
Force the UI and model responses to a specific language. Overrides user preference. Examples: "en", "es", "ja", "zh". |
UNCLOSEAI_SYSTEM_PROMPT |
String | null |
Custom instructions for the model. Appended to the default prompt, or replaces it if SYSTEM_PROMPT_REPLACE is true. |
UNCLOSEAI_SYSTEM_PROMPT_REPLACE |
Boolean | false |
When true, the custom prompt completely replaces the default system prompt instead of appending. |
UNCLOSEAI_SKIP_INIT |
Boolean | false |
Skip full initialization. Creates the floating button only, skipping model loading and vault init. Used for preview iframes. |
JavaScript API
All functions are available on the window.uncloseai namespace and as ES module exports.
Modal Control
// Toggle the chat modal open/closed
await window.uncloseai.toggleUncloseaiEmbeddedModal();
// Open the TTS modal directly
window.uncloseai.openTTSModal();
// Open the translation modal directly
window.uncloseai.openTranslateModal();
Chat
// Send a message and stream the response
for await (const chunk of window.uncloseai.sendMessage("Hello")) {
process.stdout.write(chunk); // each chunk is a text fragment
}
// Get the currently selected model
const model = window.uncloseai.getSelectedModel();
// Get the endpoint for the current model
const endpoint = window.uncloseai.getSelectedModelEndpoint();
Text-to-Speech
// Speak text with the default voice
await window.uncloseai.speakText("Hello world");
// Speak text from a DOM element
window.uncloseai.handleTTSFromElement(document.querySelector('.content'));
Page Reading
// Extract and read the current page content
await window.uncloseai.readPageWithHermes();
// Extract page content as structured text
const content = window.uncloseai.extractWebpageContent();
Translation
// Trigger smart translate on the page
window.uncloseai.handleSmartTranslate();
Vault
// Check if vault is unlocked
window.uncloseai.UncloseVault.isUnlocked();
// Check if a vault exists for this origin
window.uncloseai.UncloseVault.hasVault();
// Get a setting from the vault
window.uncloseai.UncloseVault.get("selectedModel");
// Lock the vault (clears decrypted data from memory)
window.uncloseai.UncloseVault.lock();
Widget Library
Create embedded interfaces inside your page instead of using the floating button.
Full Interface
Embed a complete chat interface with all features into any container:
<div class="uncloseai" data-type="full"></div>
Custom Interface
Pick specific features to include:
<div class="uncloseai"
data-type="custom"
data-features="chat,tts,translate,smart-translate,upload,read">
</div>
Available features for data-features:
| Feature | Description |
|---|---|
chat |
Chat input and message display |
tts |
Text-to-speech button |
translate |
Translation button |
smart-translate |
One-click smart translate dropdown |
upload |
File upload for analysis |
read |
Read page aloud button |
Browser Toys
Don't own the site? Install a browser toy to get the uncloseai. button on every page you visit. Lightweight extensions that inject this same script tag into every page. No server, no accounts. Chat history stays in your browser's localStorage, scoped per domain.
Available for Chrome, Edge, Firefox, Safari, Brave, Vivaldi, and Arc.
Technical Details
- ES6 Modules: loaded with
type="module", tree-shakeable exports - Fetch API + ReadableStream: for SSE streaming responses
- CryptoJS: AES-256 encryption for vault (loaded dynamically)
- marked.js: markdown rendering
- highlight.js: code syntax highlighting
- CSS Custom Properties: theme adaptation
- Duplicate Load Guard: safe to include multiple times (browser toy + native)
- Namespace Isolation: all globals under
window.uncloseaito avoid clobbering host page functions
Token and Context Management
uncloseai.js handles token budgets automatically. It reads max_model_len from each endpoint's /v1/models response, estimates input tokens (~4 chars per token for English), and reserves appropriate context buffers. Large models (32k+ tokens) get a 10% buffer, smaller models get a fixed reserve.
Battery-Powered Devices
uncloseai.js offloads all inference to community GPU servers. Battery-powered devices (phones, tablets, laptops) get full machine learning capabilities without draining power or running models locally. No API keys to manage, no credentials to secure on the client side.
Open Source
uncloseai.js is public domain software. Free to use, modify, and distribute for any purpose.
Source: git.unturf.com/engineering/unturf/uncloseai.com
Try It
This page has uncloseai.js installed. Click the floating uncloseai. button in the bottom-right corner to open the full modal with all features described above.