page.tsx•8.82 kB
"use client";
import { useEffect, useState } from "react";
interface ServerStatus {
status: string;
timestamp: string;
environment: string;
httpsEnabled: boolean;
}
export default function Home() {
const [serverStatus, setServerStatus] = useState<ServerStatus | null>(null);
const [loading, setLoading] = useState(true);
useEffect(() => {
fetch("/api/health")
.then((res) => res.json())
.then((data) => {
setServerStatus(data);
setLoading(false);
})
.catch((err) => {
console.error("Failed to fetch server status:", err);
setLoading(false);
});
}, []);
return (
<div className="min-h-screen bg-gradient-to-br from-blue-50 to-indigo-100 dark:from-gray-900 dark:to-gray-800">
<div className="container mx-auto px-4 py-8">
<header className="mb-8">
<h1 className="text-4xl font-bold text-gray-900 dark:text-white mb-2">
ScanPower MCP Server
</h1>
<p className="text-gray-600 dark:text-gray-300">
Model Context Protocol server for ScanPower API integration
</p>
</header>
<div className="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
{/* Server Status Card */}
<div className="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-6">
<h2 className="text-xl font-semibold text-gray-900 dark:text-white mb-4">
Server Status
</h2>
{loading ? (
<div className="animate-pulse">
<div className="h-4 bg-gray-200 rounded w-3/4 mb-2"></div>
<div className="h-4 bg-gray-200 rounded w-1/2"></div>
</div>
) : serverStatus ? (
<div className="space-y-2">
<div className="flex items-center">
<span
className={`inline-block w-3 h-3 rounded-full mr-2 ${
serverStatus.status === "ok"
? "bg-green-500"
: "bg-red-500"
}`}
></span>
<span className="text-gray-700 dark:text-gray-300">
{serverStatus.status === "ok" ? "Online" : "Offline"}
</span>
</div>
<p className="text-sm text-gray-600 dark:text-gray-400">
Environment: <span className="font-medium">{serverStatus.environment}</span>
</p>
<p className="text-sm text-gray-600 dark:text-gray-400">
HTTPS: <span className="font-medium">{serverStatus.httpsEnabled ? "Enabled" : "Disabled"}</span>
</p>
<p className="text-xs text-gray-500 dark:text-gray-500 mt-2">
Last checked: {new Date(serverStatus.timestamp).toLocaleString()}
</p>
</div>
) : (
<p className="text-red-500">Unable to fetch status</p>
)}
</div>
{/* API Endpoints Card */}
<div className="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-6">
<h2 className="text-xl font-semibold text-gray-900 dark:text-white mb-4">
Available Endpoints
</h2>
<ul className="space-y-2 text-sm">
<li className="flex items-start">
<span className="text-green-500 mr-2">●</span>
<div>
<code className="text-blue-600 dark:text-blue-400">/api/health</code>
<p className="text-gray-600 dark:text-gray-400 text-xs">Health check endpoint</p>
</div>
</li>
<li className="flex items-start">
<span className="text-green-500 mr-2">●</span>
<div>
<code className="text-blue-600 dark:text-blue-400">/api/mcp/*</code>
<p className="text-gray-600 dark:text-gray-400 text-xs">MCP protocol endpoints</p>
</div>
</li>
</ul>
</div>
{/* Documentation Card */}
<div className="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-6">
<h2 className="text-xl font-semibold text-gray-900 dark:text-white mb-4">
Documentation
</h2>
<p className="text-sm text-gray-600 dark:text-gray-400 mb-4">
Learn more about the ScanPower API and MCP protocol integration.
</p>
<div className="space-y-2">
<a
href="https://api.scanpower.com/docs/api/index.html"
target="_blank"
rel="noopener noreferrer"
className="block text-blue-600 dark:text-blue-400 hover:underline text-sm"
>
ScanPower API Docs →
</a>
<a
href="https://modelcontextprotocol.io"
target="_blank"
rel="noopener noreferrer"
className="block text-blue-600 dark:text-blue-400 hover:underline text-sm"
>
MCP Protocol Docs →
</a>
</div>
</div>
</div>
{/* Features Section */}
<div className="mt-8 bg-white dark:bg-gray-800 rounded-lg shadow-lg p-6">
<h2 className="text-2xl font-semibold text-gray-900 dark:text-white mb-4">
Features
</h2>
<div className="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
<div className="flex items-start">
<svg
className="w-6 h-6 text-green-500 mr-3 mt-1"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={2}
d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"
/>
</svg>
<div>
<h3 className="font-semibold text-gray-900 dark:text-white">HTTPS Support</h3>
<p className="text-sm text-gray-600 dark:text-gray-400">
Secure connections with configurable SSL/TLS
</p>
</div>
</div>
<div className="flex items-start">
<svg
className="w-6 h-6 text-green-500 mr-3 mt-1"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={2}
d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"
/>
</svg>
<div>
<h3 className="font-semibold text-gray-900 dark:text-white">Request Logging</h3>
<p className="text-sm text-gray-600 dark:text-gray-400">
Comprehensive logging of all API requests
</p>
</div>
</div>
<div className="flex items-start">
<svg
className="w-6 h-6 text-green-500 mr-3 mt-1"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={2}
d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"
/>
</svg>
<div>
<h3 className="font-semibold text-gray-900 dark:text-white">TypeScript</h3>
<p className="text-sm text-gray-600 dark:text-gray-400">
Type-safe implementation with full TypeScript support
</p>
</div>
</div>
<div className="flex items-start">
<svg
className="w-6 h-6 text-green-500 mr-3 mt-1"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={2}
d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"
/>
</svg>
<div>
<h3 className="font-semibold text-gray-900 dark:text-white">Configurable</h3>
<p className="text-sm text-gray-600 dark:text-gray-400">
Environment-based configuration for flexibility
</p>
</div>
</div>
</div>
</div>
</div>
</div>
);
}