figma-code-agent-mcp 1.0.0

package/dist/assetServer.d.ts

@@ -0,0 +1,34 @@
+declare class AssetServer {
+    private server;
+    private assets;
+    private port;
+    private isInitialized;
+    initialize(config?: {
+        port?: number;
+    }): void;
+    /**
+     * Store an asset and return its URL
+     * @param base64Data Base64-encoded image data
+     * @param format Image format (png, svg, jpg)
+     * @returns URL to access the asset
+     */
+    storeAsset(base64Data: string, format: 'png' | 'svg' | 'jpg'): string;
+    /**
+     * Get the base URL for the asset server
+     */
+    getBaseUrl(): string;
+    /**
+     * Clear all stored assets (useful for cleanup)
+     */
+    clearAssets(): void;
+    /**
+     * Get the number of stored assets
+     */
+    getAssetCount(): number;
+    /**
+     * Close the server
+     */
+    close(): void;
+}
+export declare const assetServer: AssetServer;
+export {};

package/dist/assetServer.js

@@ -0,0 +1,168 @@
+import http from 'http';
+import { v4 as uuidv4 } from 'uuid';
+import { figmaWebSocket } from './websocket.js';
+const DEFAULT_PORT = 3845;
+const MAX_ASSET_SIZE = 10 * 1024 * 1024; // 10MB per asset
+const MAX_ASSETS = 100;
+class AssetServer {
+    server = null;
+    assets = new Map();
+    port = DEFAULT_PORT;
+    isInitialized = false;
+    initialize(config) {
+        if (this.isInitialized) {
+            return;
+        }
+        this.port = config?.port || DEFAULT_PORT;
+        this.server = http.createServer((req, res) => {
+            // Enable CORS
+            req.socket.setTimeout(30000);
+            res.setHeader('Access-Control-Allow-Origin', `http://localhost:${this.port}`);
+            res.setHeader('Access-Control-Allow-Methods', 'GET, POST, OPTIONS');
+            res.setHeader('Access-Control-Allow-Headers', 'Content-Type');
+            if (req.method === 'OPTIONS') {
+                res.writeHead(200);
+                res.end();
+                return;
+            }
+            const url = req.url || '';
+            // GET /api/status — health check
+            if (req.method === 'GET' && url === '/api/status') {
+                res.writeHead(200, { 'Content-Type': 'application/json' });
+                res.end(JSON.stringify({
+                    server: 'ok',
+                    figmaConnected: figmaWebSocket.isConnected(),
+                    editorType: figmaWebSocket.getEditorType(),
+                }));
+                return;
+            }
+            // POST /api/capture — forward create command to Figma
+            if (req.method === 'POST' && url === '/api/capture') {
+                let body = '';
+                let size = 0;
+                const MAX_BODY = 5 * 1024 * 1024; // 5MB
+                req.on('data', (chunk) => {
+                    size += chunk.length;
+                    if (size > MAX_BODY) {
+                        res.writeHead(413, { 'Content-Type': 'application/json' });
+                        res.end(JSON.stringify({ error: 'Payload too large' }));
+                        req.destroy();
+                        return;
+                    }
+                    body += chunk.toString();
+                });
+                req.on('end', async () => {
+                    try {
+                        const payload = JSON.parse(body);
+                        const result = await figmaWebSocket.sendCommand('create', payload);
+                        res.writeHead(200, { 'Content-Type': 'application/json' });
+                        res.end(JSON.stringify({ success: true, result }));
+                    }
+                    catch (error) {
+                        const message = error instanceof Error ? error.message : 'Unknown error';
+                        res.writeHead(500, { 'Content-Type': 'application/json' });
+                        res.end(JSON.stringify({ success: false, error: message }));
+                    }
+                });
+                return;
+            }
+            // GET /assets/* — existing asset serving
+            if (req.method === 'GET') {
+                const match = url.match(/^\/assets\/([a-f0-9-]+)\.(png|svg|jpg)$/i);
+                if (!match) {
+                    res.writeHead(404);
+                    res.end('Not Found');
+                    return;
+                }
+                const assetId = match[1];
+                const asset = this.assets.get(assetId);
+                if (!asset) {
+                    res.writeHead(404);
+                    res.end('Asset Not Found');
+                    return;
+                }
+                res.writeHead(200, {
+                    'Content-Type': asset.mimeType,
+                    'Content-Length': asset.data.length,
+                    'Cache-Control': 'public, max-age=3600',
+                });
+                res.end(asset.data);
+                return;
+            }
+            res.writeHead(404);
+            res.end('Not Found');
+        });
+        this.server.on('error', (error) => {
+            if (error.code === 'EADDRINUSE') {
+                console.error(`[AssetServer] Port ${this.port} is already in use. Assets will not be served.`);
+            }
+            else {
+                console.error('[AssetServer] Error:', error);
+            }
+        });
+        this.server.listen(this.port, '127.0.0.1', () => {
+            console.error(`[AssetServer] Listening on 127.0.0.1:${this.port}`);
+        });
+        this.isInitialized = true;
+    }
+    /**
+     * Store an asset and return its URL
+     * @param base64Data Base64-encoded image data
+     * @param format Image format (png, svg, jpg)
+     * @returns URL to access the asset
+     */
+    storeAsset(base64Data, format) {
+        if (this.assets.size >= MAX_ASSETS) {
+            // Evict oldest asset
+            const firstKey = this.assets.keys().next().value;
+            if (firstKey)
+                this.assets.delete(firstKey);
+        }
+        const id = uuidv4();
+        const buffer = Buffer.from(base64Data, 'base64');
+        if (buffer.length > MAX_ASSET_SIZE) {
+            throw new Error(`Asset exceeds maximum size of ${MAX_ASSET_SIZE / 1024 / 1024}MB`);
+        }
+        const mimeTypes = {
+            png: 'image/png',
+            svg: 'image/svg+xml',
+            jpg: 'image/jpeg',
+        };
+        this.assets.set(id, {
+            data: buffer,
+            mimeType: mimeTypes[format] || 'application/octet-stream',
+        });
+        return `${this.getBaseUrl()}/assets/${id}.${format}`;
+    }
+    /**
+     * Get the base URL for the asset server
+     */
+    getBaseUrl() {
+        return `http://localhost:${this.port}`;
+    }
+    /**
+     * Clear all stored assets (useful for cleanup)
+     */
+    clearAssets() {
+        this.assets.clear();
+    }
+    /**
+     * Get the number of stored assets
+     */
+    getAssetCount() {
+        return this.assets.size;
+    }
+    /**
+     * Close the server
+     */
+    close() {
+        if (this.server) {
+            this.server.close();
+            this.server = null;
+            this.isInitialized = false;
+            this.assets.clear();
+        }
+    }
+}
+// Singleton instance
+export const assetServer = new AssetServer();

package/dist/codeGenerator/componentDetector.d.ts

@@ -0,0 +1,57 @@
+/**
+ * Detects Figma components and generates TypeScript props from variants
+ */
+import { FigmaNode } from './jsxGenerator.js';
+export interface VariantProperty {
+    name: string;
+    values: string[];
+    propName: string;
+}
+export interface ComponentInfo {
+    name: string;
+    componentName: string;
+    description?: string;
+    documentationLinks?: Array<{
+        uri: string;
+    }>;
+    variantProperties?: VariantProperty[];
+    propsInterface?: string;
+    defaultProps?: Record<string, string>;
+}
+export interface DetectedComponent {
+    info: ComponentInfo;
+    instances: string[];
+}
+/**
+ * Detect all component instances in the node tree
+ */
+export declare function detectComponentInstances(node: FigmaNode): Map<string, DetectedComponent>;
+/**
+ * Generate TypeScript props interface for a component
+ */
+export declare function generatePropsInterface(component: ComponentInfo): string;
+/**
+ * Generate a stub component with variant support
+ */
+export declare function generateComponentStub(component: ComponentInfo): string;
+export interface NestedComponentImplementation {
+    name: string;
+    componentName: string;
+    code: string;
+    description?: string;
+    documentationLinks?: Array<{
+        uri: string;
+    }>;
+}
+/**
+ * Generate implementations for all detected components
+ */
+export declare function generateNestedComponentImplementations(components: Map<string, DetectedComponent>): NestedComponentImplementation[];
+/**
+ * Collect component information for the output metadata
+ */
+export declare function collectComponentMetadata(components: Map<string, DetectedComponent>): ComponentInfo[];
+/**
+ * Extract variant properties from a COMPONENT_SET node
+ */
+export declare function extractVariantPropertiesFromSet(node: FigmaNode): Record<string, string[]> | undefined;

package/dist/codeGenerator/componentDetector.js

@@ -0,0 +1,171 @@
+/**
+ * Detects Figma components and generates TypeScript props from variants
+ */
+import { toComponentName, toVariableName } from './jsxGenerator.js';
+/**
+ * Detect all component instances in the node tree
+ */
+export function detectComponentInstances(node) {
+    const components = new Map();
+    function traverse(n) {
+        if (n.type === 'INSTANCE' && n.componentName) {
+            const key = n.componentName;
+            if (!components.has(key)) {
+                components.set(key, {
+                    info: {
+                        name: n.componentName,
+                        componentName: toComponentName(n.componentName),
+                        description: n.componentDescription,
+                        documentationLinks: n.componentDocumentationLinks,
+                        variantProperties: [],
+                    },
+                    instances: [],
+                });
+            }
+            const component = components.get(key);
+            component.instances.push(n.id);
+            // Collect variant properties from this instance
+            if (n.variantProperties) {
+                for (const [propName, value] of Object.entries(n.variantProperties)) {
+                    let variantProp = component.info.variantProperties?.find((p) => p.name === propName);
+                    if (!variantProp) {
+                        variantProp = {
+                            name: propName,
+                            values: [],
+                            propName: toVariableName(propName),
+                        };
+                        component.info.variantProperties?.push(variantProp);
+                    }
+                    if (!variantProp.values.includes(value)) {
+                        variantProp.values.push(value);
+                    }
+                }
+            }
+        }
+        // Recurse into children
+        if (n.children) {
+            for (const child of n.children) {
+                traverse(child);
+            }
+        }
+    }
+    traverse(node);
+    return components;
+}
+/**
+ * Generate TypeScript props interface for a component
+ */
+export function generatePropsInterface(component) {
+    const lines = [];
+    const typeName = `${component.componentName}Props`;
+    lines.push(`type ${typeName} = {`);
+    lines.push('  className?: string;');
+    if (component.variantProperties && component.variantProperties.length > 0) {
+        for (const prop of component.variantProperties) {
+            const values = prop.values.map((v) => `"${v}"`).join(' | ');
+            lines.push(`  ${prop.propName}?: ${values};`);
+        }
+    }
+    lines.push('};');
+    return lines.join('\n');
+}
+/**
+ * Generate a stub component with variant support
+ */
+export function generateComponentStub(component) {
+    const lines = [];
+    const typeName = `${component.componentName}Props`;
+    // Props interface
+    lines.push(generatePropsInterface(component));
+    lines.push('');
+    // Component function
+    const defaultValues = [];
+    if (component.variantProperties && component.variantProperties.length > 0) {
+        for (const prop of component.variantProperties) {
+            if (prop.values.length > 0) {
+                defaultValues.push(`${prop.propName} = "${prop.values[0]}"`);
+            }
+        }
+    }
+    const propsDestructure = defaultValues.length > 0
+        ? `{ className, ${defaultValues.join(', ')} }`
+        : '{ className }';
+    lines.push(`function ${component.componentName}(${propsDestructure}: ${typeName}) {`);
+    // Generate variant-based className logic
+    if (component.variantProperties && component.variantProperties.length > 0) {
+        lines.push('  // Variant-based styling');
+        lines.push('  const baseClasses = ""; // Add base styles');
+        for (const prop of component.variantProperties) {
+            const varName = prop.propName + 'Classes';
+            lines.push(`  const ${varName} = {`);
+            for (const value of prop.values) {
+                lines.push(`    "${value}": "", // Add ${prop.name}=${value} styles`);
+            }
+            lines.push('  };');
+        }
+        lines.push('');
+    }
+    lines.push('  return (');
+    if (component.variantProperties && component.variantProperties.length > 0) {
+        const classExpr = component.variantProperties
+            .map(p => `\${${p.propName}Classes[${p.propName}]}`)
+            .join(' ');
+        lines.push(`    <div className={\`\${baseClasses} ${classExpr} \${className ?? ""}\`}>`);
+    }
+    else {
+        lines.push(`    <div className={className ?? ""}>`);
+    }
+    lines.push(`      {/* ${component.name} content */}`);
+    lines.push('    </div>');
+    lines.push('  );');
+    lines.push('}');
+    return lines.join('\n');
+}
+/**
+ * Generate implementations for all detected components
+ */
+export function generateNestedComponentImplementations(components) {
+    const implementations = [];
+    for (const [, component] of components) {
+        const code = generateComponentStub(component.info);
+        implementations.push({
+            name: component.info.name,
+            componentName: component.info.componentName,
+            code,
+            description: component.info.description,
+            documentationLinks: component.info.documentationLinks,
+        });
+    }
+    return implementations;
+}
+/**
+ * Collect component information for the output metadata
+ */
+export function collectComponentMetadata(components) {
+    const result = [];
+    for (const [, component] of components) {
+        const info = { ...component.info };
+        // Generate the props interface
+        info.propsInterface = generatePropsInterface(info);
+        // Set default props
+        if (info.variantProperties && info.variantProperties.length > 0) {
+            info.defaultProps = {};
+            for (const prop of info.variantProperties) {
+                if (prop.values.length > 0) {
+                    info.defaultProps[prop.propName] = prop.values[0];
+                }
+            }
+        }
+        result.push(info);
+    }
+    return result;
+}
+/**
+ * Extract variant properties from a COMPONENT_SET node
+ */
+export function extractVariantPropertiesFromSet(node) {
+    if (node.type !== 'COMPONENT_SET') {
+        return undefined;
+    }
+    return node.variantGroupProperties;
+}

package/dist/codeGenerator/index.d.ts

@@ -0,0 +1,77 @@
+/**
+ * Code Generator - Main orchestrator
+ *
+ * Combines style conversion, JSX generation, and component detection
+ * to produce React + Tailwind code from Figma designs.
+ */
+import { FigmaNode } from './jsxGenerator.js';
+import { ComponentInfo } from './componentDetector.js';
+export interface DesignContextInput {
+    node: FigmaNode;
+    images?: Record<string, {
+        data: string;
+        format: string;
+    }>;
+    tokens?: {
+        colors?: Array<{
+            name: string;
+            value: string;
+            opacity?: number;
+        }>;
+        typography?: Array<{
+            name: string;
+            fontFamily: string;
+            fontStyle: string;
+            fontSize: number;
+            lineHeight?: unknown;
+            letterSpacing?: unknown;
+        }>;
+        effects?: Array<{
+            name: string;
+            effects: unknown[];
+        }>;
+    };
+}
+export interface GenerateOptions {
+    generateNestedComponents?: boolean;
+}
+export interface NestedComponentImpl {
+    name: string;
+    code: string;
+    description?: string;
+    documentationLinks?: Array<{
+        uri: string;
+    }>;
+}
+export interface DesignContextOutput {
+    code: string;
+    componentName: string;
+    components: ComponentInfo[];
+    nestedComponents?: NestedComponentImpl[];
+    tokens: {
+        colors: Array<{
+            name: string;
+            value: string;
+        }>;
+        typography: Array<{
+            name: string;
+            fontFamily: string;
+            fontSize: number;
+        }>;
+    };
+    assets: Array<{
+        nodeId: string;
+        url: string;
+    }>;
+}
+/**
+ * Main function to generate code from Figma design context
+ */
+export declare function generateDesignContext(input: DesignContextInput, options?: GenerateOptions): DesignContextOutput;
+/**
+ * Format the output for the MCP tool response
+ */
+export declare function formatDesignContextResponse(output: DesignContextOutput, nodeId: string): string;
+export { FigmaNode } from './jsxGenerator.js';
+export { ComponentInfo } from './componentDetector.js';
+export { rgbToHex } from './styleConverter.js';

package/dist/codeGenerator/index.js

@@ -0,0 +1,184 @@
+/**
+ * Code Generator - Main orchestrator
+ *
+ * Combines style conversion, JSX generation, and component detection
+ * to produce React + Tailwind code from Figma designs.
+ */
+import { assetServer } from '../assetServer.js';
+import { generateComponent, toComponentName } from './jsxGenerator.js';
+import { detectComponentInstances, collectComponentMetadata, generateNestedComponentImplementations, } from './componentDetector.js';
+/**
+ * Process images and store them in the asset server
+ */
+function processImages(images) {
+    const imageUrls = new Map();
+    if (!images) {
+        return imageUrls;
+    }
+    for (const [nodeId, imageData] of Object.entries(images)) {
+        const format = imageData.format;
+        const url = assetServer.storeAsset(imageData.data, format);
+        imageUrls.set(nodeId, url);
+    }
+    return imageUrls;
+}
+/**
+ * Process design tokens from Figma
+ */
+function processTokens(tokens) {
+    const result = {
+        colors: [],
+        typography: [],
+    };
+    if (!tokens) {
+        return result;
+    }
+    // Process colors
+    if (tokens.colors) {
+        for (const color of tokens.colors) {
+            result.colors.push({
+                name: color.name,
+                value: color.value,
+            });
+        }
+    }
+    // Process typography
+    if (tokens.typography) {
+        for (const typo of tokens.typography) {
+            result.typography.push({
+                name: typo.name,
+                fontFamily: typo.fontFamily,
+                fontSize: typo.fontSize,
+            });
+        }
+    }
+    return result;
+}
+/**
+ * Main function to generate code from Figma design context
+ */
+export function generateDesignContext(input, options = {}) {
+    const { node, images, tokens } = input;
+    const { generateNestedComponents = true } = options;
+    // Process and store images
+    const imageUrls = processImages(images);
+    // Detect component instances
+    const detectedComponents = detectComponentInstances(node);
+    const componentMetadata = collectComponentMetadata(detectedComponents);
+    // Generate the main component
+    const componentName = toComponentName(node.name) || 'Component';
+    const generatedComponent = generateComponent(node, imageUrls, componentName);
+    // Generate nested component implementations if requested
+    let nestedComponents;
+    if (generateNestedComponents && detectedComponents.size > 0) {
+        const implementations = generateNestedComponentImplementations(detectedComponents);
+        nestedComponents = implementations.map(impl => ({
+            name: impl.componentName,
+            code: impl.code,
+            description: impl.description,
+            documentationLinks: impl.documentationLinks,
+        }));
+    }
+    // Process tokens
+    const processedTokens = processTokens(tokens);
+    // Build assets list
+    const assets = [];
+    for (const [nodeId, url] of imageUrls) {
+        assets.push({ nodeId, url });
+    }
+    return {
+        code: generatedComponent.code,
+        componentName: generatedComponent.name,
+        components: componentMetadata,
+        nestedComponents,
+        tokens: processedTokens,
+        assets,
+    };
+}
+/**
+ * Format the output for the MCP tool response
+ */
+export function formatDesignContextResponse(output, nodeId) {
+    const sections = [];
+    // Generated React code
+    sections.push('## Generated React + Tailwind Code\n');
+    sections.push('```tsx');
+    sections.push(output.code);
+    sections.push('```\n');
+    // Nested component implementations
+    if (output.nestedComponents && output.nestedComponents.length > 0) {
+        sections.push('## Nested Component Implementations\n');
+        sections.push('The following components are used in this design:\n');
+        for (const comp of output.nestedComponents) {
+            sections.push(`### ${comp.name}`);
+            if (comp.description) {
+                sections.push(`\n${comp.description}\n`);
+            }
+            if (comp.documentationLinks && comp.documentationLinks.length > 0) {
+                sections.push('**Documentation:**');
+                for (const link of comp.documentationLinks) {
+                    sections.push(`- ${link.uri}`);
+                }
+                sections.push('');
+            }
+            sections.push('```tsx');
+            sections.push(comp.code);
+            sections.push('```\n');
+        }
+    }
+    // Component prop types (for components without full implementations)
+    if (output.components.length > 0) {
+        const componentsWithoutImpl = output.components.filter(c => !output.nestedComponents?.some(nc => nc.name === c.componentName));
+        if (componentsWithoutImpl.length > 0) {
+            sections.push('## Component Types\n');
+            for (const comp of componentsWithoutImpl) {
+                sections.push(`### ${comp.componentName}`);
+                if (comp.description) {
+                    sections.push(`\n${comp.description}`);
+                }
+                if (comp.documentationLinks && comp.documentationLinks.length > 0) {
+                    sections.push('\n**Documentation:**');
+                    for (const link of comp.documentationLinks) {
+                        sections.push(`- ${link.uri}`);
+                    }
+                }
+                if (comp.propsInterface) {
+                    sections.push('\n```typescript');
+                    sections.push(comp.propsInterface);
+                    sections.push('```');
+                }
+                sections.push('');
+            }
+        }
+    }
+    // Design tokens summary (inline format like figma-desktop)
+    if (output.tokens.colors.length > 0 || output.tokens.typography.length > 0) {
+        sections.push('## Design Tokens\n');
+        if (output.tokens.colors.length > 0) {
+            const colorList = output.tokens.colors
+                .map(c => `${c.name}: ${c.value}`)
+                .join(', ');
+            sections.push(`**Colors:** ${colorList}\n`);
+        }
+        if (output.tokens.typography.length > 0) {
+            const typoList = output.tokens.typography
+                .map(t => `${t.name}: ${t.fontFamily} ${t.fontSize}px`)
+                .join(', ');
+            sections.push(`**Typography:** ${typoList}\n`);
+        }
+    }
+    // Assets
+    if (output.assets.length > 0) {
+        sections.push('## Assets\n');
+        sections.push('The following images are available:');
+        for (const asset of output.assets) {
+            sections.push(`- Node ${asset.nodeId}: ${asset.url}`);
+        }
+        sections.push('');
+    }
+    // Screenshot reminder
+    sections.push('---');
+    sections.push(`💡 **Tip:** Use \`capture_screenshot\` with nodeId "${nodeId}" to see the visual design for better context.`);
+    return sections.join('\n');
+}
+export { rgbToHex } from './styleConverter.js';