Added MCP Integration

Author: ryanm101

src/pages/Integrations.jsx

@@ -156,6 +156,12 @@ export default function IntegrationsPage() {
                                     </svg>
                                     <span className="text-gray-600"><strong className="text-gray-900">Auto Scanner</strong> — Python scanner to populate graph from scp.yaml files</span>
                                 </li>
+                                <li className="flex items-start gap-3">
+                                    <svg className="w-5 h-5 text-green-500 mt-0.5 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
+                                    </svg>
+                                    <span className="text-gray-600"><strong className="text-gray-900">MCP Server</strong> — Model Context Protocol server for LLM access to SCP data</span>
+                                </li>
                             </ul>
                         </div>
                     </div>
@@ -179,11 +185,74 @@ export default function IntegrationsPage() {
                             </div>
                         </div>
 
+                        <h3 className="font-medium text-gray-900 mt-8 mb-4">MCP Server Setup</h3>
+                        <p className="text-gray-600 mb-4">
+                            Enable LLM access to your SCP architecture by adding the MCP server to Claude Desktop:
+                        </p>
+
+                        <div className="bg-gray-900 rounded-xl p-6">
+                            <p className="text-gray-400 text-sm mb-2"># Add to ~/.config/claude/claude_desktop_config.json</p>
+                            <pre className="text-gray-300 font-mono text-sm overflow-x-auto">
+                                {`{
+  "mcpServers": {
+    "scp": {
+      "command": "node",
+      "args": ["/path/to/scp-viewer/packages/mcp/src/index.js"],
+      "env": {
+        "SCP_API_URL": "http://localhost:4000"
+      }
+    }
+  }
+}`}
+                            </pre>
+                        </div>
+
+                        <h3 className="font-medium text-gray-900 mt-8 mb-4">Example Usage</h3>
+                        <p className="text-gray-600 mb-4">
+                            Once configured, you can query your SCP architecture directly from Claude:
+                        </p>
+
+                        <div className="space-y-4">
+                            <div className="bg-blue-50 border-l-4 border-blue-500 p-4 rounded">
+                                <p className="text-sm font-medium text-blue-900 mb-1">User Query</p>
+                                <p className="text-blue-800 italic">"List all systems in the architecture"</p>
+                            </div>
+
+                            <div className="bg-gray-50 border-l-4 border-gray-400 p-4 rounded">
+                                <p className="text-sm font-medium text-gray-900 mb-2">Claude Response</p>
+                                <p className="text-gray-700 text-sm mb-2">Using <code className="bg-gray-200 px-1 rounded">list_systems</code> tool...</p>
+                                <p className="text-gray-600 text-sm">Returns all systems organized by tier (Critical, Important, etc.) with their URNs and descriptions.</p>
+                            </div>
+
+                            <div className="bg-blue-50 border-l-4 border-blue-500 p-4 rounded">
+                                <p className="text-sm font-medium text-blue-900 mb-1">User Query</p>
+                                <p className="text-blue-800 italic">"What is the blast radius of the fraud service?"</p>
+                            </div>
+
+                            <div className="bg-gray-50 border-l-4 border-gray-400 p-4 rounded">
+                                <p className="text-sm font-medium text-gray-900 mb-2">Claude Response</p>
+                                <p className="text-gray-700 text-sm mb-2">Using <code className="bg-gray-200 px-1 rounded">blast_radius</code> tool...</p>
+                                <p className="text-gray-600 text-sm">Analyzes the cascading impact showing 5 affected systems including Payment Orchestrator, Checkout Service, Webhook Ingress, and API Gateway, with dependency criticality details.</p>
+                            </div>
+                        </div>
+
+                        <a
+                            href="https://github.com/krackenservices/scp-viewer/blob/main/examples/mcp_acmepay.md"
+                            target="_blank"
+                            rel="noopener noreferrer"
+                            className="inline-flex items-center gap-2 mt-6 text-indigo-600 hover:text-indigo-700 font-medium"
+                        >
+                            View full example conversation
+                            <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14" />
+                            </svg>
+                        </a>
+
                         <a
                             href="https://github.com/krackenservices/scp-viewer"
                             target="_blank"
                             rel="noopener noreferrer"
-                            className="inline-flex items-center gap-2 px-5 py-2.5 bg-indigo-600 text-white font-medium rounded-lg hover:bg-indigo-700 transition-colors"
+                            className="inline-flex items-center gap-2 px-5 py-2.5 bg-indigo-600 text-white font-medium rounded-lg hover:bg-indigo-700 transition-colors mt-6"
                         >
                             View on GitHub
                             <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">