codictor-mcp 1.0.0

package/README.md

@@ -0,0 +1,96 @@
+# Codictor MCP
+
+Convert screenshots to React + Tailwind code that uses YOUR project's design system.
+
+## Features
+
+- **Auto-reads tailwind.config.js** - Uses your exact colors, fonts, spacing
+- **Detects existing components** - Reuses your Button, Card, etc.
+- **True responsive code** - Mobile-first with proper breakpoints
+- **Claude Vision powered** - High-quality code generation
+
+## Installation
+
+```bash
+npm install -g codictor-mcp
+```
+
+Or install locally:
+
+```bash
+npm install
+npm run build
+```
+
+## Setup
+
+Add to your IDE's MCP config:
+
+### Cursor (~/.cursor/mcp.json)
+
+```json
+{
+  "mcpServers": {
+    "codictor": {
+      "command": "codictor-mcp",
+      "env": {
+        "ANTHROPIC_API_KEY": "sk-ant-your-key-here"
+      }
+    }
+  }
+}
+```
+
+### Claude Code
+
+```bash
+claude mcp add codictor codictor-mcp -e ANTHROPIC_API_KEY=sk-ant-your-key-here
+```
+
+## Usage
+
+In Cursor or Claude Code:
+
+```
+Convert this screenshot to code: /path/to/screenshot.png
+```
+
+Or:
+
+```
+Analyze my design system
+```
+
+## Tools
+
+### screenshot_to_code
+
+Converts a screenshot to React + Tailwind code.
+
+- `image_path` (required): Path to screenshot
+- `project_path` (optional): Project root directory
+
+### analyze_design_system
+
+Shows what design tokens and components will be used.
+
+- `project_path` (optional): Project root directory
+
+## Environment Variables
+
+The server supports these environment variables:
+
+- `ANTHROPIC_API_KEY` - Your Anthropic API key
+- `AI_INTEGRATIONS_ANTHROPIC_API_KEY` - Replit AI Integrations key (preferred on Replit)
+- `AI_INTEGRATIONS_ANTHROPIC_BASE_URL` - Replit AI Integrations base URL
+
+## How It Works
+
+1. Reads your `tailwind.config.js` to understand your design tokens
+2. Scans common component directories to find existing components
+3. Sends the screenshot to Claude Vision with your design context
+4. Returns production-ready React + Tailwind code using YOUR design system
+
+## License
+
+MIT

package/dist/index.d.ts

@@ -0,0 +1,2 @@
+#!/usr/bin/env node
+export {};

package/dist/index.js

@@ -0,0 +1,290 @@
+#!/usr/bin/env node
+import { Server } from "@modelcontextprotocol/sdk/server/index.js";
+import { StdioServerTransport } from "@modelcontextprotocol/sdk/server/stdio.js";
+import { CallToolRequestSchema, ListToolsRequestSchema, } from "@modelcontextprotocol/sdk/types.js";
+import Anthropic from "@anthropic-ai/sdk";
+import * as fs from "fs";
+import * as path from "path";
+const anthropic = new Anthropic({
+    apiKey: process.env.AI_INTEGRATIONS_ANTHROPIC_API_KEY || process.env.ANTHROPIC_API_KEY,
+    ...(process.env.AI_INTEGRATIONS_ANTHROPIC_BASE_URL && {
+        baseURL: process.env.AI_INTEGRATIONS_ANTHROPIC_BASE_URL,
+    }),
+});
+function buildSystemPrompt(tailwindConfig, existingComponents) {
+    const configSection = tailwindConfig.trim()
+        ? `The user's tailwind.config.js:
+\`\`\`javascript
+${tailwindConfig}
+\`\`\`
+Use their EXACT color names, font families, spacing, and border-radius values. If they define \`primary\` use \`bg-primary\` not \`bg-blue-500\`. If they define custom fonts, use those font classes.`
+        : "No custom config provided. Use standard Tailwind defaults.";
+    const componentsSection = existingComponents.length > 0
+        ? `\n\nEXISTING COMPONENTS IN PROJECT:
+The user already has these components: ${existingComponents.join(", ")}
+Import and USE these existing components instead of creating new ones with the same purpose.`
+        : "";
+    return `You are Codictor, an expert frontend developer converting screenshots to production-ready React + Tailwind code.
+
+THREE REQUIREMENTS:
+
+1. USE THE USER'S DESIGN SYSTEM
+${configSection}
+
+2. EXTRACT REUSABLE COMPONENTS
+Identify UI patterns and create named React components:
+- Buttons as <Button variant="primary|secondary|ghost" size="sm|md|lg">
+- Cards as <Card title="" subtitle="" image="">
+- Inputs as <Input label="" placeholder="" type="">
+- Navigation as <NavLink href="" active="">
+- Any repeated patterns as named components with props
+
+Structure output as: First define all extracted components, then the main page/layout using those components.
+${componentsSection}
+
+3. TRUE RESPONSIVE CODE (Mobile-First)
+Generate code that works perfectly at THREE breakpoints:
+- Phone (375px): base styles, single column, larger touch targets
+- Tablet (768px): md: prefix, 2 columns where appropriate
+- Desktop (1280px): lg: and xl: prefixes, full layout
+
+ALWAYS include responsive classes for:
+- Layout: flex-col md:flex-row, grid-cols-1 md:grid-cols-2 lg:grid-cols-3
+- Spacing: p-4 md:p-6 lg:p-8, gap-4 md:gap-6
+- Typography: text-sm md:text-base lg:text-lg
+- Visibility: hidden md:block, md:hidden
+
+OUTPUT FORMAT: Return ONLY valid JSX code. No markdown, no explanation, no code fence blocks. Start directly with component definitions, end with the default export. Make it pixel-perfect to the screenshot while being fully responsive.`;
+}
+function findTailwindConfig(projectPath) {
+    const possiblePaths = [
+        "tailwind.config.js",
+        "tailwind.config.ts",
+        "tailwind.config.mjs",
+        "tailwind.config.cjs",
+    ];
+    for (const configFile of possiblePaths) {
+        const fullPath = path.join(projectPath, configFile);
+        if (fs.existsSync(fullPath)) {
+            try {
+                return fs.readFileSync(fullPath, "utf-8");
+            }
+            catch (e) {
+                console.error(`Error reading ${fullPath}:`, e);
+            }
+        }
+    }
+    return "";
+}
+function findExistingComponents(projectPath) {
+    const components = [];
+    const componentDirs = [
+        "components",
+        "src/components",
+        "app/components",
+        "lib/components",
+    ];
+    for (const dir of componentDirs) {
+        const fullPath = path.join(projectPath, dir);
+        if (fs.existsSync(fullPath)) {
+            try {
+                const files = fs.readdirSync(fullPath);
+                for (const file of files) {
+                    const match = file.match(/^([A-Z][a-zA-Z0-9]*)\.(tsx?|jsx?)$/);
+                    if (match) {
+                        components.push(match[1]);
+                    }
+                }
+            }
+            catch (e) {
+                console.error(`Error reading ${fullPath}:`, e);
+            }
+        }
+    }
+    return [...new Set(components)];
+}
+function readImageAsBase64(imagePath) {
+    const absolutePath = path.resolve(imagePath);
+    if (!fs.existsSync(absolutePath)) {
+        throw new Error(`Image file not found: ${absolutePath}`);
+    }
+    const buffer = fs.readFileSync(absolutePath);
+    const base64 = buffer.toString("base64");
+    const ext = path.extname(imagePath).toLowerCase();
+    const mediaTypes = {
+        ".png": "image/png",
+        ".jpg": "image/jpeg",
+        ".jpeg": "image/jpeg",
+        ".webp": "image/webp",
+        ".gif": "image/gif",
+    };
+    const mediaType = mediaTypes[ext] || "image/png";
+    return { data: base64, mediaType };
+}
+async function convertScreenshotToCode(imagePath, projectPath = process.cwd()) {
+    const tailwindConfig = findTailwindConfig(projectPath);
+    const existingComponents = findExistingComponents(projectPath);
+    const { data: base64Data, mediaType } = readImageAsBase64(imagePath);
+    const response = await anthropic.messages.create({
+        model: "claude-sonnet-4-5",
+        max_tokens: 8000,
+        system: buildSystemPrompt(tailwindConfig, existingComponents),
+        messages: [
+            {
+                role: "user",
+                content: [
+                    {
+                        type: "image",
+                        source: {
+                            type: "base64",
+                            media_type: mediaType,
+                            data: base64Data,
+                        },
+                    },
+                    {
+                        type: "text",
+                        text: "Convert this screenshot to React + Tailwind code following the system instructions.",
+                    },
+                ],
+            },
+        ],
+    });
+    const textBlock = response.content.find((block) => block.type === "text");
+    if (!textBlock || textBlock.type !== "text") {
+        throw new Error("No text response from Claude");
+    }
+    let code = textBlock.text
+        .replace(/^```(?:jsx|javascript|tsx|js)?\n?/gm, "")
+        .replace(/```$/gm, "")
+        .trim();
+    return code;
+}
+const server = new Server({
+    name: "codictor-mcp",
+    version: "1.0.0",
+}, {
+    capabilities: {
+        tools: {},
+    },
+});
+server.setRequestHandler(ListToolsRequestSchema, async () => {
+    return {
+        tools: [
+            {
+                name: "screenshot_to_code",
+                description: "Convert a screenshot to React + Tailwind code using your project's design system. Automatically reads your tailwind.config.js and existing components.",
+                inputSchema: {
+                    type: "object",
+                    properties: {
+                        image_path: {
+                            type: "string",
+                            description: "Path to the screenshot image file (PNG, JPG, or WebP)",
+                        },
+                        project_path: {
+                            type: "string",
+                            description: "Path to the project root (optional, defaults to current directory). Used to find tailwind.config.js and existing components.",
+                        },
+                    },
+                    required: ["image_path"],
+                },
+            },
+            {
+                name: "analyze_design_system",
+                description: "Analyze the current project's design system without converting a screenshot. Shows what colors, fonts, and components will be used.",
+                inputSchema: {
+                    type: "object",
+                    properties: {
+                        project_path: {
+                            type: "string",
+                            description: "Path to the project root (optional, defaults to current directory)",
+                        },
+                    },
+                },
+            },
+        ],
+    };
+});
+server.setRequestHandler(CallToolRequestSchema, async (request) => {
+    const { name, arguments: args } = request.params;
+    if (name === "screenshot_to_code") {
+        const imagePath = args?.image_path;
+        const projectPath = args?.project_path || process.cwd();
+        if (!imagePath) {
+            return {
+                content: [
+                    {
+                        type: "text",
+                        text: "Error: image_path is required",
+                    },
+                ],
+            };
+        }
+        try {
+            const code = await convertScreenshotToCode(imagePath, projectPath);
+            return {
+                content: [
+                    {
+                        type: "text",
+                        text: code,
+                    },
+                ],
+            };
+        }
+        catch (error) {
+            const message = error instanceof Error ? error.message : String(error);
+            return {
+                content: [
+                    {
+                        type: "text",
+                        text: `Error: ${message}`,
+                    },
+                ],
+            };
+        }
+    }
+    if (name === "analyze_design_system") {
+        const projectPath = args?.project_path || process.cwd();
+        const tailwindConfig = findTailwindConfig(projectPath);
+        const existingComponents = findExistingComponents(projectPath);
+        let analysis = "# Design System Analysis\n\n";
+        if (tailwindConfig) {
+            analysis += "## Tailwind Config Found ✓\n\n";
+            analysis += "```javascript\n" + tailwindConfig + "\n```\n\n";
+        }
+        else {
+            analysis += "## No Tailwind Config Found\n\n";
+            analysis += "Will use standard Tailwind defaults.\n\n";
+        }
+        if (existingComponents.length > 0) {
+            analysis += "## Existing Components Found ✓\n\n";
+            analysis += existingComponents.map((c) => `- ${c}`).join("\n");
+            analysis += "\n\nThese components will be imported and reused.\n";
+        }
+        else {
+            analysis += "## No Existing Components Found\n\n";
+            analysis += "New components will be created as needed.\n";
+        }
+        return {
+            content: [
+                {
+                    type: "text",
+                    text: analysis,
+                },
+            ],
+        };
+    }
+    return {
+        content: [
+            {
+                type: "text",
+                text: `Unknown tool: ${name}`,
+            },
+        ],
+    };
+});
+async function main() {
+    const transport = new StdioServerTransport();
+    await server.connect(transport);
+    console.error("Codictor MCP server running on stdio");
+}
+main().catch(console.error);

package/package.json

@@ -0,0 +1,32 @@
+{
+  "name": "codictor-mcp",
+  "version": "1.0.0",
+  "description": "Screenshot to code MCP that uses your project's design system",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "type": "module",
+  "bin": {
+    "codictor-mcp": "./dist/index.js"
+  },
+  "scripts": {
+    "build": "tsc",
+    "start": "node dist/index.js",
+    "dev": "tsc && node dist/index.js"
+  },
+  "keywords": [
+    "mcp",
+    "screenshot",
+    "tailwind",
+    "react",
+    "code-generation"
+  ],
+  "license": "MIT",
+  "dependencies": {
+    "@anthropic-ai/sdk": "^0.71.2",
+    "@modelcontextprotocol/sdk": "^1.25.3"
+  },
+  "devDependencies": {
+    "@types/node": "^20.19.30",
+    "typescript": "^5.9.3"
+  }
+}