nitrostack 1.0.0 → 1.0.2

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,160 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+import { useRouter, useSearchParams } from 'next/navigation';
+import { useStudioStore } from '@/lib/store';
+import { Loader2, CheckCircle2, XCircle } from 'lucide-react';
+
+export default 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>
+  );
+}
+