nitrostack 1.0.65 → 1.0.67

package/src/studio/app/api/init/route.ts

@@ -0,0 +1,109 @@
+// Initialize MCP client connection
+import { NextResponse } from 'next/server';
+import { getMcpClient } from '@/lib/mcp-client';
+import fs from 'fs';
+import path from 'path';
+
+function loadEnvFile(projectPath: string): Record<string, string> {
+  const envPath = path.join(projectPath, '.env');
+  const envVars: Record<string, string> = {};
+  
+  if (fs.existsSync(envPath)) {
+    const envContent = fs.readFileSync(envPath, 'utf-8');
+    envContent.split('\n').forEach(line => {
+      line = line.trim();
+      if (line && !line.startsWith('#')) {
+        const [key, ...valueParts] = line.split('=');
+        if (key && valueParts.length > 0) {
+          envVars[key.trim()] = valueParts.join('=').trim().replace(/^["']|["']$/g, '');
+        }
+      }
+    });
+  }
+  
+  return envVars;
+}
+
+export async function POST(request: Request) {
+  try {
+    const client = getMcpClient();
+
+    // Parse request body to get transport configuration
+    const body = await request.json().catch(() => ({}));
+    const transportType = body.transport || 'stdio'; // Default to stdio for backward compatibility
+
+    if (!client.isConnected()) {
+      if (transportType === 'http') {
+        // HTTP Transport Configuration
+        const baseUrl = body.baseUrl || process.env.MCP_HTTP_URL || 'http://localhost:3000';
+        const basePath = body.basePath || '/mcp';
+        const headers = body.headers || {};
+
+        console.log(`🌐 Connecting via HTTP transport to ${baseUrl}${basePath}`);
+
+        await client.connect({
+          type: 'http',
+          baseUrl,
+          basePath,
+          headers,
+        });
+
+        console.log('✅ MCP client connected successfully via HTTP');
+      } else {
+        // STDIO Transport Configuration (default)
+    const command = process.env.MCP_COMMAND || 'node';
+    const argsString = process.env.MCP_ARGS || '';
+    
+    // Parse MCP_ARGS - it can be a JSON array string or a single path
+    let args: string[] = [];
+    if (argsString) {
+      try {
+        // Try to parse as JSON array
+        args = JSON.parse(argsString);
+      } catch {
+        // If not JSON, treat as a single argument
+        args = [argsString];
+      }
+    }
+
+      // Get project directory from the MCP server path
+      // If using wrapper, the actual server path is the second argument
+      const serverPath = args.length > 1 ? args[1] : args[0];
+      const projectPath = serverPath ? path.dirname(path.dirname(serverPath)) : process.cwd();
+      
+      // Load environment variables from project's .env file
+      const projectEnv = loadEnvFile(projectPath);
+      
+      console.log(`📂 Project path: ${projectPath}`);
+      console.log(`🔧 Loaded ${Object.keys(projectEnv).length} env vars from ${projectPath}/.env`);
+      console.log(`🔑 JWT_SECRET present: ${projectEnv.JWT_SECRET ? 'YES' : 'NO'}`);
+      console.log(`📝 Command: ${command} ${args.join(' ')}`);
+      
+      await client.connect({
+          type: 'stdio',
+        command,
+        args,
+        env: {
+          ...projectEnv,
+          NODE_ENV: 'development',
+        },
+        cwd: projectPath, // Set working directory to project root
+      });
+      
+        console.log('✅ MCP client connected successfully via STDIO');
+      }
+    }
+
+    return NextResponse.json({
+      success: true,
+      message: 'MCP client connected',
+      transport: client.getTransportType(),
+    });
+  } catch (error: any) {
+    console.error('Failed to connect MCP client:', error);
+    return NextResponse.json(
+      { error: error.message },
+      { status: 500 }
+    );
+  }
+}

package/src/studio/app/api/ping/route.ts

@@ -0,0 +1,13 @@
+import { NextResponse } from 'next/server';
+import { getMcpClient } from '@/lib/mcp-client';
+
+export async function GET() {
+  try {
+    const client = getMcpClient();
+    const result = await client.ping();
+    return NextResponse.json(result);
+  } catch (error: any) {
+    return NextResponse.json({ error: error.message }, { status: 500 });
+  }
+}
+

package/src/studio/app/api/prompts/[name]/route.ts

@@ -0,0 +1,21 @@
+import { NextRequest, NextResponse } from 'next/server';
+import { getMcpClient } from '@/lib/mcp-client';
+
+export async function POST(
+  request: NextRequest,
+  { params }: { params: { name: string } }
+) {
+  try {
+    const client = getMcpClient();
+    const args = await request.json();
+    console.log('🔍 Executing prompt:', params.name, 'with args:', args);
+    const result = await client.getPrompt(params.name, args);
+    console.log('✅ Prompt result:', result);
+    return NextResponse.json(result);
+  } catch (error: any) {
+    console.error('❌ Prompt execution error:', error);
+    console.error('Error stack:', error.stack);
+    return NextResponse.json({ error: error.message, stack: error.stack }, { status: 500 });
+  }
+}
+

package/src/studio/app/api/prompts/route.ts

@@ -0,0 +1,13 @@
+import { NextResponse } from 'next/server';
+import { getMcpClient } from '@/lib/mcp-client';
+
+export async function GET() {
+  try {
+    const client = getMcpClient();
+    const result = await client.listPrompts();
+    return NextResponse.json(result);
+  } catch (error: any) {
+    return NextResponse.json({ error: error.message }, { status: 500 });
+  }
+}
+

package/src/studio/app/api/resources/[...uri]/route.ts

@@ -0,0 +1,18 @@
+import { NextRequest, NextResponse } from 'next/server';
+import { getMcpClient } from '@/lib/mcp-client';
+
+export async function GET(
+  request: NextRequest,
+  { params }: { params: { uri: string[] } }
+) {
+  try {
+    const client = getMcpClient();
+    const uri = params.uri.join('/');
+    const decodedUri = decodeURIComponent(uri);
+    const result = await client.readResource(decodedUri);
+    return NextResponse.json(result);
+  } catch (error: any) {
+    return NextResponse.json({ error: error.message }, { status: 500 });
+  }
+}
+

package/src/studio/app/api/resources/route.ts

@@ -0,0 +1,13 @@
+import { NextResponse } from 'next/server';
+import { getMcpClient } from '@/lib/mcp-client';
+
+export async function GET() {
+  try {
+    const client = getMcpClient();
+    const result = await client.listResources();
+    return NextResponse.json(result);
+  } catch (error: any) {
+    return NextResponse.json({ error: error.message }, { status: 500 });
+  }
+}
+

package/src/studio/app/api/roots/route.ts

@@ -0,0 +1,13 @@
+import { NextResponse } from 'next/server';
+import { getMcpClient } from '@/lib/mcp-client';
+
+export async function GET() {
+  try {
+    const client = getMcpClient();
+    const result = await client.listRoots();
+    return NextResponse.json(result);
+  } catch (error: any) {
+    return NextResponse.json({ error: error.message }, { status: 500 });
+  }
+}
+

package/src/studio/app/api/sampling/route.ts

@@ -0,0 +1,14 @@
+import { NextRequest, NextResponse } from 'next/server';
+import { getMcpClient } from '@/lib/mcp-client';
+
+export async function POST(request: NextRequest) {
+  try {
+    const client = getMcpClient();
+    const params = await request.json();
+    const result = await client.createCompletion(params);
+    return NextResponse.json(result);
+  } catch (error: any) {
+    return NextResponse.json({ error: error.message }, { status: 500 });
+  }
+}
+

package/src/studio/app/api/tools/[name]/call/route.ts

@@ -0,0 +1,41 @@
+import { NextRequest, NextResponse } from 'next/server';
+import { getMcpClient } from '@/lib/mcp-client';
+
+export async function POST(
+  request: NextRequest,
+  { params }: { params: { name: string } }
+) {
+  try {
+    const client = getMcpClient();
+    const body = await request.json();
+    
+    // Extract args, JWT token, and API key from request body
+    const { args = {}, jwtToken, apiKey } = body;
+    
+    // Inject auth tokens into tool arguments if available
+    const toolArgs = { ...args };
+    
+    // Add _meta field for auth tokens
+    if (jwtToken || apiKey) {
+      toolArgs._meta = {
+        ...(toolArgs._meta || {}),
+      };
+      
+      if (jwtToken) {
+        toolArgs._meta._jwt = jwtToken;
+        toolArgs._meta.authorization = `Bearer ${jwtToken}`;
+      }
+      
+      if (apiKey) {
+        toolArgs._meta.apiKey = apiKey;
+        toolArgs._meta['x-api-key'] = apiKey;
+      }
+    }
+    
+    const result = await client.callTool(params.name, toolArgs);
+    return NextResponse.json(result);
+  } catch (error: any) {
+    return NextResponse.json({ error: error.message }, { status: 500 });
+  }
+}
+

package/src/studio/app/api/tools/route.ts

@@ -0,0 +1,23 @@
+import { NextResponse } from 'next/server';
+import { getMcpClient } from '@/lib/mcp-client';
+
+export async function GET() {
+  try {
+    const client = getMcpClient();
+    
+    // Check if connected, if not, throw error to trigger re-init
+    if (!client.isConnected()) {
+      console.error('❌ MCP client not connected in /api/tools');
+      return NextResponse.json({ 
+        error: 'MCP client not connected. Please refresh the page.' 
+      }, { status: 500 });
+    }
+    
+    const result = await client.listTools();
+    return NextResponse.json(result);
+  } catch (error: any) {
+    console.error('❌ Error in /api/tools:', error.message);
+    return NextResponse.json({ error: error.message }, { status: 500 });
+  }
+}
+

package/src/studio/app/api/widget-examples/route.ts

@@ -0,0 +1,44 @@
+import { NextResponse } from 'next/server';
+import { getMcpClient } from '@/lib/mcp-client';
+
+export async function GET() {
+  try {
+    const client = getMcpClient();
+    
+    if (!client.isConnected()) {
+      return NextResponse.json({ 
+        error: 'MCP client not connected',
+        widgets: [] 
+      }, { status: 500 });
+    }
+    
+    // Read widget examples from MCP server as a resource
+    try {
+      const result = await client.readResource('widget://examples');
+      
+      // Parse the widget examples data
+      const widgetData = JSON.parse(result.contents[0].text);
+      
+      return NextResponse.json({ 
+        widgets: widgetData.widgets || [],
+        count: widgetData.widgets?.length || 0,
+        loaded: widgetData.loaded || false
+      });
+    } catch (resourceError: any) {
+      // Widget examples resource not available
+      console.log('No widget examples resource available');
+      return NextResponse.json({ 
+        widgets: [],
+        count: 0,
+        loaded: false
+      });
+    }
+  } catch (error: any) {
+    console.error('❌ Error in /api/widget-examples:', error.message);
+    return NextResponse.json(
+      { error: 'Failed to fetch widget examples', widgets: [] },
+      { status: 500 }
+    );
+  }
+}
+

package/src/studio/app/auth/callback/page.tsx

@@ -0,0 +1,175 @@
+'use client';
+
+import { useEffect, useState, Suspense } from 'react';
+import { useRouter, useSearchParams } from 'next/navigation';
+import { useStudioStore } from '@/lib/store';
+import { Loader2, CheckCircle2, XCircle } from 'lucide-react';
+
+function OAuthCallback() {
+  const router = useRouter();
+  const searchParams = useSearchParams();
+  const { oauthState, setJwtToken } = useStudioStore();
+  const [status, setStatus] = useState<'processing' | 'success' | 'error'>('processing');
+  const [message, setMessage] = useState('Processing authorization...');
+
+  useEffect(() => {
+    const handleCallback = async () => {
+      try {
+        // Get authorization code and state from URL
+        const code = searchParams.get('code');
+        const state = searchParams.get('state');
+        const error = searchParams.get('error');
+        const errorDescription = searchParams.get('error_description');
+
+        // Check for errors
+        if (error) {
+          setStatus('error');
+          setMessage(`Authorization failed: ${errorDescription || error}`);
+          return;
+        }
+
+        // Validate state
+        const storedState = sessionStorage.getItem('oauth_state');
+        if (!state || state !== storedState) {
+          setStatus('error');
+          setMessage('Invalid state parameter. Possible CSRF attack.');
+          return;
+        }
+
+        // Validate code
+        if (!code) {
+          setStatus('error');
+          setMessage('Authorization code not received');
+          return;
+        }
+
+        // Get code verifier and client credentials
+        const codeVerifier = sessionStorage.getItem('oauth_code_verifier');
+        if (!codeVerifier) {
+          setStatus('error');
+          setMessage('Code verifier not found. Please try again.');
+          return;
+        }
+
+        if (!oauthState.clientRegistration?.client_id) {
+          setStatus('error');
+          setMessage('Client ID not found. Please register again.');
+          return;
+        }
+
+        if (!oauthState.authServerMetadata?.token_endpoint) {
+          setStatus('error');
+          setMessage('Token endpoint not found in server metadata');
+          return;
+        }
+
+        setMessage('Exchanging authorization code for tokens...');
+
+        // Exchange code for tokens
+        const tokenResponse = await fetch(oauthState.authServerMetadata.token_endpoint, {
+          method: 'POST',
+          headers: {
+            'Content-Type': 'application/x-www-form-urlencoded',
+          },
+          body: new URLSearchParams({
+            grant_type: 'authorization_code',
+            code,
+            redirect_uri: 'http://localhost:3000/auth/callback',
+            client_id: oauthState.clientRegistration.client_id,
+            ...(oauthState.clientRegistration.client_secret && {
+              client_secret: oauthState.clientRegistration.client_secret,
+            }),
+            code_verifier: codeVerifier,
+          }),
+        });
+
+        if (!tokenResponse.ok) {
+          const errorData = await tokenResponse.json().catch(() => ({}));
+          setStatus('error');
+          setMessage(`Token exchange failed: ${errorData.error_description || errorData.error || tokenResponse.statusText}`);
+          return;
+        }
+
+        const tokens = await tokenResponse.json();
+
+        // Store access token as JWT token
+        if (tokens.access_token) {
+          setJwtToken(tokens.access_token);
+          
+          // Clean up session storage
+          sessionStorage.removeItem('oauth_code_verifier');
+          sessionStorage.removeItem('oauth_state');
+
+          setStatus('success');
+          setMessage('Authorization successful! Redirecting...');
+
+          // Redirect back to auth page after 2 seconds
+          setTimeout(() => {
+            router.push('/auth');
+          }, 2000);
+        } else {
+          setStatus('error');
+          setMessage('Access token not received');
+        }
+      } catch (error: any) {
+        console.error('OAuth callback error:', error);
+        setStatus('error');
+        setMessage(`Error: ${error.message || 'Unknown error occurred'}`);
+      }
+    };
+
+    handleCallback();
+  }, [searchParams, oauthState, setJwtToken, router]);
+
+  return (
+    <div className="min-h-screen bg-background flex items-center justify-center p-8">
+      <div className="card p-8 max-w-md w-full text-center">
+        {status === 'processing' && (
+          <>
+            <Loader2 className="w-16 h-16 text-primary mx-auto mb-4 animate-spin" />
+            <h1 className="text-2xl font-bold text-foreground mb-2">Processing...</h1>
+            <p className="text-muted-foreground">{message}</p>
+          </>
+        )}
+
+        {status === 'success' && (
+          <>
+            <CheckCircle2 className="w-16 h-16 text-emerald-500 mx-auto mb-4" />
+            <h1 className="text-2xl font-bold text-foreground mb-2">Success!</h1>
+            <p className="text-muted-foreground">{message}</p>
+          </>
+        )}
+
+        {status === 'error' && (
+          <>
+            <XCircle className="w-16 h-16 text-red-500 mx-auto mb-4" />
+            <h1 className="text-2xl font-bold text-foreground mb-2">Authorization Failed</h1>
+            <p className="text-muted-foreground mb-4">{message}</p>
+            <button
+              onClick={() => router.push('/auth')}
+              className="btn btn-primary"
+            >
+              Back to Auth Page
+            </button>
+          </>
+        )}
+      </div>
+    </div>
+  );
+}
+
+export default function AuthCallbackPage() {
+  return (
+    <Suspense fallback={
+      <div className="fixed inset-0 flex items-center justify-center bg-background">
+        <div className="text-center">
+          <Loader2 className="w-8 h-8 text-primary animate-spin mx-auto mb-4" />
+          <p className="text-muted-foreground">Loading...</p>
+        </div>
+      </div>
+    }>
+      <OAuthCallback />
+    </Suspense>
+  );
+}
+