sonance-brand-mcp 1.3.35 → 1.3.36

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

@@ -77,6 +77,151 @@ function debugLog(message: string, data?: unknown) {
   }
 }
 
+/**
+ * Phase 1: Extract visible text from screenshot
+ * The LLM reads the screenshot and extracts text content related to the user's edit request
+ */
+async function extractTextFromScreenshot(
+  screenshot: string,
+  userPrompt: string,
+  apiKey: string
+): Promise<string[]> {
+  const anthropic = new Anthropic({ apiKey });
+
+  const base64Data = screenshot.split(",")[1] || screenshot;
+
+  const response = await anthropic.messages.create({
+    model: "claude-sonnet-4-20250514",
+    max_tokens: 1024,
+    messages: [
+      {
+        role: "user",
+        content: [
+          {
+            type: "image",
+            source: {
+              type: "base64",
+              media_type: "image/png",
+              data: base64Data,
+            },
+          },
+          {
+            type: "text",
+            text: `Look at this screenshot. The user wants to: "${userPrompt}"
+
+Extract the EXACT text content visible in the UI elements that need to be edited.
+Focus on button labels, headings, and any text within the area the user wants to change.
+
+Return ONLY valid JSON:
+{ "textStrings": ["View Assets", "View Flowchart", "exact text 1", "exact text 2"] }
+
+Be precise - return the exact text as it appears, no extra words.`,
+          },
+        ],
+      },
+    ],
+  });
+
+  try {
+    const textBlock = response.content.find((block) => block.type === "text");
+    if (!textBlock || textBlock.type !== "text") return [];
+
+    let jsonText = textBlock.text.trim();
+    const jsonMatch = jsonText.match(/```json\n([\s\S]*?)\n```/) ||
+                     jsonText.match(/\{[\s\S]*\}/);
+    if (jsonMatch) {
+      jsonText = jsonMatch[1] || jsonMatch[0];
+    }
+
+    const parsed = JSON.parse(jsonText);
+    const strings = parsed.textStrings || [];
+
+    debugLog("Phase 1: Extracted text from screenshot", { textStrings: strings });
+    return strings;
+  } catch (e) {
+    debugLog("Phase 1: Failed to parse text extraction response", { error: String(e) });
+    return [];
+  }
+}
+
+/**
+ * Search project files for exact text matches
+ * Returns file paths and content for files containing any of the search strings
+ */
+function searchFilesForExactText(
+  searchStrings: string[],
+  projectRoot: string,
+  maxFiles: number = 10
+): { path: string; content: string }[] {
+  if (searchStrings.length === 0) return [];
+
+  const results: { path: string; content: string; matchCount: number }[] = [];
+  const searchDirs = ["components", "src/components", "app", "src/app"];
+  const extensions = [".tsx", ".jsx"];
+  const visited = new Set<string>();
+
+  function searchDir(dirPath: string, depth: number = 0) {
+    if (depth > 5 || results.length >= maxFiles) return;
+
+    const fullDirPath = path.join(projectRoot, dirPath);
+    if (!fs.existsSync(fullDirPath) || visited.has(fullDirPath)) return;
+    visited.add(fullDirPath);
+
+    try {
+      const entries = fs.readdirSync(fullDirPath, { withFileTypes: true });
+
+      for (const entry of entries) {
+        if (results.length >= maxFiles) break;
+
+        const entryPath = path.join(dirPath, entry.name);
+        const fullEntryPath = path.join(projectRoot, entryPath);
+
+        if (entry.isDirectory()) {
+          if (!entry.name.startsWith(".") && entry.name !== "node_modules") {
+            searchDir(entryPath, depth + 1);
+          }
+        } else if (entry.isFile() && extensions.some(ext => entry.name.endsWith(ext))) {
+          try {
+            const content = fs.readFileSync(fullEntryPath, "utf-8");
+
+            // Count exact text matches
+            let matchCount = 0;
+            for (const searchText of searchStrings) {
+              if (content.includes(searchText)) {
+                matchCount++;
+              }
+            }
+
+            if (matchCount > 0) {
+              results.push({ path: entryPath, content, matchCount });
+            }
+          } catch {
+            // Skip files that can't be read
+          }
+        }
+      }
+    } catch {
+      // Skip directories that can't be read
+    }
+  }
+
+  for (const dir of searchDirs) {
+    searchDir(dir);
+    if (results.length >= maxFiles) break;
+  }
+
+  // Sort by match count (most matches first)
+  results.sort((a, b) => b.matchCount - a.matchCount);
+
+  debugLog("Phase 2: Found files with text matches", {
+    searchStrings,
+    filesFound: results.length,
+    topMatches: results.slice(0, 5).map(r => ({ path: r.path, matchCount: r.matchCount }))
+  });
+
+  return results.slice(0, maxFiles).map(r => ({ path: r.path, content: r.content }));
+}
+
 const VISION_SYSTEM_PROMPT = `You are an expert React/TypeScript developer with vision capabilities. You can see screenshots and modify code.
 
 ═══════════════════════════════════════════════════════════════════════════════
@@ -222,9 +367,40 @@ export async function POST(request: Request) {
         );
       }
 
+      // PHASE 1: Extract visible text from screenshot using LLM vision
+      // This helps find the correct component file even if it's not in the import chain
+      let textSearchFiles: { path: string; content: string }[] = [];
+      if (screenshot) {
+        debugLog("Starting Phase 1: Text extraction from screenshot");
+        const extractedText = await extractTextFromScreenshot(screenshot, userPrompt, apiKey);
+
+        if (extractedText.length > 0) {
+          // PHASE 2: Search project for files containing the extracted text
+          textSearchFiles = searchFilesForExactText(extractedText, projectRoot, 5);
+          debugLog("Phase 1+2 complete", {
+            extractedText,
+            filesFound: textSearchFiles.map(f => f.path)
+          });
+        }
+      }
+
       // Gather page context (including focused element files and keyword search)
       const pageContext = gatherPageContext(pageRoute, projectRoot, focusedElements, userPrompt);
 
+      // Add text-search discovered files to component sources (if not already present)
+      const existingPaths = new Set([
+        pageContext.pageFile,
+        ...pageContext.componentSources.map(c => c.path)
+      ]);
+
+      for (const file of textSearchFiles) {
+        if (!existingPaths.has(file.path)) {
+          // Insert at the beginning so these get priority
+          pageContext.componentSources.unshift(file);
+          debugLog("Added file from text search to context", { path: file.path });
+        }
+      }
+
       // Build user message with vision
       const messageContent: Anthropic.MessageCreateParams["messages"][0]["content"] = [];
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sonance-brand-mcp",
-  "version": "1.3.35",
+  "version": "1.3.36",
   "description": "MCP Server for Sonance Brand Guidelines and Component Library - gives Claude instant access to brand colors, typography, and UI components.",
   "main": "dist/index.js",
   "type": "module",