Nextcloud MCP Server

{% 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 %}