inou/portal/templates/docs.tmpl

{{define "docs"}}
<style>
  .docs-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 48px 24px 80px;
  }

  .docs-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 48px;
    margin-bottom: 24px;
  }

  .docs-card h1 {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 16px;
  }

  .docs-card .intro {
    font-size: 1.15rem;
    font-weight: 300;
    color: var(--text-muted);
    line-height: 1.8;
    margin-bottom: 0;
  }

  .docs-card h2 {
    font-size: 1.4rem;
    font-weight: 600;
    color: var(--text);
    margin-top: 0;
    margin-bottom: 24px;
  }

  .docs-card h3 {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text);
    margin-top: 24px;
    margin-bottom: 8px;
  }
  .docs-card h3:first-child { margin-top: 0; }

  .docs-card p, .docs-card li {
    font-size: 1rem;
    font-weight: 300;
    color: var(--text-muted);
    line-height: 1.8;
  }

  .docs-card p { margin-bottom: 16px; }
  .docs-card p:last-child { margin-bottom: 0; }

  .docs-card ul { margin-bottom: 16px; padding-left: 24px; }
  .docs-card li { margin-bottom: 4px; }

  .docs-card strong {
    font-weight: 600;
    color: var(--text);
  }

  .docs-card a { color: var(--accent); }

  .docs-card code {
    background: var(--bg-surface);
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 0.9rem;
  }

  .docs-card pre {
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 16px;
    overflow-x: auto;
    margin-bottom: 16px;
  }

  .docs-card pre code {
    background: none;
    padding: 0;
  }

  .example-box {
    background: var(--bg-surface);
    border-left: 3px solid var(--accent);
    border-radius: 0 8px 8px 0;
    padding: 16px 20px;
    margin-bottom: 16px;
  }

  .example-box .prompt {
    font-weight: 500;
    color: var(--text);
    margin-bottom: 8px;
  }

  .example-box .explanation {
    font-size: 0.9rem;
    color: var(--text-muted);
    margin: 0;
  }

  .tool-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 16px;
  }

  .tool-table th, .tool-table td {
    text-align: left;
    padding: 10px 12px;
    border-bottom: 1px solid var(--border);
    font-size: 0.95rem;
  }

  .tool-table th {
    font-weight: 600;
    color: var(--text);
  }

  .tool-table td {
    color: var(--text-muted);
    font-weight: 300;
  }
</style>

<div class="docs-container">

  <div class="docs-card">
    <h1>inou for Claude</h1>
    <p class="intro">
      <span style="font-weight: 700; color: var(--accent);">inou</span> gives Claude direct access to your health data
      for independent medical analysis. Imaging, labs, genomics, and 27 data categories &mdash;
      all queryable through a single MCP integration.
    </p>
  </div>

  <div class="docs-card">
    <h2>What it does</h2>
    <p>
      inou connects Claude to your personal health records stored on the inou platform.
      Claude can browse your medical imaging (MRI, CT, X-ray), review lab results with trends over time,
      analyze genomic variants, and read clinical documents &mdash; forming its own independent medical opinions
      from the raw data rather than echoing prior assessments.
    </p>
    <p>Key capabilities:</p>
    <ul>
      <li><strong>Medical imaging</strong> &mdash; View DICOM studies (MRI, CT, X-ray) with adjustable window/level, navigate series via contact sheets</li>
      <li><strong>Lab results</strong> &mdash; Query by LOINC code, track trends across multiple draws, SI unit normalization</li>
      <li><strong>Genomic data</strong> &mdash; Search variants by gene name, review pharmacogenomic and disease-risk markers</li>
      <li><strong>Clinical documents</strong> &mdash; Access uploaded documents with extracted text and metadata</li>
      <li><strong>27 data categories</strong> &mdash; Medications, diagnoses, surgeries, vitals, family history, and more</li>
    </ul>
  </div>

  <div class="docs-card">
    <h2>Setup</h2>
    <h3>1. Sign in</h3>
    <p>
      When you connect inou to Claude, you'll be redirected to <strong>inou.com</strong> to sign in.
      Enter your email and verify with the code sent to your inbox. No password needed.
    </p>
    <h3>2. Authorize</h3>
    <p>
      Review the access request and click <strong>Allow</strong> to grant Claude read-only access to your health data.
    </p>
    <h3>3. Start asking</h3>
    <p>
      Claude will automatically discover your dossiers and available data. Ask about your labs, imaging, genome, or any health topic.
    </p>
    <p>
      <strong>New users:</strong> A demo dossier (Jane Doe) with sample labs, imaging, and genome data
      is automatically available so you can explore the integration immediately.
    </p>
  </div>

  <div class="docs-card">
    <h2>Available tools</h2>
    <table class="tool-table">
      <tr><th>Tool</th><th>Description</th></tr>
      <tr><td><code>list_dossiers</code></td><td>List all patient dossiers accessible to your account</td></tr>
      <tr><td><code>list_categories</code></td><td>See what data categories exist for a dossier with entry counts</td></tr>
      <tr><td><code>list_entries</code></td><td>Query entries by category, type, LOINC code, gene, date range, or parent hierarchy</td></tr>
      <tr><td><code>fetch_image</code></td><td>Fetch a DICOM slice as PNG with adjustable window/level</td></tr>
      <tr><td><code>fetch_contact_sheet</code></td><td>Thumbnail grid for navigating imaging series</td></tr>
      <tr><td><code>fetch_document</code></td><td>Retrieve document content with extracted text and metadata</td></tr>
      <tr><td><code>get_version</code></td><td>Server version information</td></tr>
    </table>
    <p>All tools are <strong>read-only</strong>. Claude cannot modify your health data.</p>
  </div>

  <div class="docs-card">
    <h2>Examples</h2>

    <div class="example-box">
      <p class="prompt">"Review Jane Doe's CBC trend over the past year. Are there any concerning patterns?"</p>
      <p class="explanation">Claude queries lab entries by LOINC codes for WBC, RBC, hemoglobin, platelets, and differential. It compares values across four blood draws and identifies the December anomaly: elevated WBC (13.2), low hemoglobin (10.8), microcytic indices (MCV 72.4), and reactive thrombocytosis (452K) &mdash; suggesting iron deficiency with possible infection.</p>
    </div>

    <div class="example-box">
      <p class="prompt">"Look at Jane's brain MRI. Walk me through what you see."</p>
      <p class="explanation">Claude lists imaging studies, navigates to the brain MRI series, fetches a contact sheet for orientation, then retrieves individual slices at diagnostic resolution. It describes anatomy, signal characteristics, and any visible findings &mdash; forming its own read independent of any radiologist report.</p>
    </div>

    <div class="example-box">
      <p class="prompt">"What genetic variants does Jane carry that could affect medication metabolism?"</p>
      <p class="explanation">Claude queries genome entries filtered by pharmacogenomic genes (CYP2D6, CYP2C19, CYP3A4, etc.), reviews variant classifications and zygosity, and maps findings to drug metabolism implications &mdash; identifying poor/rapid metabolizer status for specific medication classes.</p>
    </div>
  </div>

  <div class="docs-card">
    <h2>Security &amp; privacy</h2>
    <ul>
      <li><strong>Encryption</strong> &mdash; All data encrypted at rest (AES-256-GCM, FIPS 140-3)</li>
      <li><strong>OAuth 2.1</strong> &mdash; Authorization code flow with PKCE, no passwords stored</li>
      <li><strong>Read-only</strong> &mdash; Claude can only read data, never modify or delete</li>
      <li><strong>RBAC</strong> &mdash; Role-based access control enforced at every data access point</li>
      <li><strong>Short-lived tokens</strong> &mdash; Access tokens expire in 15 minutes, refresh tokens rotate on use</li>
    </ul>
    <p>
      Read our full <a href="/privacy-policy">Privacy Policy</a>.
      For questions, contact <a href="mailto:support@inou.com">support@inou.com</a>.
    </p>
  </div>

</div>
{{end}}