nitrostack 1.0.1 → 1.0.3

package/CHANGELOG.md

@@ -7,6 +7,29 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+## [1.0.3] - 2025-10-27
+
+### Fixed
+- **Critical**: Fixed Studio TypeScript path resolution in Next.js webpack
+  - Changed `moduleResolution` from `"bundler"` to `"node"` in `src/studio/tsconfig.json`
+  - Added `"baseUrl": "."` to enable proper `@/*` path mapping
+  - Resolves "Module not found: Can't resolve '@/lib/store'" error when running `nitrostack dev`
+
+## [1.0.2] - 2025-10-27
+
+### Fixed
+- **Critical**: Fixed CLI `--version` command to read version dynamically from `package.json`
+  - Was showing hardcoded `1.0.0` instead of actual package version
+  - Now correctly displays the installed version
+- **Critical**: Fixed `src/studio` not being included in npm package
+  - Studio files are now properly included (47 files)
+  - Users can now run `nitrostack dev` without Studio installation errors
+  - Changed `.npmignore` to exclude specific `/src/` subdirectories while keeping `/src/studio/`
+
+### Changed
+- Updated `.npmignore` to specifically exclude `/src/auth/`, `/src/cli/`, `/src/core/`, etc. instead of blanket `/src/` exclusion
+- CLI now uses `createRequire` to load `package.json` for dynamic version reading
+
 ## [1.0.1] - 2025-10-27
 
 ### Fixed

package/dist/cli/index.js

@@ -1,15 +1,18 @@
 #!/usr/bin/env node
 import { Command } from 'commander';
+import { createRequire } from 'module';
 import { initCommand } from './commands/init.js';
 import { devCommand } from './commands/dev.js';
 import { buildCommand } from './commands/build.js';
 import { startCommand } from './commands/start.js';
 import { generate } from './commands/generate.js';
+const require = createRequire(import.meta.url);
+const packageJson = require('../../package.json');
 const program = new Command();
 program
     .name('nitrostack')
     .description('NitroStack - Build MCP servers with ease')
-    .version('1.0.0');
+    .version(packageJson.version);
 program
     .command('init')
     .description('Initialize a new NitroStack project')

package/dist/cli/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/cli/index.ts"],"names":[],"mappings":";AACA,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,OAAO,EAAE,WAAW,EAAE,MAAM,oBAAoB,CAAC;AACjD,OAAO,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAC;AAC/C,OAAO,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AACnD,OAAO,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AACnD,OAAO,EAAE,QAAQ,EAAE,MAAM,wBAAwB,CAAC;AAElD,MAAM,OAAO,GAAG,IAAI,OAAO,EAAE,CAAC;AAE9B,OAAO;KACJ,IAAI,CAAC,YAAY,CAAC;KAClB,WAAW,CAAC,0CAA0C,CAAC;KACvD,OAAO,CAAC,OAAO,CAAC,CAAC;AAEpB,OAAO;KACJ,OAAO,CAAC,MAAM,CAAC;KACf,WAAW,CAAC,qCAAqC,CAAC;KAClD,QAAQ,CAAC,gBAAgB,EAAE,qBAAqB,CAAC;KACjD,MAAM,CAAC,uBAAuB,EAAE,+CAA+C,EAAE,YAAY,CAAC;KAC9F,MAAM,CAAC,WAAW,CAAC,CAAC;AAEvB,OAAO;KACJ,OAAO,CAAC,KAAK,CAAC;KACd,WAAW,CAAC,0CAA0C,CAAC;KACvD,MAAM,CAAC,eAAe,EAAE,iBAAiB,EAAE,MAAM,CAAC;KAClD,MAAM,CAAC,WAAW,EAAE,mCAAmC,CAAC;KACxD,MAAM,CAAC,UAAU,CAAC,CAAC;AAEtB,OAAO;KACJ,OAAO,CAAC,OAAO,CAAC;KAChB,WAAW,CAAC,kCAAkC,CAAC;KAC/C,MAAM,CAAC,iBAAiB,EAAE,kBAAkB,EAAE,MAAM,CAAC;KACrD,MAAM,CAAC,YAAY,CAAC,CAAC;AAExB,OAAO;KACJ,OAAO,CAAC,OAAO,CAAC;KAChB,WAAW,CAAC,6BAA6B,CAAC;KAC1C,MAAM,CAAC,eAAe,EAAE,iBAAiB,EAAE,MAAM,CAAC;KAClD,MAAM,CAAC,YAAY,CAAC,CAAC;AAExB,OAAO;KACJ,OAAO,CAAC,UAAU,CAAC;KACnB,KAAK,CAAC,GAAG,CAAC;KACV,WAAW,CAAC,oCAAoC,CAAC;KACjD,QAAQ,CAAC,QAAQ,EAAE,6HAA6H,CAAC;KACjJ,QAAQ,CAAC,QAAQ,EAAE,8CAA8C,CAAC;KAClE,MAAM,CAAC,mBAAmB,EAAE,8CAA8C,CAAC;KAC3E,MAAM,CAAC,iBAAiB,EAAE,oCAAoC,CAAC;KAC/D,MAAM,CAAC,SAAS,EAAE,0BAA0B,CAAC;KAC7C,MAAM,CAAC,gBAAgB,EAAE,6CAA6C,CAAC;KACvE,MAAM,CAAC,QAAQ,CAAC,CAAC;AAEpB,OAAO,CAAC,KAAK,EAAE,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/cli/index.ts"],"names":[],"mappings":";AACA,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,OAAO,EAAE,aAAa,EAAE,MAAM,QAAQ,CAAC;AACvC,OAAO,EAAE,WAAW,EAAE,MAAM,oBAAoB,CAAC;AACjD,OAAO,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAC;AAC/C,OAAO,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AACnD,OAAO,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AACnD,OAAO,EAAE,QAAQ,EAAE,MAAM,wBAAwB,CAAC;AAElD,MAAM,OAAO,GAAG,aAAa,CAAC,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;AAC/C,MAAM,WAAW,GAAG,OAAO,CAAC,oBAAoB,CAAC,CAAC;AAElD,MAAM,OAAO,GAAG,IAAI,OAAO,EAAE,CAAC;AAE9B,OAAO;KACJ,IAAI,CAAC,YAAY,CAAC;KAClB,WAAW,CAAC,0CAA0C,CAAC;KACvD,OAAO,CAAC,WAAW,CAAC,OAAO,CAAC,CAAC;AAEhC,OAAO;KACJ,OAAO,CAAC,MAAM,CAAC;KACf,WAAW,CAAC,qCAAqC,CAAC;KAClD,QAAQ,CAAC,gBAAgB,EAAE,qBAAqB,CAAC;KACjD,MAAM,CAAC,uBAAuB,EAAE,+CAA+C,EAAE,YAAY,CAAC;KAC9F,MAAM,CAAC,WAAW,CAAC,CAAC;AAEvB,OAAO;KACJ,OAAO,CAAC,KAAK,CAAC;KACd,WAAW,CAAC,0CAA0C,CAAC;KACvD,MAAM,CAAC,eAAe,EAAE,iBAAiB,EAAE,MAAM,CAAC;KAClD,MAAM,CAAC,WAAW,EAAE,mCAAmC,CAAC;KACxD,MAAM,CAAC,UAAU,CAAC,CAAC;AAEtB,OAAO;KACJ,OAAO,CAAC,OAAO,CAAC;KAChB,WAAW,CAAC,kCAAkC,CAAC;KAC/C,MAAM,CAAC,iBAAiB,EAAE,kBAAkB,EAAE,MAAM,CAAC;KACrD,MAAM,CAAC,YAAY,CAAC,CAAC;AAExB,OAAO;KACJ,OAAO,CAAC,OAAO,CAAC;KAChB,WAAW,CAAC,6BAA6B,CAAC;KAC1C,MAAM,CAAC,eAAe,EAAE,iBAAiB,EAAE,MAAM,CAAC;KAClD,MAAM,CAAC,YAAY,CAAC,CAAC;AAExB,OAAO;KACJ,OAAO,CAAC,UAAU,CAAC;KACnB,KAAK,CAAC,GAAG,CAAC;KACV,WAAW,CAAC,oCAAoC,CAAC;KACjD,QAAQ,CAAC,QAAQ,EAAE,6HAA6H,CAAC;KACjJ,QAAQ,CAAC,QAAQ,EAAE,8CAA8C,CAAC;KAClE,MAAM,CAAC,mBAAmB,EAAE,8CAA8C,CAAC;KAC3E,MAAM,CAAC,iBAAiB,EAAE,oCAAoC,CAAC;KAC/D,MAAM,CAAC,SAAS,EAAE,0BAA0B,CAAC;KAC7C,MAAM,CAAC,gBAAgB,EAAE,6CAA6C,CAAC;KACvE,MAAM,CAAC,QAAQ,CAAC,CAAC;AAEpB,OAAO,CAAC,KAAK,EAAE,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "nitrostack",
-  "version": "1.0.1",
+  "version": "1.0.3",
   "description": "NitroStack - Build powerful MCP servers with TypeScript",
   "type": "module",
   "main": "dist/core/index.js",

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('/.well-known/oauth-protected-resource', url).toString();
+    } else if (type === 'auth-server') {
+      // Fetch Authorization Server Metadata (RFC 8414)
+      metadataUrl = new URL('/.well-known/oauth-authorization-server', 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,123 @@
+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 
+    });
+
+    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 tools = toolsList.tools?.map((tool: any) => ({
+      name: tool.name,
+      description: tool.description || '',
+      inputSchema: tool.inputSchema || {},
+    })) || [];
+
+    // 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 {
+          // 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;
+            }
+          }
+
+          // Execute tool via MCP client
+          const result = await client.executeTool(toolCall.name, toolArgs);
+
+          // Extract content from MCP result
+          let toolContent = '';
+          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) {
+          toolResults.push({
+            role: 'tool',
+            content: JSON.stringify({ error: error.message }),
+            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(),
+  });
+}
+

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

@@ -0,0 +1,85 @@
+// 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() {
+  try {
+    const client = getMcpClient();
+
+    // Get MCP server config from environment
+    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];
+      }
+    }
+
+    if (!client.isConnected()) {
+      // 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({
+        command,
+        args,
+        env: {
+          ...projectEnv,
+          NODE_ENV: 'development',
+        },
+        cwd: projectPath, // Set working directory to project root
+      });
+      
+      console.log('✅ MCP client connected successfully');
+    }
+
+    return NextResponse.json({
+      success: true,
+      message: 'MCP client connected',
+    });
+  } 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 });
+  }
+}
+