스토리블록 MCP 서버 소개: AI와 CMS의 직접 연결

카테고리

프로그래밍/소프트웨어 개발

서브카테고리

인공지능

대상자

- 개발자, 마케터, 콘텐츠 창작자: Storyblok CMS를 사용하는 사람, AI 도구와의 연동이 필요한 사람

- 난이도: 중급~고급 (API, MCP 서버, 인공지능 통합 기술 이해 필요)

핵심 요약

Storyblok MCP 서버는 자연어로 CMS 작업을 가능하게 하는 AI 인터페이스로, 42개의 도구(4개는 AI 도구 포함)를 제공합니다.
MCP 프로토콜을 기반으로 Storyblok API와 Gemini 2.0 Flash를 활용해 스토리, 자산, 태그, 릴리스 관리가 가능합니다.
보안 고려사항으로 Cursor에 토큰을 직접 저장하도록 설계되어, 사용자 데이터 유출 위험을 최소화합니다.

섹션별 세부 요약

1. 🧠 Introduction

기존 CMS 관리의 문제점: 대시보드의 복잡성, 수동 작업의 비효율성, 코드 변경의 부담.
목표: AI를 통해 CMS 작업을 자연어로 처리하고, 개발자 작업 부담을 줄이기 위한 MCP 서버 개발.

2. 🚀 What I Built

MCP 서버 기능:

- AI가 스토리 생성/수정, 자산 업로드, 릴리스 롤백 등 가능.

- 42개 도구 제공 (스토리, 자산, 태그, 컴포넌트 등).

사용 예시: "스토리 123456789를 스페인어로 번역", "자산의 대체 텍스트 생성" 등.

3. 🎥 Demo

자연어 입력 예시:

- "스토리 123456789에 'Test' 태그 추가"

- "June Campaign 폴더의 모든 스토리를 출판"

AI가 자동으로 API 호출하여 작업 수행.

4. 🛠 Tech Stack

핵심 기술:

- Node.js + TypeScript (서버 및 도구 핸들링)

- pnpm (패키지 관리)

- MCP TypeScript SDK (MCP 프로토콜 구현)

- Storyblok API (CMS 프로그래밍적 제어)

- Gemini 2.0 Flash (AI 툴 텍스트 생성)

5. 🧩 How I Used Storyblok

Storyblok의 강점 활용:

- API-first 설계로 CMS 작업 유연성 제공.

- 모듈식 콘텐츠 관리를 통해 스토리, 자산, 태그 등 1차 요소로 처리.

AI 통합: update_story, fetch_assets, create_release 등의 API 호출 가능.

6. 🤖 AI Integration

AI의 역할:

- 자연어 명령을 API 호출로 변환 (예: "June Campaign 폴더의 스토리 출판").

- 문맥 유지, 롤백, 모糊한 슬러그/태그 검색 기능 제공.

보안 강화: Cursor에 토큰 저장으로 사용자 정보 유출 방지.

7. 📓 Learnings and Takeaways

개발 과정의 어려움:

- MCP 서버 구현 경험 없음, Storyblok API 연동에 시간 소요.

- Anmol Baranwal의 MCP 가이드를 참고해 구현 완료.

프로젝트의 가치:

- 시간 절약, CMS 작업의 매직화, AI 도구와의 호환성.

- 개발자, 마케터, 창작자 모두에게 유용.

8. 🏁 Final Thoughts

향후 개선 방향:

- AI 기능 확장, 사용자 맞춤형 도구 추가.

프로젝트 목적:

- AI와 CMS의 결합을 통해 작업 효율성 극대화.

- DEV.to Storyblok 챌린지 참여 프로젝트.

결론

Storyblok MCP 서버는 자연어를 통한 CMS 관리를 가능하게 하며, 보안성 강화된 Cursor 기반 토큰 관리를 지원합니다.
개발자는 Node.js + TypeScript 기반 코드를 확장해 사용할 수 있고, 마케터는 자동화된 작업 흐름을 경험할 수 있습니다.
실무 적용 시: Storyblok API와 MCP 프로토콜을 활용해 AI 도구와의 통합을 검토하고, Cursor를 통해 보안 관리를 강화하세요.