nitrostack 1.0.1 → 1.0.2

package/src/studio/lib/mcp-client.ts

@@ -0,0 +1,168 @@
+// MCP Client for Studio
+// Communicates with MCP server via stdio
+
+import { spawn, ChildProcess } from 'child_process';
+import { Client } from '@modelcontextprotocol/sdk/client/index.js';
+import { StdioClientTransport } from '@modelcontextprotocol/sdk/client/stdio.js';
+
+export interface McpClientConfig {
+  command: string;
+  args: string[];
+  env?: Record<string, string>;
+  cwd?: string;
+}
+
+export class McpClient {
+  private client: Client | null = null;
+  private transport: StdioClientTransport | null = null;
+
+  async connect(config: McpClientConfig): Promise<void> {
+    if (this.client && this.transport) {
+      console.log('⚠️  Already connected, reusing existing connection');
+      return;
+    }
+
+    // Clean up any existing connections
+    if (this.client || this.transport) {
+      console.log('🧹 Cleaning up stale connection...');
+      try {
+        if (this.client) await this.client.close();
+        if (this.transport) await this.transport.close();
+      } catch (e) {
+        // Ignore cleanup errors
+      }
+      this.client = null;
+      this.transport = null;
+    }
+
+    console.log('🚀 Connecting to MCP server:', config.command, config.args);
+    console.log('📝 Environment vars:', Object.keys(config.env || {}).join(', '));
+
+    // Create transport (it will spawn the process internally)
+    this.transport = new StdioClientTransport({
+      command: config.command,
+      args: config.args,
+      env: { ...process.env, ...config.env },
+      cwd: config.cwd, // Set working directory for the child process
+    });
+
+    // Create client
+    this.client = new Client(
+      {
+        name: 'nitrostack-studio',
+        version: '3.1.0',
+      },
+      {
+        capabilities: {
+          sampling: {},
+          roots: { listChanged: true },
+        },
+      }
+    );
+
+    // Handle connection errors
+    this.client.onerror = (error) => {
+      console.error('❌ MCP Client error:', error);
+      this.client = null;
+      this.transport = null;
+    };
+
+    this.client.onclose = () => {
+      console.log('🔌 MCP Client connection closed');
+      this.client = null;
+      this.transport = null;
+    };
+
+    // Connect
+    try {
+      await this.client.connect(this.transport);
+      console.log('✅ MCP Client connected and ready');
+    } catch (error) {
+      console.error('❌ Failed to connect MCP client:', error);
+      this.client = null;
+      this.transport = null;
+      throw error;
+    }
+  }
+
+  async disconnect(): Promise<void> {
+    console.log('🛑 Disconnecting MCP client...');
+    
+    if (this.client) {
+      await this.client.close();
+      this.client = null;
+    }
+
+    if (this.transport) {
+      await this.transport.close();
+      this.transport = null;
+    }
+  }
+
+  isConnected(): boolean {
+    return this.client !== null;
+  }
+
+  async listTools() {
+    if (!this.client) throw new Error('Not connected');
+    return await this.client.listTools();
+  }
+
+  async callTool(name: string, args: any) {
+    if (!this.client) throw new Error('Not connected');
+    return await this.client.callTool({ name, arguments: args });
+  }
+
+  async listResources() {
+    if (!this.client) throw new Error('Not connected');
+    return await this.client.listResources();
+  }
+
+  async readResource(uri: string) {
+    if (!this.client) throw new Error('Not connected');
+    return await this.client.readResource({ uri });
+  }
+
+  async listPrompts() {
+    if (!this.client) throw new Error('Not connected');
+    return await this.client.listPrompts();
+  }
+
+  async getPrompt(name: string, args: any) {
+    if (!this.client) throw new Error('Not connected');
+    return await this.client.getPrompt({ name, arguments: args });
+  }
+
+  async ping() {
+    if (!this.client) throw new Error('Not connected');
+    return await this.client.ping();
+  }
+
+  async listRoots() {
+    if (!this.client) throw new Error('Not connected');
+    return await this.client.listRoots();
+  }
+
+  async executeTool(name: string, args: any) {
+    return await this.callTool(name, args);
+  }
+
+  async createCompletion(params: any) {
+    if (!this.client) throw new Error('Not connected');
+    return await this.client.createCompletion(params);
+  }
+}
+
+// Global singleton that persists across HMR
+declare global {
+  var __mcpClient: McpClient | undefined;
+}
+
+export function getMcpClient(): McpClient {
+  if (!global.__mcpClient) {
+    console.log('🆕 Creating new MCP client instance');
+    global.__mcpClient = new McpClient();
+  }
+  return global.__mcpClient;
+}
+

package/src/studio/lib/store.ts

@@ -0,0 +1,192 @@
+import { create } from 'zustand';
+import type {
+  Tool,
+  Resource,
+  Prompt,
+  ChatMessage,
+  ConnectionStatus,
+  TabType,
+  PingResult,
+  HealthCheck,
+  OAuthState,
+} from './types';
+
+interface StudioState {
+  // Connection
+  connection: ConnectionStatus;
+  setConnection: (status: ConnectionStatus) => void;
+
+  // Navigation
+  currentTab: TabType;
+  setCurrentTab: (tab: TabType) => void;
+
+  // Data
+  tools: Tool[];
+  setTools: (tools: Tool[]) => void;
+
+  resources: Resource[];
+  setResources: (resources: Resource[]) => void;
+
+  prompts: Prompt[];
+  setPrompts: (prompts: Prompt[]) => void;
+
+  // Chat
+  chatMessages: ChatMessage[];
+  addChatMessage: (message: ChatMessage) => void;
+  clearChat: () => void;
+  currentProvider: 'openai' | 'gemini';
+  setCurrentProvider: (provider: 'openai' | 'gemini') => void;
+  currentImage: { data: string; type: string; name: string } | null;
+  setCurrentImage: (image: { data: string; type: string; name: string } | null) => void;
+
+  // Auth
+  jwtToken: string | null;
+  setJwtToken: (token: string | null) => void;
+
+  apiKey: string | null;
+  setApiKey: (key: string | null) => void;
+
+  oauthState: OAuthState;
+  setOAuthState: (state: Partial<OAuthState>) => void;
+
+  // Ping
+  pingHistory: PingResult[];
+  addPingResult: (result: PingResult) => void;
+
+  // Health
+  healthChecks: HealthCheck[];
+  setHealthChecks: (checks: HealthCheck[]) => void;
+
+  // Modal
+  enlargeModal: {
+    open: boolean;
+    type: 'tool' | 'resource' | null;
+    item: any;
+  };
+  openEnlargeModal: (type: 'tool' | 'resource', item: any) => void;
+  closeEnlargeModal: () => void;
+
+  // Loading states
+  loading: {
+    tools: boolean;
+    resources: boolean;
+    prompts: boolean;
+    chat: boolean;
+  };
+  setLoading: (key: keyof StudioState['loading'], value: boolean) => void;
+}
+
+export const useStudioStore = create<StudioState>((set) => ({
+  // Connection
+  connection: { connected: false, status: 'connecting' },
+  setConnection: (connection) => set({ connection }),
+
+  // Navigation
+  currentTab: 'tools',
+  setCurrentTab: (currentTab) => set({ currentTab }),
+
+  // Data
+  tools: [],
+  setTools: (tools) => set({ tools }),
+
+  resources: [],
+  setResources: (resources) => set({ resources }),
+
+  prompts: [],
+  setPrompts: (prompts) => set({ prompts }),
+
+  // Chat
+  chatMessages: [],
+  addChatMessage: (message) =>
+    set((state) => ({ chatMessages: [...state.chatMessages, message] })),
+  clearChat: () => set({ chatMessages: [] }),
+  currentProvider: 'gemini',
+  setCurrentProvider: (currentProvider) => set({ currentProvider }),
+  currentImage: null,
+  setCurrentImage: (currentImage) => set({ currentImage }),
+
+  // Auth
+  jwtToken: typeof window !== 'undefined' ? localStorage.getItem('mcp_jwt_token') : null,
+  setJwtToken: (jwtToken) => {
+    if (typeof window !== 'undefined') {
+      if (jwtToken) {
+        localStorage.setItem('mcp_jwt_token', jwtToken);
+      } else {
+        localStorage.removeItem('mcp_jwt_token');
+      }
+    }
+    set({ jwtToken });
+  },
+
+  apiKey: typeof window !== 'undefined' ? localStorage.getItem('mcp_api_key') : null,
+  setApiKey: (apiKey) => {
+    if (typeof window !== 'undefined') {
+      if (apiKey) {
+        localStorage.setItem('mcp_api_key', apiKey);
+      } else {
+        localStorage.removeItem('mcp_api_key');
+      }
+    }
+    set({ apiKey });
+  },
+
+  oauthState: typeof window !== 'undefined' 
+    ? JSON.parse(localStorage.getItem('mcp_oauth_state') || 'null') || {
+        authServerUrl: null,
+        resourceMetadata: null,
+        authServerMetadata: null,
+        clientRegistration: null,
+        selectedScopes: [],
+        currentToken: null,
+      }
+    : {
+        authServerUrl: null,
+        resourceMetadata: null,
+        authServerMetadata: null,
+        clientRegistration: null,
+        selectedScopes: [],
+        currentToken: null,
+      },
+  setOAuthState: (newState) => {
+    const updatedState = (state: any) => {
+      const newOAuthState = { ...state.oauthState, ...newState };
+      
+      // Persist to localStorage
+      if (typeof window !== 'undefined') {
+        localStorage.setItem('mcp_oauth_state', JSON.stringify(newOAuthState));
+      }
+      
+      return { oauthState: newOAuthState };
+    };
+    set(updatedState);
+  },
+
+  // Ping
+  pingHistory: [],
+  addPingResult: (result) =>
+    set((state) => ({
+      pingHistory: [result, ...state.pingHistory].slice(0, 10),
+    })),
+
+  // Health
+  healthChecks: [],
+  setHealthChecks: (healthChecks) => set({ healthChecks }),
+
+  // Modal
+  enlargeModal: { open: false, type: null, item: null },
+  openEnlargeModal: (type, item) =>
+    set({ enlargeModal: { open: true, type, item } }),
+  closeEnlargeModal: () =>
+    set({ enlargeModal: { open: false, type: null, item: null } }),
+
+  // Loading
+  loading: {
+    tools: false,
+    resources: false,
+    prompts: false,
+    chat: false,
+  },
+  setLoading: (key, value) =>
+    set((state) => ({ loading: { ...state.loading, [key]: value } })),
+}));
+

package/src/studio/lib/theme-provider.tsx

@@ -0,0 +1,50 @@
+'use client';
+
+import { createContext, useContext, useEffect, useState } from 'react';
+
+type Theme = 'dark' | 'light';
+
+type ThemeContextType = {
+  theme: Theme;
+  toggleTheme: () => void;
+};
+
+const ThemeContext = createContext<ThemeContextType | undefined>(undefined);
+
+export function ThemeProvider({ children }: { children: React.ReactNode }) {
+  const [theme, setTheme] = useState<Theme>('dark');
+
+  useEffect(() => {
+    // Load theme from localStorage
+    const stored = localStorage.getItem('theme') as Theme;
+    if (stored) {
+      setTheme(stored);
+      document.documentElement.classList.toggle('dark', stored === 'dark');
+    } else {
+      // Default to dark theme
+      document.documentElement.classList.add('dark');
+    }
+  }, []);
+
+  const toggleTheme = () => {
+    const newTheme = theme === 'dark' ? 'light' : 'dark';
+    setTheme(newTheme);
+    localStorage.setItem('theme', newTheme);
+    document.documentElement.classList.toggle('dark', newTheme === 'dark');
+  };
+
+  return (
+    <ThemeContext.Provider value={{ theme, toggleTheme }}>
+      {children}
+    </ThemeContext.Provider>
+  );
+}
+
+export function useTheme() {
+  const context = useContext(ThemeContext);
+  if (!context) {
+    throw new Error('useTheme must be used within ThemeProvider');
+  }
+  return context;
+}
+

package/src/studio/lib/types.ts

@@ -0,0 +1,107 @@
+// NitroStack Studio Type Definitions
+
+export interface Tool {
+  name: string;
+  description?: string;
+  inputSchema?: {
+    type: string;
+    properties?: Record<string, any>;
+    required?: string[];
+  };
+  examples?: {
+    request?: any;
+    response?: any;
+  };
+  widget?: {
+    route: string;
+  };
+  outputTemplate?: string;
+  _meta?: {
+    'openai/outputTemplate'?: string;
+    'ui/template'?: string;
+    [key: string]: any;
+  };
+}
+
+export interface Resource {
+  name: string;
+  uri: string;
+  description?: string;
+  mimeType?: string;
+  examples?: {
+    response?: any;
+  };
+  _meta?: Record<string, any>;
+}
+
+export interface Prompt {
+  name: string;
+  description?: string;
+  arguments?: Array<{
+    name: string;
+    description?: string;
+    required?: boolean;
+  }>;
+}
+
+export interface Root {
+  uri: string;
+  name?: string;
+}
+
+export interface ChatMessage {
+  role: 'user' | 'assistant' | 'tool' | 'system';
+  content: string;
+  toolCalls?: ToolCall[];
+  toolCallId?: string;
+  image?: {
+    data: string;
+    type: string;
+    name: string;
+  };
+}
+
+export interface ToolCall {
+  id: string;
+  name: string;
+  arguments: any;
+  result?: any;
+}
+
+export interface PingResult {
+  time: Date;
+  latency: number;
+}
+
+export interface ConnectionStatus {
+  connected: boolean;
+  status: 'connected' | 'connecting' | 'disconnected';
+}
+
+export interface HealthCheck {
+  name: string;
+  status: 'up' | 'down' | 'degraded';
+  lastCheck: Date;
+  message?: string;
+}
+
+export interface OAuthState {
+  authServerUrl: string | null;
+  resourceMetadata: any;
+  authServerMetadata: any;
+  clientRegistration: any;
+  selectedScopes: string[];
+  currentToken: any;
+}
+
+export type TabType =
+  | 'tools'
+  | 'chat'
+  | 'resources'
+  | 'prompts'
+  | 'auth'
+  | 'health'
+  | 'ping'
+  | 'sampling'
+  | 'roots';
+

package/src/studio/lib/widget-loader.ts

@@ -0,0 +1,90 @@
+// Widget Loader - Handles dev/prod widget loading
+
+export function getWidgetUrl(uri: string): string {
+  // Check if we're in dev mode (widget dev server on 3001)
+  const isDevMode =
+    typeof window !== 'undefined' &&
+    (window.location.hostname === 'localhost' || window.location.hostname === '127.0.0.1');
+
+  if (isDevMode && uri.startsWith('/widgets/')) {
+    // Dev mode: load from Next.js dev server
+    const widgetPath = uri.replace('/widgets/', '');
+    return `http://localhost:3001/${widgetPath}`;
+  }
+
+  // Production mode: load from same origin
+  return uri;
+}
+
+export function isDevWidget(uri: string): boolean {
+  return uri.startsWith('/widgets/') || uri.includes('component://');
+}
+
+export async function loadWidget(uri: string): Promise<{ html: string; isDevMode: boolean }> {
+  const isDevMode =
+    typeof window !== 'undefined' &&
+    (window.location.hostname === 'localhost' || window.location.hostname === '127.0.0.1');
+
+  if (isDevMode && uri.startsWith('/widgets/')) {
+    // Dev mode: return URL for iframe
+    return { html: getWidgetUrl(uri), isDevMode: true };
+  }
+
+  // Production mode: fetch widget HTML
+  try {
+    const response = await fetch(`/api/resources/${encodeURIComponent(uri)}`);
+    const data = await response.json();
+
+    if (data.contents && data.contents.length > 0) {
+      return { html: data.contents[0].text || '', isDevMode: false };
+    }
+
+    return { html: '', isDevMode: false };
+  } catch (error) {
+    console.error('Failed to load widget:', error);
+    return { html: '', isDevMode: false };
+  }
+}
+
+export function createWidgetHTML(html: string, data: any): string {
+  const htmlParts = [
+    '<!DOCTYPE html>',
+    '<html>',
+    '<head>',
+    '<meta charset="UTF-8">',
+    '<meta name="viewport" content="width=device-width, initial-scale=1.0">',
+    '<style>',
+    'html, body { margin: 0; padding: 0; background: transparent; }',
+    'body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }',
+    '</style>',
+    '</head>',
+    '<body>',
+    '<script>',
+    'window.openai = ' + JSON.stringify({ toolOutput: data }) + ';',
+    '</script>',
+    html,
+    '</body>',
+    '</html>',
+  ];
+
+  return htmlParts.join('\n');
+}
+
+export function postMessageToWidget(iframe: HTMLIFrameElement, data: any, delay: number = 500) {
+  iframe.onload = () => {
+    setTimeout(() => {
+      try {
+        iframe.contentWindow?.postMessage(
+          {
+            type: 'toolOutput',
+            data,
+          },
+          '*'
+        );
+      } catch (e) {
+        console.error('Failed to post message to widget:', e);
+      }
+    }, delay);
+  };
+}
+

package/src/studio/middleware.ts

@@ -0,0 +1,27 @@
+// Studio Middleware - Widget Proxying
+import { NextResponse } from 'next/server';
+import type { NextRequest } from 'next/server';
+
+export function middleware(request: NextRequest) {
+  const { pathname } = request.nextUrl;
+
+  // In development, proxy widget requests to the widget dev server
+  if (process.env.NODE_ENV === 'development' && process.env.WIDGETS_DEV_MODE === 'true') {
+    const widgetsDevPort = process.env.WIDGETS_DEV_PORT || '3001';
+
+    // Proxy /widgets/* to widget dev server
+    if (pathname.startsWith('/widgets/')) {
+      const widgetPath = pathname.replace('/widgets/', '');
+      const targetUrl = `http://localhost:${widgetsDevPort}/${widgetPath}`;
+      
+      return NextResponse.rewrite(new URL(targetUrl));
+    }
+  }
+
+  return NextResponse.next();
+}
+
+export const config = {
+  matcher: ['/widgets/:path*'],
+};
+

package/src/studio/next.config.js

@@ -0,0 +1,16 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  // No static export in dev mode - we need API routes and middleware
+  images: {
+    unoptimized: true,
+  },
+  typescript: {
+    ignoreBuildErrors: true,
+  },
+  eslint: {
+    ignoreDuringBuilds: true,
+  },
+};
+
+export default nextConfig;
+