246 lines
9.9 KiB
Cheetah
246 lines
9.9 KiB
Cheetah
{{define "connect"}}
|
|
<div class="install-container">
|
|
|
|
<div class="install-header">
|
|
<div>
|
|
<h1>Connect AI to Your Data</h1>
|
|
<p>Choose your AI assistant and follow the setup instructions.</p>
|
|
</div>
|
|
{{if and .Dossier .Dossier.DossierID}}<a href="/dashboard" class="btn btn-secondary btn-small">← Back</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')">Other AI</button>
|
|
</div>
|
|
|
|
<!-- Claude Desktop Tab -->
|
|
<div id="tab-claude" class="ai-content active">
|
|
<p>Claude Desktop connects directly to <span class="inou-brand">inou</span> via OAuth — no tokens to copy, no extensions to install.</p>
|
|
|
|
<div class="step">
|
|
<div class="step-header">
|
|
<span class="step-num">1</span>
|
|
<h3>Install Claude Desktop</h3>
|
|
</div>
|
|
<p>Download and install from <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>Add Inou Connector</h3>
|
|
</div>
|
|
<p>In Claude Desktop:</p>
|
|
<ol style="margin: 8px 0 12px 20px;">
|
|
<li>Go to <strong>Settings → Connectors</strong></li>
|
|
<li>Click <strong>Add custom connector</strong></li>
|
|
<li>Fill in the fields:</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;">Name</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;">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>Click <strong>Add</strong>, then <strong>Connect</strong>.</p>
|
|
</div>
|
|
|
|
<div class="step">
|
|
<div class="step-header">
|
|
<span class="step-num">3</span>
|
|
<h3>Sign In</h3>
|
|
</div>
|
|
<p>Your browser will open to sign in to <span class="inou-brand">inou</span>. After signing in, click <strong>Open Claude</strong> to complete the connection.</p>
|
|
</div>
|
|
|
|
<div class="step">
|
|
<div class="step-header">
|
|
<span class="step-num">4</span>
|
|
<h3>Allow Tools</h3>
|
|
</div>
|
|
<p>To avoid being asked 11 times for permission:</p>
|
|
<ol style="margin: 8px 0 12px 20px;">
|
|
<li>In <strong>Settings → Connectors</strong>, find <strong>Inou Health</strong></li>
|
|
<li>Click <strong>Configure</strong> (gear icon)</li>
|
|
<li>Under <strong>Read-only tools</strong>, select <strong>Always allow</strong></li>
|
|
</ol>
|
|
<p>This grants Claude permission to read your health data without asking each time.</p>
|
|
</div>
|
|
|
|
<div class="step">
|
|
<div class="step-header">
|
|
<span class="step-num">5</span>
|
|
<h3>Test</h3>
|
|
</div>
|
|
<p>Open Claude Desktop and try:</p>
|
|
<div class="code-wrapper">
|
|
<pre id="step-test">List my available dossiers.</pre>
|
|
<button class="copy-icon" onclick="copyCode('step-test', this)" title="Copy">
|
|
<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>You should see your dossier(s). You're all set!</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Grok Tab -->
|
|
<div id="tab-grok" class="ai-content">
|
|
<p>Grok can access your health data through our API using HTTP requests. No installation needed.</p>
|
|
|
|
{{if and .Dossier .Dossier.DossierID}}
|
|
{{if .TempToken}}
|
|
<div class="step">
|
|
<div class="step-header">
|
|
<span class="step-num">1</span>
|
|
<h3>Paste this into 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="Copy">
|
|
<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 expires at {{.TempTokenExpires}}. <a href="/connect?tab=grok">Refresh page</a> for a new token.</p>
|
|
</div>
|
|
{{else}}
|
|
<div class="step">
|
|
<div class="step-header">
|
|
<span class="step-num">1</span>
|
|
<h3>Generate API Token</h3>
|
|
</div>
|
|
<p>You need an API token to connect Grok to your data.</p>
|
|
<form method="POST" action="/api/token/generate?return=grok" style="margin-top: 12px;">
|
|
<button type="submit" class="btn btn-primary">Generate Token</button>
|
|
</form>
|
|
</div>
|
|
{{end}}
|
|
{{else}}
|
|
<div class="login-prompt">
|
|
<a href="/start">Sign in</a> to generate your API token and get personalized setup instructions.
|
|
</div>
|
|
{{end}}
|
|
|
|
<div class="step">
|
|
<div class="step-header">
|
|
<span class="step-num">→</span>
|
|
<h3>What Grok can do</h3>
|
|
</div>
|
|
<p>Once connected, ask Grok to:</p>
|
|
<ul>
|
|
<li>List all your imaging studies, genome data, and lab results</li>
|
|
<li>Show series within a specific study</li>
|
|
<li>Fetch and analyze individual slices</li>
|
|
<li>Compare images across different sequences (T1, T2, FLAIR)</li>
|
|
<li>Navigate to specific anatomical regions</li>
|
|
<li>Query genome variants by gene, category, or rsid</li>
|
|
<li>Review medication responses and health risks</li>
|
|
<li>Track lab values over time</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<p style="margin-top: 24px;">See the <a href="/api/docs" style="color: var(--accent);">full API documentation</a> for all available endpoints.</p>
|
|
</div>
|
|
|
|
<!-- ChatGPT Tab -->
|
|
<div id="tab-chatgpt" class="ai-content">
|
|
<p style="color: var(--text-muted);">Not recommended for medical imaging due to elevated hallucination risk in our testing.</p>
|
|
|
|
<div class="step">
|
|
<div class="step-header">
|
|
<span class="step-num muted">✗</span>
|
|
<h3>Why not ChatGPT?</h3>
|
|
</div>
|
|
<p>Medical imaging requires absolute accuracy. In our testing, ChatGPT fabricated information even when correct data was clearly provided. We cannot recommend it for analyzing health data where errors have real consequences.</p>
|
|
</div>
|
|
|
|
<div class="step">
|
|
<div class="step-header">
|
|
<span class="step-num">→</span>
|
|
<h3>Recommended alternatives</h3>
|
|
</div>
|
|
<p>Use <a href="#" onclick="showTab('claude'); return false;">Claude Desktop</a> for the best experience with native tool access, or <a href="#" onclick="showTab('grok'); return false;">Grok</a> for web-based access with no installation.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Other AI Tab -->
|
|
<div id="tab-other" class="ai-content">
|
|
<p>Other AI assistants can access your data through our web API, though capabilities vary.</p>
|
|
|
|
<div class="step">
|
|
<div class="step-header">
|
|
<span class="step-num warning">⚠</span>
|
|
<h3>Gemini</h3>
|
|
</div>
|
|
<p>Gemini's web browsing is currently restricted and may not be able to fetch inou.com URLs directly. Workarounds:</p>
|
|
<ul>
|
|
<li>Copy API responses manually and paste them into Gemini</li>
|
|
<li>Use Google AI Studio with function calling</li>
|
|
<li>Consider using Claude Desktop or Grok instead</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="step">
|
|
<div class="step-header">
|
|
<span class="step-num">→</span>
|
|
<h3>Build Your Own</h3>
|
|
</div>
|
|
<p>Our API is simple REST + JSON. See the <a href="/api/docs">API documentation</a> for endpoints and authentication.</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}}
|