dwn/ai-features.html at master

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>AI Integration - DWN Documentation</title>
     <link rel="stylesheet" href="css/style.css">
 </head>
 <body>
     <button class="mobile-menu-btn">Menu</button>
     <div class="layout">
         <aside class="sidebar">
             <div class="sidebar-header">
                 <h1>DWN</h1>
                 <span class="version">v1.0.0</span>
             </div>
             <div class="search-box">
                 <input type="text" class="search-input" placeholder="Search docs...">
             </div>
             <nav class="sidebar-nav">
                 <div class="nav-section">
                     <div class="nav-section-title">Getting Started</div>
                     <a href="index.html" class="nav-link">Introduction</a>
                     <a href="installation.html" class="nav-link">Installation</a>
                     <a href="quickstart.html" class="nav-link">Quick Start</a>
                 </div>
                 <div class="nav-section">
                     <div class="nav-section-title">User Guide</div>
                     <a href="features.html" class="nav-link">Features</a>
                     <a href="shortcuts.html" class="nav-link">Keyboard Shortcuts</a>
                     <a href="configuration.html" class="nav-link">Configuration</a>
                     <a href="layouts.html" class="nav-link">Layouts</a>
                     <a href="ai-features.html" class="nav-link active">AI Integration</a>
                 </div>
                 <div class="nav-section">
                     <div class="nav-section-title">API Reference</div>
                     <a href="api-overview.html" class="nav-link">API Overview</a>
                     <a href="api-reference.html" class="nav-link">API Reference</a>
                     <a href="api-examples.html" class="nav-link">API Examples</a>
                 </div>
                 <div class="nav-section">
                     <div class="nav-section-title">Advanced</div>
                     <a href="architecture.html" class="nav-link">Architecture</a>
                     <a href="building.html" class="nav-link">Building from Source</a>
                 </div>
             </nav>
         </aside>
         <main class="main-content">
             <div class="content">
                 <div class="page-header">
                     <h1>AI Integration</h1>
                     <p class="lead">Setup and usage of AI-powered features</p>
                 </div>
                 <div class="toc">
                     <div class="toc-title">On this page</div>
                     <ul class="toc-list">
                         <li><a href="#overview">Overview</a></li>
                         <li><a href="#setup">Setup</a></li>
                         <li><a href="#command-palette">AI Command Palette</a></li>
                         <li><a href="#context-analysis">Context Analysis</a></li>
                         <li><a href="#exa-search">Exa Semantic Search</a></li>
                         <li><a href="#configuration">Configuration</a></li>
                     </ul>
                 </div>
                 <h2 id="overview">Overview</h2>
                 <p>DWN includes optional AI integration for intelligent command execution and semantic web search. These features require API keys from external services.</p>
                 <div class="feature-grid">
                     <div class="feature-card">
                         <div class="feature-title">AI Command Palette</div>
                         <div class="feature-desc">Natural language commands via OpenRouter API. Ask AI to launch apps, answer questions, or perform tasks.</div>
                     </div>
                     <div class="feature-card">
                         <div class="feature-title">Context Analysis</div>
                         <div class="feature-desc">AI analyzes your current workspace to understand what task you're working on.</div>
                     </div>
                     <div class="feature-card">
                         <div class="feature-title">Exa Search</div>
                         <div class="feature-desc">Semantic web search that understands meaning, not just keywords. Find relevant docs and tutorials.</div>
                     </div>
                 </div>
                 <h2 id="setup">Setup</h2>
                 <h3>OpenRouter API Key</h3>
                 <p>Required for AI Command Palette and Context Analysis.</p>
                 <ol>
                     <li>Visit <a href="https://openrouter.ai/keys" target="_blank">https://openrouter.ai/keys</a></li>
                     <li>Create an account and generate an API key</li>
                     <li>Set the key via environment variable or config file</li>
                 </ol>
                 <div class="code-block">
                     <pre><code># Option 1: Environment variable (add to ~/.bashrc or ~/.zshrc)
 export OPENROUTER_API_KEY=sk-or-v1-your-key-here
 # Option 2: Config file (~/.config/dwn/config)
 [ai]
 openrouter_api_key = sk-or-v1-your-key-here</code></pre>
                 </div>
                 <h3>Exa API Key</h3>
                 <p>Required for Exa Semantic Search.</p>
                 <ol>
                     <li>Visit <a href="https://dashboard.exa.ai/api-keys" target="_blank">https://dashboard.exa.ai/api-keys</a></li>
                     <li>Create an account and generate an API key</li>
                     <li>Set the key via environment variable or config file</li>
                 </ol>
                 <div class="code-block">
                     <pre><code># Option 1: Environment variable
 export EXA_API_KEY=your-exa-key-here
 # Option 2: Config file (~/.config/dwn/config)
 [ai]
 exa_api_key = your-exa-key-here</code></pre>
                 </div>
                 <div class="alert alert-info">
                     <strong>Note:</strong> AI features are optional. DWN functions fully without them.
                 </div>
                 <h2 id="command-palette">AI Command Palette</h2>
                 <p>Press <code>Super+Shift+A</code> to open the AI command palette.</p>
                 <h3>Usage</h3>
                 <ol>
                     <li>Press <code>Super+Shift+A</code></li>
                     <li>Type a natural language command</li>
                     <li>Press Enter</li>
                     <li>AI interprets and executes your request</li>
                 </ol>
                 <h3>Example Commands</h3>
                 <div class="table-container">
                     <table>
                         <thead>
                             <tr>
                                 <th>Command</th>
                                 <th>Result</th>
                             </tr>
                         </thead>
                         <tbody>
                             <tr>
                                 <td>"open firefox"</td>
                                 <td>Launches Firefox browser</td>
                             </tr>
                             <tr>
                                 <td>"launch terminal"</td>
                                 <td>Opens configured terminal</td>
                             </tr>
                             <tr>
                                 <td>"run file manager"</td>
                                 <td>Opens configured file manager</td>
                             </tr>
                             <tr>
                                 <td>"what time is it"</td>
                                 <td>Shows current time</td>
                             </tr>
                             <tr>
                                 <td>"how much memory is free"</td>
                                 <td>Shows system memory info</td>
                             </tr>
                         </tbody>
                     </table>
                 </div>
                 <h3>Supported Actions</h3>
                 <ul>
                     <li><strong>Application launching</strong> - "open", "launch", "run", "start"</li>
                     <li><strong>System queries</strong> - Time, date, system information</li>
                     <li><strong>General questions</strong> - AI will provide helpful responses</li>
                 </ul>
                 <h2 id="context-analysis">Context Analysis</h2>
                 <p>Press <code>Super+A</code> to see AI analysis of your current workspace.</p>
                 <h3>What It Shows</h3>
                 <ul>
                     <li>Detected task type (coding, browsing, communication, etc.)</li>
                     <li>Currently focused window</li>
                     <li>AI-generated suggestions based on context</li>
                 </ul>
                 <h3>Example Output</h3>
                 <div class="code-block">
                     <pre><code>Current Task: Software Development
 Focused: Visual Studio Code - project.py
 Windows: VS Code, Terminal, Firefox (Stack Overflow)
 Suggestions:
 - Run tests with Ctrl+Shift+T
 - Toggle terminal with Ctrl+`
 - Search documentation with Super+Shift+E</code></pre>
                 </div>
                 <h2 id="exa-search">Exa Semantic Search</h2>
                 <p>Press <code>Super+Shift+E</code> to open semantic web search.</p>
                 <h3>How It Works</h3>
                 <p>Exa uses neural search to find content based on meaning rather than keyword matching. This produces more relevant results for technical queries.</p>
                 <h3>Usage</h3>
                 <ol>
                     <li>Press <code>Super+Shift+E</code></li>
                     <li>Type a natural language query</li>
                     <li>Press Enter</li>
                     <li>Results appear in a selection menu</li>
                     <li>Select a result to open in browser</li>
                 </ol>
                 <h3>Example Queries</h3>
                 <ul>
                     <li>"how to configure nginx reverse proxy"</li>
                     <li>"python async await tutorial"</li>
                     <li>"X11 window manager development guide"</li>
                     <li>"systemd service file examples"</li>
                 </ul>
                 <h3>Best Practices</h3>
                 <ul>
                     <li>Use natural language, not keywords</li>
                     <li>Be specific about what you're looking for</li>
                     <li>Include context (language, framework, etc.)</li>
                 </ul>
                 <h2 id="configuration">Configuration</h2>
                 <p>AI settings in <code>~/.config/dwn/config</code>:</p>
                 <div class="code-block">
                     <pre><code>[ai]
 # AI model for OpenRouter (see https://openrouter.ai/models)
 model = google/gemini-2.0-flash-exp:free
 # API keys (can also use environment variables)
 openrouter_api_key = sk-or-v1-your-key
 exa_api_key = your-exa-key</code></pre>
                 </div>
                 <h3>Available Models</h3>
                 <p>OpenRouter provides access to many AI models. Some options:</p>
                 <div class="table-container">
                     <table>
                         <thead>
                             <tr>
                                 <th>Model</th>
                                 <th>Description</th>
                             </tr>
                         </thead>
                         <tbody>
                             <tr>
                                 <td><code>google/gemini-2.0-flash-exp:free</code></td>
                                 <td>Fast, free tier available (default)</td>
                             </tr>
                             <tr>
                                 <td><code>anthropic/claude-3-haiku</code></td>
                                 <td>Fast and efficient</td>
                             </tr>
                             <tr>
                                 <td><code>openai/gpt-4o-mini</code></td>
                                 <td>Good balance of speed and quality</td>
                             </tr>
                             <tr>
                                 <td><code>x-ai/grok-code-fast-1</code></td>
                                 <td>Optimized for code tasks</td>
                             </tr>
                         </tbody>
                     </table>
                 </div>
                 <p>See <a href="https://openrouter.ai/models" target="_blank">OpenRouter Models</a> for the full list.</p>
                 <h2>Keyboard Shortcuts</h2>
                 <div class="table-container">
                     <table class="shortcut-table">
                         <thead>
                             <tr>
                                 <th>Shortcut</th>
                                 <th>Action</th>
                             </tr>
                         </thead>
                         <tbody>
                             <tr>
                                 <td><code>Super+A</code></td>
                                 <td>Show AI context analysis</td>
                             </tr>
                             <tr>
                                 <td><code>Super+Shift+A</code></td>
                                 <td>Open AI command palette</td>
                             </tr>
                             <tr>
                                 <td><code>Super+Shift+E</code></td>
                                 <td>Open Exa semantic search</td>
                             </tr>
                         </tbody>
                     </table>
                 </div>
                 <h2>Troubleshooting</h2>
                 <h3>AI features not working</h3>
                 <ol>
                     <li>Verify API key is set correctly</li>
                     <li>Check network connectivity</li>
                     <li>Look for errors in <code>~/.local/share/dwn/dwn.log</code></li>
                 </ol>
                 <h3>Slow responses</h3>
                 <ul>
                     <li>Try a faster model (e.g., <code>google/gemini-2.0-flash-exp:free</code>)</li>
                     <li>Check network latency to API endpoints</li>
                 </ul>
                 <h3>API rate limits</h3>
                 <p>Free tiers have usage limits. Consider upgrading for heavy use or use a paid model.</p>
                 <footer>
                     <p>DWN Window Manager - retoor &lt;retoor@molodetz.nl&gt;</p>
                 </footer>
             </div>
         </main>
     </div>
     <script src="js/main.js"></script>
 </body>
 </html>