268 lines
12 KiB
Cheetah
268 lines
12 KiB
Cheetah
{{define "connect_nl"}}
|
|
<div class="install-container">
|
|
|
|
<div class="install-header">
|
|
<div>
|
|
<h1>Verbind AI met uw gegevens</h1>
|
|
<p>Kies uw AI-assistent en volg de installatie-instructies.</p>
|
|
</div>
|
|
{{if and .Dossier .Dossier.DossierID}}<a href="/dashboard" class="btn btn-secondary btn-small">← Terug</a>{{else}}<a href="/" class="btn btn-secondary btn-small">← Home</a>{{end}}
|
|
</div>
|
|
|
|
<div class="install-card">
|
|
<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>Claude Desktop verbindt direct met <span class="inou-brand">inou</span> via OAuth — geen tokens te kopiëren, geen extensies te installeren.</p>
|
|
|
|
<div class="step">
|
|
<div class="step-header">
|
|
<span class="step-num">1</span>
|
|
<h3>Installeer Claude Desktop</h3>
|
|
</div>
|
|
<p>Download en installeer via <a href="https://claude.ai/download" target="_blank">claude.ai/download</a></p>
|
|
</div>
|
|
|
|
<div class="step">
|
|
<div class="step-header">
|
|
<span class="step-num">2</span>
|
|
<h3>Voeg Inou Connector toe</h3>
|
|
</div>
|
|
<p>In Claude Desktop:</p>
|
|
<ol style="margin: 8px 0 12px 20px;">
|
|
<li>Ga naar <strong>Instellingen → Connectoren</strong></li>
|
|
<li>Klik op <strong>Aangepaste connector toevoegen</strong></li>
|
|
<li>Vul de velden in:</li>
|
|
</ol>
|
|
<table style="margin: 12px 0; border-collapse: collapse; width: 100%;">
|
|
<tr>
|
|
<td style="padding: 8px 12px; border: 1px solid var(--border); background: var(--bg-muted); 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(--bg-muted); font-weight: 500;">Externe 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>, dan op <strong>Verbinden</strong>.</p>
|
|
</div>
|
|
|
|
<div class="step">
|
|
<div class="step-header">
|
|
<span class="step-num">3</span>
|
|
<h3>Aanmelden</h3>
|
|
</div>
|
|
<p>Uw browser opent om in te loggen bij <span class="inou-brand">inou</span>. Na het aanmelden klikt u op <strong>Claude openen</strong> om de verbinding te voltooien.</p>
|
|
</div>
|
|
|
|
<div class="step">
|
|
<div class="step-header">
|
|
<span class="step-num">4</span>
|
|
<h3>Tools toestaan</h3>
|
|
</div>
|
|
<p>Om te voorkomen dat u 11 keer om toestemming wordt gevraagd:</p>
|
|
<ol style="margin: 8px 0 12px 20px;">
|
|
<li>Ga naar <strong>Instellingen → Connectoren</strong> en zoek <strong>Inou Health</strong></li>
|
|
<li>Klik op <strong>Configureren</strong> (tandwielpictogram)</li>
|
|
<li>Selecteer bij <strong>Alleen-lezen tools</strong> de optie <strong>Altijd toestaan</strong></li>
|
|
</ol>
|
|
<p>Hiermee geeft u Claude toestemming om uw gezondheidsgegevens te lezen zonder elke keer opnieuw te vragen.</p>
|
|
</div>
|
|
|
|
<div class="step">
|
|
<div class="step-header">
|
|
<span class="step-num">5</span>
|
|
<h3>Aangepaste instructies toevoegen (aanbevolen)</h3>
|
|
</div>
|
|
<p>Om automatisch de gezondheidsgegevenscontext van uw familie in elk gesprek te laden:</p>
|
|
<ol style="margin: 8px 0 12px 20px;">
|
|
<li>Ga in Claude Desktop naar <strong>Instellingen → Aangepaste instructies</strong></li>
|
|
<li>Voeg in het tekstvak het volgende toe:</li>
|
|
</ol>
|
|
<div class="code-wrapper">
|
|
<pre id="custom-instructions">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('custom-instructions', 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>Dit vertelt Claude om te controleren welke gezondheidsgegevens beschikbaar zijn voor uw familieleden aan het begin van elk gesprek, zonder het contextvenster te vullen met feitelijke medische gegevens.</p>
|
|
</div>
|
|
|
|
<div class="step">
|
|
<div class="step-header">
|
|
<span class="step-num">6</span>
|
|
<h3>Testen</h3>
|
|
</div>
|
|
<p>Open Claude Desktop en probeer:</p>
|
|
<div class="code-wrapper">
|
|
<pre id="step-test">List my available dossiers.</pre>
|
|
<button class="copy-icon" onclick="copyCode('step-test', 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>U zou uw dossier(s) moeten zien. U bent helemaal klaar!</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Grok Tab -->
|
|
<div id="tab-grok" class="ai-content">
|
|
<p>Grok kan toegang krijgen tot uw gezondheidsgegevens via onze API met HTTP-verzoeken. Geen installatie nodig.</p>
|
|
|
|
{{if and .Dossier .Dossier.DossierID}}
|
|
{{if .TempToken}}
|
|
<div class="step">
|
|
<div class="step-header">
|
|
<span class="step-num">1</span>
|
|
<h3>Plak dit in Grok</h3>
|
|
</div>
|
|
<div class="code-wrapper">
|
|
<pre id="grok-code">Access my health data using the Inou API.
|
|
|
|
Fetch https://inou.com/api/v1/dossiers?token={{.TempToken}}
|
|
|
|
Show me the list of dossiers with their details and wait for my instructions.
|
|
|
|
API docs: https://inou.com/api/docs
|
|
|
|
IMPORTANT: This is real medical data. NEVER hallucinate. Only describe what you see.
|
|
|
|
If you get a 401 error with "token expired", ask me to visit https://inou.com/connect?tab=grok for a fresh token.</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>
|
|
<p class="step-note">Token verloopt op {{.TempTokenExpires}}. <a href="/connect?tab=grok">Ververs de pagina</a> voor een nieuw token.</p>
|
|
</div>
|
|
{{else}}
|
|
<div class="step">
|
|
<div class="step-header">
|
|
<span class="step-num">1</span>
|
|
<h3>Genereer API-token</h3>
|
|
</div>
|
|
<p>U heeft een API-token nodig om Grok te verbinden met uw gegevens.</p>
|
|
<form method="POST" action="/api/token/generate?return=grok" style="margin-top: 12px;">
|
|
<button type="submit" class="btn btn-primary">Token genereren</button>
|
|
</form>
|
|
</div>
|
|
{{end}}
|
|
{{else}}
|
|
<div class="login-tracker">
|
|
<a href="/start">Meld u aan</a> om uw API-token te genereren en gepersonaliseerde installatie-instructies te ontvangen.
|
|
</div>
|
|
{{end}}
|
|
|
|
<div class="step">
|
|
<div class="step-header">
|
|
<span class="step-num">→</span>
|
|
<h3>Wat Grok kan doen</h3>
|
|
</div>
|
|
<p>Eenmaal verbonden, vraag Grok om:</p>
|
|
<ul>
|
|
<li>Een lijst van al uw beeldvormingsstudies, genoomgegevens en laboratoriumresultaten</li>
|
|
<li>Series binnen een specifieke studie te tonen</li>
|
|
<li>Afzonderlijke doorsneden op te halen en te analyseren</li>
|
|
<li>Afbeeldingen te vergelijken over verschillende sequenties (T1, T2, FLAIR)</li>
|
|
<li>Naar specifieke anatomische gebieden te navigeren</li>
|
|
<li>Genoomvarianten op te vragen per gen, categorie of rsid</li>
|
|
<li>Medicatiereacties en gezondheidsrisico's te bekijken</li>
|
|
<li>Labwaarden in de loop van de tijd te volgen</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<p style="margin-top: 24px;">Bekijk de <a href="/api/docs" style="color: var(--accent);">volledige API-documentatie</a> voor alle beschikbare eindpunten.</p>
|
|
</div>
|
|
|
|
<!-- ChatGPT Tab -->
|
|
<div id="tab-chatgpt" class="ai-content">
|
|
<p style="color: var(--text-muted);">Niet aanbevolen voor medische beeldvorming vanwege een verhoogd hallucinatierisico in onze tests.</p>
|
|
|
|
<div class="step">
|
|
<div class="step-header">
|
|
<span class="step-num muted">✗</span>
|
|
<h3>Waarom niet ChatGPT?</h3>
|
|
</div>
|
|
<p>Medische beeldvorming vereist absolute nauwkeurigheid. In onze tests heeft ChatGPT informatie gefabriceerd, zelfs wanneer correcte gegevens duidelijk werden verstrekt. We kunnen het niet aanbevelen voor het analyseren van gezondheidsgegevens waarbij fouten echte gevolgen hebben.</p>
|
|
</div>
|
|
|
|
<div class="step">
|
|
<div class="step-header">
|
|
<span class="step-num">→</span>
|
|
<h3>Aanbevolen alternatieven</h3>
|
|
</div>
|
|
<p>Gebruik <a href="#" onclick="showTab('claude'); return false;">Claude Desktop</a> voor de beste ervaring met native tool-toegang, 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>Andere AI-assistenten kunnen toegang krijgen tot uw gegevens via onze web-API, hoewel de mogelijkheden variëren.</p>
|
|
|
|
<div class="step">
|
|
<div class="step-header">
|
|
<span class="step-num warning">⚠</span>
|
|
<h3>Gemini</h3>
|
|
</div>
|
|
<p>Het surfen op het web van Gemini is momenteel beperkt en kan inou.com-URL's mogelijk niet direct ophalen. Mogelijke oplossingen:</p>
|
|
<ul>
|
|
<li>Kopieer API-antwoorden handmatig en plak ze in Gemini</li>
|
|
<li>Gebruik Google AI Studio met functieaanroepen</li>
|
|
<li>Overweeg in plaats daarvan Claude Desktop of Grok te gebruiken</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="step">
|
|
<div class="step-header">
|
|
<span class="step-num">→</span>
|
|
<h3>Bouw uw eigen integratie</h3>
|
|
</div>
|
|
<p>Onze API is eenvoudig REST + JSON. Bekijk de <a href="/api/docs">API-documentatie</a> voor eindpunten en authenticatie.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{{template "footer"}}
|
|
|
|
</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');
|
|
}
|
|
|
|
// Check for tab parameter on page load
|
|
(function() {
|
|
const params = new URLSearchParams(window.location.search);
|
|
const tab = params.get('tab');
|
|
if (tab && document.getElementById('tab-' + tab)) {
|
|
showTab(tab);
|
|
}
|
|
})();
|
|
</script>
|
|
{{end}}
|