nitrostack 1.0.65 → 1.0.67

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "nitrostack",
-  "version": "1.0.65",
+  "version": "1.0.67",
   "description": "NitroStack - Build powerful MCP servers with TypeScript",
   "type": "module",
   "main": "dist/core/index.js",
@@ -27,6 +27,7 @@
   },
   "files": [
     "dist/",
+    "src/studio/",
     "templates/",
     "README.md",
     "LICENSE"
@@ -114,4 +115,4 @@
     "url": "https://github.com/abhishekpanditofficial/nitrostack/issues"
   },
   "homepage": "https://nitrostack.vercel.app"
-}
+}

package/src/studio/README.md

@@ -0,0 +1,140 @@
+# NitroStack Studio 🎨
+
+Modern, React-based visual inspector for MCP servers.
+
+## Features
+
+- ⚡ **Tools Browser** - Execute tools with auto-generated forms
+- 🎨 **Widget Rendering** - Preview UI components in dev and prod
+- 🤖 **AI Chat** - Chat with tool integration (OpenAI/Gemini)
+- 📦 **Resources** - Browse MCP resources and schemas
+- 💬 **Prompts** - Execute MCP prompts
+- 🔐 **Auth** - OAuth 2.1, JWT, and API key support
+- 💚 **Health** - System health monitoring
+- 📡 **Ping** - Latency testing
+- 🎲 **Sampling** - Text completion testing
+- 🌳 **Roots** - MCP server roots
+
+## Architecture
+
+```
+src/studio/
+├── app/              # Next.js App Router pages
+│   ├── page.tsx      # Tools (default)
+│   ├── chat/         # AI Chat
+│   ├── resources/    # Resources browser
+│   ├── prompts/      # Prompts executor
+│   ├── auth/         # Authentication
+│   ├── health/       # Health checks
+│   ├── ping/         # Ping testing
+│   ├── sampling/     # Sampling API
+│   └── roots/        # Roots browser
+├── components/       # Reusable React components
+│   ├── Sidebar.tsx   # Navigation sidebar
+│   ├── ToolCard.tsx  # Tool display card
+│   ├── WidgetRenderer.tsx  # Widget iframe loader
+│   └── EnlargeModal.tsx    # Full-screen widget viewer
+├── lib/             # Utilities and shared logic
+│   ├── api.ts       # API client
+│   ├── store.ts     # Zustand state management
+│   ├── types.ts     # TypeScript types
+│   ├── widget-loader.ts   # Dev/prod widget loading
+│   └── dummy-data.ts      # Preview data generator
+└── next.config.ts   # Next.js configuration
+
+## Development
+
+```bash
+# Install dependencies
+cd src/studio
+npm install
+
+# Run dev server
+npm run dev
+
+# Build static export
+npm run build
+```
+
+## Widget Rendering
+
+The Studio supports two modes:
+
+### Dev Mode (Port 3001)
+- Widgets load from Next.js dev server
+- Hot reload enabled
+- URL: `http://localhost:3001/widget-name`
+
+### Production Mode
+- Widgets compile to static HTML
+- Bundled with server
+- Served from `/widgets/*`
+
+## Static Export
+
+Studio builds to static HTML/CSS/JS for easy deployment:
+
+```bash
+npm run build
+# Output: ../../dist/studio/
+```
+
+Deploy to:
+- Vercel
+- Netlify
+- Cloudflare Pages
+- GitHub Pages
+- S3 + CloudFront
+- Any static hosting
+
+## State Management
+
+Uses Zustand for global state:
+- Connection status
+- Tools, resources, prompts
+- Chat messages
+- Auth tokens
+- Modal state
+
+## API Integration
+
+All API calls go through the unified `StudioAPI` client in `lib/api.ts`:
+- Tools: `api.getTools()`, `api.callTool()`
+- Resources: `api.getResources()`, `api.getResource()`
+- Chat: `api.chat()`
+- Auth: `api.discoverAuth()`, `api.registerClient()`
+- Health: `api.getHealth()`
+
+## Styling
+
+- **Tailwind CSS** - Utility-first styling
+- **Dark Theme** - Optimized for developer experience
+- **Custom CSS** - Global styles in `app/globals.css`
+- **Animations** - Fade-in, slide-in, pulse, skeleton loading
+
+## Integration with NitroStack
+
+When you run `nitrostack dev`, it starts:
+1. **MCP Server** (your project on stdio)
+2. **Widget Dev Server** (Next.js on port 3001)
+3. **Studio** (Next.js on port 3000)
+
+Studio proxies API calls to the MCP server and loads widgets from the widget dev server.
+
+## Browser Support
+
+- Modern browsers (Chrome, Firefox, Safari, Edge)
+- ES2022+ JavaScript
+- CSS Grid & Flexbox
+
+## Performance
+
+- **Static Export** - Pre-rendered HTML
+- **Code Splitting** - Automatic by Next.js
+- **Tree Shaking** - Unused code removed
+- **Lazy Loading** - Components load on demand
+
+## License
+
+MIT - Part of NitroStack
+

package/src/studio/app/api/auth/fetch-metadata/route.ts

@@ -0,0 +1,71 @@
+/**
+ * Fetch OAuth 2.1 Protected Resource Metadata
+ * 
+ * This endpoint fetches OAuth metadata from an MCP server's
+ * /.well-known/oauth-protected-resource endpoint (RFC 9728)
+ */
+
+import { NextRequest, NextResponse } from 'next/server';
+
+export async function POST(request: NextRequest) {
+  try {
+    const { url, type } = await request.json();
+
+    if (!url) {
+      return NextResponse.json(
+        { error: 'url is required' },
+        { status: 400 }
+      );
+    }
+
+    let metadataUrl: string;
+
+    if (type === 'resource') {
+      // Fetch Protected Resource Metadata (RFC 9728)
+      metadataUrl = new URL(url).toString();
+    } else if (type === 'auth-server') {
+      // Fetch Authorization Server Metadata (RFC 8414)
+      metadataUrl = new URL(url).toString();
+    } else {
+      return NextResponse.json(
+        { error: 'type must be "resource" or "auth-server"' },
+        { status: 400 }
+      );
+    }
+
+    // Fetch the metadata
+    const response = await fetch(metadataUrl, {
+      method: 'GET',
+      headers: {
+        'Accept': 'application/json',
+      },
+      signal: AbortSignal.timeout(5000), // 5 second timeout
+    });
+
+    if (!response.ok) {
+      return NextResponse.json(
+        { error: `Failed to fetch metadata: ${response.statusText}` },
+        { status: response.status }
+      );
+    }
+
+    const metadata = await response.json();
+
+    // Basic validation
+    if (type === 'resource' && (!metadata.resource || !metadata.authorization_servers)) {
+      return NextResponse.json(
+        { error: 'Invalid OAuth resource metadata format' },
+        { status: 400 }
+      );
+    }
+
+    return NextResponse.json(metadata);
+  } catch (error: any) {
+    console.error('Error fetching OAuth metadata:', error);
+    return NextResponse.json(
+      { error: error.message || 'Failed to fetch OAuth metadata' },
+      { status: 500 }
+    );
+  }
+}
+

package/src/studio/app/api/auth/register-client/route.ts

@@ -0,0 +1,67 @@
+/**
+ * Dynamic Client Registration (RFC 7591)
+ * 
+ * This endpoint handles OAuth 2.1 Dynamic Client Registration
+ * by proxying requests to the authorization server's registration endpoint.
+ */
+
+import { NextRequest, NextResponse } from 'next/server';
+
+export async function POST(request: NextRequest) {
+  try {
+    const { endpoint, metadata } = await request.json();
+
+    if (!endpoint) {
+      return NextResponse.json(
+        { error: 'endpoint is required' },
+        { status: 400 }
+      );
+    }
+
+    if (!metadata) {
+      return NextResponse.json(
+        { error: 'metadata is required' },
+        { status: 400 }
+      );
+    }
+
+    // Register the client with the authorization server
+    const response = await fetch(endpoint, {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+        'Accept': 'application/json',
+      },
+      body: JSON.stringify(metadata),
+      signal: AbortSignal.timeout(10000), // 10 second timeout
+    });
+
+    if (!response.ok) {
+      const errorText = await response.text();
+      console.error('Client registration failed:', response.status, errorText);
+      return NextResponse.json(
+        { error: `Registration failed: ${response.statusText}`, details: errorText },
+        { status: response.status }
+      );
+    }
+
+    const registrationResponse = await response.json();
+
+    // Validate the response contains required fields
+    if (!registrationResponse.client_id) {
+      return NextResponse.json(
+        { error: 'Invalid registration response: missing client_id' },
+        { status: 400 }
+      );
+    }
+
+    return NextResponse.json(registrationResponse);
+  } catch (error: any) {
+    console.error('Error during client registration:', error);
+    return NextResponse.json(
+      { error: error.message || 'Failed to register client' },
+      { status: 500 }
+    );
+  }
+}
+

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

@@ -0,0 +1,250 @@
+import { NextRequest, NextResponse } from 'next/server';
+import { getMcpClient } from '@/lib/mcp-client';
+import { LLMService, type ChatMessage, type LLMProvider } from '@/lib/llm-service';
+
+const llmService = new LLMService();
+
+export async function POST(request: NextRequest) {
+  try {
+    const { provider, messages, apiKey, jwtToken, mcpApiKey } = await request.json() as {
+      provider: LLMProvider;
+      messages: ChatMessage[];
+      apiKey: string; // LLM API key
+      jwtToken?: string; // MCP server JWT
+      mcpApiKey?: string; // MCP server API key
+    };
+
+    console.log('Received chat request:', { 
+      provider, 
+      messagesCount: messages?.length,
+      messages: JSON.stringify(messages),
+      hasApiKey: !!apiKey,
+      hasJwtToken: !!jwtToken,
+      hasMcpApiKey: !!mcpApiKey,
+      jwtTokenPreview: jwtToken ? jwtToken.substring(0, 20) + '...' : null
+    });
+
+    if (!provider || !messages || !apiKey) {
+      return NextResponse.json(
+        { error: 'Missing required fields' },
+        { status: 400 }
+      );
+    }
+    
+    if (messages.length === 0) {
+      return NextResponse.json(
+        { error: 'Messages array is empty' },
+        { status: 400 }
+      );
+    }
+
+    // Get available tools from MCP server
+    const client = getMcpClient();
+    const toolsList = await client.listTools();
+    const mcpTools = toolsList.tools?.map((tool: any) => ({
+      name: tool.name,
+      description: tool.description || '',
+      inputSchema: tool.inputSchema || {},
+    })) || [];
+    
+    // Add synthetic tools for prompts and resources
+    const promptsList = await client.listPrompts().catch(() => ({ prompts: [] }));
+    const resourcesList = await client.listResources().catch(() => ({ resources: [] }));
+    
+    const syntheticTools = [];
+    
+    // Add a tool to list available prompts
+    if (promptsList.prompts && promptsList.prompts.length > 0) {
+      syntheticTools.push({
+        name: 'list_prompts',
+        description: 'List all available MCP prompts with their names, descriptions, and required arguments. Call this when user asks what prompts are available. After calling this, present the complete list of prompts to the user.',
+        inputSchema: {
+          type: 'object',
+          properties: {},
+        },
+      });
+      
+      // Add a tool to execute prompts
+      syntheticTools.push({
+        name: 'execute_prompt',
+        description: 'Execute an MCP prompt with given arguments. Returns the prompt result. After calling this, display the result to the user.',
+        inputSchema: {
+          type: 'object',
+          properties: {
+            name: {
+              type: 'string',
+              description: 'The name of the prompt to execute',
+            },
+            arguments: {
+              type: 'object',
+              description: 'Arguments to pass to the prompt (key-value pairs)',
+            },
+          },
+          required: ['name'],
+        },
+      });
+    }
+    
+    // Add a tool to list available resources
+    if (resourcesList.resources && resourcesList.resources.length > 0) {
+      syntheticTools.push({
+        name: 'list_resources',
+        description: 'List all available MCP resources with their URIs, names, descriptions, and mime types. Call this when user asks to see what resources are available. After calling this, present the complete list of resources to the user.',
+        inputSchema: {
+          type: 'object',
+          properties: {},
+        },
+      });
+      
+      // Add a tool to read resources
+      syntheticTools.push({
+        name: 'read_resource',
+        description: 'Read the contents of an MCP resource by its URI. Returns the full resource content. After calling this, display the resource content to the user.',
+        inputSchema: {
+          type: 'object',
+          properties: {
+            uri: {
+              type: 'string',
+              description: 'The URI of the resource to read (e.g., "widget://examples", "config://settings")',
+            },
+          },
+          required: ['uri'],
+        },
+      });
+    }
+    
+    const tools = [...mcpTools, ...syntheticTools];
+
+    // Call LLM
+    const response = await llmService.chat(provider, messages, tools, apiKey);
+
+    // If LLM wants to call tools, execute them
+    if (response.toolCalls && response.toolCalls.length > 0) {
+      const toolResults: ChatMessage[] = [];
+
+      for (const toolCall of response.toolCalls) {
+        try {
+          let result: any;
+          let toolContent = '';
+          
+          // Handle synthetic tools
+          if (toolCall.name === 'list_prompts') {
+            const prompts = await client.listPrompts();
+            const formattedPrompts = prompts.prompts?.map((p: any) => ({
+              name: p.name,
+              description: p.description,
+              arguments: p.arguments,
+            })) || [];
+            toolContent = JSON.stringify(formattedPrompts, null, 2);
+            console.log('📝 list_prompts result:', toolContent);
+          } else if (toolCall.name === 'execute_prompt') {
+            const promptResult = await client.getPrompt(
+              toolCall.arguments.name,
+              toolCall.arguments.arguments || {}
+            );
+            toolContent = JSON.stringify(promptResult.messages || promptResult, null, 2);
+            console.log('▶️ execute_prompt result:', toolContent.substring(0, 200) + '...');
+          } else if (toolCall.name === 'list_resources') {
+            const resources = await client.listResources();
+            const formattedResources = resources.resources?.map((r: any) => ({
+              uri: r.uri,
+              name: r.name,
+              description: r.description,
+              mimeType: r.mimeType,
+            })) || [];
+            toolContent = JSON.stringify(formattedResources, null, 2);
+            console.log('📋 list_resources result:', toolContent);
+          } else if (toolCall.name === 'read_resource') {
+            const resource = await client.readResource(toolCall.arguments.uri);
+            // Extract the actual content from the resource
+            let resourceContent = resource;
+            if (resource.contents && Array.isArray(resource.contents)) {
+              // If it's an array of contents, extract text from each
+              resourceContent = resource.contents.map((c: any) => {
+                if (c.text) return c.text;
+                if (c.blob) return `[Binary data: ${c.mimeType || 'unknown type'}]`;
+                return JSON.stringify(c);
+              }).join('\n\n');
+            }
+            toolContent = typeof resourceContent === 'string' ? resourceContent : JSON.stringify(resourceContent, null, 2);
+            console.log('📖 read_resource result:', toolContent.substring(0, 200) + '...');
+          } else {
+            // Regular MCP tool execution
+            // Inject auth tokens into tool arguments if available
+            const toolArgs = { ...toolCall.arguments };
+            if (jwtToken || mcpApiKey) {
+              toolArgs._meta = {
+                ...(toolArgs._meta || {}),
+              };
+              
+              if (jwtToken) {
+                toolArgs._meta._jwt = jwtToken;
+                toolArgs._meta.authorization = `Bearer ${jwtToken}`;
+              }
+              
+              if (mcpApiKey) {
+                toolArgs._meta.apiKey = mcpApiKey;
+                toolArgs._meta['x-api-key'] = mcpApiKey;
+              }
+              
+              console.log(`🔐 Executing tool "${toolCall.name}" with auth:`, {
+                hasJwt: !!jwtToken,
+                hasMcpApiKey: !!mcpApiKey,
+                metaKeys: Object.keys(toolArgs._meta)
+              });
+            } else {
+              console.log(`⚠️ Executing tool "${toolCall.name}" WITHOUT auth tokens`);
+            }
+
+            // Execute tool via MCP client
+            result = await client.executeTool(toolCall.name, toolArgs);
+
+            // Extract content from MCP result
+            if (result.content && Array.isArray(result.content)) {
+              toolContent = result.content
+                .map((c: any) => c.text || JSON.stringify(c))
+                .join('\n');
+            } else {
+              toolContent = JSON.stringify(result);
+            }
+          }
+
+          // Store tool result with both ID and NAME (Gemini needs the name!)
+          toolResults.push({
+            role: 'tool',
+            content: toolContent,
+            toolCallId: toolCall.id,
+            toolName: toolCall.name, // Add tool name for Gemini function responses
+          });
+        } catch (error: any) {
+          console.error(`❌ Error executing tool "${toolCall.name}":`, error);
+          const errorMessage = `Error executing ${toolCall.name}: ${error.message}`;
+          toolResults.push({
+            role: 'tool',
+            content: JSON.stringify({ error: error.message, message: errorMessage }),
+            toolCallId: toolCall.id,
+            toolName: toolCall.name, // Add tool name for Gemini function responses
+          });
+        }
+      }
+
+      // Return response with tool results
+      return NextResponse.json({
+        message: response.message,
+        toolCalls: response.toolCalls,
+        toolResults,
+        finishReason: response.finishReason,
+      });
+    }
+
+    // No tool calls, just return the message
+    return NextResponse.json({
+      message: response.message,
+      finishReason: response.finishReason,
+    });
+  } catch (error: any) {
+    console.error('Chat error:', error);
+    return NextResponse.json({ error: error.message }, { status: 500 });
+  }
+}
+

package/src/studio/app/api/health/checks/route.ts

@@ -0,0 +1,42 @@
+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',
+        checks: [] 
+      }, { status: 500 });
+    }
+    
+    // Read health checks from MCP server as a resource
+    try {
+      const result = await client.readResource('health://checks');
+      
+      // Parse the health checks data
+      const healthData = JSON.parse(result.contents[0].text);
+      
+      return NextResponse.json({ 
+        checks: healthData.checks || [],
+        count: healthData.checks?.length || 0
+      });
+    } catch (resourceError: any) {
+      // Health checks resource not available or no checks registered
+      console.log('No health checks resource available');
+      return NextResponse.json({ 
+        checks: [],
+        count: 0
+      });
+    }
+  } catch (error: any) {
+    console.error('❌ Error in /api/health/checks:', error.message);
+    return NextResponse.json(
+      { error: 'Failed to fetch health checks', checks: [] },
+      { status: 500 }
+    );
+  }
+}
+

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

@@ -0,0 +1,13 @@
+import { NextResponse } from 'next/server';
+import { getMcpClient } from '@/lib/mcp-client';
+
+export async function GET() {
+  const client = getMcpClient();
+  
+  return NextResponse.json({
+    status: 'ok',
+    connected: client.isConnected(),
+    timestamp: new Date().toISOString(),
+  });
+}
+