nitrostack 1.0.1 → 1.0.2

package/src/studio/components/WidgetRenderer.tsx

@@ -0,0 +1,99 @@
+'use client';
+
+import { useEffect, useRef } from 'react';
+import { getWidgetUrl, createWidgetHTML, postMessageToWidget } from '@/lib/widget-loader';
+
+interface WidgetRendererProps {
+  uri: string;
+  data: any;
+  className?: string;
+}
+
+export function WidgetRenderer({ uri, data, className = '' }: WidgetRendererProps) {
+  const iframeRef = useRef<HTMLIFrameElement>(null);
+  
+  // Check if we're in dev mode (localhost)
+  const isDevMode =
+    typeof window !== 'undefined' &&
+    (window.location.hostname === 'localhost' || window.location.hostname === '127.0.0.1');
+
+  useEffect(() => {
+    if (!iframeRef.current) return;
+
+    if (isDevMode) {
+      // Dev mode: load from widget dev server (port 3001)
+      // Widget URIs are like "/calculator-result" or "calculator-result"
+      // Remove leading slash if present
+      const widgetPath = uri.startsWith('/') ? uri.substring(1) : uri;
+      const widgetUrl = `http://localhost:3001/${widgetPath}`;
+      
+      console.log('Loading widget in dev mode:', { uri, widgetPath, widgetUrl, data });
+      
+      // Set up onload handler BEFORE setting src
+      iframeRef.current.onload = () => {
+        console.log('Widget iframe loaded, posting data...');
+        // Post message after a short delay to ensure widget is ready
+        setTimeout(() => {
+          try {
+            iframeRef.current?.contentWindow?.postMessage(
+              {
+                type: 'toolOutput',
+                data,
+              },
+              '*'
+            );
+            console.log('✅ Data posted to widget:', data);
+          } catch (e) {
+            console.error('❌ Failed to post message to widget:', e);
+          }
+        }, 300);
+      };
+      
+      // Set src AFTER onload handler is set
+      iframeRef.current.src = widgetUrl;
+    } else {
+      // Production mode: fetch and render
+      const loadProductionWidget = async () => {
+        try {
+          const response = await fetch(`/api/resources/${encodeURIComponent(uri)}`);
+          const result = await response.json();
+
+          if (result.contents && result.contents.length > 0) {
+            const html = result.contents[0].text || '';
+            const completeHtml = createWidgetHTML(html, data);
+
+            // Use Blob URL
+            const blob = new Blob([completeHtml], { type: 'text/html' });
+            const blobUrl = URL.createObjectURL(blob);
+
+            if (iframeRef.current) {
+              iframeRef.current.src = blobUrl;
+              iframeRef.current.onload = () => {
+                URL.revokeObjectURL(blobUrl);
+              };
+            }
+          }
+        } catch (error) {
+          console.error('Failed to load widget:', error);
+        }
+      };
+
+      loadProductionWidget();
+    }
+  }, [uri, data, isDevMode]);
+
+  return (
+    <iframe
+      ref={iframeRef}
+      className={className}
+      sandbox="allow-scripts allow-same-origin"
+      style={{
+        width: '100%',
+        height: '100%',
+        border: 'none',
+        background: 'transparent',
+      }}
+    />
+  );
+}
+

package/src/studio/lib/api.ts

@@ -0,0 +1,207 @@
+// NitroStack Studio API Client
+
+const API_BASE = typeof window !== 'undefined' ? window.location.origin : 'http://localhost:3000';
+
+export class StudioAPI {
+  private baseUrl: string;
+  private initialized: boolean = false;
+
+  constructor(baseUrl: string = API_BASE) {
+    this.baseUrl = baseUrl;
+  }
+
+  // Initialize MCP connection (call once on app start)
+  async initialize() {
+    if (this.initialized) return;
+    try {
+      await fetch(`${this.baseUrl}/api/init`, { method: 'POST' });
+      this.initialized = true;
+    } catch (error) {
+      console.error('Failed to initialize MCP connection:', error);
+    }
+  }
+
+  // Connection
+  async checkConnection() {
+    const response = await fetch(`${this.baseUrl}/api/health`);
+    return response.json();
+  }
+
+  // Tools
+  async listTools() {
+    const response = await fetch(`${this.baseUrl}/api/tools`);
+    return response.json();
+  }
+  
+  async getTools() {
+    return this.listTools();
+  }
+
+  async callTool(name: string, args: any, jwtToken?: string, apiKey?: string) {
+    const response = await fetch(`${this.baseUrl}/api/tools/${name}/call`, {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ args, jwtToken, apiKey }),
+    });
+    return response.json();
+  }
+
+  // Resources
+  async getResources() {
+    const response = await fetch(`${this.baseUrl}/api/resources`);
+    return response.json();
+  }
+
+  async getResource(uri: string) {
+    const response = await fetch(`${this.baseUrl}/api/resources/${encodeURIComponent(uri)}`);
+    return response.json();
+  }
+
+  // Prompts
+  async getPrompts() {
+    const response = await fetch(`${this.baseUrl}/api/prompts`);
+    return response.json();
+  }
+
+  async executePrompt(name: string, args: any) {
+    const response = await fetch(`${this.baseUrl}/api/prompts/${name}`, {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify(args),
+    });
+    return response.json();
+  }
+
+  // Ping
+  async ping() {
+    const response = await fetch(`${this.baseUrl}/api/ping`);
+    return response.json();
+  }
+
+  // Sampling
+  async sample(params: { prompt: string; maxTokens: number; model?: string }) {
+    const response = await fetch(`${this.baseUrl}/api/sampling`, {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify(params),
+    });
+    return response.json();
+  }
+
+  // Roots
+  async getRoots() {
+    const response = await fetch(`${this.baseUrl}/api/roots`);
+    return response.json();
+  }
+
+  // Chat
+  async chat(params: {
+    provider: string;
+    messages: any[];
+    apiKey: string; // LLM API key (OpenAI/Gemini)
+    jwtToken?: string; // MCP server JWT token
+    mcpApiKey?: string; // MCP server API key
+  }) {
+    const response = await fetch(`${this.baseUrl}/api/chat`, {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify(params),
+    });
+    return response.json();
+  }
+
+  // Auth (OAuth 2.1)
+  async discoverAuth(url: string, type: 'resource' | 'auth-server') {
+    const response = await fetch(`${this.baseUrl}/api/auth/fetch-metadata`, {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ url, type }),
+    });
+    return response.json();
+  }
+
+  async registerClient(endpoint: string, metadata: any) {
+    const response = await fetch(`${this.baseUrl}/api/auth/register-client`, {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ endpoint, metadata }),
+    });
+    return response.json();
+  }
+
+  async startOAuthFlow(params: {
+    authorizationEndpoint: string;
+    clientId: string;
+    redirectUri: string;
+    scope: string;
+    resource: string;
+  }) {
+    const response = await fetch(`${this.baseUrl}/api/auth/start-flow`, {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify(params),
+    });
+    return response.json();
+  }
+
+  async exchangeToken(params: {
+    code: string;
+    pkce: any;
+    tokenEndpoint: string;
+    clientId: string;
+    clientSecret?: string;
+    redirectUri: string;
+    resource: string;
+  }) {
+    const response = await fetch(`${this.baseUrl}/api/auth/exchange-token`, {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify(params),
+    });
+    return response.json();
+  }
+
+  async refreshToken(params: {
+    refreshToken: string;
+    tokenEndpoint: string;
+    clientId: string;
+    clientSecret?: string;
+    resource: string;
+  }) {
+    const response = await fetch(`${this.baseUrl}/api/auth/refresh-token`, {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify(params),
+    });
+    return response.json();
+  }
+
+  async revokeToken(params: {
+    token: string;
+    revocationEndpoint: string;
+    clientId: string;
+    clientSecret?: string;
+  }) {
+    const response = await fetch(`${this.baseUrl}/api/auth/revoke-token`, {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify(params),
+    });
+    return response.json();
+  }
+
+  // Health
+  async getHealth() {
+    const response = await fetch(`${this.baseUrl}/api/health/checks`);
+    return response.json();
+  }
+
+  // Widget Examples
+  async getWidgetExamples() {
+    const response = await fetch(`${this.baseUrl}/api/widget-examples`);
+    return response.json();
+  }
+}
+
+export const api = new StudioAPI();
+

package/src/studio/lib/llm-service.ts

@@ -0,0 +1,361 @@
+// LLM Service for Studio
+// Supports OpenAI and Gemini
+
+export type LLMProvider = 'openai' | 'gemini';
+
+export interface ChatMessage {
+  role: 'user' | 'assistant' | 'tool' | 'system';
+  content: string;
+  toolCalls?: ToolCall[];
+  toolCallId?: string; // For tool responses - the ID of the call being responded to
+  toolName?: string;   // For tool responses - the name of the tool (required by Gemini)
+}
+
+export interface ToolCall {
+  id: string;
+  name: string;
+  arguments: any;
+}
+
+export interface ChatResponse {
+  message: ChatMessage;
+  toolCalls?: ToolCall[];
+  finishReason?: string;
+}
+
+export class LLMService {
+  async chat(
+    provider: LLMProvider,
+    messages: ChatMessage[],
+    tools: any[],
+    apiKey: string
+  ): Promise<ChatResponse> {
+    if (provider === 'openai') {
+      return this.chatOpenAI(messages, tools, apiKey);
+    } else if (provider === 'gemini') {
+      return this.chatGemini(messages, tools, apiKey);
+    }
+    throw new Error(`Unsupported provider: ${provider}`);
+  }
+
+  private async chatOpenAI(
+    messages: ChatMessage[],
+    tools: any[],
+    apiKey: string
+  ): Promise<ChatResponse> {
+    const formattedMessages = messages.map((msg) => {
+      if (msg.role === 'tool') {
+        return {
+          role: 'tool' as const,
+          content: msg.content,
+          tool_call_id: msg.toolCallId,
+        };
+      }
+      
+      // Handle assistant messages with tool calls
+      if (msg.role === 'assistant' && msg.toolCalls && msg.toolCalls.length > 0) {
+        return {
+          role: 'assistant' as const,
+          content: msg.content || null,
+          tool_calls: msg.toolCalls.map(tc => ({
+            id: tc.id,
+            type: 'function' as const,
+            function: {
+              name: tc.name,
+              arguments: typeof tc.arguments === 'string' ? tc.arguments : JSON.stringify(tc.arguments),
+            },
+          })),
+        };
+      }
+      
+      return {
+        role: msg.role,
+        content: msg.content,
+      };
+    });
+    
+    console.log('Formatted messages for OpenAI:', JSON.stringify(formattedMessages, null, 2));
+
+    const requestBody: any = {
+      model: 'gpt-4-turbo-preview',
+      messages: formattedMessages,
+    };
+
+    if (tools.length > 0) {
+      requestBody.tools = tools.map((tool) => {
+        // Clean the schema for OpenAI - remove unsupported properties
+        const cleanSchema = { ...tool.inputSchema };
+        
+        // Remove properties that OpenAI doesn't support
+        delete cleanSchema.$schema;
+        delete cleanSchema.additionalProperties;
+        
+        // Ensure required properties for OpenAI
+        if (!cleanSchema.type) {
+          cleanSchema.type = 'object';
+        }
+        if (!cleanSchema.properties) {
+          cleanSchema.properties = {};
+        }
+        
+        return {
+          type: 'function',
+          function: {
+            name: tool.name,
+            description: tool.description || 'No description provided',
+            parameters: cleanSchema,
+          },
+        };
+      });
+      
+      console.log('Sending tools to OpenAI:', JSON.stringify(requestBody.tools, null, 2));
+    }
+
+    const response = await fetch('https://api.openai.com/v1/chat/completions', {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+        Authorization: `Bearer ${apiKey}`,
+      },
+      body: JSON.stringify(requestBody),
+    });
+
+    if (!response.ok) {
+      const errorData = await response.json().catch(() => ({}));
+      console.error('OpenAI API error details:', errorData);
+      throw new Error(`OpenAI API error: ${response.statusText} - ${JSON.stringify(errorData)}`);
+    }
+
+    const data = await response.json();
+    const choice = data.choices[0];
+
+    const result: ChatResponse = {
+      message: {
+        role: 'assistant',
+        content: choice.message.content || '',
+      },
+      finishReason: choice.finish_reason,
+    };
+
+    if (choice.message.tool_calls) {
+      result.toolCalls = choice.message.tool_calls.map((tc: any) => ({
+        id: tc.id,
+        name: tc.function?.name || '',
+        arguments: JSON.parse(tc.function?.arguments || '{}'),
+      }));
+      result.message.toolCalls = result.toolCalls;
+    }
+
+    return result;
+  }
+
+  private async chatGemini(
+    messages: ChatMessage[],
+    tools: any[],
+    apiKey: string
+  ): Promise<ChatResponse> {
+    // Convert messages to Gemini format
+    const contents: any[] = [];
+    let systemInstruction = '';
+    
+    // Group consecutive tool messages together for Gemini
+    let i = 0;
+    while (i < messages.length) {
+      const msg = messages[i];
+      
+      if (msg.role === 'system') {
+        systemInstruction = msg.content;
+        i++;
+        continue;
+      }
+      
+      if (msg.role === 'tool') {
+        // Collect all consecutive tool messages and group them into ONE function response
+        const functionParts: any[] = [];
+        
+        while (i < messages.length && messages[i].role === 'tool') {
+          const toolMsg = messages[i];
+          functionParts.push({
+            functionResponse: {
+              name: toolMsg.toolName || 'unknown', // Use toolName for Gemini!
+              response: {
+                content: toolMsg.content,
+              },
+            },
+          });
+          i++;
+        }
+        
+        // Add all function responses as ONE entry with multiple parts
+        contents.push({
+          role: 'function',
+          parts: functionParts,
+        });
+      } else if (msg.role === 'assistant' && msg.toolCalls && msg.toolCalls.length > 0) {
+        // Assistant message with tool calls
+        const parts: any[] = [];
+        
+        if (msg.content) {
+          parts.push({ text: msg.content });
+        }
+        
+        for (const tc of msg.toolCalls) {
+          parts.push({
+            functionCall: {
+              name: tc.name,
+              args: tc.arguments,
+            },
+          });
+        }
+        
+        contents.push({
+          role: 'model',
+          parts,
+        });
+        i++;
+      } else {
+        // Regular user or assistant message
+        contents.push({
+          role: msg.role === 'assistant' ? 'model' : 'user',
+          parts: [{ text: msg.content }],
+        });
+        i++;
+      }
+    }
+    
+    console.log('Formatted contents for Gemini:', JSON.stringify(contents, null, 2));
+    
+    // Prepare request body
+    const requestBody: any = {
+      contents,
+    };
+    
+    // Add system instruction if present
+    if (systemInstruction) {
+      requestBody.systemInstruction = {
+        parts: [{ text: systemInstruction }],
+      };
+    }
+    
+    // Add tools if present
+    if (tools.length > 0) {
+      requestBody.tools = [{
+        functionDeclarations: tools.map((tool) => {
+          const cleanSchema = { ...tool.inputSchema };
+          
+          // Remove unsupported properties
+          delete cleanSchema.$schema;
+          delete cleanSchema.additionalProperties;
+          
+          // Convert to Gemini's expected format
+          const parameters: any = {
+            type: cleanSchema.type || 'OBJECT',
+            properties: {},
+            required: cleanSchema.required || [],
+          };
+          
+          // Convert properties
+          if (cleanSchema.properties) {
+            for (const [key, value] of Object.entries(cleanSchema.properties)) {
+              const prop: any = value;
+              parameters.properties[key] = {
+                type: this.convertTypeToGemini(prop.type),
+                description: prop.description || '',
+              };
+              
+              // Handle enums
+              if (prop.enum) {
+                parameters.properties[key].enum = prop.enum;
+              }
+            }
+          }
+          
+          return {
+            name: tool.name,
+            description: tool.description || 'No description provided',
+            parameters,
+          };
+        }),
+      }];
+      
+      console.log('Sending tools to Gemini:', JSON.stringify(requestBody.tools, null, 2));
+    }
+    
+    // Use Gemini 2.0 Flash Experimental (latest model with function calling)
+    // The v1beta API uses 'gemini-2.0-flash-exp' for the newest features
+    const model = 'gemini-2.0-flash-exp';
+    const response = await fetch(
+      `https://generativelanguage.googleapis.com/v1beta/models/${model}:generateContent?key=${apiKey}`,
+      {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify(requestBody),
+      }
+    );
+
+    if (!response.ok) {
+      const errorData = await response.json().catch(() => ({}));
+      console.error('Gemini API error details:', errorData);
+      throw new Error(`Gemini API error: ${response.statusText} - ${JSON.stringify(errorData)}`);
+    }
+
+    const data = await response.json();
+    console.log('Gemini response:', JSON.stringify(data, null, 2));
+    
+    const candidate = data.candidates?.[0];
+    if (!candidate) {
+      throw new Error('No response from Gemini');
+    }
+    
+    const parts = candidate.content?.parts || [];
+    
+    // Extract text content
+    let content = '';
+    const toolCalls: ToolCall[] = [];
+    
+    for (const part of parts) {
+      if (part.text) {
+        content += part.text;
+      }
+      
+      if (part.functionCall) {
+        toolCalls.push({
+          id: `call_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`,
+          name: part.functionCall.name,
+          arguments: part.functionCall.args || {},
+        });
+      }
+    }
+    
+    const result: ChatResponse = {
+      message: {
+        role: 'assistant',
+        content: content || '',
+      },
+      finishReason: candidate.finishReason,
+    };
+    
+    if (toolCalls.length > 0) {
+      result.toolCalls = toolCalls;
+      result.message.toolCalls = toolCalls;
+    }
+
+    return result;
+  }
+  
+  private convertTypeToGemini(type?: string): string {
+    if (!type) return 'STRING';
+    
+    const typeMap: Record<string, string> = {
+      'string': 'STRING',
+      'number': 'NUMBER',
+      'integer': 'INTEGER',
+      'boolean': 'BOOLEAN',
+      'array': 'ARRAY',
+      'object': 'OBJECT',
+    };
+    
+    return typeMap[type.toLowerCase()] || 'STRING';
+  }
+}
+