nitrostack 1.0.22 → 1.0.24

package/src/studio/app/logs/page.tsx

@@ -0,0 +1,279 @@
+'use client';
+
+import { useEffect, useState, useRef } from 'react';
+import { Terminal, Download, Copy, Trash2, Play, Pause, Filter } from 'lucide-react';
+
+interface LogEntry {
+  timestamp: string;
+  level: 'info' | 'error' | 'warn' | 'debug';
+  message: string;
+  data?: any;
+}
+
+export default function LogsPage() {
+  const [logs, setLogs] = useState<LogEntry[]>([]);
+  const [isStreaming, setIsStreaming] = useState(true);
+  const [autoScroll, setAutoScroll] = useState(true);
+  const [filter, setFilter] = useState<string>('all');
+  const [error, setError] = useState<string | null>(null);
+  const logsEndRef = useRef<HTMLDivElement>(null);
+  const eventSourceRef = useRef<EventSource | null>(null);
+
+  // Auto-scroll to bottom
+  useEffect(() => {
+    if (autoScroll && logsEndRef.current) {
+      logsEndRef.current.scrollIntoView({ behavior: 'smooth' });
+    }
+  }, [logs, autoScroll]);
+
+  // Connect to SSE stream
+  useEffect(() => {
+    if (!isStreaming) return;
+
+    const eventSource = new EventSource('http://localhost:3004/mcp-logs');
+    eventSourceRef.current = eventSource;
+
+    eventSource.onopen = () => {
+      setError(null);
+    };
+
+    eventSource.onmessage = (event) => {
+      try {
+        const { level, message, timestamp, ...data } = JSON.parse(event.data);
+        const log: LogEntry = { level, message, timestamp, data };
+        setLogs((prev) => [...prev, log]);
+      } catch (error) {
+        console.error('Failed to parse log:', error);
+      }
+    };
+
+    eventSource.onerror = (error) => {
+      console.error('SSE error:', error);
+      setError('Failed to connect to log stream. Is the MCP server running?');
+      // Don't close the event source here, it will try to reconnect automatically
+    };
+
+    return () => {
+      eventSource.close();
+    };
+  }, [isStreaming]);
+
+  const clearLogs = () => {
+    setLogs([]);
+  };
+
+  const downloadLogs = () => {
+    const logsText = logs.map(log => 
+      `[${log.timestamp}] [${log.level.toUpperCase()}] ${log.message}${log.data ? '\n' + JSON.stringify(log.data, null, 2) : ''}`
+    ).join('\n\n');
+    
+    const blob = new Blob([logsText], { type: 'text/plain' });
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement('a');
+    a.href = url;
+    a.download = `nitrostack-logs-${new Date().toISOString()}.txt`;
+    a.click();
+    URL.revokeObjectURL(url);
+  };
+
+  const copyLogs = async () => {
+    const logsText = logs.map(log => 
+      `[${log.timestamp}] [${log.level.toUpperCase()}] ${log.message}${log.data ? '\n' + JSON.stringify(log.data, null, 2) : ''}`
+    ).join('\n\n');
+    
+    await navigator.clipboard.writeText(logsText);
+    // Could add a toast notification here
+  };
+
+  const toggleStreaming = () => {
+    setIsStreaming(!isStreaming);
+  };
+
+  const filteredLogs = filter === 'all' 
+    ? logs 
+    : logs.filter(log => log.level === filter);
+
+  const getLevelColor = (level: string) => {
+    switch (level) {
+      case 'error': return 'text-red-400';
+      case 'warn': return 'text-yellow-400';
+      case 'debug': return 'text-blue-400';
+      default: return 'text-emerald-400';
+    }
+  };
+
+  const getLevelBg = (level: string) => {
+    switch (level) {
+      case 'error': return 'bg-red-500/10 border-red-500/20';
+      case 'warn': return 'bg-yellow-500/10 border-yellow-500/20';
+      case 'debug': return 'bg-blue-500/10 border-blue-500/20';
+      default: return 'bg-emerald-500/10 border-emerald-500/20';
+    }
+  };
+
+  const formatData = (data: any) => {
+    try {
+      return JSON.stringify(data, null, 2);
+    } catch {
+      return String(data);
+    }
+  };
+
+  return (
+    <div className="flex flex-col h-screen bg-black">
+      {/* Header */}
+      <div className="flex items-center justify-between px-6 py-4 bg-gradient-to-r from-slate-900 via-slate-800 to-slate-900 border-b border-slate-700">
+        <div className="flex items-center gap-3">
+          <div className="p-2 rounded-lg bg-emerald-500/10 border border-emerald-500/20">
+            <Terminal className="w-5 h-5 text-emerald-400" />
+          </div>
+          <div>
+            <h1 className="text-xl font-bold text-white">Server Logs</h1>
+            <p className="text-sm text-slate-400">Real-time MCP server logging</p>
+          </div>
+        </div>
+
+        <div className="flex items-center gap-2">
+          {/* Filter */}
+          <select
+            value={filter}
+            onChange={(e) => setFilter(e.target.value)}
+            className="px-3 py-2 bg-slate-800 border border-slate-700 rounded-lg text-sm text-white focus:outline-none focus:ring-2 focus:ring-emerald-500"
+          >
+            <option value="all">All Levels</option>
+            <option value="info">Info</option>
+            <option value="warn">Warnings</option>
+            <option value="error">Errors</option>
+            <option value="debug">Debug</option>
+          </select>
+
+          {/* Auto-scroll toggle */}
+          <button
+            onClick={() => setAutoScroll(!autoScroll)}
+            className={`px-3 py-2 rounded-lg text-sm font-medium transition-colors ${
+              autoScroll
+                ? 'bg-emerald-500/20 text-emerald-400 border border-emerald-500/30'
+                : 'bg-slate-800 text-slate-400 border border-slate-700 hover:bg-slate-700'
+            }`}
+          >
+            Auto-scroll
+          </button>
+
+          {/* Streaming toggle */}
+          <button
+            onClick={toggleStreaming}
+            className={`p-2 rounded-lg transition-colors ${
+              isStreaming
+                ? 'bg-emerald-500/20 text-emerald-400 border border-emerald-500/30'
+                : 'bg-slate-800 text-slate-400 border border-slate-700 hover:bg-slate-700'
+            }`}
+            title={isStreaming ? 'Pause streaming' : 'Resume streaming'}
+          >
+            {isStreaming ? <Pause className="w-4 h-4" /> : <Play className="w-4 h-4" />}
+          </button>
+
+          {/* Copy */}
+          <button
+            onClick={copyLogs}
+            className="p-2 bg-slate-800 border border-slate-700 rounded-lg text-slate-400 hover:bg-slate-700 hover:text-white transition-colors"
+            title="Copy logs"
+          >
+            <Copy className="w-4 h-4" />
+          </button>
+
+          {/* Download */}
+          <button
+            onClick={downloadLogs}
+            className="p-2 bg-slate-800 border border-slate-700 rounded-lg text-slate-400 hover:bg-slate-700 hover:text-white transition-colors"
+            title="Download logs"
+          >
+            <Download className="w-4 h-4" />
+          </button>
+
+          {/* Clear */}
+          <button
+            onClick={clearLogs}
+            className="p-2 bg-slate-800 border border-slate-700 rounded-lg text-slate-400 hover:bg-red-900/50 hover:text-red-400 hover:border-red-500/30 transition-colors"
+            title="Clear logs"
+          >
+            <Trash2 className="w-4 h-4" />
+          </button>
+        </div>
+      </div>
+
+      {/* Error Display */}
+      {error && (
+        <div className="bg-red-500/10 text-red-400 px-6 py-3 border-b border-red-500/20 text-sm">
+          <strong>Connection Error:</strong> {error}
+        </div>
+      )}
+
+      {/* Stats Bar */}
+      <div className="flex items-center gap-4 px-6 py-3 bg-slate-900/50 border-b border-slate-800">
+        <div className="flex items-center gap-2 text-sm">
+          <span className="text-slate-400">Total:</span>
+          <span className="font-mono font-bold text-white">{logs.length}</span>
+        </div>
+        <div className="flex items-center gap-2 text-sm">
+          <span className="text-slate-400">Filtered:</span>
+          <span className="font-mono font-bold text-white">{filteredLogs.length}</span>
+        </div>
+        <div className="flex items-center gap-2 text-sm">
+          <div className="w-2 h-2 rounded-full bg-emerald-500 animate-pulse" />
+          <span className="text-slate-400">
+            {isStreaming ? 'Streaming' : 'Paused'}
+          </span>
+        </div>
+      </div>
+
+      {/* Logs Container */}
+      <div className="flex-1 overflow-y-auto bg-black font-mono text-sm">
+        {filteredLogs.length === 0 ? (
+          <div className="flex flex-col items-center justify-center h-full text-slate-600">
+            <Terminal className="w-16 h-16 mb-4 opacity-20" />
+            <p className="text-lg font-medium">No logs yet</p>
+            <p className="text-sm">Logs will appear here as they are generated</p>
+          </div>
+        ) : (
+          <div className="p-4 space-y-2">
+            {filteredLogs.map((log, index) => (
+              <div
+                key={index}
+                className={`p-3 rounded-lg border ${getLevelBg(log.level)} hover:border-opacity-50 transition-all`}
+              >
+                <div className="flex items-start gap-3">
+                  {/* Timestamp */}
+                  <span className="text-slate-500 text-xs whitespace-nowrap">
+                    {log.timestamp}
+                  </span>
+
+                  {/* Level Badge */}
+                  <span
+                    className={`px-2 py-0.5 rounded text-xs font-bold uppercase ${getLevelColor(log.level)}`}
+                  >
+                    {log.level}
+                  </span>
+
+                  {/* Message */}
+                  <div className="flex-1">
+                    <p className="text-white break-words">{log.message}</p>
+                    
+                    {/* Data (if present) */}
+                    {log.data && (
+                      <pre className="mt-2 p-3 bg-black/50 rounded border border-slate-800 overflow-x-auto">
+                        <code className="text-xs text-slate-300">
+                          {formatData(log.data)}
+                        </code>
+                      </pre>
+                    )}
+                  </div>
+                </div>
+              </div>
+            ))}
+            <div ref={logsEndRef} />
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}

package/src/studio/next.config.js

@@ -28,6 +28,10 @@ const nextConfig = {
     // Do NOT inject custom TS rules; rely on Next's defaults + transpilePackages
     return config;
   },
+  env: {
+    MCP_SERVER_PORT: process.env.MCP_SERVER_PORT,
+    MCP_TRANSPORT_TYPE: process.env.MCP_TRANSPORT_TYPE,
+  },
 };
 
 export default nextConfig;

package/templates/typescript-auth/package.json

@@ -6,7 +6,8 @@
   "scripts": {
     "dev": "nitrostack dev",
     "build": "nitrostack build",
-    "start": "nitrostack start",
+    "start": "npm run build && nitrostack start",
+    "start:prod": "nitrostack start",
     "widget": "npm --prefix src/widgets",
     "setup-db": "node --loader ts-node/esm src/db/setup.ts"
   },

package/templates/typescript-auth/src/index.ts

@@ -9,39 +9,20 @@
  * - Production (NODE_ENV=production): Dual transport (STDIO + HTTP SSE)
  */
 
+import { config } from 'dotenv';
 import { McpApplicationFactory } from 'nitrostack';
 import { AppModule } from './app.module.js';
 
+// Load environment variables from .env file
+config();
+
 /**
  * Bootstrap the application
  */
 async function bootstrap() {
-  // Create the MCP server from AppModule
+  // Create and start the MCP server
   const server = await McpApplicationFactory.create(AppModule);
-  
-  // Determine transport based on environment
-  const isDevelopment = process.env.NODE_ENV === 'development' || !process.env.NODE_ENV;
-  
-  if (isDevelopment) {
-    // Development: STDIO only (for local testing with MCP Inspector, Claude Desktop)
-    await server.start('stdio');
-    console.error('🚀 Server running in DEVELOPMENT mode (STDIO only)');
-  } else {
-    // Production: Dual transport (STDIO + HTTP SSE)
-    const port = parseInt(process.env.PORT || '3002');
-    const host = process.env.HOST || '0.0.0.0';
-    
-    await server.start('dual', {
-      port,
-      host,
-      endpoint: '/mcp',
-      enableCors: process.env.ENABLE_CORS !== 'false', // Enable by default, disable with ENABLE_CORS=false
-    });
-    
-    console.error('🚀 Server running in PRODUCTION mode (DUAL)');
-    console.error(`   📡 STDIO: Ready for direct connections`);
-    console.error(`   🌐 HTTP SSE: http://${host}:${port}/mcp`);
-  }
+  await server.start();
 }
 
 // Start the application

package/templates/typescript-auth-api-key/package.json

@@ -6,10 +6,12 @@
   "scripts": {
     "dev": "nitrostack dev",
     "build": "nitrostack build",
-    "start": "nitrostack start",
+    "start": "npm run build && nitrostack start",
+    "start:prod": "nitrostack start",
     "widget": "npm --prefix src/widgets"
   },
   "dependencies": {
+    "dotenv": "^16.4.5",
     "nitrostack": "^1",
     "zod": "^3.23.8"
   },

package/templates/typescript-auth-api-key/src/index.ts

@@ -1,7 +1,11 @@
 #!/usr/bin/env node
+import { config } from 'dotenv';
 import { McpApplicationFactory } from 'nitrostack';
 import { AppModule } from './app.module.js';
 
+// Load environment variables from .env file
+config();
+
 /**
  * API Key Authentication MCP Server
  * 
@@ -34,32 +38,8 @@ async function bootstrap() {
     console.error('   - Protected tools require valid API key');
     console.error('   - Public tools accessible without authentication\n');
 
-    // Determine transport based on environment
-    const isDevelopment = process.env.NODE_ENV === 'development' || !process.env.NODE_ENV;
-    
-    if (isDevelopment) {
-      // Development: STDIO only (for local testing)
-      await app.start('stdio');
-      console.error('🚀 Server running in DEVELOPMENT mode (STDIO only)');
-      console.error('   Use MCP Inspector or Claude Desktop for testing\n');
-    } else {
-      // Production: Dual transport (STDIO + HTTP SSE)
-      const port = parseInt(process.env.PORT || '3002');
-      const host = process.env.HOST || '0.0.0.0';
-      
-      await app.start('dual', {
-        port,
-        host,
-        endpoint: '/mcp',
-        enableCors: process.env.ENABLE_CORS !== 'false', // Enable by default, disable with ENABLE_CORS=false
-      });
-      
-      console.error('🚀 Server running in PRODUCTION mode (DUAL)');
-      console.error(`   📡 STDIO: Ready for direct connections`);
-      console.error(`   🌐 HTTP SSE: http://${host}:${port}/mcp`);
-      console.error('   Open NitroStack Studio to test the server');
-      console.error('   Set your API key in Studio → Auth → API Key section\n');
-    }
+    // Start the server
+    await app.start();
     
   } catch (error) {
     console.error('❌ Failed to start server:', error);

package/templates/typescript-oauth/.env.example

@@ -1,59 +1,70 @@
 # OAuth 2.1 MCP Server Configuration
 
+# =============================================================================
+# TRANSPORT MODE (AUTO-CONFIGURED)
+# =============================================================================
+# When OAuth is configured, the server automatically runs in DUAL mode:
+# - STDIO: For MCP protocol communication with Studio/Claude
+# - HTTP: For OAuth metadata endpoints (/.well-known/oauth-protected-resource)
+# Both transports run simultaneously on different channels.
+
 # =============================================================================
 # REQUIRED: Server Configuration
 # =============================================================================
 
-# Your MCP server's public URL (used for token audience binding - RFC 8707)
-# This MUST match the URL where your MCP server is accessible
-# Example: https://mcp.yourapp.com or http://localhost:3000 for development
-RESOURCE_URI=https://mcp.example.com
+# Your MCP server's resource URI (used for token audience binding - RFC 8707)
+# ⚠️ CRITICAL: This MUST match EXACTLY the "API Identifier" in your OAuth provider
+# 
+# For Auth0: Copy the "Identifier" from APIs → Your API → Settings
+# For development: Can be any unique URI like https://mcplocal or http://localhost:3005
+# For production: Use your actual domain like https://api.yourapp.com
+#
+# ⚠️ This value is used for:
+#   1. Token audience validation (security critical!)
+#   2. OAuth discovery metadata
+#   3. The "audience" parameter sent to your OAuth provider
+RESOURCE_URI=https://mcplocal
 
 # Your OAuth 2.1 authorization server URL
 # This is the base URL of your OAuth provider (Auth0, Okta, Keycloak, etc.)
 # Example for Auth0: https://your-tenant.auth0.com
 # Example for Okta: https://your-domain.okta.com
-AUTH_SERVER_URL=https://auth.example.com
+AUTH_SERVER_URL=https://your-tenant.auth0.com
 
 # =============================================================================
 # OPTIONAL: Token Configuration
 # =============================================================================
 
 # Expected token audience (defaults to RESOURCE_URI if not set)
-# This MUST match the audience claim in access tokens
-TOKEN_AUDIENCE=https://mcp.example.com
+# ⚠️ This MUST match EXACTLY the RESOURCE_URI above
+TOKEN_AUDIENCE=https://mcplocal
 
 # Expected token issuer (recommended for security)
 # This MUST match the issuer claim in access tokens
-# Example for Auth0: https://your-tenant.auth0.com/
+# ⚠️ For Auth0: Add trailing slash! https://your-tenant.auth0.com/
 # Example for Okta: https://your-domain.okta.com/oauth2/default
-TOKEN_ISSUER=https://auth.example.com/
+TOKEN_ISSUER=https://your-tenant.auth0.com/
 
-# =============================================================================
-# OPTIONAL: Token Introspection (for opaque tokens)
-# =============================================================================
 
-# If your OAuth provider issues opaque tokens (not JWTs), configure these:
 
-# Token introspection endpoint (RFC 7662)
-# Example for Auth0: https://your-tenant.auth0.com/oauth/token/introspection
-# Example for Okta: https://your-domain.okta.com/oauth2/default/v1/introspect
-# INTROSPECTION_ENDPOINT=https://auth.example.com/oauth/introspect
 
-# Client credentials for introspection
-# These are separate from your MCP client credentials
-# INTROSPECTION_CLIENT_ID=your-introspection-client-id
-# INTROSPECTION_CLIENT_SECRET=your-introspection-client-secret
 
 # =============================================================================
 # Provider-Specific Examples
 # =============================================================================
 
-# --- Auth0 Example ---
-# RESOURCE_URI=https://mcp.yourapp.com
+# --- Auth0 Example (RECOMMENDED FOR TESTING) ---
+# Step 1: Create API in Auth0 with Identifier = https://mcplocal
+# Step 2: Create "Regular Web Application" in Auth0
+# Step 3: Authorize the Application to access the API
+# Step 4: Use these settings:
+#
+# RESOURCE_URI=https://mcplocal
 # AUTH_SERVER_URL=https://your-tenant.auth0.com
-# TOKEN_AUDIENCE=https://mcp.yourapp.com
+# TOKEN_AUDIENCE=https://mcplocal
 # TOKEN_ISSUER=https://your-tenant.auth0.com/
+#
+# ⚠️ CRITICAL: RESOURCE_URI must match Auth0 API Identifier EXACTLY!
 
 # --- Okta Example ---
 # RESOURCE_URI=https://mcp.yourapp.com