palette-mcp 1.1.2 → 1.2.1

package/src/services/design-system.ts

@@ -1,3 +1,5 @@
+import { ComponentSyncService, type SyncResult } from '../sync/index.js';
+
 export interface DesignSystemComponent {
   name: string;
   description: string;
@@ -22,14 +24,117 @@ export interface ComponentExample {
   description: string;
 }
 
+export interface SyncConfig {
+  /** 서버 시작 시 자동 동기화 여부 (기본값: true) */
+  autoSync?: boolean;
+  /** 동기화 상세 로그 출력 여부 */
+  verbose?: boolean;
+}
+
 export class DesignSystemService {
   private reactComponents: DesignSystemComponent[] = [];
   private vueComponents: DesignSystemComponent[] = [];
+  private syncService: ComponentSyncService;
+  private syncConfig: SyncConfig;
+  private initialized: boolean = false;
+  private lastSyncResult: SyncResult | null = null;
 
-  constructor() {
+  constructor(syncConfig: SyncConfig = {}) {
+    this.syncConfig = {
+      autoSync: syncConfig.autoSync ?? true,
+      verbose: syncConfig.verbose ?? false,
+    };
+    this.syncService = new ComponentSyncService();
+
+    // 하드코딩된 기본 컴포넌트 초기화 (폴백용)
     this.initializeComponents();
   }
 
+  /**
+   * 서비스 초기화 (비동기)
+   * 서버 시작 시 호출하여 GitHub에서 최신 컴포넌트 동기화
+   */
+  async initialize(): Promise<void> {
+    if (this.initialized) {
+      return;
+    }
+
+    if (this.syncConfig.autoSync) {
+      try {
+        console.log('[DesignSystem] 컴포넌트 동기화 시작...');
+        const result = await this.syncService.sync({
+          verbose: this.syncConfig.verbose,
+        });
+
+        this.lastSyncResult = result;
+
+        if (result.success) {
+          if (result.reactComponents.length > 0) {
+            this.reactComponents = result.reactComponents;
+          }
+          if (result.vueComponents.length > 0) {
+            this.vueComponents = result.vueComponents;
+          }
+
+          console.log(
+            `[DesignSystem] 동기화 완료: React ${this.reactComponents.length}개, Vue ${this.vueComponents.length}개` +
+            (result.fromCache ? ' (캐시에서 로드)' : ' (GitHub에서 동기화)')
+          );
+        } else {
+          console.warn('[DesignSystem] 동기화 실패, 하드코딩된 데이터 사용:', result.error);
+        }
+      } catch (error) {
+        console.warn('[DesignSystem] 동기화 중 오류, 하드코딩된 데이터 사용:', error);
+      }
+    }
+
+    this.initialized = true;
+  }
+
+  /**
+   * 수동 동기화 실행
+   */
+  async syncComponents(force: boolean = false): Promise<SyncResult> {
+    const result = await this.syncService.sync({
+      force,
+      verbose: this.syncConfig.verbose,
+    });
+
+    this.lastSyncResult = result;
+
+    if (result.success) {
+      if (result.reactComponents.length > 0) {
+        this.reactComponents = result.reactComponents;
+      }
+      if (result.vueComponents.length > 0) {
+        this.vueComponents = result.vueComponents;
+      }
+    }
+
+    return result;
+  }
+
+  /**
+   * 마지막 동기화 결과 조회
+   */
+  getLastSyncResult(): SyncResult | null {
+    return this.lastSyncResult;
+  }
+
+  /**
+   * 캐시 상태 조회
+   */
+  async getCacheStatus() {
+    return this.syncService.getCacheStatus();
+  }
+
+  /**
+   * 캐시 삭제
+   */
+  async clearCache(): Promise<void> {
+    await this.syncService.clearCache();
+  }
+
   /**
    * 디자인 시스템(React, Vue) 컴포넌트 메타데이터 제공 필요.
    * 1. 메타데이터 구조 정의

package/src/smithery.ts

@@ -2,53 +2,93 @@
  * Palette MCP Server - Smithery Remote 배포용
  * 
  * Smithery.ai에서 호스팅될 때 사용됩니다.
- * Smithery가 이 파일을 로드하고 createServer 함수를 호출합니다.
+ * @smithery/sdk를 사용하여 HTTP 서버로 실행됩니다.
  */
 
+import { createStatelessServer } from '@smithery/sdk/server/stateless.js';
 import { z } from 'zod';
-import { createPaletteServer, tools } from './server.js';
+import { createPaletteServer } from './server.js';
 
-// Smithery 설정 스키마 정의
+/**
+ * Smithery 설정 스키마 정의
+ * 
+ * Palette MCP Server Configuration
+ * Figma 디자인을 Design System 컴포넌트로 변환하기 위한 설정
+ * 
+ * 모든 필드는 optional로 설정하여 Smithery Optional config 점수 획득
+ */
 export const configSchema = z.object({
+  // Figma Access Token - Figma API 호출에 필요
   FIGMA_ACCESS_TOKEN: z
     .string()
-    .describe('Figma Personal Access Token (https://www.figma.com/developers/api#access-tokens)'),
+    .min(1)
+    .optional()
+    .describe('Figma Personal Access Token. Required for accessing Figma designs. Get yours at https://www.figma.com/developers/api#access-tokens'),
+  
+  // GitHub Token - 비공개 디자인 시스템 패키지 접근용
   GITHUB_TOKEN: z
     .string()
-    .describe('GitHub Personal Access Token for design system packages'),
+    .min(1)
+    .optional()
+    .describe('GitHub Personal Access Token for accessing private design system packages. Required only for private repositories.'),
+  
+  // Figma MCP Server URL - 로컬 개발용 (Remote 모드에서는 사용 안함)
   FIGMA_MCP_SERVER_URL: z
     .string()
+    .url('Must be a valid URL')
+    .optional()
     .default('http://127.0.0.1:3845/mcp')
-    .describe('Figma Dev Mode MCP server URL'),
-});
+    .describe('Figma Dev Mode MCP server URL. Only needed for local development with Figma Desktop app.'),
+}).describe('Configuration options for Palette MCP Server - Figma to Design System converter');
 
 // Smithery 설정 타입
 type SmitheryConfig = z.infer<typeof configSchema>;
 
+// 기본 설정
+const defaultConfig: SmitheryConfig = {
+  FIGMA_ACCESS_TOKEN: undefined,
+  GITHUB_TOKEN: undefined,
+  FIGMA_MCP_SERVER_URL: 'http://127.0.0.1:3845/mcp',
+};
+
 /**
- * Smithery에서 호출하는 서버 생성 함수
- * 
- * @param config - Smithery에서 전달받은 사용자 설정
- * @returns MCP 서버 인스턴스
+ * MCP 서버 생성 함수 - Smithery가 호출
  */
-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;
+export default function createMcpServer({ config }: { config?: SmitheryConfig } = {}) {
+  // config가 없거나 불완전해도 서버 초기화 가능하도록 방어적 처리
+  const safeConfig: SmitheryConfig = { ...defaultConfig, ...config };
+  
+  // 환경변수 설정 (값이 있는 경우에만)
+  if (safeConfig.FIGMA_ACCESS_TOKEN) {
+    process.env.FIGMA_ACCESS_TOKEN = safeConfig.FIGMA_ACCESS_TOKEN;
+  }
+  if (safeConfig.GITHUB_TOKEN) {
+    process.env.GITHUB_TOKEN = safeConfig.GITHUB_TOKEN;
+  }
+  if (safeConfig.FIGMA_MCP_SERVER_URL) {
+    process.env.FIGMA_MCP_SERVER_URL = safeConfig.FIGMA_MCP_SERVER_URL;
+  }
 
   // 공통 서버 생성 로직 사용
+  // Remote 모드에서는 Figma Desktop MCP 클라이언트를 사용하지 않음 (로컬호스트 접근 불가)
   const server = createPaletteServer({
-    figmaAccessToken: config.FIGMA_ACCESS_TOKEN,
-    githubToken: config.GITHUB_TOKEN,
-    figmaMcpServerUrl: config.FIGMA_MCP_SERVER_URL,
+    figmaAccessToken: safeConfig.FIGMA_ACCESS_TOKEN,
+    githubToken: safeConfig.GITHUB_TOKEN,
+    figmaMcpServerUrl: safeConfig.FIGMA_MCP_SERVER_URL,
+    useFigmaMcp: false, // Remote 모드에서는 Figma REST API만 사용
   });
 
-  console.error('Palette server created for Smithery (Remote mode)');
+  console.error('Palette MCP server created for Smithery (Remote mode)');
 
-  // Smithery가 기대하는 형식으로 반환
   return server;
 }
 
-// Tools 정보도 export (Smithery가 capabilities 탐지에 사용할 수 있음)
-export { tools };
+// 직접 실행 시에만 서버 시작 (Smithery에서 import할 때는 실행 안됨)
+// Smithery는 createStatelessServer를 내부적으로 호출함
+if (process.env.SMITHERY_STANDALONE === 'true') {
+  const { app } = createStatelessServer(createMcpServer);
+  const port = process.env.PORT || 3000;
+  app.listen(port, () => {
+    console.error(`Palette MCP server listening on port ${port}`);
+  });
+}

package/src/utils/request-manager.ts

@@ -4,8 +4,16 @@ import { join } from 'path';
 import { fileURLToPath } from 'url';
 import { dirname } from 'path';
 
+// ESM과 CJS 모두 호환되는 __dirname 구현
+let __dirname_resolved: string;
+try {
+  // ESM 환경
 const __filename = fileURLToPath(import.meta.url);
-const __dirname = dirname(__filename);
+  __dirname_resolved = dirname(__filename);
+} catch {
+  // CJS 환경 또는 번들러 환경 - process.cwd() 사용
+  __dirname_resolved = process.cwd();
+}
 
 /**
  * 요청 ID 생성 (타임스탬프 + 랜덤 문자열)
@@ -20,7 +28,7 @@ export function generateRequestId(): string {
  * 요청별 폴더 경로 생성
  */
 export function getRequestFolderPath(requestId: string): string {
-  const projectRoot = join(__dirname, '..', '..');
+  const projectRoot = join(__dirname_resolved, '..', '..');
   return join(projectRoot, 'dist', 'requests', requestId);
 }
 
@@ -29,11 +37,11 @@ export function getRequestFolderPath(requestId: string): string {
  */
 export async function createRequestFolder(requestId: string): Promise<string> {
   const folderPath = getRequestFolderPath(requestId);
-  
+
   if (!existsSync(folderPath)) {
     await mkdir(folderPath, { recursive: true });
   }
-  
+
   return folderPath;
 }
 
@@ -87,15 +95,14 @@ export async function saveMetadata(
 ): Promise<string> {
   const folderPath = await createRequestFolder(requestId);
   const metadataPath = join(folderPath, 'metadata.json');
-  
+
   const fullMetadata: RequestMetadata = {
     requestId,
     createdAt: new Date().toISOString(),
     files: [],
     ...metadata,
   };
-  
+
   await writeFile(metadataPath, JSON.stringify(fullMetadata, null, 2), 'utf-8');
   return metadataPath;
 }
-