202 lines
8.9 KiB
TypeScript
202 lines
8.9 KiB
TypeScript
import React, { useState } from 'react';
|
|
import {
|
|
Sparkles,
|
|
XCircle,
|
|
Code2,
|
|
Copy,
|
|
Check,
|
|
Zap,
|
|
Repeat,
|
|
Compass,
|
|
Layers,
|
|
ArrowRight,
|
|
} from 'lucide-react';
|
|
|
|
interface MCPSkillGuideModalProps {
|
|
isOpen: boolean;
|
|
onClose: () => void;
|
|
onSendToStudio: (prompt: string) => void;
|
|
}
|
|
|
|
export const MCPSkillGuideModal: React.FC<MCPSkillGuideModalProps> = ({
|
|
isOpen,
|
|
onClose,
|
|
onSendToStudio,
|
|
}) => {
|
|
const [copiedSkillId, setCopiedSkillId] = useState<string | null>(null);
|
|
|
|
if (!isOpen) return null;
|
|
|
|
const handleCopy = (id: string, text: string) => {
|
|
navigator.clipboard.writeText(text);
|
|
setCopiedSkillId(id);
|
|
setTimeout(() => setCopiedSkillId(null), 2000);
|
|
};
|
|
|
|
const skills = [
|
|
{
|
|
id: 'skill-autonomous-loop',
|
|
title: 'Autonomous Self-Evaluating Feedback Loop Skill',
|
|
icon: <Repeat className="w-5 h-5 text-indigo-400" />,
|
|
tag: 'Autonomous Loops',
|
|
tagColor: 'bg-indigo-900/60 text-indigo-300 border-indigo-700/50',
|
|
description:
|
|
'Pattern for creating MCP tools that execute recursive evaluation cycles, verify their own assertions, calculate confidence scores, and return self-correcting telemetry back to the AI model.',
|
|
promptExample:
|
|
'Create an autonomous loop MCP tool for code optimization that takes source code, benchmarks complexity, runs automated invariant checks, and suggests verified refactor steps with confidence scoring.',
|
|
codeSnippet: `// Autonomous self-verifying feedback loop pattern
|
|
const { sourceCode, testAssertions } = args;
|
|
// 1. Execute transformation
|
|
const transformed = optimizeAst(sourceCode);
|
|
// 2. Self-verify invariants against test suite
|
|
const passRate = runVerificationChecks(transformed, testAssertions);
|
|
// 3. Output verifiable loop metrics
|
|
return {
|
|
status: passRate === 1.0 ? 'converged' : 'needs_iteration',
|
|
confidenceScore: passRate,
|
|
optimizedCode: transformed,
|
|
telemetry: { loopIterations: 1, memorySavedPercent: 24.5 }
|
|
};`,
|
|
},
|
|
{
|
|
id: 'skill-zero-api-key',
|
|
title: 'Zero-API-Key Pure Algorithmic Engine Skill',
|
|
icon: <Zap className="w-5 h-5 text-emerald-400" />,
|
|
tag: 'Pure Computation',
|
|
tagColor: 'bg-emerald-900/60 text-emerald-300 border-emerald-700/50',
|
|
description:
|
|
'Construct lightning-fast tools that operate entirely in local JS/TS without relying on paid external APIs. Ideal for AST parsing, regex validation, math engines, SVG generation, and network CIDR calculations.',
|
|
promptExample:
|
|
'Build a zero-key SVG chart generator tool that takes an array of numbers and chart type (sparkline, gauge, bar) and returns production-ready scalable SVG strings and data URIs.',
|
|
codeSnippet: `// Pure zero-API computation pattern
|
|
const numbers = args.values || [];
|
|
const max = Math.max(...numbers);
|
|
const min = Math.min(...numbers);
|
|
const points = numbers.map((n, i) => \`\${i * 20},\${100 - ((n - min) / (max - min)) * 80}\`).join(' ');
|
|
const svg = \`<svg viewBox="0 0 200 100"><polyline points="\${points}" stroke="#4f46e5" fill="none"/></svg>\`;
|
|
return { svg, dataUri: 'data:image/svg+xml;utf8,' + encodeURIComponent(svg) };`,
|
|
},
|
|
{
|
|
id: 'skill-roadsign-bridge',
|
|
title: 'Remote Host "Road Sign" Signpost Skill',
|
|
icon: <Compass className="w-5 h-5 text-amber-400" />,
|
|
tag: 'Remote Bridge & Credentials',
|
|
tagColor: 'bg-amber-900/60 text-amber-300 border-amber-700/50',
|
|
description:
|
|
'Bridge remote desktop machines (e.g. Windows Workstation PowerShell, macOS shell, GPU clusters) by erecting an authoritative Road Sign on the Nexus with auto-injected Bearer tokens and API keys.',
|
|
promptExample:
|
|
'Set up a Windows Workstation MCP Road Sign pointing to http://192.168.1.150:8000/mcp with Bearer token authentication to expose local PowerShell execution and desktop window controls.',
|
|
codeSnippet: `// Road sign configuration with injected credentials
|
|
{
|
|
isRoadSign: true,
|
|
signpostTitle: 'LOOK HERE: Windows Workstation Desktop MCP',
|
|
targetHostLocation: 'http://192.168.1.150:8000/mcp',
|
|
directionsInstructions: 'Access local Windows tools with auto-injected Bearer token',
|
|
credentialKeys: {
|
|
'Authorization': 'Bearer win_mcp_sec_9941a8',
|
|
'X-Client-Origin': 'DoEverythingMCP-Nexus'
|
|
}
|
|
}`,
|
|
},
|
|
];
|
|
|
|
return (
|
|
<div className="fixed inset-0 z-50 bg-slate-900/70 backdrop-blur-xs flex items-center justify-center p-4 overflow-y-auto">
|
|
<div className="bg-white rounded-3xl max-w-3xl w-full p-6 sm:p-8 space-y-6 shadow-2xl border border-slate-200 my-8">
|
|
<div className="flex items-start justify-between border-b border-slate-100 pb-5">
|
|
<div className="flex items-center space-x-3">
|
|
<div className="w-12 h-12 rounded-2xl bg-indigo-600 text-white flex items-center justify-center shadow-md">
|
|
<Sparkles className="w-6 h-6" />
|
|
</div>
|
|
<div>
|
|
<div className="flex items-center space-x-2">
|
|
<span className="px-2 py-0.5 rounded text-[10px] font-black uppercase tracking-wider bg-indigo-100 text-indigo-800 border border-indigo-200">
|
|
CREATION SKILL GUIDE
|
|
</span>
|
|
<span className="text-xs text-slate-500 font-medium">Original MCP Architectures</span>
|
|
</div>
|
|
<h3 className="text-xl font-black text-slate-900 mt-0.5">
|
|
The MCP Creation Skill & Design Principles
|
|
</h3>
|
|
</div>
|
|
</div>
|
|
<button
|
|
onClick={onClose}
|
|
className="p-1.5 text-slate-400 hover:text-slate-600 hover:bg-slate-100 rounded-xl transition"
|
|
>
|
|
<XCircle className="w-6 h-6" />
|
|
</button>
|
|
</div>
|
|
|
|
<p className="text-xs sm:text-sm text-slate-600 leading-relaxed">
|
|
Master the three foundational skills of original MCP construction: creating productive autonomous feedback loops, crafting zero-dependency algorithmic tools, and erecting secure remote host Road Signs.
|
|
</p>
|
|
|
|
<div className="space-y-4 max-h-[60vh] overflow-y-auto pr-1">
|
|
{skills.map((skill) => (
|
|
<div
|
|
key={skill.id}
|
|
className="bg-slate-900 text-white rounded-2xl p-5 border border-slate-800 space-y-4 shadow-md"
|
|
>
|
|
<div className="flex flex-col sm:flex-row sm:items-center justify-between gap-2 border-b border-slate-800 pb-3">
|
|
<div className="flex items-center space-x-2.5">
|
|
<div className="p-2 rounded-xl bg-slate-800 border border-slate-700">
|
|
{skill.icon}
|
|
</div>
|
|
<div>
|
|
<h4 className="font-bold text-sm text-slate-100">{skill.title}</h4>
|
|
<span className={`inline-block px-2 py-0.5 rounded text-[10px] font-bold border mt-0.5 ${skill.tagColor}`}>
|
|
{skill.tag}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
<button
|
|
type="button"
|
|
onClick={() => {
|
|
onSendToStudio(skill.promptExample);
|
|
onClose();
|
|
}}
|
|
className="px-3 py-1.5 bg-indigo-600 hover:bg-indigo-700 text-white rounded-xl text-xs font-bold flex items-center space-x-1.5 self-start sm:self-center transition shadow-xs"
|
|
>
|
|
<span>Build with AI Studio</span>
|
|
<ArrowRight className="w-3.5 h-3.5" />
|
|
</button>
|
|
</div>
|
|
|
|
<p className="text-xs text-slate-300 leading-relaxed">{skill.description}</p>
|
|
|
|
<div>
|
|
<div className="flex items-center justify-between text-[11px] font-semibold text-slate-400 mb-1.5">
|
|
<span>Architecture Code Template:</span>
|
|
<button
|
|
type="button"
|
|
onClick={() => handleCopy(skill.id, skill.codeSnippet)}
|
|
className="text-indigo-400 hover:text-indigo-300 flex items-center space-x-1"
|
|
>
|
|
{copiedSkillId === skill.id ? <Check className="w-3.5 h-3.5 text-emerald-400" /> : <Copy className="w-3.5 h-3.5" />}
|
|
<span>{copiedSkillId === skill.id ? 'Copied!' : 'Copy Code'}</span>
|
|
</button>
|
|
</div>
|
|
<pre className="p-3 bg-slate-950 text-indigo-300 font-mono text-[11px] rounded-xl overflow-x-auto border border-slate-800/80">
|
|
{skill.codeSnippet}
|
|
</pre>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
|
|
<div className="flex items-center justify-end pt-2 border-t border-slate-100">
|
|
<button
|
|
type="button"
|
|
onClick={onClose}
|
|
className="px-5 py-2.5 bg-slate-900 text-white font-bold rounded-xl hover:bg-slate-800 transition text-xs"
|
|
>
|
|
Close Guide
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|