Chris Coutinho
53689d076b
- Extract CSS and JavaScript into separate static files - Created nextcloud_mcp_server/auth/static/vector-viz.css - Created nextcloud_mcp_server/auth/static/vector-viz.js - Updated templates to reference external assets - Fix vector visualization issues: - Normalize vectors before PCA to match Qdrant's cosine distance - Add zero-norm and NaN detection/handling for large datasets - Enable responsive Plotly sizing (autosize + responsive config) - Widen plot area to full viewport width with minimized margins - Improve visualization accuracy: - Query point now positioned correctly relative to documents - Handles 200+ points without JSON serialization errors - Full-width plot maximizes screen space utilization 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
393 lines
18 KiB
HTML
393 lines
18 KiB
HTML
{% extends "base.html" %}
|
|
|
|
{% block title %}Welcome - Nextcloud MCP Server{% endblock %}
|
|
|
|
{% block extra_head %}
|
|
<!-- Alpine.js for interactive elements -->
|
|
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
|
|
{% endblock %}
|
|
|
|
{% block extra_styles %}
|
|
/* Welcome page specific styles */
|
|
.hero-section {
|
|
background: linear-gradient(135deg, var(--color-primary-element) 0%, #0082c9 100%);
|
|
color: white;
|
|
padding: 60px 24px;
|
|
margin: -24px -24px 40px -24px;
|
|
border-radius: 0 0 var(--border-radius-large) var(--border-radius-large);
|
|
text-align: center;
|
|
}
|
|
|
|
.hero-section h1 {
|
|
color: white;
|
|
font-size: 36px;
|
|
margin: 0 0 16px 0;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.hero-section p {
|
|
font-size: 18px;
|
|
opacity: 0.95;
|
|
max-width: 700px;
|
|
margin: 0 auto;
|
|
line-height: 1.6;
|
|
}
|
|
|
|
.feature-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
|
|
gap: 24px;
|
|
margin: 32px 0;
|
|
}
|
|
|
|
.feature-card {
|
|
background: var(--color-main-background);
|
|
border: 2px solid var(--color-border);
|
|
border-radius: var(--border-radius-large);
|
|
padding: 24px;
|
|
transition: all 0.2s;
|
|
cursor: pointer;
|
|
text-decoration: none;
|
|
color: inherit;
|
|
display: block;
|
|
}
|
|
|
|
.feature-card:hover {
|
|
border-color: var(--color-primary-element);
|
|
box-shadow: 0 4px 12px rgba(0, 103, 158, 0.15);
|
|
transform: translateY(-2px);
|
|
}
|
|
|
|
.feature-card h3 {
|
|
color: var(--color-primary-element);
|
|
font-size: 20px;
|
|
margin: 12px 0 8px 0;
|
|
font-weight: 600;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
}
|
|
|
|
.feature-card p {
|
|
color: var(--color-text-maxcontrast);
|
|
font-size: 14px;
|
|
line-height: 1.6;
|
|
margin: 8px 0 0 0;
|
|
}
|
|
|
|
.feature-icon {
|
|
width: 48px;
|
|
height: 48px;
|
|
background: var(--color-primary-element-light);
|
|
border-radius: var(--border-radius);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.feature-icon svg {
|
|
width: 28px;
|
|
height: 28px;
|
|
fill: var(--color-primary-element);
|
|
}
|
|
|
|
.info-section {
|
|
background: var(--color-background-hover);
|
|
border-radius: var(--border-radius-large);
|
|
padding: 32px;
|
|
margin: 32px 0;
|
|
}
|
|
|
|
.info-section h2 {
|
|
color: var(--color-main-text);
|
|
font-size: 24px;
|
|
margin: 0 0 16px 0;
|
|
border: none;
|
|
padding: 0;
|
|
}
|
|
|
|
.info-section p {
|
|
color: var(--color-text-maxcontrast);
|
|
line-height: 1.7;
|
|
margin: 12px 0;
|
|
}
|
|
|
|
.info-section ul {
|
|
margin: 12px 0;
|
|
padding-left: 24px;
|
|
}
|
|
|
|
.info-section li {
|
|
color: var(--color-text-maxcontrast);
|
|
line-height: 1.7;
|
|
margin: 8px 0;
|
|
}
|
|
|
|
.info-section code {
|
|
background: var(--color-main-background);
|
|
padding: 2px 8px;
|
|
border-radius: var(--border-radius);
|
|
font-size: 13px;
|
|
}
|
|
|
|
.auth-status {
|
|
background: var(--color-primary-element-light);
|
|
border-left: 4px solid var(--color-primary-element);
|
|
padding: 16px 20px;
|
|
margin: 24px 0;
|
|
border-radius: var(--border-radius);
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
}
|
|
|
|
.auth-status svg {
|
|
width: 24px;
|
|
height: 24px;
|
|
fill: var(--color-primary-element);
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.auth-status-text {
|
|
flex: 1;
|
|
}
|
|
|
|
.auth-status-text strong {
|
|
display: block;
|
|
color: var(--color-main-text);
|
|
font-size: 14px;
|
|
margin-bottom: 4px;
|
|
}
|
|
|
|
.auth-status-text span {
|
|
color: var(--color-text-maxcontrast);
|
|
font-size: 13px;
|
|
}
|
|
{% endblock %}
|
|
|
|
{% block content %}
|
|
<div class="app-content-wrapper">
|
|
<!-- Main Content Area -->
|
|
<main id="app-content">
|
|
<div class="page-content">
|
|
<!-- Hero Section -->
|
|
<div class="hero-section">
|
|
<h1>Welcome to Nextcloud MCP Server</h1>
|
|
<p>
|
|
Interactive user interface for semantic search and document retrieval.
|
|
Test queries, visualize results, and explore your Nextcloud content using RAG workflows.
|
|
</p>
|
|
</div>
|
|
|
|
<!-- Authentication Status -->
|
|
<div class="auth-status">
|
|
<svg viewBox="0 0 24 24">
|
|
<path d="M12,4A4,4 0 0,1 16,8A4,4 0 0,1 12,12A4,4 0 0,1 8,8A4,4 0 0,1 12,4M12,14C16.42,14 20,15.79 20,18V20H4V18C4,15.79 7.58,14 12,14Z" />
|
|
</svg>
|
|
<div class="auth-status-text">
|
|
<strong>Authenticated as: {{ username }}</strong>
|
|
<span>Authentication mode: <code>{{ auth_mode }}</code></span>
|
|
</div>
|
|
</div>
|
|
|
|
{% if vector_sync_enabled %}
|
|
<!-- Vector Sync Enabled Content -->
|
|
<div class="info-section">
|
|
<h2>About Semantic Search</h2>
|
|
<p>
|
|
This interface provides access to <strong>semantic search</strong> capabilities powered by vector embeddings.
|
|
Unlike traditional keyword search, semantic search understands the <em>meaning</em> of your queries and finds
|
|
conceptually similar content across your Nextcloud apps.
|
|
</p>
|
|
<p>
|
|
<strong>How it works:</strong>
|
|
</p>
|
|
<ul>
|
|
<li>Documents from Notes, Calendar, Files, Contacts, and Deck are indexed into a vector database</li>
|
|
<li>Each document chunk is converted to a 768-dimensional vector embedding that captures semantic meaning</li>
|
|
<li>Queries are also converted to embeddings and matched against document vectors using similarity search</li>
|
|
<li>Results can be retrieved using pure semantic search or hybrid BM25 search combining keywords and semantics</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="info-section">
|
|
<h2>RAG Workflow Integration</h2>
|
|
<p>
|
|
This UI allows you to <strong>test the same queries that Large Language Models (LLMs) would use</strong> in a
|
|
Retrieval-Augmented Generation (RAG) workflow. When an AI assistant needs to answer questions about your data:
|
|
</p>
|
|
<ul>
|
|
<li><strong>Step 1:</strong> The assistant converts your question into a search query</li>
|
|
<li><strong>Step 2:</strong> The MCP server retrieves relevant document chunks using semantic search</li>
|
|
<li><strong>Step 3:</strong> Retrieved context is passed to the LLM to generate an informed answer</li>
|
|
</ul>
|
|
|
|
<!-- RAG Workflow Diagram -->
|
|
<div style="background: var(--color-main-background); border: 2px solid var(--color-primary-element); border-radius: var(--border-radius-large); padding: 24px; margin: 24px 0; font-family: 'SFMono-Regular', 'Consolas', 'Liberation Mono', 'Menlo', monospace; font-size: 13px; line-height: 1.8; overflow-x: auto;">
|
|
<div style="text-align: center; font-weight: 600; margin-bottom: 16px; color: var(--color-primary-element); font-size: 14px;">
|
|
MCP Sampling RAG Workflow
|
|
</div>
|
|
<pre style="margin: 0; color: var(--color-main-text);">
|
|
┌─────────────────┐
|
|
│ <strong>MCP Client</strong> │ User asks: "What are health benefits of coffee?"
|
|
│ (Claude Code) │
|
|
└────────┬────────┘
|
|
│ (1) User question
|
|
↓
|
|
┌────────────────────────────────────────────────────────────────────────┐
|
|
│ <strong>Nextcloud MCP Server</strong> │
|
|
│ ┌──────────────────────────────────────────────────────────────────┐ │
|
|
│ │ <strong>nc_semantic_search_answer</strong> Tool (MCP Sampling-enabled) │ │
|
|
│ │ │ │
|
|
│ │ (2) Semantic Search │ │
|
|
│ │ ┌────────────────────────────────────────────────────────┐ │ │
|
|
│ │ │ Query: "health benefits of coffee" │ │ │
|
|
│ │ │ → Convert to 768D vector embedding │ │ │
|
|
│ │ │ → Search Qdrant (BM25 Hybrid + RRF fusion) │ │ │
|
|
│ │ │ → Retrieve top 5 relevant document chunks │ │ │
|
|
│ │ └────────────────────────────────────────────────────────┘ │ │
|
|
│ │ │ │
|
|
│ │ (3) Construct Prompt with Context │ │
|
|
│ │ ┌────────────────────────────────────────────────────────┐ │ │
|
|
│ │ │ "What are health benefits of coffee? │ │ │
|
|
│ │ │ │ │ │
|
|
│ │ │ Documents: │ │ │
|
|
│ │ │ - [MED-2155] Effects of habitual coffee consumption...│ │ │
|
|
│ │ │ - [MED-1646] Beverage consumption guidance... │ │ │
|
|
│ │ │ - [MED-1627] Coffee and depression risk... │ │ │
|
|
│ │ │ ... │ │ │
|
|
│ │ │ │ │ │
|
|
│ │ │ Provide answer with citations." │ │ │
|
|
│ │ └────────────────────────────────────────────────────────┘ │ │
|
|
│ │ │ │
|
|
│ │ (4) MCP Sampling Request │ │
|
|
│ │ ─────────────────────────────────────────────────────────────> │ │
|
|
│ └──────────────────────────────────────────────────────────────────┘ │
|
|
└────────────────────────────────────────────────────────────────────────┘
|
|
│
|
|
│ Sampling request with prompt + context
|
|
↓
|
|
┌─────────────────┐
|
|
│ <strong>MCP Client</strong> │ (5) Client's LLM generates answer using retrieved context
|
|
│ (Claude) │ → "Coffee consumption (2-3 cups/day) is associated with
|
|
└────────┬────────┘ reduced risk of type 2 diabetes, cardiovascular disease,
|
|
│ and improved liver health (Document 1, 2)..."
|
|
│
|
|
│ (6) Answer with citations
|
|
↓
|
|
┌─────────────────┐
|
|
│ User │ Receives comprehensive answer with source citations
|
|
└─────────────────┘</pre>
|
|
</div>
|
|
|
|
<p style="margin-top: 16px;">
|
|
<strong>Key Point:</strong> The MCP server retrieves context but doesn't generate answers itself.
|
|
Through <strong>MCP sampling</strong>, it requests the client's LLM to generate responses, giving users
|
|
full control over which model is used and ensuring all processing happens client-side.
|
|
</p>
|
|
|
|
<p>
|
|
By using this interface, you can preview search results, understand relevance scores, and verify
|
|
that the system retrieves the right information before it reaches the LLM.
|
|
</p>
|
|
</div>
|
|
|
|
<!-- Feature Cards -->
|
|
<h2>Available Features</h2>
|
|
<div class="feature-grid">
|
|
<a href="/app/user-info" class="feature-card">
|
|
<div class="feature-icon">
|
|
<svg viewBox="0 0 24 24">
|
|
<path d="M12,4A4,4 0 0,1 16,8A4,4 0 0,1 12,12A4,4 0 0,1 8,8A4,4 0 0,1 12,4M12,14C16.42,14 20,15.79 20,18V20H4V18C4,15.79 7.58,14 12,14Z" />
|
|
</svg>
|
|
</div>
|
|
<h3>User Information</h3>
|
|
<p>
|
|
View your authentication details, session information, and IdP profile.
|
|
Manage background access permissions.
|
|
</p>
|
|
</a>
|
|
|
|
<a href="/app/user-info#vector-sync" class="feature-card">
|
|
<div class="feature-icon">
|
|
<svg viewBox="0 0 24 24">
|
|
<path d="M12,18A6,6 0 0,1 6,12C6,11 6.25,10.03 6.7,9.2L5.24,7.74C4.46,8.97 4,10.43 4,12A8,8 0 0,0 12,20V23L16,19L12,15M12,4V1L8,5L12,9V6A6,6 0 0,1 18,12C18,13 17.75,13.97 17.3,14.8L18.76,16.26C19.54,15.03 20,13.57 20,12A8,8 0 0,0 12,4Z" />
|
|
</svg>
|
|
</div>
|
|
<h3>Vector Sync Status</h3>
|
|
<p>
|
|
Monitor real-time indexing progress with metrics for indexed documents, pending queue,
|
|
and synchronization status.
|
|
</p>
|
|
</a>
|
|
|
|
<a href="/app/user-info#vector-viz" class="feature-card">
|
|
<div class="feature-icon">
|
|
<svg viewBox="0 0 24 24">
|
|
<path d="M22,21H2V3H4V19H6V10H10V19H12V6H16V19H18V14H22V21Z" />
|
|
</svg>
|
|
</div>
|
|
<h3>Vector Visualization</h3>
|
|
<p>
|
|
Interactive search interface with 2D PCA visualization. Compare algorithms,
|
|
view relevance scores, and explore matched document chunks.
|
|
</p>
|
|
</a>
|
|
</div>
|
|
|
|
{% else %}
|
|
<!-- Vector Sync Disabled Content -->
|
|
<div class="warning">
|
|
<h3 style="margin-top: 0;">Vector Sync is Disabled</h3>
|
|
<p>
|
|
Semantic search and vector visualization features are currently disabled.
|
|
To enable these features, set <code>VECTOR_SYNC_ENABLED=true</code> in your environment configuration.
|
|
</p>
|
|
<p style="margin-bottom: 0;">
|
|
<strong>Learn more:</strong>
|
|
<a href="https://github.com/YOUR_REPO/docs/configuration.md" target="_blank" style="color: inherit; text-decoration: underline;">
|
|
Configuration Guide
|
|
</a>
|
|
</p>
|
|
</div>
|
|
|
|
<!-- Limited Feature Card -->
|
|
<h2>Available Features</h2>
|
|
<div class="feature-grid">
|
|
<a href="/app/user-info" class="feature-card">
|
|
<div class="feature-icon">
|
|
<svg viewBox="0 0 24 24">
|
|
<path d="M12,4A4,4 0 0,1 16,8A4,4 0 0,1 12,12A4,4 0 0,1 8,8A4,4 0 0,1 12,4M12,14C16.42,14 20,15.79 20,18V20H4V18C4,15.79 7.58,14 12,14Z" />
|
|
</svg>
|
|
</div>
|
|
<h3>User Information</h3>
|
|
<p>
|
|
View your authentication details, session information, and IdP profile.
|
|
Manage background access permissions.
|
|
</p>
|
|
</a>
|
|
</div>
|
|
{% endif %}
|
|
|
|
<!-- Documentation Section -->
|
|
<div class="info-section" style="margin-top: 40px;">
|
|
<h2>Documentation</h2>
|
|
<p>
|
|
For detailed information about configuration, authentication modes, and advanced features,
|
|
please refer to the project documentation:
|
|
</p>
|
|
<ul>
|
|
<li><a href="https://github.com/cbcoutinho/nextcloud-mcp-server/blob/master/docs/installation.md" target="_blank">Installation Guide</a></li>
|
|
<li><a href="https://github.com/cbcoutinho/nextcloud-mcp-server/blob/master/docs/configuration.md" target="_blank">Configuration Options</a></li>
|
|
<li><a href="https://github.com/cbcoutinho/nextcloud-mcp-server/blob/master/docs/authentication.md" target="_blank">Authentication Modes</a></li>
|
|
{% if vector_sync_enabled %}
|
|
<li><a href="https://github.com/cbcoutinho/nextcloud-mcp-server/blob/master/docs/user-guide/vector-sync-ui.md" target="_blank">Vector Sync UI Guide</a></li>
|
|
{% endif %}
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
</div>
|
|
{% endblock %}
|