<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<meta name="description" content="AI integration in DWN window manager - command palette, semantic search, and context analysis.">
|
|
<title>AI Features - DWN Window Manager</title>
|
|
<link rel="stylesheet" href="css/style.css">
|
|
</head>
|
|
<body>
|
|
<header>
|
|
<nav>
|
|
<a href="index.html" class="logo">
|
|
<span class="logo-icon">D</span>
|
|
<span>DWN</span>
|
|
</a>
|
|
<ul class="nav-links">
|
|
<li><a href="index.html">Home</a></li>
|
|
<li><a href="features.html">Features</a></li>
|
|
<li><a href="installation.html">Install</a></li>
|
|
<li class="dropdown">
|
|
<a href="documentation.html" class="active">Docs</a>
|
|
<div class="dropdown-menu">
|
|
<a href="documentation.html">Getting Started</a>
|
|
<a href="shortcuts.html">Keyboard Shortcuts</a>
|
|
<a href="configuration.html">Configuration</a>
|
|
<a href="ai-features.html">AI Features</a>
|
|
<a href="architecture.html">Architecture</a>
|
|
<a href="design-patterns.html">Design Patterns</a>
|
|
</div>
|
|
</li>
|
|
<li><a href="https://retoor.molodetz.nl/retoor/dwn">Git</a></li>
|
|
</ul>
|
|
<div class="nav-toggle" onclick="toggleNav()">
|
|
<span></span>
|
|
<span></span>
|
|
<span></span>
|
|
</div>
|
|
</nav>
|
|
</header>
|
|
<main>
|
|
<section class="hero" style="padding: 8rem 0 4rem;">
|
|
<div class="container hero-content">
|
|
<h1>AI Integration</h1>
|
|
<p class="subtitle">
|
|
Control your desktop with natural language and get intelligent assistance.
|
|
</p>
|
|
</div>
|
|
</section>
|
|
<section class="section">
|
|
<div class="container">
|
|
<div class="alert alert-info" style="margin-bottom: 2rem;">
|
|
<strong class="alert-title">Optional Features</strong>
|
|
<p style="margin: 0;">AI features are completely optional and require external API keys.
|
|
DWN works perfectly without them.</p>
|
|
</div>
|
|
<h2>Overview</h2>
|
|
<p>
|
|
DWN integrates with two AI services to provide intelligent desktop assistance:
|
|
</p>
|
|
<ul style="margin-bottom: 2rem;">
|
|
<li><strong>OpenRouter API</strong> - Powers the AI command palette and context analysis</li>
|
|
<li><strong>Exa API</strong> - Provides semantic web search capabilities</li>
|
|
</ul>
|
|
<div class="features-grid">
|
|
<div class="feature-card">
|
|
<div class="feature-icon">🤖</div>
|
|
<h3>AI Command Palette</h3>
|
|
<p>Type natural language commands to control your desktop.
|
|
Launch apps, query system info, and more.</p>
|
|
<p style="margin-top: 1rem;"><kbd>Super</kbd> + <kbd>A</kbd></p>
|
|
</div>
|
|
<div class="feature-card">
|
|
<div class="feature-icon">👁</div>
|
|
<h3>Context Analysis</h3>
|
|
<p>AI analyzes your current workspace to understand your task
|
|
and provide relevant suggestions.</p>
|
|
<p style="margin-top: 1rem;"><kbd>Super</kbd> + <kbd>Shift</kbd> + <kbd>A</kbd></p>
|
|
</div>
|
|
<div class="feature-card">
|
|
<div class="feature-icon">🔍</div>
|
|
<h3>Semantic Search</h3>
|
|
<p>Search the web using meaning, not just keywords.
|
|
Find relevant content instantly.</p>
|
|
<p style="margin-top: 1rem;"><kbd>Super</kbd> + <kbd>Shift</kbd> + <kbd>E</kbd></p>
|
|
</div>
|
|
<div class="feature-card">
|
|
<div class="feature-icon">📝</div>
|
|
<h3>Auto-Organization</h3>
|
|
<p>Context-aware window placement and workspace optimization
|
|
based on your current workflow.</p>
|
|
</div>
|
|
<div class="feature-card">
|
|
<div class="feature-icon">🔔</div>
|
|
<h3>Smart Notifications</h3>
|
|
<p>Intelligent filtering and prioritization of system notifications
|
|
using application context.</p>
|
|
</div>
|
|
</div>
|
|
<h2 id="openrouter" style="margin-top: 4rem;">Setting Up OpenRouter</h2>
|
|
<p style="color: var(--text-muted); margin-bottom: 1.5rem;">
|
|
OpenRouter provides access to multiple AI models through a single API.
|
|
You can use free models or paid ones depending on your needs.
|
|
</p>
|
|
<div class="steps">
|
|
<div class="step">
|
|
<div class="step-number">1</div>
|
|
<div class="step-content">
|
|
<h4>Get an API Key</h4>
|
|
<p>Visit <a href="https://openrouter.ai/keys" target="_blank">https://openrouter.ai/keys</a>
|
|
and create a free account to get your API key.</p>
|
|
</div>
|
|
</div>
|
|
<div class="step">
|
|
<div class="step-number">2</div>
|
|
<div class="step-content">
|
|
<h4>Set the Environment Variable</h4>
|
|
<p>Add to your shell profile (~/.bashrc, ~/.zshrc, etc.):</p>
|
|
<div class="code-header">
|
|
<span>~/.bashrc</span>
|
|
<button class="copy-btn" onclick="copyCode(this)">Copy</button>
|
|
</div>
|
|
<pre><code>export OPENROUTER_API_KEY="sk-or-v1-your-key-here"</code></pre>
|
|
</div>
|
|
</div>
|
|
<div class="step">
|
|
<div class="step-number">3</div>
|
|
<div class="step-content">
|
|
<h4>Choose a Model (Optional)</h4>
|
|
<p>Configure the AI model in your DWN config file:</p>
|
|
<div class="code-header">
|
|
<span>~/.config/dwn/config</span>
|
|
<button class="copy-btn" onclick="copyCode(this)">Copy</button>
|
|
</div>
|
|
<pre><code>[ai]
|
|
model = google/gemini-2.0-flash-exp:free</code></pre>
|
|
<p style="margin-top: 0.5rem; font-size: 0.875rem; color: var(--text-muted);">
|
|
Browse available models at <a href="https://openrouter.ai/models" target="_blank">openrouter.ai/models</a>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="card" style="margin-top: 2rem;">
|
|
<h3>Recommended Free Models</h3>
|
|
<div class="table-wrapper">
|
|
<table>
|
|
<thead>
|
|
<tr>
|
|
<th>Model ID</th>
|
|
<th>Provider</th>
|
|
<th>Best For</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td><code>google/gemini-2.0-flash-exp:free</code></td>
|
|
<td>Google</td>
|
|
<td>Fast responses, good general use</td>
|
|
</tr>
|
|
<tr>
|
|
<td><code>meta-llama/llama-3.2-3b-instruct:free</code></td>
|
|
<td>Meta</td>
|
|
<td>Quick commands, lightweight</td>
|
|
</tr>
|
|
<tr>
|
|
<td><code>mistralai/mistral-7b-instruct:free</code></td>
|
|
<td>Mistral</td>
|
|
<td>Balanced performance</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
<h2 id="command-palette" style="margin-top: 4rem;">AI Command Palette</h2>
|
|
<p>
|
|
Press <kbd>Super</kbd> + <kbd>A</kbd> to open the command palette.
|
|
Type natural language commands and press Enter.
|
|
</p>
|
|
<h3>Supported Commands</h3>
|
|
<div class="table-wrapper">
|
|
<table>
|
|
<thead>
|
|
<tr>
|
|
<th>Category</th>
|
|
<th>Examples</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td><strong>Launch Applications</strong></td>
|
|
<td>
|
|
"open firefox"<br>
|
|
"run terminal"<br>
|
|
"launch file manager"<br>
|
|
"start chrome"
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td><strong>System Queries</strong></td>
|
|
<td>
|
|
"what time is it"<br>
|
|
"how much memory is free"<br>
|
|
"what's my IP address"<br>
|
|
"show disk usage"
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td><strong>General Questions</strong></td>
|
|
<td>
|
|
"how do I resize the master area"<br>
|
|
"what's the shortcut for fullscreen"<br>
|
|
"explain tiling mode"
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
<div class="alert alert-success" style="margin-top: 1.5rem;">
|
|
<strong class="alert-title">Pro Tip</strong>
|
|
<p style="margin: 0;">The AI understands context. You can say "open browser" instead of
|
|
remembering the exact application name - it will figure out what you mean.</p>
|
|
</div>
|
|
<h2 id="context" style="margin-top: 4rem;">Context Analysis</h2>
|
|
<p>
|
|
Press <kbd>Super</kbd> + <kbd>Shift</kbd> + <kbd>A</kbd> to see AI-powered analysis of your current workspace.
|
|
</p>
|
|
<div class="card">
|
|
<h3>What It Shows</h3>
|
|
<ul style="padding-left: 1.25rem;">
|
|
<li><strong>Task Type</strong> - Coding, browsing, communication, etc.</li>
|
|
<li><strong>Focused Window</strong> - Currently active application</li>
|
|
<li><strong>Suggestions</strong> - Relevant shortcuts or actions based on context</li>
|
|
<li><strong>Workspace Summary</strong> - Overview of open applications</li>
|
|
</ul>
|
|
</div>
|
|
<h2 id="exa" style="margin-top: 4rem;">Setting Up Exa Search</h2>
|
|
<p style="color: var(--text-muted); margin-bottom: 1.5rem;">
|
|
Exa provides semantic search - finding content based on meaning rather than exact keywords.
|
|
</p>
|
|
<div class="steps">
|
|
<div class="step">
|
|
<div class="step-number">1</div>
|
|
<div class="step-content">
|
|
<h4>Get an Exa API Key</h4>
|
|
<p>Visit <a href="https://dashboard.exa.ai/api-keys" target="_blank">https://dashboard.exa.ai/api-keys</a>
|
|
and create an account to get your API key.</p>
|
|
</div>
|
|
</div>
|
|
<div class="step">
|
|
<div class="step-number">2</div>
|
|
<div class="step-content">
|
|
<h4>Set the Environment Variable</h4>
|
|
<div class="code-header">
|
|
<span>~/.bashrc</span>
|
|
<button class="copy-btn" onclick="copyCode(this)">Copy</button>
|
|
</div>
|
|
<pre><code>export EXA_API_KEY="your-exa-key-here"</code></pre>
|
|
</div>
|
|
</div>
|
|
<div class="step">
|
|
<div class="step-number">3</div>
|
|
<div class="step-content">
|
|
<h4>Start Searching</h4>
|
|
<p>Press <kbd>Super</kbd> + <kbd>Shift</kbd> + <kbd>E</kbd> and type your query.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<h2 id="search" style="margin-top: 4rem;">Using Semantic Search</h2>
|
|
<p>
|
|
Unlike traditional search, Exa understands the meaning of your query.
|
|
</p>
|
|
<div class="comparison" style="grid-template-columns: repeat(2, 1fr);">
|
|
<div class="comparison-card">
|
|
<h3>Traditional Search</h3>
|
|
<p style="color: var(--text-muted);">Keyword matching</p>
|
|
<ul>
|
|
<li>Exact keyword matches</li>
|
|
<li>Boolean operators needed</li>
|
|
<li>Miss relevant results</li>
|
|
</ul>
|
|
<p style="margin-top: 1rem; font-style: italic; color: var(--text-muted);">
|
|
"nginx reverse proxy setup tutorial"
|
|
</p>
|
|
</div>
|
|
<div class="comparison-card featured">
|
|
<h3>Semantic Search</h3>
|
|
<p style="color: var(--text-muted);">Meaning-based</p>
|
|
<ul>
|
|
<li>Understands intent</li>
|
|
<li>Natural language</li>
|
|
<li>Finds related content</li>
|
|
</ul>
|
|
<p style="margin-top: 1rem; font-style: italic; color: var(--text-muted);">
|
|
"how to configure nginx as a reverse proxy"
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<h3 style="margin-top: 2rem;">Search Tips</h3>
|
|
<ul>
|
|
<li>Use natural, conversational queries</li>
|
|
<li>Be specific about what you're looking for</li>
|
|
<li>Results appear in a dmenu/rofi list - select to open in browser</li>
|
|
<li>Search includes articles, documentation, tutorials, and more</li>
|
|
</ul>
|
|
<h2 id="privacy" style="margin-top: 4rem;">Privacy Considerations</h2>
|
|
<div class="alert alert-warning">
|
|
<strong class="alert-title">Data Sent to External Services</strong>
|
|
<p style="margin: 0;">When using AI features, the following data is sent to external APIs:</p>
|
|
</div>
|
|
<div class="table-wrapper" style="margin-top: 1rem;">
|
|
<table>
|
|
<thead>
|
|
<tr>
|
|
<th>Feature</th>
|
|
<th>Data Sent</th>
|
|
<th>Service</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td>Command Palette</td>
|
|
<td>Your typed command</td>
|
|
<td>OpenRouter (then to model provider)</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Context Analysis</td>
|
|
<td>Window titles, app names</td>
|
|
<td>OpenRouter (then to model provider)</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Semantic Search</td>
|
|
<td>Your search query</td>
|
|
<td>Exa</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
<p style="margin-top: 1rem; color: var(--text-muted);">
|
|
If you're concerned about privacy, you can:
|
|
</p>
|
|
<ul style="color: var(--text-muted);">
|
|
<li>Not configure API keys (AI features simply won't work)</li>
|
|
<li>Use OpenRouter with privacy-focused models</li>
|
|
<li>Only use AI features when needed</li>
|
|
</ul>
|
|
<h2 id="troubleshooting" style="margin-top: 4rem;">Troubleshooting</h2>
|
|
<div class="faq-item">
|
|
<button class="faq-question" onclick="toggleFaq(this)">
|
|
AI commands don't work - "API key not configured"
|
|
</button>
|
|
<div class="faq-answer">
|
|
<div class="faq-answer-content">
|
|
<p>Make sure your API key is properly set:</p>
|
|
<ol style="padding-left: 1.25rem; margin-top: 0.5rem;">
|
|
<li>Check the environment variable: <code>echo $OPENROUTER_API_KEY</code></li>
|
|
<li>Ensure the variable is exported in your shell profile</li>
|
|
<li>Log out and back in, or source your profile: <code>source ~/.bashrc</code></li>
|
|
<li>Restart DWN</li>
|
|
</ol>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="faq-item">
|
|
<button class="faq-question" onclick="toggleFaq(this)">
|
|
Slow responses from AI
|
|
</button>
|
|
<div class="faq-answer">
|
|
<div class="faq-answer-content">
|
|
<p>Try using a faster model. Free models can sometimes be slow due to rate limiting.
|
|
Gemini Flash is usually the fastest free option.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="faq-item">
|
|
<button class="faq-question" onclick="toggleFaq(this)">
|
|
Exa search returns no results
|
|
</button>
|
|
<div class="faq-answer">
|
|
<div class="faq-answer-content">
|
|
<p>Check your Exa API key and ensure you have remaining credits.
|
|
Visit the <a href="https://dashboard.exa.ai">Exa dashboard</a> to check your usage.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</main>
|
|
<footer>
|
|
<div class="container">
|
|
<div class="footer-grid">
|
|
<div class="footer-section">
|
|
<h4>DWN Window Manager</h4>
|
|
<p style="color: var(--text-muted);">
|
|
A modern, production-ready X11 window manager with XFCE-like
|
|
functionality and optional AI integration.
|
|
</p>
|
|
</div>
|
|
<div class="footer-section">
|
|
<h4>Documentation</h4>
|
|
<ul>
|
|
<li><a href="documentation.html">Getting Started</a></li>
|
|
<li><a href="shortcuts.html">Keyboard Shortcuts</a></li>
|
|
<li><a href="configuration.html">Configuration</a></li>
|
|
<li><a href="architecture.html">Architecture</a></li>
|
|
<li><a href="design-patterns.html">Design Patterns</a></li>
|
|
</ul>
|
|
</div>
|
|
<div class="footer-section">
|
|
<h4>Resources</h4>
|
|
<ul>
|
|
<li><a href="features.html">Features</a></li>
|
|
<li><a href="installation.html">Installation</a></li>
|
|
<li><a href="ai-features.html">AI Integration</a></li>
|
|
<li><a href="https://retoor.molodetz.nl/retoor/dwn">Git</a></li>
|
|
</ul>
|
|
</div>
|
|
<div class="footer-section">
|
|
<h4>Community</h4>
|
|
<ul>
|
|
<li><a href="https://retoor.molodetz.nl/retoor/dwn/issues">Issue Tracker</a></li>
|
|
<li><a href="https://retoor.molodetz.nl/retoor/dwn/discussions">Discussions</a></li>
|
|
<li><a href="https://retoor.molodetz.nl/retoor/dwn/blob/main/CONTRIBUTING.md">Contributing</a></li>
|
|
<li><a href="https://retoor.molodetz.nl/retoor/dwn/blob/main/LICENSE">License (MIT)</a></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<div class="footer-bottom">
|
|
<p>DWN Window Manager by retoor <retoor@molodetz.nl> - MIT License</p>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
<script src="js/main.js"></script>
|
|
</body>
|
|
</html>
|