palette-mcp 1.0.0 → 1.1.0

package/src/services/figma.ts

@@ -0,0 +1,422 @@
+import axios from 'axios';
+import { FigmaMCPClient } from '../utils/figma-mcp-client.js';
+
+export interface FigmaNode {
+  id: string;
+  name: string;
+  type: string;
+  visible?: boolean;
+  children?: FigmaNode[];
+  absoluteBoundingBox?: {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+  };
+  fills?: Array<{
+    type: string;
+    color?: {
+      r: number;
+      g: number;
+      b: number;
+      a: number;
+    };
+    gradientStops?: Array<{
+      position: number;
+      color: {
+        r: number;
+        g: number;
+        b: number;
+        a: number;
+      };
+    }>;
+  }>;
+  strokes?: Array<{
+    type: string;
+    color?: {
+      r: number;
+      g: number;
+      b: number;
+      a: number;
+    };
+    strokeWeight?: number;
+  }>;
+  cornerRadius?: number;
+  characters?: string;
+  style?: {
+    fontFamily?: string;
+    fontSize?: number;
+    fontWeight?: number;
+    textAlignHorizontal?: string;
+    textAlignVertical?: string;
+  };
+  layoutMode?: 'NONE' | 'HORIZONTAL' | 'VERTICAL';
+  primaryAxisSizingMode?: 'FIXED' | 'AUTO';
+  counterAxisSizingMode?: 'FIXED' | 'AUTO';
+  paddingLeft?: number;
+  paddingRight?: number;
+  paddingTop?: number;
+  paddingBottom?: number;
+  itemSpacing?: number;
+}
+
+export interface FigmaFile {
+  document: FigmaNode;
+  components: Record<string, FigmaNode>;
+  styles: Record<string, any>;
+  name: string;
+  lastModified: string;
+  thumbnailUrl: string;
+}
+
+export interface FigmaAnalysis {
+  totalNodes: number;
+  componentCount: number;
+  frameCount: number;
+  textCount: number;
+  availableComponents: string[];
+  suggestedMappings: Array<{
+    figmaComponent: string;
+    designSystemComponent: string;
+    confidence: number;
+  }>;
+}
+
+export class FigmaService {
+  private accessToken: string;
+  private baseUrl = 'https://api.figma.com/v1';
+  private mcpClient: FigmaMCPClient | null = null;
+  private useMCP: boolean;
+
+  constructor(useMCP: boolean = true, mcpBaseUrl?: string) {
+    this.accessToken = process.env.FIGMA_ACCESS_TOKEN || '';
+    this.useMCP = useMCP;
+    
+    if (useMCP) {
+      const mcpUrl = mcpBaseUrl || process.env.FIGMA_MCP_SERVER_URL || 'http://127.0.0.1:3845/mcp';
+      this.mcpClient = new FigmaMCPClient(mcpUrl);
+    }
+    
+    if (!this.accessToken) {
+      console.warn('환경 변수에서 FIGMA_ACCESS_TOKEN을 찾을 수 없습니다.');
+    }
+  }
+
+  /**
+   * Figma URL에서 파일 ID 추출
+   */
+  private extractFileId(url: string): string {
+    // /file/ 또는 /design/ 경로에서 파일 ID 추출
+    const match = url.match(/\/(?:file|design)\/([a-zA-Z0-9]+)/);
+    if (match) {
+      return match[1];
+    }
+    // 이미 파일 ID인 경우
+    if (/^[a-zA-Z0-9]+$/.test(url)) {
+      return url;
+    }
+    throw new Error('잘못된 Figma URL 형식입니다.');
+  }
+
+  /**
+   * Figma URL에서 node-id 추출
+   */
+  extractNodeId(url: string): string | undefined {
+    const match = url.match(/[?&]node-id=([^&]+)/);
+    if (match) {
+      // node-id는 URL 인코딩되어 있을 수 있으므로 디코딩
+      return decodeURIComponent(match[1]);
+    }
+    return undefined;
+  }
+
+  /**
+   * MCP 응답을 FigmaFile 형식으로 변환
+   */
+  private transformMCPResponseToFigmaFile(mcpData: any): FigmaFile {
+    // MCP 응답 형식에 따라 변환 로직 구현
+    // Figma MCP 서버의 응답 구조에 맞게 조정 필요
+    if (!mcpData) {
+      throw new Error('MCP 응답 데이터가 없습니다.');
+    }
+
+    // MCP 응답이 이미 FigmaFile 형식인 경우
+    if (mcpData.document) {
+      return {
+        document: mcpData.document,
+        components: mcpData.components || {},
+        styles: mcpData.styles || {},
+        name: mcpData.name || 'Untitled',
+        lastModified: mcpData.lastModified || new Date().toISOString(),
+        thumbnailUrl: mcpData.thumbnailUrl || '',
+      };
+    }
+
+    // MCP 응답이 다른 형식인 경우 변환
+    // content 배열에서 데이터 추출 (MCP 도구 응답 형식)
+    if (mcpData.content && Array.isArray(mcpData.content)) {
+      const textContent = mcpData.content.find((c: any) => c.type === 'text');
+      if (textContent) {
+        try {
+          const parsed = JSON.parse(textContent.text);
+          return this.transformMCPResponseToFigmaFile(parsed);
+        } catch {
+          // JSON이 아닌 경우 처리
+        }
+      }
+    }
+
+    // 기본 구조로 변환 시도
+    return {
+      document: mcpData.document || mcpData.node || { id: 'root', name: 'Document', type: 'DOCUMENT', children: [] },
+      components: mcpData.components || {},
+      styles: mcpData.styles || {},
+      name: mcpData.name || 'Untitled',
+      lastModified: mcpData.lastModified || new Date().toISOString(),
+      thumbnailUrl: mcpData.thumbnailUrl || '',
+    };
+  }
+
+  /**
+   * Figma 파일 데이터 가져오기
+   * MCP 서버를 우선 사용하고, 실패 시 기존 REST API로 폴백
+   */
+  async getFigmaData(url: string, nodeId?: string): Promise<FigmaFile> {
+    const fileId = this.extractFileId(url);
+    
+    // MCP 클라이언트 사용 시도
+    if (this.useMCP && this.mcpClient !== null) {
+      try {
+        const isAvailable = await this.mcpClient.isAvailable();
+        if (isAvailable) {
+          const mcpData = nodeId
+            ? await this.mcpClient.getNodeData(fileId, nodeId)
+            : await this.mcpClient.getFileData(fileId, nodeId);
+          
+          if (mcpData) {
+            try {
+              return this.transformMCPResponseToFigmaFile(mcpData);
+            } catch (error) {
+              console.warn('MCP 응답 변환 실패, REST API로 폴백:', error);
+              // 폴백으로 REST API 사용
+            }
+          }
+        }
+      } catch (error) {
+        console.warn('Figma MCP 서버 연결 실패, REST API로 폴백:', error);
+        // 폴백으로 REST API 사용
+      }
+    }
+
+    // REST API 폴백
+    if (!this.accessToken) {
+      throw new Error('Figma 액세스 토큰이 필요합니다. MCP 서버도 사용할 수 없습니다.');
+    }
+
+    try {
+      const response = await axios.get(`${this.baseUrl}/files/${fileId}`, {
+        headers: {
+          'X-Figma-Token': this.accessToken,
+        },
+        params: {
+          ids: nodeId || undefined,
+        },
+      });
+
+      return {
+        document: response.data.document,
+        components: response.data.components || {},
+        styles: response.data.styles || {},
+        name: response.data.name,
+        lastModified: response.data.lastModified,
+        thumbnailUrl: response.data.thumbnailUrl,
+      };
+    } catch (error) {
+      if (axios.isAxiosError(error)) {
+        throw new Error(`Figma API error: ${error.response?.data?.message || error.message}`);
+      }
+      throw error;
+    }
+  }
+
+  /**
+   * Figma 파일 구조 분석
+   */
+  async analyzeFigmaFile(url: string): Promise<string> {
+    const fileData = await this.getFigmaData(url);
+    
+    const analysis = this.analyzeFileStructure(fileData);
+    
+    return this.formatAnalysis(analysis);
+  }
+
+  /**
+   * 파일 구조 분석 및 컴포넌트 정보 추출
+   */
+  private analyzeFileStructure(file: FigmaFile): FigmaAnalysis {
+    const stats = this.countNodes(file.document);
+    const availableComponents = Object.keys(file.components);
+    
+    return {
+      totalNodes: stats.total,
+      componentCount: stats.components,
+      frameCount: stats.frames,
+      textCount: stats.text,
+      availableComponents,
+      suggestedMappings: this.suggestComponentMappings(availableComponents),
+    };
+  }
+
+  /**
+   * 파일에 있는 다른 유형의 노드 수 세기
+   */
+  private countNodes(node: FigmaNode): {
+    total: number;
+    components: number;
+    frames: number;
+    text: number;
+  } {
+    let total = 1;
+    let components = node.type === 'COMPONENT' ? 1 : 0;
+    let frames = node.type === 'FRAME' ? 1 : 0;
+    let text = node.type === 'TEXT' ? 1 : 0;
+
+    if (node.children) {
+      for (const child of node.children) {
+        const childStats = this.countNodes(child);
+        total += childStats.total;
+        components += childStats.components;
+        frames += childStats.frames;
+        text += childStats.text;
+      }
+    }
+
+    return { total, components, frames, text };
+  }
+
+  /**
+   * Figma 컴포넌트와 디자인 시스템 컴포넌트 간의 매핑 제안
+   */
+  private suggestComponentMappings(figmaComponents: string[]): Array<{
+    figmaComponent: string;
+    designSystemComponent: string;
+    confidence: number;
+  }> {
+    const mappings: Array<{
+      figmaComponent: string;
+      designSystemComponent: string;
+      confidence: number;
+    }> = [];
+
+    // 일반적인 컴포넌트 이름 매핑
+    const commonMappings: Record<string, string[]> = {
+      'button': ['Button', 'Btn', 'PrimaryButton', 'SecondaryButton'],
+      'input': ['Input', 'TextField', 'TextInput'],
+      'card': ['Card', 'Panel', 'Container'],
+      'modal': ['Modal', 'Dialog', 'Popup'],
+      'header': ['Header', 'Navbar', 'Navigation'],
+      'footer': ['Footer', 'BottomBar'],
+      'sidebar': ['Sidebar', 'Drawer', 'Navigation'],
+      'form': ['Form', 'FormGroup'],
+      'table': ['Table', 'DataTable'],
+      'list': ['List', 'ListItem'],
+      'avatar': ['Avatar', 'ProfileImage'],
+      'badge': ['Badge', 'Tag', 'Label'],
+      'tooltip': ['Tooltip', 'Popover'],
+      'dropdown': ['Dropdown', 'Select'],
+      'checkbox': ['Checkbox', 'CheckBox'],
+      'radio': ['Radio', 'RadioButton'],
+      'switch': ['Switch', 'Toggle'],
+      'slider': ['Slider', 'Range'],
+      'progress': ['Progress', 'ProgressBar'],
+      'spinner': ['Spinner', 'Loader'],
+      'alert': ['Alert', 'Notification'],
+      'breadcrumb': ['Breadcrumb', 'Breadcrumbs'],
+      'pagination': ['Pagination', 'Pager'],
+      'tabs': ['Tabs', 'TabList'],
+      'accordion': ['Accordion', 'Collapse'],
+      'carousel': ['Carousel', 'Slider'],
+      'stepper': ['Stepper', 'Steps'],
+    };
+
+    for (const figmaComponent of figmaComponents) {
+      const lowerName = figmaComponent.toLowerCase();
+      
+      for (const [key, possibleNames] of Object.entries(commonMappings)) {
+        for (const possibleName of possibleNames) {
+          if (lowerName.includes(key) || lowerName.includes(possibleName.toLowerCase())) {
+            mappings.push({
+              figmaComponent,
+              designSystemComponent: possibleName,
+              confidence: 0.8,
+            });
+            break;
+          }
+        }
+      }
+    }
+
+    return mappings;
+  }
+
+  /**
+   * 분석 결과 표시 형식 지정
+   */
+  private formatAnalysis(analysis: FigmaAnalysis): string {
+    let result = `## Figma File Analysis\n\n`;
+    result += `**File Statistics:**\n`;
+    result += `- Total Nodes: ${analysis.totalNodes}\n`;
+    result += `- Components: ${analysis.componentCount}\n`;
+    result += `- Frames: ${analysis.frameCount}\n`;
+    result += `- Text Elements: ${analysis.textCount}\n\n`;
+
+    if (analysis.availableComponents.length > 0) {
+      result += `**Available Components:**\n`;
+      analysis.availableComponents.forEach(comp => {
+        result += `- ${comp}\n`;
+      });
+      result += `\n`;
+    }
+
+    if (analysis.suggestedMappings.length > 0) {
+      result += `**Suggested Component Mappings:**\n`;
+      analysis.suggestedMappings.forEach(mapping => {
+        result += `- ${mapping.figmaComponent} → ${mapping.designSystemComponent} (${Math.round(mapping.confidence * 100)}% confidence)\n`;
+      });
+    }
+
+    return result;
+  }
+
+  /**
+   * Figma 파일에서 디자인 토큰 추출
+   */
+  extractDesignTokens(file: FigmaFile): Record<string, any> {
+    const tokens: Record<string, any> = {
+      colors: {},
+      typography: {},
+      spacing: {},
+      borderRadius: {},
+    };
+
+    // 스타일에서 색상 추출
+    for (const [key, style] of Object.entries(file.styles)) {
+      if (style.styleType === 'FILL') {
+        tokens.colors[key] = style.description || key;
+      }
+    }
+
+    // 타이포그래피 추출
+    for (const [key, style] of Object.entries(file.styles)) {
+      if (style.styleType === 'TEXT') {
+        tokens.typography[key] = {
+          fontFamily: style.fontFamily,
+          fontSize: style.fontSize,
+          fontWeight: style.fontWeight,
+        };
+      }
+    }
+
+    return tokens;
+  }
+}

package/src/smithery.ts

@@ -0,0 +1,54 @@
+/**
+ * Palette MCP Server - Smithery Remote 배포용
+ * 
+ * Smithery.ai에서 호스팅될 때 사용됩니다.
+ * Smithery가 이 파일을 로드하고 createServer 함수를 호출합니다.
+ */
+
+import { z } from 'zod';
+import { createPaletteServer, tools } from './server.js';
+
+// Smithery 설정 스키마 정의
+export const configSchema = z.object({
+  FIGMA_ACCESS_TOKEN: z
+    .string()
+    .describe('Figma Personal Access Token (https://www.figma.com/developers/api#access-tokens)'),
+  GITHUB_TOKEN: z
+    .string()
+    .describe('GitHub Personal Access Token for design system packages'),
+  FIGMA_MCP_SERVER_URL: z
+    .string()
+    .default('http://127.0.0.1:3845/mcp')
+    .describe('Figma Dev Mode MCP server URL'),
+});
+
+// Smithery 설정 타입
+type SmitheryConfig = z.infer<typeof configSchema>;
+
+/**
+ * Smithery에서 호출하는 서버 생성 함수
+ * 
+ * @param config - Smithery에서 전달받은 사용자 설정
+ * @returns MCP 서버 인스턴스
+ */
+export default function createServer({ config }: { config: SmitheryConfig }) {
+  // 환경변수 설정
+  process.env.FIGMA_ACCESS_TOKEN = config.FIGMA_ACCESS_TOKEN;
+  process.env.GITHUB_TOKEN = config.GITHUB_TOKEN;
+  process.env.FIGMA_MCP_SERVER_URL = config.FIGMA_MCP_SERVER_URL;
+
+  // 공통 서버 생성 로직 사용
+  const server = createPaletteServer({
+    figmaAccessToken: config.FIGMA_ACCESS_TOKEN,
+    githubToken: config.GITHUB_TOKEN,
+    figmaMcpServerUrl: config.FIGMA_MCP_SERVER_URL,
+  });
+
+  console.error('Palette server created for Smithery (Remote mode)');
+
+  // Smithery가 기대하는 형식으로 반환
+  return server;
+}
+
+// Tools 정보도 export (Smithery가 capabilities 탐지에 사용할 수 있음)
+export { tools };

package/src/test-figma-tools.ts

@@ -0,0 +1,72 @@
+#!/usr/bin/env node
+
+import dotenv from 'dotenv';
+import { fileURLToPath } from 'url';
+import { dirname, join } from 'path';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = dirname(__filename);
+
+dotenv.config({ path: join(__dirname, '..', '.env') });
+
+import { FigmaMCPClient } from './utils/figma-mcp-client.js';
+
+async function main() {
+  const client = new FigmaMCPClient();
+  
+  console.log('Figma Desktop MCP 서버에 연결 중...\n');
+  
+  try {
+    const isAvailable = await client.isAvailable();
+    if (!isAvailable) {
+      console.error('❌ Figma Desktop MCP 서버를 사용할 수 없습니다.');
+      console.log('Figma Desktop 앱이 실행 중이고 MCP 서버가 활성화되어 있는지 확인하세요.');
+      process.exit(1);
+    }
+    
+    console.log('✅ Figma Desktop MCP 서버 연결 성공!\n');
+    
+    console.log('도구 목록 조회 중...');
+    
+    // 직접 sendRequest를 호출해서 원본 응답 확인
+    // @ts-ignore - private 메서드이지만 테스트를 위해 접근
+    const rawResult = await (client as any).sendRequest('tools/list');
+    console.log('원본 응답:', JSON.stringify(rawResult, null, 2));
+    
+    const tools = await client.listTools();
+    
+    console.log(`파싱된 도구 목록:`, JSON.stringify(tools, null, 2));
+    
+    if (tools.length === 0) {
+      console.log('⚠️  사용 가능한 도구가 없습니다.');
+      console.log('\n💡 확인 사항:');
+      console.log('1. Figma Desktop 앱이 실행 중인지 확인하세요.');
+      console.log('2. Figma Desktop 앱의 Preferences에서 "Enable Dev Mode MCP Server"가 활성화되어 있는지 확인하세요.');
+      console.log('3. Figma 파일이 열려있는지 확인하세요.');
+      return;
+    }
+    
+    console.log(`📋 총 ${tools.length}개의 도구를 찾았습니다:\n`);
+    
+    tools.forEach((tool: any, index: number) => {
+      console.log(`${index + 1}. ${tool.name}`);
+      if (tool.description) {
+        console.log(`   설명: ${tool.description}`);
+      }
+      if (tool.inputSchema?.properties) {
+        console.log(`   파라미터:`);
+        Object.entries(tool.inputSchema.properties).forEach(([key, value]: [string, any]) => {
+          console.log(`     - ${key}: ${value.type || 'any'} ${value.description ? `(${value.description})` : ''}`);
+        });
+      }
+      console.log('');
+    });
+    
+  } catch (error) {
+    console.error('❌ 오류 발생:', error);
+    process.exit(1);
+  }
+}
+
+main();
+