AIInterfacesPage.tsxโข34.9 kB
import React from 'react';
import { NavLink } from 'react-router-dom';
import SEO from '../components/SEO';
import BreadcrumbSchema from '../components/BreadcrumbSchema';
import StructuredData from '../components/StructuredData';
import { H1, H2, H3, PageSubtitle } from '../components/Typography';
import CodeBlock, { InlineCode } from '../components/CodeBlock';
import LightCodeContainer from '../components/LightCodeContainer';
import NewcomerCTA from '../components/NewcomerCTA';
import { SITE_DATES } from '../constants';
// Small reusable bullet list with icon
const Check: React.FC<{ color?: string; children: React.ReactNode }> = ({ color = 'text-green-500', children }) => (
<li className="flex items-start gap-2 text-sm text-gray-700">
<span className={`${color} mt-0.5`}>โ
</span>
<span>{children}</span>
</li>
);
const SectionCard: React.FC<React.PropsWithChildren<{ className?: string }>> = ({ className = '', children }) => (
<div className={`rounded-2xl p-6 md:p-8 md:pt-0 border shadow-sm bg-white/90 backdrop-blur-sm ${className}`}>{children}</div>
);
const AIInterfacesPage: React.FC = () => {
const aiInterfacesStructuredData = {
"@context": "https://schema.org",
"@type": "TechArticle",
"headline": "AI Interface Integration - SFCC Development MCP Server",
"description": "Integration guide for AI assistants (Claude Desktop, GitHub Copilot, Cursor, generic MCP clients) with SFCC Development MCP Server.",
"author": {
"@type": "Person",
"name": "Thomas Theunen"
},
"publisher": {
"@type": "Person",
"name": "Thomas Theunen"
},
"datePublished": SITE_DATES.PUBLISHED,
"dateModified": SITE_DATES.MODIFIED,
"url": "https://sfcc-mcp-dev.rhino-inquisitor.com/ai-interfaces/",
"about": {
"@type": "SoftwareApplication",
"name": "SFCC Development MCP Server",
"applicationCategory": "DeveloperApplication",
"operatingSystem": "Node.js",
"offers": {
"@type": "Offer",
"price": "0",
"priceCurrency": "USD",
"availability": "https://schema.org/InStock"
}
}
};
return (
<div className="max-w-6xl mx-auto px-6 py-8">
<SEO
title="AI Interface Integration"
description="Integration guide for AI assistants (Claude Desktop, GitHub Copilot, Cursor, generic MCP clients) with SFCC Development MCP Server."
keywords="Claude Desktop MCP, GitHub Copilot, Cursor AI, MCP server integration, SFCC AI tools"
canonical="/ai-interfaces/"
ogType="article"
/>
<BreadcrumbSchema items={[
{ name: "Home", url: "/" },
{ name: "AI Interfaces", url: "/ai-interfaces/" }
]} />
<StructuredData structuredData={aiInterfacesStructuredData} />
{/* Hero */}
<div className="text-center">
<div className="inline-flex items-center gap-2 bg-gradient-to-r from-blue-600 to-purple-600 text-white px-4 py-2 rounded-full text-sm font-medium mb-6">
<svg className="w-4 h-4" fill="currentColor" viewBox="0 0 20 20"><path fillRule="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" clipRule="evenodd" /></svg>
AI Interface Integration
</div>
<H1 id="ai-interface-setup" className="text-5xl md:text-6xl font-extrabold bg-gradient-to-r from-gray-900 via-blue-900 to-purple-900 bg-clip-text text-transparent mb-6">Connect Your AI Assistants</H1>
<PageSubtitle className="text-xl md:text-2xl text-gray-600 max-w-4xl mx-auto leading-relaxed">
Unified setup guide for Claude Desktop, GitHub Copilot, Cursor and any MCP-compatible client. Start in
documentation-only mode then unlock real-time log & job log analysis, system & custom object exploration,
and code version management with credentials.
</PageSubtitle>
</div>
{/* Newcomer CTA */}
<NewcomerCTA className="mb-20" />
{/* Quick Start (Tabbed) */}
<div id="quick-start" className="mb-20 bg-gradient-to-r from-blue-50 via-indigo-50 to-purple-50 rounded-2xl shadow-xl border border-blue-100 p-8">
<div className="text-center mb-10">
<H2 id="environment-modes" className="text-3xl font-bold mb-4">๐ Environment Modes</H2>
<p className="text-lg text-gray-700 max-w-3xl mx-auto">Switch between zero-config documentation mode and full analytics mode with a single flag.</p>
</div>
{/* Tabs */}
<ModeTabs />
</div>
{/* Configuration Options */}
<div id="configuration" className="mb-20 bg-gradient-to-r from-gray-50 to-blue-50 rounded-2xl border border-gray-200 p-8">
<div className="text-center mb-10">
<H2 id="configuration-flags" className="text-3xl font-bold mb-4">โ๏ธ Configuration Flags</H2>
<p className="text-lg text-gray-600 max-w-3xl mx-auto">Minimal surface area โ just two flags control operating mode & diagnostics.</p>
</div>
<div className="grid md:grid-cols-2 gap-6">
<div className="bg-white rounded-xl p-6 border border-gray-200">
<div className="flex items-center gap-3 mb-3">
<div className="bg-blue-100 rounded-full p-2"><svg className="w-4 h-4 text-blue-600" fill="currentColor" viewBox="0 0 20 20"><path fillRule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clipRule="evenodd" /></svg></div>
<span className="font-mono text-sm bg-gray-100 px-2 py-1 rounded">--dw-json <path></span>
</div>
<p className="text-gray-700 text-sm">Add credentials for real-time log & job log analysis, system & custom object exploration, site preference searches & code version management.</p>
</div>
<div className="bg-white rounded-xl p-6 border border-gray-200">
<div className="flex items-center gap-3 mb-3">
<div className="bg-green-100 rounded-full p-2"><svg className="w-4 h-4 text-green-600" fill="currentColor" viewBox="0 0 20 20"><path fillRule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clipRule="evenodd" /></svg></div>
<span className="font-mono text-sm bg-gray-100 px-2 py-1 rounded">--debug <true|false></span>
</div>
<p className="text-gray-700 text-sm">Enable verbose internal logging for troubleshooting & development.</p>
</div>
</div>
</div>
{/* Assistant Tabs Section */}
<div id="assistants" className="mb-24">
<div className="text-center mb-10">
<H2 id="ai-assistant-setup" className="text-3xl font-bold mb-4">AI Assistant Setup</H2>
<p className="text-gray-600 max-w-3xl mx-auto">Choose your interface โ configuration, strengths & verification prompts in one place.</p>
</div>
<SectionCard className="border-blue-200">
<AssistantTabs />
</SectionCard>
</div>
{/* Anchors preserved for deep links */}
<div id="claude" className="hidden" aria-hidden="true" />
<div id="copilot" className="hidden" aria-hidden="true" />
<div id="cursor" className="hidden" aria-hidden="true" />
{/* AI Instruction Files Section */}
<div id="instruction-files" className="mb-24">
<div className="text-center mb-10">
<H2 id="ai-instruction-files" className="text-3xl font-bold mb-4">๐ AI Instruction Files</H2>
<p className="text-gray-600 max-w-3xl mx-auto">
Enhance your AI assistant's SFCC expertise with specialized instruction files that provide context about development patterns, security practices, and MCP tool usage.
</p>
</div>
<SectionCard className="border-amber-200">
<InstructionFilesTabs />
</SectionCard>
</div>
{/* Universal Config */}
<div id="universal" className="mb-24">
<div className="text-center mb-8">
<H2 id="universal-mcp-configuration" className="text-3xl font-bold mb-4">Universal MCP Configuration</H2>
<p className="text-gray-600 max-w-3xl mx-auto">Works across any MCP-compatible AI (desktop, IDE plugin, CLI agent).</p>
</div>
<SectionCard>
<CodeBlock language="json" code={`{\n "mcpServers": {\n "sfcc-dev": {\n "command": "npx",\n "args": ["sfcc-dev-mcp", "--dw-json", "/Users/username/sfcc-project/dw.json", "--debug", "false"]\n }\n }\n}`} />
<ul className="list-disc pl-5 text-sm text-gray-700 mt-6 space-y-1">
<li><InlineCode>--dw-json</InlineCode> optional for docs-only mode</li>
<li><InlineCode>--debug</InlineCode> set true when diagnosing tool behavior</li>
</ul>
</SectionCard>
</div>
{/* Next Steps - HomePage style */}
<div id="next" className="mb-16 bg-gradient-to-r from-blue-50 via-indigo-50 to-purple-50 rounded-2xl p-10 shadow-xl border border-blue-100">
<div className="text-center mb-8">
<div className="inline-flex items-center gap-2 bg-blue-100 text-blue-800 px-4 py-2 rounded-full text-sm font-medium mb-4">
<svg className="w-4 h-4" fill="currentColor" viewBox="0 0 20 20"><path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clipRule="evenodd" /></svg>
You're Set Up
</div>
<p className="text-lg text-gray-700 max-w-3xl mx-auto">Pick your next pathโrefine configuration or explore full capability surface.</p>
<div className="mt-6 flex flex-col sm:flex-row gap-4 justify-center">
<NavLink to="/configuration/" className="inline-flex items-center justify-center px-6 py-3 rounded-full text-sm font-semibold bg-blue-600 text-white shadow hover:bg-blue-700 transition group no-underline hover:no-underline focus:no-underline">
Configuration Guide
<span className="ml-2 transition group-hover:translate-x-0.5">โ</span>
</NavLink>
<NavLink to="/features/" className="inline-flex items-center justify-center px-6 py-3 rounded-full text-sm font-semibold bg-white text-gray-800 border border-gray-300 hover:border-gray-400 hover:bg-gray-50 transition group no-underline hover:no-underline focus:no-underline">
Explore Features
<span className="ml-2 transition group-hover:translate-x-0.5">โ</span>
</NavLink>
</div>
</div>
</div>
</div>
);
};
export default AIInterfacesPage;
// --- Inline Tab Component (kept at bottom for clarity) ---
const ModeTabs: React.FC = () => {
const [active, setActive] = React.useState<'docs' | 'full'>('docs');
const tabBase = 'px-5 py-2 rounded-full text-sm font-medium transition border';
return (
<div>
<div role="tablist" aria-label="Mode selection" className="flex flex-wrap gap-3 mb-8 justify-center">
<button
role="tab"
aria-selected={active === 'docs'}
className={`${tabBase} ${active === 'docs' ? 'bg-blue-600 text-white border-blue-600 shadow' : 'bg-white text-gray-700 border-gray-200 hover:border-blue-400 hover:text-blue-600'}`}
onClick={() => setActive('docs')}
>Docs Mode</button>
<button
role="tab"
aria-selected={active === 'full'}
className={`${tabBase} ${active === 'full' ? 'bg-purple-600 text-white border-purple-600 shadow' : 'bg-white text-gray-700 border-gray-200 hover:border-purple-400 hover:text-purple-600'}`}
onClick={() => setActive('full')}
>Full Mode</button>
</div>
{/* Panels */}
{active === 'docs' && (
<div role="tabpanel" aria-label="Documentation Mode" className="space-y-8 animate-fade-in">
<div>
<h3 className="text-lg font-semibold text-gray-900 mb-4">Configuration (Docs Mode)</h3>
<LightCodeContainer>
<CodeBlock language="json" code={`{\n "mcpServers": {\n "sfcc-dev": {\n "command": "npx",\n "args": ["sfcc-dev-mcp"]\n }\n }\n}`} />
</LightCodeContainer>
</div>
<div>
<h4 className="font-semibold text-gray-900 mb-3">Benefits</h4>
<div className="grid md:grid-cols-3 gap-4">
<BenefitCard title="Zero Setup" color="blue" text="Immediate access to SFCC API docs, SFRA docs & best practices." />
<BenefitCard title="Fast Onboarding" color="green" text="Great for new devs or quick reference sessions." />
<BenefitCard title="Safe & Local" color="purple" text="No credentials needed (no logs / objects)." />
</div>
</div>
<p className="text-xs text-gray-500">Upgrade any time by adding <InlineCode>--dw-json</InlineCode>.</p>
</div>
)}
{active === 'full' && (
<div role="tabpanel" aria-label="Full Mode" className="space-y-8 animate-fade-in">
<div>
<h3 className="text-lg font-semibold text-gray-900 mb-4">Configuration (Full Mode)</h3>
<LightCodeContainer className="mb-4">
<CodeBlock language="json" code={`{\n "mcpServers": {\n "sfcc-dev": {\n "command": "npx",\n "args": [\n "sfcc-dev-mcp", \n "--dw-json", \n "/Users/username/sfcc-project/dw.json", \n "--debug", \n "false"\n ]\n }\n }\n}`} />
</LightCodeContainer>
<p className="text-sm text-gray-600">Set <InlineCode>--debug true</InlineCode> temporarily when diagnosing tool responses.</p>
</div>
<div>
<h4 className="font-semibold text-gray-900 mb-3">Additional Benefits</h4>
<div className="grid md:grid-cols-3 gap-4">
<BenefitCard title="Live Logs" color="blue" text="Real-time error, warn, info & debug analysis." />
<BenefitCard title="Job Insights" color="green" text="Job log discovery, execution summaries & step health." />
<BenefitCard title="Data Model" color="purple" text="System & custom objects, attributes & site preferences." />
<BenefitCard title="Code Versions" color="orange" text="List & activate versions for deployment fixes." />
<BenefitCard title="Deeper Reasoning" color="indigo" text="More context = better AI architectural guidance." />
<BenefitCard title="Unified Workflow" color="rose" text="Docs + analysis in one consistent interface." />
</div>
</div>
<p className="text-xs text-gray-500">Credentials never leave your machineโthis MCP server runs locally and only calls your sandbox APIs.</p>
</div>
)}
</div>
);
};
const BenefitCard: React.FC<{ title: string; text: string; color: string }> = ({ title, text, color }) => {
const colorMap: Record<string, string> = {
blue: 'bg-blue-50 text-blue-700 border-blue-200',
green: 'bg-green-50 text-green-700 border-green-200',
purple: 'bg-purple-50 text-purple-700 border-purple-200',
orange: 'bg-orange-50 text-orange-700 border-orange-200',
indigo: 'bg-indigo-50 text-indigo-700 border-indigo-200',
rose: 'bg-rose-50 text-rose-700 border-rose-200'
};
return (
<div className={`rounded-xl border p-4 ${colorMap[color] || 'bg-gray-50 text-gray-700 border-gray-200'}`}>
<h5 className="font-semibold mb-1 text-sm">{title}</h5>
<p className="text-xs leading-relaxed">{text}</p>
</div>
);
};
// AssistantTabs component for Claude / Copilot / Cursor (refined layout)
const AssistantTabs: React.FC = () => {
type Assistant = 'claude' | 'copilot' | 'cursor';
const [active, setActive] = React.useState<Assistant>('copilot');
const tabBase = 'px-5 py-2 rounded-full text-sm font-medium transition border';
// Unified configuration: keep identical parameters for all assistants for clarity
const unifiedSnippet = `{"mcpServers":{"sfcc-dev":{"command":"npx","args":["sfcc-dev-mcp","--dw-json","/Users/username/sfcc-project/dw.json","--debug","false"]}}}`;
const configSnippets: Record<Assistant, string> = {
claude: unifiedSnippet,
copilot: unifiedSnippet,
cursor: unifiedSnippet
};
const benefits: Record<Assistant, Array<{ title: string; text: string; color: string }>> = {
claude: [
{ title: 'Deep Reasoning', text: 'Great for architecture & multi-step planning.', color: 'blue' },
{ title: 'Debug Sessions', text: 'Explain logs & identify root causes.', color: 'green' },
{ title: 'Exploration', text: 'Modeling & refactor strategy guidance.', color: 'purple' }
],
copilot: [
{ title: 'Inline Speed', text: 'Rapid completions & edits in VS Code.', color: 'green' },
{ title: 'Scaffolding', text: 'Generate controllers, models & tests.', color: 'blue' },
{ title: 'Everyday Flow', text: 'Low-friction iteration for daily work.', color: 'purple' }
],
cursor: [
{ title: 'Rule Packs', text: 'Context-aware security & performance rules.', color: 'purple' },
{ title: 'Large Changes', text: 'Safely coordinate multi-file refactors.', color: 'blue' },
{ title: 'Consistency', text: 'Standardize patterns across the codebase.', color: 'green' }
]
};
const prompts: Record<Assistant, string[]> = {
claude: [
'List available SFCC documentation tools',
'Analyze recent error logs then summarize likely root cause',
'Generate cartridge structure named demo_cartridge',
'Show hook reference entries for SCAPI extension points'
],
copilot: [
'Show methods on dw.catalog.Product',
'Create SFRA controller for Product-Show',
'Search job logs for failed step exceptions',
'List custom attributes on Product object'
],
cursor: [
'Suggest performance improvements for this controller',
'Apply security patterns to this hook',
'Search SFRA docs for middleware guidance',
'Summarize latest job execution health'
]
};
const renderSnippet = (assistant: Assistant) => {
const json = configSnippets[assistant];
const pretty = JSON.stringify(JSON.parse(json), null, 2);
return <CodeBlock language="json" code={pretty} />;
};
return (
<div>
<div role="tablist" aria-label="Assistant selection" className="flex flex-wrap gap-3 mb-10 mt-10 justify-center">
<button
role="tab"
aria-selected={active === 'copilot'}
className={`${tabBase} ${active === 'copilot' ? 'bg-green-600 text-white border-green-600 shadow' : 'bg-white text-gray-700 border-gray-200 hover:border-green-400 hover:text-green-600'}`}
onClick={() => setActive('copilot')}
>GitHub Copilot</button>
<button
role="tab"
aria-selected={active === 'claude'}
className={`${tabBase} ${active === 'claude' ? 'bg-blue-600 text-white border-blue-600 shadow' : 'bg-white text-gray-700 border-gray-200 hover:border-blue-400 hover:text-blue-600'}`}
onClick={() => setActive('claude')}
>Claude Desktop</button>
<button
role="tab"
aria-selected={active === 'cursor'}
className={`${tabBase} ${active === 'cursor' ? 'bg-purple-600 text-white border-purple-600 shadow' : 'bg-white text-gray-700 border-gray-200 hover:border-purple-400 hover:text-purple-600'}`}
onClick={() => setActive('cursor')}
>Cursor</button>
</div>
<div className="space-y-10 animate-fade-in" role="tabpanel">
<div>
<h3 className="text-lg font-semibold text-gray-900 mb-4">Configuration</h3>
<LightCodeContainer className="mb-6">
{renderSnippet(active)}
</LightCodeContainer>
<div className="flex justify-center mb-6">
<div className="flex flex-wrap gap-3 justify-center">
{active === 'copilot' && (
<>
<a
href="https://docs.github.com/en/copilot/how-tos/provide-context/use-mcp/extend-copilot-chat-with-mcp"
target="_blank"
rel="noopener noreferrer"
className="inline-flex items-center gap-2 px-6 py-3 bg-green-100 hover:bg-green-200 text-green-700 hover:text-green-800 rounded-lg font-medium transition-all duration-200 transform hover:scale-105 shadow-md hover:shadow-lg no-underline hover:no-underline focus:no-underline"
>
๐ Copilot MCP Setup
<svg className="w-4 h-4" fill="currentColor" viewBox="0 0 20 20">
<path fillRule="evenodd" d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z" clipRule="evenodd" />
</svg>
</a>
<a
href="https://www.youtube.com/watch?v=ZlrQJQV14xQ&t=215s"
target="_blank"
rel="noopener noreferrer"
className="inline-flex items-center gap-2 px-6 py-3 bg-green-100 hover:bg-green-200 text-green-700 hover:text-green-800 rounded-lg font-medium transition-all duration-200 transform hover:scale-105 shadow-md hover:shadow-lg no-underline hover:no-underline focus:no-underline"
>
๐ฅ Video Guide
<svg className="w-4 h-4" fill="currentColor" viewBox="0 0 20 20">
<path fillRule="evenodd" d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z" clipRule="evenodd" />
</svg>
</a>
</>
)}
{active === 'claude' && (
<a
href="https://support.anthropic.com/en/articles/10949351-getting-started-with-local-mcp-servers-on-claude-desktop"
target="_blank"
rel="noopener noreferrer"
className="inline-flex items-center gap-2 px-6 py-3 bg-blue-100 hover:bg-blue-200 text-blue-700 hover:text-blue-800 rounded-lg font-medium transition-all duration-200 transform hover:scale-105 shadow-md hover:shadow-lg no-underline hover:no-underline focus:no-underline"
>
๐ Claude MCP Setup
<svg className="w-4 h-4" fill="currentColor" viewBox="0 0 20 20">
<path fillRule="evenodd" d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z" clipRule="evenodd" />
</svg>
</a>
)}
{active === 'cursor' && (
<a
href="https://docs.cursor.com/advanced/model-context-protocol"
target="_blank"
rel="noopener noreferrer"
className="inline-flex items-center gap-2 px-6 py-3 bg-purple-100 hover:bg-purple-200 text-purple-700 hover:text-purple-800 rounded-lg font-medium transition-all duration-200 transform hover:scale-105 shadow-md hover:shadow-lg no-underline hover:no-underline focus:no-underline"
>
๐ Cursor MCP Setup
<svg className="w-4 h-4" fill="currentColor" viewBox="0 0 20 20">
<path fillRule="evenodd" d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z" clipRule="evenodd" />
</svg>
</a>
)}
</div>
</div>
<p className="text-xs text-gray-500 text-center">Docs-only mode: omit <InlineCode>--dw-json</InlineCode>. Enable verbose logging temporarily with <InlineCode>--debug true</InlineCode>.</p>
</div>
<div>
<h4 className="font-semibold text-gray-900 mb-3">Key Strengths</h4>
<div className="grid md:grid-cols-3 gap-4">
{benefits[active].map(b => <BenefitCard key={b.title} title={b.title} text={b.text} color={b.color} />)}
</div>
</div>
<div>
<h4 className="font-semibold text-gray-900 mb-2">Verification Prompts</h4>
<ul className="list-disc pl-5 text-xs text-gray-700 space-y-1">
{prompts[active].map(p => <li key={p}>{p}</li>)}
</ul>
</div>
</div>
</div>
);
};
// InstructionFilesTabs component for AI instruction file setup
const InstructionFilesTabs: React.FC = () => {
type InstructionTarget = 'copilot' | 'claude' | 'cursor';
const [active, setActive] = React.useState<InstructionTarget>('copilot');
const tabBase = 'px-5 py-2 rounded-full text-sm font-medium transition border';
const instructionData: Record<InstructionTarget, {
setupUrl: string;
files: Array<{ name: string; path: string; description: string }>;
instructions: string[];
}> = {
copilot: {
setupUrl: 'https://docs.github.com/en/copilot/how-tos/configure-custom-instructions/add-repository-instructions',
files: [
{
name: 'copilot-instructions.md',
path: '.github/copilot-instructions.md',
description: 'Main instruction file for GitHub Copilot with SFCC expertise and MCP tool usage patterns'
}
],
instructions: [
'Copy the instruction file from the repository to your project',
'Place it in the .github folder of your repository',
'Copilot will automatically detect and use these instructions when working in your repo',
'The file includes SFCC development patterns, security guidelines, and MCP tool usage'
]
},
claude: {
setupUrl: 'https://support.anthropic.com/en/articles/10185728-understanding-claude-s-personalization-features',
files: [
{
name: 'claude_custom_instructions.md',
path: 'ai-instructions/claude-desktop/claude_custom_instructions.md',
description: 'Claude Desktop-optimized instructions with conversational development patterns and MCP integration'
}
],
instructions: [
'Copy the instruction content from the repository file',
'Click your initials in the lower left corner of Claude',
'Select "Settings" from the menu',
'Under "What preferences should Claude consider in responses?", paste the content',
'These profile preferences will apply to all your conversations with Claude'
]
},
cursor: {
setupUrl: 'https://docs.cursor.com/en/context/rules',
files: [
{
name: 'SFCC Rule Pack',
path: 'ai-instructions/cursor/.cursor/rules/',
description: 'Complete rule pack with 12 specialized files covering all SFCC development areas'
}
],
instructions: [
'Copy the entire .cursor folder from the repository to your project root',
'This includes 12 specialized rule files covering different SFCC development areas',
'Cursor automatically applies rules based on file context and development patterns',
'Rules cover cartridge development, SFRA patterns, security, performance, and debugging'
]
}
};
return (
<div>
<div role="tablist" aria-label="Instruction files selection" className="flex flex-wrap gap-3 mb-10 mt-10 justify-center">
<button
role="tab"
aria-selected={active === 'copilot'}
className={`${tabBase} ${active === 'copilot' ? 'bg-green-600 text-white border-green-600 shadow' : 'bg-white text-gray-700 border-gray-200 hover:border-green-400 hover:text-green-600'}`}
onClick={() => setActive('copilot')}
>GitHub Copilot</button>
<button
role="tab"
aria-selected={active === 'claude'}
className={`${tabBase} ${active === 'claude' ? 'bg-blue-600 text-white border-blue-600 shadow' : 'bg-white text-gray-700 border-gray-200 hover:border-blue-400 hover:text-blue-600'}`}
onClick={() => setActive('claude')}
>Claude Desktop</button>
<button
role="tab"
aria-selected={active === 'cursor'}
className={`${tabBase} ${active === 'cursor' ? 'bg-purple-600 text-white border-purple-600 shadow' : 'bg-white text-gray-700 border-gray-200 hover:border-purple-400 hover:text-purple-600'}`}
onClick={() => setActive('cursor')}
>Cursor</button>
</div>
<div className="space-y-8 animate-fade-in" role="tabpanel">
<div>
<h3 className="text-lg font-semibold text-gray-900 mb-4">Available Instruction Files</h3>
<div className="space-y-4">
{instructionData[active].files.map((file, index) => (
<div key={index} className="bg-white rounded-xl p-6 border border-gray-200">
<div className="flex items-start gap-4">
<div className="bg-amber-100 rounded-full p-2 flex-shrink-0">
<svg className="w-5 h-5 text-amber-600" fill="currentColor" viewBox="0 0 20 20">
<path fillRule="evenodd" d="M4 4a2 2 0 012-2h4.586A2 2 0 0112 2.586L15.414 6A2 2 0 0116 7.414V16a2 2 0 01-2 2H6a2 2 0 01-2-2V4zm2 6a1 1 0 011-1h6a1 1 0 110 2H7a1 1 0 01-1-1zm1 3a1 1 0 100 2h6a1 1 0 100-2H7z" clipRule="evenodd" />
</svg>
</div>
<div className="flex-grow">
<h4 className="font-semibold text-gray-900 mb-2">{file.name}</h4>
<p className="text-sm text-gray-600 mb-3">{file.description}</p>
<div className="flex flex-wrap gap-3">
<a
href={`https://github.com/taurgis/sfcc-dev-mcp/tree/main/ai-instructions/cursor/.cursor/rules`}
target="_blank"
rel="noopener noreferrer"
className="inline-flex items-center gap-2 px-4 py-2 bg-gray-100 hover:bg-gray-200 text-gray-700 hover:text-gray-800 rounded-lg text-sm font-medium transition-all duration-200 no-underline hover:no-underline focus:no-underline"
>
๐ View on GitHub
<svg className="w-4 h-4" fill="currentColor" viewBox="0 0 20 20">
<path fillRule="evenodd" d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z" clipRule="evenodd" />
</svg>
</a>
<span className="inline-flex items-center gap-2 px-3 py-1 bg-gray-50 text-gray-600 rounded-lg text-xs font-mono">
{file.path}
</span>
</div>
</div>
</div>
</div>
))}
</div>
</div>
<div>
<h4 className="font-semibold text-gray-900 mb-4">Setup Instructions</h4>
<div className="bg-gradient-to-r from-amber-50 to-yellow-50 rounded-xl p-6 border border-amber-200">
<ol className="list-decimal list-inside space-y-3 text-sm text-gray-700">
{instructionData[active].instructions.map((instruction, index) => (
<li key={index} className="leading-relaxed">{instruction}</li>
))}
</ol>
</div>
<div className="flex justify-center mt-6">
<a
href={instructionData[active].setupUrl}
target="_blank"
rel="noopener noreferrer"
className="inline-flex items-center gap-2 px-6 py-3 bg-amber-100 hover:bg-amber-200 text-amber-700 hover:text-amber-800 rounded-lg font-medium transition-all duration-200 transform hover:scale-105 shadow-md hover:shadow-lg no-underline hover:no-underline focus:no-underline"
>
๐ Official Setup Guide
<svg className="w-4 h-4" fill="currentColor" viewBox="0 0 20 20">
<path fillRule="evenodd" d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z" clipRule="evenodd" />
</svg>
</a>
</div>
</div>
<div>
<h4 className="font-semibold text-gray-900 mb-3">Benefits</h4>
<div className="grid md:grid-cols-2 gap-4">
<div className="bg-green-50 border border-green-200 rounded-xl p-4">
<h5 className="font-semibold text-green-700 mb-2 text-sm">๐ฏ Enhanced Expertise</h5>
<p className="text-xs text-green-600 leading-relaxed">Pre-loaded SFCC knowledge, development patterns, and security best practices</p>
</div>
<div className="bg-blue-50 border border-blue-200 rounded-xl p-4">
<h5 className="font-semibold text-blue-700 mb-2 text-sm">๐ง MCP Tool Awareness</h5>
<p className="text-xs text-blue-600 leading-relaxed">Built-in knowledge of 36+ MCP tools (docs, SFRA, best practices, logs, job logs, objects, code versions)</p>
</div>
<div className="bg-purple-50 border border-purple-200 rounded-xl p-4">
<h5 className="font-semibold text-purple-700 mb-2 text-sm">โก Faster Development</h5>
<p className="text-xs text-purple-600 leading-relaxed">Immediate access to SFCC-specific patterns without requiring context</p>
</div>
<div className="bg-amber-50 border border-amber-200 rounded-xl p-4">
<h5 className="font-semibold text-amber-700 mb-2 text-sm">๐ Security-First</h5>
<p className="text-xs text-amber-600 leading-relaxed">Built-in security patterns and validation practices for SFCC development</p>
</div>
</div>
</div>
</div>
</div>
);
};