홈으로
Codelifter

Cursor 에서 Codelifter 사용

MCP 설정 한 번으로 자연어로 Codelifter를 제어하세요.

MCP 설정

.cursor/mcp.json에 추가하세요.

1단계: 크롬 확장 설치 및 pairing token 발급

Codelifter 확장 → 설정(⚙️) → Developer integrations → MCP 서버 활성화 → 토큰 복사

2단계: CLI 설치

bash
npm install -g @codelifter/cli

3단계: .cursor/mcp.json 생성 또는 수정

.cursor/mcp.json

json
{
  "mcpServers": {
    "codelifter": {
      "url": "ws://127.0.0.1:12307",
      "headers": {
        "x-codelifter-token": "YOUR_PAIRING_TOKEN"
      }
    }
  }
}

전역 설정은 ~/.cursor/mcp.json에도 추가할 수 있습니다.

4단계: 변환 전 대상 탭 활성화 (필수)

대상 웹페이지 탭에서 Codelifter 확장 아이콘을 한 번 클릭하세요. 프라이버시 보호를 위해 확장은 사용자가 명시적으로 활성화한 탭의 DOM에만 접근합니다. 활성화 없이 호출하면 ACTIVATION_REQUIRED 에러가 Cursor 에 그대로 표시됩니다.

자연어로 사용

›"현재 탭의 hero 섹션을 React로 변환해줘"
›"Stripe 랜딩페이지 pricing 카드를 컴포넌트로 만들어줘"

MCP가 연결되면 Cursor가 codelifter_extract tool을 자동으로 호출합니다.

Windsurf

Windsurf도 MCP 표준을 지원합니다. Cursor와 동일한 설정을 ~/.windsurf/mcp.json에 추가하세요.

MDC 룰 (선택)

.cursor/rules/ 폴더에 MDC 파일을 추가하면 Cursor가 UI 관련 요청 시 자동으로 Codelifter를 활용합니다.

.cursor/rules/codelifter.mdc

markdown
---
description: Use Codelifter to extract and convert web UI components
globs: ["**/*.tsx", "**/*.jsx"]
alwaysApply: false
---
When the user asks to replicate, clone, or convert a web page element,
use the @codelifter MCP tool (codelifter_extract) to extract the component.
Prefer selector-based extraction for hero sections, cards, and navbars.

요구사항

  • Codelifter 크롬 확장 설치 및 실행 중
  • @codelifter/cli 설치 (MCP 브리지 호스팅)
  • 확장 설정에서 MCP 서버 활성화
  • Cursor 또는 Windsurf (MCP 지원 버전)