@gemini-designer/mcp-server 0.1.0

package/src/generation/remote-client.ts

@@ -0,0 +1,103 @@
+/**
+ * Remote Gateway Client
+ *
+ * Handles communication with the VPS gateway for remote mode.
+ * Transmits only sanitized context to protect user secrets.
+ */
+
+import { Config } from '../config/index.js';
+import type { GeminiUserContent } from './gemini-client.js';
+
+interface GatewayRequest {
+    systemPrompt: string;
+    userPrompt?: string;
+    userParts?: Array<{ text: string } | { inlineData: { mimeType: string; data: string } }>;
+    toolName?: string;
+}
+
+interface GatewayResponse {
+    content: string;
+    tokensUsed: number;
+    inputTokens?: number;
+    model?: string;
+    costMicrodollars?: number;
+    error?: string;
+}
+
+/**
+ * Generate content via remote gateway
+ */
+export async function generateWithRemote(
+    config: Config,
+    systemPrompt: string,
+    userPrompt: GeminiUserContent,
+    toolName?: string
+): Promise<string> {
+    if (!config.remoteEndpoint) {
+        throw new Error('Remote endpoint not configured');
+    }
+
+    if (!config.remoteApiKey) {
+        throw new Error('Remote API key not configured');
+    }
+
+    const request: GatewayRequest = {
+        systemPrompt,
+        toolName,
+    };
+
+    if (typeof userPrompt === 'string') {
+        request.userPrompt = userPrompt;
+    } else {
+        request.userParts = userPrompt as any;
+    }
+
+    const response = await fetch(`${config.remoteEndpoint}/generate`, {
+        method: 'POST',
+        headers: {
+            'Content-Type': 'application/json',
+            Authorization: `Bearer ${config.remoteApiKey}`,
+        },
+        body: JSON.stringify(request),
+    });
+
+    if (!response.ok) {
+        const errorText = await response.text();
+        throw new Error(`Gateway error (${response.status}): ${errorText}`);
+    }
+
+    const data = (await response.json()) as GatewayResponse;
+
+    if (data.error) {
+        throw new Error(`Gateway error: ${data.error}`);
+    }
+
+    if (config.debug) {
+        console.error('[remote] Tokens used:', data.tokensUsed);
+        if (typeof data.inputTokens === 'number') console.error('[remote] Input tokens:', data.inputTokens);
+        if (data.model) console.error('[remote] Model:', data.model);
+    }
+
+    return data.content;
+}
+
+/**
+ * Check remaining quota with the gateway
+ */
+export async function checkQuota(config: Config): Promise<{ remaining: number; limit: number }> {
+    if (!config.remoteEndpoint || !config.remoteApiKey) {
+        throw new Error('Remote configuration missing');
+    }
+
+    const response = await fetch(`${config.remoteEndpoint}/quota`, {
+        headers: {
+            Authorization: `Bearer ${config.remoteApiKey}`,
+        },
+    });
+
+    if (!response.ok) {
+        throw new Error(`Failed to check quota: ${response.status}`);
+    }
+
+    return (await response.json()) as { remaining: number; limit: number };
+}

package/src/index.ts

@@ -0,0 +1,36 @@
+#!/usr/bin/env node
+/**
+ * Gemini Designer MCP - Entry Point
+ *
+ * Open-source MCP server for design-to-code generation.
+ * Supports both local (BYO API key) and remote gateway modes.
+ */
+
+import { createServer } from './server.js';
+import { loadConfig } from './config/index.js';
+
+async function main() {
+    const config = loadConfig();
+
+    console.error(`[gemini-designer-mcp] Starting in ${config.mode} mode...`);
+
+    const server = await createServer(config);
+
+    // Handle graceful shutdown
+    process.on('SIGINT', async () => {
+        console.error('[gemini-designer-mcp] Shutting down...');
+        await server.close();
+        process.exit(0);
+    });
+
+    process.on('SIGTERM', async () => {
+        console.error('[gemini-designer-mcp] Shutting down...');
+        await server.close();
+        process.exit(0);
+    });
+}
+
+main().catch((error) => {
+    console.error('[gemini-designer-mcp] Fatal error:', error);
+    process.exit(1);
+});

package/src/output/file-writer.ts

@@ -0,0 +1,181 @@
+/**
+ * File Writer
+ *
+ * Writes generated code to files with safety checks.
+ * Supports backup creation and git-aware operations.
+ */
+
+import * as fs from 'node:fs';
+import * as path from 'node:path';
+import { execSync } from 'node:child_process';
+import { formatCode } from './formatter.js';
+
+export interface WriteOptions {
+    backup?: boolean;
+    format?: boolean;
+    createDirs?: boolean;
+    gitAdd?: boolean;
+}
+
+export interface WriteResult {
+    success: boolean;
+    filePath: string;
+    backupPath?: string;
+    error?: string;
+}
+
+/**
+ * Write content to file with safety features
+ */
+export async function writeFile(
+    filePath: string,
+    content: string,
+    options: WriteOptions = {}
+): Promise<WriteResult> {
+    const { backup = true, format = true, createDirs = true, gitAdd = false } = options;
+
+    const absPath = path.isAbsolute(filePath) ? filePath : path.resolve(process.cwd(), filePath);
+
+    try {
+        // Create parent directories if needed
+        if (createDirs) {
+            const dir = path.dirname(absPath);
+            if (!fs.existsSync(dir)) {
+                fs.mkdirSync(dir, { recursive: true });
+            }
+        }
+
+        // Create backup if file exists
+        let backupPath: string | undefined;
+        if (backup && fs.existsSync(absPath)) {
+            backupPath = `${absPath}.bak`;
+            fs.copyFileSync(absPath, backupPath);
+        }
+
+        // Format content if requested
+        let finalContent = content;
+        if (format) {
+            try {
+                finalContent = await formatCode(content, { filePath: absPath });
+            } catch {
+                // Keep original if formatting fails
+            }
+        }
+
+        // Write the file
+        fs.writeFileSync(absPath, finalContent, 'utf-8');
+
+        // Git add if requested and in a git repo
+        if (gitAdd && isGitRepo(absPath)) {
+            try {
+                execSync(`git add "${absPath}"`, { cwd: path.dirname(absPath), stdio: 'ignore' });
+            } catch {
+                // Ignore git errors
+            }
+        }
+
+        return {
+            success: true,
+            filePath: absPath,
+            backupPath,
+        };
+    } catch (error) {
+        return {
+            success: false,
+            filePath: absPath,
+            error: error instanceof Error ? error.message : 'Unknown error',
+        };
+    }
+}
+
+/**
+ * Restore file from backup
+ */
+export function restoreFromBackup(filePath: string): boolean {
+    const absPath = path.isAbsolute(filePath) ? filePath : path.resolve(process.cwd(), filePath);
+    const backupPath = `${absPath}.bak`;
+
+    if (!fs.existsSync(backupPath)) {
+        return false;
+    }
+
+    try {
+        fs.copyFileSync(backupPath, absPath);
+        fs.unlinkSync(backupPath);
+        return true;
+    } catch {
+        return false;
+    }
+}
+
+/**
+ * Check if path is in a git repository
+ */
+function isGitRepo(filePath: string): boolean {
+    try {
+        execSync('git rev-parse --git-dir', {
+            cwd: path.dirname(filePath),
+            stdio: 'ignore',
+        });
+        return true;
+    } catch {
+        return false;
+    }
+}
+
+/**
+ * Get git status for a file
+ */
+export function getGitStatus(filePath: string): 'modified' | 'untracked' | 'clean' | 'not-git' {
+    const absPath = path.isAbsolute(filePath) ? filePath : path.resolve(process.cwd(), filePath);
+
+    if (!isGitRepo(absPath)) {
+        return 'not-git';
+    }
+
+    try {
+        const status = execSync(`git status --porcelain "${absPath}"`, {
+            cwd: path.dirname(absPath),
+            encoding: 'utf-8',
+        }).trim();
+
+        if (!status) return 'clean';
+        if (status.startsWith('??')) return 'untracked';
+        return 'modified';
+    } catch {
+        return 'not-git';
+    }
+}
+
+/**
+ * List all backup files in a directory
+ */
+export function listBackups(directory: string): string[] {
+    try {
+        const entries = fs.readdirSync(directory, { withFileTypes: true });
+        return entries
+            .filter((e) => e.isFile() && e.name.endsWith('.bak'))
+            .map((e) => path.join(directory, e.name));
+    } catch {
+        return [];
+    }
+}
+
+/**
+ * Clean up old backup files
+ */
+export function cleanBackups(directory: string): number {
+    const backups = listBackups(directory);
+    let cleaned = 0;
+
+    for (const backup of backups) {
+        try {
+            fs.unlinkSync(backup);
+            cleaned++;
+        } catch {
+            // Ignore errors
+        }
+    }
+
+    return cleaned;
+}

package/src/output/formatter.ts

@@ -0,0 +1,186 @@
+/**
+ * Output Formatter
+ *
+ * Uses Prettier to format generated code for consistency.
+ * Auto-detects language from content or file extension.
+ */
+
+import * as prettier from 'prettier';
+
+export type SupportedLanguage = 'typescript' | 'javascript' | 'css' | 'html' | 'json' | 'markdown';
+
+interface FormatOptions {
+    language?: SupportedLanguage;
+    filePath?: string;
+    printWidth?: number;
+    tabWidth?: number;
+    useTabs?: boolean;
+    semi?: boolean;
+    singleQuote?: boolean;
+}
+
+/**
+ * Format code using Prettier
+ */
+export async function formatCode(code: string, options: FormatOptions = {}): Promise<string> {
+    const language = options.language || detectLanguage(code, options.filePath);
+    const parser = getParser(language);
+
+    try {
+        const formatted = await prettier.format(code, {
+            parser,
+            printWidth: options.printWidth ?? 100,
+            tabWidth: options.tabWidth ?? 2,
+            useTabs: options.useTabs ?? false,
+            semi: options.semi ?? true,
+            singleQuote: options.singleQuote ?? true,
+            trailingComma: 'es5',
+            bracketSpacing: true,
+            arrowParens: 'always',
+        });
+
+        return formatted;
+    } catch (error) {
+        // If Prettier fails, return original code
+        console.error('[formatter] Prettier error, returning unformatted:', error);
+        return code;
+    }
+}
+
+/**
+ * Extract code blocks from LLM response and format them
+ */
+export async function formatLLMResponse(response: string): Promise<string> {
+    // Match code blocks with language identifier
+    const codeBlockRegex = /```(\w+)?\n([\s\S]*?)```/g;
+    let result = response;
+    let match;
+
+    const replacements: Array<{ original: string; formatted: string }> = [];
+
+    while ((match = codeBlockRegex.exec(response)) !== null) {
+        const [fullMatch, lang, code] = match;
+        const language = mapLanguageIdentifier(lang);
+
+        if (language) {
+            try {
+                const formatted = await formatCode(code.trim(), { language });
+                replacements.push({
+                    original: fullMatch,
+                    formatted: `\`\`\`${lang}\n${formatted}\`\`\``,
+                });
+            } catch {
+                // Keep original if formatting fails
+            }
+        }
+    }
+
+    // Apply replacements
+    for (const { original, formatted } of replacements) {
+        result = result.replace(original, formatted);
+    }
+
+    return result;
+}
+
+/**
+ * Detect language from code content or file path
+ */
+function detectLanguage(code: string, filePath?: string): SupportedLanguage {
+    if (filePath) {
+        const ext = filePath.split('.').pop()?.toLowerCase();
+        switch (ext) {
+            case 'ts':
+            case 'tsx':
+                return 'typescript';
+            case 'js':
+            case 'jsx':
+                return 'javascript';
+            case 'css':
+            case 'scss':
+            case 'less':
+                return 'css';
+            case 'html':
+                return 'html';
+            case 'json':
+                return 'json';
+            case 'md':
+                return 'markdown';
+        }
+    }
+
+    // Detect from content
+    if (code.includes('import React') || code.includes('from "react"') || code.includes("from 'react'")) {
+        return code.includes(': React.') || code.includes('<') ? 'typescript' : 'javascript';
+    }
+
+    if (code.includes('interface ') || code.includes(': string') || code.includes(': number')) {
+        return 'typescript';
+    }
+
+    if (code.includes('function ') || code.includes('const ') || code.includes('let ')) {
+        return 'javascript';
+    }
+
+    if (code.includes('{') && (code.includes('color:') || code.includes('margin:') || code.includes('display:'))) {
+        return 'css';
+    }
+
+    if (code.startsWith('{') || code.startsWith('[')) {
+        try {
+            JSON.parse(code);
+            return 'json';
+        } catch {
+            // Not JSON
+        }
+    }
+
+    if (code.includes('<html') || code.includes('<!DOCTYPE')) {
+        return 'html';
+    }
+
+    // Default to TypeScript for better JSX support
+    return 'typescript';
+}
+
+/**
+ * Get Prettier parser for language
+ */
+function getParser(language: SupportedLanguage): string {
+    const parsers: Record<SupportedLanguage, string> = {
+        typescript: 'typescript',
+        javascript: 'babel',
+        css: 'css',
+        html: 'html',
+        json: 'json',
+        markdown: 'markdown',
+    };
+
+    return parsers[language];
+}
+
+/**
+ * Map common language identifiers to supported types
+ */
+function mapLanguageIdentifier(identifier?: string): SupportedLanguage | null {
+    if (!identifier) return null;
+
+    const lower = identifier.toLowerCase();
+    const mapping: Record<string, SupportedLanguage> = {
+        ts: 'typescript',
+        tsx: 'typescript',
+        typescript: 'typescript',
+        js: 'javascript',
+        jsx: 'javascript',
+        javascript: 'javascript',
+        css: 'css',
+        scss: 'css',
+        less: 'css',
+        html: 'html',
+        json: 'json',
+        md: 'markdown',
+        markdown: 'markdown',
+    };
+
+    return mapping[lower] || null;
+}

package/src/server.ts

@@ -0,0 +1,28 @@
+/**
+ * MCP Server Factory
+ *
+ * Creates and configures the MCP server with all tools registered.
+ */
+
+import { McpServer } from '@modelcontextprotocol/sdk/server/mcp.js';
+import { StdioServerTransport } from '@modelcontextprotocol/sdk/server/stdio.js';
+import { Config } from './config/index.js';
+import { registerTools } from './tools/index.js';
+
+export async function createServer(config: Config) {
+    const server = new McpServer({
+        name: 'gemini-designer-mcp',
+        version: '0.1.0',
+    });
+
+    // Register all MCP tools
+    registerTools(server, config);
+
+    // Use stdio transport (standard for MCP)
+    const transport = new StdioServerTransport();
+    await server.connect(transport);
+
+    console.error('[gemini-designer-mcp] Server connected via stdio');
+
+    return server;
+}