287 lines
12 KiB
Cheetah
287 lines
12 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>
|
|
|
|
{{if not (and .Dossier .Dossier.DossierID)}}
|
|
<div class="login-prompt">
|
|
<strong>Note:</strong> <a href="/start">Sign in</a> to see personalized setup instructions with your account token pre-filled.
|
|
</div>
|
|
{{end}}
|
|
|
|
<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 with MCP provides the richest experience — native tool access, no URL fetching, full API capabilities.</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>Install Inou Extension</h3>
|
|
</div>
|
|
<p>Download <a href="/download/inou.mcpb">inou.mcpb</a> and install:</p>
|
|
<ul style="margin: 8px 0 12px 20px;">
|
|
<li><strong>Mac:</strong> Double-click the file</li>
|
|
<li><strong>Windows:</strong> In Claude Desktop, go to <em>File → Import Extension</em> and select the downloaded file</li>
|
|
</ul>
|
|
<p>When prompted, enter your API token:</p>
|
|
{{if and .Dossier .Dossier.DossierID}}
|
|
{{if .APIToken}}
|
|
<div class="code-wrapper">
|
|
<pre id="step2-token">{{.APIToken}}</pre>
|
|
<button class="copy-icon" onclick="copyCode('step2-token', 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>
|
|
{{else}}
|
|
<form method="POST" action="/api/token/generate" style="margin: 12px 0;">
|
|
<button type="submit" class="btn btn-primary btn-small">Generate Token</button>
|
|
</form>
|
|
{{end}}
|
|
{{else}}
|
|
<div class="code-wrapper">
|
|
<pre id="step2-token">YOUR_API_TOKEN</pre>
|
|
</div>
|
|
{{end}}
|
|
<p class="step-note"><strong>Note:</strong> You'll see a permissions warning — this is normal for any extension not yet in Claude's official directory. <span class="inou-brand">inou</span> only makes HTTPS calls to inou.com; it does not access local files.</p>
|
|
</div>
|
|
|
|
<div class="step">
|
|
<div class="step-header">
|
|
<span class="step-num">3</span>
|
|
<h3>Enable & Allow Permissions</h3>
|
|
</div>
|
|
<p>Go to <strong>Settings → Extensions</strong> and enable the Inou extension if it's not already on.</p>
|
|
<p>When first using the extension, Claude will ask permission for each tool. Select <strong>"Allow for this chat"</strong> and check <strong>"Don't ask again for inou-health"</strong> to grant all permissions at once — otherwise you'll be prompted 11 times.</p>
|
|
</div>
|
|
|
|
<div class="step">
|
|
<div class="step-header">
|
|
<span class="step-num">4</span>
|
|
<h3>Test</h3>
|
|
</div>
|
|
<p>Open Claude Desktop and paste:</p>
|
|
<div class="code-wrapper">
|
|
<pre id="step3-test">List my available dossiers using the inou bridge.</pre>
|
|
<button class="copy-icon" onclick="copyCode('step3-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>
|
|
|
|
<details style="margin-top: 24px;">
|
|
<summary style="cursor: pointer; color: var(--text-muted); font-size: 0.9rem;">Manual installation (advanced)</summary>
|
|
<div style="margin-top: 16px;">
|
|
<div class="step">
|
|
<div class="step-header">
|
|
<span class="step-num muted">1</span>
|
|
<h3>Download Bridge</h3>
|
|
</div>
|
|
<p>Download the bridge for your system:</p>
|
|
<ul>
|
|
<li><a href="/download/inou_bridge_darwin_arm64">Mac Apple Silicon</a></li>
|
|
<li><a href="/download/inou_bridge_darwin_amd64">Mac Intel</a></li>
|
|
<li><a href="/download/inou_bridge_win_amd64.exe">Windows 64-bit</a></li>
|
|
</ul>
|
|
<p>Save to ~/bin/inou_bridge (Mac) or %USERPROFILE%\inou\inou_bridge.exe (Windows). Make executable on Mac: chmod +x ~/bin/inou_bridge</p>
|
|
</div>
|
|
<div class="step">
|
|
<div class="step-header">
|
|
<span class="step-num muted">2</span>
|
|
<h3>Configure Claude</h3>
|
|
</div>
|
|
<p>Edit Claude config (Mac: ~/Library/Application Support/Claude/claude_desktop_config.json, Windows: %APPDATA%\Claude\claude_desktop_config.json) and add to mcpServers:</p>
|
|
<div class="code-wrapper">
|
|
<pre id="manual-config">"inou": {
|
|
"command": "BRIDGE_PATH",
|
|
"args": ["--server=https://inou.com", "--account={{if .APIToken}}{{.APIToken}}{{else}}YOUR_API_TOKEN{{end}}"]
|
|
}</pre>
|
|
<button class="copy-icon" onclick="copyCode('manual-config', 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>Replace BRIDGE_PATH with the actual path. Restart Claude Desktop.</p>
|
|
</div>
|
|
</div>
|
|
</details>
|
|
</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.</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}}
|