RAG Documentation MCP Server
by rahulretnan
- src
- public
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>MCP RAG Docs</title>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
<script>
tailwind.config = {
theme: {
extend: {
colors: {
primary: '#2563eb',
secondary: '#64748b',
danger: '#dc2626',
success: '#16a34a',
warning: '#d97706'
}
}
}
}
</script>
</head>
<body class="bg-slate-50">
<div class="max-w-7xl mx-auto p-4 md:p-8">
<header class="mb-8 text-center">
<h1 class="text-4xl font-bold text-primary"><i class="fas fa-book"></i> MCP RAG Docs</h1>
</header>
<main class="space-y-6">
<section class="bg-white rounded-lg shadow p-6">
<h2 class="text-xl font-semibold mb-4 flex items-center gap-2">
<i class="fas fa-plus-circle text-primary"></i> Add Documentation
</h2>
<div class="flex flex-col md:flex-row gap-2 mb-4">
<input type="url" id="docUrl" placeholder="Enter documentation URL"
class="flex-1 px-4 py-2 border border-slate-200 rounded-md focus:border-primary focus:outline-none">
<button id="extractUrlsBtn" class="btn-primary">
<i class="fas fa-link"></i> Extract URLs
</button>
</div>
<div id="extractedUrls" class="hidden border border-slate-200 rounded-md p-4 mt-4">
<h3 class="font-semibold mb-4">Extracted URLs</h3>
<div class="url-list max-h-48 overflow-y-auto mb-4"></div>
<div class="flex gap-2">
<button id="addAllUrlsBtn" class="btn-primary">
<i class="fas fa-plus-circle"></i> Add All
</button>
<button id="clearUrlsBtn" class="btn-secondary">
<i class="fas fa-times"></i> Clear
</button>
</div>
</div>
</section>
<section class="bg-white rounded-lg shadow p-6">
<div class="flex flex-col md:flex-row justify-between items-center mb-4">
<h2 class="text-xl font-semibold flex items-center gap-2">
<i class="fas fa-tasks text-primary"></i> Processing Queue
<span id="queueCount" class="text-sm font-normal text-slate-500"></span>
</h2>
<div class="flex gap-2 mt-2 md:mt-0">
<button id="processQueueBtn" class="btn-primary">
<i class="fas fa-play"></i> Process Queue
</button>
<button id="clearQueueBtn" class="btn-danger">
<i class="fas fa-trash"></i> Clear Queue
</button>
</div>
</div>
<div id="queueList" class="border border-slate-200 rounded-md divide-y divide-slate-200 max-h-[400px] overflow-y-auto">
<div class="p-8 text-center text-slate-500">Loading queue...</div>
</div>
</section>
<section class="bg-white rounded-lg shadow p-6">
<h2 class="text-xl font-semibold mb-4 flex items-center gap-2">
<i class="fas fa-search text-primary"></i> Search Documentation
</h2>
<div class="flex flex-col md:flex-row gap-2 mb-4">
<input type="text" id="searchQuery" placeholder="Enter your search query"
class="flex-1 px-4 py-2 border border-slate-200 rounded-md focus:border-primary focus:outline-none">
<button id="searchBtn" class="btn-primary">
<i class="fas fa-search"></i> Search
</button>
</div>
<div id="searchResults" class="space-y-4"></div>
</section>
<section class="bg-white rounded-lg shadow p-6">
<h2 class="text-xl font-semibold mb-4 flex items-center gap-2">
<i class="fas fa-file-alt text-primary"></i> Available Documents
</h2>
<div id="documentsList" class="border border-slate-200 rounded-md divide-y divide-slate-200">
<div class="p-8 text-center text-slate-500">Loading documents...</div>
</div>
<div class="flex items-center justify-center gap-4 mt-4 pt-4 border-t border-slate-200">
<button id="prevPageBtn" class="btn-secondary" disabled>
<i class="fas fa-chevron-left"></i> Previous
</button>
<span class="text-sm text-slate-500 select-none">
Page <span id="currentPage">1</span> of <span id="totalPages">1</span>
</span>
<button id="nextPageBtn" class="btn-secondary">
<i class="fas fa-chevron-right"></i> Next
</button>
</div>
</section>
</main>
<div id="toast" class="fixed bottom-8 right-8 hidden max-w-md w-full bg-white rounded-md shadow-lg border-l-4 p-4 flex items-center gap-4">
<span class="message flex-1"></span>
<button class="close p-1 hover:bg-slate-100 rounded" title="Close notification">
<i class="fas fa-times text-slate-500"></i>
</button>
</div>
</div>
<style>
/* Button styles */
.btn-primary {
@apply px-4 py-2 bg-primary text-white rounded-md font-medium inline-flex items-center gap-2 hover:bg-blue-700 transition-colors disabled:opacity-50 disabled:cursor-not-allowed;
}
.btn-secondary {
@apply px-4 py-2 bg-secondary text-white rounded-md font-medium inline-flex items-center gap-2 hover:bg-slate-600 transition-colors disabled:opacity-50 disabled:cursor-not-allowed;
}
.btn-danger {
@apply px-4 py-2 bg-danger text-white rounded-md font-medium inline-flex items-center gap-2 hover:bg-red-700 transition-colors disabled:opacity-50 disabled:cursor-not-allowed relative;
}
/* Loading state */
.loading {
@apply relative text-transparent pointer-events-none opacity-70;
}
.loading::after {
@apply absolute inset-0 m-auto w-4 h-4 border-2 border-transparent border-t-current rounded-full animate-spin;
content: '';
}
/* Delete button animation */
.btn-danger.deleting {
@apply bg-red-800 pointer-events-none;
animation: pulse 1.5s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
@keyframes pulse {
0%, 100% {
opacity: 1;
}
50% {
opacity: 0.5;
}
}
/* Toast variants */
.toast.success {
@apply border-success;
}
.toast.error {
@apply border-danger;
}
/* Delete confirmation tooltip */
.btn-danger:not(.deleting) .tooltip {
@apply invisible opacity-0 absolute -top-10 left-1/2 -translate-x-1/2 px-2 py-1 bg-slate-800 text-white text-xs rounded whitespace-nowrap transition-all;
}
.btn-danger:not(.deleting):hover .tooltip {
@apply visible opacity-100;
}
</style>
<script src="app.js"></script>
</body>
</html>