docs.html (17826B)
1 <!DOCTYPE html> 2 <html lang="en" class="dark"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <title>Ada AI - Documentation</title> 7 <link rel="icon" type="image/png" href="logo.png"> 8 <script src="https://cdn.tailwindcss.com"></script> 9 <script> 10 tailwind.config = { 11 darkMode: 'class', 12 theme: { 13 extend: { 14 colors: { 15 gemini: { 16 bg: '#131314', 17 surface: '#1E1F20', 18 text: '#E3E3E3', 19 blue: '#A8C7FA' 20 } 21 }, 22 fontFamily: { 23 sans: ['Inter', 'sans-serif'], 24 mono: ['JetBrains Mono', 'monospace'], 25 } 26 } 27 } 28 } 29 </script> 30 <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet"> 31 </head> 32 <body class="bg-gemini-bg text-gemini-text font-sans p-6 md:p-12 leading-relaxed selection:bg-gemini-blue selection:text-black"> 33 <div class="max-w-4xl mx-auto"> 34 <!-- Header --> 35 <header class="mb-12 border-b border-gray-800 pb-8"> 36 <a href="/" class="inline-flex items-center text-gemini-blue hover:text-white transition-colors mb-6 font-medium text-sm"> 37 <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18"></path></svg> 38 Back to App 39 </a> 40 <h1 class="text-4xl md:text-5xl font-bold text-white mb-4 tracking-tight">Ada AI Documentation</h1> 41 <p class="text-xl text-gray-400 font-light">Comprehensive guide to the architecture, usage, and contribution workflow for the Ada AI Coding Assistant.</p> 42 </header> 43 44 <div class="grid grid-cols-1 md:grid-cols-4 gap-8"> 45 <!-- Sidebar Nav --> 46 <nav class="hidden md:block col-span-1 space-y-1 sticky top-8 h-fit"> 47 <a href="#introduction" class="block py-2 px-3 rounded-lg hover:bg-gemini-surface text-gray-400 hover:text-white transition-colors text-sm">1. Introduction</a> 48 <a href="#how-it-works" class="block py-2 px-3 rounded-lg hover:bg-gemini-surface text-gray-400 hover:text-white transition-colors text-sm">2. System Architecture</a> 49 <a href="#data-privacy" class="block py-2 px-3 rounded-lg hover:bg-gemini-surface text-gray-400 hover:text-white transition-colors text-sm">3. Data & Privacy</a> 50 <a href="#features" class="block py-2 px-3 rounded-lg hover:bg-gemini-surface text-gray-400 hover:text-white transition-colors text-sm">4. Features Guide</a> 51 <a href="#contributing" class="block py-2 px-3 rounded-lg hover:bg-gemini-surface text-gray-400 hover:text-white transition-colors text-sm">5. Contributing</a> 52 <a href="#support" class="block py-2 px-3 rounded-lg hover:bg-gemini-surface text-gray-400 hover:text-white transition-colors text-sm">6. Support</a> 53 </nav> 54 55 <!-- Content --> 56 <div class="col-span-1 md:col-span-3 space-y-16"> 57 58 <!-- Section 1: Introduction --> 59 <section id="introduction"> 60 <h2 class="text-2xl font-semibold text-white mb-6 flex items-center"> 61 <span class="bg-gemini-surface w-8 h-8 rounded-full flex items-center justify-center text-sm mr-3 border border-gray-700">1</span> 62 Introduction 63 </h2> 64 <p class="text-gray-300 mb-4"> 65 Ada AI is a specialized coding assistant built to provide students and developers with accurate, context-aware debugging and refactoring help. Unlike generic AI chatbots, Ada is engineered specifically for software development workflows, integrating a real-time code editor directly into the conversation loop. 66 </p> 67 <div class="bg-gemini-surface border-l-4 border-gemini-blue p-4 rounded-r-lg"> 68 <p class="text-sm text-gray-300"><strong>Core Philosophy:</strong> Simplicity, Speed, and Strict Data Segregation. Ada connects you to Google's Gemini 2.5 Flash model while keeping your data isolated within your own Firebase document scope.</p> 69 </div> 70 </section> 71 72 <!-- Section 2: How It Works --> 73 <section id="how-it-works"> 74 <h2 class="text-2xl font-semibold text-white mb-6 flex items-center"> 75 <span class="bg-gemini-surface w-8 h-8 rounded-full flex items-center justify-center text-sm mr-3 border border-gray-700">2</span> 76 System Architecture 77 </h2> 78 79 <div class="space-y-8"> 80 <div> 81 <h3 class="text-lg font-medium text-white mb-3">Authentication Layer</h3> 82 <p class="text-gray-400 text-sm mb-3"> 83 Security is handled via <span class="text-white">Google Firebase Authentication</span>. We support: 84 </p> 85 <ul class="list-disc pl-5 space-y-2 text-sm text-gray-400"> 86 <li><strong>Google OAuth:</strong> One-click secure sign-in.</li> 87 <li><strong>Email/Password:</strong> Traditional credential access.</li> 88 </ul> 89 <p class="text-gray-400 text-sm mt-3"> 90 Upon login, a unique User ID (UID) is generated. This UID acts as the primary key for all database operations, ensuring you never access data belonging to another user. 91 </p> 92 </div> 93 94 <div> 95 <h3 class="text-lg font-medium text-white mb-3">Request Lifecycle</h3> 96 <ol class="list-decimal pl-5 space-y-4 text-sm text-gray-400"> 97 <li> 98 <strong class="text-white">Input Capture:</strong> The frontend captures your message, active code editor content, and any uploaded file context. 99 </li> 100 <li> 101 <strong class="text-white">Secure Transmission:</strong> Data is sent to our Python Flask backend (hosted on Render) over HTTPS, accompanied by your Firebase ID Token. 102 </li> 103 <li> 104 <strong class="text-white">Server-Side Verification:</strong> The backend validates your ID Token using the Firebase Admin SDK before processing any request. 105 </li> 106 <li> 107 <strong class="text-white">AI Processing:</strong> Validated requests are forwarded to the Gemini 2.5 API. The system prompt enforces a "Coding Assistant Only" persona. 108 </li> 109 <li> 110 <strong class="text-white">Response Streaming:</strong> The AI response is streamed back to your browser in real-time chunks, reducing perceived latency. 111 </li> 112 </ol> 113 </div> 114 </div> 115 </section> 116 117 <!-- Section 3: Data & Privacy --> 118 <section id="data-privacy"> 119 <h2 class="text-2xl font-semibold text-white mb-6 flex items-center"> 120 <span class="bg-gemini-surface w-8 h-8 rounded-full flex items-center justify-center text-sm mr-3 border border-gray-700">3</span> 121 Data Storage & Privacy 122 </h2> 123 <p class="text-gray-300 mb-6"> 124 We use <span class="text-white">Google Cloud Firestore</span> (NoSQL) for persistence. Your data is structured to maximize privacy and ease of deletion. 125 </p> 126 127 <div class="grid md:grid-cols-2 gap-6 mb-6"> 128 <div class="bg-gemini-surface p-5 rounded-xl border border-gray-800"> 129 <h4 class="text-white font-medium mb-2">Data Structure</h4> 130 <code class="text-xs font-mono text-blue-300 block mb-2">/users/{userId}/chats/{chatId}</code> 131 <p class="text-xs text-gray-400">All your chats live exclusively under your user document. No data is stored in global collections.</p> 132 </div> 133 <div class="bg-gemini-surface p-5 rounded-xl border border-gray-800"> 134 <h4 class="text-white font-medium mb-2">Deletion Policy</h4> 135 <p class="text-xs text-gray-400 mb-2">You have full control over your data:</p> 136 <ul class="text-xs text-gray-400 list-disc pl-4 space-y-1"> 137 <li><strong>Single Chat:</strong> Instantly removed via the context menu.</li> 138 <li><strong>Clear History:</strong> A batch operation wipes your entire `/chats` subcollection.</li> 139 </ul> 140 </div> 141 </div> 142 </section> 143 144 <!-- Section 4: Features Guide --> 145 <section id="features"> 146 <h2 class="text-2xl font-semibold text-white mb-6 flex items-center"> 147 <span class="bg-gemini-surface w-8 h-8 rounded-full flex items-center justify-center text-sm mr-3 border border-gray-700">4</span> 148 Key Features 149 </h2> 150 151 <div class="space-y-6"> 152 <div class="group"> 153 <h3 class="text-lg font-medium text-white mb-2 group-hover:text-gemini-blue transition-colors">Smart Code Artifacts</h3> 154 <p class="text-sm text-gray-400"> 155 When Ada writes code, it automatically detects the language and extracts it into the dedicated <strong>Artifact Panel</strong> on the right. This keeps your chat clean and gives you a dedicated workspace to view, copy, or format the code. 156 </p> 157 </div> 158 159 <div class="group"> 160 <h3 class="text-lg font-medium text-white mb-2 group-hover:text-gemini-blue transition-colors">Chat Sharing</h3> 161 <p class="text-sm text-gray-400"> 162 Need to share a solution? You can generate a unique link for any chat conversation. 163 </p> 164 <ul class="list-disc pl-5 mt-2 space-y-1 text-sm text-gray-500"> 165 <li><strong>Public Access:</strong> Anyone with the link can view the conversation (Read-Only).</li> 166 <li><strong>Forking:</strong> If the viewer logs in, they can save a copy of the chat to their own history and continue the conversation.</li> 167 </ul> 168 </div> 169 170 <div class="group"> 171 <h3 class="text-lg font-medium text-white mb-2 group-hover:text-gemini-blue transition-colors">Export Data</h3> 172 <p class="text-sm text-gray-400"> 173 You are not locked in. Export any chat session as a JSON file or Markdown document for your own records or documentation. 174 </p> 175 </div> 176 </div> 177 </section> 178 179 <!-- Section 5: Contributing --> 180 <section id="contributing"> 181 <h2 class="text-2xl font-semibold text-white mb-6 flex items-center"> 182 <span class="bg-gemini-surface w-8 h-8 rounded-full flex items-center justify-center text-sm mr-3 border border-gray-700">5</span> 183 Contributing 184 </h2> 185 <p class="text-gray-300 mb-6"> 186 Ada AI is an open-source project licensed under MIT. We welcome pull requests, bug reports, and feature suggestions from the developer community. 187 </p> 188 189 <div class="bg-gemini-surface p-6 rounded-xl border border-gray-700"> 190 <h3 class="text-white font-medium mb-4">How to Contribute</h3> 191 <ol class="list-decimal pl-5 space-y-3 text-sm text-gray-300 mb-6"> 192 <li><strong>Fork the Repository:</strong> Go to our GitHub and click "Fork".</li> 193 <li><strong>Clone Locally:</strong> <code class="bg-black px-2 py-1 rounded text-gray-400 ml-2">git clone https://github.com/notamitgamer/ada-web.git</code></li> 194 <li><strong>Create Branch:</strong> <code class="bg-black px-2 py-1 rounded text-gray-400 ml-2">git checkout -b feature/amazing-feature</code></li> 195 <li><strong>Commit & Push:</strong> Make your changes and push to your fork.</li> 196 <li><strong>Pull Request:</strong> Open a PR describing your changes.</li> 197 </ol> 198 199 <a href="https://github.com/notamitgamer/ada-web" target="_blank" class="inline-flex items-center justify-center w-full md:w-auto bg-white text-black px-6 py-3 rounded-lg font-bold hover:bg-gray-200 transition-colors"> 200 <svg class="w-5 h-5 mr-2" fill="currentColor" viewBox="0 0 24 24"><path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/></svg> 201 View on GitHub 202 </a> 203 </div> 204 </section> 205 206 <!-- Section 6: Support --> 207 <section id="support"> 208 <h2 class="text-2xl font-semibold text-white mb-6 flex items-center"> 209 <span class="bg-gemini-surface w-8 h-8 rounded-full flex items-center justify-center text-sm mr-3 border border-gray-700">6</span> 210 Support & Contact 211 </h2> 212 <p class="text-gray-300 mb-6">Found a bug? Need a feature? Or just want to say hi? Here is how you can reach the developer.</p> 213 214 <div class="grid grid-cols-1 md:grid-cols-2 gap-4"> 215 <a href="mailto:amitdutta4255@gmail.com" class="group p-6 bg-gemini-surface border border-gray-800 rounded-xl hover:border-red-500/50 transition-all"> 216 <div class="flex items-center mb-2"> 217 <span class="w-2 h-2 rounded-full bg-red-500 mr-2"></span> 218 <h4 class="text-white font-medium group-hover:text-red-400">Critical Support</h4> 219 </div> 220 <p class="text-sm text-gray-400 mb-4">For urgent issues, security vulnerabilities, or major bugs.</p> 221 <span class="text-xs font-mono text-gray-500">amitdutta4255@gmail.com</span> 222 </a> 223 224 <a href="mailto:mail@amit.is-a.dev" class="group p-6 bg-gemini-surface border border-gray-800 rounded-xl hover:border-gemini-blue transition-all"> 225 <div class="flex items-center mb-2"> 226 <span class="w-2 h-2 rounded-full bg-blue-500 mr-2"></span> 227 <h4 class="text-white font-medium group-hover:text-gemini-blue">General Inquiries</h4> 228 </div> 229 <p class="text-sm text-gray-400 mb-4">For feedback, feature requests, or general questions.</p> 230 <span class="text-xs font-mono text-gray-500">mail@amit.is-a.dev</span> 231 </a> 232 </div> 233 </section> 234 235 </div> 236 </div> 237 238 <footer class="mt-20 pt-8 border-t border-gray-800 text-center"> 239 <p class="text-sm text-gray-500">© 2026 Ada AI. All rights reserved.</p> 240 <div class="mt-2 space-x-4"> 241 <a href="/terms.html" class="text-xs text-gray-600 hover:text-gray-300 transition-colors">Terms & Conditions</a> 242 <a href="https://github.com/notamitgamer/ada-web" class="text-xs text-gray-600 hover:text-gray-300 transition-colors">GitHub</a> 243 </div> 244 </footer> 245 </div> 246 </body> 247 </html>