palette-mcp 1.0.0 → 1.1.0

package/dist/smithery.js

@@ -0,0 +1,44 @@
+/**
+ * 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에서 호출하는 서버 생성 함수
+ *
+ * @param config - Smithery에서 전달받은 사용자 설정
+ * @returns MCP 서버 인스턴스
+ */
+export default function createServer({ config }) {
+    // 환경변수 설정
+    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/dist/test-figma-tools.d.ts

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

package/dist/test-figma-tools.js

@@ -0,0 +1,55 @@
+#!/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.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, index) => {
+            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]) => {
+                    console.log(`     - ${key}: ${value.type || 'any'} ${value.description ? `(${value.description})` : ''}`);
+                });
+            }
+            console.log('');
+        });
+    }
+    catch (error) {
+        console.error('❌ 오류 발생:', error);
+        process.exit(1);
+    }
+}
+main();

package/dist/test-mcp-servers.d.ts

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

package/dist/test-mcp-servers.js

@@ -0,0 +1,166 @@
+#!/usr/bin/env node
+import dotenv from 'dotenv';
+import { fileURLToPath } from 'url';
+import { dirname, join } from 'path';
+import axios from 'axios';
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = dirname(__filename);
+dotenv.config({ path: join(__dirname, '..', '.env') });
+/**
+ * HTTP 타입 MCP 서버 테스트
+ */
+async function testHttpMCPServer(name, url) {
+    console.log(`\n${'='.repeat(60)}`);
+    console.log(`🔍 ${name} MCP 서버 테스트`);
+    console.log(`URL: ${url}`);
+    console.log('='.repeat(60));
+    try {
+        const client = axios.create({
+            baseURL: url,
+            timeout: 10000,
+            headers: {
+                'Content-Type': 'application/json',
+            },
+        });
+        // JSON-RPC 2.0 요청 생성
+        const request = {
+            jsonrpc: '2.0',
+            id: 1,
+            method: 'tools/list',
+            params: {},
+        };
+        console.log('\n📤 요청 전송 중...');
+        const response = await client.post('', request);
+        console.log('✅ 연결 성공!');
+        console.log('\n📥 응답 상태:', response.status);
+        console.log('📥 응답 데이터:', JSON.stringify(response.data, null, 2));
+        if (response.data.error) {
+            console.error('❌ MCP 에러:', response.data.error);
+            return false;
+        }
+        const tools = response.data.result?.tools || [];
+        console.log(`\n📋 도구 개수: ${tools.length}`);
+        if (tools.length > 0) {
+            console.log('\n📝 도구 목록:');
+            tools.forEach((tool, index) => {
+                console.log(`\n${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]) => {
+                        console.log(`     - ${key}: ${value.type || 'any'}`);
+                    });
+                }
+            });
+            return true;
+        }
+        else {
+            console.log('⚠️  도구가 없습니다.');
+            return false;
+        }
+    }
+    catch (error) {
+        if (axios.isAxiosError(error)) {
+            if (error.code === 'ECONNREFUSED') {
+                console.error('❌ 연결 거부됨 - 서버가 실행 중이지 않습니다.');
+            }
+            else if (error.code === 'ETIMEDOUT') {
+                console.error('❌ 타임아웃 - 서버가 응답하지 않습니다.');
+            }
+            else if (error.response) {
+                console.error(`❌ HTTP 에러: ${error.response.status} ${error.response.statusText}`);
+                console.error('응답 데이터:', error.response.data);
+            }
+            else {
+                console.error('❌ 연결 에러:', error.message);
+            }
+        }
+        else {
+            console.error('❌ 예상치 못한 에러:', error);
+        }
+        return false;
+    }
+}
+/**
+ * stdio 타입 MCP 서버는 직접 테스트하기 어려우므로 정보만 출력
+ */
+function testStdioMCPServer(name, config) {
+    console.log(`\n${'='.repeat(60)}`);
+    console.log(`ℹ️  ${name} MCP 서버 정보`);
+    console.log('='.repeat(60));
+    console.log('타입: stdio');
+    console.log('명령:', config.command);
+    console.log('인자:', config.args?.join(' ') || '없음');
+    console.log('\n💡 stdio 타입 MCP 서버는 Cursor가 직접 관리합니다.');
+    console.log('   "Loading tools" 상태가 지속되면:');
+    console.log('   1. Cursor를 재시작해보세요');
+    console.log('   2. MCP 서버 설정을 확인하세요');
+    console.log('   3. 환경 변수가 올바르게 설정되었는지 확인하세요');
+    if (config.env) {
+        console.log('\n환경 변수:');
+        Object.keys(config.env).forEach(key => {
+            if (key.includes('TOKEN') || key.includes('KEY') || key.includes('SECRET')) {
+                console.log(`   ${key}: *** (보안상 숨김)`);
+            }
+            else {
+                console.log(`   ${key}: ${config.env[key]}`);
+            }
+        });
+    }
+}
+async function main() {
+    console.log('🚀 MCP 서버 연결 테스트 시작\n');
+    // mcp.json 파일 읽기
+    const mcpConfigPath = join(process.env.HOME || '', '.cursor', 'mcp.json');
+    let mcpConfig = {};
+    try {
+        const fs = await import('fs/promises');
+        const configContent = await fs.readFile(mcpConfigPath, 'utf-8');
+        mcpConfig = JSON.parse(configContent);
+        console.log(`✅ mcp.json 파일 로드 성공: ${mcpConfigPath}\n`);
+    }
+    catch (error) {
+        console.error(`❌ mcp.json 파일을 읽을 수 없습니다: ${mcpConfigPath}`);
+        console.error('에러:', error);
+        process.exit(1);
+    }
+    if (!mcpConfig.mcpServers) {
+        console.error('❌ mcpServers 설정을 찾을 수 없습니다.');
+        process.exit(1);
+    }
+    const servers = mcpConfig.mcpServers;
+    const httpServers = [];
+    const stdioServers = [];
+    // 서버 분류
+    Object.entries(servers).forEach(([name, config]) => {
+        if (config.type === 'http' || config.url) {
+            httpServers.push({ name, url: config.url });
+        }
+        else if (config.type === 'stdio' || config.command) {
+            stdioServers.push({ name, config });
+        }
+    });
+    // HTTP 타입 서버 테스트
+    if (httpServers.length > 0) {
+        console.log(`\n📡 HTTP 타입 MCP 서버 (${httpServers.length}개):`);
+        for (const server of httpServers) {
+            await testHttpMCPServer(server.name, server.url);
+        }
+    }
+    // stdio 타입 서버 정보 출력
+    if (stdioServers.length > 0) {
+        console.log(`\n\n📡 stdio 타입 MCP 서버 (${stdioServers.length}개):`);
+        for (const server of stdioServers) {
+            testStdioMCPServer(server.name, server.config);
+        }
+    }
+    console.log(`\n${'='.repeat(60)}`);
+    console.log('✅ 테스트 완료');
+    console.log('='.repeat(60));
+}
+main().catch((error) => {
+    console.error('❌ 치명적 오류:', error);
+    process.exit(1);
+});

package/dist/test.d.ts

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

package/dist/test.js

@@ -0,0 +1,76 @@
+#!/usr/bin/env node
+import { DesignSystemService } from './services/design-system.js';
+import { FigmaService } from './services/figma.js';
+import { CodeGenerator } from './services/code-generator.js';
+async function testServices() {
+    console.log('🧪 Testing Palette Services...\n');
+    // Test Design System Service
+    console.log('1. Testing Design System Service...');
+    const designSystemService = new DesignSystemService();
+    const reactComponents = await designSystemService.getAvailableComponents('react');
+    console.log(`✅ Found ${reactComponents.length} React components`);
+    const vueComponents = await designSystemService.getAvailableComponents('vue');
+    console.log(`✅ Found ${vueComponents.length} Vue components`);
+    // Test component matching
+    const buttonMatch = designSystemService.findBestMatch('button', 'react');
+    console.log(`✅ Button match: ${buttonMatch?.name || 'Not found'}`);
+    const inputMatch = designSystemService.findBestMatch('text-field', 'vue');
+    console.log(`✅ Input match: ${inputMatch?.name || 'Not found'}\n`);
+    // Test Figma Service (without actual API call)
+    console.log('2. Testing Figma Service...');
+    const figmaService = new FigmaService();
+    // Test URL parsing
+    try {
+        const fileId = figmaService['extractFileId']('https://www.figma.com/file/abc123/Test-File');
+        console.log(`✅ URL parsing works: ${fileId}`);
+    }
+    catch (error) {
+        console.log(`❌ URL parsing failed: ${error}`);
+    }
+    // Test Code Generator
+    console.log('3. Testing Code Generator...');
+    const codeGenerator = new CodeGenerator(designSystemService);
+    // Mock Figma data
+    const mockFigmaData = {
+        document: {
+            id: 'root',
+            name: 'Test Component',
+            type: 'FRAME',
+            children: [
+                {
+                    id: 'button-1',
+                    name: 'Submit Button',
+                    type: 'RECTANGLE',
+                    characters: 'Submit',
+                    absoluteBoundingBox: { x: 0, y: 0, width: 100, height: 40 },
+                    cornerRadius: 8,
+                    fills: [{
+                            type: 'SOLID',
+                            color: { r: 0.2, g: 0.4, b: 0.8, a: 1 }
+                        }]
+                }
+            ]
+        },
+        components: {},
+        styles: {},
+        name: 'Test File',
+        lastModified: '2024-01-01',
+        thumbnailUrl: ''
+    };
+    try {
+        const reactCode = await codeGenerator.generateReactComponent(mockFigmaData, 'TestComponent');
+        console.log('✅ React code generation works');
+        console.log('Generated React component preview:');
+        console.log(reactCode.split('\n').slice(0, 10).join('\n') + '...\n');
+        const vueCode = await codeGenerator.generateVueComponent(mockFigmaData, 'TestComponent');
+        console.log('✅ Vue code generation works');
+        console.log('Generated Vue component preview:');
+        console.log(vueCode.split('\n').slice(0, 10).join('\n') + '...\n');
+    }
+    catch (error) {
+        console.log(`❌ Code generation failed: ${error}`);
+    }
+    console.log('🎉 All tests completed!');
+}
+// Run tests
+testServices().catch(console.error);

package/package.json

@@ -1,18 +1,17 @@
 {
   "name": "palette-mcp",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "description": "MCP server for converting Figma designs to React/Vue components using design system",
   "main": "dist/index.js",
+  "module": "src/smithery.ts",
   "type": "module",
   "bin": {
     "palette": "./dist/index.js",
     "palette-mcp": "./dist/index.js"
   },
   "files": [
-    "dist/index.js",
-    "dist/index.d.ts",
-    "dist/services/**/*",
-    "dist/utils/**/*",
+    "dist/**/*",
+    "src/**/*",
     "README.md",
     "LICENSE",
     "smithery.yaml"

package/smithery.yaml

@@ -1,61 +1,12 @@
 # Smithery.ai MCP Server Configuration
 # https://smithery.ai/docs/build/config
+#
+# 이 서버는 두 가지 모드를 지원합니다:
+# - Remote: Smithery.ai에서 호스팅 (runtime: typescript)
+# - Local: npx palette-mcp로 직접 실행
 
-name: palette-mcp
-version: 1.0.0
-description: |
-  Convert Figma designs to React/Vue components using design system.
-  Supports @dealicious/design-system-react and @dealicious/design-system components.
+# TypeScript 런타임으로 Smithery 호스팅
+runtime: typescript
 
-# Runtime specification (required)
-runtime: node
-
-# Start command configuration (required)
-startCommand:
-  type: stdio
-  configSchema:
-    type: object
-    properties:
-      FIGMA_ACCESS_TOKEN:
-        type: string
-        description: |
-          Figma Personal Access Token for API access.
-          Get it from: https://www.figma.com/developers/api#access-tokens
-      GITHUB_TOKEN:
-        type: string
-        description: |
-          GitHub Personal Access Token for accessing @dealicious/design-system packages.
-          Get it from: https://github.com/settings/tokens
-      FIGMA_MCP_SERVER_URL:
-        type: string
-        description: |
-          URL of the Figma MCP server (Figma Desktop Dev Mode).
-          Default: http://127.0.0.1:3845/mcp
-        default: "http://127.0.0.1:3845/mcp"
-    required:
-      - FIGMA_ACCESS_TOKEN
-      - GITHUB_TOKEN
-      - FIGMA_MCP_SERVER_URL
-  commandFunction: |
-    (config) => ({
-      command: "npx",
-      args: ["-y", "palette-mcp"],
-      env: {
-        FIGMA_ACCESS_TOKEN: config.FIGMA_ACCESS_TOKEN,
-        GITHUB_TOKEN: config.GITHUB_TOKEN,
-        FIGMA_MCP_SERVER_URL: config.FIGMA_MCP_SERVER_URL || "http://127.0.0.1:3845/mcp"
-      }
-    })
-
-# Environment variables as object (for documentation)
-env:
-  FIGMA_ACCESS_TOKEN:
-    description: Figma 개인 액세스 토큰 (필수)
-    required: true
-  GITHUB_TOKEN:
-    description: 디자인 시스템 패키지 접근용 GitHub 토큰 (필수)
-    required: true
-  FIGMA_MCP_SERVER_URL:
-    description: Figma MCP 서버 URL (필수)
-    required: true
-    default: "http://127.0.0.1:3845/mcp"
+# Smithery가 로드할 모듈 (src/smithery.ts)
+# package.json의 "module" 필드와 연동됨