Skip to main content
Glama

mcp-perplexity

MIT License
62
  • Linux
  • Apple
base.html9.51 kB
<!DOCTYPE html> <html lang="en" class="dark h-full"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>{% block title %}MCP Perplexity{% endblock %}</title> <!-- HTMX for dynamic updates --> <script src="https://unpkg.com/htmx.org@1.9.10"></script> <!-- Custom JavaScript --> <script> function confirmDeleteChat(chatId) { window.dialog.confirm({ title: 'Delete Chat', message: 'Are you sure you want to delete this chat? This action cannot be undone.', onConfirm: () => { fetch(`/api/chat/${chatId}`, { method: 'DELETE', headers: { 'Content-Type': 'application/json' } }) .then(response => { if (!response.ok) { throw new Error('Failed to delete chat'); } // Remove the chat element from the DOM const chatElement = document.getElementById(`chat-${chatId}`); if (chatElement) { chatElement.remove(); } else { // If we're on the chat page, redirect to home window.location.href = '/'; } }) .catch(error => { window.dialog.error({ title: 'Error', message: 'An error occurred while deleting the chat.' }); }); } }); } </script> <!-- Custom styles with CSS variables --> <style> :root { /* Tokyo Night Dark Theme Variables */ --tokyo-bg-default: #16161e; --tokyo-bg-secondary: #1a1b26; --tokyo-bg-accent: #24283b; --tokyo-bg-message: #2f334d; --tokyo-text-default: #cfc9c2; --tokyo-text-secondary: #787c99; --tokyo-accent-blue: #7dcfff; --tokyo-accent-green: #9ece6a; --tokyo-accent-red: #f7768e; --tokyo-accent-yellow: #e0af68; --tokyo-accent-purple: #bb9af7; --tokyo-accent-orange: #ff9e64; } body { background-color: var(--tokyo-bg-default); color: var(--tokyo-text-default); min-height: 100vh; display: flex; flex-direction: column; } /* Think element styling */ details.think { display: block; border-left: 4px solid var(--tokyo-accent-blue); border-radius: 0 8px 8px 0; background-color: rgba(36, 40, 59, 0.6); padding: 0.5rem 1rem; margin: 1.5rem 0; color: var(--tokyo-text-secondary); box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); transition: all 0.3s ease; } details.think:hover { color: var(--tokyo-text-default); border-left-color: var(--tokyo-accent-green); background-color: rgba(36, 40, 59, 0.8); box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15); } details.think[open] { color: var(--tokyo-text-default); border-left-color: var(--tokyo-accent-purple); background-color: rgba(36, 40, 59, 0.8); } details.think > summary { outline: none; font-weight: 600; margin-bottom: 0.5rem; cursor: pointer; user-select: none; color: var(--tokyo-accent-blue); transition: color 0.2s ease; list-style: none; position: relative; padding-left: 1.5rem; } details.think > summary::before { content: "▶"; position: absolute; left: 0; font-size: 0.8rem; top: 50%; transform: translateY(-50%); transition: transform 0.3s ease; } details.think[open] > summary::before { transform: translateY(-50%) rotate(90deg); } details.think > summary:hover { color: var(--tokyo-accent-green); } details.think[open] > summary { color: var(--tokyo-accent-purple); } details.think .think-content { margin-top: 0.75rem; padding-top: 0.75rem; border-top: 1px solid rgba(120, 124, 153, 0.2); animation: fadeIn 0.3s ease-in-out; } details.think .think-content * { color: inherit; } details.think .think-content p { margin-bottom: 0.5rem; } details.think .think-content pre { background-color: rgba(26, 27, 38, 0.6); border-radius: 4px; padding: 0.75rem; margin: 0.75rem 0; } @keyframes fadeIn { 0% { opacity: 0; transform: translateY(-10px); } 100% { opacity: 1; transform: translateY(0); } } .chat-container { max-height: calc(100vh - 200px); overflow-y: auto; } .message { margin: 10px 0; padding: 10px; border-radius: 8px; } .message.assistant { background-color: var(--tokyo-bg-message); margin-right: 5%; color: var(--tokyo-text-default); } .message.user { background-color: var(--tokyo-bg-accent); margin-left: 5%; color: var(--tokyo-text-default); } /* Scrollbar styling */ .chat-container::-webkit-scrollbar { width: 8px; } .chat-container::-webkit-scrollbar-track { background: var(--tokyo-bg-secondary); } .chat-container::-webkit-scrollbar-thumb { background: var(--tokyo-text-secondary); border-radius: 4px; } .chat-container::-webkit-scrollbar-thumb:hover { background: var(--tokyo-accent-blue); } /* Navigation and footer styling */ nav, footer { background-color: var(--tokyo-bg-secondary); color: var(--tokyo-text-default); } a { color: var(--tokyo-accent-blue); } a:hover { color: var(--tokyo-accent-green); } .message { margin: 10px 0; padding: 10px; border-radius: 8px; width: 100%; max-width: 100%; overflow-wrap: break-word; word-wrap: break-word; } </style> <!-- Tailwind CSS for styling --> <script src="https://cdn.tailwindcss.com"></script> <script src="https://cdn.tailwindcss.com?plugins=typography"></script> <script> tailwind.config = { darkMode: 'class', theme: { extend: { colors: { tokyo: { bg: { DEFAULT: 'var(--tokyo-bg-default)', secondary: 'var(--tokyo-bg-secondary)', accent: 'var(--tokyo-bg-accent)', message: 'var(--tokyo-bg-message)' }, text: { DEFAULT: 'var(--tokyo-text-default)', secondary: 'var(--tokyo-text-secondary)' }, accent: { blue: 'var(--tokyo-accent-blue)', green: 'var(--tokyo-accent-green)', red: 'var(--tokyo-accent-red)', yellow: 'var(--tokyo-accent-yellow)', purple: 'var(--tokyo-accent-purple)', orange: 'var(--tokyo-accent-orange)' } } }, typography: { DEFAULT: { css: { maxWidth: 'none', width: '100%', color: 'var(--tokyo-text-default)', overflow: 'hidden', h1: { color: 'var(--tokyo-text-default)' }, h2: { color: 'var(--tokyo-text-default)' }, h3: { color: 'var(--tokyo-text-default)' }, h4: { color: 'var(--tokyo-text-default)' }, p: { color: 'var(--tokyo-text-default)', whiteSpace: 'pre-wrap', wordBreak: 'break-word', overflow: 'hidden', width: '100%', maxWidth: '100%' }, 'pre': { backgroundColor: 'var(--tokyo-bg-accent)', overflowX: 'auto', borderRadius: '0.5rem', padding: '1rem', margin: '0.5rem 0', width: '100%', maxWidth: '100%', fontSize: '0.875em', position: 'relative', whiteSpace: 'pre-wrap' }, 'code': { wordBreak: 'break-word', whiteSpace: 'pre-wrap' }, '@keyframes fadeIn': { '0%': { opacity: 0, transform: 'translateY(-10px)' }, '100%': { opacity: 1, transform: 'translateY(0)' } } } } } } } } </script> </head> <body class="dark:bg-tokyo-bg min-h-screen"> <nav class="shadow-sm dark:bg-tokyo-bg-secondary"> <div class="container mx-auto px-4 sm:px-6 lg:px-8"> <div class="flex justify-between h-12"> <div class="flex"> <div class="flex-shrink-0 flex items-center"> <a href="/" class="text-lg font-bold dark:text-tokyo-text"> MCP Perplexity </a> </div> </div> </div> </div> </nav> <main class="container mx-auto px-4 sm:px-6 lg:px-8 py-4 flex-grow"> {% block content %}{% endblock %} </main> <footer class="border-t dark:bg-tokyo-bg-secondary dark:border-tokyo-bg-accent mt-auto"> <div class="max-w-7xl mx-auto py-2 px-4 sm:px-6 lg:px-8"> <p class="text-center text-sm dark:text-tokyo-text-secondary"> <a href="https://github.com/daniel-lxs" class="text-tokyo-accent-blue">Made with ❤️</a> </p> </div> </footer> {% include '_dialog.html' %} </body> </html>

MCP directory API

We provide all the information about MCP servers via our MCP API.

curl -X GET 'https://glama.ai/api/mcp/v1/servers/daniel-lxs/mcp-perplexity'

If you have feedback or need assistance with the MCP directory API, please join our Discord server