index.html•86.7 kB
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>
Chain Of Thought - An Intelligent System for Structured Task Management for AI Programming Assistants
</title>
<meta
name="description"
content="Chain Of Thought is a structured task management system designed specifically for AI programming assistants, offering intelligent task planning, automatic decomposition, execution tracking, and integrity verification."
/>
<meta
name="keywords"
content="MCP, Chain Of Thought, AI Programming Assistant, Task Management, Structured Tasks"
/>
<!-- Favicon -->
<link rel="icon" href="assets/icons/favicon.svg" type="image/svg+xml" />
<!-- Tailwind CSS CDN -->
<script src="https://cdn.tailwindcss.com"></script>
<!-- AOS.js Scroll Animation Library -->
<link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet" />
<script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
<!-- Prism.js Code Highlighting -->
<link
href="https://cdn.jsdelivr.net/npm/prismjs@1.29.0/themes/prism-okaidia.min.css"
rel="stylesheet"
/>
<script src="https://cdn.jsdelivr.net/npm/prismjs@1.29.0/prism.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/prismjs@1.29.0/components/prism-javascript.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/prismjs@1.29.0/components/prism-typescript.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/prismjs@1.29.0/components/prism-json.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/prismjs@1.29.0/components/prism-bash.min.js"></script>
<!-- Custom Styles -->
<link rel="stylesheet" href="css/styles.css" />
<!-- Multi-language Support -->
<script src="js/i18n.js"></script>
</head>
<body class="bg-gray-50 font-sans text-gray-900">
<!-- Navigation Bar -->
<header class="sticky top-0 z-50 bg-white shadow-md">
<nav
class="container mx-auto px-4 py-3 flex justify-between items-center"
>
<div class="flex items-center space-x-2">
<img
src="assets/icons/logo.svg"
alt="Chain Of Thought Logo"
class="h-8 w-8"
data-i18n-alt="nav.logo.alt"
/>
<span class="text-xl font-bold text-gradient" data-i18n="hero.title"
>Chain Of Thought</span
>
</div>
<div class="hidden xl:flex items-center">
<div class="flex space-x-5">
<a
href="#pain-points"
class="hover:text-blue-600 transition py-1"
data-i18n="nav.pain-points"
>Pain Points</a
>
<a
href="#features"
class="hover:text-blue-600 transition py-1"
data-i18n="nav.features"
>Features</a
>
<a
href="#workflow"
class="hover:text-blue-600 transition py-1"
data-i18n="nav.workflow"
>Workflow</a
>
<a
href="#prompt-customization"
class="hover:text-blue-600 transition py-1"
data-i18n="nav.prompt-custom"
>Prompt Customization</a
>
<a
href="#installation"
class="hover:text-blue-600 transition py-1"
data-i18n="nav.installation"
>Installation</a
>
<a
href="https://github.com/liorfranko/mcp-chain-of-thought"
target="_blank"
class="flex items-center space-x-1 hover:text-blue-600 transition"
>
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-5 w-5"
viewBox="0 0 24 24"
fill="currentColor"
>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M12 0C5.37 0 0 5.37 0 12c0 5.31 3.435 9.795 8.205 11.385.6.105.825-.255.825-.57 0-.285-.015-1.23-.015-2.235-3.015.555-3.795-.735-4.035-1.41-.135-.345-.72-1.41-1.23-1.695-.42-.225-1.02-.78-.015-.795.945-.015 1.62.87 1.845 1.23 1.08 1.815 2.805 1.305 3.495.99.105-.78.42-1.305.765-1.605-2.67-.3-5.46-1.335-5.46-5.925 0-1.305.465-2.385 1.23-3.225-.12-.3-.54-1.53.12-3.18 0 0 1.005-.315 3.3 1.23.96-.27 1.98-.405 3-.405s2.04.135 3 .405c2.295-1.56 3.3-1.23 3.3-1.23.66 1.65.24 2.88.12 3.18.765.84 1.23 1.905 1.23 3.225 0 4.605-2.805 5.625-5.475 5.925.435.375.81 1.095.81 2.22 0 1.605-.015 2.895-.015 3.3 0 .315.225.69.825.57A12.02 12.02 0 0024 12c0-6.63-5.37-12-12-12z"
/>
</svg>
<span data-i18n="nav.github">GitHub</span>
</a>
</div>
<!-- Language Switch Button -->
<div class="language-switcher ml-6">
<button data-lang="en" class="lang-btn active" data-i18n="common.lang.en">
EN
</button>
</div>
</div>
<button class="xl:hidden" id="menu-toggle">
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-6 w-6"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M4 6h16M4 12h16M4 18h16"
/>
</svg>
</button>
</nav>
<!-- Mobile Menu -->
<div
class="hidden md:hidden bg-white px-4 py-2 shadow-lg"
id="mobile-menu"
>
<div class="flex flex-col space-y-3">
<a
href="#pain-points"
class="hover:text-blue-600 transition py-1"
data-i18n="nav.pain-points"
>Pain Points</a
>
<a
href="#features"
class="hover:text-blue-600 transition py-1"
data-i18n="nav.features"
>Features</a
>
<a
href="#workflow"
class="hover:text-blue-600 transition py-1"
data-i18n="nav.workflow"
>Workflow</a
>
<a
href="#prompt-customization"
class="hover:text-blue-600 transition py-1"
data-i18n="nav.prompt-custom"
>Prompt Customization</a
>
<a
href="#installation"
class="hover:text-blue-600 transition py-1"
data-i18n="nav.installation"
>Installation</a
>
<a
href="https://github.com/liorfranko/mcp-chain-of-thought"
target="_blank"
class="flex items-center space-x-1 hover:text-blue-600 transition py-1"
>
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-5 w-5"
viewBox="0 0 24 24"
fill="currentColor"
>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M12 0C5.37 0 0 5.37 0 12c0 5.31 3.435 9.795 8.205 11.385.6.105.825-.255.825-.57 0-.285-.015-1.23-.015-2.235-3.015.555-3.795-.735-4.035-1.41-.135-.345-.72-1.41-1.23-1.695-.42-.225-1.02-.78-.015-.795.945-.015 1.62.87 1.845 1.23 1.08 1.815 2.805 1.305 3.495.99.105-.78.42-1.305.765-1.605-2.67-.3-5.46-1.335-5.46-5.925 0-1.305.465-2.385 1.23-3.225-.12-.3-.54-1.53.12-3.18 0 0 1.005-.315 3.3 1.23.96-.27 1.98-.405 3-.405s2.04.135 3 .405c2.295-1.56 3.3-1.23 3.3-1.23.66 1.65.24 2.88.12 3.18.765.84 1.23 1.905 1.23 3.225 0 4.605-2.805 5.625-5.475 5.925.435.375.81 1.095.81 2.22 0 1.605-.015 2.895-.015 3.3 0 .315.225.69.825.57A12.02 12.02 0 0024 12c0-6.63-5.37-12-12-12z"
/>
</svg>
<span data-i18n="nav.github">GitHub</span>
</a>
<!-- Mobile Language Switch Button -->
<div class="language-switcher py-1">
<button data-lang="en" class="lang-btn active" data-i18n="common.lang.en">
EN
</button>
</div>
</div>
</div>
</header>
<!-- Page Content Area -->
<main>
<!-- Hero Section -->
<section
id="hero"
class="bg-gradient-to-r from-blue-600 to-indigo-700 text-white py-16 md:py-24 section-padding"
>
<div class="container mx-auto px-4">
<div class="grid grid-cols-1 md:grid-cols-2 gap-8 items-center">
<div data-aos="fade-right" data-aos-duration="1000">
<h1
class="text-4xl md:text-5xl font-bold mb-4"
data-i18n="hero.title"
>
Chain Of Thought
</h1>
<p class="text-xl mb-6 text-blue-100" data-i18n="hero.subtitle">
An Intelligent System for Structured Task Management for AI Programming Assistants
</p>
<p class="mb-8 text-blue-100" data-i18n="hero.description">
Let AI assistants have long-term memory, manage complex tasks efficiently, provide structured task decomposition and execution tracking, and make your programming experience smoother and more efficient.
</p>
<div class="flex flex-wrap gap-4">
<a
href="#installation"
class="btn btn-primary"
data-i18n="hero.start"
>Get Started</a
>
<a
href="#features"
class="btn btn-secondary"
data-i18n="hero.learn-more"
>Learn More</a
>
</div>
</div>
<div
class="flex justify-center md:justify-end"
data-aos="fade-left"
data-aos-duration="1000"
data-aos-delay="200"
>
<div
class="p-2 bg-white bg-opacity-10 rounded-lg backdrop-blur-sm"
>
<img
src="assets/images/workflow-simple.svg"
alt="Intelligent Task Management Workflow"
class="w-full max-w-lg"
loading="lazy"
data-src="assets/images/workflow-simple.svg"
data-i18n-alt="hero.workflow-image.alt"
/>
</div>
</div>
</div>
<!-- Floating Decorative Elements -->
<div
class="absolute top-1/4 left-10 w-4 h-4 rounded-full bg-blue-300 opacity-20"
></div>
<div
class="absolute top-1/3 right-1/4 w-6 h-6 rounded-full bg-indigo-300 opacity-20"
></div>
<div
class="absolute bottom-1/4 right-10 w-5 h-5 rounded-full bg-blue-200 opacity-20"
></div>
</div>
</section>
<!-- Pain Points and Solutions Section -->
<section id="pain-points" class="py-16 bg-white">
<div class="container mx-auto px-4">
<h2
class="text-3xl font-bold mb-2 text-center"
data-i18n="pain-points.title"
>
Pain Points and Solutions
</h2>
<p
class="text-center text-gray-600 mb-12 max-w-3xl mx-auto"
data-i18n="pain-points.subtitle"
>
Chain Of Thought is designed to address the three core pain points of AI programming assistants in task management.
</p>
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
<!-- Pain Point 1: Memory Loss -->
<div
class="rounded-lg overflow-hidden shadow-lg"
data-aos="fade-up"
data-aos-delay="0"
>
<div class="p-6 bg-red-50 flex justify-center">
<img
src="assets/icons/memory-loss.svg"
alt="Memory Loss"
class="h-24 w-24"
data-i18n-alt="pain-points.memory-loss.icon.alt"
/>
</div>
<div class="p-6 bg-white">
<h3
class="text-xl font-bold mb-3 text-red-600"
data-i18n="pain-points.memory-loss.title"
>
Memory Loss
</h3>
<p
class="text-gray-700 mb-4"
data-i18n="pain-points.memory-loss.description"
>
AI assistants lack the ability to remember tasks across conversations, leading to difficulty in tracking long-term task progress, repeating explanations of the same needs, wasting time and resources.
</p>
<div class="border-t border-gray-200 my-4"></div>
<div class="flex items-center justify-center my-4">
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-8 w-8 text-green-500"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M19 14l-7 7m0 0l-7-7m7 7V3"
/>
</svg>
</div>
<div class="p-4 bg-green-50 rounded-lg">
<div class="flex justify-center mb-3">
<img
src="assets/icons/memory-solution.svg"
alt="Task Memory Function"
class="h-16 w-16"
data-i18n-alt="pain-points.memory-loss.solution.icon.alt"
/>
</div>
<h4
class="text-lg font-semibold mb-2 text-green-600"
data-i18n="pain-points.memory-loss.solution.title"
>
Task Memory Function
</h4>
<p
class="text-gray-700"
data-i18n="pain-points.memory-loss.solution.description"
>
Automatically saves execution history, provides long-term memory, allowing AI assistants to remember previous task progress, seamlessly continuing unfinished tasks.
</p>
</div>
</div>
</div>
<!-- Pain Point 2: Structure Chaos -->
<div
class="rounded-lg overflow-hidden shadow-lg"
data-aos="fade-up"
data-aos-delay="200"
>
<div class="p-6 bg-orange-50 flex justify-center">
<img
src="assets/icons/structure-chaos.svg"
alt="Structure Chaos"
class="h-24 w-24"
data-i18n-alt="pain-points.structure-chaos.icon.alt"
/>
</div>
<div class="p-6 bg-white">
<h3
class="text-xl font-bold mb-3 text-orange-600"
data-i18n="pain-points.structure-chaos.title"
>
Structure Chaos
</h3>
<p
class="text-gray-700 mb-4"
data-i18n="pain-points.structure-chaos.description"
>
Complex tasks lack systematic management, leading to low efficiency, lack of dependency management, chaotic sub-task execution, and difficulty in tracking overall progress.
</p>
<div class="border-t border-gray-200 my-4"></div>
<div class="flex items-center justify-center my-4">
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-8 w-8 text-green-500"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M19 14l-7 7m0 0l-7-7m7 7V3"
/>
</svg>
</div>
<div class="p-4 bg-yellow-50 rounded-lg">
<div class="flex justify-center mb-3">
<img
src="assets/icons/structure-solution.svg"
alt="Structured Task Decomposition"
class="h-16 w-16"
data-i18n-alt="pain-points.structure-chaos.solution.icon.alt"
/>
</div>
<h4
class="text-lg font-semibold mb-2 text-yellow-600"
data-i18n="pain-points.structure-chaos.solution.title"
>
Structured Task Decomposition
</h4>
<p
class="text-gray-700"
data-i18n="pain-points.structure-chaos.solution.description"
>
Automatically decomposes complex tasks into manageable sub-tasks, establishes clear dependency relationships, provides an orderly execution path, ensuring efficient completion.
</p>
</div>
</div>
</div>
<!-- Pain Point 3: Repetitive Work -->
<div
class="rounded-lg overflow-hidden shadow-lg"
data-aos="fade-up"
data-aos-delay="400"
>
<div class="p-6 bg-blue-50 flex justify-center">
<img
src="assets/icons/repeat-work.svg"
alt="Repetitive Work"
class="h-24 w-24"
data-i18n-alt="pain-points.repeat-work.icon.alt"
/>
</div>
<div class="p-6 bg-white">
<h3
class="text-xl font-bold mb-3 text-blue-600"
data-i18n="pain-points.repeat-work.title"
>
Repetitive Work
</h3>
<p
class="text-gray-700 mb-4"
data-i18n="pain-points.repeat-work.description"
>
Unable to effectively utilize past experiences and solutions, starting from scratch each time, lacking knowledge accumulation and reference system.
</p>
<div class="border-t border-gray-200 my-4"></div>
<div class="flex items-center justify-center my-4">
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-8 w-8 text-green-500"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M19 14l-7 7m0 0l-7-7m7 7V3"
/>
</svg>
</div>
<div class="p-4 bg-purple-50 rounded-lg">
<div class="flex justify-center mb-3">
<img
src="assets/icons/knowledge-solution.svg"
alt="Knowledge Accumulation and Experience Reference"
class="h-16 w-16"
data-i18n-alt="pain-points.repeat-work.solution.icon.alt"
/>
</div>
<h4
class="text-lg font-semibold mb-2 text-purple-600"
data-i18n="pain-points.repeat-work.solution.title"
>
Knowledge Accumulation and Experience Reference
</h4>
<p
class="text-gray-700"
data-i18n="pain-points.repeat-work.solution.description"
>
Automatically records successful solutions, establishes a task knowledge base, supports quick reference for similar tasks, and achieves knowledge accumulation and reuse.
</p>
</div>
</div>
</div>
</div>
<div class="mt-12 text-center">
<a
href="#features"
class="btn btn-primary inline-flex items-center"
>
<span data-i18n="pain-points.explore">Explore Core Features</span>
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-5 w-5 ml-2"
viewBox="0 0 20 20"
fill="currentColor"
>
<path
fill-rule="evenodd"
d="M16.707 10.293a1 1 0 010 1.414l-6 6a1 1 0 01-1.414 0l-6-6a1 1 0 111.414-1.414L9 14.586V3a1 1 0 012 0v11.586l4.293-4.293a1 1 0 011.414 0z"
clip-rule="evenodd"
/>
</svg>
</a>
</div>
</div>
</section>
<!-- Core Features Showcase - Will be filled in later -->
<section id="features" class="py-16 bg-gray-50">
<div class="container mx-auto px-4">
<h2
class="text-3xl font-bold mb-2 text-center"
data-i18n="features.title"
>
Core Features
</h2>
<p
class="text-center text-gray-600 mb-12 max-w-3xl mx-auto"
data-i18n="features.subtitle"
>
Chain Of Thought provides six core features to help you manage, execute, and track complex tasks efficiently.
</p>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
<!-- Feature 1: Intelligent Task Planning and Analysis -->
<div
class="bg-white rounded-lg shadow-lg overflow-hidden transform transition-all duration-300 hover:-translate-y-2 hover:shadow-xl"
data-aos="fade-up"
data-aos-delay="0"
>
<div class="flex justify-center p-6 bg-indigo-50">
<img
src="assets/icons/feature-planning.svg"
alt="Intelligent Task Planning and Analysis"
class="h-20 w-20"
data-i18n-alt="features.planning.icon.alt"
/>
</div>
<div class="p-6">
<h3
class="text-xl font-bold mb-3 text-indigo-600"
data-i18n="features.planning.title"
>
Intelligent Task Planning and Analysis
</h3>
<p
class="text-gray-700"
data-i18n="features.planning.description"
>
Through in-depth analysis of requirements and constraints, generate structured task plans. Automatically assesses scope, risks, and priorities, providing rational and comprehensive implementation strategies.
</p>
</div>
</div>
<!-- Feature 2: Automatic Task Decomposition and Dependency Management -->
<div
class="bg-white rounded-lg shadow-lg overflow-hidden transform transition-all duration-300 hover:-translate-y-2 hover:shadow-xl"
data-aos="fade-up"
data-aos-delay="100"
>
<div class="flex justify-center p-6 bg-green-50">
<img
src="assets/icons/feature-decomposition.svg"
alt="Automatic Task Decomposition and Dependency Management"
class="h-20 w-20"
data-i18n-alt="features.decomposition.icon.alt"
/>
</div>
<div class="p-6">
<h3
class="text-xl font-bold mb-3 text-green-600"
data-i18n="features.decomposition.title"
>
Automatic Task Decomposition and Dependency Management
</h3>
<p
class="text-gray-700"
data-i18n="features.decomposition.description"
>
Intelligently break down complex tasks into manageable smaller tasks, identify dependencies between tasks, establish optimized execution paths, and avoid resource conflicts and execution bottlenecks.
</p>
</div>
</div>
<!-- Feature 3: Execution Status Tracking -->
<div
class="bg-white rounded-lg shadow-lg overflow-hidden transform transition-all duration-300 hover:-translate-y-2 hover:shadow-xl"
data-aos="fade-up"
data-aos-delay="200"
>
<div class="flex justify-center p-6 bg-blue-50">
<img
src="assets/icons/feature-tracking.svg"
alt="Execution Status Tracking"
class="h-20 w-20"
data-i18n-alt="features.tracking.icon.alt"
/>
</div>
<div class="p-6">
<h3
class="text-xl font-bold mb-3 text-blue-600"
data-i18n="features.tracking.title"
>
Execution Status Tracking
</h3>
<p
class="text-gray-700"
data-i18n="features.tracking.description"
>
Monitor the execution status of each task in real time, provide visual progress display, automatically update dependency status, and provide detailed execution reports upon task completion.
</p>
</div>
</div>
<!-- Feature 4: Task Integrity Verification -->
<div
class="bg-white rounded-lg shadow-lg overflow-hidden transform transition-all duration-300 hover:-translate-y-2 hover:shadow-xl"
data-aos="fade-up"
data-aos-delay="300"
>
<div class="flex justify-center p-6 bg-amber-50">
<img
src="assets/icons/feature-verification.svg"
alt="Task Integrity Verification"
class="h-20 w-20"
data-i18n-alt="features.verification.icon.alt"
/>
</div>
<div class="p-6">
<h3
class="text-xl font-bold mb-3 text-amber-600"
data-i18n="features.verification.title"
>
Task Integrity Verification
</h3>
<p
class="text-gray-700"
data-i18n="features.verification.description"
>
Comprehensively check task completion, ensure all requirements and standards are met, provide verification reports and quality assessments, and ensure deliverables meet expected requirements.
</p>
</div>
</div>
<!-- Feature 5: Task Complexity Assessment -->
<div
class="bg-white rounded-lg shadow-lg overflow-hidden transform transition-all duration-300 hover:-translate-y-2 hover:shadow-xl"
data-aos="fade-up"
data-aos-delay="400"
>
<div class="flex justify-center p-6 bg-purple-50">
<img
src="assets/icons/feature-complexity.svg"
alt="Task Complexity Assessment"
class="h-20 w-20"
data-i18n-alt="features.complexity.icon.alt"
/>
</div>
<div class="p-6">
<h3
class="text-xl font-bold mb-3 text-purple-600"
data-i18n="features.complexity.title"
>
Task Complexity Assessment
</h3>
<p
class="text-gray-700"
data-i18n="features.complexity.description"
>
Assess task complexity based on multi-dimensional criteria, provide resource requirement estimates, identify high-risk components, and help allocate resources and time reasonably.
</p>
</div>
</div>
<!-- Feature 6: Task Memory Function -->
<div
class="bg-white rounded-lg shadow-lg overflow-hidden transform transition-all duration-300 hover:-translate-y-2 hover:shadow-xl"
data-aos="fade-up"
data-aos-delay="500"
>
<div class="flex justify-center p-6 bg-red-50">
<img
src="assets/icons/feature-memory.svg"
alt="Task Memory Function"
class="h-20 w-20"
data-i18n-alt="features.memory.icon.alt"
/>
</div>
<div class="p-6">
<h3
class="text-xl font-bold mb-3 text-red-600"
data-i18n="features.memory.title"
>
Task Memory Function
</h3>
<p
class="text-gray-700"
data-i18n="features.memory.description"
>
Provide cross-session task memory, automatically save execution history and context, allow resuming and continuing tasks at any time without repeating requirements.
</p>
</div>
</div>
</div>
<div class="mt-16 text-center">
<a
href="#workflow"
class="btn btn-primary inline-flex items-center"
>
<span data-i18n="features.learn-workflow">Learn the Workflow</span>
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-5 w-5 ml-2"
viewBox="0 0 20 20"
fill="currentColor"
>
<path
fill-rule="evenodd"
d="M16.707 10.293a1 1 0 010 1.414l-6 6a1 1 0 01-1.414 0l-6-6a1 1 0 111.414-1.414L9 14.586V3a1 1 0 012 0v11.586l4.293-4.293a1 1 0 011.414 0z"
clip-rule="evenodd"
/>
</svg>
</a>
</div>
</div>
</section>
<!-- Workflow Showcase Area - To be completed in subsequent tasks -->
<section id="workflow" class="py-16 bg-white">
<div class="container mx-auto px-4">
<h2
class="text-3xl font-bold mb-2 text-center"
data-i18n="workflow.title"
>
Workflow
</h2>
<p
class="text-center text-gray-600 mb-12 max-w-3xl mx-auto"
data-i18n="workflow.subtitle"
>
Chain Of Thought provides a complete workflow, with each step from task planning to completion carefully designed.
</p>
<!-- Horizontal Timeline (Desktop) -->
<div class="hidden md:block relative">
<!-- Seven Steps -->
<div class="relative z-10 flex justify-center items-top gap-8">
<!-- Step 1: Task Planning -->
<div
class="workflow-step"
data-aos="fade-up"
data-aos-delay="0"
data-step="1"
>
<div class="workflow-icon bg-blue-100">
<img
src="assets/icons/workflow-plan.svg"
alt="Task Planning"
class="h-8 w-8"
data-i18n-alt="workflow.step1.icon.alt"
/>
</div>
<h4
class="text-lg font-bold mt-4 text-blue-600 min-h-[56px]"
data-i18n="workflow.step1.title"
>
Task Planning
</h4>
<p
class="text-sm text-gray-600 mt-2 max-w-[150px]"
data-i18n="workflow.step1.description"
>
Initialize and plan the task process in detail
</p>
</div>
<!-- Step 2: In-depth Analysis -->
<div
class="workflow-step"
data-aos="fade-up"
data-aos-delay="100"
data-step="2"
>
<div class="workflow-icon bg-green-100">
<img
src="assets/icons/workflow-analyze.svg"
alt="In-depth Analysis"
class="h-8 w-8"
data-i18n-alt="workflow.step2.icon.alt"
/>
</div>
<h4
class="text-lg font-bold mt-4 text-green-600 min-h-[56px]"
data-i18n="workflow.step2.title"
>
In-depth Analysis
</h4>
<p
class="text-sm text-gray-600 mt-2 max-w-[150px]"
data-i18n="workflow.step2.description"
>
Analyze requirements in depth and assess technical feasibility
</p>
</div>
<!-- Step 3: Solution Reflection -->
<div
class="workflow-step"
data-aos="fade-up"
data-aos-delay="200"
data-step="3"
>
<div class="workflow-icon bg-indigo-100">
<img
src="assets/icons/workflow-reflect.svg"
alt="Solution Reflection"
class="h-8 w-8"
data-i18n-alt="workflow.step3.icon.alt"
/>
</div>
<h4
class="text-lg font-bold mt-4 text-indigo-600 min-h-[56px]"
data-i18n="workflow.step3.title"
>
Solution Reflection
</h4>
<p
class="text-sm text-gray-600 mt-2 max-w-[150px]"
data-i18n="workflow.step3.description"
>
Critically review analysis results and optimize the solution
</p>
</div>
<!-- Step 4: Task Decomposition -->
<div
class="workflow-step"
data-aos="fade-up"
data-aos-delay="300"
data-step="4"
>
<div class="workflow-icon bg-purple-100">
<img
src="assets/icons/workflow-split.svg"
alt="Task Decomposition"
class="h-8 w-8"
data-i18n-alt="workflow.step4.icon.alt"
/>
</div>
<h4
class="text-lg font-bold mt-4 text-purple-600 min-h-[56px]"
data-i18n="workflow.step4.title"
>
Task Decomposition
</h4>
<p
class="text-sm text-gray-600 mt-2 max-w-[150px]"
data-i18n="workflow.step4.description"
>
Break down complex tasks into manageable sub-tasks
</p>
</div>
</div>
<div
class="relative z-10 flex justify-center items-top mt-16 gap-8"
>
<!-- Step 5: Task Execution -->
<div
class="workflow-step"
data-aos="fade-up"
data-aos-delay="400"
data-step="5"
>
<div class="workflow-icon bg-red-100">
<img
src="assets/icons/workflow-execute.svg"
alt="Task Execution"
class="h-8 w-8"
data-i18n-alt="workflow.step5.icon.alt"
/>
</div>
<h4
class="text-lg font-bold mt-4 text-red-600 min-h-[56px]"
data-i18n="workflow.step5.title"
>
Task Execution
</h4>
<p
class="text-sm text-gray-600 mt-2 max-w-[150px]"
data-i18n="workflow.step5.description"
>
Execute specific tasks according to the scheduled plan
</p>
</div>
<!-- Step 6: Result Verification -->
<div
class="workflow-step"
data-aos="fade-up"
data-aos-delay="500"
data-step="6"
>
<div class="workflow-icon bg-amber-100">
<img
src="assets/icons/workflow-verify.svg"
alt="Result Verification"
class="h-8 w-8"
data-i18n-alt="workflow.step6.icon.alt"
/>
</div>
<h4
class="text-lg font-bold mt-4 text-amber-600 min-h-[56px]"
data-i18n="workflow.step6.title"
>
Result Verification
</h4>
<p
class="text-sm text-gray-600 mt-2 max-w-[150px]"
data-i18n="workflow.step6.description"
>
Comprehensively verify task completion and quality
</p>
</div>
<!-- Step 7: Task Completion -->
<div
class="workflow-step"
data-aos="fade-up"
data-aos-delay="600"
data-step="7"
>
<div class="workflow-icon bg-emerald-100">
<img
src="assets/icons/workflow-complete.svg"
alt="Task Completion"
class="h-8 w-8"
data-i18n-alt="workflow.step7.icon.alt"
/>
</div>
<h4
class="text-lg font-bold mt-4 text-emerald-600 min-h-[56px]"
data-i18n="workflow.step7.title"
>
Task Completion
</h4>
<p
class="text-sm text-gray-600 mt-2 max-w-[150px]"
data-i18n="workflow.step7.description"
>
Mark task as completed and generate report
</p>
</div>
</div>
</div>
<!-- Vertical Timeline (Mobile) -->
<div class="md:hidden relative">
<!-- Connection Line -->
<div
class="absolute w-1 bg-gray-200 top-0 bottom-0 left-6 z-0"
></div>
<!-- Seven Steps -->
<div class="relative z-10">
<!-- Step 1: Task Planning -->
<div class="flex items-start mb-10" data-aos="fade-right">
<div class="workflow-icon-mobile bg-blue-100">
<img
src="assets/icons/workflow-plan.svg"
alt="Task Planning"
class="h-6 w-6"
data-i18n-alt="workflow.step1.icon.alt"
/>
</div>
<div class="ml-6">
<h4
class="text-lg font-bold text-blue-600"
data-i18n="workflow.step1.title"
>
Task Planning
</h4>
<p
class="text-gray-600 mt-2"
data-i18n="workflow.step1.description"
>
Initialize and plan the task process in detail, establish clear goals and success criteria, and choose to continue planning based on existing tasks.
</p>
<a
href="#"
class="text-blue-500 hover:text-blue-700 text-sm mt-2 inline-block workflow-detail-link"
data-step="1"
data-i18n="workflow.learn-more-link"
>
Learn More →
</a>
</div>
</div>
<!-- Step 2: In-depth Analysis -->
<div
class="flex items-start mb-10"
data-aos="fade-right"
data-aos-delay="50"
>
<div class="workflow-icon-mobile bg-green-100">
<img
src="assets/icons/workflow-analyze.svg"
alt="In-depth Analysis"
class="h-6 w-6"
data-i18n-alt="workflow.step2.icon.alt"
/>
</div>
<div class="ml-6">
<h4
class="text-lg font-bold text-green-600"
data-i18n="workflow.step2.title"
>
In-depth Analysis
</h4>
<p
class="text-gray-600 mt-2"
data-i18n="workflow.step2.description"
>
Analyze requirements in depth and assess technical feasibility and potential risks, providing preliminary solutions.
</p>
<a
href="#"
class="text-green-500 hover:text-green-700 text-sm mt-2 inline-block workflow-detail-link"
data-step="2"
data-i18n="workflow.learn-more-link"
>
Learn More →
</a>
</div>
</div>
<!-- Step 3: Solution Reflection -->
<div
class="flex items-start mb-10"
data-aos="fade-right"
data-aos-delay="100"
>
<div class="workflow-icon-mobile bg-indigo-100">
<img
src="assets/icons/workflow-reflect.svg"
alt="Solution Reflection"
class="h-6 w-6"
data-i18n-alt="workflow.step3.icon.alt"
/>
</div>
<div class="ml-6">
<h4
class="text-lg font-bold text-indigo-600"
data-i18n="workflow.step3.title"
>
Solution Reflection
</h4>
<p
class="text-gray-600 mt-2"
data-i18n="workflow.step3.description"
>
Critically review analysis results, assess the completeness of the solution, and identify opportunities for optimization to ensure the solution meets best practices.
</p>
<a
href="#"
class="text-indigo-500 hover:text-indigo-700 text-sm mt-2 inline-block workflow-detail-link"
data-step="3"
data-i18n="workflow.learn-more-link"
>
Learn More →
</a>
</div>
</div>
<!-- Step 4: Task Decomposition -->
<div
class="flex items-start mb-10"
data-aos="fade-right"
data-aos-delay="150"
>
<div class="workflow-icon-mobile bg-purple-100">
<img
src="assets/icons/workflow-split.svg"
alt="Task Decomposition"
class="h-6 w-6"
data-i18n-alt="workflow.step4.icon.alt"
/>
</div>
<div class="ml-6">
<h4
class="text-lg font-bold text-purple-600"
data-i18n="workflow.step4.title"
>
Task Decomposition
</h4>
<p
class="text-gray-600 mt-2"
data-i18n="workflow.step4.description"
>
Break down complex tasks into independent and trackable sub-tasks, establish clear dependencies and priorities, and support multiple update modes.
</p>
<a
href="#"
class="text-purple-500 hover:text-purple-700 text-sm mt-2 inline-block workflow-detail-link"
data-step="4"
data-i18n="workflow.learn-more-link"
>
Learn More →
</a>
</div>
</div>
<!-- Step 5: Task Execution -->
<div
class="flex items-start mb-10"
data-aos="fade-right"
data-aos-delay="200"
>
<div class="workflow-icon-mobile bg-red-100">
<img
src="assets/icons/workflow-execute.svg"
alt="Task Execution"
class="h-6 w-6"
data-i18n-alt="workflow.step5.icon.alt"
/>
</div>
<div class="ml-6">
<h4
class="text-lg font-bold text-red-600"
data-i18n="workflow.step5.title"
>
Task Execution
</h4>
<p
class="text-gray-600 mt-2"
data-i18n="workflow.step5.description"
>
Execute specific tasks according to the scheduled plan, ensuring that each step meets the quality standards and handling exceptions in the execution process.
</p>
<a
href="#"
class="text-red-500 hover:text-red-700 text-sm mt-2 inline-block workflow-detail-link"
data-step="5"
data-i18n="workflow.learn-more-link"
>
Learn More →
</a>
</div>
</div>
<!-- Result Verification -->
<div
class="flex items-start mb-10"
data-aos="fade-right"
data-aos-delay="250"
>
<div class="workflow-icon-mobile bg-amber-100">
<img
src="assets/icons/workflow-verify.svg"
alt="Result Verification"
class="h-6 w-6"
data-i18n-alt="workflow.step6.icon.alt"
/>
</div>
<div class="ml-6">
<h4
class="text-lg font-bold text-amber-600"
data-i18n="workflow.step6.title"
>
Result Verification
</h4>
<p
class="text-gray-600 mt-2"
data-i18n="workflow.step6.description"
>
Verify the completion of the task and ensure all requirements and technical standards are met, providing a quality assessment report without missing details.
</p>
<a
href="#"
class="text-amber-500 hover:text-amber-700 text-sm mt-2 inline-block workflow-detail-link"
data-step="6"
data-i18n="workflow.learn-more-link"
>
Learn More →
</a>
</div>
</div>
<!-- Task Completion -->
<div
class="flex items-start"
data-aos="fade-right"
data-aos-delay="300"
>
<div class="workflow-icon-mobile bg-emerald-100">
<img
src="assets/icons/workflow-complete.svg"
alt="Task Completion"
class="h-6 w-6"
data-i18n-alt="workflow.step7.icon.alt"
/>
</div>
<div class="ml-6">
<h4
class="text-lg font-bold text-emerald-600"
data-i18n="workflow.step7.title"
>
Task Completion
</h4>
<p
class="text-gray-600 mt-2"
data-i18n="workflow.step7.description"
>
Mark the task as completed and generate a detailed completion report, update the dependency status of related tasks, and ensure the continuity of the workflow.
</p>
<a
href="#"
class="text-emerald-500 hover:text-emerald-700 text-sm mt-2 inline-block workflow-detail-link"
data-step="7"
data-i18n="workflow.learn-more-link"
>
Learn More →
</a>
</div>
</div>
</div>
</div>
<!-- Workflow Step Details Popup -->
<div
id="workflow-detail-modal"
class="fixed inset-0 bg-black bg-opacity-50 z-50 flex items-center justify-center hidden"
>
<div class="bg-white rounded-lg max-w-2xl w-full mx-4 p-6">
<div class="flex justify-between items-center mb-4">
<h3 id="modal-title" class="text-2xl font-bold"></h3>
<button
id="close-modal"
class="text-gray-500 hover:text-gray-700"
aria-label="Close"
data-i18n-aria-label="modal.close-button-aria"
>
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-6 w-6"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M6 18L18 6M6 6l12 12"
/>
</svg>
</button>
</div>
<div id="modal-content" class="prose max-w-none"></div>
<div class="mt-6 flex justify-end">
<button
id="close-modal-btn"
class="btn btn-primary"
data-i18n="modal.close-button"
>
Close
</button>
</div>
</div>
</div>
</div>
</section>
<!-- Code Examples Area - To be completed in subsequent tasks -->
<section id="examples" class="py-16 bg-gray-50">
<div class="container mx-auto px-4">
<!-- Code Examples Content Area -->
<div class="code-content-wrapper">
<!-- Task Planning and Decomposition Process Example -->
<div id="planning-example" class="code-content-section active">
<div class="grid grid-cols-1 lg:grid-cols-4 gap-6">
<!-- Left Description Area -->
<div class="lg:col-span-2" data-aos="fade-right">
<div class="bg-white p-6 rounded-lg shadow-md">
<h3
class="text-2xl font-bold mb-4 text-blue-600"
data-i18n="examples.planning.title"
>
Task Planning and Decomposition Process
</h3>
<p class="mb-4" data-i18n="examples.planning.intro">
This example demonstrates how to use MCP Chain of Thought to plan and decompose complex tasks. The entire process includes four main steps:
</p>
<ol class="list-decimal ml-5 mb-6 space-y-2">
<li class="text-gray-700">
<span
class="font-semibold text-blue-600"
data-i18n="workflow.step1.title"
>Task Planning</span
>
-
<span data-i18n="examples.planning.step1"
>Initialize and plan the task in detail, clarify goals and success criteria</span
>
</li>
<li class="text-gray-700">
<span
class="font-semibold text-green-600"
data-i18n="workflow.step2.title"
>In-depth Analysis</span
>
-
<span data-i18n="examples.planning.step2"
>Gain a deep understanding of the task, analyze technical feasibility and potential challenges</span
>
</li>
<li class="text-gray-700">
<span
class="font-semibold text-indigo-600"
data-i18n="workflow.step3.title"
>Solution Reflection</span
>
-
<span data-i18n="examples.planning.step3"
>Critically review analysis results and optimize the proposal</span
>
</li>
<li class="text-gray-700">
<span
class="font-semibold text-purple-600"
data-i18n="workflow.step4.title"
>Task Decomposition</span
>
-
<span data-i18n="examples.planning.step4"
>Break down complex tasks into manageable sub-tasks</span
>
</li>
</ol>
<p
class="text-sm text-gray-600"
data-i18n="examples.planning.conclusion"
>
With this approach, you can transform complex large tasks into structured, actionable work units while maintaining an overall perspective.
</p>
</div>
</div>
<div class="lg:col-span-2" data-aos="fade-right">
<div class="bg-white p-6 rounded-lg shadow-md h-full">
<h3
class="text-2xl font-bold mb-4 text-red-600"
data-i18n="examples.execution.title"
>
Task Execution and Completion Process
</h3>
<p class="mb-4" data-i18n="examples.execution.intro">
This example demonstrates how to execute and complete planned tasks. The entire process includes four main steps:
</p>
<ol class="list-decimal ml-5 mb-6 space-y-2">
<li class="text-gray-700">
<span
class="font-semibold text-blue-600"
data-i18n="examples.execution.step1.title"
>Task List</span
>
-
<span data-i18n="examples.execution.step1"
>Query the list of pending tasks to understand the current status</span
>
</li>
<li class="text-gray-700">
<span
class="font-semibold text-red-600"
data-i18n="workflow.step5.title"
>Task Execution</span
>
-
<span data-i18n="examples.execution.step2"
>Execute the selected task according to the scheduled plan</span
>
</li>
<li class="text-gray-700">
<span
class="font-semibold text-amber-600"
data-i18n="workflow.step6.title"
>Result Verification</span
>
-
<span data-i18n="examples.execution.step3"
>Verify task completion and ensure quality standards are met</span
>
</li>
<li class="text-gray-700">
<span
class="font-semibold text-emerald-600"
data-i18n="workflow.step7.title"
>Task Completion</span
>
-
<span data-i18n="examples.execution.step4"
>Formally mark the task as completed and generate a report</span
>
</li>
</ol>
<p
class="text-sm text-gray-600"
data-i18n="examples.execution.conclusion"
>
With this approach, you can systematically execute tasks and ensure each step meets the expected quality standards, ultimately completing the entire workflow.
</p>
</div>
</div>
</div>
</div>
</div>
<!-- Tip Area -->
<div
class="mt-12 bg-blue-50 p-6 rounded-lg shadow-md max-w-3xl mx-auto"
data-aos="fade-up"
>
<h3
class="text-xl font-bold mb-2 text-blue-600"
data-i18n="examples.tip.title"
>💡 Tip</h3>
<p class="text-gray-700" data-i18n="examples.tip.description">
The above workflow is not fixed; the Agent will iteratively repeat different steps based on the analysis until the expected result is achieved.
</p>
</div>
</div>
</section>
<!-- Prompt Customization Feature Block -->
<section id="prompt-customization" class="py-16 bg-white section-padding">
<div class="container mx-auto px-4">
<div class="text-center mb-12" data-aos="fade-up">
<h2
class="text-3xl md:text-4xl font-bold mb-4"
data-i18n="prompt-custom.title"
>
Prompt Customization Feature
</h2>
<p
class="text-lg text-gray-600 max-w-3xl mx-auto"
data-i18n="prompt-custom.subtitle"
>
Customize system prompts via environment variables, allowing you to tailor AI assistant behavior without modifying code
</p>
</div>
<!-- Content Block - To be filled in subsequent tasks -->
<div class="grid grid-cols-1 md:grid-cols-2 gap-8">
<!-- Left: Feature Overview and Benefits -->
<div data-aos="fade-right" data-aos-delay="100">
<div class="bg-white rounded-lg shadow-md p-6 h-full">
<h3
class="text-xl font-bold text-purple-600 mb-4"
data-i18n="prompt-custom.overview.title"
>
Feature Overview
</h3>
<p
class="text-gray-700 mb-6"
data-i18n="prompt-custom.overview.description"
>
Prompt customization allows users to adjust AI assistant behavior via environment variables, offering two customization methods: complete override of the original prompt or appending content to the existing prompt.
</p>
<h4
class="text-lg font-semibold text-gray-800 mb-3"
data-i18n="prompt-custom.benefits.title"
>
Main Benefits
</h4>
<ul class="list-disc ml-5 mb-4 space-y-2 text-gray-700">
<li data-i18n="prompt-custom.benefits.item1">
Personalization: Adjust system behavior according to specific project or domain needs
</li>
<li data-i18n="prompt-custom.benefits.item2">
Efficiency Improvement: Optimize for repetitive task types, reducing redundant explanations
</li>
<li data-i18n="prompt-custom.benefits.item3">
Brand Consistency: Ensure output content aligns with organizational style guides and standards
</li>
<li data-i18n="prompt-custom.benefits.item4">
Professional Adaptability: Adjust terminology and standards for specific technical fields or industries
</li>
<li data-i18n="prompt-custom.benefits.item5">
Team Collaboration: Standardize prompts used by team members to ensure consistent workflows
</li>
</ul>
</div>
</div>
<!-- Right: Usage and Examples -->
<div data-aos="fade-left" data-aos-delay="200">
<div class="bg-white rounded-lg shadow-md p-6 h-full">
<h3
class="text-xl font-bold text-purple-600 mb-4"
data-i18n="prompt-custom.usage.title"
>
Usage
</h3>
<h4
class="text-lg font-semibold text-gray-800 mb-3"
data-i18n="prompt-custom.usage.env.title"
>
Environment Variable Configuration
</h4>
<p
class="text-gray-700 mb-4"
data-i18n="prompt-custom.usage.env.description"
>
Set environment variables to customize prompts for each feature, using specific naming conventions:
</p>
<div
class="mockup-code bg-gray-900 text-gray-100 p-4 rounded-lg mb-6 text-sm"
>
<pre class="whitespace-pre-wrap">
# Override Mode: MCP_PROMPT_[FUNCTION_NAME]
# Append Mode: MCP_PROMPT_[FUNCTION_NAME]_APPEND
# Example:
MCP_PROMPT_PLAN_TASK="Custom task planning prompt"
MCP_PROMPT_EXECUTE_TASK_APPEND="Additional task execution guidance"
</pre
>
</div>
<p
class="text-gray-700 mb-4"
data-i18n="prompt-custom.usage.more"
>
See the detailed documentation for more configuration methods and parameter usage instructions.
</p>
<a
href="https://github.com/liorfranko/mcp-chain-of-thought/tree/main/docs/en/prompt-customization.md"
class="btn btn-primary lang-specific"
data-lang-en="https://github.com/liorfranko/mcp-chain-of-thought/tree/main/docs/en/prompt-customization.md"
data-i18n="prompt-custom.view-docs"
>
View Full Documentation
</a>
</div>
</div>
</div>
</div>
</section>
<!-- Installation and Configuration -->
<section id="installation" class="py-16 bg-gray-50">
<div class="container mx-auto px-4">
<h2
class="text-3xl font-bold mb-2 text-center"
data-i18n="installation.title"
>
Installation and Configuration
</h2>
<p
class="text-center text-gray-600 mb-12 max-w-3xl mx-auto"
data-i18n="installation.subtitle"
>
Chain Of Thought provides multiple installation methods, making it easy to get started quickly or perform advanced configuration as needed.
</p>
<!-- Installation Options Tabs -->
<div
class="bg-white rounded-lg shadow-lg overflow-hidden max-w-5xl mx-auto mb-16"
>
<!-- Tab Buttons -->
<div class="flex border-b border-gray-200">
<button
class="install-tab-btn flex-1 py-4 px-6 text-center font-medium focus:outline-none active"
data-target="manual-install"
>
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-5 w-5 inline-block mr-2"
viewBox="0 0 20 20"
fill="currentColor"
>
<path
fill-rule="evenodd"
d="M11.49 3.17c-.38-1.56-2.6-1.56-2.98 0a1.532 1.532 0 01-2.286.948c-1.372-.836-2.942.734-2.106 2.106.54.886.061 2.042-.947 2.287-1.561.379-1.561 2.6 0 2.978a1.532 1.532 0 01.947 2.287c-.836 1.372.734 2.942 2.106 2.106a1.532 1.532 0 012.287.947c.379 1.561 2.6 1.561 2.978 0a1.533 1.533 0 012.287-.947c1.372.836 2.942-.734 2.106-2.106a1.533 1.533 0 01.947-2.287c1.561-.379 1.561-2.6 0-2.978a1.532 1.532 0 01-.947-2.287c.836-1.372-.734-2.942-2.106-2.106a1.532 1.532 0 01-2.287-.947zM10 13a3 3 0 100-6 3 3 0 000 6z"
clip-rule="evenodd"
/>
</svg>
<span data-i18n="installation.manual.title">Manual Installation Setup</span>
</button>
<button
class="install-tab-btn flex-1 py-4 px-6 text-center font-medium focus:outline-none"
data-target="cursor-config"
>
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-5 w-5 inline-block mr-2"
viewBox="0 0 20 20"
fill="currentColor"
>
<path
d="M13.586 3.586a2 2 0 112.828 2.828l-.793.793-2.828-2.828.793-.793zM11.379 5.793L3 14.172V17h2.828l8.38-8.379-2.83-2.828z"
/>
</svg>
<span data-i18n="installation.cursor.title"
>Cursor IDE Configuration</span
>
</button>
</div>
<!-- Tab Content -->
<div class="install-content-wrapper">
<!-- Manual Installation Setup -->
<div id="manual-install" class="install-content-section p-6">
<div class="mb-6">
<h3
class="text-2xl font-bold mb-3 text-green-600"
data-i18n="installation.manual.title"
>
Manual Installation Setup
</h3>
</div>
<!-- Step 1: Clone the Repository -->
<div class="mb-8">
<div class="flex items-center mb-3">
<div
class="bg-green-100 h-8 w-8 rounded-full flex items-center justify-center mr-3"
>
<span class="text-green-600 font-bold">1</span>
</div>
<h4
class="text-lg font-semibold"
data-i18n="installation.step1"
>
Clone the Repository
</h4>
</div>
<div
class="mockup-code bg-gray-900 text-gray-100 p-5 rounded-lg ml-11 relative"
>
<pre
class="text-gray-100 whitespace-pre-wrap font-mono"
><code class="language-bash">git clone https://github.com/liorfranko/mcp-chain-of-thought.git
cd mcp-chain-of-thought</code></pre>
<button
class="copy-cmd-btn absolute top-4 right-4 text-xs bg-green-600 hover:bg-green-700 text-white py-1 px-3 rounded"
data-command="git clone https://github.com/liorfranko/mcp-chain-of-thought.git
cd mcp-chain-of-thought"
data-i18n="installation.copy-button"
>
Copy
</button>
</div>
</div>
<!-- Step 2: Install Dependencies -->
<div class="mb-8">
<div class="flex items-center mb-3">
<div
class="bg-green-100 h-8 w-8 rounded-full flex items-center justify-center mr-3"
>
<span class="text-green-600 font-bold">2</span>
</div>
<h4
class="text-lg font-semibold"
data-i18n="installation.step2"
>
Install Dependencies
</h4>
</div>
<div
class="mockup-code bg-gray-900 text-gray-100 p-5 rounded-lg ml-11 relative"
>
<pre
class="text-gray-100 whitespace-pre-wrap font-mono"
><code class="language-bash">npm install</code></pre>
<button
class="copy-cmd-btn absolute top-4 right-4 text-xs bg-green-600 hover:bg-green-700 text-white py-1 px-3 rounded"
data-command="npm install"
data-i18n="installation.copy-button"
>
Copy
</button>
</div>
</div>
<!-- Step 3: Build the Project -->
<div>
<div class="flex items-center mb-3">
<div
class="bg-green-100 h-8 w-8 rounded-full flex items-center justify-center mr-3"
>
<span class="text-green-600 font-bold">3</span>
</div>
<h4
class="text-lg font-semibold"
data-i18n="installation.step3"
>
Build the Project
</h4>
</div>
<div
class="mockup-code bg-gray-900 text-gray-100 p-5 rounded-lg ml-11 relative"
>
<pre
class="text-gray-100 whitespace-pre-wrap font-mono"
><code class="language-bash">npm run build</code></pre>
<button
class="copy-cmd-btn absolute top-4 right-4 text-xs bg-green-600 hover:bg-green-700 text-white py-1 px-3 rounded"
data-command="npm run build"
data-i18n="installation.copy-button"
>
Copy
</button>
</div>
</div>
</div>
<!-- Cursor IDE Configuration -->
<div
id="cursor-config"
class="install-content-section hidden p-6"
>
<div class="mb-6">
<h3
class="text-2xl font-bold mb-3 text-purple-600"
data-i18n="installation.cursor.title"
>
Cursor IDE Configuration
</h3>
<p
class="text-gray-700 mb-4"
data-i18n="installation.cursor.description"
>
If you use Cursor IDE, you can integrate Chain Of Thought into your development environment.
</p>
</div>
<div id="global-config" class="cursor-content-section active">
<div
class="mockup-code bg-gray-900 text-gray-100 p-5 rounded-lg mb-6 relative"
>
<div class="mb-2 flex items-center">
<span
class="ml-2 text-xs text-gray-400"
data-i18n="installation.cursor.mcp-servers"
>Your project directory/.cursor/mcp.json</span
>
</div>
<pre
class="text-gray-100 whitespace-pre-wrap font-mono"
><code class="language-json">{
"mcpServers": {
"mcp-chain-of-thought":{
"command": "node",
"args": [
"/path/to/mcp-chain-of-thought/dist/index.js"
],
"env": {
"DATA_DIR": "/path/to/project/data"
}
}
}
}</code></pre>
<button
class="copy-cmd-btn absolute top-4 right-4 text-xs bg-purple-600 hover:bg-purple-700 text-white py-1 px-3 rounded"
data-command='{
"mcpServers": {
"mcp-chain-of-thought": {
"command": "node",
"args": [
"/path/to/mcp-chain-of-thought/dist/index.js"
],
"env": {
"DATA_DIR": "/path/to/project/data"
}
}
}
}'
>
Copy
</button>
</div>
<div class="bg-red-50 p-4 rounded-lg mb-6">
<h4
class="text-lg font-semibold mb-2 text-red-600 flex items-center"
data-i18n="installation.important-note.title"
>
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-5 w-5 mr-2"
viewBox="0 0 20 20"
fill="currentColor"
>
<path
fill-rule="evenodd"
d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z"
clip-rule="evenodd"
/>
</svg>
Important Note
</h4>
<p
class="text-gray-700"
data-i18n="installation.important-note.description"
>
<strong>You must use absolute paths:</strong> Please ensure that the <code class="bg-red-100 px-1 py-0.5 rounded">DATA_DIR</code> configuration uses absolute paths instead of relative paths, otherwise data may not load correctly.
</p>
</div>
<div class="bg-purple-50 p-4 rounded-lg mb-6">
<h4
class="text-lg font-semibold mb-2 text-purple-600"
data-i18n="installation.prompt-config.title"
>
Prompt Configuration Instructions
</h4>
<p
class="text-gray-700 mb-4"
data-i18n="installation.prompt-config.intro"
>
Chain Of Thought supports two modes:
</p>
<ul class="list-disc ml-6 mb-4 space-y-2">
<li>
<span
class="font-semibold text-purple-600"
data-i18n="installation.prompt-config.mode1.title"
>TaskPlanner:</span
>
<span
data-i18n="installation.prompt-config.mode1.description"
>
Suitable for initial task planning and complex task decomposition, the AI assistant acts as a task planner.
</span>
<pre><code class="language-none" data-i18n="task.planner.prompt">
You are a professional task planning expert. You must interact with the user, analyze their needs, and collect project-related information. Finally, use "plan_task" to create tasks. After the task is created, you must summarize and inform the user to use the "TaskExecutor" mode for task execution.
You must focus on task planning and are strictly prohibited from using "execute_task" to execute tasks.
Warning: You are a task planning expert. You cannot directly modify code. You can only plan tasks, and you cannot directly modify code. You can only plan tasks.
</code></pre>
</li>
<li>
<span
class="font-semibold text-purple-600"
data-i18n="installation.prompt-config.mode2.title"
>TaskExecutor:</span
>
<span
data-i18n="installation.prompt-config.mode2.description"
>
Suitable for executing predefined tasks, the AI assistant acts as an execution expert.
</span>
<pre><code class="language-none" data-i18n="task.executor.prompt">
You are a professional task execution expert. When the user specifies a task to execute, use "execute_task" to perform the task.
If no task is specified, use "list_tasks" to find unexecuted tasks and execute them.
After execution, you must summarize and inform the user of the conclusion.
You can only execute one task at a time. Unless the user explicitly requests, do not proceed to the next task.
If the user requests "continuous mode," execute all tasks in order.
</code></pre>
</li>
</ul>
<p
class="text-gray-700"
data-i18n="installation.prompt-config.tip"
>
You can use the <code class="bg-purple-100 px-1 py-0.5 rounded">Custom modes</code> configuration in Cursor settings to define modes for different work scenarios.
</p>
</div>
</div>
</div>
</div>
</div>
<!-- Next Steps and Resource Cards -->
<div class="grid grid-cols-1 md:grid-cols-2 gap-6 max-w-5xl mx-auto">
<!-- Getting Started Guide -->
<div
class="bg-gradient-to-br from-blue-50 to-blue-100 rounded-lg shadow-md p-6"
data-aos="fade-up"
data-aos-delay="0"
>
<div class="flex items-center mb-4">
<div class="bg-blue-100 p-3 rounded-full mr-4">
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-6 w-6 text-blue-600"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M13 10V3L4 14h7v7l9-11h-7z"
/>
</svg>
</div>
<h3
class="text-xl font-bold text-blue-600"
data-i18n="quickstart.title"
>
Quick Start
</h3>
</div>
<p class="text-gray-700 mb-4" data-i18n="quickstart.description">
After installation, check out our quick start guide to learn how to use MCP Chain of Thought.
</p>
<a
href="https://github.com/liorfranko/mcp-chain-of-thought"
class="text-blue-600 hover:text-blue-800 font-medium"
data-i18n="quickstart.view-code-link"
>
View Code →
</a>
</div>
<!-- Frequently Asked Questions -->
<div
class="bg-gradient-to-br from-amber-50 to-amber-100 rounded-lg shadow-md p-6"
data-aos="fade-up"
data-aos-delay="200"
>
<div class="flex items-center mb-4">
<div class="bg-amber-100 p-3 rounded-full mr-4">
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-6 w-6 text-amber-600"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M8.228 9c.549-1.165 2.03-2 3.772-2 2.21 0 4 1.343 4 3 0 1.4-1.278 2.575-3.006 2.907-.542.104-.994.54-.994 1.093m0 3h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
/>
</svg>
</div>
<h3
class="text-xl font-bold text-amber-600"
data-i18n="faq.title"
>
FAQ
</h3>
</div>
<p class="text-gray-700 mb-4" data-i18n="faq.description">
Have questions? Check our FAQ or submit an issue on GitHub.
</p>
<a
href="https://github.com/liorfranko/mcp-chain-of-thought/issues"
class="text-amber-600 hover:text-amber-800 font-medium"
data-i18n="faq.view-faq-link"
>
View FAQ →
</a>
</div>
</div>
</div>
</section>
<!-- CTA and Resource Area -->
<section
id="cta"
class="py-20 bg-gradient-to-r from-blue-700 to-indigo-800 text-white"
>
<div class="container mx-auto px-4">
<div
class="lg:col-span-2"
data-aos="fade-right"
data-aos-duration="1000"
>
<h2
class="text-3xl md:text-4xl font-bold mb-6"
data-i18n="cta.title"
>
Experience Intelligent Task Management Now
</h2>
<p class="text-blue-100 mb-8 text-lg" data-i18n="cta.description">
Enhance your AI programming experience, say goodbye to chaotic task management, and embrace a more efficient workflow.
</p>
<div class="flex flex-col sm:flex-row gap-4">
<a
href="https://github.com/liorfranko/mcp-chain-of-thought"
target="_blank"
class="btn btn-primary btn-lg"
>
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-5 w-5 mr-2"
viewBox="0 0 24 24"
fill="currentColor"
>
<path
d="M12 0C5.37 0 0 5.37 0 12c0 5.31 3.435 9.795 8.205 11.385.6.105.825-.255.825-.57 0-.285-.015-1.23-.015-2.235-3.015.555-3.795-.735-4.035-1.41-.135-.345-.72-1.41-1.23-1.695-.42-.225-1.02-.78-.015-.795.945-.015 1.62.87 1.845 1.23 1.08 1.815 2.805 1.305 3.495.99.105-.78.42-1.305.765-1.605-2.67-.3-5.46-1.335-5.46-5.925 0-1.305.465-2.385 1.23-3.225-.12-.3-.54-1.53.12-3.18 0 0 1.005-.315 3.3 1.23.96-.27 1.98-.405 3-.405s2.04.135 3 .405c2.295-1.56 3.3-1.23 3.3-1.23.66 1.65.24 2.88.12 3.18.765.84 1.23 1.905 1.23 3.225 0 4.605-2.805 5.625-5.475 5.925.435.375.81 1.095.81 2.22 0 1.605-.015 2.895-.015 3.3 0 .315.225.69.825.57A12.02 12.02 0 0024 12c0-6.63-5.37-12-12-12z"
/>
</svg>
<span data-i18n="cta.github">Go to GitHub Repository</span>
</a>
<a href="#installation" class="btn btn-secondary btn-lg">
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-5 w-5 mr-2"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"
/>
</svg>
<span data-i18n="cta.start">Start Installation</span>
</a>
</div>
</div>
</div>
</section>
<!-- Footer Area -->
<!-- Footer Section -->
<footer class="bg-gray-900 text-white pt-4 pb-8">
<div class="container mx-auto px-4">
<!-- Copyright Information -->
<!-- Copyright Information -->
<div class="border-t border-gray-800 pt-8">
<div class="flex flex-col md:flex-row justify-between items-center">
<p class="text-gray-400" data-i18n="footer.copyright">
© 2025 MCP Task Manager. All rights reserved.
</p>
<p class="text-gray-500 text-sm mt-2 md:mt-0">
<span data-i18n="footer.developer"
>Developed with ❤️ by
<a
href="https://github.com/liorfranko/mcp-chain-of-thought"
class="text-blue-400 hover:text-blue-300"
>Lior Franko</a>
</span>
</p>
</div>
</div>
</div>
</footer>
</main>
<!-- Main Script -->
<script src="js/main.js"></script>
</body>
</html>
