screencraft 0.1.0

package/src/generators/copy.js

@@ -0,0 +1,147 @@
+/**
+ * src/generators/copy.js
+ * ----------------------
+ * Sends each screenshot to Claude and gets back 3 headline options.
+ * Each headline = { white: "short phrase", accent: "key word" }
+ *
+ * Falls back to generic suggestions if API key not set.
+ */
+
+const fs       = require('fs');
+const path     = require('path');
+
+const ANTHROPIC_API = 'https://api.anthropic.com/v1/messages';
+
+/**
+ * suggestHeadlines(screenshots, brand, config)
+ * Returns array of { description, options: [{white, accent}×3] }
+ * One entry per screenshot.
+ */
+async function suggestHeadlines(screenshots, brand, config) {
+  const apiKey = process.env.ANTHROPIC_API_KEY;
+
+  if (!apiKey) {
+    console.log('  ⚠ ANTHROPIC_API_KEY not set — using generic suggestions');
+    return screenshots.map((s, i) => genericSuggestions(i, brand));
+  }
+
+  const results = [];
+
+  for (let i = 0; i < screenshots.length; i++) {
+    const screen = screenshots[i];
+
+    try {
+      const imageB64 = fs.readFileSync(screen.file).toString('base64');
+      const ext      = path.extname(screen.file).replace('.', '').toLowerCase();
+      const mimeType = ext === 'jpg' ? 'image/jpeg' : 'image/png';
+
+      const response = await fetch(ANTHROPIC_API, {
+        method: 'POST',
+        headers: {
+          'Content-Type':      'application/json',
+          'x-api-key':         apiKey,
+          'anthropic-version': '2023-06-01',
+        },
+        body: JSON.stringify({
+          model:      'claude-opus-4-5',
+          max_tokens: 400,
+          system: `You are writing short App Store screenshot headlines for a mobile app.
+Each headline has two parts:
+1. "white" — a short phrase in white text (2-5 words)
+2. "accent" — a single key word or very short phrase (1-2 words) in the app's accent color
+
+Rules:
+- Total headline reads as one phrase: white + accent
+- Punchy, benefit-focused, not feature-focused
+- App Store style — confident, not clickbait
+- Must feel appropriate for the specific screen shown
+- Return ONLY valid JSON, no explanation
+
+Return exactly this JSON structure:
+{
+  "description": "one sentence describing what this screen shows",
+  "options": [
+    { "white": "phrase one", "accent": "word" },
+    { "white": "phrase two", "accent": "word" },
+    { "white": "phrase three", "accent": "word" }
+  ]
+}`,
+          messages: [{
+            role:    'user',
+            content: [
+              {
+                type:   'image',
+                source: { type: 'base64', media_type: mimeType, data: imageB64 },
+              },
+              {
+                type: 'text',
+                text: `App name: ${brand.appName || 'App'}
+Tagline: ${brand.tagline || ''}
+Tone: ${config.app?.tone || 'Friendly & energetic'}
+
+Write 3 headline options for this App Store screenshot.`,
+              }
+            ],
+          }],
+        }),
+      });
+
+      const data = await response.json();
+      const text = data.content?.[0]?.text || '';
+
+      // Parse JSON from response
+      const jsonMatch = text.match(/\{[\s\S]*\}/);
+      if (jsonMatch) {
+        const parsed = JSON.parse(jsonMatch[0]);
+        results.push(parsed);
+      } else {
+        results.push(genericSuggestions(i, brand));
+      }
+    } catch (err) {
+      results.push(genericSuggestions(i, brand));
+    }
+  }
+
+  return results;
+}
+
+/**
+ * Fallback suggestions when API key is not available.
+ */
+function genericSuggestions(index, brand) {
+  const sets = [
+    { description: 'App screenshot', options: [
+      { white: 'Simple and', accent: 'powerful' },
+      { white: 'Built for how you', accent: 'work' },
+      { white: 'Everything you need,', accent: 'nothing you don\'t' },
+    ]},
+    { description: 'App screenshot', options: [
+      { white: 'Unlock your', accent: 'potential' },
+      { white: 'Do more with', accent: 'less' },
+      { white: 'Work smarter,', accent: 'not harder' },
+    ]},
+    { description: 'App screenshot', options: [
+      { white: 'Your personal', accent: 'toolkit' },
+      { white: 'Always within', accent: 'reach' },
+      { white: 'Designed for', accent: 'flow' },
+    ]},
+    { description: 'App screenshot', options: [
+      { white: 'The way it should', accent: 'work' },
+      { white: 'Finally,', accent: 'focus' },
+      { white: 'Built for the way you', accent: 'think' },
+    ]},
+    { description: 'App screenshot', options: [
+      { white: 'Get started in', accent: 'seconds' },
+      { white: 'Download and', accent: 'go' },
+      { white: 'Join thousands of', accent: 'users' },
+    ]},
+    { description: 'App screenshot', options: [
+      { white: 'See for', accent: 'yourself' },
+      { white: 'The proof is in the', accent: 'results' },
+      { white: 'Trusted by', accent: 'thousands' },
+    ]},
+  ];
+  return sets[index % sets.length];
+}
+
+module.exports = { suggestHeadlines };

package/src/mcp/index.js

@@ -0,0 +1,394 @@
+/**
+ * src/mcp/index.js
+ * ----------------
+ * MCP (Model Context Protocol) server for ScreenCraft.
+ *
+ * Exposes tools that Claude Code, Claude Desktop, and Claude Cowork
+ * can call to drive the ScreenCraft pipeline. The AI session becomes
+ * the intelligence layer — it generates headlines, suggests screenshots,
+ * and detects brand context from the codebase it already understands.
+ *
+ * Usage:
+ *   screencraft --mcp          (stdio transport)
+ *   claude mcp add --transport stdio screencraft -- npx screencraft --mcp
+ */
+
+const { McpServer } = require('@modelcontextprotocol/sdk/server/mcp.js');
+const { StdioServerTransport } = require('@modelcontextprotocol/sdk/server/stdio.js');
+const { z } = require('zod');
+const path = require('path');
+const fs   = require('fs');
+
+const { detectFramework, detectBrand } = require('../detectors/detectBrand');
+const { compositePSD }                 = require('../generators/compositePSD');
+const { validateKey, getStoredKey }    = require('../auth/keystore');
+const { prepareAEProject, renderLocally } = require('../pipeline/aeSwap');
+const { session, resetSession }        = require('../server/session');
+
+// ── Create MCP Server ─────────────────────────────────────────────
+
+const server = new McpServer({
+  name: 'screencraft',
+  version: '0.1.0',
+});
+
+// ── Logging (silent in MCP mode — stdout is protocol) ─────────────
+const log = {
+  step:    () => {},
+  success: () => {},
+  info:    () => {},
+  warn:    () => {},
+};
+
+// ── Tool: detect_brand ────────────────────────────────────────────
+server.tool(
+  'detect_brand',
+  'Detect the app framework, brand colors, icon, font, and logo from a project directory. Run this first before other ScreenCraft tools.',
+  {
+    project_path: z.string().describe('Absolute path to the app project directory'),
+  },
+  async ({ project_path }) => {
+    if (!fs.existsSync(project_path)) {
+      return { content: [{ type: 'text', text: `Error: Path does not exist: ${project_path}` }] };
+    }
+
+    resetSession();
+    session.projectPath = project_path;
+
+    const configPath = path.join(project_path, 'screencraft.config.js');
+    const config = fs.existsSync(configPath) ? require(configPath) : {};
+
+    session.outputDir = path.join(project_path, config.output?.dir || './launch-kit');
+    fs.mkdirSync(session.outputDir, { recursive: true });
+    fs.mkdirSync(path.join(session.outputDir, 'screenshots'), { recursive: true });
+    fs.mkdirSync(path.join(session.outputDir, 'video'),       { recursive: true });
+    fs.mkdirSync(path.join(session.outputDir, 'source'),      { recursive: true });
+    fs.mkdirSync(path.join(session.outputDir, 'brand'),       { recursive: true });
+
+    const framework = await detectFramework(project_path);
+    const brand     = await detectBrand(project_path, config);
+
+    session.framework = framework;
+    session.brand     = brand;
+
+    return {
+      content: [{
+        type: 'text',
+        text: JSON.stringify({
+          framework: { name: framework.name, platform: framework.platform },
+          brand: {
+            appName:    brand.appName,
+            primary:    brand.primary,
+            secondary:  brand.secondary,
+            accent:     brand.accent,
+            background: brand.background,
+            icon:       brand.icon ? 'found' : null,
+            font:       brand.font?.family || null,
+            logo:       brand.logo ? 'found' : null,
+          },
+        }, null, 2),
+      }],
+    };
+  }
+);
+
+// ── Tool: set_headlines ───────────────────────────────────────────
+server.tool(
+  'set_headlines',
+  `Set the App Store headline text for each screenshot. You (the AI) should generate these based on your understanding of the app. Each headline has two parts: "white" (main text, 2-5 words) and "accent" (emphasized word, 1-2 words, shown in brand accent color). Provide one headline per screenshot. Example: {"white": "Track your", "accent": "progress"}`,
+  {
+    headlines: z.array(z.object({
+      white:  z.string().describe('Main headline text (2-5 words, appears in white)'),
+      accent: z.string().describe('Accent word (1-2 words, appears in brand accent color)'),
+    })).describe('Array of headlines, one per screenshot'),
+  },
+  async ({ headlines }) => {
+    session.approvedTexts = headlines;
+
+    // Also populate suggestions so the web UI can show them
+    session.suggestions = headlines.map(h => ({
+      description: '',
+      options: [h, h, h],
+    }));
+
+    return {
+      content: [{
+        type: 'text',
+        text: `Set ${headlines.length} headlines. ${session.screenshots.length > 0 ? 'Ready to generate — call open_ui or generate_launch_kit.' : 'Still need screenshots — call set_screenshots or open_ui to capture them.'}`,
+      }],
+    };
+  }
+);
+
+// ── Tool: set_screenshots ─────────────────────────────────────────
+server.tool(
+  'suggest_screenshots',
+  'Suggest which app screens to capture for the App Store listing. Return a list of screen descriptions and the routes/views to navigate to. The user will capture these in the web UI.',
+  {
+    screens: z.array(z.object({
+      label:       z.string().describe('Short label for this screen (e.g., "Home", "Settings", "Onboarding")'),
+      description: z.string().describe('What this screen shows and why it would make a good App Store screenshot'),
+      route:       z.string().optional().describe('Deep link URL or navigation path if known'),
+    })).describe('Array of 3-6 recommended screens to capture'),
+  },
+  async ({ screens }) => {
+    // Store as suggestions — the user will capture actual screenshots in the UI
+    session._suggestedScreens = screens;
+
+    return {
+      content: [{
+        type: 'text',
+        text: `Suggested ${screens.length} screenshots:\n${screens.map((s, i) => `  ${i + 1}. ${s.label}: ${s.description}`).join('\n')}\n\nCall open_ui to let the user capture these in the Simulator.`,
+      }],
+    };
+  }
+);
+
+// ── Tool: set_brand_overrides ─────────────────────────────────────
+server.tool(
+  'set_brand_overrides',
+  'Override detected brand values. Use this if you know the correct colors, app name, etc. from the codebase. Only provide fields you want to override — omitted fields keep their detected values.',
+  {
+    app_name:   z.string().optional().describe('App display name'),
+    primary:    z.string().optional().describe('Primary brand color (hex, e.g., #1A1A2E)'),
+    secondary:  z.string().optional().describe('Secondary brand color (hex)'),
+    accent:     z.string().optional().describe('Accent brand color (hex)'),
+    background: z.string().optional().describe('Background color (hex)'),
+  },
+  async ({ app_name, primary, secondary, accent, background }) => {
+    if (!session.brand) {
+      return { content: [{ type: 'text', text: 'Error: Run detect_brand first.' }] };
+    }
+
+    if (app_name)   session.brand.appName    = app_name;
+    if (primary)    session.brand.primary    = primary;
+    if (secondary)  session.brand.secondary  = secondary;
+    if (accent)     session.brand.accent     = accent;
+    if (background) session.brand.background = background;
+
+    return {
+      content: [{
+        type: 'text',
+        text: `Brand updated: ${JSON.stringify({
+          appName: session.brand.appName,
+          primary: session.brand.primary,
+          secondary: session.brand.secondary,
+          accent: session.brand.accent,
+          background: session.brand.background,
+        }, null, 2)}`,
+      }],
+    };
+  }
+);
+
+// ── Tool: list_templates ──────────────────────────────────────────
+server.tool(
+  'list_templates',
+  'List available PSD/layout templates for App Store screenshot generation.',
+  {},
+  async () => {
+    const layoutsDir = path.join(__dirname, '..', '..', 'templates', 'layouts');
+    const templates = [];
+
+    try {
+      if (fs.existsSync(layoutsDir)) {
+        const entries = fs.readdirSync(layoutsDir, { withFileTypes: true });
+        entries
+          .filter(e => !e.isDirectory() && e.name.endsWith('.psd'))
+          .forEach(e => templates.push(e.name.replace('.psd', '')));
+        entries
+          .filter(e => e.isDirectory() && fs.existsSync(path.join(layoutsDir, e.name, 'template.psd')))
+          .forEach(e => templates.push(e.name));
+      }
+    } catch {}
+
+    templates.push('auto');
+
+    return {
+      content: [{
+        type: 'text',
+        text: `Available templates: ${templates.join(', ')}\n\nUse set_template to choose one, or "auto" for automatic selection.`,
+      }],
+    };
+  }
+);
+
+// ── Tool: set_template ────────────────────────────────────────────
+server.tool(
+  'set_template',
+  'Select which PSD template to use for screenshot compositing.',
+  {
+    template: z.string().describe('Template name (from list_templates) or "auto"'),
+  },
+  async ({ template }) => {
+    session.selectedTemplate = template === 'auto' ? null : template;
+    return {
+      content: [{ type: 'text', text: `Template set to: ${template}` }],
+    };
+  }
+);
+
+// ── Tool: open_ui ─────────────────────────────────────────────────
+server.tool(
+  'open_ui',
+  'Start the ScreenCraft web UI at localhost:3141 and open it in the browser. The UI will be pre-populated with any brand data, headlines, and screenshots already set via MCP tools. The user can review, adjust, and generate from there.',
+  {
+    skip_to_step: z.number().optional().describe('Step to open at: 0=project, 1=brand, 2=template, 3=screenshots, 4=headlines, 5=preview, 6=license, 7=generate'),
+  },
+  async ({ skip_to_step }) => {
+    const { startServer } = require('../server');
+
+    // Store the skip-to step so the frontend can read it
+    session._skipToStep = skip_to_step || null;
+
+    // Start the server (it auto-opens the browser)
+    startServer();
+
+    const parts = [];
+    if (session.brand) parts.push('brand detection');
+    if (session.approvedTexts.length) parts.push(`${session.approvedTexts.length} headlines`);
+    if (session.screenshots.length) parts.push(`${session.screenshots.length} screenshots`);
+    if (session.selectedTemplate) parts.push(`template: ${session.selectedTemplate}`);
+
+    return {
+      content: [{
+        type: 'text',
+        text: `ScreenCraft UI opened at http://localhost:3141\n${parts.length ? 'Pre-loaded: ' + parts.join(', ') : 'Starting fresh.'}`,
+      }],
+    };
+  }
+);
+
+// ── Tool: get_session_status ──────────────────────────────────────
+server.tool(
+  'get_session_status',
+  'Check the current state of the ScreenCraft session — what has been configured and what is still needed.',
+  {},
+  async () => {
+    const status = {
+      project:      session.projectPath || 'not set',
+      brand:        session.brand ? 'detected' : 'not detected',
+      appName:      session.brand?.appName || null,
+      colors:       session.brand ? {
+        primary:    session.brand.primary,
+        accent:     session.brand.accent,
+      } : null,
+      template:     session.selectedTemplate || 'auto',
+      screenshots:  `${session.screenshots.length} captured`,
+      headlines:    `${session.approvedTexts.length} set`,
+      renderStatus: session.renderStatus.phase,
+    };
+
+    const needed = [];
+    if (!session.brand) needed.push('Run detect_brand with the project path');
+    if (!session.screenshots.length) needed.push('Capture screenshots (open_ui or place PNGs in screenshots/ folder)');
+    if (!session.approvedTexts.length) needed.push('Set headlines with set_headlines');
+
+    return {
+      content: [{
+        type: 'text',
+        text: JSON.stringify(status, null, 2) +
+          (needed.length ? '\n\nStill needed:\n' + needed.map(n => `  - ${n}`).join('\n') : '\n\nReady to generate! Call open_ui or generate_launch_kit.'),
+      }],
+    };
+  }
+);
+
+// ── Tool: generate_launch_kit ─────────────────────────────────────
+server.tool(
+  'generate_launch_kit',
+  'Generate the full launch kit (composited App Store screenshots, PSDs, and optionally AE project + video). Requires brand detection, screenshots, and headlines to be set first. Returns paths to all generated files.',
+  {
+    screenshots_only: z.boolean().optional().describe('If true, skip video/AE generation (free tier). Default: true'),
+  },
+  async ({ screenshots_only = true }) => {
+    if (!session.brand || !session.screenshots.length || !session.approvedTexts.length) {
+      const missing = [];
+      if (!session.brand) missing.push('brand (run detect_brand)');
+      if (!session.screenshots.length) missing.push('screenshots (capture via UI or screenshots/ folder)');
+      if (!session.approvedTexts.length) missing.push('headlines (run set_headlines)');
+      return {
+        content: [{ type: 'text', text: `Cannot generate — missing: ${missing.join(', ')}` }],
+      };
+    }
+
+    const outputs = [];
+
+    try {
+      // Composite PSD/PNGs
+      for (let i = 0; i < session.screenshots.length; i++) {
+        const screen = session.screenshots[i];
+        const text   = session.approvedTexts[i];
+        if (!text) continue;
+
+        const outPng = path.join(session.outputDir, 'screenshots', `screen_${String(i + 1).padStart(2, '0')}.png`);
+        const outPsd = path.join(session.outputDir, 'source',      `screen_${String(i + 1).padStart(2, '0')}.psd`);
+
+        await compositePSD({
+          templateName:   session.selectedTemplate,
+          screenshotPath: screen.file,
+          headlineWhite:  text.white,
+          headlineAccent: text.accent,
+          brand:          session.brand,
+          font:           session.brand.font || {},
+          outputPng:      outPng,
+          outputPsd:      outPsd,
+          writePsd:       !screenshots_only,
+        });
+
+        outputs.push(outPng);
+        if (!screenshots_only) outputs.push(outPsd);
+      }
+
+      // Copy brand assets
+      const assetsDir = path.join(session.outputDir, 'brand');
+      fs.mkdirSync(assetsDir, { recursive: true });
+      if (session.brand.icon && fs.existsSync(session.brand.icon)) {
+        fs.copyFileSync(session.brand.icon, path.join(assetsDir, `app-icon${path.extname(session.brand.icon)}`));
+      }
+
+      // AE project if not screenshots-only
+      if (!screenshots_only) {
+        try {
+          const ae = await prepareAEProject({
+            brand:       session.brand,
+            texts:       session.approvedTexts,
+            screenshots: session.screenshots,
+            outputDir:   session.outputDir,
+            log,
+          });
+          if (ae.aepPath) outputs.push(ae.aepPath);
+
+          if (ae.canRender) {
+            try {
+              const videoPath = await renderLocally({
+                aepPath:   ae.aepPath,
+                outputDir: session.outputDir,
+              });
+              if (videoPath) outputs.push(videoPath);
+            } catch {}
+          }
+        } catch {}
+      }
+
+      return {
+        content: [{
+          type: 'text',
+          text: `Launch kit generated!\n\nOutput directory: ${session.outputDir}\n\nFiles:\n${outputs.map(f => '  ' + f).join('\n')}`,
+        }],
+      };
+    } catch (err) {
+      return {
+        content: [{ type: 'text', text: `Generation failed: ${err.message}` }],
+      };
+    }
+  }
+);
+
+// ── Start MCP Server ──────────────────────────────────────────────
+async function startMCP() {
+  const transport = new StdioServerTransport();
+  await server.connect(transport);
+}
+
+module.exports = { startMCP };