diff --git a/demo.html b/demo.html
index ab2b3a7..589f898 100644
--- a/demo.html
+++ b/demo.html
@@ -64,93 +64,215 @@
     </header>
 
     <main>
-        <h2>Demo!</h2>
+        <h2>Hermes AI Integration Demo</h2>
+        <p>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.</p>
 
-        <h3>Class-Based Integration Examples</h3>
-        <p>You can now embed AI features directly into your HTML using CSS classes and data attributes:</p>
-        
-        <h4>Full AI Interface</h4>
-        <p>Add a complete AI chat interface with all features:</p>
-        <div class="uncloseai" data-features="full"></div>
-        
-        <h4>Custom Feature Selection</h4>
-        <p>Choose specific features you want:</p>
-        
-        <h5>Chat Only</h5>
-        <div class="uncloseai" data-features="chat"></div>
-        
-        <h5>Buttons Only (TTS + Upload + Read)</h5>
-        <div class="uncloseai" data-features="tts,upload,read"></div>
-        
-        <h5>TTS Only</h5>
-        <div class="uncloseai" data-features="tts"></div>
+        <!-- Integration Code Examples -->
+        <section>
+            <h3>📝 Integration Code Examples</h3>
+            <p>Copy these code snippets to add AI features to your website:</p>
+            
+            <details>
+                <summary><strong>Basic Installation</strong></summary>
+                <p>Add this single line to your HTML to get a floating AI button:</p>
+                <pre><code class="html">&lt;script src="https://uncloseai.com/uncloseai.js" type="module"&gt;&lt;/script&gt;</code></pre>
+            </details>
+            
+            <details>
+                <summary><strong>Configuration Options</strong></summary>
+                <p>Customize the behavior before loading the script:</p>
+                <pre><code class="html">&lt;script&gt;
+    // Disable custom styling (use your CSS framework)
+    window.UNCLOSEAI_CUSTOM_STYLING = false;
+    
+    // Disable floating button (API functions only)
+    window.UNCLOSEAI_FLOATING_BUTTON = false;
+&lt;/script&gt;
+&lt;script src="https://uncloseai.com/uncloseai.js" type="module"&gt;&lt;/script&gt;</code></pre>
+            </details>
+            
+            <details>
+                <summary><strong>Class-Based Integration</strong></summary>
+                <p>Embed AI features directly into your HTML:</p>
+                <pre><code class="html">&lt;!-- Full interface with all features --&gt;
+&lt;div class="uncloseai" data-features="full"&gt;&lt;/div&gt;
 
-        <h3>Individual Function Examples</h3>
-        <p>You can also call uncloseai.js functions directly from your own buttons and interfaces:</p>
-        
-        <h4>Direct AI Chat</h4>
-        <button onclick="directChatExample()">💬 Ask AI about this page</button>
-        <div id="direct-chat-result" style="margin: 10px 0; padding: 10px; background: rgba(0,0,0,0.05); border-radius: 5px; display: none;"></div>
-        
-        <h4>Text-to-Speech</h4>
-        <textarea id="tts-text" placeholder="Enter text to convert to speech..." style="width: 100%; height: 80px; margin: 5px 0;"></textarea>
-        <button onclick="directTTSExample()">🔊 Convert to Speech</button>
-        <div id="tts-result" style="margin: 10px 0;"></div>
-        
-        <h4>Page Reading</h4>
-        <button onclick="readPageWithHermes()">📖 Read this page with AI</button>
-        
-        <h4>File Upload (if you have files)</h4>
-        <input type="file" id="demo-file-input" style="margin: 5px 0;">
-        <button onclick="directFileExample()">📁 Upload & Analyze File</button>
-        <div id="file-result" style="margin: 10px 0; padding: 10px; background: rgba(0,0,0,0.05); border-radius: 5px; display: none;"></div>
+&lt;!-- Chat interface only --&gt;
+&lt;div class="uncloseai" data-features="chat"&gt;&lt;/div&gt;
+
+&lt;!-- Specific features --&gt;
+&lt;div class="uncloseai" data-features="tts,upload,read"&gt;&lt;/div&gt;
+&lt;div class="uncloseai" data-features="tts"&gt;&lt;/div&gt;</code></pre>
+            </details>
+            
+            <details>
+                <summary><strong>Direct API Usage</strong></summary>
+                <p>Call uncloseai.js functions from your own JavaScript:</p>
+                <pre><code class="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();</code></pre>
+            </details>
+        </section>
+
+        <!-- Live Demonstrations -->
+        <section>
+            <h3>🎯 Live Demonstrations</h3>
+            <p>Try each integration method below. All examples work independently:</p>
+            
+            <h4>1. Full AI Interface</h4>
+            <p>Complete AI chat with all features enabled:</p>
+            <div style="border: 2px dashed #ccc; padding: 20px; margin: 15px 0; border-radius: 8px;">
+                <div class="uncloseai" data-features="full" id="demo-full"></div>
+            </div>
+            
+            <h4>2. Chat Interface Only</h4>
+            <p>Pure chat interface without extra buttons:</p>
+            <div style="border: 2px dashed #ccc; padding: 20px; margin: 15px 0; border-radius: 8px;">
+                <div class="uncloseai" data-features="chat" id="demo-chat"></div>
+            </div>
+            
+            <h4>3. Feature Buttons Only</h4>
+            <p>TTS, Upload, and Read buttons without chat:</p>
+            <div style="border: 2px dashed #ccc; padding: 20px; margin: 15px 0; border-radius: 8px;">
+                <div class="uncloseai" data-features="tts,upload,read" id="demo-buttons"></div>
+            </div>
+            
+            <h4>4. Text-to-Speech Only</h4>
+            <p>Just the TTS functionality:</p>
+            <div style="border: 2px dashed #ccc; padding: 20px; margin: 15px 0; border-radius: 8px;">
+                <div class="uncloseai" data-features="tts" id="demo-tts"></div>
+            </div>
+        </section>
+
+        <!-- Custom API Examples -->
+        <section>
+            <h3>🔧 Custom API Integration Examples</h3>
+            <p>Build your own interface using uncloseai.js functions:</p>
+            
+            <div style="display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));">
+                <!-- Custom Chat Example -->
+                <div style="border: 1px solid #ddd; padding: 20px; border-radius: 8px;">
+                    <h5>💬 Custom AI Chat</h5>
+                    <p>Your own chat interface:</p>
+                    <div style="border: 1px solid #eee; height: 200px; padding: 10px; margin: 10px 0; overflow-y: auto; background: #fafafa;" id="custom-chat-display"></div>
+                    <input type="text" id="custom-chat-input" placeholder="Ask anything..." style="width: 100%; margin: 5px 0;">
+                    <button onclick="customChatExample()" style="width: 100%;">Send Message</button>
+                </div>
+                
+                <!-- Custom TTS Example -->
+                <div style="border: 1px solid #ddd; padding: 20px; border-radius: 8px;">
+                    <h5>🔊 Custom Text-to-Speech</h5>
+                    <p>Your own TTS interface:</p>
+                    <textarea id="custom-tts-text" placeholder="Enter text to speak..." style="width: 100%; height: 80px; margin: 5px 0;"></textarea>
+                    <select id="voice-select" style="width: 100%; margin: 5px 0;">
+                        <option value="alloy">Alloy</option>
+                        <option value="echo">Echo</option>
+                        <option value="fable">Fable</option>
+                        <option value="onyx">Onyx</option>
+                        <option value="nova">Nova</option>
+                        <option value="shimmer">Shimmer</option>
+                    </select>
+                    <button onclick="customTTSExample()" style="width: 100%;">Generate Speech</button>
+                    <div id="custom-tts-result" style="margin: 10px 0;"></div>
+                </div>
+                
+                <!-- Custom File Upload Example -->
+                <div style="border: 1px solid #ddd; padding: 20px; border-radius: 8px;">
+                    <h5>📁 Custom File Analysis</h5>
+                    <p>Your own file upload interface:</p>
+                    <input type="file" id="custom-file-input" style="width: 100%; margin: 5px 0;">
+                    <button onclick="customFileExample()" style="width: 100%;">Analyze File</button>
+                    <div id="custom-file-result" style="margin: 10px 0; padding: 10px; background: #f9f9f9; border-radius: 5px; display: none;"></div>
+                </div>
+                
+                <!-- Page Analysis Example -->
+                <div style="border: 1px solid #ddd; padding: 20px; border-radius: 8px;">
+                    <h5>📖 Custom Page Analysis</h5>
+                    <p>Analyze page content with custom prompts:</p>
+                    <input type="text" id="page-analysis-prompt" placeholder="What would you like to know about this page?" style="width: 100%; margin: 5px 0;">
+                    <button onclick="customPageAnalysis()" style="width: 100%;">Analyze Page</button>
+                    <div id="page-analysis-result" style="margin: 10px 0; padding: 10px; background: #f9f9f9; border-radius: 5px; display: none;"></div>
+                </div>
+            </div>
+        </section>
 
         <script>
-        // Example functions showing direct API usage
-        async function directChatExample() {
-            const resultDiv = document.getElementById('direct-chat-result');
-            resultDiv.style.display = 'block';
-            resultDiv.innerHTML = '<em>AI is thinking...</em>';
+        // Custom chat implementation with isolated state
+        async function customChatExample() {
+            const input = document.getElementById('custom-chat-input');
+            const display = document.getElementById('custom-chat-display');
+            const message = input.value.trim();
+            
+            if (!message) return;
+            
+            // Add user message
+            display.innerHTML += `<div style="margin: 5px 0; padding: 5px; background: #e3f2fd; border-radius: 3px;"><strong>You:</strong> ${message}</div>`;
+            input.value = '';
+            
+            // Add AI thinking indicator
+            const thinkingDiv = document.createElement('div');
+            thinkingDiv.style.cssText = 'margin: 5px 0; padding: 5px; background: #f5f5f5; border-radius: 3px;';
+            thinkingDiv.innerHTML = '<strong>Hermes:</strong> <em>thinking...</em>';
+            display.appendChild(thinkingDiv);
+            display.scrollTop = display.scrollHeight;
             
             try {
                 let response = '';
-                for await (const chunk of sendMessage('Tell me the main purpose of this page in 2 sentences')) {
+                for await (const chunk of sendMessage(message)) {
                     response += chunk;
-                    resultDiv.innerHTML = `<strong>AI Response:</strong> ${response}`;
+                    thinkingDiv.innerHTML = `<strong>Hermes:</strong> ${response}`;
+                    display.scrollTop = display.scrollHeight;
                 }
             } catch (error) {
-                resultDiv.innerHTML = '<strong>Error:</strong> Could not get AI response. ' + error.message;
+                thinkingDiv.innerHTML = `<strong>Error:</strong> ${error.message}`;
             }
         }
         
-        async function directTTSExample() {
-            const text = document.getElementById('tts-text').value.trim();
-            const resultDiv = document.getElementById('tts-result');
+        // Custom TTS with voice selection
+        async function customTTSExample() {
+            const text = document.getElementById('custom-tts-text').value.trim();
+            const voice = document.getElementById('voice-select').value;
+            const resultDiv = document.getElementById('custom-tts-result');
             
             if (!text) {
                 alert('Please enter some text first!');
                 return;
             }
             
-            resultDiv.innerHTML = '<em>Converting to speech...</em>';
+            resultDiv.innerHTML = '<em>Generating speech...</em>';
             
             try {
-                const result = await speakText(text, 'alloy', 0.9);
+                const result = await speakText(text, voice, 1.0);
                 resultDiv.innerHTML = `
-                    <button onclick="this.previousElementSibling.play()" style="margin: 5px;">▶️ Play</button>
-                    <button onclick="this.previousElementSibling.previousElementSibling.pause()" style="margin: 5px;">⏸️ Pause</button>
-                    <button onclick="downloadAudio()" style="margin: 5px;">💾 Download</button>
+                    <div style="margin: 10px 0;">
+                        <button onclick="this.parentElement.previousElementSibling.play()" style="margin: 2px;">▶️ Play</button>
+                        <button onclick="this.parentElement.previousElementSibling.pause()" style="margin: 2px;">⏸️ Pause</button>
+                        <button onclick="downloadCustomAudio()" style="margin: 2px;">💾 Download</button>
+                    </div>
                 `;
                 resultDiv.insertBefore(result.audio, resultDiv.firstChild);
-                window.currentAudioBlob = result.blob; // Store for download
+                window.customAudioBlob = result.blob;
             } catch (error) {
-                resultDiv.innerHTML = '<strong>Error:</strong> Could not convert to speech. ' + error.message;
+                resultDiv.innerHTML = `<strong>Error:</strong> ${error.message}`;
             }
         }
         
-        async function directFileExample() {
-            const fileInput = document.getElementById('demo-file-input');
-            const resultDiv = document.getElementById('file-result');
+        // Custom file upload with isolated state
+        async function customFileExample() {
+            const fileInput = document.getElementById('custom-file-input');
+            const resultDiv = document.getElementById('custom-file-result');
             
             if (!fileInput.files[0]) {
                 alert('Please select a file first!');
@@ -158,29 +280,75 @@
             }
             
             resultDiv.style.display = 'block';
-            resultDiv.innerHTML = '<em>Uploading and analyzing file...</em>';
+            resultDiv.innerHTML = '<em>Analyzing file...</em>';
             
             try {
-                showProgressIndicator('Processing file...');
                 const response = await uploadFile(fileInput.files[0]);
-                hideProgressIndicator();
-                
-                resultDiv.innerHTML = `<strong>File Analysis:</strong><br>${response}`;
-                fileInput.value = ''; // Clear the input
+                resultDiv.innerHTML = `<strong>Analysis Result:</strong><br><div style="white-space: pre-wrap;">${response}</div>`;
+                fileInput.value = '';
             } catch (error) {
-                hideProgressIndicator();
-                resultDiv.innerHTML = '<strong>Error:</strong> Could not process file. ' + error.message;
+                resultDiv.innerHTML = `<strong>Error:</strong> ${error.message}`;
             }
         }
         
-        function downloadAudio() {
-            if (window.currentAudioBlob) {
+        // Custom page analysis with user prompt
+        async function customPageAnalysis() {
+            const promptInput = document.getElementById('page-analysis-prompt');
+            const resultDiv = document.getElementById('page-analysis-result');
+            const prompt = promptInput.value.trim();
+            
+            if (!prompt) {
+                alert('Please enter a question about this page!');
+                return;
+            }
+            
+            resultDiv.style.display = 'block';
+            resultDiv.innerHTML = '<em>Analyzing page...</em>';
+            
+            try {
+                const pageContent = document.body.innerText.substring(0, 3000);
+                const fullPrompt = `Based on this page content: "${pageContent}"\n\nUser question: ${prompt}`;
+                
+                let response = '';
+                for await (const chunk of sendMessage(fullPrompt)) {
+                    response += chunk;
+                    resultDiv.innerHTML = `<strong>Analysis:</strong><br><div style="white-space: pre-wrap;">${response}</div>`;
+                }
+            } catch (error) {
+                resultDiv.innerHTML = `<strong>Error:</strong> ${error.message}`;
+            }
+        }
+        
+        // Utility functions
+        function downloadCustomAudio() {
+            if (window.customAudioBlob) {
                 const a = document.createElement('a');
-                a.href = URL.createObjectURL(window.currentAudioBlob);
-                a.download = `tts-audio-${Date.now()}.mp3`;
+                a.href = URL.createObjectURL(window.customAudioBlob);
+                a.download = `custom-tts-${Date.now()}.mp3`;
                 a.click();
             }
         }
+        
+        // Add Enter key support for chat input
+        document.addEventListener('DOMContentLoaded', function() {
+            const chatInput = document.getElementById('custom-chat-input');
+            if (chatInput) {
+                chatInput.addEventListener('keypress', function(e) {
+                    if (e.key === 'Enter') {
+                        customChatExample();
+                    }
+                });
+            }
+            
+            const pageInput = document.getElementById('page-analysis-prompt');
+            if (pageInput) {
+                pageInput.addEventListener('keypress', function(e) {
+                    if (e.key === 'Enter') {
+                        customPageAnalysis();
+                    }
+                });
+            }
+        });
         </script>
 
     </main>