sonance-brand-mcp 1.3.19 → 1.3.21

package/dist/assets/api/sonance-vision-edit/route.ts

@@ -0,0 +1,656 @@
+import { NextResponse } from "next/server";
+import * as fs from "fs";
+import * as path from "path";
+import Anthropic from "@anthropic-ai/sdk";
+
+/**
+ * Sonance DevTools API - Vision Mode Editor
+ *
+ * Uses Claude's vision capabilities to understand page screenshots and modify
+ * multiple files based on natural language requests.
+ *
+ * Supports actions:
+ * - "edit": Analyze screenshot + code context, generate multi-file modifications
+ * - "save": Write all modified files to disk
+ *
+ * DEVELOPMENT ONLY.
+ */
+
+interface VisionFocusedElement {
+  name: string;
+  type: string;
+  variantId?: string;
+  coordinates: {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+  };
+  description?: string;
+}
+
+interface VisionFileModification {
+  filePath: string;
+  originalContent: string;
+  modifiedContent: string;
+  diff: string;
+  explanation: string;
+  previewCSS?: string;
+}
+
+interface VisionEditRequest {
+  action: "edit" | "save";
+  screenshot?: string;
+  pageRoute: string;
+  userPrompt: string;
+  focusedElements?: VisionFocusedElement[];
+  modifications?: VisionFileModification[];
+}
+
+interface VisionEditResponse {
+  success: boolean;
+  modifications?: VisionFileModification[];
+  aggregatedPreviewCSS?: string;
+  explanation?: string;
+  reasoning?: string;
+  error?: string;
+}
+
+const VISION_SYSTEM_PROMPT = `You are a React/Tailwind CSS expert with vision capabilities for the Sonance brand system.
+
+You can see screenshots of web pages and understand their visual layout, then modify code to implement requested changes.
+
+═══════════════════════════════════════════════════════════════════════════════
+CRITICAL RULES
+═══════════════════════════════════════════════════════════════════════════════
+
+**FILE RULES (MOST IMPORTANT):**
+1. You may ONLY edit files that are provided in the PAGE CONTEXT section
+2. NEVER create new files - only modify existing ones shown to you
+3. The filePath in your response MUST exactly match one of the provided file paths
+4. If you cannot find the right file to edit, explain this in your response instead of creating a new file
+
+**ANALYSIS:**
+5. CAREFULLY analyze the screenshot to understand the current visual state
+6. Identify elements mentioned in the user's request
+7. Understand the current styling and layout
+8. Consider how changes will affect the overall design
+
+**PRESERVATION RULES:**
+9. NEVER delete or remove existing content, children, or JSX elements
+10. NEVER change component structure unless specifically requested
+11. NEVER modify TypeScript types, imports, or exports unless necessary
+12. NEVER remove data-sonance-* attributes
+
+**CHANGE RULES:**
+13. Make ONLY the changes requested by the user
+14. Modify the minimum amount of code necessary
+15. Use semantic Tailwind classes (bg-primary, text-foreground, etc.)
+16. Maintain dark mode compatibility with CSS variables
+17. Keep the cn() utility for className merging
+
+**SONANCE BRAND COLORS:**
+- Charcoal: #333F48, #343D46 (primary)
+- Silver: #E2E2E2, #D1D1D6 (secondary)
+- IPORT Orange: #FC4C02
+- IPORT Dark: #0F161D
+- Blaze Blue: #00A3E1
+- Blaze Red: #C02B0A
+
+**RESPONSE FORMAT:**
+Return ONLY a valid JSON object. Do not include any conversational text before or after the JSON.
+The JSON must include:
+- "reasoning": Brief explanation of what you see in the screenshot and your plan
+- "modifications": Array of file modifications, each with:
+  - "filePath": Path to the file
+  - "modifiedContent": Complete updated file content
+  - "explanation": What changed in this file
+  - "previewCSS": CSS for live preview (use [data-sonance-name="ComponentName"] selectors)
+- "aggregatedPreviewCSS": Combined CSS for all changes
+- "explanation": Overall summary of changes`;
+
+export async function POST(request: Request) {
+  // Only allow in development
+  if (process.env.NODE_ENV !== "development") {
+    return NextResponse.json(
+      { error: "Vision edit is only available in development mode" },
+      { status: 403 }
+    );
+  }
+
+  try {
+    const body: VisionEditRequest = await request.json();
+    const { action, screenshot, pageRoute, userPrompt, focusedElements, modifications } = body;
+
+    const projectRoot = process.cwd();
+
+    // Handle save action - write all modified files
+    if (action === "save") {
+      if (!modifications || modifications.length === 0) {
+        return NextResponse.json(
+          { error: "modifications array is required for save action" },
+          { status: 400 }
+        );
+      }
+
+      // Create backups first
+      const backups: { filePath: string; content: string }[] = [];
+      for (const mod of modifications) {
+        const fullPath = path.join(projectRoot, mod.filePath);
+        if (fs.existsSync(fullPath)) {
+          backups.push({
+            filePath: mod.filePath,
+            content: fs.readFileSync(fullPath, "utf-8"),
+          });
+        }
+      }
+
+      try {
+        // Write all files
+        for (const mod of modifications) {
+          const fullPath = path.join(projectRoot, mod.filePath);
+
+          // Validate path is within project
+          if (!fullPath.startsWith(projectRoot)) {
+            throw new Error(`Invalid file path: ${mod.filePath}`);
+          }
+
+          fs.writeFileSync(fullPath, mod.modifiedContent, "utf-8");
+        }
+
+        return NextResponse.json({
+          success: true,
+          message: `Successfully updated ${modifications.length} file(s)`,
+        });
+      } catch (writeError) {
+        // Rollback on error
+        for (const backup of backups) {
+          try {
+            const fullPath = path.join(projectRoot, backup.filePath);
+            fs.writeFileSync(fullPath, backup.content, "utf-8");
+          } catch {
+            console.error(`Failed to rollback ${backup.filePath}`);
+          }
+        }
+        throw writeError;
+      }
+    }
+
+    // Handle edit action (Vision AI modification)
+    if (action === "edit") {
+      if (!userPrompt) {
+        return NextResponse.json(
+          { error: "userPrompt is required for edit action" },
+          { status: 400 }
+        );
+      }
+
+      // Check for API key
+      const apiKey = process.env.NEXT_PUBLIC_CLAUDE_API_KEY;
+      if (!apiKey) {
+        return NextResponse.json(
+          { error: "NEXT_PUBLIC_CLAUDE_API_KEY not configured. Add it to your .env.local file." },
+          { status: 500 }
+        );
+      }
+
+      // Gather page context (including focused element files via project-wide search)
+      const pageContext = gatherPageContext(pageRoute, projectRoot, focusedElements);
+
+      // Build user message with vision
+      const messageContent: Anthropic.MessageCreateParams["messages"][0]["content"] = [];
+
+      // Add screenshot if provided
+      if (screenshot) {
+        const base64Data = screenshot.split(",")[1] || screenshot;
+        messageContent.push({
+          type: "image",
+          source: {
+            type: "base64",
+            media_type: "image/png",
+            data: base64Data,
+          },
+        });
+      }
+
+      // Build text content
+      let textContent = `VISION MODE EDIT REQUEST
+
+Page Route: ${pageRoute}
+User Request: "${userPrompt}"
+
+`;
+
+      if (focusedElements && focusedElements.length > 0) {
+        textContent += `FOCUSED ELEMENTS (user clicked on these):
+${focusedElements.map((el) => `- ${el.name} (${el.type}) at (${el.coordinates.x}, ${el.coordinates.y})`).join("\n")}
+
+`;
+      }
+
+      textContent += `PAGE CONTEXT:
+
+Page File: ${pageContext.pageFile || "Not found"}
+${pageContext.pageContent ? `\`\`\`tsx\n${pageContext.pageContent}\n\`\`\`` : ""}
+
+`;
+
+      if (pageContext.componentSources.length > 0) {
+        textContent += `IMPORTED COMPONENTS:\n`;
+        for (const comp of pageContext.componentSources) {
+          textContent += `
+File: ${comp.path}
+\`\`\`tsx
+${comp.content.substring(0, 3000)}${comp.content.length > 3000 ? "\n// ... (truncated)" : ""}
+\`\`\`
+`;
+        }
+      }
+
+      textContent += `
+GLOBALS.CSS (relevant theme variables):
+\`\`\`css
+${pageContext.globalsCSS.substring(0, 2000)}${pageContext.globalsCSS.length > 2000 ? "\n/* ... (truncated) */" : ""}
+\`\`\`
+
+VALID FILES YOU MAY EDIT:
+${pageContext.pageFile ? `- ${pageContext.pageFile}` : ""}
+${pageContext.componentSources.map((c) => `- ${c.path}`).join("\n")}
+
+INSTRUCTIONS:
+1. Look at the screenshot and identify elements mentioned in the user's request
+2. Review the provided code to understand current implementation
+3. Choose which of the VALID FILES above need modifications
+4. Generate complete modified code for each file
+5. Provide previewCSS for immediate visual feedback
+6. Return as JSON in the specified format
+
+CRITICAL: Only use file paths from the VALID FILES list above. Do NOT create new files.`;
+
+      messageContent.push({
+        type: "text",
+        text: textContent,
+      });
+
+      // Call Claude Vision API
+      const anthropic = new Anthropic({ apiKey });
+
+      const response = await anthropic.messages.create({
+        model: "claude-sonnet-4-20250514",
+        max_tokens: 16384,
+        messages: [
+          {
+            role: "user",
+            content: messageContent,
+          },
+        ],
+        system: VISION_SYSTEM_PROMPT,
+      });
+
+      // Extract text content from response
+      const textResponse = response.content.find((block) => block.type === "text");
+      if (!textResponse || textResponse.type !== "text") {
+        return NextResponse.json(
+          { error: "No text response from AI" },
+          { status: 500 }
+        );
+      }
+
+      // Parse AI response
+      let aiResponse: {
+        reasoning?: string;
+        modifications: Array<{
+          filePath: string;
+          modifiedContent: string;
+          explanation: string;
+          previewCSS?: string;
+        }>;
+        aggregatedPreviewCSS?: string;
+        explanation?: string;
+      };
+
+      try {
+        let jsonText = textResponse.text.trim();
+        
+        // Try to extract JSON from markdown code blocks
+        const jsonMatch = jsonText.match(/```json\n([\s\S]*?)\n```/) || 
+                         jsonText.match(/```\n([\s\S]*?)\n```/);
+        
+        if (jsonMatch) {
+          jsonText = jsonMatch[1];
+        } else if (jsonText.includes("```json")) {
+            // Fallback for cases where regex might miss due to newlines
+            const start = jsonText.indexOf("```json") + 7;
+            const end = jsonText.lastIndexOf("```");
+            if (end > start) {
+                jsonText = jsonText.substring(start, end);
+            }
+        }
+
+        // Clean up any remaining whitespace
+        jsonText = jsonText.trim();
+        
+        aiResponse = JSON.parse(jsonText);
+      } catch {
+        console.error("Failed to parse AI response:", textResponse.text);
+        return NextResponse.json(
+          { error: "Failed to parse AI response. Please try again." },
+          { status: 500 }
+        );
+      }
+
+      // Build list of valid file paths
+      const validPaths = new Set<string>();
+      if (pageContext.pageFile) {
+        validPaths.add(pageContext.pageFile);
+      }
+      for (const comp of pageContext.componentSources) {
+        validPaths.add(comp.path);
+      }
+
+      // Validate AI response - reject any file paths not in our valid list
+      const invalidMods = (aiResponse.modifications || []).filter(
+        (mod) => !validPaths.has(mod.filePath)
+      );
+
+      if (invalidMods.length > 0) {
+        console.error(
+          "AI attempted to create new files:",
+          invalidMods.map((m) => m.filePath)
+        );
+        return NextResponse.json(
+          {
+            success: false,
+            error: `Cannot create new files. The following paths were not found in the project: ${invalidMods.map((m) => m.filePath).join(", ")}. Please try a more specific request targeting existing components.`,
+          } as VisionEditResponse,
+          { status: 400 }
+        );
+      }
+
+      // Read original content and generate diffs for each modification
+      const modificationsWithOriginals: VisionFileModification[] = [];
+      for (const mod of aiResponse.modifications || []) {
+        const fullPath = path.join(projectRoot, mod.filePath);
+        let originalContent = "";
+        if (fs.existsSync(fullPath)) {
+          originalContent = fs.readFileSync(fullPath, "utf-8");
+        }
+
+        modificationsWithOriginals.push({
+          filePath: mod.filePath,
+          originalContent,
+          modifiedContent: mod.modifiedContent,
+          diff: generateSimpleDiff(originalContent, mod.modifiedContent),
+          explanation: mod.explanation,
+          previewCSS: mod.previewCSS,
+        });
+      }
+
+      // Aggregate preview CSS
+      const aggregatedCSS = modificationsWithOriginals
+        .filter((m) => m.previewCSS)
+        .map((m) => `/* ${m.filePath} */\n${m.previewCSS}`)
+        .join("\n\n");
+
+      return NextResponse.json({
+        success: true,
+        modifications: modificationsWithOriginals,
+        aggregatedPreviewCSS: aiResponse.aggregatedPreviewCSS || aggregatedCSS,
+        explanation: aiResponse.explanation,
+        reasoning: aiResponse.reasoning,
+      } as VisionEditResponse);
+    }
+
+    return NextResponse.json(
+      { error: "Invalid action. Use 'edit' or 'save'." },
+      { status: 400 }
+    );
+  } catch (error) {
+    console.error("Vision edit error:", error);
+    return NextResponse.json(
+      { error: "Failed to process request", details: String(error) },
+      { status: 500 }
+    );
+  }
+}
+
+/**
+ * Search for component files by name across the project
+ * Uses similar logic to /api/sonance-find-component
+ */
+function findComponentFileByName(
+  componentName: string,
+  projectRoot: string
+): string | null {
+  const normalizedName = componentName.toLowerCase().replace(/\s+/g, "-");
+  const baseName = normalizedName.split("-")[0];
+
+  const SEARCH_DIRS = ["src/components", "components", "src", "app"];
+  const EXTENSIONS = [".tsx", ".jsx", ".ts", ".js"];
+
+  function searchRecursive(
+    dir: string,
+    fileName: string,
+    depth = 0
+  ): string | null {
+    if (depth > 4) return null;
+    try {
+      const entries = fs.readdirSync(dir, { withFileTypes: true });
+      // Check direct matches
+      for (const ext of EXTENSIONS) {
+        const match = entries.find(
+          (e) => e.isFile() && e.name.toLowerCase() === `${fileName}${ext}`
+        );
+        if (match) return path.join(dir, match.name);
+      }
+      // Recurse into subdirs
+      for (const entry of entries) {
+        if (
+          entry.isDirectory() &&
+          !entry.name.startsWith(".") &&
+          entry.name !== "node_modules"
+        ) {
+          const result = searchRecursive(
+            path.join(dir, entry.name),
+            fileName,
+            depth + 1
+          );
+          if (result) return result;
+        }
+      }
+    } catch {
+      /* skip unreadable */
+    }
+    return null;
+  }
+
+  for (const dir of SEARCH_DIRS) {
+    const searchDir = path.join(projectRoot, dir);
+    if (fs.existsSync(searchDir)) {
+      const result = searchRecursive(searchDir, normalizedName);
+      if (result) return path.relative(projectRoot, result);
+      if (baseName !== normalizedName) {
+        const baseResult = searchRecursive(searchDir, baseName);
+        if (baseResult) return path.relative(projectRoot, baseResult);
+      }
+    }
+  }
+  return null;
+}
+
+/**
+ * Gather context about the current page for AI analysis
+ */
+function gatherPageContext(
+  pageRoute: string,
+  projectRoot: string,
+  focusedElements?: VisionFocusedElement[]
+): {
+  pageFile: string | null;
+  pageContent: string;
+  componentSources: { path: string; content: string }[];
+  globalsCSS: string;
+} {
+  // Map route to page file
+  const pageFile = discoverPageFile(pageRoute, projectRoot);
+  let pageContent = "";
+  const componentSources: { path: string; content: string }[] = [];
+
+  if (pageFile) {
+    const fullPath = path.join(projectRoot, pageFile);
+    if (fs.existsSync(fullPath)) {
+      pageContent = fs.readFileSync(fullPath, "utf-8");
+
+      // Extract imports and read component files
+      const imports = extractImports(pageContent);
+      for (const importPath of imports) {
+        const resolvedPath = resolveImportPath(importPath, pageFile, projectRoot);
+        if (resolvedPath && fs.existsSync(path.join(projectRoot, resolvedPath))) {
+          try {
+            const content = fs.readFileSync(path.join(projectRoot, resolvedPath), "utf-8");
+            componentSources.push({ path: resolvedPath, content });
+          } catch {
+            // Skip files that can't be read
+          }
+        }
+      }
+    }
+  }
+
+  // Also search for focused element components if provided
+  if (focusedElements && focusedElements.length > 0) {
+    for (const el of focusedElements) {
+      // Try to find component file by name
+      const foundPath = findComponentFileByName(el.name, projectRoot);
+      if (foundPath && !componentSources.some((c) => c.path === foundPath)) {
+        try {
+          const content = fs.readFileSync(
+            path.join(projectRoot, foundPath),
+            "utf-8"
+          );
+          componentSources.push({ path: foundPath, content });
+        } catch {
+          /* skip if unreadable */
+        }
+      }
+    }
+  }
+
+  // Read globals.css
+  let globalsCSS = "";
+  const globalsPath = path.join(projectRoot, "src/app/globals.css");
+  if (fs.existsSync(globalsPath)) {
+    globalsCSS = fs.readFileSync(globalsPath, "utf-8");
+  }
+
+  return { pageFile, pageContent, componentSources, globalsCSS };
+}
+
+/**
+ * Discover the page file for a given route
+ */
+function discoverPageFile(route: string, projectRoot: string): string | null {
+  // Handle root route
+  if (route === "/" || route === "") {
+    const rootPage = "src/app/page.tsx";
+    if (fs.existsSync(path.join(projectRoot, rootPage))) {
+      return rootPage;
+    }
+    return null;
+  }
+
+  // Remove leading slash
+  const cleanRoute = route.replace(/^\//, "");
+
+  // Try different patterns
+  const patterns = [
+    `src/app/${cleanRoute}/page.tsx`,
+    `src/app/${cleanRoute}/page.jsx`,
+    `src/app/${cleanRoute}.tsx`,
+  ];
+
+  for (const pattern of patterns) {
+    if (fs.existsSync(path.join(projectRoot, pattern))) {
+      return pattern;
+    }
+  }
+
+  return null;
+}
+
+/**
+ * Extract import paths from file content
+ */
+function extractImports(content: string): string[] {
+  const importRegex = /import\s+.*?\s+from\s+["'](@\/components\/[^"']+|\.\.?\/[^"']+)["']/g;
+  const imports: string[] = [];
+  let match;
+
+  while ((match = importRegex.exec(content)) !== null) {
+    imports.push(match[1]);
+  }
+
+  return imports;
+}
+
+/**
+ * Resolve an import path to a file system path
+ */
+function resolveImportPath(
+  importPath: string,
+  fromFile: string,
+  projectRoot: string
+): string | null {
+  // Handle @ alias (maps to src/)
+  if (importPath.startsWith("@/")) {
+    const resolved = importPath.replace("@/", "src/");
+    // Try with .tsx extension
+    const withExt = resolved.endsWith(".tsx") ? resolved : `${resolved}.tsx`;
+    if (fs.existsSync(path.join(projectRoot, withExt))) {
+      return withExt;
+    }
+    // Try as directory with index
+    const indexPath = `${resolved}/index.tsx`;
+    if (fs.existsSync(path.join(projectRoot, indexPath))) {
+      return indexPath;
+    }
+    return withExt; // Return even if not found for context
+  }
+
+  // Handle relative imports
+  if (importPath.startsWith(".")) {
+    const dir = path.dirname(fromFile);
+    const resolved = path.join(dir, importPath);
+    const withExt = resolved.endsWith(".tsx") ? resolved : `${resolved}.tsx`;
+    return withExt;
+  }
+
+  return null;
+}
+
+/**
+ * Generate a simple unified diff between two strings
+ */
+function generateSimpleDiff(original: string, modified: string): string {
+  const originalLines = original.split("\n");
+  const modifiedLines = modified.split("\n");
+
+  const diff: string[] = [];
+  const maxLines = Math.max(originalLines.length, modifiedLines.length);
+
+  for (let i = 0; i < maxLines; i++) {
+    const origLine = originalLines[i];
+    const modLine = modifiedLines[i];
+
+    if (origLine === undefined && modLine !== undefined) {
+      diff.push(`+ ${modLine}`);
+    } else if (origLine !== undefined && modLine === undefined) {
+      diff.push(`- ${origLine}`);
+    } else if (origLine !== modLine) {
+      diff.push(`- ${origLine}`);
+      diff.push(`+ ${modLine}`);
+    }
+  }
+
+  return diff.join("\n");
+}