231 lines
12 KiB
Cheetah
231 lines
12 KiB
Cheetah
{{define "install_public_nl"}}
|
|
<style>
|
|
.step { margin-bottom: 2rem; padding: 1.5rem; background: var(--cream-light); border-radius: 8px; }
|
|
.step-num { display: inline-block; width: 32px; height: 32px; background: var(--accent); color: white; border-radius: 50%; text-align: center; line-height: 32px; font-weight: 600; margin-right: 12px; }
|
|
.step h3 { display: inline; font-size: 1.1rem; }
|
|
.step p { margin: 12px 0 0 44px; color: var(--text-muted); }
|
|
.code-wrapper { position: relative; margin: 12px 0 0 44px; }
|
|
.code-wrapper pre { background: #2d2d2d; color: #f8f8f2; padding: 16px; padding-right: 48px; border-radius: 6px; font-size: 0.85rem; white-space: pre-wrap; word-break: break-word; margin: 0; }
|
|
.copy-icon { position: absolute; top: 8px; right: 8px; background: transparent; border: none; cursor: pointer; padding: 6px; border-radius: 4px; opacity: 0.6; transition: opacity 0.2s, background 0.2s; }
|
|
.copy-icon:hover { opacity: 1; background: rgba(255,255,255,0.1); }
|
|
.copy-icon svg { width: 18px; height: 18px; stroke: #aaa; fill: none; }
|
|
.copy-icon.copied svg { stroke: #6c6; }
|
|
|
|
.ai-tabs { display: flex; gap: 0; margin-bottom: 0; border-bottom: 2px solid var(--border); }
|
|
.ai-tab { padding: 12px 24px; cursor: pointer; border: none; background: none; font-size: 1rem; color: var(--text-muted); border-bottom: 2px solid transparent; margin-bottom: -2px; transition: all 0.2s; }
|
|
.ai-tab:hover { color: var(--text); }
|
|
.ai-tab.active { color: var(--accent); border-bottom-color: var(--accent); font-weight: 500; }
|
|
.ai-content { display: none; padding-top: 1.5rem; }
|
|
.ai-content.active { display: block; }
|
|
|
|
.quick-start { background: var(--cream-light); border-radius: 8px; padding: 1.5rem; margin-bottom: 1.5rem; }
|
|
.quick-start h3 { margin: 0 0 1rem 0; font-size: 1.1rem; }
|
|
.quick-start p { margin: 0.5rem 0; }
|
|
|
|
.login-tracker { background: #fff3cd; border: 1px solid #ffc107; border-radius: 8px; padding: 1rem 1.5rem; margin-bottom: 1.5rem; }
|
|
.login-tracker a { color: var(--accent); font-weight: 500; }
|
|
</style>
|
|
|
|
<div class="container">
|
|
<div class="dossier-header">
|
|
<div class="dossier-header-left">
|
|
<h1>Verbind AI met jouw gegevens</h1>
|
|
<p class="text-muted text-small">Kies je AI-assistent en volg de installatie-instructies.</p>
|
|
</div>
|
|
<a href="/" class="btn btn-secondary btn-small">← Home</a>
|
|
</div>
|
|
|
|
<div class="login-tracker">
|
|
<strong>Let op:</strong> <a href="/start">Log in</a> om gepersonaliseerde installatie-instructies te zien met jouw accounttoken al ingevuld.
|
|
</div>
|
|
|
|
<div class="ai-tabs">
|
|
<button class="ai-tab active" onclick="showTab('claude')">Claude Desktop</button>
|
|
<button class="ai-tab" onclick="showTab('grok')">Grok</button>
|
|
<button class="ai-tab" onclick="showTab('chatgpt')">ChatGPT</button>
|
|
<button class="ai-tab" onclick="showTab('other')">Andere AI</button>
|
|
</div>
|
|
|
|
<!-- Claude Desktop Tab -->
|
|
<div id="tab-claude" class="ai-content active">
|
|
<p style="margin-bottom: 1.5rem;">Claude Desktop verbindt rechtstreeks met inou via OAuth — geen tokens om te kopiëren, geen extensies om te installeren. Directe toegang tot tools, volledige API-mogelijkheden.</p>
|
|
|
|
<div class="step">
|
|
<span class="step-num">1</span>
|
|
<h3>Installeer Claude Desktop</h3>
|
|
<p>Download en installeer via <a href="https://claude.ai/download" target="_blank">claude.ai/download</a></p>
|
|
</div>
|
|
|
|
<div class="step">
|
|
<span class="step-num">2</span>
|
|
<h3>Voeg de Inou-connector toe</h3>
|
|
<p>In Claude Desktop:</p>
|
|
<ol style="margin: 12px 0 12px 44px; color: var(--text-muted);">
|
|
<li>Ga naar <strong>Instellingen → Connectors</strong></li>
|
|
<li>Klik op <strong>Aangepaste connector toevoegen</strong></li>
|
|
<li>Vul de velden in:</li>
|
|
</ol>
|
|
<table style="margin: 0 0 12px 44px; border-collapse: collapse; width: calc(100% - 44px);">
|
|
<tr>
|
|
<td style="padding: 8px 12px; border: 1px solid var(--border); background: var(--cream-light); font-weight: 500;">Naam</td>
|
|
<td style="padding: 8px 12px; border: 1px solid var(--border);"><code>Inou Health</code></td>
|
|
</tr>
|
|
<tr>
|
|
<td style="padding: 8px 12px; border: 1px solid var(--border); background: var(--cream-light); font-weight: 500;">Remote MCP-server URL</td>
|
|
<td style="padding: 8px 12px; border: 1px solid var(--border);"><code>https://inou.com/mcp</code></td>
|
|
</tr>
|
|
</table>
|
|
<p>Klik op <strong>Toevoegen</strong> en daarna op <strong>Verbinden</strong>.</p>
|
|
</div>
|
|
|
|
<div class="step">
|
|
<span class="step-num">3</span>
|
|
<h3>Log in</h3>
|
|
<p>Je browser opent om in te loggen bij inou. Na het inloggen klik je op <strong>Claude openen</strong> om de verbinding te voltooien.</p>
|
|
</div>
|
|
|
|
<div class="step">
|
|
<span class="step-num">4</span>
|
|
<h3>Sta tools toe</h3>
|
|
<p>Om te voorkomen dat je 11 keer om toestemming wordt gevraagd:</p>
|
|
<ol style="margin: 12px 0 12px 44px; color: var(--text-muted);">
|
|
<li>Ga in <strong>Instellingen → Connectors</strong> naar <strong>Inou Health</strong></li>
|
|
<li>Klik op <strong>Configureren</strong> (tandwielpictogram)</li>
|
|
<li>Selecteer onder <strong>Alleen-lezen tools</strong> de optie <strong>Altijd toestaan</strong></li>
|
|
</ol>
|
|
</div>
|
|
|
|
<div class="step">
|
|
<span class="step-num">5</span>
|
|
<h3>Voeg aangepaste instructies toe (aanbevolen)</h3>
|
|
<p>Ga in Claude Desktop naar <strong>Instellingen → Aangepaste instructies</strong> en voeg het volgende toe:</p>
|
|
<div class="code-wrapper">
|
|
<pre id="step5-code">At the start of health-related conversations, use the family_health_context tracker from the Inou Health connector to understand what health data is available.</pre>
|
|
<button class="copy-icon" onclick="copyCode('step5-code', this)" title="Kopiëren">
|
|
<svg viewBox="0 0 24 24" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
<rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect>
|
|
<path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="step">
|
|
<span class="step-num">6</span>
|
|
<h3>Test</h3>
|
|
<p>Open Claude Desktop en probeer:</p>
|
|
<div class="code-wrapper">
|
|
<pre id="step6-code">List my available dossiers.</pre>
|
|
<button class="copy-icon" onclick="copyCode('step6-code', this)" title="Kopiëren">
|
|
<svg viewBox="0 0 24 24" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
<rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect>
|
|
<path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
<p>Je zou je dossier(s) moeten zien. Je bent klaar!</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Grok Tab -->
|
|
<div id="tab-grok" class="ai-content">
|
|
<p style="margin-bottom: 1.5rem;">Grok kan het web doorzoeken en rechtstreeks toegang krijgen tot je gezondheidsgegevens via onze API. Geen installatie nodig.</p>
|
|
|
|
<div class="quick-start">
|
|
<h3>Snel aan de slag</h3>
|
|
<p>Kopieer dit en plak het in Grok:</p>
|
|
<div class="code-wrapper" style="margin: 12px 0 0 0;">
|
|
<pre id="grok-code">Fetch https://inou.com/api/docs to see the API documentation.
|
|
Then fetch https://inou.com/api/v1/dossiers?token=YOUR_ACCOUNT_TOKEN to list my dossiers.
|
|
Help me explore my health data - imaging studies, genome variants, and lab results.
|
|
|
|
IMPORTANT:
|
|
- Replace YOUR_ACCOUNT_TOKEN with your token from inou.com/connect (sign in, go to the Grok tab).
|
|
- Allow 3 seconds for API responses before assuming failure.
|
|
- When sharing image links, use the exact image_url from responses.
|
|
- This is real medical data. NEVER hallucinate. Only describe what you actually see.</pre>
|
|
<button class="copy-icon" onclick="copyCode('grok-code', this)" title="Kopiëren">
|
|
<svg viewBox="0 0 24 24" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
<rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect>
|
|
<path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="step">
|
|
<span class="step-num">→</span>
|
|
<h3>Wat Grok kan doen</h3>
|
|
<p>Zodra je verbonden bent, kun je Grok vragen om:</p>
|
|
<ul style="margin: 12px 0 0 44px; color: var(--text-muted);">
|
|
<li>Al je beeldvormingsstudies, genomische gegevens en labresultaten op te sommen</li>
|
|
<li>Series binnen een specifieke studie te tonen</li>
|
|
<li>Individuele beeldsneden op te halen en te analyseren</li>
|
|
<li>Beelden te vergelijken over verschillende sequenties (T1, T2, FLAIR)</li>
|
|
<li>Naar specifieke anatomische regio's te navigeren</li>
|
|
<li>Genomische varianten op te zoeken op gen, categorie of rsid</li>
|
|
<li>Medicatiereacties en gezondheidsrisico's te bekijken</li>
|
|
<li>Labwaarden in de tijd te volgen</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<p style="margin-top: 1.5rem; color: var(--text-muted);">Bekijk de <a href="/api/docs">volledige API-documentatie</a> voor alle beschikbare endpoints.</p>
|
|
</div>
|
|
|
|
<!-- ChatGPT Tab -->
|
|
<div id="tab-chatgpt" class="ai-content">
|
|
<p style="margin-bottom: 1.5rem; color: var(--text-muted);">Niet aanbevolen voor medische beeldvorming vanwege een verhoogd risico op hallucinaties in onze tests.</p>
|
|
|
|
<div class="step">
|
|
<span class="step-num">✗</span>
|
|
<h3>Waarom niet ChatGPT?</h3>
|
|
<p>Medische beeldvorming vereist absolute nauwkeurigheid. In onze tests verzon ChatGPT informatie, zelfs wanneer de juiste gegevens duidelijk beschikbaar waren. We kunnen het niet aanbevelen voor het analyseren van gezondheidsgegevens waarbij fouten echte gevolgen hebben.</p>
|
|
</div>
|
|
|
|
<div class="step">
|
|
<span class="step-num">→</span>
|
|
<h3>Aanbevolen alternatieven</h3>
|
|
<p>Gebruik <a href="#" onclick="showTab('claude'); return false;">Claude Desktop</a> voor de beste ervaring met directe toegang tot tools, of <a href="#" onclick="showTab('grok'); return false;">Grok</a> voor webgebaseerde toegang zonder installatie.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Other AI Tab -->
|
|
<div id="tab-other" class="ai-content">
|
|
<p style="margin-bottom: 1.5rem;">Andere AI-assistenten kunnen toegang krijgen tot je gegevens via onze web-API, hoewel de mogelijkheden variëren.</p>
|
|
|
|
<div class="step">
|
|
<span class="step-num">⚠</span>
|
|
<h3>Gemini</h3>
|
|
<p>Het surfen op het web van Gemini is momenteel beperkt en kan mogelijk geen inou.com-URL's rechtstreeks ophalen. Alternatieven:</p>
|
|
<ul style="margin: 12px 0 0 44px; color: var(--text-muted);">
|
|
<li>Kopieer API-antwoorden handmatig en plak ze in Gemini</li>
|
|
<li>Gebruik Google AI Studio met function calling</li>
|
|
<li>Overweeg Claude Desktop of Grok te gebruiken</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="step">
|
|
<span class="step-num">→</span>
|
|
<h3>Bouw je eigen integratie</h3>
|
|
<p>Onze API is eenvoudige REST + JSON. Bekijk de <a href="/api/docs">API-documentatie</a> voor endpoints en authenticatie.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
function copyCode(id, btn) {
|
|
const text = document.getElementById(id).textContent;
|
|
navigator.clipboard.writeText(text).then(() => {
|
|
btn.classList.add('copied');
|
|
setTimeout(() => btn.classList.remove('copied'), 1500);
|
|
});
|
|
}
|
|
|
|
function showTab(name) {
|
|
document.querySelectorAll('.ai-tab').forEach(t => t.classList.remove('active'));
|
|
document.querySelectorAll('.ai-content').forEach(c => c.classList.remove('active'));
|
|
document.querySelector('[onclick="showTab(\'' + name + '\')"]').classList.add('active');
|
|
document.getElementById('tab-' + name).classList.add('active');
|
|
}
|
|
</script>
|
|
{{end}} |