Claude Code / Cursor / AI Assistant
↕ MCP 프로토콜 (stdio)
bricks-mcp (Node.js)
...

# 저장소 루트에서
cd plugin && zip -r ../bricks-api-bridge.zip . && cd ..
wp plugin install bricks-api-bridge.zip --activate

git clone https://github.com/developer2013/bricks-mcp-open.git
cd bricks-mcp-open
npm install # 또는: bun install

WORDPRESS_URL=https://your-site.com
WORDPRESS_USER=your-username
WORDPRESS_APP_PASSWORD=xxxx xxxx xxxx xxxx xxxx xxxx

{
"mcpServers": {
"bricks": {
...

{
"mcpServers": {
"bricks": {
...

mcp_servers:
bricks:
command: node
...

iPhone / Android (Claude Code 앱)
↕ Claude 셀프 호스팅 MCP
Railway / Docker (MCP 서버 — 항상 작동)
...

You:

| 작업 | 예시 프롬프트 |
|---|---| 
| 페이지 구축 | "어두운 그라데이션 배경을 가진 히어로 섹션을 만들어줘" |
| ... | 
서버는 Railway에서 24시간 7일 내내 실행됩니다. 여러분의 휴대폰은 단지 제어 장치(control surface)일 뿐입니다. 105개의 모든 도구를 언제 어디서나 사용할 수 있습니다.

AI 어시스턴트에게 다음과 같이 요청해 보세요:

"bricks_connection_test 도구를 사용하여 내 WordPress 연결을 확인해줘."

| 카테고리 | 도구 수 | 설명 |
|---|---|---|
| Pages (페이지) | 9 | 페이지 목록 조회, 가져오기, 업데이트, 패치, 추가, 구축, 복제, 검색 |
| Scripts & Assets (스크립트 및 에셋) | 5 | 페이지별 CSS/JS 관리, GSAP 플래그 제어 |
| SEO (Page) | 6 | 페이지 수준의 SEO 메타, 스키마 마크업 (schema markup), 감사 (audit) |
| Templates (템플릿) | 8 | 전체 템플릿 CRUD, 복제, 가져오기, 검색 |
| Backup & Snapshots (백업 및 스냅샷) | 7 | 이름 지정 스냅샷, 멀티 슬롯 백업, 복구 |
| Global Classes (글로벌 클래스) | 7 | CSS 클래스 CRUD, 일괄 생성, 사용량 분석 |
| BEM Components (BEM 컴포넌트) | 3 | BEM 클래스 세트 생성, 적용 및 검증 |
| Style System (스타일 시스템) | 10 | 컬러 팔레트, 폰트, CSS 변수, 브레이크포인트 (breakpoints) |
| Theme Styles (테마 스타일) | 2 | 글로벌 테마 스타일 읽기/쓰기 |
| Presets (프리셋) | 4 | 섹션 프리셋: 목록, 인스턴스화, 저장, 삭제 |
| SEO (Advanced) | 13 | 자동 수정, 일괄 업데이트, 사이트맵, 리다이렉트, 링크 체크 |
| WordPress Content (WordPress 콘텐츠) | 8 | 포스트, 카테고리, 태그 CRUD |
| Menus (메뉴) | 5 | 내비게이션 메뉴 관리 |
| Site Management (사이트 관리) | 9 | 설정, 페이지 생성, 검증, 캐시, 통계 |
| Media (미디어) | 3 | 미디어 파일 업로드, 목록 조회, 편집 |
| Multi-Site (멀티 사이트) | 3 | 실행 시간(runtime) 중 WordPress 사이트 간 전환 |
| Utilities (유틸리티) | 3 | 연결 테스트, HTML→Bricks 변환기, 일괄 작업 (batch ops) |

단일 MCP 서버에서 여러 WordPress 사이트를 관리하세요. `sites.json.example` 파일을 `sites.json`으로 복사하세요:

실행 시간(runtime) 중에 사이트를 전환하세요:

"스테이징(staging) 사이트로 전환해줘."

"42번 페이지에 전체 너비 배경, 중앙 정렬된 제목 'Welcome', 부제목, 그리고 CTA 버튼이 있는 히어로 섹션을 만들어줘."

"컬러 팔레트를 업데이트해줘 — 기본 색상(primary color)을 #2563EB로, 보조 색상(secondary color)을 #7C3AED로 설정해줘."

"모든 게시된 페이지에 대해 SEO 감사를 실행하고 누락된 메타 설명(meta descriptions)을 자동 수정해줘."

"42번 페이지를 'before-redesign'이라는 이름의 스냅샷(snapshot)으로 생성한 다음, 히어로 섹션(hero section)을 업데이트해줘."

포함된 WordPress 플러그인(`bricks-api-bridge`)은 다음을 제공합니다:

**REST API 엔드포인트 (REST API endpoints)**: 모든 Bricks Builder 데이터용
**보안 강화 (Security hardening)**: 속도 제한 (rate limiting), 사용자 열거 방지 (user enumeration protection), 보안 헤더 (security headers)
**반응형 추론 (Responsive inference)**: 모바일/태블릿 브레이크포인트 (breakpoint) 자동 생성
**요소 검증 (Element validation)**: 잘못된 ID, 깨진 부모-자식 링크(parent-child links) 포착
**자동 수정 (Auto-fix)**: 일반적인 CSS 문제(overflow, grid, 컨테이너 너비) 수정
**백업 시스템 (Backup system)**: 멀티 슬롯 백업 + 이름이 지정된 스냅샷 (named snapshots)
**디자인 토큰 가져오기/내보내기 (Design token import/export)**: JSON, ACSS, Tailwind 형식

| 기능 | bricks-mcp | Novamira | cristianuibar/bricks-mcp | sabiertas/bricks-mcp-server |
|---|---|---|---|---|
| 집중 분야 (Focus) | Bricks Builder | 일반 WordPress | Bricks Builder | Bricks Builder |
| 도구 (Tools) | 105 | 22 (코어 12 + Gutenberg 10) | 11 | 10 |
| 접근 방식 (Approach) | REST API (구조화된 엔드포인트) | PHP 실행 + 파일 시스템 | REST API | REST API |
| 에이전트 서비스 (Agent Service) | 자율적인 5단계 파이프라인 (Autonomous 5-phase pipeline) | - | - | - |
| 모바일 제어 (Mobile Control) | Telegram 봇 (iPhone/Android) | - | - | - |
| 멀티 사이트 (Multi-Site) | 런타임 전환 (Runtime switching) | - | - | 환경 변수 (Environment vars) |
| BEM 지원 (BEM Support) | 생성 + 적용 + 검증 | - | - | - |
| SEO 도구 (SEO Tools) | 19 (메타 + 감사 + 리다이렉트) | - | - | - |
| 백업 시스템 (Backup System) | 스냅샷 + 멀티 슬롯 | - | - | - |
| 섹션 프리셋 (Section Presets) | 25개 즉시 사용 가능 | - | - | - |
| 보안 강화 (Security Hardening) | 속도 제한 + 헤더 | - | - | - |
| 반응형 추론 (Responsive Inference) | 자동 브레이크포인트 | - | - | - |
| WordPress 콘텐츠 (WordPress Content) | 글 + 카테고리 + 태그 + 메뉴 | PHP 실행을 통해 | - | - |
| 일괄 작업 (Batch Operations) | 요청당 최대 20개 | - | - | - |
| 디자인 토큰 (Design Tokens) | 가져오기/내보내기 (JSON, ACSS) | - | - | - |
| 자동 수정 (Auto-Fix) | Overflow, grid, 컨테이너 | - | - | - |
| Gutenberg 지원 (Gutenberg Support) | - | 블록 에디터 큐 (Block Editor Queue) | - | - |
| PHP 실행 (PHP Execution) | - | 직접 PHP eval | - | - |
| 라이선스 (License) | MIT | AGPL-3.0 | GPL-2.0 | MIT |

**Node.js** >= 18 또는
**Bun** >= 1.0
**WordPress** >= 6.0
**Bricks Builder** >= 2.0
**PHP** >= 8.0

`agent-service/`

`agent-service/` 디렉토리는 업계 브리프(industry briefs)를 바탕으로 전체 WordPress 페이지를 구축하는 자율 에이전트(autonomous agent)를 포함하고 있습니다. 이 에이전트는 Claude와 MCP 서버를 사용하여 다음과 같은 5단계 파이프라인을 거칩니다:

**iPhone 또는 Android에서 빌드**— Telegram 봇이나 Claude Code 모바일 앱을 제어 센터로 사용하여 어디서든 빌드 트리거, QA, 수정 및 스크린샷을 실행하세요.
**CLI 모드**— 단일 빌드 또는 야간 배치 처리(batch processing) 지원
**예산 제어 (Budget Control)**— 단계별 비용 상한선 설정 및 총 비용 추적
**Docker 지원**— Railway, Fly.io 또는 모든 컨테이너 호스트에 배포 가능

설정 지침은 `agent-service/README.md`를 참조하세요.

더 많은 기능을 찾으시나요? 프리미엄 에디션에는 다음과 같은 **260개 이상의 도구**가 포함되어 있습니다:

**AI 빌드 파이프라인 (AI Build Pipeline)**— 단 한 번의 명령으로 URL로부터 전체 페이지를 빌드
**학습 시스템 (Learning System)**— CSS 수정 사항을 기억하고 시간이 지남에 따라 개선
**수학 라이브러리 (Math Library)**— 디자인 토큰(design tokens), 색상 조화(color harmony), 스프링 물리(spring physics)를 위한 33개 모듈
**시각적 QA (Visual QA)**— Puppeteer 스크린샷, 픽셀 비교, 접근성 감사(accessibility audits)
**디자인 인텔리전스 (Design Intelligence)**— 브랜드 원형(brand archetypes), 경쟁사 벤치마킹, 타이포그래피 제안
**WooCommerce, ACF, Gravity Forms** 통합 지원
**생체 모방 애니메이션 (Bio-inspired animations)**— Levy stagger, 밀도-강도(density-intensity), 정족수 인식(quorum sensing)

가이드라인은 CONTRIBUTING.md를 참조하세요.

MIT License. LICENSE를 참조하세요.