262 lines
15 KiB
TypeScript
262 lines
15 KiB
TypeScript
import { motion } from 'framer-motion';
|
|
import { Database, Upload, MessageSquare, Settings, Zap, Code, FileText, BookOpen } from 'lucide-react';
|
|
|
|
export default function HelpDocs() {
|
|
return (
|
|
<div className="space-y-6 max-w-5xl">
|
|
{/* Header */}
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 20 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
>
|
|
<h1 className="text-3xl font-bold gradient-text mb-2">Code-Forge Documentation</h1>
|
|
<p className="text-light-grey">Everything you need to know about using Code-Forge</p>
|
|
</motion.div>
|
|
|
|
{/* Quick Start */}
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 20 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
transition={{ delay: 0.1 }}
|
|
className="card"
|
|
>
|
|
<h2 className="text-2xl font-bold text-electric-teal mb-4 flex items-center gap-2">
|
|
<Zap className="w-6 h-6" />
|
|
Quick Start
|
|
</h2>
|
|
<div className="space-y-4 text-light-grey">
|
|
<div className="flex gap-4">
|
|
<div className="flex-shrink-0 w-8 h-8 rounded-full bg-electric-teal/20 flex items-center justify-center text-electric-teal font-bold">1</div>
|
|
<div>
|
|
<h3 className="font-semibold text-white mb-1">Create a Knowledge Base</h3>
|
|
<p>Click the <span className="text-electric-teal">+</span> button in the sidebar to create a new KB. Choose the appropriate type for your content.</p>
|
|
</div>
|
|
</div>
|
|
<div className="flex gap-4">
|
|
<div className="flex-shrink-0 w-8 h-8 rounded-full bg-electric-teal/20 flex items-center justify-center text-electric-teal font-bold">2</div>
|
|
<div>
|
|
<h3 className="font-semibold text-white mb-1">Upload Documents</h3>
|
|
<p>Go to KB Management tab and drag & drop files or click to browse. Supports text, markdown, PDF, code files, and more.</p>
|
|
</div>
|
|
</div>
|
|
<div className="flex gap-4">
|
|
<div className="flex-shrink-0 w-8 h-8 rounded-full bg-electric-teal/20 flex items-center justify-center text-electric-teal font-bold">3</div>
|
|
<div>
|
|
<h3 className="font-semibold text-white mb-1">Start Chatting</h3>
|
|
<p>Switch to the Chat tab and ask questions about your documents. The AI will retrieve relevant context and provide answers.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</motion.div>
|
|
|
|
{/* KB Types */}
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 20 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
transition={{ delay: 0.2 }}
|
|
className="card"
|
|
>
|
|
<h2 className="text-2xl font-bold text-electric-teal mb-4 flex items-center gap-2">
|
|
<Database className="w-6 h-6" />
|
|
Knowledge Base Types
|
|
</h2>
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
|
<div className="p-4 bg-cool-blue/10 rounded-lg border border-electric-teal/20">
|
|
<div className="flex items-center gap-2 mb-2">
|
|
<FileText className="w-5 h-5 text-electric-teal" />
|
|
<h3 className="font-bold text-white">Generic</h3>
|
|
</div>
|
|
<p className="text-sm text-light-grey mb-2">General-purpose knowledge base for mixed content types.</p>
|
|
<p className="text-xs text-light-grey"><strong className="text-electric-teal">Use for:</strong> Random notes, mixed documents, general reference material</p>
|
|
</div>
|
|
|
|
<div className="p-4 bg-cool-blue/10 rounded-lg border border-electric-teal/20">
|
|
<div className="flex items-center gap-2 mb-2">
|
|
<Code className="w-5 h-5 text-electric-teal" />
|
|
<h3 className="font-bold text-white">Code</h3>
|
|
</div>
|
|
<p className="text-sm text-light-grey mb-2">Optimized for source code with better chunking and structure preservation.</p>
|
|
<p className="text-xs text-light-grey"><strong className="text-electric-teal">Use for:</strong> Codebases, libraries, API implementations, code examples</p>
|
|
</div>
|
|
|
|
<div className="p-4 bg-cool-blue/10 rounded-lg border border-electric-teal/20">
|
|
<div className="flex items-center gap-2 mb-2">
|
|
<BookOpen className="w-5 h-5 text-electric-teal" />
|
|
<h3 className="font-bold text-white">Documentation</h3>
|
|
</div>
|
|
<p className="text-sm text-light-grey mb-2">Optimized for technical documentation with enhanced markdown processing.</p>
|
|
<p className="text-xs text-light-grey"><strong className="text-electric-teal">Use for:</strong> MCP docs, API docs, tutorials, guides, technical specs</p>
|
|
</div>
|
|
|
|
<div className="p-4 bg-cool-blue/10 rounded-lg border border-electric-teal/20">
|
|
<div className="flex items-center gap-2 mb-2">
|
|
<Settings className="w-5 h-5 text-electric-teal" />
|
|
<h3 className="font-bold text-white">Agent OS</h3>
|
|
</div>
|
|
<p className="text-sm text-light-grey mb-2">Special type for Agent OS YAML profiles with structured metadata extraction.</p>
|
|
<p className="text-xs text-light-grey"><strong className="text-electric-teal">Use for:</strong> Agent OS configuration files only</p>
|
|
</div>
|
|
</div>
|
|
</motion.div>
|
|
|
|
{/* RAG Settings */}
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 20 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
transition={{ delay: 0.3 }}
|
|
className="card"
|
|
>
|
|
<h2 className="text-2xl font-bold text-electric-teal mb-4 flex items-center gap-2">
|
|
<Settings className="w-6 h-6" />
|
|
RAG Settings Explained
|
|
</h2>
|
|
<div className="space-y-4">
|
|
<div className="p-4 bg-cool-blue/10 rounded-lg border border-electric-teal/20">
|
|
<h3 className="font-bold text-white mb-2">Hybrid Search (Vector + BM25)</h3>
|
|
<p className="text-sm text-light-grey mb-2">Combines semantic vector search with keyword-based BM25 search for better retrieval.</p>
|
|
<p className="text-xs text-light-grey"><strong className="text-blaze-orange">When to use:</strong> When you need both semantic understanding AND exact keyword matching. Great for technical queries.</p>
|
|
</div>
|
|
|
|
<div className="p-4 bg-cool-blue/10 rounded-lg border border-electric-teal/20">
|
|
<h3 className="font-bold text-white mb-2">Reranking</h3>
|
|
<p className="text-sm text-light-grey mb-2">Re-scores retrieved documents using a cross-encoder model for higher accuracy.</p>
|
|
<p className="text-xs text-light-grey"><strong className="text-blaze-orange">When to use:</strong> When you need the most relevant results and can afford slightly slower queries. Improves precision.</p>
|
|
</div>
|
|
|
|
<div className="p-4 bg-cool-blue/10 rounded-lg border border-electric-teal/20">
|
|
<h3 className="font-bold text-white mb-2">Agentic RAG</h3>
|
|
<p className="text-sm text-light-grey mb-2">Uses multi-step reasoning with an LLM agent to iteratively refine queries and answers.</p>
|
|
<p className="text-xs text-light-grey"><strong className="text-blaze-orange">When to use:</strong> For complex questions requiring multiple retrieval steps or reasoning. Slower but more intelligent.</p>
|
|
</div>
|
|
|
|
<div className="p-4 bg-electric-teal/10 rounded-lg border border-electric-teal/30">
|
|
<p className="text-sm text-white"><strong>💡 Pro Tip:</strong> Start with basic vector search, then enable Hybrid + Rerank for better results. Use Agentic RAG for complex research questions.</p>
|
|
</div>
|
|
</div>
|
|
</motion.div>
|
|
|
|
{/* File Upload */}
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 20 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
transition={{ delay: 0.4 }}
|
|
className="card"
|
|
>
|
|
<h2 className="text-2xl font-bold text-electric-teal mb-4 flex items-center gap-2">
|
|
<Upload className="w-6 h-6" />
|
|
Supported File Types
|
|
</h2>
|
|
<div className="grid grid-cols-2 md:grid-cols-4 gap-2 text-sm text-light-grey">
|
|
<div className="p-2 bg-cool-blue/10 rounded border border-electric-teal/20 text-center">.txt</div>
|
|
<div className="p-2 bg-cool-blue/10 rounded border border-electric-teal/20 text-center">.md</div>
|
|
<div className="p-2 bg-cool-blue/10 rounded border border-electric-teal/20 text-center">.pdf</div>
|
|
<div className="p-2 bg-cool-blue/10 rounded border border-electric-teal/20 text-center">.py</div>
|
|
<div className="p-2 bg-cool-blue/10 rounded border border-electric-teal/20 text-center">.js</div>
|
|
<div className="p-2 bg-cool-blue/10 rounded border border-electric-teal/20 text-center">.ts</div>
|
|
<div className="p-2 bg-cool-blue/10 rounded border border-electric-teal/20 text-center">.tsx</div>
|
|
<div className="p-2 bg-cool-blue/10 rounded border border-electric-teal/20 text-center">.jsx</div>
|
|
<div className="p-2 bg-cool-blue/10 rounded border border-electric-teal/20 text-center">.json</div>
|
|
<div className="p-2 bg-cool-blue/10 rounded border border-electric-teal/20 text-center">.yaml</div>
|
|
<div className="p-2 bg-cool-blue/10 rounded border border-electric-teal/20 text-center">.html</div>
|
|
<div className="p-2 bg-cool-blue/10 rounded border border-electric-teal/20 text-center">.css</div>
|
|
<div className="p-2 bg-cool-blue/10 rounded border border-electric-teal/20 text-center">.cpp</div>
|
|
<div className="p-2 bg-cool-blue/10 rounded border border-electric-teal/20 text-center">.java</div>
|
|
<div className="p-2 bg-cool-blue/10 rounded border border-electric-teal/20 text-center">.go</div>
|
|
<div className="p-2 bg-cool-blue/10 rounded border border-electric-teal/20 text-center">.rs</div>
|
|
</div>
|
|
<p className="text-sm text-light-grey mt-4">And many more! Code-Forge automatically extracts text from PDFs and processes markdown with enhanced structure preservation.</p>
|
|
</motion.div>
|
|
|
|
{/* MCP Integration */}
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 20 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
transition={{ delay: 0.5 }}
|
|
className="card"
|
|
>
|
|
<h2 className="text-2xl font-bold text-electric-teal mb-4 flex items-center gap-2">
|
|
<MessageSquare className="w-6 h-6" />
|
|
MCP Integration
|
|
</h2>
|
|
<p className="text-light-grey mb-4">Code-Forge exposes 12 MCP tools for AI agents to interact with your knowledge bases:</p>
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-2 text-sm mb-6">
|
|
<div className="p-3 bg-cool-blue/10 rounded border border-electric-teal/20">
|
|
<code className="text-electric-teal">list_knowledge_bases</code>
|
|
</div>
|
|
<div className="p-3 bg-cool-blue/10 rounded border border-electric-teal/20">
|
|
<code className="text-electric-teal">create_knowledge_base</code>
|
|
</div>
|
|
<div className="p-3 bg-cool-blue/10 rounded border border-electric-teal/20">
|
|
<code className="text-electric-teal">delete_knowledge_base</code>
|
|
</div>
|
|
<div className="p-3 bg-cool-blue/10 rounded border border-electric-teal/20">
|
|
<code className="text-electric-teal">ingest_document</code>
|
|
</div>
|
|
<div className="p-3 bg-cool-blue/10 rounded border border-electric-teal/20">
|
|
<code className="text-electric-teal">ingest_directory</code>
|
|
</div>
|
|
<div className="p-3 bg-cool-blue/10 rounded border border-electric-teal/20">
|
|
<code className="text-electric-teal">query_knowledge_base</code>
|
|
</div>
|
|
<div className="p-3 bg-cool-blue/10 rounded border border-electric-teal/20">
|
|
<code className="text-electric-teal">get_kb_stats</code>
|
|
</div>
|
|
<div className="p-3 bg-cool-blue/10 rounded border border-electric-teal/20">
|
|
<code className="text-electric-teal">get_standards</code>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="space-y-4">
|
|
<div className="p-4 bg-electric-teal/10 rounded-lg border border-electric-teal/30">
|
|
<p className="text-sm text-white mb-2"><strong>MCP Endpoint:</strong> <code className="text-electric-teal">http://localhost:8051/mcp</code></p>
|
|
</div>
|
|
|
|
<div className="p-4 bg-blaze-orange/10 rounded-lg border border-blaze-orange/30">
|
|
<h3 className="font-bold text-white mb-3 flex items-center gap-2">
|
|
<MessageSquare className="w-5 h-5 text-blaze-orange" />
|
|
Add to Claude Desktop
|
|
</h3>
|
|
|
|
<div className="mb-4">
|
|
<p className="text-sm text-white mb-2"><strong>Option 1: Using CLI (Recommended)</strong></p>
|
|
<p className="text-sm text-light-grey mb-3">Run this command in your terminal:</p>
|
|
<div className="bg-deep-night rounded-lg p-4 border border-electric-teal/30">
|
|
<code className="text-electric-teal text-sm">npx @modelcontextprotocol/inspector http://localhost:8051/mcp</code>
|
|
</div>
|
|
<p className="text-xs text-light-grey mt-2">Or add directly to Claude Desktop:</p>
|
|
<div className="bg-deep-night rounded-lg p-4 border border-electric-teal/30 mt-2">
|
|
<code className="text-electric-teal text-sm">claude mcp add code-forge http://localhost:8051/mcp</code>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="mb-4">
|
|
<p className="text-sm text-white mb-2"><strong>Option 2: Manual Configuration</strong></p>
|
|
<p className="text-sm text-light-grey mb-3">Edit your Claude Desktop config file:</p>
|
|
|
|
<div className="bg-deep-night rounded-lg p-4 border border-blaze-orange/30 mb-3">
|
|
<p className="text-xs text-light-grey mb-2"><strong>macOS:</strong> <code className="text-electric-teal">~/Library/Application Support/Claude/claude_desktop_config.json</code></p>
|
|
<p className="text-xs text-light-grey"><strong>Windows:</strong> <code className="text-electric-teal">%APPDATA%\Claude\claude_desktop_config.json</code></p>
|
|
</div>
|
|
|
|
<div className="bg-deep-night rounded-lg p-4 border border-electric-teal/30 overflow-x-auto">
|
|
<pre className="text-xs text-electric-teal">
|
|
{`{
|
|
"mcpServers": {
|
|
"code-forge": {
|
|
"url": "http://localhost:8051/mcp"
|
|
}
|
|
}
|
|
}`}
|
|
</pre>
|
|
</div>
|
|
</div>
|
|
|
|
<p className="text-xs text-light-grey">
|
|
<strong className="text-blaze-orange">Note:</strong> Restart Claude Desktop after adding the configuration. The MCP server must be running (docker-compose up).
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</motion.div>
|
|
</div>
|
|
);
|
|
}
|