홈으로
Codelifter

Codelifter CLI — 터미널·CI 추출

터미널에서 직접 추출. CI 파이프라인에서 자동화.

품질 투명성

Tier 2 정적 시그니처 보존. snapshot-diff는 확장 필요.

Tier 2 정적 시그니처 16개 보존. runtime probe(snapshotDiff, behaviorFingerprint)는 크롬 확장 필요. 실질 보존율 ~95%.

설치 및 로그인

설치

bash
npm install -g @codelifter/cli
# or
npx @codelifter/cli --version

API 키 연결

bash
codelifter login

사용 예시

요소 추출

bash
codelifter extract https://stripe.com \
  --selector ".hero" \
  --framework react \
  --output Hero.tsx

전체 페이지

bash
codelifter extract https://vercel.com \
  --framework react \
  --output ./components/

--use-my-chrome (behind-auth 대응)

bash
# 사용자 Chrome에 CDP로 연결 (behind-auth 사이트 대응)
codelifter extract https://app.example.com/dashboard \
  --use-my-chrome \
  --selector ".dashboard-grid" \
  --output DashboardGrid.tsx

MCP 브리지 서버

CLI는 extract 명령 외에 stdio MCP 래퍼(mcp-stdio)도 제공합니다. Claude Code, Cursor 등 MCP 클라이언트가 stdio transport로 연결하면 CLI가 ws://127.0.0.1:12307 을 통해 크롬 확장과 브리지 역할을 합니다.

MCP 브리지 시작

bash
# stdio MCP 래퍼 (Claude Code / Cursor 연결용)
# Claude Code: claude mcp add codelifter --transport stdio -- codelifter mcp-stdio
# Cursor: "command": "codelifter", "args": ["mcp-stdio"]
codelifter mcp-stdio

Claude Code: claude mcp add codelifter --transport stdio -- codelifter mcp-stdio / Cursor: .cursor/mcp.json에 command/args 방식으로 등록하세요.

CI/CD 통합

GitHub Actions

yaml
name: Extract UI Components

on:
  workflow_dispatch:
    inputs:
      url:
        description: 'URL to extract'
        required: true
      selector:
        description: 'CSS selector'
        required: false

jobs:
  extract:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with:
          node-version: '20'
      - run: npm install -g @codelifter/cli
      - run: codelifter login --api-key ${{ secrets.CODELIFTER_API_KEY }}
      - run: |
          codelifter extract ${{ github.event.inputs.url }} \
            --selector "${{ github.event.inputs.selector }}" \
            --framework react \
            --output ./extracted/

플래그 참조

플래그설명
--selectorCSS 셀렉터 (없으면 전체 페이지)
--frameworkreact | vue | svelte (기본: react)
--output출력 파일 또는 폴더 경로
--use-my-chrome사용자 Chrome CDP 연결 (behind-auth)
--pipeline-modeoff | static | full (기본: static)

요구사항

  • Node.js 18+
  • Codelifter 계정 (API 키)
  • Chromium 자동 설치 (postinstall)
  • --use-my-chrome: Chrome 원격 디버깅 포트 열기 필요