Bricks Builder를 위한 가장 포괄적인 오픈 소스 MCP 서버

Bricks Builder를 위한 가장 포괄적인 오픈 소스 MCP 서버입니다.

Claude Code, Cursor, Windsurf 또는 모든 MCP 호환 AI 어시스턴트에서 직접 페이지, 템플릿, 스타일, SEO, 콘텐츠 등을 관리할 수 있는 100개 이상의 도구를 제공합니다.

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

이 MCP 서버는 포함된 REST API 플러그인을 통해 WordPress 사이트와 통신합니다. 귀하의 AI 어시스턴트는 페이지 읽기, 요소 업데이트, 스타일 관리 및 섹션 구축을 통해 Bricks Builder에 대한 완전한 제어 권한을 갖게 됩니다.

이 저장소의 plugin/ 폴더에는 Bricks API Bridge WordPress 플러그인이 포함되어 있습니다. 다음 설치 방법 중 하나를 선택하세요:

옵션 A: ZIP 업로드 (가장 쉬움)

• 최신 릴리스에서 bricks-api-bridge.zip을 다운로드합니다. - WordPress 관리자 페이지 → 플러그인 → 새로 추가 → 플러그인 업로드로 이동합니다.
• ZIP 파일을 업로드하고 "지금 설치"를 클릭합니다.
• "활성화"를 클릭합니다.

옵션 B: FTP/SSH를 통한 수동 업로드

• 이 저장소를 클론(Clone)하거나 다운로드합니다.
• plugin/ 폴더를 WordPress 설치 경로로 복사합니다: cp -r plugin/ /path/to/wordpress/wp-content/plugins/bricks-api-bridge/
• WordPress 관리자 페이지 → 플러그인 → "Bricks API Bridge"를 활성화합니다.

옵션 C: WP-CLI

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

활성화 후, 플러그인은 /wp-json/bricks-bridge/v1/ 경로 아래에 REST API 엔드포인트(Endpoints)를 등록합니다. 별도의 설정은 필요하지 않으며, WordPress 애플리케이션 비밀번호(Application Passwords)를 통해 즉시 작동합니다.

WordPress 관리자 페이지 → 사용자 → 사용자 프로필 → 애플리케이션 비밀번호에서:

• 이름을 입력합니다 (예: "MCP Server")
• "새 애플리케이션 비밀번호 추가"를 클릭합니다.
• 생성된 비밀번호를 복사합니다.

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

.env.example을 .env로 복사하고 세부 정보를 입력하세요:

cp .env.example .env

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

Claude Code — ~/.claude/.mcp.json에 추가:

:

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

또는 Bun 사용 (더 빠른 시작):

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

Claude Code iOS / Android 앱 — 설정(Settings) 열기 → MCP 서버(MCP Servers) → 서버 추가(Add Server):

이름(Name): bricks

명령어(Command): node

(또는 bun)

인수(Arguments): /path/to/bricks-mcp-open/index.js

환경 변수(Environment Variables):
WORDPRESS_URL = https://your-site.com
WORDPRESS_USER = your-username
WORDPRESS_APP_PASSWORD = xxxx xxxx xxxx xxxx xxxx xxxx

Cursor / Windsurf — 프로젝트의 .cursor/mcp.json에 동일한 설정을 추가합니다.

Hermes Agent (Nous Research) — config.yaml에 추가:

:

mcp_servers:
bricks:
command: node
...

Hermes는 v0.2.0부터 네이티브 MCP 클라이언트 지원을 제공하며, 105개의 모든 도구가 자동으로 도구 목록에 나타납니다. 모든 모델(Hermes 3, Llama, OpenRouter 등)과 작동합니다.

MCP 서버를 Railway (또는 모든 Docker 호스트)에서 셀프 호스팅 MCP 환경으로 배포한 다음, Claude Code 모바일 앱에 연결합니다. 백그라운드에서 Mac을 실행할 필요가 없으며, 서버가 클라우드에서 24/7 작동합니다.

작동 방식:

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

설정:

• 포함된 agent-service/Dockerfile을 사용하여 Railway에 MCP 서버를 배포합니다.
• Claude 콘솔(Console) → MCP → 셀프 호스팅 환경 생성(Create Self-Hosted Environment)에서 진행합니다.
• 환경 키를 생성하여 Railway 배포에 추가합니다.
• Claude Code 모바일 앱은 자동으로 셀프 호스팅 환경에 연결됩니다.

휴대폰으로 할 수 있는 일 — 노트북 불필요:

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`으로 복사하세요:

{
"default": "production",
"sites": {
...

실행 시간(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단계 파이프라인을 거칩니다:

업계 브리프 (Industry Brief) → 히스토리언 (Historian) → 디자인 (Design) → 코드 (Code) → 업데이트 (Update) → QA → 수정 루프 (Fix Loop)

**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를 참조하세요.