# 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.

Get Browser Toys

## 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.uncloseai` to 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.