Pensieve MCP Server
by EmjayAhn
- pensieve-mcp
- api_server
- static
index.html•21.9 kB
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pensieve - AI 대화를 기억하는 마법의 도구</title>
<script src="https://cdn.tailwindcss.com"></script>
<script>
tailwind.config = {
theme: {
extend: {
typography: {
DEFAULT: {
css: {
maxWidth: 'none',
color: '#374151',
pre: {
backgroundColor: '#f3f4f6',
color: '#1f2937',
},
code: {
backgroundColor: '#f3f4f6',
color: '#1f2937',
padding: '0.125rem 0.25rem',
borderRadius: '0.25rem',
fontWeight: '500'
},
'code::before': {
content: '""'
},
'code::after': {
content: '""'
}
}
}
}
}
},
plugins: []
}
</script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<script src="https://cdn.jsdelivr.net/npm/marked@9.1.2/marked.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.8.0/styles/github.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.8.0/highlight.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/dayjs@1.11.10/dayjs.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/dayjs@1.11.10/plugin/utc.js"></script>
<script src="https://cdn.jsdelivr.net/npm/dayjs@1.11.10/plugin/timezone.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/aos/2.3.4/aos.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/aos/2.3.4/aos.css" rel="stylesheet">
<style>
/* Custom markdown styles */
.prose {
--tw-prose-body: #374151;
--tw-prose-headings: #111827;
--tw-prose-code: #1f2937;
--tw-prose-pre-code: #1f2937;
--tw-prose-pre-bg: #f3f4f6;
}
.prose pre {
background-color: #f3f4f6;
border: 1px solid #e5e7eb;
border-radius: 0.5rem;
padding: 1rem;
overflow-x: auto;
}
.prose code {
background-color: #f3f4f6;
color: #1f2937;
padding: 0.125rem 0.25rem;
border-radius: 0.25rem;
font-weight: 500;
font-size: 0.875em;
}
.prose pre code {
background-color: transparent;
padding: 0;
border-radius: 0;
font-weight: 400;
}
.prose blockquote {
border-left: 4px solid #6366f1;
background-color: #f8fafc;
padding: 0.5rem 1rem;
margin: 1rem 0;
}
.prose table {
border-collapse: collapse;
width: 100%;
}
.prose th, .prose td {
border: 1px solid #e5e7eb;
padding: 0.5rem;
text-align: left;
}
.prose th {
background-color: #f3f4f6;
font-weight: 600;
}
/* Full screen sections */
.section-full {
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
/* Smooth scroll behavior */
html {
scroll-behavior: smooth;
}
/* Fixed navigation on scroll */
.nav-fixed {
position: fixed;
top: 0;
left: 0;
right: 0;
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(10px);
border-bottom: 1px solid rgba(229, 231, 235, 0.3);
z-index: 50;
transition: all 0.3s ease;
}
/* Hero background animation */
.hero-bg {
background: linear-gradient(-45deg, #6366f1, #8b5cf6, #ec4899, #06b6d4);
background-size: 400% 400%;
animation: gradientShift 15s ease infinite;
}
@keyframes gradientShift {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}
/* Floating animation */
.float-animation {
animation: float 6s ease-in-out infinite;
}
@keyframes float {
0%, 100% { transform: translateY(0px); }
50% { transform: translateY(-20px); }
}
/* Section indicator dots */
.section-indicators {
position: fixed;
right: 2rem;
top: 50%;
transform: translateY(-50%);
z-index: 40;
}
.indicator-dot {
width: 12px;
height: 12px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.5);
border: 2px solid rgba(255, 255, 255, 0.8);
margin: 1rem 0;
cursor: pointer;
transition: all 0.3s ease;
}
.indicator-dot.active {
background: #6366f1;
border-color: #6366f1;
transform: scale(1.2);
}
/* Removed scroll snap - just smooth scrolling */
/* Hide default scrollbar on webkit browsers */
::-webkit-scrollbar {
width: 8px;
}
::-webkit-scrollbar-track {
background: #f1f1f1;
}
::-webkit-scrollbar-thumb {
background: #6366f1;
border-radius: 4px;
}
</style></script>
</head>
<body class="overflow-x-hidden">
<!-- Navigation -->
<nav id="navbar" class="absolute top-0 left-0 right-0 z-50 bg-transparent">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex justify-between items-center py-6">
<div class="flex items-center">
<a href="/" class="text-2xl font-bold text-gray-900">🔮 Pensieve</a>
</div>
<div class="flex items-center space-x-6">
<a href="/features.html" class="text-gray-700 hover:text-gray-900 font-medium">기능 안내</a>
<a href="/setup.html" class="text-gray-700 hover:text-gray-900 font-medium">MCP 설정</a>
<button id="login-btn" class="text-gray-700 hover:text-gray-900 font-medium">
로그인
</button>
<button id="register-btn" class="bg-indigo-600 text-white px-4 py-2 rounded-lg hover:bg-indigo-700 transition-colors duration-200">
시작하기
</button>
</div>
</div>
</div>
</nav>
<!-- Hero Section -->
<section id="hero" class="section-full bg-gradient-to-br from-slate-50 to-blue-50 relative overflow-hidden">
<div class="relative z-10 w-full px-8 sm:px-12 lg:px-16">
<div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center max-w-7xl mx-auto">
<!-- Left Content -->
<div data-aos="fade-right" data-aos-duration="800" class="text-left">
<h1 class="text-5xl md:text-7xl font-bold text-gray-900 mb-6 leading-tight">
AI 대화를 <span class="text-indigo-600">기억하는</span><br>
간단한 도구
</h1>
<p class="text-xl md:text-2xl text-gray-600 mb-8 leading-relaxed">
Claude와의 대화를 체계적으로 저장하고 관리하세요.<br>
언제든지 쉽게 찾아볼 수 있습니다.
</p>
<div class="flex flex-col sm:flex-row gap-4">
<button id="get-started-btn" class="bg-indigo-600 text-white px-8 py-4 rounded-lg text-lg font-medium hover:bg-indigo-700 transition-colors duration-200 shadow-lg">
무료로 시작하기
</button>
<a href="/features.html" class="border-2 border-gray-300 text-gray-700 px-8 py-4 rounded-lg text-lg font-medium hover:bg-gray-50 transition-colors duration-200 inline-block text-center">
더 알아보기
</a>
</div>
</div>
<!-- Right Content -->
<div data-aos="fade-left" data-aos-duration="800" class="hidden lg:block">
<div class="bg-white rounded-2xl shadow-2xl p-8 border border-gray-100">
<div class="space-y-4">
<div class="flex items-start gap-3">
<div class="w-8 h-8 bg-indigo-100 rounded-full flex items-center justify-center flex-shrink-0">
<span class="text-indigo-600 text-sm">👤</span>
</div>
<div class="bg-gray-100 rounded-lg p-3 flex-1">
<p class="text-sm text-gray-700">안녕! 오늘 React 프로젝트 구조에 대해 궁금한 게 있어</p>
</div>
</div>
<div class="flex items-start gap-3">
<div class="w-8 h-8 bg-purple-100 rounded-full flex items-center justify-center flex-shrink-0">
<span class="text-purple-600 text-sm">🤖</span>
</div>
<div class="bg-indigo-50 rounded-lg p-3 flex-1">
<p class="text-sm text-gray-700">React 프로젝트 구조에 대해 설명드릴게요...</p>
</div>
</div>
<div class="text-center py-2">
<span class="text-xs text-gray-400 bg-gray-50 px-3 py-1 rounded-full">✨ 대화가 자동 저장됩니다</span>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Features Section -->
<section id="features" class="section-full bg-white">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center mb-16" data-aos="fade-up">
<h2 class="text-4xl md:text-5xl font-bold text-gray-900 mb-6">
왜 Pensieve를 선택해야 할까요?
</h2>
<p class="text-xl md:text-2xl text-gray-600">
AI 대화 관리의 새로운 표준을 제시합니다
</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-3 gap-12">
<div class="text-center p-8" data-aos="fade-up" data-aos-delay="100">
<div class="bg-gradient-to-br from-indigo-400 to-indigo-600 rounded-full w-24 h-24 flex items-center justify-center mx-auto mb-6 transform hover:scale-110 transition-transform duration-300">
<i class="fas fa-save text-white text-3xl"></i>
</div>
<h3 class="text-2xl font-semibold text-gray-900 mb-4">자동 저장</h3>
<p class="text-lg text-gray-600 leading-relaxed">
Claude MCP를 통해 대화를 자동으로 저장하고 태그를 관리합니다
</p>
</div>
<div class="text-center p-8" data-aos="fade-up" data-aos-delay="200">
<div class="bg-gradient-to-br from-green-400 to-green-600 rounded-full w-24 h-24 flex items-center justify-center mx-auto mb-6 transform hover:scale-110 transition-transform duration-300">
<i class="fas fa-search text-white text-3xl"></i>
</div>
<h3 class="text-2xl font-semibold text-gray-900 mb-4">강력한 검색</h3>
<p class="text-lg text-gray-600 leading-relaxed">
제목, 내용, 태그를 통해 원하는 대화를 빠르게 찾을 수 있습니다
</p>
</div>
<div class="text-center p-8" data-aos="fade-up" data-aos-delay="300">
<div class="bg-gradient-to-br from-purple-400 to-purple-600 rounded-full w-24 h-24 flex items-center justify-center mx-auto mb-6 transform hover:scale-110 transition-transform duration-300">
<i class="fas fa-shield-alt text-white text-3xl"></i>
</div>
<h3 class="text-2xl font-semibold text-gray-900 mb-4">개인정보 보호</h3>
<p class="text-lg text-gray-600 leading-relaxed">
모든 대화는 안전하게 암호화되어 저장되며, 오직 본인만 접근할 수 있습니다
</p>
</div>
</div>
</div>
</section>
<!-- How it works Section -->
<section id="how-it-works" class="section-full bg-gray-50">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="text-center mb-16" data-aos="fade-up">
<h2 class="text-4xl md:text-5xl font-bold text-gray-900 mb-6">
어떻게 사용하나요?
</h2>
<p class="text-xl md:text-2xl text-gray-600">
간단한 3단계로 시작할 수 있습니다
</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-3 gap-12">
<div class="text-center" data-aos="zoom-in" data-aos-delay="100">
<div class="bg-gradient-to-br from-indigo-500 to-purple-600 text-white rounded-full w-20 h-20 flex items-center justify-center mx-auto mb-6 text-2xl font-bold shadow-lg transform hover:scale-110 transition-transform duration-300">
1
</div>
<h3 class="text-2xl font-semibold text-gray-900 mb-4">회원가입</h3>
<p class="text-lg text-gray-600 leading-relaxed">
이메일과 비밀번호로 간단하게 가입하세요
</p>
</div>
<div class="text-center" data-aos="zoom-in" data-aos-delay="200">
<div class="bg-gradient-to-br from-indigo-500 to-purple-600 text-white rounded-full w-20 h-20 flex items-center justify-center mx-auto mb-6 text-2xl font-bold shadow-lg transform hover:scale-110 transition-transform duration-300">
2
</div>
<h3 class="text-2xl font-semibold text-gray-900 mb-4">MCP 설정</h3>
<p class="text-lg text-gray-600 leading-relaxed">
Claude에서 Pensieve MCP를 설정하여 대화 저장을 활성화하세요
</p>
</div>
<div class="text-center" data-aos="zoom-in" data-aos-delay="300">
<div class="bg-gradient-to-br from-indigo-500 to-purple-600 text-white rounded-full w-20 h-20 flex items-center justify-center mx-auto mb-6 text-2xl font-bold shadow-lg transform hover:scale-110 transition-transform duration-300">
3
</div>
<h3 class="text-2xl font-semibold text-gray-900 mb-4">대화 관리</h3>
<p class="text-lg text-gray-600 leading-relaxed">
저장된 대화를 검색하고 관리하며 언제든지 다시 확인하세요
</p>
</div>
</div>
</div>
</section>
<!-- CTA Section -->
<section id="cta" class="section-full bg-gradient-to-br from-indigo-600 via-purple-600 to-pink-600 relative overflow-hidden">
<div class="absolute inset-0 bg-black bg-opacity-20"></div>
<div class="relative z-10 max-w-4xl mx-auto text-center px-4 sm:px-6 lg:px-8">
<div data-aos="fade-up" data-aos-duration="1000">
<h2 class="text-4xl md:text-5xl font-bold text-white mb-6 drop-shadow-lg">
지금 시작해보세요
</h2>
<p class="text-xl md:text-2xl text-white text-opacity-90 mb-10 drop-shadow">
소중한 AI 대화를 놓치지 마세요. Pensieve와 함께 모든 기억을 보관하세요.
</p>
<button id="cta-register-btn" class="bg-white text-indigo-600 px-10 py-5 rounded-lg text-xl font-semibold hover:bg-gray-100 transition-all duration-300 transform hover:scale-105 shadow-xl">
무료로 가입하기
</button>
</div>
</div>
<div class="absolute inset-0 opacity-30">
<div class="absolute top-10 left-10 text-6xl animate-pulse">✨</div>
<div class="absolute top-20 right-20 text-4xl animate-pulse delay-1000">🌟</div>
<div class="absolute bottom-20 left-1/4 text-5xl animate-pulse delay-500">💫</div>
<div class="absolute bottom-10 right-10 text-3xl animate-pulse delay-1500">⭐</div>
</div>
</section>
<!-- Login Modal -->
<div id="login-modal" class="hidden fixed inset-0 bg-gray-600 bg-opacity-50 flex items-center justify-center z-[9999]">
<div class="bg-white rounded-lg p-8 max-w-md w-full mx-4">
<h2 class="text-2xl font-bold mb-6 text-center">로그인</h2>
<form id="login-form">
<div class="mb-4">
<label class="block text-sm font-medium text-gray-700 mb-2">이메일</label>
<input
type="email"
id="email"
required
class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-indigo-500"
>
</div>
<div class="mb-6">
<label class="block text-sm font-medium text-gray-700 mb-2">비밀번호</label>
<input
type="password"
id="password"
required
class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-indigo-500"
>
</div>
<button
type="submit"
class="w-full bg-indigo-600 text-white py-2 px-4 rounded-md hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500"
>
로그인
</button>
<p class="mt-4 text-center text-sm text-gray-600">
계정이 없으신가요?
<button type="button" id="show-register" class="text-indigo-600 hover:text-indigo-500">회원가입</button>
</p>
</form>
</div>
</div>
<!-- Register Modal -->
<div id="register-modal" class="hidden fixed inset-0 bg-gray-600 bg-opacity-50 flex items-center justify-center z-[9999]">
<div class="bg-white rounded-lg p-8 max-w-md w-full mx-4">
<h2 class="text-2xl font-bold mb-6 text-center">회원가입</h2>
<form id="register-form">
<div class="mb-4">
<label class="block text-sm font-medium text-gray-700 mb-2">이메일</label>
<input
type="email"
id="register-email"
required
class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-indigo-500"
>
</div>
<div class="mb-6">
<label class="block text-sm font-medium text-gray-700 mb-2">비밀번호</label>
<input
type="password"
id="register-password"
required
minlength="6"
class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-indigo-500"
>
<p class="mt-1 text-sm text-gray-500">최소 6자 이상</p>
</div>
<button
type="submit"
class="w-full bg-indigo-600 text-white py-2 px-4 rounded-md hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500"
>
회원가입
</button>
<p class="mt-4 text-center text-sm text-gray-600">
이미 계정이 있으신가요?
<button type="button" id="show-login" class="text-indigo-600 hover:text-indigo-500">로그인</button>
</p>
</form>
</div>
</div>
<script src="/static/js/app.js"></script>
</body>
</html>
Latest Blog Posts
- MCP Moves to the Linux Foundation: Neutral Stewardship for Agentic InfrastructureBy Om-Shree-0709 on .mcpanthropicLinux Foundation
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/EmjayAhn/pensieve-mcp'
If you have feedback or need assistance with the MCP directory API, please join our Discord server